feat(icons): add arrows, chevrons, attach; update linkexternal (#531)

Co-authored-by: Sarah Li <sali@twilio.com>

packages/paste-icons/src/ArrowBackIcon.tsx

@@ -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 ArrowBackIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const ArrowBackIcon: React.FC<ArrowBackIconProps> = ({as, 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}>
+      <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="M9.75 15.947l-.07-.058-3.535-3.536a.502.502 0 01-.067-.082l-.043-.083-.03-.1L6 12.043v-.088l.01-.067.01-.038.034-.081.047-.074.044-.05L9.68 8.111a.5.5 0 01.765.638l-.058.069L7.706 11.5H16.5a.5.5 0 01.09.992l-.09.008H7.706l2.681 2.682a.5.5 0 01.058.638l-.058.069a.5.5 0 01-.638.058z"
+            />
+          </svg>
+        )}
+      </UID>
+    </IconWrapper>
+  );
+};
+
+ArrowBackIcon.displayName = 'ArrowBackIcon';
+export {ArrowBackIcon};

packages/paste-icons/src/ArrowDownIcon.tsx

@@ -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 ArrowDownIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const ArrowDownIcon: React.FC<ArrowDownIconProps> = ({as, 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}>
+      <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="M11.897 17.99l.06.008.054.002a.503.503 0 00.063-.005L12 18a.49.49 0 00.103-.01l.056-.016.084-.037.015-.01.026-.016.07-.057 3.535-3.536a.5.5 0 00-.638-.765l-.069.058-2.683 2.683.001-8.781A.506.506 0 0012 7a.504.504 0 00-.492.42l-.008.093v8.779l-2.682-2.681a.5.5 0 00-.638-.058l-.07.058a.5.5 0 00-.057.638l.058.069 3.535 3.536.047.04.064.042c.02.012.04.022.062.03l.078.023z"
+            />
+          </svg>
+        )}
+      </UID>
+    </IconWrapper>
+  );
+};
+
+ArrowDownIcon.displayName = 'ArrowDownIcon';
+export {ArrowDownIcon};

packages/paste-icons/src/ArrowForwardIcon.tsx

@@ -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 ArrowForwardIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const ArrowForwardIcon: React.FC<ArrowForwardIconProps> = ({as, 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}>
+      <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="M14.25 15.947l.07-.058 3.535-3.536a.502.502 0 00.067-.082l.043-.083.03-.1.005-.044v-.088l-.01-.067-.01-.038-.034-.081-.047-.074-.044-.05-3.535-3.535a.5.5 0 00-.765.638l.058.069 2.681 2.682H7.5a.5.5 0 00-.09.992l.09.008h8.794l-2.681 2.682a.5.5 0 00-.058.638l.058.069a.5.5 0 00.638.058z"
+            />
+          </svg>
+        )}
+      </UID>
+    </IconWrapper>
+  );
+};
+
+ArrowForwardIcon.displayName = 'ArrowForwardIcon';
+export {ArrowForwardIcon};

packages/paste-icons/src/ArrowUpIcon.tsx

@@ -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 ArrowUpIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const ArrowUpIcon: React.FC<ArrowUpIconProps> = ({as, 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}>
+      <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 7h.01c.022 0 .043.002.064.005L12 7a.49.49 0 01.16.026l.025.01c.02.007.04.016.058.027l.015.01a.14.14 0 01.026.016l.07.057 3.535 3.536a.5.5 0 01-.638.765l-.069-.058-2.683-2.683.001 8.781A.506.506 0 0112 18a.504.504 0 01-.492-.42l-.008-.093V8.708l-2.682 2.681a.5.5 0 01-.638.058l-.07-.058a.5.5 0 01-.057-.638l.058-.069 3.535-3.536a.501.501 0 01.096-.074l.015-.008a.344.344 0 01.062-.03l.017-.006a.406.406 0 01.09-.022A.486.486 0 0112 7z"
+            />
+          </svg>
+        )}
+      </UID>
+    </IconWrapper>
+  );
+};
+
+ArrowUpIcon.displayName = 'ArrowUpIcon';
+export {ArrowUpIcon};

packages/paste-icons/src/AttachIcon.tsx

@@ -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 AttachIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const AttachIcon: React.FC<AttachIconProps> = ({as, 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}>
+      <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="M11.503 6.385a2.9 2.9 0 014.242 3.955l-.135.14-4.814 4.817A1.7 1.7 0 018.29 13.01l.108-.123 4.808-4.81a.5.5 0 01.765.638l-.057.069-4.803 4.804a.7.7 0 00.899 1.065l.085-.07 4.814-4.816a1.9 1.9 0 00-2.577-2.79l-.116.11-4.808 4.807a3.1 3.1 0 004.241 4.519l.143-.135 5.854-5.855a.5.5 0 01.765.638l-.057.07-5.855 5.854a4.1 4.1 0 01-5.953-5.634l.155-.164 4.802-4.802z"
+            />
+          </svg>
+        )}
+      </UID>
+    </IconWrapper>
+  );
+};
+
+AttachIcon.displayName = 'AttachIcon';
+export {AttachIcon};

packages/paste-icons/src/ChevronLeftIcon.tsx

