Docs(web, web-react, web-twig): Item in Dropdown demos #DS-956

packages/web-react/src/components/Button/README.md

@@ -1,6 +1,6 @@
 # Button
 
-This is React implementation of the [Button].
+This is React implementation of the [Button][button].
 
 ### Basic example usage
 
@@ -50,5 +50,9 @@ import { RouterLink } from 'react-router-dom';
 | `UNSAFE_className` | `string`                                                                                  | —         | ✕        | Wrapper custom class name                                                  |
 | `UNSAFE_style`     | `CSSProperties`                                                                           | —         | ✕        | Wrapper custom style                                                       |
 
-For more information see [Button] component. Button also contain all the appropriate
+For more information see [Button][button] component. Button also contain all the appropriate
 attributes according to the type of element. The default element type for Button is `<button>`.
+
+[button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button
+[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color
+[dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size

packages/web-react/src/components/ButtonLink/README.md

@@ -36,7 +36,7 @@ import { ButtonLink } from '@lmc-eu/spirit-web-react';
 | `UNSAFE_className` | `string`                                                                                  | —         | ✕        | Wrapper custom class name                                                      |
 | `UNSAFE_style`     | `CSSProperties`                                                                           | —         | ✕        | Wrapper custom style                                                           |
 
-For more information see [Button] component. ButtonLink also contain all the appropriate
+For more information see [Button][button] component. ButtonLink also contain all the appropriate
 attributes according to the type of element.
 
 [button]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Button

packages/web-react/src/components/Dropdown/README.md

@@ -1,7 +1,7 @@
 # Dropdown
 
 ⚠️ Dropdown component is [deprecated][deprecated] and will be removed in the next major version. Please use "DropdownModern" component instead.
-This is the React implementation of the [Dropdown] component.
+This is the React implementation of the [Dropdown][dropdown] component.
 
 ## Usage
 
@@ -15,6 +15,19 @@ import { Dropdown, Button } from '@lmc-eu/spirit-web-react/components';
 </Dropdown>
 ```
 
+### Dropdown with Item
+
+Enhance your DropdownPopover by incorporating the versatile [Item][item] component.
+Explore additional examples and insights within the dedicated documentation for the [Item][item] component.
+
+```jsx
+import { Dropdown, Button, Item } from '@lmc-eu/spirit-web-react/components';
+
+<Dropdown id="DropdownExample" renderTrigger={({ trigger }) => <Button {...trigger}>Trigger</Button>}>
+  <Item elementType="a" href="#" label="Item label" />
+</Dropdown>;
+```
+
 ## API
 
 | Name               | Type                                             | Default       | Required | Description                                    |
@@ -44,7 +57,7 @@ import { Dropdown, Button } from '@lmc-eu/spirit-web-react/components';
 
 # DropdownModern
 
-⚠️ `DropdownModern` component is [deprecated] and will be renamed to `Dropdown` in the next major version.
+⚠️ `DropdownModern` component is [deprecated][deprecated] and will be renamed to `Dropdown` in the next major version.
 
 ## Usage
 
@@ -62,6 +75,23 @@ const onToggle = () => setIsOpen(!isOpen);
 </DropdownModern>;
 ```
 
+### Dropdown with Item
+
+Enhance your DropdownPopover by incorporating the versatile [Item][item] component.
+Explore additional examples and insights within the dedicated documentation for the [Item][item] component.
+
+```jsx
+const [isOpen, setIsOpen] = React.useState(false);
+const onToggle = () => setIsOpen(!isOpen);
+
+<DropdownModern id="DropdownExample" isOpen={isOpen} onToggle={onToggle}>
+  <DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
+  <DropdownPopover>
+    <Item elementType="a" href="#" label="Item label" />
+  </DropdownPopover>
+</DropdownModern>;
+```
+
 ### Uncontrolled dropdown
 
 ```jsx
@@ -125,3 +155,4 @@ import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/
 [dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown
 [dropdownbreakpoint]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L11
 [dropdownfullwidthmode]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L19
+[item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Item/README.md

packages/web-react/src/components/Dropdown/demo/DropdownContentFactory.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../Icon';
+import { Item } from '../../Item';
 
 type Props = {
   content: Content[];
@@ -10,19 +10,12 @@ type Content = {
   text: string;
 };
 
-const DropdownContentFactory = ({ content }: Props) => {
-  const lastRow = content.length - 1;
-
-  return (
-    <>
-      {content.map(({ icon, text }, index) => (
-        <a href={`#${icon}`} className={`d-flex ${index !== lastRow && 'mb-400'}`} key={icon}>
-          <Icon name={icon} UNSAFE_className="mr-400" />
-          <span>{text}</span>
-        </a>
-      ))}
-    </>
-  );
-};
+const DropdownContentFactory = ({ content }: Props) => (
+  <>
+    {content.map(({ icon, text }) => (
+      <Item key={icon} label={text} elementType="a" iconName={icon} href={`#${icon}`} />
+    ))}
+  </>
+);
 
 export default DropdownContentFactory;

