From a787311029e6c0c179b552f5abdad1dbed73436a Mon Sep 17 00:00:00 2001
From: Heather Buchel <hbuchel@gmail.com>
Date: Wed, 30 Aug 2023 10:42:33 -0400
Subject: [PATCH] chore(docs): enable theme/react src links and theme examples
 (#4388)

* Update Message/Input links

* cleanup, enable links

---------

Co-authored-by: Heather Buchel <buchel@amazon.com>
---
 .../components/dropzone/index.page.mdx        |   5 +-
 .../[platform]/components/dropzone/react.mdx  |  23 ++--
 ...meExample.tsx => FieldsetThemeExample.tsx} |   2 +-
 .../examples/TestFieldsetControls.tsx         | 126 ------------------
 .../components/fieldset/examples/index.ts     |   3 +-
 .../components/fieldset/index.page.mdx        |   3 +-
 .../[platform]/components/fieldset/react.mdx  |  28 ++--
 .../components/input/index.page.mdx           |   2 +-
 .../[platform]/components/input/react.mdx     |   4 +-
 .../components/message/index.page.mdx         |   4 +-
 .../[platform]/components/message/react.mdx   |  16 ++-
 11 files changed, 43 insertions(+), 173 deletions(-)
 rename docs/src/pages/[platform]/components/fieldset/examples/{ThemeExample.tsx => FieldsetThemeExample.tsx} (94%)
 delete mode 100644 docs/src/pages/[platform]/components/fieldset/examples/TestFieldsetControls.tsx

diff --git a/docs/src/pages/[platform]/components/dropzone/index.page.mdx b/docs/src/pages/[platform]/components/dropzone/index.page.mdx
index 4fc6ba93365..2280f4a0893 100644
--- a/docs/src/pages/[platform]/components/dropzone/index.page.mdx
+++ b/docs/src/pages/[platform]/components/dropzone/index.page.mdx
@@ -1,9 +1,8 @@
 ---
 title: DropZone
 description: The Dropzone component captures files from user with drag and drop
-
-# themeSource: packages/ui/src/theme/tokens/components/dropZone.ts
-# reactSource: packages/react/src/primitives/DropZone/DropZone.tsx
+themeSource: packages/ui/src/theme/tokens/components/dropZone.ts
+reactSource: packages/react/src/primitives/DropZone/DropZone.tsx
 htmlElement: div
 supportedFrameworks: react
 ---
diff --git a/docs/src/pages/[platform]/components/dropzone/react.mdx b/docs/src/pages/[platform]/components/dropzone/react.mdx
index b2da4e3c703..a1bc2299a36 100644
--- a/docs/src/pages/[platform]/components/dropzone/react.mdx
+++ b/docs/src/pages/[platform]/components/dropzone/react.mdx
@@ -1,6 +1,6 @@
 import { Example, ExampleCode } from '@/components/Example'
 import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay'
-
+import ThemeExample from '@/components/ThemeExample.mdx';
 import {
   AcceptRejectDropZoneExample,
   DefaultDropZoneExample,
@@ -71,17 +71,16 @@ You can add a button to open the file picker by adding a hidden input and firing
 
 ## Styling
 
-{/* Commenting this out to not break link checker */}
-{/* <ThemeExample component="DropZone"> */}
-<Example>
-  <DropZoneThemeExample />
-  
-  <ExampleCode>
-  ```jsx file=./examples/DropZoneThemeExample.tsx
-  ```
-  </ExampleCode>
-</Example>
-{/* </ThemeExample> */}
+<ThemeExample component="DropZone">
+  <Example>
+    <DropZoneThemeExample />
+    
+    <ExampleCode>
+    ```jsx file=./examples/DropZoneThemeExample.tsx
+    ```
+    </ExampleCode>
+  </Example>
+</ThemeExample>
 
 ### Target classes
 
diff --git a/docs/src/pages/[platform]/components/fieldset/examples/ThemeExample.tsx b/docs/src/pages/[platform]/components/fieldset/examples/FieldsetThemeExample.tsx
similarity index 94%
rename from docs/src/pages/[platform]/components/fieldset/examples/ThemeExample.tsx
rename to docs/src/pages/[platform]/components/fieldset/examples/FieldsetThemeExample.tsx
index cea15224e59..b80ffe8cffc 100644
--- a/docs/src/pages/[platform]/components/fieldset/examples/ThemeExample.tsx
+++ b/docs/src/pages/[platform]/components/fieldset/examples/FieldsetThemeExample.tsx
@@ -21,7 +21,7 @@ const theme = createTheme({
   },
 });
 