@@ -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 ChevronLeftIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const ChevronLeftIcon: React.FC<ChevronLeftIconProps> = ({as, 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}>
+      <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="M13.834 17.128a.5.5 0 01-.596.798l-.072-.054-5-4.5A.5.5 0 018.1 12.7l.066-.072 5-4.5a.5.5 0 01.73.678l-.062.066L9.248 13l4.586 4.128z"
+            />
+          </svg>
+        )}
+      </UID>
+    </IconWrapper>
+  );
+};
+
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
+export {ChevronLeftIcon};

packages/paste-icons/src/ChevronRightIcon.tsx

@@ -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 ChevronRightIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const ChevronRightIcon: React.FC<ChevronRightIconProps> = ({as, 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}>
+      <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="M8.166 8.872a.5.5 0 01.596-.798l.072.054 5 4.5a.5.5 0 01.066.672l-.066.072-5 4.5a.5.5 0 01-.73-.678l.062-.066L12.752 13 8.166 8.872z"
+            />
+          </svg>
+        )}
+      </UID>
+    </IconWrapper>
+  );
+};
+
+ChevronRightIcon.displayName = 'ChevronRightIcon';
+export {ChevronRightIcon};

packages/paste-icons/src/LinkExternalIcon.tsx

@@ -24,7 +24,7 @@ const LinkExternalIcon: React.FC<LinkExternalIconProps> = ({as, size, iconColor,
             <path
               fill="currentColor"
               fillRule="evenodd"
-              d="M15.5 8h.012c.02 0 .041.002.062.005L15.5 8a.502.502 0 01.354.146l.011.013a.503.503 0 01.033.039l-.044-.052a.502.502 0 01.138.264l.003.018A.503.503 0 0116 8.48v8.02a.5.5 0 01-.992.09L15 16.5V9.706l-8.146 8.148a.5.5 0 01-.765-.638l.057-.07L14.292 9H7.5a.5.5 0 01-.492-.41L7 8.5a.5.5 0 01.41-.492L7.5 8h8z"
+              d="M14.646 9.354h.026a.449.449 0 01.474.476v5.024a.5.5 0 01-.991.09l-.009-.09V10.99l-6.524 6.524a.45.45 0 01-.689-.574l.052-.063 6.524-6.524H9.646a.5.5 0 01-.491-.41l-.009-.09a.5.5 0 01.41-.492l.09-.008h5z"
             />
           </svg>
         )}

packages/paste-icons/stories/__IconList.tsx

@@ -3,8 +3,15 @@ import {Text} from '@twilio-paste/text';
 import {IconSize, TextColor} from '@twilio-paste/style-props';
 import {Grid, StoryIcon} from './__StoryStyles';
 
+import {ArrowBackIcon} from '../src/ArrowBackIcon';
+import {ArrowDownIcon} from '../src/ArrowDownIcon';
+import {ArrowForwardIcon} from '../src/ArrowForwardIcon';
+import {ArrowUpIcon} from '../src/ArrowUpIcon';
+import {AttachIcon} from '../src/AttachIcon';
 import {CheckmarkCircleIcon} from '../src/CheckmarkCircleIcon';
 import {ChevronDownIcon} from '../src/ChevronDownIcon';
+import {ChevronLeftIcon} from '../src/ChevronLeftIcon';
+import {ChevronRightIcon} from '../src/ChevronRightIcon';
 import {ChevronUpIcon} from '../src/ChevronUpIcon';
 import {CloseIcon} from '../src/CloseIcon';
 import {CopyIcon} from '../src/CopyIcon';
@@ -30,8 +37,15 @@ interface IconProps {
 
 const IconList: React.FC<IconProps> = props => (
   <Grid>
-    <StoryIcon><CheckmarkCircleIcon {...props} /><Text as="p" textColor="currentColor">CheckmarkCircleIcon</Text></StoryIcon>
+    <StoryIcon><ArrowBackIcon {...props} /><Text as="p" textColor="currentColor">ArrowBackIcon</Text></StoryIcon>
+<StoryIcon><ArrowDownIcon {...props} /><Text as="p" textColor="currentColor">ArrowDownIcon</Text></StoryIcon>
+<StoryIcon><ArrowForwardIcon {...props} /><Text as="p" textColor="currentColor">ArrowForwardIcon</Text></StoryIcon>
+<StoryIcon><ArrowUpIcon {...props} /><Text as="p" textColor="currentColor">ArrowUpIcon</Text></StoryIcon>
+<StoryIcon><AttachIcon {...props} /><Text as="p" textColor="currentColor">AttachIcon</Text></StoryIcon>
+<StoryIcon><CheckmarkCircleIcon {...props} /><Text as="p" textColor="currentColor">CheckmarkCircleIcon</Text></StoryIcon>
 <StoryIcon><ChevronDownIcon {...props} /><Text as="p" textColor="currentColor">ChevronDownIcon</Text></StoryIcon>
+<StoryIcon><ChevronLeftIcon {...props} /><Text as="p" textColor="currentColor">ChevronLeftIcon</Text></StoryIcon>
+<StoryIcon><ChevronRightIcon {...props} /><Text as="p" textColor="currentColor">ChevronRightIcon</Text></StoryIcon>
 <StoryIcon><ChevronUpIcon {...props} /><Text as="p" textColor="currentColor">ChevronUpIcon</Text></StoryIcon>
 <StoryIcon><CloseIcon {...props} /><Text as="p" textColor="currentColor">CloseIcon</Text></StoryIcon>
 <StoryIcon><CopyIcon {...props} /><Text as="p" textColor="currentColor">CopyIcon</Text></StoryIcon>