packages/web-react/src/components/Dropdown/demo/DropdownPlacements.tsx

@@ -2,6 +2,7 @@ import React, { ChangeEvent, Ref, useState } from 'react';
 import { DropdownRenderProps, PlacementDictionaryType } from '../../../types';
 import { Button } from '../../Button';
 import { Grid, GridItem } from '../../Grid';
+import { Item } from '../../Item';
 import { Radio } from '../../Radio';
 import { Dropdown } from '..';
 
@@ -156,15 +157,9 @@ const DropdownPlacements = () => {
               placement={placement as PlacementDictionaryType}
               renderTrigger={dropdownTrigger}
             >
-              <a href="#" className="d-flex mb-400">
-                Action
-              </a>
-              <a href="#" className="d-flex mb-400">
-                Another action
-              </a>
-              <a href="#" className="d-flex">
-                Something else here
-              </a>
+              <Item elementType="a" href="#" label="Action" />
+              <Item elementType="a" href="#" label="Another action" />
+              <Item elementType="a" href="#" label="Something else here" />
             </Dropdown>
           </div>
         </GridItem>

packages/web-react/src/components/Dropdown/demo/DropdownVariousItems.tsx

@@ -0,0 +1,26 @@
+import React, { Ref } from 'react';
+import { DropdownRenderProps } from '../../../types';
+import { Button } from '../../Button';
+import { Checkbox } from '../../Checkbox';
+import { Radio } from '../../Radio';
+import { Item } from '../../Item';
+import { Dropdown } from '..';
+
+const DropdownVariousItems = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Button as anchor
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger}>
+      <Item elementType="a" href="#" label="Plain text" />
+      <Item elementType="a" href="#" label="Item with icon" iconName="info" />
+      <Checkbox id="checkbox-item" label="Item with checkbox" isItem />
+      <Radio id="radio-item" label="Item with radio" isItem isChecked />
+    </Dropdown>
+  );
+};
+
+export default DropdownVariousItems;

packages/web-react/src/components/Dropdown/demo/index.tsx

@@ -8,6 +8,7 @@ import icons from '@lmc-eu/spirit-icons/dist/icons';
 import DocsSection from '../../../../docs/DocsSections';
 import { IconsProvider } from '../../../context';
 import DropdownPlacements from './DropdownPlacements';
+import DropdownVariousItems from './DropdownVariousItems';
 import DropdownDisabledAutoclose from './DropdownDisabledAutoclose';
 import DropdownLongerContent from './DropdownLongerContent';
 import DropdownFullwidthAll from './DropdownFullwidthAll';
@@ -20,6 +21,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Placements" stackAlignment="stretch">
         <DropdownPlacements />
       </DocsSection>
+      <DocsSection title="Various items" stackAlignment="stretch">
+        <DropdownVariousItems />
+      </DocsSection>
       <DocsSection title="Usage with disabled auto close">
         <DropdownDisabledAutoclose />
       </DocsSection>

