Skip to content

Commit

Permalink
feat(icons): add display prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@richbachman
richbachman committed Jul 2, 2020
1 parent 77d6466 commit 4c9027d
Show file tree
Hide file tree
Showing 27 changed files with 67 additions and 59 deletions.
5 changes: 3 additions & 2 deletions packages/paste-icons/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<AssetsIcon title={string} decorative={boolean} size={number} color={token} />;
<AssetsIcon title={string} decorative={boolean} display={display} size={number} color={token} />;
```

### 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<CSS.DisplayProperty>` | | 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 |
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/ArrowBackIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface ArrowBackIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/ArrowDownIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface ArrowDownIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/ArrowForwardIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface ArrowForwardIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/ArrowUpIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface ArrowUpIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/AttachIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface AttachIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/CheckmarkCircleIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface CheckmarkCircleIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/ChevronDownIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface ChevronDownIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/ChevronLeftIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface ChevronLeftIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/ChevronRightIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface ChevronRightIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/ChevronUpIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface ChevronUpIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/CloseIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface CloseIconProps extends IconWrapperProps {
decorative: boolean;
}

const CloseIcon: React.FC<CloseIconProps> = ({as, size, iconColor, title, decorative}) => {
const CloseIcon: React.FC<CloseIconProps> = ({as, display, 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}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/CopyIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface CopyIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/DeleteIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface DeleteIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/DownloadIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface DownloadIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/ErrorIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface ErrorIconProps extends IconWrapperProps {
decorative: boolean;
}

const ErrorIcon: React.FC<ErrorIconProps> = ({as, size, iconColor, title, decorative}) => {
const ErrorIcon: React.FC<ErrorIconProps> = ({as, display, 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}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/InformationIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface InformationIconProps extends IconWrapperProps {
decorative: boolean;
}

const InformationIcon: React.FC<InformationIconProps> = ({as, size, iconColor, title, decorative}) => {
const InformationIcon: React.FC<InformationIconProps> = ({as, display, 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}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/LinkExternalIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface LinkExternalIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/LoadingIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface LoadingIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/MoreIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface MoreIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/PlusIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface PlusIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
11 changes: 9 additions & 2 deletions packages/paste-icons/src/ProductTwilioOrgIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,20 @@ export interface ProductTwilioOrgIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/SuccessIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface SuccessIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-icons/src/UploadToCloudIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ export interface UploadToCloudIconProps extends IconWrapperProps {
decorative: boolean;
}

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

return (
<IconWrapper as={as} size={size} iconColor={iconColor}>
<IconWrapper as={as} display={display} size={size} iconColor={iconColor}>
<UID>
{uid => (
<svg role="img" aria-hidden={decorative} aria-labelledby={uid} width="100%" height="100%" viewBox="0 0 24 24">
Expand Down
Loading

0 comments on commit 4c9027d

Please sign in to comment.