diff --git a/src/colors.stories.tsx b/src/colors.stories.tsx index dfb97db6..7caa68ac 100644 --- a/src/colors.stories.tsx +++ b/src/colors.stories.tsx @@ -26,7 +26,7 @@ const ColorDisplay = styled.div<{ color: string }>` `; export default { - title: 'Colors', + title: 'Utils/Colors', }; export const ColorsSample = (): React.ReactElement => { diff --git a/src/inputs/Link/index.stories.tsx b/src/inputs/Link/index.stories.tsx new file mode 100644 index 00000000..0b892c35 --- /dev/null +++ b/src/inputs/Link/index.stories.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import styled from 'styled-components'; + +import Link from './index'; +import { Icon } from '../../'; + +export default { + title: 'inputs/Link', + component: Link, + parameters: { + componentSubtitle: 'Link component.', + }, +}; + +export const Default = (): React.ReactElement => ( + Some text +); + +export const withColor = (): React.ReactElement => ( + + Some text + +); + +export const WithCustomSize = (): React.ReactElement => ( + + Some text + +); + +const Wrapper = styled.div` + display: flex; + align-items: center; +`; + +export const WithCustomChild = (): React.ReactElement => ( + + + + Some text + + +); diff --git a/src/inputs/Link/index.tsx b/src/inputs/Link/index.tsx new file mode 100644 index 00000000..bd3bc333 --- /dev/null +++ b/src/inputs/Link/index.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import styled from 'styled-components'; + +import { ThemeColors, ThemeTextSize } from '../../theme'; + +export interface Props extends React.AnchorHTMLAttributes { + size?: ThemeTextSize; + color?: ThemeColors; +} + +const StyledLink = styled.a` + text-decoration: underline; + cursor: pointer; + color: ${({ theme, color = 'primary' }) => theme['colors'][color]}; + font-family: inherit; + font-size: ${({ size = 'md', theme }) => theme.text.size[size].fontSize}; +`; + +const Link: React.FC = ({ children, ...rest }): React.ReactElement => { + return {children}; +}; + +export default Link;