Skip to content
Permalink
Browse files

feat(icons): adding close, error, information, warning (#239)

* feat(icons): adding close, error, information, warning

* fix(icons): storybook color issue and better knobs
  • Loading branch information
TheSisb committed Dec 19, 2019
1 parent 4fccf83 commit f9b632b55d44bf3df07755a2ff4f57646365abcc
@@ -1,24 +1,33 @@

import * as React from 'react';
import {Text} from '@twilio-paste/text';
import {IconSize, TextColor} from '@twilio-paste/types';
import {Grid, StoryIcon} from './__StoryStyles';

import {CloseIcon} from './src/CloseIcon';
import {CopyIcon} from './src/CopyIcon';
import {ErrorIcon} from './src/ErrorIcon';
import {InformationIcon} from './src/InformationIcon';
import {LoadingIcon} from './src/LoadingIcon';
import {PlusIcon} from './src/PlusIcon';
import {WarningIcon} from './src/WarningIcon';

interface IconProps {
title?: string;
decorative: boolean;
size?: number;
color?: string;
size?: IconSize;
iconColor?: TextColor;
}

const IconList: React.FC<IconProps> = props => (
<Grid>
<StoryIcon><CopyIcon {...props} /><Text as="p">CopyIcon</Text></StoryIcon>
<StoryIcon><LoadingIcon {...props} /><Text as="p">LoadingIcon</Text></StoryIcon>
<StoryIcon><PlusIcon {...props} /><Text as="p">PlusIcon</Text></StoryIcon>
<StoryIcon><CloseIcon {...props} /><Text as="p" textColor="currentColor">CloseIcon</Text></StoryIcon>
<StoryIcon><CopyIcon {...props} /><Text as="p" textColor="currentColor">CopyIcon</Text></StoryIcon>
<StoryIcon><ErrorIcon {...props} /><Text as="p" textColor="currentColor">ErrorIcon</Text></StoryIcon>
<StoryIcon><InformationIcon {...props} /><Text as="p" textColor="currentColor">InformationIcon</Text></StoryIcon>
<StoryIcon><LoadingIcon {...props} /><Text as="p" textColor="currentColor">LoadingIcon</Text></StoryIcon>
<StoryIcon><PlusIcon {...props} /><Text as="p" textColor="currentColor">PlusIcon</Text></StoryIcon>
<StoryIcon><WarningIcon {...props} /><Text as="p" textColor="currentColor">WarningIcon</Text></StoryIcon>
</Grid>
);

@@ -12,6 +12,7 @@ const StoryIcon = styled('div')`
const Grid = styled('div')`
display: grid;
grid-template-columns: repeat(4, 1fr);
color: #000;
`;

export {Grid, StoryIcon};
@@ -1,16 +1,26 @@
import * as React from 'react';
import {storiesOf} from '@storybook/react';
import {IconSize, TextColor} from '@twilio-paste/types';
import {DefaultTheme} from '@twilio-paste/theme-tokens';

import {withKnobs, number, text, boolean} from '@storybook/addon-knobs';
import {withKnobs, select, text, boolean} from '@storybook/addon-knobs';
import {IconList} from './__IconList';

const IconColorOptions = Object.keys(DefaultTheme.textColors);
const SizeOptions = Object.keys(DefaultTheme.iconSizes);

storiesOf('Overview|Icons', module)
.addDecorator(withKnobs)
.add('List', () => (
<IconList
size={number('size', 24)}
color={text('color', '#000')}
title={text('title', 'Icon text')}
decorative={boolean('decorative', true)}
/>
));
.add('List', () => {
const sizeValue = select('size', SizeOptions, 'sizeIcon20') as IconSize;
const iconColorValue = select('iconColor', IconColorOptions, 'currentColor') as TextColor;

return (
<IconList
size={sizeValue}
iconColor={iconColorValue}
title={text('title', 'Icon text')}
decorative={boolean('decorative', true)}
/>
);
});

Some generated files are not rendered by default. Learn more.

@@ -0,0 +1,37 @@
/**
* This file was automatically generated with @twilio-labs/svg-to-react
*/
import * as React from 'react';
import {UID} from 'react-uid';
import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper';

export interface CloseIconProps extends IconWrapperProps {
title?: string;
decorative: boolean;
}

const CloseIcon: React.FC<CloseIconProps> = ({as, size, iconColor, title, decorative}) => {
if (!decorative && title == null) {
throw new Error('[CloseIcon]: Missing a title for non-decorative icon.');
}

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
{title ? <title id={uid}>{title}</title> : null}
<path
fill="currentColor"
fillRule="evenodd"
d="M.67.847L.753.753A1 1 0 012.073.67l.094.083 9.835 9.835L21.836.753a1 1 0 011.32-.083l.094.083a1 1 0 01.084 1.32l-.084.094-9.834 9.835 9.834 9.834a1 1 0 01.084 1.32l-.084.094a1 1 0 01-1.32.084l-.094-.084-9.834-9.834-9.835 9.834a1 1 0 01-1.32.084l-.094-.084a1 1 0 01-.083-1.32l.083-.094 9.835-9.834L.753 2.167A1 1 0 01.67.847L.753.753.67.847z"
/>
</svg>
)}
</UID>
</IconWrapper>
);
};

CloseIcon.displayName = 'CloseIcon';
export {CloseIcon};
@@ -0,0 +1,37 @@
/**
* This file was automatically generated with @twilio-labs/svg-to-react
*/
import * as React from 'react';
import {UID} from 'react-uid';
import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper';

export interface ErrorIconProps extends IconWrapperProps {
title?: string;
decorative: boolean;
}

const ErrorIcon: React.FC<ErrorIconProps> = ({as, size, iconColor, title, decorative}) => {
if (!decorative && title == null) {
throw new Error('[ErrorIcon]: Missing a title for non-decorative icon.');
}

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
{title ? <title id={uid}>{title}</title> : null}
<path
fill="currentColor"
fillRule="evenodd"
d="M19.778 4.222c4.296 4.296 4.296 11.26 0 15.556-4.296 4.296-11.26 4.296-15.556 0-4.296-4.296-4.296-11.26 0-15.556 4.296-4.296 11.26-4.296 15.556 0zM5.636 5.636a9.001 9.001 0 00-.668 11.982l12.65-12.65a9.001 9.001 0 00-11.982.668zm13.397.747l-12.65 12.65a9.001 9.001 0 0012.65-12.65z"
/>
</svg>
)}
</UID>
</IconWrapper>
);
};

ErrorIcon.displayName = 'ErrorIcon';
export {ErrorIcon};
@@ -0,0 +1,37 @@
/**
* This file was automatically generated with @twilio-labs/svg-to-react
*/
import * as React from 'react';
import {UID} from 'react-uid';
import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper';

export interface InformationIconProps extends IconWrapperProps {
title?: string;
decorative: boolean;
}

const InformationIcon: React.FC<InformationIconProps> = ({as, size, iconColor, title, decorative}) => {
if (!decorative && title == null) {
throw new Error('[InformationIcon]: Missing a title for non-decorative icon.');
}

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
{title ? <title id={uid}>{title}</title> : null}
<path
fill="currentColor"
fillRule="evenodd"
d="M12.002.48c6.362 0 11.521 5.159 11.521 11.522s-5.159 11.521-11.521 11.521C5.638 23.523.48 18.365.48 12.002.48 5.638 5.638.48 12.002.48zm0 2a9.521 9.521 0 00-9.522 9.522 9.521 9.521 0 009.522 9.521c5.258 0 9.521-4.263 9.521-9.521 0-5.259-4.263-9.522-9.521-9.522zm.301 7.609a1 1 0 011 1v5.608h1.866a1 1 0 01.993.884l.007.116a1 1 0 01-1 1H9.43a1 1 0 110-2h1.873v-4.608h-.913a1 1 0 010-2zm-.475-4.305a1.478 1.478 0 110 2.956 1.478 1.478 0 010-2.956z"
/>
</svg>
)}
</UID>
</IconWrapper>
);
};

InformationIcon.displayName = 'InformationIcon';
export {InformationIcon};
@@ -0,0 +1,37 @@
/**
* This file was automatically generated with @twilio-labs/svg-to-react
*/
import * as React from 'react';
import {UID} from 'react-uid';
import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper';

export interface WarningIconProps extends IconWrapperProps {
title?: string;
decorative: boolean;
}

const WarningIcon: React.FC<WarningIconProps> = ({as, size, iconColor, title, decorative}) => {
if (!decorative && title == null) {
throw new Error('[WarningIcon]: Missing a title for non-decorative icon.');
}

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
{title ? <title id={uid}>{title}</title> : null}
<path
fill="currentColor"
fillRule="evenodd"
d="M12.897 1.033L23.42 22.076a1 1 0 01-.894 1.447H1.48a1 1 0 01-.894-1.447L11.109 1.033a1 1 0 011.788 0zm-.894 2.683L3.099 21.523h17.808L12.003 3.716zm0 13.486a1.478 1.478 0 110 2.957 1.478 1.478 0 010-2.957zm0-8.401c.552 0 1 .336 1 .751v5.498c0 .415-.448.75-1 .75s-1-.335-1-.75V9.552c0-.415.448-.751 1-.751z"
/>
</svg>
)}
</UID>
</IconWrapper>
);
};

WarningIcon.displayName = 'WarningIcon';
export {WarningIcon};
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#666A6D" fill-rule="evenodd" d="M0.669704612,0.847100557 L0.752893219,0.752893219 C1.11337718,0.392409257 1.68060824,0.364679722 2.07289944,0.669704612 L2.16710678,0.752893219 L12.0016667,10.5876667 L21.8362266,0.752893219 C22.1967105,0.392409257 22.7639416,0.364679722 23.1562328,0.669704612 L23.2504401,0.752893219 C23.6109241,1.11337718 23.6386536,1.68060824 23.3336287,2.07289944 L23.2504401,2.16710678 L13.4156667,12.0016667 L23.2504401,21.8362266 C23.6109241,22.1967105 23.6386536,22.7639416 23.3336287,23.1562328 L23.2504401,23.2504401 C22.8899562,23.6109241 22.3227251,23.6386536 21.9304339,23.3336287 L21.8362266,23.2504401 L12.0016667,13.4156667 L2.16710678,23.2504401 C1.80662282,23.6109241 1.23939176,23.6386536 0.847100557,23.3336287 L0.752893219,23.2504401 C0.392409257,22.8899562 0.364679722,22.3227251 0.669704612,21.9304339 L0.752893219,21.8362266 L10.5876667,12.0016667 L0.752893219,2.16710678 C0.392409257,1.80662282 0.364679722,1.23939176 0.669704612,0.847100557 L0.752893219,0.752893219 L0.669704612,0.847100557 Z"/>
</svg>
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#666A6D" fill-rule="evenodd" d="M19.7781746,4.22182541 C24.0739418,8.51759262 24.0739418,15.4824074 19.7781746,19.7781746 C15.4824074,24.0739418 8.51759262,24.0739418 4.22182541,19.7781746 C-0.0739418021,15.4824074 -0.0739418021,8.51759262 4.22182541,4.22182541 C8.51759262,-0.0739418021 15.4824074,-0.0739418021 19.7781746,4.22182541 Z M5.63603897,5.63603897 C2.3602553,8.91182264 2.13756344,14.0845544 4.9679634,17.6182518 L17.6182518,4.9679634 C14.0845544,2.13756344 8.91182264,2.3602553 5.63603897,5.63603897 Z M19.0326647,6.38253242 L6.38253242,19.0326647 C9.91621093,21.8624036 15.0884197,21.6395024 18.363961,18.363961 C21.6395024,15.0884197 21.8624036,9.91621093 19.0326647,6.38253242 Z"/>
</svg>
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#666A6D" fill-rule="evenodd" d="M12.0017391,0.48 C18.3642532,0.48 23.5234783,5.63890109 23.5234783,12.0017391 C23.5234783,18.3645772 18.3642532,23.5234783 12.0017391,23.5234783 C5.63794459,23.5234783 0.48,18.3652098 0.48,12.0017391 C0.48,5.6382685 5.63794459,0.48 12.0017391,0.48 Z M12.0017391,2.48 C6.7425422,2.48 2.48,6.74280988 2.48,12.0017391 C2.48,17.2606684 6.7425422,21.5234783 12.0017391,21.5234783 C17.2597118,21.5234783 21.5234783,17.2599796 21.5234783,12.0017391 C21.5234783,6.7434987 17.2597118,2.48 12.0017391,2.48 Z M12.3030435,10.0886957 C12.8553282,10.0886957 13.3030435,10.5364109 13.3030435,11.0886957 L13.3030435,11.0886957 L13.303,16.697 L15.1691304,16.6973913 C15.6819663,16.6973913 16.1046376,17.0834315 16.1624027,17.5807702 L16.1691304,17.6973913 C16.1691304,18.2496761 15.7214152,18.6973913 15.1691304,18.6973913 L15.1691304,18.6973913 L9.43,18.6973913 C8.87771525,18.6973913 8.43,18.2496761 8.43,17.6973913 C8.43,17.1451066 8.87771525,16.6973913 9.43,16.6973913 L9.43,16.6973913 L11.303,16.697 L11.3030435,12.0886957 L10.39,12.0886957 C9.83771525,12.0886957 9.39,11.6409804 9.39,11.0886957 C9.39,10.5364109 9.83771525,10.0886957 10.39,10.0886957 L10.39,10.0886957 Z M11.8282609,5.78434783 C12.6435891,5.78434783 13.3065217,6.44728047 13.3065217,7.2626087 C13.3065217,8.07980963 12.6436331,8.74086957 11.8282609,8.74086957 C11.0110196,8.74086957 10.35,8.07984997 10.35,7.2626087 C10.35,6.44723642 11.0110599,5.78434783 11.8282609,5.78434783 Z"/>
</svg>
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#666A6D" fill-rule="evenodd" d="M12.8974565,1.0327864 L23.4191957,22.0762647 C23.7516462,22.7411658 23.2681505,23.5234783 22.5247685,23.5234783 L1.48129021,23.5234783 C0.73790819,23.5234783 0.254412474,22.7411658 0.58686302,22.0762647 L11.1086022,1.0327864 C11.4771264,0.295737865 12.5289323,0.295737865 12.8974565,1.0327864 Z M12.0030293,3.71606798 L3.0993242,21.5234783 L20.9067345,21.5234783 L12.0030293,3.71606798 Z M12.0030293,17.2017391 C12.8193141,17.2017391 13.4812902,17.8637153 13.4812902,18.68 C13.4812902,19.4962847 12.8193141,20.1582609 12.0030293,20.1582609 C11.1867446,20.1582609 10.5247685,19.4962847 10.5247685,18.68 C10.5247685,17.8637153 11.1867446,17.2017391 12.0030293,17.2017391 Z M12.0030293,8.80093043 C12.5553141,8.80093043 13.0030293,9.13722235 13.0030293,9.55205946 L13.0030293,9.55205946 L13.0030293,15.0498014 C13.0030293,15.4646385 12.5553141,15.8009304 12.0030293,15.8009304 C11.4507446,15.8009304 11.0030293,15.4646385 11.0030293,15.0498014 L11.0030293,15.0498014 L11.0030293,9.55205946 C11.0030293,9.13722235 11.4507446,8.80093043 12.0030293,8.80093043 Z"/>
</svg>
@@ -10,21 +10,23 @@ const storybookListTemplate = iconList => {
const importIconList = mapIconList(iconList, iconName => `import {${iconName}} from './src/${iconName}';`);
const renderedIconList = mapIconList(
iconList,
iconName => `<StoryIcon><${iconName} {...props} /><Text as="p">${iconName}</Text></StoryIcon>`
iconName =>
`<StoryIcon><${iconName} {...props} /><Text as="p" textColor="currentColor">${iconName}</Text></StoryIcon>`
);

return `
import * as React from 'react';
import {Text} from '@twilio-paste/text';
import {IconSize, TextColor} from '@twilio-paste/types';
import {Grid, StoryIcon} from './__StoryStyles';
${importIconList}
interface IconProps {
title?: string;
decorative: boolean;
size?: number;
color?: string;
size?: IconSize;
iconColor?: TextColor;
}
const IconList: React.FC<IconProps> = props => (

1 comment on commit f9b632b

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.