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 + + + + This is a default link + + + This is a non-underlined link + + + This is a non-standard color link + + + + \ No newline at end of file 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 new file mode 100644 index 000000000..8887cbd76 --- /dev/null +++ b/src/elements/Link/Link.tsx @@ -0,0 +1,29 @@ +import styled from "styled-components" +import { color as styledColor, space, SpaceProps } from "styled-system" +import { color } from "../../helpers" +import { Color } from "../../Theme" + +export interface LinkProps extends SpaceProps { + noUnderline?: boolean + color?: Color +} + +/** + * Basic a tag + */ +export const Link = styled.a` + ${space}; + ${styledColor}; + cursor: pointer; + transition: color 0.25s; + text-decoration: ${props => + props.noUnderline || props.color ? "none" : "underline"}; + &:hover { + text-decoration: ${props => (props.color ? "none" : "underline")}; + color: ${color("black100")}; + } + &:focus { + border: 1px solid ${color("purple100")}; + color: ${props => (props.color ? color(props.color) : 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"