fix(badge): address bugs in badge component and code cleanup for stor…

…ybook (momentum-design#943)

* fix(badge): address bugs in badge component and code cleanup for storybook

* fix(badge): update badge snapshot

* fix(badge): clean code

---------

Co-authored-by: Jason Chai Jing <jachai@cisco.com>

packages/components/config/storybook/preview.js

@@ -39,6 +39,11 @@ const preview = {
         },
       },
     },
+    docs: {
+      source: {
+        excludeDecorators: true,
+      },
+    },
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: {
       disable: true,
@@ -130,7 +135,7 @@ const preview = {
         title: 'Theme',
         icon: 'globe',
         // Array of plain string values or MenuItem shape (see below)
-        items: themes.map((theme) => theme.displayName),
+        items: themes.map(theme => theme.displayName),
         // Change title based on selected value
         dynamicTitle: true,
       },

packages/components/config/storybook/provider/iconProvider.js

@@ -1,9 +1,4 @@
 import { html } from 'lit';
 import '../../../src/components/iconprovider';
 
-export const withIconProvider = (story) =>
-  html`<mdc-iconprovider
-        url="./icons/svg"
-      >
-        ${story()}
-      </mdc-iconprovider>`;
+export const withIconProvider = story => html` <mdc-iconprovider url="./icons/svg"> ${story()} </mdc-iconprovider>`;

packages/components/config/storybook/provider/themeProvider.js

@@ -3,7 +3,7 @@ import { themes } from '../themes';
 import '../../../src/components/themeprovider';
 import '../themes/themes.css';
 
-const clearStyles = (element) => {
+const clearStyles = element => {
   // eslint-disable-next-line no-restricted-syntax
   for (const theme of themes) {
     element.classList.remove(theme.className);
@@ -14,7 +14,7 @@ const applyStyle = (element, className) => {
   element.classList.add(className);
 };
 
-const setCanvasBackgroundOnDocs = (backgroundColor) => {
+const setCanvasBackgroundOnDocs = backgroundColor => {
   const docsBody = document.querySelectorAll('div.docs-story');
   // eslint-disable-next-line no-restricted-syntax
   for (const body of docsBody) {
@@ -24,7 +24,7 @@ const setCanvasBackgroundOnDocs = (backgroundColor) => {
 
 export const withThemeProvider = (story, context) => {
   const currentTheme = context.globals.theme;
-  const themeObject = themes.find((theme) => theme.displayName === currentTheme);
+  const themeObject = themes.find(theme => theme.displayName === currentTheme);
 
   // this body override is necessary cause the themeprovider is not available on the body
   const body = document.querySelector('body.sb-show-main');
@@ -35,10 +35,7 @@ export const withThemeProvider = (story, context) => {
   // This will set the all canvas in "Docs" with the current theme background color
   setCanvasBackgroundOnDocs(themeObject.backgroundColor);
 
-  return html`<mdc-themeprovider
-    id="theme-provider"
-    themeclass="${themeObject.themeclass}"
-  >
+  return html` <mdc-themeprovider id="theme-provider" themeclass="${themeObject.themeclass}">
     ${story()}
   </mdc-themeprovider>`;
 };

packages/components/src/components/badge/badge.component.ts

@@ -15,7 +15,7 @@ import styles from './badge.styles';
  * - `dot`: Displays a dot notification badge with a blue color.
  * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
  * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
- * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.
  * - `success`: Displays a success badge with a check circle icon and green color.
  * - `warning`: Displays a warning badge with a warning icon and yellow color.
  * - `error`: Displays a error badge with a error legacy icon and red color.
@@ -59,7 +59,7 @@ class Badge extends Component {
   counter?: number;
 
   /**
-   * The maximum number can be set up to 999, anything about that will be rendered as _999+_.
+   * The maximum number can be set up to 999, anything above that will be rendered as _999+_.
    * The max counter can be `9`, `99` or `999`.
    */
   @property({ type: Number, attribute: 'max-counter', reflect: true })
@@ -115,7 +115,6 @@ class Badge extends Component {
       <mdc-icon
         class="mdc-badge-icon ${classMap(this.getIconClasses(overlay, iconVariant, type))}"
         name="${ifDefined(iconName)}"
-        length-unit="${DEFAULTS.LENGTH_UNIT}"
         size="${DEFAULTS.ICON_SIZE}"
       ></mdc-icon>
     `;

packages/components/src/components/badge/badge.constants.ts

@@ -12,9 +12,9 @@ const BADGE_TYPE = {
 };
 
 const ICON_NAMES_LIST = {
-  SUCCESS_ICON_NAME: 'check-circle-filled',
-  WARNING_ICON_NAME: 'warning-filled',
-  ERROR_ICON_NAME: 'error-legacy-filled',
+  SUCCESS_ICON_NAME: 'check-circle-badge-filled',
+  WARNING_ICON_NAME: 'warning-badge-filled',
+  ERROR_ICON_NAME: 'error-legacy-badge-filled',
 };
 
 const ICON_VARIANT = {
@@ -30,7 +30,6 @@ const ICON_STATE = {
 
 const DEFAULTS = {
   TYPE: BADGE_TYPE.DOT,
-  LENGTH_UNIT: 'rem',
   MAX_COUNTER: 99,
   MAX_COUNTER_LIMIT: 999,
   VARIANT: ICON_VARIANT.PRIMARY,

packages/components/src/components/badge/badge.stories.ts

@@ -7,6 +7,18 @@ import { classArgType, styleArgType } from '../../../config/storybook/commonArgT
 const MAX_COUNTER_LIST = [9, 99, 999];
 
 const render = (args: Args) => html`
+<mdc-badge
+  type="${args.type}"
+  icon-name="${args['icon-name']}"
+  counter="${args.counter}"
+  max-counter="${args['max-counter']}"
+  variant="${args.variant}"
+  ?overlay=${args.overlay}
+  aria-label="${args['aria-label']}"
+></mdc-badge>
+`;
+const renderOverlay = (args: Args) => html`
+<div style="background-color: var(--mds-color-theme-inverted-background-normal); padding: 5px;">
   <mdc-badge
     type="${args.type}"
     icon-name="${args['icon-name']}"
@@ -16,6 +28,7 @@ const render = (args: Args) => html`
     ?overlay=${args.overlay}
     aria-label="${args['aria-label']}"
   ></mdc-badge>
+</div>
 `;
 
 const meta: Meta = {
@@ -82,7 +95,7 @@ export default meta;
 export const Dot: StoryObj = {
   args: {
     type: DEFAULTS.TYPE,
-    'icon-name': 'error-legacy-filled',
+    'icon-name': 'placeholder-bold',
     variant: DEFAULTS.VARIANT,
     counter: 1,
     'max-counter': MAX_COUNTER_LIST[1],
@@ -93,7 +106,7 @@ export const Dot: StoryObj = {
 export const Icon: StoryObj = {
   args: {
     type: BADGE_TYPE.ICON,
-    'icon-name': 'accessibility-regular',
+    'icon-name': 'placeholder-bold',
     variant: ICON_VARIANT.PRIMARY,
     overlay: false,
   },
@@ -128,3 +141,13 @@ export const Error: StoryObj = {
     overlay: false,
   },
 };
+
+export const Overlay: StoryObj = {
+  render: renderOverlay,
+  args: {
+    type: BADGE_TYPE.COUNTER,
+    counter: 1000,
+    'max-counter': MAX_COUNTER_LIST[2],
+    overlay: true,
+  },
+};

packages/components/src/components/iconprovider/iconprovider.stories.ts

@@ -6,13 +6,13 @@ import { ALLOWED_LENGTH_UNITS, ALLOWED_FILE_EXTENSIONS } from './iconprovider.co
 import { disableControls } from '../../../config/storybook/utils';
 
 const render = (args: Args) => html`
-  <mdc-iconprovider 
-    url=${args.url}
-    file-extension=${args['file-extension']}
-    length-unit=${args['length-unit']}
-    size=${args.size}>
-    <mdc-subcomponent-icon></mdc-subcomponent-icon>
-  </mdc-iconprovider>
+<mdc-iconprovider 
+  url=${args.url}
+  file-extension=${args['file-extension']}
+  length-unit=${args['length-unit']}
+  size=${args.size}>
+  <mdc-subcomponent-icon></mdc-subcomponent-icon>
+</mdc-iconprovider>
 `;
 
 const meta: Meta = {

packages/components/src/components/themeprovider/themeprovider.stories.ts

@@ -10,29 +10,33 @@ import { disableControls } from '../../../config/storybook/utils';
 const THEMES = ['mds-theme-stable-darkWebex', 'mds-theme-stable-lightWebex'];
 
 const render = (args: Args) => html`
-  <mdc-themeprovider class="${classMap({ [args.class]: true })}" style="${args.style}" themeclass="${args.themeclass}">
-    <div class="${classMap({ themeWrapper: true })}">
-      <mdc-subcomponent></mdc-subcomponent>
-      <p>Color examples:</p>
-      <div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-primary-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-error-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-warning-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-success-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-accent-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-team-cobalt-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-team-cyan-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-team-mint-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-team-lime-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-team-gold-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-team-orange-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-team-pink-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-team-purple-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-team-violet-normal);"></div>
-        <div class="colorBox" style="background: var(--mds-color-theme-text-team-slate-normal);"></div>
-      </div>
+<mdc-themeprovider 
+  class="${classMap({ [args.class]: true })}" 
+  style="${args.style}" 
+  themeclass="${args.themeclass}"
+>
+  <div class="${classMap({ themeWrapper: true })}">
+    <mdc-subcomponent></mdc-subcomponent>
+    <p>Color examples:</p>
+    <div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-primary-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-error-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-warning-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-success-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-accent-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-team-cobalt-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-team-cyan-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-team-mint-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-team-lime-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-team-gold-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-team-orange-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-team-pink-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-team-purple-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-team-violet-normal);"></div>
+      <div class="colorBox" style="background: var(--mds-color-theme-text-team-slate-normal);"></div>
     </div>
-  </mdc-themeprovider>
+  </div>
+</mdc-themeprovider>
 `;
 
 const meta: Meta = {