Merge branch 'master' into docs/filter-bar

Author: Lukas742

packages/main/src/components/ObjectStatus/ObjectStatus.stories.mdx

@@ -0,0 +1,98 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { ObjectStatus } from '@ui5/webcomponents-react/lib/ObjectStatus';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
+import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
+import { Icon } from '@ui5/webcomponents-react/lib/Icon';
+import { DocsHeader } from '@shared/stories/DocsHeader';
+import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
+
+<Meta
+  title="Components / ObjectStatus"
+  component={ObjectStatus}
+  argTypes={{
+    ...createSelectArgTypes({ state: ValueState }),
+    children: { control: 'text' },
+    ...DocsCommonProps
+  }}
+  args={{
+    state: ValueState.None,
+    children: 'ObjectStatus',
+    showDefaultIcon: true,
+    style: {},
+    className: '',
+    tooltip: '',
+    slot: '',
+    ref: null
+  }}
+/>
+
+<DocsHeader />
+
+<Canvas>
+  <Story name="Default">
+    {(args) => {
+      return <ObjectStatus {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+<br />
+
+# Stories
+
+<br />
+
+## ObjectStatus with default icons
+
+<Canvas>
+  <Story name="None" args={{ state: ValueState.None, children: `Value State: ${ValueState.None}` }}>
+    {(args) => {
+      return <ObjectStatus {...args} />;
+    }}
+  </Story>
+  <Story
+    name="Information"
+    args={{ state: ValueState.Information, children: `Value State: ${ValueState.Information}` }}
+  >
+    {(args) => {
+      return <ObjectStatus {...args} />;
+    }}
+  </Story>
+  <Story name="Success" args={{ state: ValueState.Success, children: `Value State: ${ValueState.Success}` }}>
+    {(args) => {
+      return <ObjectStatus {...args} />;
+    }}
+  </Story>
+  <Story name="Warning" args={{ state: ValueState.Warning, children: `Value State: ${ValueState.Warning}` }}>
+    {(args) => {
+      return <ObjectStatus {...args} />;
+    }}
+  </Story>
+  <Story name="Error" args={{ state: ValueState.Error, children: `Value State: ${ValueState.Error}` }}>
+    {(args) => {
+      return <ObjectStatus {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+## ObjectStatus with custom Icon
+
+<Canvas>
+  <Story name="with custom Icon" args={{ icon: <Icon name="sys-cancel" /> }}>
+    {(args) => {
+      return <ObjectStatus {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+## ObjectStatus with Icon only
+
+<Canvas>
+  <Story name="with Icon only" args={{ icon: <Icon name="sys-cancel" />, children: null }}>
+    {(args) => {
+      return <ObjectStatus {...args} />;
+    }}
+  </Story>
+</Canvas>

packages/main/src/components/ObjectStatus/demo.stories.tsx

@@ -13,9 +13,24 @@ import { CommonProps } from '../../interfaces/CommonProps';
 import styles from './ObjectStatus.jss';
 
 export interface ObjectStatusPropTypes extends CommonProps {
+  /**
+   * Defines the text of the `ObjectStatus`.<br />
+   * __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+   */
   children?: string | number | ReactNode;
+  /**
+   * Defines the icon in front of the `ObjectStatus` text.<br />
+   * __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use `Icon` in order to preserve the intended design.
+   */
   icon?: ReactNode;
+  /**
+   * Defines the value state of the <code>ObjectStatus</code>. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>
+   */
   state?: ValueState;
+  /**
+   * Defines whether the default icon for each `ValueState` should be displayed.<br />
+   * __Note:__ If the `icon` prop was set, `showDefaultIcon` has no effect.
+   */
   showDefaultIcon?: boolean;
 }
 
@@ -39,7 +54,9 @@ const getDefaultIcon = (state) => {
 };
 
 const useStyles = createComponentStyles(styles, { name: 'ObjectStatus' });
-
+/**
+ * Status information that can be either text with a value state, or an icon.
+ */
 const ObjectStatus: FC<ObjectStatusPropTypes> = forwardRef((props: ObjectStatusPropTypes, ref: Ref<HTMLDivElement>) => {
   const { state, showDefaultIcon, children, icon, className, style, tooltip, slot } = props;
   const iconToRender = useMemo(() => {