moved props lower in the doc hierarchy (#476)

gsoft-inc · Oct 7, 2024 · abaadf5 · abaadf5
2 parents 967566f + ab3da6c
commit abaadf5
Show file tree

Hide file tree

Showing 34 changed files with 173 additions and 174 deletions.
diff --git a/apps/docs/content/components/application/HopperProvider.mdx b/apps/docs/content/components/application/HopperProvider.mdx
@@ -9,10 +9,6 @@ links:
 
 <CodeOnlyExample src="HopperProvider/docs/hopper-provider/preview" />
 
-## Props
-
-<PropTable component="HopperProvider" />
-
 ## Application provider
 
 A HopperProvider must be the root component of your application. All other Hopper components rely on the Provider to define the color scheme, locale, and other settings that they need in order to render.
@@ -77,3 +73,7 @@ body {
 `withCssVariables` determines whether Hopper's CSS variables should be added to your application. By default, it is set to true and should not be changed unless you want to manage CSS variables via a CSS file. Note that in this case, you will need to add the tokens manually, ideally using the `@hopper-ui/tokens` [package](/tokens/getting-started/usage).
 
 <CodeOnlyExample src="HopperProvider/docs/hopper-provider/inject-css-var" />
+
+## Props
+
+<PropTable component="HopperProvider" />
diff --git a/apps/docs/content/components/buttons/Button.mdx b/apps/docs/content/components/buttons/Button.mdx
@@ -9,10 +9,6 @@ links:
 
 <Example src="buttons/docs/button/preview" isOpen />
 
-## Props
-
-<PropTable component="Button" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -123,6 +119,10 @@ A button can be rendered as a react router link when using the href property and
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
 
+## Props
+
+<PropTable component="Button" />
+
 ## Migration Notes
 
 <MigrateGuide src="buttons/docs/migration-notes" />
diff --git a/apps/docs/content/components/buttons/ButtonGroup.mdx b/apps/docs/content/components/buttons/ButtonGroup.mdx
@@ -8,10 +8,6 @@ links:
 
 <Example src="buttons/docs/buttonGroup/preview" isOpen />
 
-## Props
-
-<PropTable component="ButtonGroup" />
-
 ## Anatomy
 
 <FeatureFlag flag="next">
@@ -79,6 +75,10 @@ A button group can be of different sizes.
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
 
+## Props
+
+<PropTable component="ButtonGroup" />
+
 ## Migration Notes
 
 <MigrateGuide src="buttons/docs/migration-notes-button-group" />
diff --git a/apps/docs/content/components/collections/Listbox.mdx b/apps/docs/content/components/collections/Listbox.mdx
@@ -9,15 +9,6 @@ links:
 
 <Example src="ListBox/docs/preview" isOpen />
 
-## Props
-
-<PropTable component="ListBox" />
-
-### ListBoxItem
-
-<PropTable component="ListBoxItem" />
-
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -190,6 +181,14 @@ List box items can vary in sizes.
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
 
+## Props
+
+<PropTable component="ListBox" />
+
+### ListBoxItem
+
+<PropTable component="ListBoxItem" />
+
 ## Migration Notes
 
 <MigrateGuide src="ListBox/docs/migration-notes" />
diff --git a/apps/docs/content/components/collections/TagGroup.mdx b/apps/docs/content/components/collections/TagGroup.mdx
@@ -9,20 +9,6 @@ links:
 
 <Example src="tag/docs/preview" />
 
-## Props
-
-### TagGroup
-
-<PropTable component="TagGroup" />
-
-### TagList
-
-<PropTable component="TagList" />
-
-### Tag
-
-<PropTable component="Tag" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -203,6 +189,20 @@ A tag can be rendered as a react router link when using the `href` prop and sett
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
 
+## Props
+
+### TagGroup
+
+<PropTable component="TagGroup" />
+
+### TagList
+
+<PropTable component="TagList" />
+
+### Tag
+
+<PropTable component="Tag" />
+
 ## Migration Notes
 
 ### TagGroup

diff --git a/apps/docs/content/components/content/Avatar.mdx b/apps/docs/content/components/content/Avatar.mdx
@@ -8,10 +8,6 @@ links:
 
 <Example src="Avatar/docs/preview" isOpen />
 
-## Props
-
-<PropTable component="Avatar" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -114,3 +110,7 @@ Using a custom hook to retry loading the image up to 5 times with a 250ms delay.
 
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
+
+## Props
+
+<PropTable component="Avatar" />
diff --git a/apps/docs/content/components/content/Divider.mdx b/apps/docs/content/components/content/Divider.mdx
@@ -8,10 +8,6 @@ links:
 
 <Example src="Divider/docs/preview" isOpen />
 
-## Props
-
-<PropTable component="Divider" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -55,6 +51,10 @@ A divider can have two orientations: horizontal or vertical.
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
 
+## Props
+
+<PropTable component="Divider" />
+
 ## Migration Notes
 
 <MigrateGuide src="Divider/docs/migration-notes" />
diff --git a/apps/docs/content/components/content/Heading.mdx b/apps/docs/content/components/content/Heading.mdx
@@ -7,12 +7,6 @@ links:
 ---
 <Example src="typography/Heading/docs/preview" isOpen />
 
-## Props
-
-These props are also available for `H1`, `H2`, `H3`, `H4`, `H5` and `H6` components.
-
-<PropTable component="Heading" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -72,6 +66,12 @@ You can alter the size of a heading to match the parent element's type scale by
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
 
+## Props
+
+These props are also available for `H1`, `H2`, `H3`, `H4`, `H5` and `H6` components.
+
+<PropTable component="Heading" />
+
 ## Migration Notes
 
 <MigrateGuide src="typography/Heading/docs/migration-notes" />
diff --git a/apps/docs/content/components/content/Label.mdx b/apps/docs/content/components/content/Label.mdx
@@ -7,10 +7,6 @@ links:
 ---
 <Example src="typography/Label/docs/preview" isOpen />
 
-## Props
-
-<PropTable component="Label" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -62,3 +58,7 @@ The label component can be marked as required.
 
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
+
+## Props
+
+<PropTable component="Label" />
diff --git a/apps/docs/content/components/content/Text.mdx b/apps/docs/content/components/content/Text.mdx
@@ -8,10 +8,6 @@ links:
 
 <Example src="typography/Text/docs/text/preview" isOpen />
 
-## Props
-
-<PropTable component="Text" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -69,3 +65,7 @@ The Text component can be nested within other Text components and inherit the pa
 
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
+
+## Props
+
+<PropTable component="Text" />
diff --git a/apps/docs/content/components/forms/Checkbox.mdx b/apps/docs/content/components/forms/Checkbox.mdx
@@ -9,16 +9,6 @@ links:
 
 <Example src="checkbox/docs/checkbox/preview" isOpen />
 
-## Props
-
-### Checkbox
-
-<PropTable component="Checkbox" />
-
-### CheckboxField
-
-<PropTable component="CheckboxField" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -138,6 +128,16 @@ A checkbox can have a description to provide more information to the user.
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
 
+## Props
+
+### Checkbox
+
+<PropTable component="Checkbox" />
+
+### CheckboxField
+
+<PropTable component="CheckboxField" />
+
 ## Migration Notes
 
 <MigrateGuide src="checkbox/docs/migration-notes-checkbox" />
diff --git a/apps/docs/content/components/forms/CheckboxGroup.mdx b/apps/docs/content/components/forms/CheckboxGroup.mdx
@@ -8,10 +8,6 @@ links:
 
 <Example src="checkbox/docs/checkboxgroup/preview" isOpen />
 
-## Props
-
-<PropTable component="CheckboxGroup" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -108,6 +104,10 @@ A checkbox group can handle value state in controlled mode.
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
 
+## Props
+
+<PropTable component="CheckboxGroup" />
+
 ## Migration Notes
 
 <MigrateGuide src="checkbox/docs/migration-notes-checkboxgroup" />
diff --git a/apps/docs/content/components/forms/ErrorMessage.mdx b/apps/docs/content/components/forms/ErrorMessage.mdx
@@ -8,10 +8,6 @@ links:
 
 <Example src="ErrorMessage/docs/preview" isOpen />
 
-## Props
-
-<PropTable component="ErrorMessage" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -60,3 +56,7 @@ An error message can display multiple validation errors created by a form field.
 
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
+
+## Props
+
+<PropTable component="ErrorMessage" />
diff --git a/apps/docs/content/components/forms/Form.mdx b/apps/docs/content/components/forms/Form.mdx
@@ -8,10 +8,6 @@ links:
 
 <Example src="Form/docs/preview" />
 
-## Props
-
-<PropTable component="Form" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -99,3 +95,7 @@ Form fields can take the width of their container.
 
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
+
+## Props
+
+<PropTable component="Form" />
diff --git a/apps/docs/content/components/forms/HelperMessage.mdx b/apps/docs/content/components/forms/HelperMessage.mdx
@@ -8,10 +8,6 @@ links:
 
 <Example src="HelperMessage/docs/preview" isOpen />
 
-## Props
-
-<PropTable component="HelperMessage" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -53,3 +49,7 @@ A helper message can hide its default icon.
 
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
+
+## Props
+
+<PropTable component="HelperMessage" />
diff --git a/apps/docs/content/components/forms/NumberField.mdx b/apps/docs/content/components/forms/NumberField.mdx
@@ -8,10 +8,6 @@ links:
 
 <Example src="inputs/docs/numberField/preview" isOpen />
 
-## Props
-
-<PropTable component="NumberField" />
-
 <FeatureFlag flag="next">
     ## Guidelines
 
@@ -110,6 +106,10 @@ A number field can take the width of its container.
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
 
+## Props
+
+<PropTable component="NumberField" />
+
 ## Migration Notes
 
 <MigrateGuide src="inputs/docs/migration-notes-number-field" />
diff --git a/apps/docs/content/components/forms/PasswordField.mdx b/apps/docs/content/components/forms/PasswordField.mdx
@@ -8,10 +8,6 @@ links:
 
 <Example src="inputs/docs/passwordField/preview" isOpen />
 
-## Props
-
-<PropTable component="PasswordField" />
-
 ## Anatomy
 
 <FeatureFlag flag="next">
@@ -88,6 +84,10 @@ A password field with a helper message.
     TODO: Example of creating a custom version of this component
 </FeatureFlag>
 
+## Props
+
+<PropTable component="PasswordField" />
+
 ## Migration Notes
 
 <MigrateGuide src="inputs/docs/migration-notes-password-field" />