docs[DST-503]:Revise Select and add slots to text component (#4071)

Co-authored-by: Sebastian Sebald <[email protected]>

.changeset/happy-carrots-shout.md

@@ -0,0 +1,8 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+"@marigold/theme-b2b": patch
+"@marigold/theme-core": patch
+---
+
+docs[DST-503]:Revise Select and add slots to text component

docs/content/components/form/autocomplete/autocomplete.mdx

@@ -25,7 +25,7 @@ import { Autocomplete } from '@marigold/components';
 
 ### Autocomplete.Item
 
-<PropsTable component="ListBoxOption" />
+<PropsTable component="ListBoxItem" />
 
 ## Examples
 

docs/content/components/form/combobox/combobox.mdx

@@ -25,7 +25,7 @@ import { ComboBox } from '@marigold/components';
 
 ### ComboBox.Item
 
-<PropsTable component="ListBoxOption" />
+<PropsTable component="ListBoxItem" />
 
 ## Examples
 

docs/content/components/form/select/select-appearance.demo.tsx

@@ -0,0 +1,19 @@
+import { SelectProps } from '@marigold/components';
+import { Select } from '@marigold/components';
+
+export default (props: SelectProps<object>) => (
+  <Select
+    {...props}
+    label="Genre"
+    placeholder="Select genre"
+    description="Select the genre you want."
+    width="fit"
+  >
+    <Select.Option id="pop">Pop</Select.Option>
+    <Select.Option id="hiphop">Hip Hop</Select.Option>
+    <Select.Option id="rock">Rock</Select.Option>
+    <Select.Option id="schlager">Schlager</Select.Option>
+    <Select.Option id="jazz">Jazz</Select.Option>
+    <Select.Option id="dance">Dance</Select.Option>
+  </Select>
+);

docs/content/components/form/select/select-description.demo.tsx

@@ -0,0 +1,24 @@
+import { Select, Text } from '@marigold/components';
+
+export default () => (
+  <Select label="Permissions" width="fit">
+    <Select.Option id="read" textValue="Read">
+      <Text slot="label">Read</Text>
+      <Text slot="description" fontSize="xs">
+        Read only
+      </Text>
+    </Select.Option>
+    <Select.Option id="write" textValue="Write">
+      <Text slot="label">Write</Text>
+      <Text slot="description" fontSize="xs">
+        Read and write only
+      </Text>
+    </Select.Option>
+    <Select.Option id="admin" textValue="Admin">
+      <Text slot="label">Admin</Text>
+      <Text slot="description" fontSize="xs">
+        Full access
+      </Text>
+    </Select.Option>
+  </Select>
+);

docs/content/components/form/select/select-disabled-keys.demo.tsx

@@ -1,12 +1,21 @@
 import { Select } from '@marigold/components';
 
 export default () => (
-  <Select label="Favorite Color" disabledKeys={['Orange', 'Yellow']}>
-    <Select.Option id="Red">Red</Select.Option>
-    <Select.Option id="Orange">Orange</Select.Option>
-    <Select.Option id="Yellow">Yellow</Select.Option>
-    <Select.Option id="Green">Green</Select.Option>
-    <Select.Option id="Blue">Blue</Select.Option>
-    <Select.Option id="Purple">Purple</Select.Option>
+  <Select
+    label="Shipping direction"
+    disabledKeys={['germany', 'elsalvador', 'poland']}
+    description="Please select the shipping direction, not every country can be available."
+    width="fit"
+  >
+    <Select.Option id="czechrepublic">Czech Republic</Select.Option>
+    <Select.Option id="egypt">Egypt</Select.Option>
+    <Select.Option id="elsalvador">El Salvador</Select.Option>
+    <Select.Option id="germany">Germany</Select.Option>
+    <Select.Option id="hungary">Hungary</Select.Option>
+    <Select.Option id="india">India</Select.Option>
+    <Select.Option id="nigeria">Nigeria</Select.Option>
+    <Select.Option id="poland">Poland</Select.Option>
+    <Select.Option id="portugal">Portugal</Select.Option>
+    <Select.Option id="ukraine">Ukraine</Select.Option>
   </Select>
 );

docs/content/components/form/select/select-section.demo.tsx

@@ -1,16 +1,38 @@
 import { Header, Select } from '@marigold/components';
 
-export default () => (
-  <Select label="Choose your Fandom">
-    <Select.Section>
-      <Header>Fantasy</Header>
-      <Select.Option>Harry Potter</Select.Option>
-      <Select.Option>Lord of the Rings</Select.Option>
-    </Select.Section>
-    <Select.Section>
-      <Header>Sci-Fi</Header>
-      <Select.Option>Star Wars</Select.Option>
-      <Select.Option>Star Trek</Select.Option>
-    </Select.Section>
-  </Select>
-);
+export default () => {
+  const items = [
+    { category: 'Comedy', genres: ['Kabarett', 'Satire', 'Stand Up Comedy'] },
+    {
+      category: 'Classic',
+      genres: ['Chor', 'Kammermusik', 'Kantate', 'Klavierkonzert'],
+    },
+    {
+      category: 'Hardcore',
+      genres: [
+        'Hardcore Punk',
+        'Jazzcore',
+        'Mathcore',
+        'Melodic Hardcore',
+        'Metalcore',
+      ],
+    },
+    {
+      category: 'Metal',
+      genres: ['Black Metal', 'Death Metal', 'Heavy Metal', 'Nu Metal'],
+    },
+  ];
+
+  return (
+    <Select label="Genres" items={items} width="fit">
+      {items.map(item => (
+        <Select.Section key={item.category}>
+          <Header>{item.category}</Header>
+          {item.genres.map(genre => (
+            <Select.Option key={genre}>{genre}</Select.Option>
+          ))}
+        </Select.Section>
+      ))}
+    </Select>
+  );
+};