From 31b19df51e45d652db3299c69865cd10b9db4ce5 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Tue, 12 Oct 2021 10:47:03 -0500
Subject: [PATCH] feat(docs): update textarea page to use new layout

---
 packages/docs/pages/textarea.tsx | 230 ++++++++++++++++++-------------
 1 file changed, 132 insertions(+), 98 deletions(-)

diff --git a/packages/docs/pages/textarea.tsx b/packages/docs/pages/textarea.tsx
index a9a71b3fc..168c09d7d 100644
--- a/packages/docs/pages/textarea.tsx
+++ b/packages/docs/pages/textarea.tsx
@@ -1,114 +1,148 @@
 import { Form, FormGroup, H1, Panel, Text, Textarea } from '@bigcommerce/big-design';
 import React, { useState } from 'react';
 
-import { Code, CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
 import { TextareaPropTable } from '../PropTables';
 
 const TextAreaPage = () => {
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <>
-          <Panel>
-            <Text>Textareas are stylized form controls with the ability of controling validation.</Text>
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const [value, setValue] = useState('');
+  return (
+    <>
+      <H1>Textarea</H1>
 
-                const handleChange = (event) => setValue(event.target.value);
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          <Code primary>Textareas</Code> are text inputs that can be expanded to fit multi-line text content from users.
+        </Text>
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>
+            Text areas are useful when users need to create multi-sentence or paragraph length content - e.g. product
+            decriptions or messages.
+          </List.Item>
+        </List>
+      </Panel>
 
-                return (
-                  <Form>
-                    <FormGroup>
-                      <Textarea
-                        label="Label"
-                        description="Description for the textarea."
-                        placeholder="Placeholder"
-                        rows={3}
-                        resize={true}
-                        value={value}
-                        onChange={handleChange}
-                      />
-                    </FormGroup>
-                  </Form>
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Error state">
-            <Text>
-              Textareas allow you to pass in an <Code primary>error</Code> message that will control the styles of an
-              input. The logic on the input can be controlled with the <Code primary>onChange</Code> prop.
-            </Text>
+      <Panel header="Implementation" headerId="implementation">
+        <ContentRoutingTabs
+          id="implementation"
+          routes={[
+            {
+              id: 'basic',
+              title: 'Basic',
+              render: () => (
+                <CodePreview>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const [value, setValue] = useState('');
 
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <Form>
-                <FormGroup>
-                  <Textarea
-                    label="Description"
-                    description="Description needs to be at least 64 characters long."
-                    value="Start of some text..."
-                    minLength={64}
-                    error="Field needs to contain at least 64 characters."
-                    onChange={() => null}
-                  />
-                </FormGroup>
-              </Form>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Controlling rows">
-            <Text>
-              By default, a <Code>Textarea</Code> displays with <Code>3</Code> rows. In order to set the intial amount
-              of rows, pass in the <Code>rows</Code> prop. There can only be a maximum of <Code>7</Code> rows.
-            </Text>
+                    const handleChange = (event) => setValue(event.target.value);
 
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <Form>
-                <FormGroup>
-                  <Textarea label="Label" description="Textarea with 5 rows." placeholder="Placeholder" rows={5} />
-                </FormGroup>
-              </Form>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Resizable">
-            <Text>
-              You can also control whether <Code>Textarea</Code> components are resizeable. Resizing is only available
-              on the vertical axis.
-            </Text>
+                    return (
+                      <Form>
+                        <FormGroup>
+                          <Textarea
+                            label="Label"
+                            description="Description for the textarea."
+                            placeholder="Placeholder"
+                            rows={3}
+                            resize={true}
+                            value={value}
+                            onChange={handleChange}
+                          />
+                        </FormGroup>
+                      </Form>
+                    );
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              ),
+            },
+            {
+              id: 'error-state',
+              title: 'Error state',
+              render: () => (
+                <>
+                  <Text>
+                    Textareas allow you to pass in an <Code primary>error</Code> message that will control the styles of
+                    an input. The logic on the input can be controlled with the <Code primary>onChange</Code> prop.
+                  </Text>
 
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <Form>
-                <FormGroup>
-                  <Textarea label="Label" placeholder="Textarea cannot be resized." resize={false} />
-                </FormGroup>
-              </Form>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-        </>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => <TextareaPropTable />,
-    },
-  ];
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <Form>
+                      <FormGroup>
+                        <Textarea
+                          label="Description"
+                          description="Description needs to be at least 64 characters long."
+                          value="Start of some text..."
+                          minLength={64}
+                          error="Field needs to contain at least 64 characters."
+                          onChange={() => null}
+                        />
+                      </FormGroup>
+                    </Form>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </>
+              ),
+            },
+            {
+              id: 'controlling-rows',
+              title: 'Controlling rows',
+              render: () => (
+                <>
+                  <Text>
+                    By default, a <Code>Textarea</Code> displays with <Code>3</Code> rows. In order to set the intial
+                    amount of rows, pass in the <Code>rows</Code> prop. There can only be a maximum of <Code>7</Code>{' '}
+                    rows.
+                  </Text>
 
-  return (
-    <>
-      <H1>Textarea</H1>
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <Form>
+                      <FormGroup>
+                        <Textarea
+                          label="Label"
+                          description="Textarea with 5 rows."
+                          placeholder="Placeholder"
+                          rows={5}
+                        />
+                      </FormGroup>
+                    </Form>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </>
+              ),
+            },
+            {
+              id: 'resizable',
+              title: 'Resizable',
+              render: () => (
+                <>
+                  <Text>
+                    You can also control whether <Code>Textarea</Code> components are resizeable. Resizing is only
+                    available on the vertical axis.
+                  </Text>
+
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <Form>
+                      <FormGroup>
+                        <Textarea label="Label" placeholder="Textarea cannot be resized." resize={false} />
+                      </FormGroup>
+                    </Form>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </>
+              ),
+            },
+          ]}
+        />
+      </Panel>
 
-      <PageNavigation items={items} />
+      <Panel header="Props" headerId="props">
+        <TextareaPropTable renderPanel={false} />
+      </Panel>
     </>
   );
 };