From 4c9027d1a673b0d0f90c8df8856b322c7ae9e6f2 Mon Sep 17 00:00:00 2001 From: richbachman Date: Wed, 1 Jul 2020 18:01:09 -0600 Subject: [PATCH] feat(icons): add display prop --- packages/paste-icons/README.md | 5 +++-- packages/paste-icons/src/ArrowBackIcon.tsx | 4 ++-- packages/paste-icons/src/ArrowDownIcon.tsx | 4 ++-- packages/paste-icons/src/ArrowForwardIcon.tsx | 4 ++-- packages/paste-icons/src/ArrowUpIcon.tsx | 4 ++-- packages/paste-icons/src/AttachIcon.tsx | 4 ++-- packages/paste-icons/src/CheckmarkCircleIcon.tsx | 4 ++-- packages/paste-icons/src/ChevronDownIcon.tsx | 4 ++-- packages/paste-icons/src/ChevronLeftIcon.tsx | 4 ++-- packages/paste-icons/src/ChevronRightIcon.tsx | 4 ++-- packages/paste-icons/src/ChevronUpIcon.tsx | 4 ++-- packages/paste-icons/src/CloseIcon.tsx | 4 ++-- packages/paste-icons/src/CopyIcon.tsx | 4 ++-- packages/paste-icons/src/DeleteIcon.tsx | 4 ++-- packages/paste-icons/src/DownloadIcon.tsx | 4 ++-- packages/paste-icons/src/ErrorIcon.tsx | 4 ++-- packages/paste-icons/src/InformationIcon.tsx | 4 ++-- packages/paste-icons/src/LinkExternalIcon.tsx | 4 ++-- packages/paste-icons/src/LoadingIcon.tsx | 4 ++-- packages/paste-icons/src/MoreIcon.tsx | 4 ++-- packages/paste-icons/src/PlusIcon.tsx | 4 ++-- packages/paste-icons/src/ProductTwilioOrgIcon.tsx | 11 +++++++++-- packages/paste-icons/src/SuccessIcon.tsx | 4 ++-- packages/paste-icons/src/UploadToCloudIcon.tsx | 4 ++-- packages/paste-icons/src/WarningIcon.tsx | 4 ++-- packages/paste-icons/src/helpers/IconWrapper.tsx | 12 ++++++------ .../paste-icons/tools/templates/reactIconTemplate.js | 6 +++--- 27 files changed, 67 insertions(+), 59 deletions(-) diff --git a/packages/paste-icons/README.md b/packages/paste-icons/README.md index fe2c888615..9593408831 100644 --- a/packages/paste-icons/README.md +++ b/packages/paste-icons/README.md @@ -14,14 +14,15 @@ import AssetsIcon from '@twilio-paste/icons/react/AssetsIcon'; // import AssetsSvg from '@twilio-paste/icons/svg/assets.svg'; // Note: make sure you have the webpack loader for loading svgs. -; +; ``` ### Standard Props | Prop | Type | Description | Default | | ---------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -| decorative | boolean | Whether or not the SVG is just visual flair or adds meaning to the page. Specifically for screenreaders to know whether to read out the title or not. | true | +| decorative | boolean | Whether or not the SVG is just visual flair or adds meaning to the page. Specifically for screenreaders to know whether to read out the title or not. | true +| display? | `ResponsiveValue` | | inline-flex | title? | string | The accesibility text that is read when screenreaders get to this component | Component name | | size? | IconSize | The width and height value (all icons are square) in pixels | sizeIcon20 | | iconColor? | TextColor | The color of your icon | currentColor - whatever is the font-color inherited from up the DOM tree | diff --git a/packages/paste-icons/src/ArrowBackIcon.tsx b/packages/paste-icons/src/ArrowBackIcon.tsx index 9c339bff31..eb8fb600fb 100644 --- a/packages/paste-icons/src/ArrowBackIcon.tsx +++ b/packages/paste-icons/src/ArrowBackIcon.tsx @@ -10,13 +10,13 @@ export interface ArrowBackIconProps extends IconWrapperProps { decorative: boolean; } -const ArrowBackIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const ArrowBackIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[ArrowBackIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/ArrowDownIcon.tsx b/packages/paste-icons/src/ArrowDownIcon.tsx index bcee154de8..5c7c76e363 100644 --- a/packages/paste-icons/src/ArrowDownIcon.tsx +++ b/packages/paste-icons/src/ArrowDownIcon.tsx @@ -10,13 +10,13 @@ export interface ArrowDownIconProps extends IconWrapperProps { decorative: boolean; } -const ArrowDownIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const ArrowDownIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[ArrowDownIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/ArrowForwardIcon.tsx b/packages/paste-icons/src/ArrowForwardIcon.tsx index ac1decd144..bd3aa42a4e 100644 --- a/packages/paste-icons/src/ArrowForwardIcon.tsx +++ b/packages/paste-icons/src/ArrowForwardIcon.tsx @@ -10,13 +10,13 @@ export interface ArrowForwardIconProps extends IconWrapperProps { decorative: boolean; } -const ArrowForwardIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const ArrowForwardIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[ArrowForwardIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/ArrowUpIcon.tsx b/packages/paste-icons/src/ArrowUpIcon.tsx index 107cac95b0..ac8f0a6812 100644 --- a/packages/paste-icons/src/ArrowUpIcon.tsx +++ b/packages/paste-icons/src/ArrowUpIcon.tsx @@ -10,13 +10,13 @@ export interface ArrowUpIconProps extends IconWrapperProps { decorative: boolean; } -const ArrowUpIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const ArrowUpIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[ArrowUpIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/AttachIcon.tsx b/packages/paste-icons/src/AttachIcon.tsx index 6860edf3a4..0b4aa8599f 100644 --- a/packages/paste-icons/src/AttachIcon.tsx +++ b/packages/paste-icons/src/AttachIcon.tsx @@ -10,13 +10,13 @@ export interface AttachIconProps extends IconWrapperProps { decorative: boolean; } -const AttachIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const AttachIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[AttachIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/CheckmarkCircleIcon.tsx b/packages/paste-icons/src/CheckmarkCircleIcon.tsx index 81ed0620a2..2b31152a11 100644 --- a/packages/paste-icons/src/CheckmarkCircleIcon.tsx +++ b/packages/paste-icons/src/CheckmarkCircleIcon.tsx @@ -10,13 +10,13 @@ export interface CheckmarkCircleIconProps extends IconWrapperProps { decorative: boolean; } -const CheckmarkCircleIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const CheckmarkCircleIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[CheckmarkCircleIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/ChevronDownIcon.tsx b/packages/paste-icons/src/ChevronDownIcon.tsx index fb4b5725b6..07f2e9e2ae 100644 --- a/packages/paste-icons/src/ChevronDownIcon.tsx +++ b/packages/paste-icons/src/ChevronDownIcon.tsx @@ -10,13 +10,13 @@ export interface ChevronDownIconProps extends IconWrapperProps { decorative: boolean; } -const ChevronDownIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const ChevronDownIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[ChevronDownIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/ChevronLeftIcon.tsx b/packages/paste-icons/src/ChevronLeftIcon.tsx index b5db6e1681..b3ea986f89 100644 --- a/packages/paste-icons/src/ChevronLeftIcon.tsx +++ b/packages/paste-icons/src/ChevronLeftIcon.tsx @@ -10,13 +10,13 @@ export interface ChevronLeftIconProps extends IconWrapperProps { decorative: boolean; } -const ChevronLeftIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const ChevronLeftIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[ChevronLeftIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/ChevronRightIcon.tsx b/packages/paste-icons/src/ChevronRightIcon.tsx index 715a8bd63f..fe909fb5d8 100644 --- a/packages/paste-icons/src/ChevronRightIcon.tsx +++ b/packages/paste-icons/src/ChevronRightIcon.tsx @@ -10,13 +10,13 @@ export interface ChevronRightIconProps extends IconWrapperProps { decorative: boolean; } -const ChevronRightIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const ChevronRightIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[ChevronRightIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/ChevronUpIcon.tsx b/packages/paste-icons/src/ChevronUpIcon.tsx index 332a53d927..b52a6d244a 100644 --- a/packages/paste-icons/src/ChevronUpIcon.tsx +++ b/packages/paste-icons/src/ChevronUpIcon.tsx @@ -10,13 +10,13 @@ export interface ChevronUpIconProps extends IconWrapperProps { decorative: boolean; } -const ChevronUpIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const ChevronUpIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[ChevronUpIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/CloseIcon.tsx b/packages/paste-icons/src/CloseIcon.tsx index ab75445fec..b630e58d36 100644 --- a/packages/paste-icons/src/CloseIcon.tsx +++ b/packages/paste-icons/src/CloseIcon.tsx @@ -10,13 +10,13 @@ export interface CloseIconProps extends IconWrapperProps { decorative: boolean; } -const CloseIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const CloseIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[CloseIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/CopyIcon.tsx b/packages/paste-icons/src/CopyIcon.tsx index 00c28e6bc1..0dced706e4 100644 --- a/packages/paste-icons/src/CopyIcon.tsx +++ b/packages/paste-icons/src/CopyIcon.tsx @@ -10,13 +10,13 @@ export interface CopyIconProps extends IconWrapperProps { decorative: boolean; } -const CopyIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const CopyIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[CopyIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/DeleteIcon.tsx b/packages/paste-icons/src/DeleteIcon.tsx index 057e63432d..5449994ac8 100644 --- a/packages/paste-icons/src/DeleteIcon.tsx +++ b/packages/paste-icons/src/DeleteIcon.tsx @@ -10,13 +10,13 @@ export interface DeleteIconProps extends IconWrapperProps { decorative: boolean; } -const DeleteIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const DeleteIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[DeleteIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/DownloadIcon.tsx b/packages/paste-icons/src/DownloadIcon.tsx index 5ff9389a27..9585744319 100644 --- a/packages/paste-icons/src/DownloadIcon.tsx +++ b/packages/paste-icons/src/DownloadIcon.tsx @@ -10,13 +10,13 @@ export interface DownloadIconProps extends IconWrapperProps { decorative: boolean; } -const DownloadIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const DownloadIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[DownloadIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/ErrorIcon.tsx b/packages/paste-icons/src/ErrorIcon.tsx index ce0c9bd828..692eb84ddd 100644 --- a/packages/paste-icons/src/ErrorIcon.tsx +++ b/packages/paste-icons/src/ErrorIcon.tsx @@ -10,13 +10,13 @@ export interface ErrorIconProps extends IconWrapperProps { decorative: boolean; } -const ErrorIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const ErrorIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[ErrorIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/InformationIcon.tsx b/packages/paste-icons/src/InformationIcon.tsx index 2f58f99626..7eb204dd8b 100644 --- a/packages/paste-icons/src/InformationIcon.tsx +++ b/packages/paste-icons/src/InformationIcon.tsx @@ -10,13 +10,13 @@ export interface InformationIconProps extends IconWrapperProps { decorative: boolean; } -const InformationIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const InformationIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[InformationIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/LinkExternalIcon.tsx b/packages/paste-icons/src/LinkExternalIcon.tsx index 075095613a..067abe4fb8 100644 --- a/packages/paste-icons/src/LinkExternalIcon.tsx +++ b/packages/paste-icons/src/LinkExternalIcon.tsx @@ -10,13 +10,13 @@ export interface LinkExternalIconProps extends IconWrapperProps { decorative: boolean; } -const LinkExternalIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const LinkExternalIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[LinkExternalIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/LoadingIcon.tsx b/packages/paste-icons/src/LoadingIcon.tsx index 50a1a5b4ee..114fea9e85 100644 --- a/packages/paste-icons/src/LoadingIcon.tsx +++ b/packages/paste-icons/src/LoadingIcon.tsx @@ -10,13 +10,13 @@ export interface LoadingIconProps extends IconWrapperProps { decorative: boolean; } -const LoadingIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const LoadingIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[LoadingIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/MoreIcon.tsx b/packages/paste-icons/src/MoreIcon.tsx index c35e0ac99b..02ecb88a60 100644 --- a/packages/paste-icons/src/MoreIcon.tsx +++ b/packages/paste-icons/src/MoreIcon.tsx @@ -10,13 +10,13 @@ export interface MoreIconProps extends IconWrapperProps { decorative: boolean; } -const MoreIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const MoreIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[MoreIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/PlusIcon.tsx b/packages/paste-icons/src/PlusIcon.tsx index 776bf9ffd1..854d8e87ef 100644 --- a/packages/paste-icons/src/PlusIcon.tsx +++ b/packages/paste-icons/src/PlusIcon.tsx @@ -10,13 +10,13 @@ export interface PlusIconProps extends IconWrapperProps { decorative: boolean; } -const PlusIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const PlusIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[PlusIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/ProductTwilioOrgIcon.tsx b/packages/paste-icons/src/ProductTwilioOrgIcon.tsx index 46dd933a4f..96480ca23c 100644 --- a/packages/paste-icons/src/ProductTwilioOrgIcon.tsx +++ b/packages/paste-icons/src/ProductTwilioOrgIcon.tsx @@ -10,13 +10,20 @@ export interface ProductTwilioOrgIconProps extends IconWrapperProps { decorative: boolean; } -const ProductTwilioOrgIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const ProductTwilioOrgIcon: React.FC = ({ + as, + display, + size, + iconColor, + title, + decorative, +}) => { if (!decorative && title == null) { throw new Error('[ProductTwilioOrgIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/SuccessIcon.tsx b/packages/paste-icons/src/SuccessIcon.tsx index 7578b928a9..eb7a8a7620 100644 --- a/packages/paste-icons/src/SuccessIcon.tsx +++ b/packages/paste-icons/src/SuccessIcon.tsx @@ -10,13 +10,13 @@ export interface SuccessIconProps extends IconWrapperProps { decorative: boolean; } -const SuccessIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const SuccessIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[SuccessIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/UploadToCloudIcon.tsx b/packages/paste-icons/src/UploadToCloudIcon.tsx index 0abd3bea10..58433e3a81 100644 --- a/packages/paste-icons/src/UploadToCloudIcon.tsx +++ b/packages/paste-icons/src/UploadToCloudIcon.tsx @@ -10,13 +10,13 @@ export interface UploadToCloudIconProps extends IconWrapperProps { decorative: boolean; } -const UploadToCloudIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const UploadToCloudIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[UploadToCloudIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/WarningIcon.tsx b/packages/paste-icons/src/WarningIcon.tsx index f27f3d3aec..f3b7200543 100644 --- a/packages/paste-icons/src/WarningIcon.tsx +++ b/packages/paste-icons/src/WarningIcon.tsx @@ -10,13 +10,13 @@ export interface WarningIconProps extends IconWrapperProps { decorative: boolean; } -const WarningIcon: React.FC = ({as, size, iconColor, title, decorative}) => { +const WarningIcon: React.FC = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[WarningIcon]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( diff --git a/packages/paste-icons/src/helpers/IconWrapper.tsx b/packages/paste-icons/src/helpers/IconWrapper.tsx index 4c4822cf87..6f375c70db 100644 --- a/packages/paste-icons/src/helpers/IconWrapper.tsx +++ b/packages/paste-icons/src/helpers/IconWrapper.tsx @@ -1,5 +1,5 @@ -import {styled, compose, size, system} from '@twilio-paste/styling-library'; -import {IconSize, TextColor} from '@twilio-paste/style-props'; +import {styled, compose, display, size, system} from '@twilio-paste/styling-library'; +import {Display, IconSize, TextColor} from '@twilio-paste/style-props'; // I can't name this simply `color` because TS + Emotion doesn't like it // This sets the CSS `color` by using the `textColors` tokens via the `iconColor` prop @@ -12,23 +12,23 @@ const iconColor = system({ export interface IconWrapperProps { as?: keyof JSX.IntrinsicElements; + display?: Display; size?: IconSize; iconColor?: TextColor; } const IconWrapper = styled.span( - { - display: 'inline-flex', - }, compose( + display, iconColor, size ) ); IconWrapper.defaultProps = { - size: 'sizeIcon30', + display: 'inline-flex', iconColor: 'currentColor', + size: 'sizeIcon30', }; IconWrapper.displayName = 'IconWrapper'; diff --git a/packages/paste-icons/tools/templates/reactIconTemplate.js b/packages/paste-icons/tools/templates/reactIconTemplate.js index cc1a067072..ad66a78c5b 100644 --- a/packages/paste-icons/tools/templates/reactIconTemplate.js +++ b/packages/paste-icons/tools/templates/reactIconTemplate.js @@ -12,13 +12,13 @@ export interface ${componentName}Props extends IconWrapperProps { decorative: boolean; } -const ${componentName}: React.FC<${componentName}Props> = ({as, size, iconColor, title, decorative}) => { +const ${componentName}: React.FC<${componentName}Props> = ({as, display, size, iconColor, title, decorative}) => { if (!decorative && title == null) { throw new Error('[${componentName}]: Missing a title for non-decorative icon.'); } return ( - + {uid => ( ${svg} @@ -27,7 +27,7 @@ const ${componentName}: React.FC<${componentName}Props> = ({as, size, iconColor, ); } - + ${componentName}.displayName = '${componentName}'; export {${componentName}};