From 797411240b7d714d03d046dc1d5ae5386ff3ce94 Mon Sep 17 00:00:00 2001 From: oxaudo <oksana@artsymail.com> Date: Wed, 21 Nov 2018 16:18:55 -0500 Subject: [PATCH 1/2] add Link element --- docs/Link.mdx | 22 ++++++++++++++++++++++ src/elements/Link/Link.tsx | 33 +++++++++++++++++++++++++++++++++ src/elements/Link/index.tsx | 1 + src/elements/index.tsx | 1 + 4 files changed, 57 insertions(+) create mode 100644 docs/Link.mdx create mode 100644 src/elements/Link/Link.tsx create mode 100644 src/elements/Link/index.tsx diff --git a/docs/Link.mdx b/docs/Link.mdx new file mode 100644 index 000000000..bb6782702 --- /dev/null +++ b/docs/Link.mdx @@ -0,0 +1,22 @@ +--- +name: Link +--- + +import { Playground, PropsTable } from 'docz' +import { Box, Link } from '../src' + +# Link + +<Playground> + <Box> + <Link>This is a default link</Link> + </Box> + <Box> + <Link noUnderline>This is a non-underlined link</Link> + </Box> + <Box> + <Link color="purple100">This is a non-standard color link</Link> + </Box> +</Playground> + +<PropsTable of={Link} /> \ No newline at end of file diff --git a/src/elements/Link/Link.tsx b/src/elements/Link/Link.tsx new file mode 100644 index 000000000..de28bd444 --- /dev/null +++ b/src/elements/Link/Link.tsx @@ -0,0 +1,33 @@ +import styled from "styled-components" +import { + color as styledColor, + ColorProps, + space, + SpaceProps, +} from "styled-system" +import { color } from "../../helpers" + +export interface LinkProps extends SpaceProps, ColorProps { + noUnderline?: boolean +} + +/** + * Basic a tag + */ +export const Link = styled.a<LinkProps>` + ${space}; + ${styledColor}; + text-decoration: ${props => + props.noUnderline || props.color ? "none" : "underline"}; + cursor: pointer; + transition: color 0.25s; + :hover { + text-decoration: ${props => (props.color ? "none" : "underline")}; + color: ${color("black100")}; + } + :focus { + border: 1px solid ${color("purple100")}; + color: ${props => + props.color ? color(props.color as any) : color("black100")}; + } +` diff --git a/src/elements/Link/index.tsx b/src/elements/Link/index.tsx new file mode 100644 index 000000000..459c7bf47 --- /dev/null +++ b/src/elements/Link/index.tsx @@ -0,0 +1 @@ +export * from "./Link" diff --git a/src/elements/index.tsx b/src/elements/index.tsx index 5994a106b..ec2b1376b 100644 --- a/src/elements/index.tsx +++ b/src/elements/index.tsx @@ -10,6 +10,7 @@ export * from "./Flex" export * from "./Image" export * from "./Join" export * from "./Message" +export * from "./Link" export * from "./Radio" export * from "./RadioGroup" export * from "./Select" From 656ea6851316bd1a61ec4ab975ca3fb1951a9ded Mon Sep 17 00:00:00 2001 From: oxaudo <oksana@artsymail.com> Date: Mon, 26 Nov 2018 11:11:29 -0500 Subject: [PATCH 2/2] add placeholder for ios link file --- src/elements/Link/Link.ios.tsx | 0 src/elements/Link/Link.tsx | 22 +++++++++------------- 2 files changed, 9 insertions(+), 13 deletions(-) create mode 100644 src/elements/Link/Link.ios.tsx diff --git a/src/elements/Link/Link.ios.tsx b/src/elements/Link/Link.ios.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/elements/Link/Link.tsx b/src/elements/Link/Link.tsx index de28bd444..8887cbd76 100644 --- a/src/elements/Link/Link.tsx +++ b/src/elements/Link/Link.tsx @@ -1,14 +1,11 @@ import styled from "styled-components" -import { - color as styledColor, - ColorProps, - space, - SpaceProps, -} from "styled-system" +import { color as styledColor, space, SpaceProps } from "styled-system" import { color } from "../../helpers" +import { Color } from "../../Theme" -export interface LinkProps extends SpaceProps, ColorProps { +export interface LinkProps extends SpaceProps { noUnderline?: boolean + color?: Color } /** @@ -17,17 +14,16 @@ export interface LinkProps extends SpaceProps, ColorProps { export const Link = styled.a<LinkProps>` ${space}; ${styledColor}; - text-decoration: ${props => - props.noUnderline || props.color ? "none" : "underline"}; cursor: pointer; transition: color 0.25s; - :hover { + text-decoration: ${props => + props.noUnderline || props.color ? "none" : "underline"}; + &:hover { text-decoration: ${props => (props.color ? "none" : "underline")}; color: ${color("black100")}; } - :focus { + &:focus { border: 1px solid ${color("purple100")}; - color: ${props => - props.color ? color(props.color as any) : color("black100")}; + color: ${props => (props.color ? color(props.color) : color("black100"))}; } `