docs(List): enhance and migrate story to mdx

packages/main/src/webComponents/List/List.stories.mdx

@@ -0,0 +1,188 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { List } from '@ui5/webcomponents-react/lib/List';
+import { ProgressIndicator } from '@ui5/webcomponents-react/lib/ProgressIndicator';
+import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
+import { ListItemTypes } from '@ui5/webcomponents-react/lib/ListItemTypes';
+import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
+import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
+import { Text } from '@ui5/webcomponents-react/lib/Text';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { ListMode } from '@ui5/webcomponents-react/lib/ListMode';
+import { ListSeparators } from '@ui5/webcomponents-react/lib/ListSeparators';
+import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
+import { CustomListItem } from '@ui5/webcomponents-react/lib/CustomListItem';
+import { GroupHeaderListItem } from '@ui5/webcomponents-react/lib/GroupHeaderListItem';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
+import { DocsHeader } from '@shared/stories/DocsHeader';
+import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
+import '@ui5/webcomponents-icons/dist/icons/employee.js';
+
+<Meta
+  title="UI5 Web Components / List"
+  component={List}
+  subcomponents={{ StandardListItem, CustomListItem, GroupHeaderListItem }}
+  argTypes={{
+    ...createSelectArgTypes({ mode: ListMode, separators: ListSeparators }),
+    ...DocsCommonProps,
+    children: { control: { disable: true } },
+    header: { control: { disable: true } }
+  }}
+  args={{
+    headerText: 'List with StandardListItems',
+    mode: ListMode.None,
+    separators: ListSeparators.All,
+    style: {},
+    className: '',
+    tooltip: '',
+    slot: '',
+    ref: null
+  }}
+/>
+
+<DocsHeader />
+
+<Canvas>
+  <Story name="Default">
+    {(args) => {
+      return (
+        <List {...args}>
+          <StandardListItem info={'3'}>List Item 1</StandardListItem>
+          <StandardListItem info={'2'}>List Item 2</StandardListItem>
+          <StandardListItem info={'1'}>List Item 3</StandardListItem>
+        </List>
+      );
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+<br />
+
+# Stories
+
+<br />
+
+## StandardListItem
+
+The <code>StandardListItem</code> represents the simplest type of item for a <code>StandardListItemst</code>. This is a
+list item, providing the most common use cases such as <code>text</code>, <code>image</code> and <code>icon</code>
+
+<Canvas>
+  <Story
+    name="with StandardListItem"
+    args={{
+      ...createSelectArgTypes({ mode: ListMode, separators: ListSeparators }),
+      description: 'StandardListItem',
+      icon: 'employee',
+      iconEnd: false,
+      image: '',
+      info: 'info',
+      infoState: ValueState.None,
+      type: ListItemTypes.Active,
+      selected: false,
+      children: 'List Item'
+    }}
+    argTypes={{
+      ...createSelectArgTypes({ infoState: ValueState, type: ListItemTypes }),
+      description: { description: `Defines the description displayed right under the item text, if such is present.` },
+      icon: {
+        description: `Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous built-in icons. To find all the available icons, see the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.`
+      },
+      iconEnd: {
+        description: `Defines whether the <code>icon</code> should be displayed in the beginning of the list item or in the end. <br><br> <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>.`
+      },
+      image: {
+        description: `Defines the <code>image</code> source URI. <br><br> <b>Note:</b> The <code>image</code> would be displayed in the beginning of the list item.`
+      },
+      info: { description: `Defines the <code>info</code>, displayed in the end of the list item.` },
+      infoState: {
+        description: `Defines the state of the <code>info</code>. <br> Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.`
+      },
+      type: {
+        description: `Defines the visual indication and behavior of the list items. Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>. <br><br> <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover, while with type <code>Inactive</code> and <code>Detail</code> - will not.`
+      },
+      selected: { description: `Defines the selected state of the <code>ListItem</code>.` },
+      children: {
+        description: `Defines the text of the <code>StandardListItem</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.`
+      },
+      busy: { table: { disable: true } },
+      footerText: { table: { disable: true } },
+      headerText: { table: { disable: true } },
+      infiniteScroll: { table: { disable: true } },
+      inset: { table: { disable: true } },
+      mode: { table: { disable: true } },
+      noDataText: { table: { disable: true } },
+      separators: { table: { disable: true } },
+      header: { table: { disable: true } },
+      onItemClick: { table: { disable: true } },
+      onItemClose: { table: { disable: true } },
+      onItemDelete: { table: { disable: true } },
+      onItemToggle: { table: { disable: true } },
+      onLoadMore: { table: { disable: true } },
+      onSelectionChange: { table: { disable: true } }
+    }}
+  >
+    {(args) => {
+      return (
+        <List headerText="List with a customizable StandardListItem">
+          <StandardListItem {...args} />
+        </List>
+      );
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="with StandardListItem" />
+
+<br />
+
+## CustomListItem
+
+A component to be used as custom list item within the <code>List</code> the same way as the standard <code>StandardListItem</code>. The <code>CustomListItem</code> accepts arbitrary HTML content to allow full
+customization
+
+<Canvas>
+  <Story name="with CustomListItem">
+    {() => {
+      return (
+        <List headerText="List with a CustomListItem">
+          <CustomListItem>
+            <FlexBox justifyContent={FlexBoxJustifyContent.SpaceAround} style={{ width: '100%' }}>
+              <Text style={{ fontWeight: 'bold' }}>FULLY</Text>
+              <Text style={{ color: 'red' }}>CUSTOMIZABLE</Text>
+              <Text style={{ color: 'white', backgroundColor: ThemingParameters.sapButton_Emphasized_Background }}>
+                CHILDREN
+              </Text>
+            </FlexBox>
+          </CustomListItem>
+          <CustomListItem>
+            <ProgressIndicator value={50} />
+          </CustomListItem>
+        </List>
+      );
+    }}
+  </Story>
+</Canvas>
+
+<br />
+
+## GroupHeaderListItem
+
+The <code>GroupHeaderListItem</code> is a special list item, used only to separate other list items into logical groups
+
+<Canvas>
+  <Story name="with GroupHeaderListItem">
+    {() => {
+      return (
+        <List headerText="List with a GroupHeaderListItem">
+          <GroupHeaderListItem>GroupHeaderListItem 1</GroupHeaderListItem>
+          <StandardListItem>List Item</StandardListItem>
+          <StandardListItem>List Item</StandardListItem>
+          <GroupHeaderListItem>GroupHeaderListItem 2</GroupHeaderListItem>
+          <StandardListItem>List Item</StandardListItem>
+        </List>
+      );
+    }}
+  </Story>
+</Canvas>