packages/web-react/src/components/DropdownModern/demo/DropdownContentFactory.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '../../Icon';
+import { Item } from '../../Item';
 
 type Props = {
   content: Content[];
@@ -11,15 +11,10 @@ type Content = {
 };
 
 const DropdownContentFactory = ({ content }: Props) => {
-  const lastRow = content.length - 1;
-
   return (
     <>
-      {content.map(({ icon, text }, index) => (
-        <a href={`#${icon}`} className={`d-flex ${index !== lastRow && 'mb-400'}`} key={icon}>
-          <Icon name={icon} UNSAFE_className="mr-400" />
-          <span>{text}</span>
-        </a>
+      {content.map(({ icon, text }) => (
+        <Item key={icon} label={text} elementType="a" iconName={icon} href={`#${icon}`} />
       ))}
     </>
   );

packages/web-react/src/components/DropdownModern/demo/DropdownModernPlacements.tsx

@@ -5,6 +5,7 @@ import DropdownTrigger from '../../Dropdown/DropdownTrigger';
 import DropdownPopover from '../../Dropdown/DropdownPopover';
 import { Button } from '../../Button';
 import { Grid, GridItem } from '../../Grid';
+import { Item } from '../../Item';
 import { Radio } from '../../Radio';
 
 const DropdownModernPlacements = () => {
@@ -160,15 +161,9 @@ const DropdownModernPlacements = () => {
               <span style={{ whiteSpace: 'nowrap' }}>{placement}</span>
             </DropdownTrigger>
             <DropdownPopover>
-              <a href="#" className="d-flex mb-400">
-                Action
-              </a>
-              <a href="#" className="d-flex mb-400">
-                Another action
-              </a>
-              <a href="#" className="d-flex">
-                Something else here
-              </a>
+              <Item elementType="a" href="#" label="Action" />
+              <Item elementType="a" href="#" label="Another action" />
+              <Item elementType="a" href="#" label="Something else here" />
             </DropdownPopover>
           </DropdownModern>
         </GridItem>

packages/web-react/src/components/DropdownModern/demo/DropdownVariousItems.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import DropdownModern from '../../Dropdown/DropdownModern';
+import DropdownTrigger from '../../Dropdown/DropdownTrigger';
+import DropdownPopover from '../../Dropdown/DropdownPopover';
+import { Button } from '../../Button';
+import { Checkbox } from '../../Checkbox';
+import { Item } from '../../Item';
+import { Radio } from '../../Radio';
+
+const DropdownModernVariousItems = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const onToggle = () => setIsOpen(!isOpen);
+
+  return (
+    <DropdownModern id="DropdownModernVariousItems" isOpen={isOpen} onToggle={onToggle}>
+      <DropdownTrigger elementType={Button}>Button as anchor</DropdownTrigger>
+      <DropdownPopover>
+        <Item elementType="a" href="#" label="Plain text" />
+        <Item elementType="a" href="#" label="Item with icon" iconName="info" />
+        <Checkbox id="checkbox-item" label="Item with checkbox" isItem />
+        <Radio id="radio-item" label="Item with radio" isItem isChecked />
+      </DropdownPopover>
+    </DropdownModern>
+  );
+};
+
+export default DropdownModernVariousItems;

packages/web-react/src/components/DropdownModern/demo/index.tsx

@@ -8,6 +8,7 @@ import icons from '@lmc-eu/spirit-icons/dist/icons';
 import DocsSection from '../../../../docs/DocsSections';
 import { IconsProvider } from '../../../context';
 import DropdownModernPlacements from './DropdownModernPlacements';
+import DropdownModernVariousItems from './DropdownVariousItems';
 import DropdownModernDisabledAutoclose from './DropdownModernDisabledAutoclose';
 import DropdownModernLongerContent from './DropdownModernLongerContent';
 import DropdownModernFullwidthAll from './DropdownModernFullwidthAll';
@@ -20,6 +21,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Placements" stackAlignment="stretch">
         <DropdownModernPlacements />
       </DocsSection>
+      <DocsSection title="Various items">
+        <DropdownModernVariousItems />
+      </DocsSection>
       <DocsSection title="Usage with disabled auto close">
         <DropdownModernDisabledAutoclose />
       </DocsSection>

packages/web-react/src/components/Item/README.md

@@ -77,6 +77,22 @@ import { Checkbox } from '@lmc-eu/spirit-web-react';
 <Checkbox id="checkboxItem" name="example" label="Checkbox Label" isItem />;
 ```
 
+Usage in [Dropdown][dropdown] component:
+
+```jsx
+import { DropdownModern, DropdownTrigger, DropdownPopover, Item } from '@lmc-eu/spirit-web-react/components';
+
+const [isOpen, setIsOpen] = React.useState(false);
+const onToggle = () => setIsOpen(!isOpen);
+
+<DropdownModern id="DropdownExample" isOpen={isOpen} onToggle={onToggle}>
+  <DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
+  <DropdownPopover>
+    <Item elementType="a" href="#" label="Item label" />
+  </DropdownPopover>
+</DropdownModern>;
+```
+
 ## API
 
 | Name               | Type                      | Default  | Required | Description                     |
@@ -91,4 +107,5 @@ import { Checkbox } from '@lmc-eu/spirit-web-react';
 | `UNSAFE_style`     | `CSSProperties`           | —        | ✕        | Wrapper custom style            |
 
 [checkbox]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Checkbox/README.md
+[dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown
 [radio]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Radio/README.md

packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig

@@ -6,6 +6,10 @@
         {% include '@components/Dropdown/stories/DropdownPlacements.twig' %}
     </DocsSection>
 
+    <DocsSection title="Various items">
+        {% include '@components/Dropdown/stories/DropdownVariousItems.twig' %}
+    </DocsSection>
+
     <DocsSection title="Usage with disabled auto close">
         {% include '@components/Dropdown/stories/DropdownDisabledAutoclose.twig' %}
     </DocsSection>