diff --git a/src/atoms/button/button.stories.tsx b/src/atoms/button/button.stories.tsx index 11152c9..8e8f60e 100644 --- a/src/atoms/button/button.stories.tsx +++ b/src/atoms/button/button.stories.tsx @@ -22,7 +22,6 @@ export const tertiary = () => ( export const disabled = () => ( - {/** TODO: Box it! */} @@ -34,3 +33,11 @@ export const disabled = () => ( ); + +export const loading = () => +); diff --git a/src/atoms/button/button.tsx b/src/atoms/button/button.tsx index 3e31fc5..bd37631 100644 --- a/src/atoms/button/button.tsx +++ b/src/atoms/button/button.tsx @@ -11,9 +11,11 @@ import { typography, TypographyProps, } from 'styled-system'; - import { Theme, theme } from '../../theme'; import { StyleFunction } from '../../utils/types'; +import { Flex } from '../flex/flex'; +import { Icon, IconOptions } from '../icon/icon'; +import { Paragraph } from '../paragraph/paragraph'; const defaultStyle = ({ theme: { @@ -130,6 +132,9 @@ type ButtonVariant = 'primary' | 'secondary' | 'tertiary'; interface Props { variant: ButtonVariant; + loading: boolean; + icon: IconOptions; + iconColor: string; } export type ButtonProps = Props & @@ -155,8 +160,31 @@ const StyledButton = styled.button` `; // ts-ignore to fix type inconsistency because of color -// @ts-ignore -export const Button = (props: ButtonProps) => ; +export const Button = (props: ButtonProps) => + props.icon ? ( + // @ts-ignore + + + + + + {props.children} + + + + + ) : props.loading ? ( + // @ts-ignore + + + + Loading + + + ) : ( + // @ts-ignore + + ); Button.defaultProps = { theme, @@ -168,4 +196,7 @@ Button.defaultProps = { height: '40px', px: 3, py: 2, + loading: false, + icon: '', + iconColor: 'primary.8', }; diff --git a/src/atoms/icon/email-svg.tsx b/src/atoms/icon/email-svg.tsx new file mode 100644 index 0000000..3095506 --- /dev/null +++ b/src/atoms/icon/email-svg.tsx @@ -0,0 +1,11 @@ +import React, { FunctionComponent } from 'react'; +import { IconProps, StyledIcon } from './icon'; + +export const EmailSVG: FunctionComponent = (props) => { + return ( + // @ts-ignore + + + + ); +}; diff --git a/src/atoms/icon/icon.stories.tsx b/src/atoms/icon/icon.stories.tsx index 3d60173..0763f53 100644 --- a/src/atoms/icon/icon.stories.tsx +++ b/src/atoms/icon/icon.stories.tsx @@ -1,14 +1,22 @@ import React from 'react'; import { atom } from '../../utils/structure'; -import { EmailIcon } from './icon'; +import { Icon } from './icon'; import { Box } from '../box/box'; +import { Flex } from '../flex/flex'; export default { title: atom('Icon') }; export const email = () => ( - - + + ); + +export const loading = () => ( + + + + +); diff --git a/src/atoms/icon/icon.tsx b/src/atoms/icon/icon.tsx index 83d845b..ddc168f 100644 --- a/src/atoms/icon/icon.tsx +++ b/src/atoms/icon/icon.tsx @@ -1,71 +1,37 @@ // @ts-ignore import { themeGet } from '@styled-system/theme-get'; -import React, { HTMLProps, ReactNode } from 'react'; +import React, { HTMLProps } from 'react'; import styled, { ThemeProps } from 'styled-components'; -import { color, ColorProps, compose, layout, LayoutProps, size, SizeProps } from 'styled-system'; import { theme, Theme } from '../../theme'; +import { EmailSVG } from './email-svg'; +import { LoadingSVG } from './loading-svg'; +import { Box } from '../box/box'; -export type IconVariant = 'fill' | 'outline'; -export interface Props { - variant: IconVariant; -} - -export type IconProps = Props & ThemeProps & ColorProps & LayoutProps & SizeProps & HTMLProps; +export type IconOptions = 'email' | 'loading'; -interface Icons { - filledIcon: ReactNode; - outlinedIcon: ReactNode; +export interface Props { + option?: IconOptions; + color: string; } -type IconPropsWithIcons = IconProps & Icons; -const styledProps = compose( - color, - layout, - size, -); +export type IconProps = Props & ThemeProps & HTMLProps; -const StyledIcon = styled.svg` +export const StyledIcon = styled.svg` fill: ${({ color }: IconProps) => themeGet(`colors.${color}`, color)}; - ${styledProps}; `; -const Icon = ({ filledIcon, outlinedIcon, ...props }: IconPropsWithIcons) => { - // @ts-ignore - return {props.variant === 'fill' ? filledIcon : outlinedIcon}; +export const Icon = ({ option, ...props }: IconProps) => { + return option === 'email' ? ( + + ) : option === 'loading' ? ( + + ) : ( + Icon not found + ); }; Icon.defaultProps = { theme, - size: 'iconSmall', - color: 'primary.4', - variant: 'fill', -}; - -const EmailFill = () => ( - - - - - - -); - -const EmailOutline = () => ( - - - - - - -); - -export const EmailIcon = (props: IconProps) => { - return } outlinedIcon={} />; -}; - -EmailIcon.defaultProps = { - theme, - size: 'iconSmall', color: 'primary.4', - variant: 'fill', + width: '24px', }; diff --git a/src/atoms/icon/loading-svg.tsx b/src/atoms/icon/loading-svg.tsx new file mode 100644 index 0000000..447e1ad --- /dev/null +++ b/src/atoms/icon/loading-svg.tsx @@ -0,0 +1,41 @@ +// @ts-ignore +import { themeGet } from '@styled-system/theme-get'; +import React, { FunctionComponent } from 'react'; +import { IconProps, StyledIcon } from './icon'; + +export const LoadingSVG: FunctionComponent = (props: IconProps) => { + return ( + //@ts-ignore + + + + + + + ); +}; diff --git a/src/components/text-input/text-input.stories.tsx b/src/components/text-input/text-input.stories.tsx index b7b3385..3fab5ed 100644 --- a/src/components/text-input/text-input.stories.tsx +++ b/src/components/text-input/text-input.stories.tsx @@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react'; import { TextInput } from './text-input'; import { component } from '../../utils/structure'; import { action } from '@storybook/addon-actions'; -import { EmailIcon } from '../../atoms/icon/icon'; +import { Icon } from '../../atoms/icon/icon'; import { Paragraph, Anchor } from '../../atoms'; export default { title: component('TextInput') }; @@ -26,18 +26,23 @@ export const withOnChange = () => { ); }; export const withIcon = () => ( - } /> + } /> ); export const withIconDisabled = () => ( - } disabled /> + } + disabled + /> ); export const withIconError = () => ( } + icon={} error="Too short" /> ); @@ -47,7 +52,7 @@ export const withIconAndText = () => ( label="Hand size" placeholder="Type here..." help="We handle this information privately" - icon={} + icon={} /> ); @@ -63,7 +68,7 @@ export const withIconAndComplexHelp = () => ( } - icon={} + icon={} /> ); @@ -80,6 +85,6 @@ export const withIconAndComplexHelpAndError = () => ( } - icon={} + icon={} /> ); diff --git a/src/components/text-input/text-input.tsx b/src/components/text-input/text-input.tsx index af0346c..bb10151 100644 --- a/src/components/text-input/text-input.tsx +++ b/src/components/text-input/text-input.tsx @@ -56,7 +56,7 @@ const StyledInputContainer = styled(Flex)` } & > input:disabled ~ div > svg { - fill: ${({ theme: { colors } }: StyledInputContainerProps) => colors.neutral[5]}; + fill: ${({ theme: { colors } }: StyledInputContainerProps) => colors.neutral[2]}; } `;