Skip to content

Commit

Permalink
feat: Add new props for Link component (#66)
Browse files Browse the repository at this point in the history
  • Loading branch information
RabbitDoge authored Nov 24, 2020
1 parent 73cd7b5 commit 28cbb64
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 15 deletions.
10 changes: 9 additions & 1 deletion src/components/Link/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { PancakesIcon } from "../Svg";
import Link from "./index";
import { Link, LinkExternal } from "./index";

export default {
title: "Link",
Expand All @@ -25,12 +25,20 @@ export const Default: React.FC = () => {
<div>
<Link href="/">Default</Link>
</div>
<div>
<Link external href="/">
External
</Link>
</div>
<div>
<Link href="/">
With icon
<PancakesIcon />
</Link>
</div>
<div>
<LinkExternal href="/">LinkExternal</LinkExternal>
</div>
</div>
);
};
32 changes: 28 additions & 4 deletions src/components/Link/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import React, { AnchorHTMLAttributes } from "react";
import styled from "styled-components";
import { AnchorHTMLAttributes } from "react";
import Text from "../Text";
import Text, { TextProps } from "../Text";
import OpenNewIcon from "../Svg/Icons/OpenNew";

const Link = styled(Text).attrs({ as: "a", bold: true })<AnchorHTMLAttributes<HTMLAnchorElement>>`
interface LinkProps extends TextProps, AnchorHTMLAttributes<HTMLAnchorElement> {
external?: boolean;
}

const StyledLink = styled(Text)<LinkProps>`
display: flex;
align-items: center;
color: ${({ theme }) => theme.colors.primary};
Expand All @@ -12,4 +17,23 @@ const Link = styled(Text).attrs({ as: "a", bold: true })<AnchorHTMLAttributes<HT
}
`;

export default Link;
const Link: React.FC<LinkProps> = ({ external, ...props }) => {
const internalProps = external
? {
target: "_blank",
rel: "noreferrer noopener",
}
: {};
return <StyledLink as="a" bold {...internalProps} {...props} />;
};

const LinkExternal: React.FC<LinkProps> = ({ children, ...props }) => {
return (
<Link external {...props}>
{children}
<OpenNewIcon color="primary" ml="4px" />
</Link>
);
};

export { Link, LinkExternal };
8 changes: 4 additions & 4 deletions src/components/Text/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@ import styled, { DefaultTheme } from "styled-components";
import { space, SpaceProps } from "styled-system";
import getThemeValue from "../../util/getThemeValue";

export interface Props extends SpaceProps {
export interface TextProps extends SpaceProps {
color?: string;
fontSize?: string;
bold?: boolean;
}

interface ThemedProps extends Props {
interface ThemedProps extends TextProps {
theme: DefaultTheme;
}

const getColor = ({ color, theme }: ThemedProps) => {
return getThemeValue(`colors.${color}`, color)(theme);
};

const getFontSize = ({ fontSize }: Props) => {
const getFontSize = ({ fontSize }: TextProps) => {
return fontSize || "16px";
};

const Text = styled.div<Props>`
const Text = styled.div<TextProps>`
color: ${getColor};
font-size: ${getFontSize};
font-weight: ${({ bold }) => (bold ? 600 : 400)};
Expand Down
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export * from "./components/Layouts";
export * from "./components/Svg";
export { default as Tag } from "./components/Tag";
export { default as Text } from "./components/Text";
export { default as Link } from "./components/Link";
export * from "./components/Link";
export { default as Toggle } from "./components/Toggle";
export { default as Progress } from "./components/Progress";
export { default as ResetCSS } from "./ResetCSS";
Expand Down
6 changes: 3 additions & 3 deletions src/widgets/Footer/index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React from "react";
import styled from "styled-components";
import Link from "../../components/Link";
import { Link } from "../../components/Link";
import config from "./config";

const StyledFooter = styled.footer`
display: flex;
justify-content: center;
flex-direction: column;
padding: 32px;
${Link}:not(:last-child) {
a:not(:last-child) {
margin-bottom: 16px;
}
${({ theme }) => theme.mediaQueries.sm} {
${Link}:not(:last-child) {
a:not(:last-child) {
margin-bottom: 0;
margin-right: 32px;
}
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/WalletModal/AccountModal.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import Button from "../../components/Button";
import Text from "../../components/Text";
import Link from "../../components/Link";
import { Link } from "../../components/Link";
import Flex from "../../components/Flex";
import { OpenNewIcon } from "../../components/Svg";
import { Modal } from "../Modal";
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/WalletModal/ConnectModal.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
import Link from "../../components/Link";
import { Link } from "../../components/Link";
import { HelpIcon } from "../../components/Svg";
import { Modal } from "../Modal";
import WalletCard from "./WalletCard";
Expand Down

0 comments on commit 28cbb64

Please sign in to comment.