From 5af0ada41e0807accb8e71179e6989dc22f72fa1 Mon Sep 17 00:00:00 2001
From: Maria Navarro <39739180+MariaJose@users.noreply.github.com>
Date: Mon, 14 Mar 2022 10:13:26 -0500
Subject: [PATCH] feat(docs): update icon page to use new layout (#756)

* feat(docs): update icon page to use new layout

* feat(docs): update icon page to use new layout

* feat(docs): add comma to a sentence
---
 packages/docs/pages/icons.tsx | 339 +++++++++++++++++++---------------
 1 file changed, 185 insertions(+), 154 deletions(-)

diff --git a/packages/docs/pages/icons.tsx b/packages/docs/pages/icons.tsx
index 391ef1e22..11a8118c3 100644
--- a/packages/docs/pages/icons.tsx
+++ b/packages/docs/pages/icons.tsx
@@ -15,9 +15,9 @@ import {
   RUFlagIcon,
   USFlagIcon,
 } from '@bigcommerce/big-design-icons/flags';
-import React, { useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 
-import { Code, CodePreview, CodeSnippet, PageNavigation } from '../components';
+import { Code, CodePreview, CodeSnippet, ContentRoutingTabs, List, NextLink } from '../components';
 import { FlagIconPropTable, IconPropTable } from '../PropTables';
 
 type BigDesignIcons = Omit<typeof import('@bigcommerce/big-design-icons'), 'createStyledIcon' | 'useUniqueId'>;
@@ -35,162 +35,193 @@ const IconsPage = () => {
     fetchIcons();
   }, []);
 
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <>
-          <Panel>
-            <Text>To use an icon import the component from the package:</Text>
-            <CodeSnippet>{`import { CheckIcon } from '@bigcommerce/big-design-icons';`}</CodeSnippet>
-            <Text>Use it anywhere in your app:</Text>
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <CheckIcon color="success" size="xxxLarge" />
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Country flags">
-            <Text>
-              A complete list of available flags is located{' '}
-              <Link href="https://flagicons.lipis.dev/" target="_blank">
-                here
-              </Link>
-              .
-            </Text>
-
-            <Text>To use a flag import the component from the package:</Text>
-
-            <CodeSnippet>{`import { USFlagIcon } from '@bigcommerce/big-design-icons/flags';`}</CodeSnippet>
-
-            <Text>Use it anywhere in your app:</Text>
-
-            <CodePreview scope={{ USFlagIcon }}>
-              {/* jsx-to-string:start */}
-              <USFlagIcon size="xxxLarge" />
-              {/* jsx-to-string:end */}
-            </CodePreview>
-
-            <CodePreview
-              scope={{
-                ARFlagIcon,
-                AUFlagIcon,
-                CAFlagIcon,
-                CLFlagIcon,
-                CNFlagIcon,
-                DEFlagIcon,
-                FRFlagIcon,
-                GBFlagIcon,
-                JPFlagIcon,
-                KRFlagIcon,
-                MXFlagIcon,
-                RUFlagIcon,
-                USFlagIcon,
-              }}
-            >
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const [value, setValue] = useState('');
-                const handleChange = (val) => setValue(val);
-
-                return (
-                  <Form>
-                    <FormGroup>
-                      <Select
-                        filterable={false}
-                        label="Countries"
-                        maxHeight={300}
-                        onOptionChange={handleChange}
-                        options={[
-                          { value: 'us', content: 'United States', icon: <USFlagIcon /> },
-                          { value: 'mx', content: 'Mexico', icon: <MXFlagIcon /> },
-                          { value: 'ca', content: 'Canada', icon: <CAFlagIcon /> },
-                          { value: 'en', content: 'England', icon: <GBFlagIcon /> },
-                          { value: 'fr', content: 'France', icon: <FRFlagIcon /> },
-                          { value: 'gr', content: 'Germany', icon: <DEFlagIcon /> },
-                          { value: 'ar', content: 'Argentina', icon: <ARFlagIcon /> },
-                          { value: 'ru', content: 'Russia', disabled: true, icon: <RUFlagIcon /> },
-                          { value: 'ch', content: 'Chile', icon: <CLFlagIcon /> },
-                          { value: 'jp', content: 'Japan', icon: <JPFlagIcon /> },
-                          { value: 'cn', content: 'China', icon: <CNFlagIcon /> },
-                          { value: 'sk', content: 'South Korea', icon: <KRFlagIcon /> },
-                          { value: 'au', content: 'Australia', icon: <AUFlagIcon /> },
-                        ]}
-                        placeholder={'Choose country'}
-                        placement={'bottom-start'}
-                        required
-                        value={value}
-                      />
-                    </FormGroup>
-                  </Form>
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-        </>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => (
-        <>
-          <IconPropTable>
-            <CodeSnippet showControls={false} language="bash">
-              npm install @bigcommerce/big-design-icons // or yarn add @bigcommerce/big-design-icons
-            </CodeSnippet>
-          </IconPropTable>
-          <FlagIconPropTable>
-            <InlineMessage
-              type="warning"
-              messages={[
-                {
-                  text: 'Flags are a submodule of the Icons package "@bigcommerce/big-design-icons", you will need to add the package first using "yarn add @bigcommerce/big-design-icons".',
-                },
-              ]}
-              marginBottom="medium"
-            />
-          </FlagIconPropTable>
-        </>
-      ),
-    },
-    {
-      id: 'icons',
-      title: 'Available icons',
-      render: () => (
-        <Panel header="Available icons">
-          <Flex flexWrap="wrap" justifyContent="center">
-            {Object.keys(icons).map((iconName) => {
-              const Icon = icons[iconName];
-
-              return (
-                <Flex
-                  key={iconName}
-                  style={{ width: '300px' }}
-                  flexDirection="column"
-                  borderRadius="normal"
-                  justifyContent="center"
-                  alignItems="center"
-                  padding="large"
-                >
-                  <Icon size="xxxLarge" />
-                  <Code>{`<${iconName} />`}</Code>
-                </Flex>
-              );
-            })}
-          </Flex>
-        </Panel>
-      ),
-    },
-  ];
-
   return (
     <>
       <H1>Icon</H1>
 
-      <PageNavigation items={items} />
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          BigDesign offers a variety of <NextLink href={{ hash: 'available-icons' }}>icon</NextLink> components that can
+          be used in a project. We also provide{' '}
+          <NextLink href={{ query: 'implementation=country-flags' }}>Country flags</NextLink> icons that can be
+          imported.
+        </Text>
+        <Text>
+          To use the icons install <Code primary>@bigcommerce/big-design-icons</Code> package from npm.
+        </Text>
+
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>To represent an action or a status.</List.Item>
+          <List.Item>To provide additional visual cues.</List.Item>
+        </List>
+      </Panel>
+
+      <Panel header="Implementation" headerId="implementation">
+        <ContentRoutingTabs
+          id="implementation"
+          routes={[
+            {
+              id: 'basic',
+              title: 'Basic',
+              render: () => (
+                <Fragment key="basic">
+                  <Text>To use an icon, import the component from the package:</Text>
+                  <CodeSnippet>{`import { CheckIcon } from '@bigcommerce/big-design-icons';`}</CodeSnippet>
+                  <Text>Use it anywhere in your app:</Text>
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <CheckIcon color="success" size="xxxLarge" />
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+            {
+              id: 'country-flags',
+              title: 'Country flags',
+              render: () => (
+                <Fragment key="country-flags">
+                  <Text>
+                    A complete list of available flags is located{' '}
+                    <Link href="https://flagicons.lipis.dev/" target="_blank">
+                      here
+                    </Link>
+                    .
+                  </Text>
+
+                  <Text>To use a flag import the component from the package:</Text>
+
+                  <CodeSnippet>{`import { USFlagIcon } from '@bigcommerce/big-design-icons/flags';`}</CodeSnippet>
+
+                  <Text>Use it anywhere in your app:</Text>
+
+                  <CodePreview scope={{ USFlagIcon }}>
+                    {/* jsx-to-string:start */}
+                    <USFlagIcon size="xxxLarge" />
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+
+                  <CodePreview
+                    scope={{
+                      ARFlagIcon,
+                      AUFlagIcon,
+                      CAFlagIcon,
+                      CLFlagIcon,
+                      CNFlagIcon,
+                      DEFlagIcon,
+                      FRFlagIcon,
+                      GBFlagIcon,
+                      JPFlagIcon,
+                      KRFlagIcon,
+                      MXFlagIcon,
+                      RUFlagIcon,
+                      USFlagIcon,
+                    }}
+                  >
+                    {/* jsx-to-string:start */}
+                    {function Example() {
+                      const [value, setValue] = useState('');
+                      const handleChange = (val) => setValue(val);
+
+                      return (
+                        <Form>
+                          <FormGroup>
+                            <Select
+                              filterable={false}
+                              label="Countries"
+                              maxHeight={300}
+                              onOptionChange={handleChange}
+                              options={[
+                                { value: 'us', content: 'United States', icon: <USFlagIcon /> },
+                                { value: 'mx', content: 'Mexico', icon: <MXFlagIcon /> },
+                                { value: 'ca', content: 'Canada', icon: <CAFlagIcon /> },
+                                { value: 'en', content: 'England', icon: <GBFlagIcon /> },
+                                { value: 'fr', content: 'France', icon: <FRFlagIcon /> },
+                                { value: 'gr', content: 'Germany', icon: <DEFlagIcon /> },
+                                { value: 'ar', content: 'Argentina', icon: <ARFlagIcon /> },
+                                { value: 'ru', content: 'Russia', disabled: true, icon: <RUFlagIcon /> },
+                                { value: 'ch', content: 'Chile', icon: <CLFlagIcon /> },
+                                { value: 'jp', content: 'Japan', icon: <JPFlagIcon /> },
+                                { value: 'cn', content: 'China', icon: <CNFlagIcon /> },
+                                { value: 'sk', content: 'South Korea', icon: <KRFlagIcon /> },
+                                { value: 'au', content: 'Australia', icon: <AUFlagIcon /> },
+                              ]}
+                              placeholder={'Choose country'}
+                              placement={'bottom-start'}
+                              required
+                              value={value}
+                            />
+                          </FormGroup>
+                        </Form>
+                      );
+                    }}
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+          ]}
+        />
+      </Panel>
+      <Panel header="Props" headerId="props">
+        <ContentRoutingTabs
+          id="props"
+          routes={[
+            {
+              id: 'Icon',
+              title: 'icon',
+              render: () => (
+                <IconPropTable renderPanel={false}>
+                  <CodeSnippet showControls={false} language="bash">
+                    npm install @bigcommerce/big-design-icons // or yarn add @bigcommerce/big-design-icons
+                  </CodeSnippet>
+                </IconPropTable>
+              ),
+            },
+            {
+              id: 'flag-icon',
+              title: 'Flag icon',
+              render: () => (
+                <FlagIconPropTable renderPanel={false}>
+                  <InlineMessage
+                    type="warning"
+                    messages={[
+                      {
+                        text: 'Flags are a submodule of the Icons package "@bigcommerce/big-design-icons", you will need to add the package first using "yarn add @bigcommerce/big-design-icons".',
+                      },
+                    ]}
+                    marginBottom="medium"
+                  />
+                </FlagIconPropTable>
+              ),
+            },
+          ]}
+        />
+      </Panel>
+
+      <Panel header="Available icons" headerId="available-icons">
+        <Flex flexWrap="wrap" justifyContent="center">
+          {Object.keys(icons).map((iconName) => {
+            const Icon = icons[iconName];
+
+            return (
+              <Flex
+                key={iconName}
+                style={{ width: '300px' }}
+                flexDirection="column"
+                borderRadius="normal"
+                justifyContent="center"
+                alignItems="center"
+                padding="large"
+              >
+                <Icon size="xxxLarge" />
+                <Code>{`<${iconName} />`}</Code>
+              </Flex>
+            );
+          })}
+        </Flex>
+      </Panel>
     </>
   );
 };