Added documentation for placeholder components (#486)

apps/docs/content/components/collections/Listbox.mdx

@@ -29,7 +29,6 @@ links:
     TODO: links to related concepts
 </FeatureFlag>
 
-
 #### Header
 
 The Header component represents a `header` within a Hopper container.
@@ -44,8 +43,8 @@ The Section component represents a `section` within a Hopper container.
 
 A `ListBox` uses the following components.
 
-- [Header](./Listbox#header)
-- [Section](./Listbox#section)
+- [Header](./Header)
+- [Section](/Section)
 - [ListBoxItem](./Listbox#listboxitem)
 
 #### ListBoxItem

apps/docs/content/components/collections/Section.mdx

@@ -0,0 +1,70 @@
+---
+title: Section
+description: A Section serves as a versatile container component, encapsulating an HTML section element.
+category: "collections"
+links:
+    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Section/src/Section.tsx
+---
+
+Section is a subcomponent of [Listbox](./Listbox), it's used within [Combobox](./ComboBox) and [Select](./Select).
+
+<Example src="Section/docs/preview" isOpen />
+
+<FeatureFlag flag="next">
+    ## Guidelines
+
+    TODO: If we have some guidelines about this component&apos;s usage
+
+    ### Accessibility ?
+
+    TODO: If we have some guidelines about this component and accessibility
+</FeatureFlag>
+
+## Anatomy
+
+### Composed Components
+
+A `Section` uses the following components.
+
+#### Listbox
+
+- [ListboxItem](./Listbox#listboxitem)
+- [Header](./Header)
+
+#### Combobox
+
+- [ComboBoxOption](./ComboBox#comboboxoption)
+- [Header](./Header)
+
+#### Select
+
+- [SelectOption](./Select#selectoption)
+- [Header](./Header)
+
+<FeatureFlag flag="rc">
+
+    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+
+    ### Concepts
+
+    TODO: links to related concepts
+</FeatureFlag>
+
+<FeatureFlag flag="next">
+    ## Advanced customization
+
+    ### Contexts
+    TODO: Example of context + content about the context
+
+    ### Custom Children
+
+    TODO: Example of passing custom childrens to the components to fake a slot
+
+    ### Custom Component
+
+    TODO: Example of creating a custom version of this component
+</FeatureFlag>
+
+## Props
+
+<PropTable component="Section" />

apps/docs/content/components/overlays/Popover.mdx

@@ -36,8 +36,8 @@ A `Popover` uses the following components.
 
 - [Button](./Button)
 - [ButtonGroup](./ButtonGroup)
-- Content
-- Footer
+- [Content](./Content)
+- [Footer](./Footer)
 - [Heading](./Heading)
 - [Link](./Link)
 

apps/docs/content/components/pickers/ComboBox.mdx

@@ -47,7 +47,7 @@ A `ComboBox` uses the following components.
 - [Label](./Label)
 - [Helper Message](./HelperMessage)
 - [Error Message](./ErrorMessage)
-- [Header](./ComboBox#header)
+- [Header](./Header)
 - [Section](./ComboBox#section)
 
 #### ComboBoxOption

apps/docs/content/components/pickers/Select.mdx

@@ -46,8 +46,8 @@ A `Select` uses the following components.
 - [Label](./Label)
 - [Helper Message](./HelperMessage)
 - [Error Message](./ErrorMessage)
-- [Header](./Select#header)
-- [Section](./Select#section)
+- [Header](./Header)
+- [Section](./Section)
 
 #### SelectOption
 

apps/docs/content/components/placeholders/Content.mdx

@@ -0,0 +1,50 @@
+---
+title: Content
+description: A placeholder for the main content section of a component.
+category: "placeholders"
+links:
+    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/layout/src/Content.tsx
+---
+
+A content placeholder component provides no specific styling by itself, but receives styling from the parent container. In addition, a content placeholder will be automatically placed within the container's layout according to Hopper guidelines.
+
+<Example src="layout/docs/content/preview" isOpen />
+
+<FeatureFlag flag="next">
+    ## Guidelines
+
+    TODO: If we have some guidelines about this component&apos;s usage
+
+    ### Accessibility ?
+
+    TODO: If we have some guidelines about this component and accessibility
+</FeatureFlag>
+
+<FeatureFlag flag="rc">
+    ## Anatomy
+
+    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+
+    ### Concepts
+
+    TODO: links to related concepts
+</FeatureFlag>
+
+<FeatureFlag flag="next">
+    ## Advanced customization
+
+    ### Contexts
+    TODO: Example of context + content about the context
+
+    ### Custom Children
+
+    TODO: Example of passing custom childrens to the components to fake a slot
+
+    ### Custom Component
+
+    TODO: Example of creating a custom version of this component
+</FeatureFlag>
+
+## Props
+
+<PropTable component="Content" />

apps/docs/content/components/placeholders/Footer.mdx

@@ -0,0 +1,50 @@
+---
+title: Footer
+description: A placeholder for a footer section.
+category: "placeholders"
+links:
+    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/layout/src/Footer.tsx
+---
+
+A footer placeholder component provides no specific styling by itself, but receives styling from the parent container. In addition, a footer placeholder will be automatically placed within the container's layout according to Hopper guidelines.
+
+<Example src="layout/docs/footer/preview" isOpen />
+
+<FeatureFlag flag="next">
+    ## Guidelines
+
+    TODO: If we have some guidelines about this component&apos;s usage
+
+    ### Accessibility ?
+
+    TODO: If we have some guidelines about this component and accessibility
+</FeatureFlag>
+
+<FeatureFlag flag="rc">
+    ## Anatomy
+
+    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+
+    ### Concepts
+
+    TODO: links to related concepts
+</FeatureFlag>
+
+<FeatureFlag flag="next">
+    ## Advanced customization
+
+    ### Contexts
+    TODO: Example of context + content about the context
+
+    ### Custom Children
+
+    TODO: Example of passing custom childrens to the components to fake a slot
+
+    ### Custom Component
+
+    TODO: Example of creating a custom version of this component
+</FeatureFlag>
+
+## Props
+
+<PropTable component="Footer" />

apps/docs/content/components/placeholders/Header.mdx

@@ -0,0 +1,50 @@
+---
+title: Header
+description: A placeholder for an header section.
+category: "placeholders"
+links:
+    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Header/src/Header.tsx
+---
+
+An header placeholder component provides no specific styling by itself, but receives styling from the parent container. In addition, an header placeholder will be automatically placed within the container's layout according to Hopper guidelines.
+
+<Example src="Header/docs/preview" />
+
+<FeatureFlag flag="next">
+    ## Guidelines
+
+    TODO: If we have some guidelines about this component&apos;s usage
+
+    ### Accessibility ?
+
+    TODO: If we have some guidelines about this component and accessibility
+</FeatureFlag>
+
+<FeatureFlag flag="rc">
+## Anatomy
+
+    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+
+    ### Concepts
+
+    TODO: links to related concepts
+</FeatureFlag>
+
+<FeatureFlag flag="next">
+    ## Advanced customization
+
+    ### Contexts
+    TODO: Example of context + content about the context
+
+    ### Custom Children
+
+    TODO: Example of passing custom childrens to the components to fake a slot
+
+    ### Custom Component
+
+    TODO: Example of creating a custom version of this component
+</FeatureFlag>
+
+## Props
+
+<PropTable component="Header" />

apps/docs/examples/Preview.ts

@@ -956,6 +956,18 @@ export const Previews: Record<string, Preview> = {
     "Select/docs/selectDropdown/description": {
         component: lazy(() => import("@/../../packages/components/src/Select/docs/selectDropdown/description.tsx"))
     },
+    "layout/docs/content/preview": {
+        component: lazy(() => import("@/../../packages/components/src/layout/docs/content/preview.tsx"))
+    },
+    "layout/docs/footer/preview": {
+        component: lazy(() => import("@/../../packages/components/src/layout/docs/footer/preview.tsx"))
+    },
+    "Header/docs/preview": {
+        component: lazy(() => import("@/../../packages/components/src/Header/docs/preview.tsx"))
+    },
+    "Section/docs/preview": {
+        component: lazy(() => import("@/../../packages/components/src/Section/docs/preview.tsx"))
+    },
     "Badge/docs/badge/preview": {
         component: lazy(() => import("@/../../packages/components/src/Badge/docs/badge/preview.tsx"))
     },

apps/docs/examples/overview/index.ts

@@ -7,12 +7,15 @@ import ButtonGroup from "./ButtonGroup.svg";
 import Checkbox from "./Checkbox.svg";
 import CheckboxGroup from "./CheckboxGroup.svg";
 import Combobox from "./Combobox.svg";
+import Content from "./Content.svg";
 import Divider from "./Divider.svg";
 import ErrorMessage from "./ErrorMessage.svg";
 import Flex from "./Flex.svg";
 import FloatingBadge from "./FloatingBadge.svg";
+import Footer from "./Footer.svg";
 import Form from "./Form.svg";
 import Grid from "./Grid.svg";
+import Header from "./Header.svg";
 import Heading from "./Heading.svg";
 import HelperMessage from "./HelperMessage.svg";
 import IconList from "./IconList.svg";
@@ -25,6 +28,7 @@ import PasswordField from "./PasswordField.svg";
 import Popover from "./Popover.svg";
 import RadioGroup from "./RadioGroup.svg";
 import SearchField from "./SearchField.svg";
+import Section from "./Section.svg";
 import Select from "./Select.svg";
 import Spinner from "./Spinner.svg";
 import Stack from "./Stack.svg";
@@ -48,12 +52,15 @@ export const OverviewComponents: OverviewComponentsType = {
     Checkbox,
     CheckboxGroup,
     Combobox,
+    Content,
     Divider,
     ErrorMessage,
     Flex,
     FloatingBadge,
+    Footer,
     Form,
     Grid,
+    Header,
     Heading,
     HelperMessage,
     IconList,
@@ -66,6 +73,7 @@ export const OverviewComponents: OverviewComponentsType = {
     Popover,
     RadioGroup,
     SearchField,
+    Section,
     Select,
     Spinner,
     Stack,