-export const ThemeExample = () => (
+export const FieldsetThemeExample = () => (
   <ThemeProvider theme={theme} colorMode="light">
     <Fieldset legend="Default fieldset with theming">
       Some content of the fieldset.
diff --git a/docs/src/pages/[platform]/components/fieldset/examples/TestFieldsetControls.tsx b/docs/src/pages/[platform]/components/fieldset/examples/TestFieldsetControls.tsx
deleted file mode 100644
index b99c58d6dc0..00000000000
--- a/docs/src/pages/[platform]/components/fieldset/examples/TestFieldsetControls.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import {
-  Autocomplete,
-  Button,
-  CheckboxField,
-  PasswordField,
-  PhoneNumberField,
-  Radio,
-  RadioGroupField,
-  SearchField,
-  SelectField,
-  SliderField,
-  StepperField,
-  SwitchField,
-  TextAreaField,
-  TextField,
-  ToggleButton,
-  Flex,
-  Fieldset,
-} from '@aws-amplify/ui-react';
-
-export const TestFieldsetControls = () => {
-  return (
-    <div>
-      <Flex direction="column" as="form">
-        <Fieldset
-          variation="outlined"
-          legend="Parent fieldset"
-          isDisabled={true}
-        >
-          <TextField label="Last name" />
-          <Button>Button</Button>
-          <Fieldset
-            name="main fieldset"
-            variation="outlined"
-            legend="Nested fieldset"
-            direction="column"
-            isDisabled={false}
-          >
-            <Fieldset isDisabled={true} legend="subnested Legend">
-              <TextField label="Last name" isDisabled={false} />
-            </Fieldset>
-            <Autocomplete
-              labelHidden={false}
-              label="Autocomplete"
-              isDisabled={false}
-              options={[
-                { id: 'apple', label: 'apple' },
-                { id: 'banana', label: 'banana' },
-                { id: 'cherry', label: 'cherry' },
-                { id: 'grape', label: 'grape' },
-                { id: 'kiwis', label: 'kiwis' },
-                { id: 'lemon', label: 'lemon' },
-                { id: 'mango', label: 'mango' },
-                { id: 'orange', label: 'orange' },
-                { id: 'strawberry', label: 'strawberry' },
-              ]}
-              placeholder="Search here..."
-            />
-            <Button isDisabled={false}>Button</Button>
-            <CheckboxField
-              label="Subscribe"
-              name="subscribe"
-              value="yes"
-              isDisabled={false}
-            />
-            <SelectField
-              label="Fruit"
-              descriptiveText="What's your favorite fruit?"
-              isDisabled={false}
-            >
-              <option value="apple">Apple</option>
-              <option value="banana">Banana</option>
-              <option value="orange">Orange</option>
-            </SelectField>
-            <PasswordField
-              autoComplete="new-password"
-              descriptiveText="Please enter password"
-              label="Password"
-              name="password"
-              size="small"
-              isDisabled={false}
-            />
-            <PhoneNumberField
-              defaultDialCode="+1"
-              label="Phone number"
-              descriptiveText="Please enter your phone number"
-              placeholder="234-567-8910"
-              isDisabled={false}
-            />
-            <SearchField
-              label="Search"
-              placeholder="Search here..."
-              isDisabled={false}
-            />
-            <TextField label="Last name" isDisabled={false} />
-            <StepperField
-              max={10}
-              min={0}
-              step={1}
-              label="Stepper"
-              isDisabled={false}
-            />
-            <ToggleButton isDisabled={false}>Press me!</ToggleButton>
-            <TextAreaField
-              label="Last name"
-              name="last_name"
-              rows={3}
-              isDisabled={false}
-            />
-            <RadioGroupField
-              label="Language"
-              name="language"
-              isDisabled={false}
-            >
-              <Radio value="HTML">HTML</Radio>
-              <Radio value="CSS">CSS</Radio>
-              <Radio value="JavaScript">JavaScript</Radio>
-            </RadioGroupField>
-            <SwitchField label="SwitchField" isDisabled={false} />
-            <SliderField label="Slider" max={100} isDisabled={false} />
-          </Fieldset>
-        </Fieldset>
-      </Flex>
-    </div>
-  );
-};
diff --git a/docs/src/pages/[platform]/components/fieldset/examples/index.ts b/docs/src/pages/[platform]/components/fieldset/examples/index.ts
index 622c9077065..0153be1cfd0 100644
--- a/docs/src/pages/[platform]/components/fieldset/examples/index.ts
+++ b/docs/src/pages/[platform]/components/fieldset/examples/index.ts
@@ -5,6 +5,5 @@ export { FieldsetDirection } from './FieldsetDirection';
 export { DisabledFieldset } from './DisabledFieldset';
 export { FormAttribute } from './FormAttribute';
 export { NameAttribute } from './NameAttribute';
-export { ThemeExample } from './ThemeExample';
+export { FieldsetThemeExample } from './FieldsetThemeExample';
 export { FieldsetStylePropsExample } from './FieldsetStylePropsExample';
-export { TestFieldsetControls } from './TestFieldsetControls';
diff --git a/docs/src/pages/[platform]/components/fieldset/index.page.mdx b/docs/src/pages/[platform]/components/fieldset/index.page.mdx
index 4e5847006bf..612c99b1992 100644
--- a/docs/src/pages/[platform]/components/fieldset/index.page.mdx
+++ b/docs/src/pages/[platform]/components/fieldset/index.page.mdx
@@ -1,7 +1,8 @@
 ---
 title: Fieldset
 description: Fieldsets are used to group related form fields.
-# reactSource: packages/react/src/primitives/Fieldset/Fieldset.tsx
+reactSource: packages/react/src/primitives/Fieldset/Fieldset.tsx
+themeSource: packages/ui/src/theme/tokens/components/fieldset.ts
 mdnUrl: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 htmlElement: fieldset
 supportedFrameworks: react
diff --git a/docs/src/pages/[platform]/components/fieldset/react.mdx b/docs/src/pages/[platform]/components/fieldset/react.mdx
index ea461e2f5ab..c7a943b3111 100644
--- a/docs/src/pages/[platform]/components/fieldset/react.mdx
+++ b/docs/src/pages/[platform]/components/fieldset/react.mdx
@@ -3,6 +3,7 @@ import { Flex, Text, Button, View, Alert, Fieldset, Link } from '@aws-amplify/ui
 import { FieldsetDemo } from './demo';
 import { Example, ExampleCode } from '@/components/Example';
 import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
+import ThemeExample from '@/components/ThemeExample.mdx';
 import { 
   BasicFieldset, 
   FieldsetSizes, 
@@ -11,7 +12,7 @@ import {
   DisabledFieldset,
   FormAttribute,
   NameAttribute,
-  ThemeExample,
+  FieldsetThemeExample,
   FieldsetStylePropsExample
 } from './examples';
 
@@ -136,22 +137,19 @@ Fieldset supports the [name] attribute. Use the `name` prop to supply a name for
 
 ## Styling
 
-### Theme
+<ThemeExample component="Fieldset">
+  <Example>
+    <FieldsetThemeExample />
+    
+    <ExampleCode>
 
-<Example>
-  <View>
-    <ThemeExample />
-  </View>
-  
-  <ExampleCode>
-
-```jsx file=./examples/ThemeExample.tsx
+    ```tsx file=./examples/FieldsetThemeExample.tsx
 
-```
-
-  </ExampleCode>
-</Example>
+    ```
 
+    </ExampleCode>
+  </Example>
+</ThemeExample>
 
 ### Target classes
 
@@ -192,8 +190,6 @@ To override styling on a specific Fieldset, you can use (in order of increasing
   <Fieldset className="purple-fieldset" legend="A purple fieldset">
     This is a purple fieldset
   </Fieldset>
-  
-  
   <ExampleCode>
 
 ```css
diff --git a/docs/src/pages/[platform]/components/input/index.page.mdx b/docs/src/pages/[platform]/components/input/index.page.mdx
index 0d308fce42e..572dce89633 100644
--- a/docs/src/pages/[platform]/components/input/index.page.mdx
+++ b/docs/src/pages/[platform]/components/input/index.page.mdx
@@ -1,7 +1,7 @@
 ---
 title: Input
 description: Input allows users to enter text content.
-# themeSource: packages/ui/src/theme/tokens/components/input.ts
+themeSource: packages/ui/src/theme/tokens/components/input.ts
 reactSource: packages/react/src/primitives/Input/Input.tsx
 mdnUrl: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
 htmlElement: input
diff --git a/docs/src/pages/[platform]/components/input/react.mdx b/docs/src/pages/[platform]/components/input/react.mdx
index 046941bc5eb..320a0926890 100644
--- a/docs/src/pages/[platform]/components/input/react.mdx
+++ b/docs/src/pages/[platform]/components/input/react.mdx
@@ -178,7 +178,7 @@ Input primitive comes styled for text input only (type `text`, `date`, `number`,
 
 ## Styling
 
-{/* <ThemeExample component="Input">
+<ThemeExample component="Input">
   <Example>
     <InputThemeExample />
     
@@ -190,7 +190,7 @@ Input primitive comes styled for text input only (type `text`, `date`, `number`,
 
     </ExampleCode>
   </Example>
-</ThemeExample> */}
+</ThemeExample>
 
 ### Global styling
 
diff --git a/docs/src/pages/[platform]/components/message/index.page.mdx b/docs/src/pages/[platform]/components/message/index.page.mdx
index 02f01be08e4..bd75804cad0 100644
--- a/docs/src/pages/[platform]/components/message/index.page.mdx
+++ b/docs/src/pages/[platform]/components/message/index.page.mdx
@@ -1,8 +1,8 @@
 ---
 title: Message
 description: A Message can be used to display feedback to the user.
-# themeSource: packages/ui/src/theme/tokens/components/message.ts
-# reactSource: packages/react/src/primitives/Message/Message.tsx
+themeSource: packages/ui/src/theme/tokens/components/message.ts
+reactSource: packages/react/src/primitives/Message/Message.tsx
 mdnUrl: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
 htmlElement: div
 supportedFrameworks: react
diff --git a/docs/src/pages/[platform]/components/message/react.mdx b/docs/src/pages/[platform]/components/message/react.mdx
index 70b9ddbef38..8cfcf440ff8 100644
--- a/docs/src/pages/[platform]/components/message/react.mdx
+++ b/docs/src/pages/[platform]/components/message/react.mdx
@@ -93,17 +93,19 @@ For more control over the appearance and functionality of the dismiss button, co
 
 ## Styling
 
-### Theme
+<ThemeExample component="Message">
+  <Example>
+    <MessageThemeExample />
+    
+    <ExampleCode>
 
-<Example>
-  <MessageThemeExample />
-  <ExampleCode>
-    ```jsx file=./examples/MessageThemeExample.tsx
+    ```tsx file=./examples/MessageThemeExample.tsx
 
     ```
 
-  </ExampleCode>
-</Example>
+    </ExampleCode>
+  </Example>
+</ThemeExample>
 
 ### Target classes