Badge - component api docs update

packages/react-components/src/components/Alert/Alert.module.scss

@@ -52,6 +52,10 @@ $base-class: 'alert';
     width: 24px;
     height: 24px;
     overflow: hidden;
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 
   &--info {

packages/react-components/src/components/Alert/Alert.stories.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { ComponentMeta, Story } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 
 import { Alert as AlertComponent, AlertProps } from './Alert';
+import noop from '../../utils/noop';
+import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
 
 export default {
   title: 'Components/Alert',
@@ -12,10 +14,14 @@ export default {
     informations that require immediate action or attention.
     `,
   },
-  argTypes: { onClose: { defaultValue: null } },
+  argTypes: {
+    onClose: {
+      action: 'clicked',
+    },
+  },
 } as ComponentMeta<typeof AlertComponent>;
 
-const StoryTemplate: Story<AlertProps> = (args: AlertProps) => (
+export const Default = (args: AlertProps): JSX.Element => (
   <div>
     <AlertComponent {...args}>
       A description with a <b>maximum of 100 characters</b>. That usually means
@@ -24,30 +30,40 @@ const StoryTemplate: Story<AlertProps> = (args: AlertProps) => (
   </div>
 );
 
-export const Alert = StoryTemplate.bind({});
-Alert.args = {};
-
-export const InfoAlert = StoryTemplate.bind({});
-InfoAlert.args = {
-  kind: 'info',
-};
-
-export const WarningAlert = StoryTemplate.bind({});
-WarningAlert.args = {
-  kind: 'warning',
-};
-
-export const SuccessAlert = StoryTemplate.bind({});
-SuccessAlert.args = {
-  kind: 'success',
-};
-
-export const ErrorAlert = StoryTemplate.bind({});
-ErrorAlert.args = {
-  kind: 'error',
-};
+export const Kinds = (): JSX.Element => (
+  <div>
+    <StoryDescriptor title="Info">
+      <AlertComponent>
+        A description with a <b>maximum of 100 characters</b>. That usually
+        means only one or two sentences.
+      </AlertComponent>
+    </StoryDescriptor>
+    <StoryDescriptor title="Warning">
+      <AlertComponent kind="warning">
+        A description with a <b>maximum of 100 characters</b>. That usually
+        means only one or two sentences.
+      </AlertComponent>
+    </StoryDescriptor>
+    <StoryDescriptor title="Success">
+      <AlertComponent kind="success">
+        A description with a <b>maximum of 100 characters</b>. That usually
+        means only one or two sentences.
+      </AlertComponent>
+    </StoryDescriptor>
+    <StoryDescriptor title="Error">
+      <AlertComponent kind="error">
+        A description with a <b>maximum of 100 characters</b>. That usually
+        means only one or two sentences.
+      </AlertComponent>
+    </StoryDescriptor>
+  </div>
+);
 
-export const BannerWithClose = StoryTemplate.bind({});
-BannerWithClose.args = {
-  onClose: () => alert('onClose click'),
-};
+export const BannerWithClose = (): JSX.Element => (
+  <div>
+    <AlertComponent onClose={noop}>
+      A description with a <b>maximum of 100 characters</b>. That usually means
+      only one or two sentences.
+    </AlertComponent>
+  </div>
+);

packages/react-components/src/components/Alert/Alert.tsx

@@ -17,8 +17,17 @@ import styles from './Alert.module.scss';
 type AlertKind = 'info' | 'warning' | 'success' | 'error';
 
 export interface AlertProps {
+  /**
+   * The CSS class for container
+   */
   className?: string;
+  /**
+   * Specify the kind of Alert
+   */
   kind?: AlertKind;
+  /**
+   * The optional event handler for close button
+   */
   onClose?: () => void;
 }
 

packages/react-components/src/components/Avatar/Avatar.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentMeta, Story } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 
 import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
 
@@ -10,15 +10,12 @@ export default {
   component: Avatar,
 } as ComponentMeta<typeof Avatar>;
 
-export const Default: Story<AvatarProps> = (args: AvatarProps) => (
-  <Avatar {...args} />
-);
+export const Default = (args: AvatarProps): JSX.Element => <Avatar {...args} />;
 
 const defaultImage =
   'https://cdn-labs.livechat-files.com/api/file/lc/img/100019504/df59da4b5b0cdb6030efb08787fd255d.jpg';
 const defaultName = 'John Doe';
 
-Default.storyName = 'Avatar';
 Default.args = {
   type: 'text',
   text: defaultName,

packages/react-components/src/components/Avatar/Avatar.tsx

@@ -21,15 +21,45 @@ type AvatarStatus = 'available' | 'unavailable' | 'unknown';
 type AvatarType = 'image' | 'text';
 
 export interface AvatarProps {
+  /**
+   * Alternate text for an image avatar
+   */
   alt?: string;
+  /**
+   * The CSS class for container
+   */
   className?: string;
+  /**
+   * Specify the background color
+   */
   color?: string;
+  /**
+   * Specify the avatar shape
+   */
   shape?: AvatarShape;
+  /**
+   * Specify the avatar size
+   */
   size?: AvatarSize;
+  /**
+   * Image source for the image avatar
+   */
   src?: string;
+  /**
+   * Displays status dot
+   */
   status?: AvatarStatus;
+  /**
+   * Text for an text avatar
+   */
   text?: string;
+  /**
+   * Specify the avatar type
+   */
   type: AvatarType;
+  /**
+   * Displays rim
+   */
   withRim?: boolean;
 }
 

packages/react-components/src/components/Badge/Badge.tsx

@@ -7,10 +7,25 @@ import { formatCount } from './Badge.helpers';
 const baseClass = 'badge';
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Value to display
+   */
   count?: number;
+  /**
+   * Specify the badge kind
+   */
   kind?: 'primary' | 'secondary' | 'tertiary';
+  /**
+   * The maximum value after which a "+" will be displayed next to the number
+   */
   max?: number;
+  /**
+   * Specify the badge size
+   */
   size?: 'large' | 'medium' | 'compact';
+  /**
+   * Specify the badge type
+   */
   type?: 'counter' | 'alert' | 'dot';
 }