Building icons from Figma (#709)

Co-authored-by: Hector Vergara <hvergara@users.noreply.github.com>

.changeset/lemon-trainers-care.md

@@ -0,0 +1,6 @@
+---
+'@aws-amplify/ui': patch
+'@aws-amplify/ui-react': patch
+---
+
+Building icons from Figma source now. 

docs/src/components/Layout/Header.tsx

@@ -9,8 +9,8 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   IconWbSunny,
-  IconWbTwighlight,
-  IconComputer,
+  IconBedtime,
+  IconTonality,
   IconMenu,
   Divider,
   useTheme,
@@ -52,11 +52,11 @@ const ColorModeSwitcher = ({ colorMode, setColorMode }) => {
       </ToggleButton>
       <ToggleButton value="dark">
         <VisuallyHidden>Dark mode</VisuallyHidden>
-        <IconWbTwighlight />
+        <IconBedtime />
       </ToggleButton>
       <ToggleButton value="system">
         <VisuallyHidden>System preference</VisuallyHidden>
-        <IconComputer />
+        <IconTonality />
       </ToggleButton>
     </ToggleButtonGroup>
   );

docs/src/pages/components/icon/AllIcons.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import * as AUI from '@aws-amplify/ui-react';
+
+export const AllIcons = () => {
+  const iconKeys = Object.keys(AUI).filter(
+    (key) => key.match(/^Icon\w/)
+  );
+  return (
+    <AUI.Expander type="single" isCollapsible={true}>
+      <AUI.ExpanderItem value="icons" title="Show all icons">
+        {iconKeys.map((key) => {
+          const Component = AUI[key];
+          return (
+            <AUI.Card fontSize="2rem">
+              <Component />
+            </AUI.Card>
+          );
+        })}
+      </AUI.ExpanderItem>
+    </AUI.Expander>
+  );
+};

docs/src/pages/components/icon/demo.tsx

@@ -1,94 +1,97 @@
 import React from 'react';
 import { Property } from 'csstype';
 
-import { Icon, Flex } from '@aws-amplify/ui-react';
+import { Icon, Flex, TextField, View, useTheme } from '@aws-amplify/ui-react';
 import { Example } from '@/components/Example';
+import { Demo } from '@/components/Demo';
+
+const propsToCode = (props) => `<Icon
+  pathData=${JSON.stringify(props.pathData)}
+  viewBox={{
+    width: ${JSON.stringify(props.width)},
+    height: ${JSON.stringify(props.height)}
+  }}
+  fill=${JSON.stringify(props.fill)}
+  ariaLabel=${JSON.stringify(props.ariaLabel)}
+  />`;
+
+const PropControls = (props) => {
+  const { tokens } = useTheme();
+  const {
+    width,
+    setWidth,
+    height,
+    setHeight,
+    ariaLabel,
+    setAriaLabel,
+    pathData,
+    setPathData,
+    color,
+    setColor,
+  } = props;
+  return (
+    <View padding={`${tokens.space.medium} 0`}>
+      <TextField
+        label="pathData"
+        value={pathData as string}
+        onChange={(event) => setPathData(event.target.value)}
+      />
+      <TextField
+        label="width"
+        value={width}
+        onChange={(event) => setWidth(event.target.value)}
+      />
+      <TextField
+        label="height"
+        value={height}
+        onChange={(event) => setHeight(event.target.value)}
+      />
+      <TextField
+        label="ariaLabel"
+        value={ariaLabel}
+        onChange={(event) => setAriaLabel(event.target.value)}
+      />
+      <TextField
+        label="color"
+        value={color}
+        onChange={(event) => setColor(event.target.value)}
+      />
+    </View>
+  );
+};
 
 export const IconDemo = () => {
   const [width, setWidth] = React.useState<number>(24);
   const [height, setHeight] = React.useState<number>(24);
-  const [fill, setFill] = React.useState<Property.Color>('currentColor');
+  const [color, setColor] = React.useState<Property.Color>('');
   const [ariaLabel, setAriaLabel] = React.useState<string>('search');
   const [pathData, setPathData] = React.useState<string>(
     `M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5
      3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5
      4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z`
   );
+  const props = {
+    width,
+    setWidth,
+    height,
+    setHeight,
+    ariaLabel,
+    setAriaLabel,
+    pathData,
+    setPathData,
+    color,
+    setColor,
+  };
 
   return (
-    <div className="amplify-icon-demo">
-      <h3>Icon Props:</h3>
-      <Flex gap="5" wrap="wrap">
-        <div>
-          <label htmlFor="icon-demo-viewBox-width">ViewBox width</label>
-          <input
-            id="icon-demo-viewBox-width"
-            type="text"
-            placeholder="Set viewBox width"
-            value={width}
-            onChange={(event: any) => {
-              setWidth(event.target.value);
-            }}
-          />
-        </div>
-        <div>
-          <label htmlFor="icon-demo-viewBox-height">ViewBox height</label>
-          <input
-            id="icon-demo-viewBox-height"
-            type="text"
-            placeholder="Set viewBox height"
-            value={height}
-            onChange={(event: any) => {
-              setHeight(event.target.value);
-            }}
-          />
-        </div>
-        <div>
-          <label htmlFor="icon-demo-path-data">PathData</label>
-          <input
-            id="icon-demo-path-data"
-            type="text"
-            placeholder="Set icon path data"
-            value={pathData}
-            onChange={(event: any) => {
-              setPathData(event.target.value);
-            }}
-          />
-        </div>
-        <div>
-          <label htmlFor="icon-demo-fill">fill</label>
-          <input
-            id="icon-demo-fill"
-            type="text"
-            placeholder="Set fill color"
-            value={fill}
-            onChange={(event: any) => {
-              setFill(event.target.value);
-            }}
-          />
-        </div>
-        <div>
-          <label htmlFor="icon-demo-aria-label">ariaLabel</label>
-          <input
-            id="icon-demo-aria-label"
-            type="text"
-            placeholder="Set aria-label text"
-            value={ariaLabel}
-            onChange={(event: any) => {
-              setAriaLabel(event.target.value);
-            }}
-          />
-        </div>
-      </Flex>
-      <Example>
-        <Icon
-          pathData={pathData}
-          viewBox={{ width, height }}
-          fill={fill}
-          ariaLabel={ariaLabel}
-          className="icon-demo-search"
-        />
-      </Example>
-    </div>
+    <Demo propControls={<PropControls {...props} />} code={propsToCode(props)}>
+      <Icon
+        pathData={pathData}
+        viewBox={{ width, height }}
+        color={color}
+        ariaLabel={ariaLabel}
+        className="icon-demo-search"
+      />
+    </Demo>
   );
 };

docs/src/pages/components/icon/examples/BuiltInIconExample.tsx

@@ -0,0 +1,3 @@
+import { IconDone } from '@aws-amplify/ui-react';
+
+export const BuiltInIconExample = () => <IconDone />;

docs/src/pages/components/icon/examples/CustomIconExample.tsx

@@ -0,0 +1,13 @@
+import { Icon } from '@aws-amplify/ui-react';
+
+export const CustomIconExample = () => {
+  return (
+    // This is a thumbs up icon
+    <Icon
+      ariaLabel="Thumbs up"
+      pathData="M9 21h9c.83 0 1.54-.5
+1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17
+1 7.58 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h4v12H1z"
+    />
+  );
+};

docs/src/pages/components/icon/examples/DefaultIconExample.tsx

@@ -0,0 +1,11 @@
+import { Icon } from '@aws-amplify/ui-react';
+
+// This is a favorite icon
+export const DefaultIconExample = () => (
+  <Icon
+    ariaLabel="Favorite"
+    viewBox={{ width: 24, height: 24 }}
+    pathData="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0
+    3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+  />
+);

docs/src/pages/components/icon/examples/IconColorExample.tsx

@@ -0,0 +1,11 @@
+import { IconStar, useTheme } from '@aws-amplify/ui-react';
+
+export const IconColorExample = () => {
+  const { tokens } = useTheme();
+  return (
+    <>
+      <IconStar color={tokens.colors.pink[80]} />
+      <IconStar color="rebeccapurple" />
+    </>
+  );
+};

docs/src/pages/components/icon/examples/IconSizesExample.tsx

@@ -0,0 +1,22 @@
+import { Button, IconSave, Text } from '@aws-amplify/ui-react';
+
+export const IconSizesExample = () => {
+  return (
+    <>
+      {/* Inherited from button sizes */}
+      <Button gap="0.1rem" size="small">
+        <IconSave /> {'Save'}
+      </Button>
+      <Button gap="0.2rem">
+        <IconSave /> {'Save'}
+      </Button>
+      <Button gap="0.2rem" size="large">
+        <IconSave /> {'Save'}
+      </Button>
+      <Text as="span" fontSize="50px">
+        <IconSave />
+        Save
+      </Text>
+    </>
+  );
+};

docs/src/pages/components/icon/examples/index.tsx

@@ -0,0 +1,5 @@
+export { DefaultIconExample } from './DefaultIconExample';
+export { BuiltInIconExample } from './BuiltInIconExample';
+export { CustomIconExample } from './CustomIconExample';
+export { IconSizesExample } from './IconSizesExample';
+export { IconColorExample } from './IconColorExample';