chore(docs): enable theme/react src links and theme examples (#4388)

* Update Message/Input links * cleanup, enable links --------- Co-authored-by: Heather Buchel <[email protected]>
aws-amplify · Aug 30, 2023 · a787311 · a787311
1 parent 2769685
commit a787311
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 173 deletions.
diff --git 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
@@ -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/...onents/fieldset/examples/ThemeExample.tsx → ...ieldset/examples/FieldsetThemeExample.tsx b/...onents/fieldset/examples/ThemeExample.tsx → ...ieldset/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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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