docs: use mdx for all webcomponents, add description of component

packages/main/src/lib/NotificationOverflowAction.ts

@@ -1,3 +1,5 @@
 import { NotificationOverflowAction } from '../webComponents/NotificationOverflowAction';
+import type { NotificationOverflowActionPropTypes } from '../webComponents/NotificationOverflowAction';
 
 export { NotificationOverflowAction };
+export type { NotificationOverflowActionPropTypes };

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

@@ -0,0 +1,62 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';
+import { AvatarBackgroundColor } from '@ui5/webcomponents-react/lib/AvatarBackgroundColor';
+import '@ui5/webcomponents-icons/dist/icons/employee.js';
+import { Icon } from '@ui5/webcomponents-react/lib/Icon';
+import { AvatarFitType } from '@ui5/webcomponents-react/lib/AvatarFitType';
+import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
+import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
+import { CSSProperties, Ref } from 'react';
+
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
+import { DocsHeader } from '@shared/stories/DocsHeader';
+
+<Meta
+  title="UI5 Web Components / Avatar"
+  component={Avatar}
+  argTypes={{
+    ...createSelectArgTypes({
+      backgroundColor: AvatarBackgroundColor,
+      imageFitType: AvatarFitType,
+      shape: AvatarShape,
+      size: AvatarSize
+    }),
+    slot: { control: { disable: true } },
+    ref: { control: { disable: true } },
+    style: {
+      type: CSSProperties,
+      description:
+        'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
+    },
+    className: {
+      type: 'string',
+      description:
+        'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
+    },
+    tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
+  }}
+  args={{
+    backgroundColor: AvatarBackgroundColor.Accent6,
+    icon: 'employee',
+    imageFitType: AvatarFitType.Cover,
+    shape: AvatarShape.Circle,
+    size: AvatarSize.S,
+    style: {},
+    className: '',
+    tooltip: '',
+    slot: '',
+    ref: null
+  }}
+/>
+
+<DocsHeader />
+
+<Canvas>
+  <Story name="Default">
+    {(args) => {
+      return <Avatar {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="." />

packages/main/src/webComponents/Avatar/index.tsx

@@ -1,22 +1,22 @@
+import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
+import '@ui5/webcomponents/dist/Avatar';
+import { FC } from 'react';
 import { AvatarBackgroundColor } from '@ui5/webcomponents-react/lib/AvatarBackgroundColor';
 import { AvatarFitType } from '@ui5/webcomponents-react/lib/AvatarFitType';
 import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
 import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
-import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
-import '@ui5/webcomponents/dist/Avatar';
-import { FC } from 'react';
 
 export interface AvatarPropTypes extends WithWebComponentPropTypes {
   /**
-   * Defines the text alternative of the <code>ui5-avatar</code>. If not provided a default text alternative will be set, if present.
+   * Defines the text alternative of the <code>Avatar</code>. If not provided a default text alternative will be set, if present.
    */
   accessibleName?: string;
   /**
    * Defines the background color of the desired image. <br><br> Available options are: <ul> <li><code>Accent1</code></li> <li><code>Accent2</code></li> <li><code>Accent3</code></li> <li><code>Accent4</code></li> <li><code>Accent5</code></li> <li><code>Accent6</code></li> <li><code>Accent7</code></li> <li><code>Accent8</code></li> <li><code>Accent9</code></li> <li><code>Accent10</code></li> <li><code>Placeholder</code></li> <ul>
    */
   backgroundColor?: AvatarBackgroundColor;
   /**
-   * Defines the name of the UI5 Icon, that would be displayed. <br> <b>Note:</b> If <code>image</code> is set, the property would be ignored. <br> <b>Note:</b> You should import the desired icon first, then use its name as "icon". <br><br> import "@ui5/webcomponents-icons/dist/icons/{icon_name}.js" <br> <pre>&lt;ui5-avatar icon-src="employee"></pre><br/><br/>
+   * Defines the name of the UI5 Icon, that would be displayed. <br> <b>Note:</b> If <code>image</code> is set, the property would be ignored. <br> <b>Note:</b> You should import the desired icon first, then use its name as "icon". <br><br> import "@ui5/webcomponents-icons/dist/icons/{icon_name}.js" <br> <pre>&lt;Avatar icon-src="employee"></pre><br/><br/>
    *
    * See all the available icons in 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>.
    */
@@ -30,22 +30,26 @@ export interface AvatarPropTypes extends WithWebComponentPropTypes {
    */
   imageFitType?: AvatarFitType;
   /**
-   * Defines the displayed initials. <br> Up to two Latin letters can be displayed as initials in a <code>ui5-avatar</code>.
+   * Defines the displayed initials. <br> Up to two Latin letters can be displayed as initials in a <code>Avatar</code>.
    */
   initials?: string;
   /**
-   * Defines the shape of the <code>ui5-avatar</code>. <br><br> Available options are: <ul> <li><code>Circle</code></li> <li><code>Square</code></li> <ul>
+   * Defines the shape of the <code>Avatar</code>. <br><br> Available options are: <ul> <li><code>Circle</code></li> <li><code>Square</code></li> <ul>
    */
   shape?: AvatarShape;
   /**
-   * Defines predefined size of the <code>ui5-avatar</code>. <br><br> Available options are: <ul> <li><code>XS</code></li> <li><code>S</code></li> <li><code>M</code></li> <li><code>L</code></li> <li><code>XL</code></li> <ul>
+   * Defines predefined size of the <code>Avatar</code>. <br><br> Available options are: <ul> <li><code>XS</code></li> <li><code>S</code></li> <li><code>M</code></li> <li><code>L</code></li> <li><code>XL</code></li> <ul>
    */
   size?: AvatarSize;
 }
 
 /**
- * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Avatar" target="_blank">UI5 Web Components Playground</a>
- */
+     * An image-like control that has different display options for representing images and icons in different shapes and
+sizes, depending on the use case. The shape can be circular or square. There are several predefined sizes, as well as an
+option to set a custom size.
+
+     * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Avatar" target="_blank">UI5 Web Components Playground</a>
+     */
 const Avatar: FC<AvatarPropTypes> = withWebComponent<AvatarPropTypes>(
   'ui5-avatar',
   ['accessibleName', 'backgroundColor', 'icon', 'image', 'imageFitType', 'initials', 'shape', 'size'],

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

@@ -0,0 +1,63 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Badge } from '@ui5/webcomponents-react/lib/Badge';
+import '@ui5/webcomponents-icons/dist/icons/employee.js';
+import { Icon } from '@ui5/webcomponents-react/lib/Icon';
+import { CSSProperties, Ref } from 'react';
+
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
+import { DocsHeader } from '@shared/stories/DocsHeader';
+
+<Meta
+  title="UI5 Web Components / Badge"
+  component={Badge}
+  argTypes={{
+    ...createSelectArgTypes({}),
+    children: { control: 'text' },
+    icon: { control: { disable: true } },
+    slot: { control: { disable: true } },
+    ref: { control: { disable: true } },
+    style: {
+      type: CSSProperties,
+      description:
+        'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
+    },
+    className: {
+      type: 'string',
+      description:
+        'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
+    },
+    tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
+  }}
+  args={{
+    children: 'Badge Text',
+    icon: <Icon name="employee" />,
+    style: {},
+    className: '',
+    tooltip: '',
+    slot: '',
+    ref: null
+  }}
+/>
+
+<DocsHeader />
+
+<Canvas>
+  <Story name="Default">
+    {(args) => {
+      return <Badge {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="." />
+<div style={{fontFamily:'var(--sapFontFamily)', fontSize:'var(--sapFontSize)', color:'var(--sapTextColor)'}}>
+<h3>Usage Guidelines</h3>
+<ul>
+  <li>If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.</li>
+  <li>
+    When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be
+    fully displayed.
+  </li>
+  <li>Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.</li>
+</ul>
+</div>

packages/main/src/webComponents/Badge/index.tsx

@@ -1,25 +1,30 @@
 import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
 import '@ui5/webcomponents/dist/Badge';
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
+import { ReactNode } from 'react';
 
 export interface BadgePropTypes extends WithWebComponentPropTypes {
   /**
-   * Defines the color scheme of the <code>ui5-badge</code>. There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>. To use one you can set a number from <code>"1"</code> to <code>"10"</code>. The <code>colorScheme</code> <code>"1"</code> will be set by default. <br><br> <b>Note:</b> Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
+   * Defines the color scheme of the <code>Badge</code>. There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>. To use one you can set a number from <code>"1"</code> to <code>"10"</code>. The <code>colorScheme</code> <code>"1"</code> will be set by default. <br><br> <b>Note:</b> Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
    */
   colorScheme?: string;
   /**
-   * Defines the text of the <code>ui5-badge</code>. <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.
+   * Defines the text of the <code>Badge</code>. <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.
    */
   children?: ReactNode | ReactNode[];
   /**
-   * Defines the <code>ui5-icon</code> to be displayed in the <code>ui5-badge</code>.
+   * Defines the <code>Icon</code> to be displayed in the <code>Badge</code>.
    */
   icon?: ReactNode | ReactNode[];
 }
 
 /**
- * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Badge" target="_blank">UI5 Web Components Playground</a>
- */
+     * The <code>Badge</code> is a small non-interactive component which contains text information and color chosen from a list
+of predefined color schemes. It serves the purpose to attract the user attention to some piece of information (state,
+quantity, condition, etc.).
+
+     * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Badge" target="_blank">UI5 Web Components Playground</a>
+     */
 const Badge: FC<BadgePropTypes> = withWebComponent<BadgePropTypes>('ui5-badge', ['colorScheme'], [], ['icon'], []);
 
 Badge.displayName = 'Badge';

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

@@ -0,0 +1,59 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
+import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize';
+import { CSSProperties, Ref } from 'react';
+
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
+import { DocsHeader } from '@shared/stories/DocsHeader';
+
+<Meta
+  title="UI5 Web Components / BusyIndicator"
+  component={BusyIndicator}
+  argTypes={{
+    ...createSelectArgTypes({ size: BusyIndicatorSize }),
+    children: { control: { disable: true } },
+    slot: { control: { disable: true } },
+    ref: { control: { disable: true } },
+    style: {
+      type: CSSProperties,
+      description:
+        'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
+    },
+    className: {
+      type: 'string',
+      description:
+        'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
+    },
+    tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
+  }}
+  args={{
+    size: BusyIndicatorSize.Medium,
+    style: {},
+    className: '',
+    tooltip: '',
+    slot: '',
+    ref: null
+  }}
+/>
+
+<DocsHeader />
+
+<Canvas>
+  <Story name="Default">
+    {(args) => {
+      return <BusyIndicator {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="." />
+<div style={{fontFamily:'var(--sapFontFamily)', fontSize:'var(--sapFontSize)', color:'var(--sapTextColor)'}}>
+<h3>Usage</h3>
+For the <code>BusyIndicator</code> you can define the size of the indicator, as well as whether it is shown or hidden.
+In order to hide it, use the html attribute <code>hidden</code> or <code>display: none;</code> <br /><br />
+In order to show busy state for an HTML element, simply nest the HTML element in a <code>BusyIndicator</code> instance.
+<br />
+<b>Note:</b> Since <code>BusyIndicator</code> has <code>display: inline-block;</code> by default and no width of its
+own, whenever you need to wrap a block-level element, you should set <code>display: block</code> to the busy indicator
+as well.
+</div>