@innovaccer/design-system 2.13.4-5 → 2.13.4-7

package/core/common.type.tsx

@@ -20,3 +20,73 @@ export type FooterOptions = {
 export type AutoComplete = 'on' | 'off';
 export type NumberRange = [number, number];
 export type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
+
+export type TextColor =
+  | 'white'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'alert'
+  | 'warning'
+  | 'accent1'
+  | 'accent2'
+  | 'accent3'
+  | 'accent4'
+  | 'inverse'
+  | 'primary-dark'
+  | 'secondary-dark'
+  | 'success-dark'
+  | 'alert-dark'
+  | 'warning-dark'
+  | 'accent1-dark'
+  | 'accent2-dark'
+  | 'accent3-dark'
+  | 'accent4-dark'
+  | 'primary-darker'
+  | 'success-darker'
+  | 'alert-darker'
+  | 'warning-darker'
+  | 'accent1-darker'
+  | 'accent2-darker'
+  | 'accent3-darker'
+  | 'accent4-darker'
+  | 'primary-light'
+  | 'secondary-light'
+  | 'success-light'
+  | 'alert-light'
+  | 'warning-light'
+  | 'accent1-light'
+  | 'accent2-light'
+  | 'accent3-light'
+  | 'accent4-light'
+  | 'inverse-light'
+  | 'primary-lighter'
+  | 'secondary-lighter'
+  | 'success-lighter'
+  | 'alert-lighter'
+  | 'warning-lighter'
+  | 'accent1-lighter'
+  | 'accent2-lighter'
+  | 'accent3-lighter'
+  | 'accent4-lighter'
+  | 'inverse-lighter'
+  | 'primary-lightest'
+  | 'secondary-lightest'
+  | 'success-lightest'
+  | 'alert-lightest'
+  | 'warning-lightest'
+  | 'accent1-lightest'
+  | 'accent2-lightest'
+  | 'accent3-lightest'
+  | 'accent4-lightest'
+  | 'inverse-lightest'
+  | 'primary-shadow'
+  | 'secondary-shadow'
+  | 'success-shadow'
+  | 'alert-shadow'
+  | 'warning-shadow'
+  | 'accent1-shadow'
+  | 'accent2-shadow'
+  | 'accent3-shadow'
+  | 'accent4-shadow'
+  | 'inverse-shadow';

package/core/components/atoms/button/Button.tsx

@@ -165,7 +165,7 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
                     ? 'disabled'
                     : appearance === 'basic' || appearance === 'transparent'
                     ? selected
-                      ? 'info'
+                      ? 'primary_dark'
                       : 'default'
                     : 'white'
                 }

package/core/components/atoms/button/__stories__/IconButtonGroup.story.jsx

@@ -3,8 +3,12 @@ import Button from '@/components/atoms/button';
 
 export const iconButtonGroup = () => (
   <div className="d-inline-flex">
-    <Button size="tiny" icon="content_copy" aria-label="Copy" className="mr-4" tooltip="Copy" />
-    <Button size="tiny" icon="content_paste" aria-label="Paste" className="mr-4" tooltip="Paste" />
+    <div className="mr-4">
+      <Button size="tiny" icon="content_copy" aria-label="Copy" tooltip="Copy" />
+    </div>
+    <div className="mr-4">
+      <Button size="tiny" icon="content_paste" aria-label="Paste" tooltip="Paste" />
+    </div>
     <Button size="tiny" icon="delete" aria-label="Delete" tooltip="Delete" />
   </div>
 );

package/core/components/atoms/dropdown/DropdownList.tsx

@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import Loading from './Loading';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { ChangeEvent } from '@/common.type';
-import uidGenerator from '@/utils/uidGenerator';
 
 export type DropdownAlign = 'left' | 'right';
 export type OptionType = 'DEFAULT' | 'WITH_ICON' | 'WITH_META' | 'ICON_WITH_META';
@@ -465,7 +464,7 @@ const DropdownList = (props: OptionsProps) => {
     const { selectAllLabel = 'Select All', selectAll, onSelectAll } = props;
 
     const label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
-    const [id] = React.useState(() => uidGenerator());
+    const id = `Checkbox-option-${label.toLowerCase().replace(/\s+/g, '')}-${new Date().getTime()}`;
 
     return (
       <div className={SelectAllClass} onMouseEnter={() => updateActiveOption(0, true)}>
@@ -494,7 +493,7 @@ const DropdownList = (props: OptionsProps) => {
 
     const active = selectAllPresent ? index + 1 === cursor : index === cursor;
     const optionIsSelected = tempSelected.findIndex((option) => option.value === item.value) !== -1;
-    const id = `Checkbox-option-${index}-${item.value}`;
+    const id = `Checkbox-option-${index}-${item.value}-${new Date().getTime()}`;
 
     return (
       <label htmlFor={id}>

package/core/components/atoms/link/Link.tsx

@@ -60,9 +60,9 @@ export const Link = (props: LinkProps) => {
   const classes = classNames(
     {
       Link: true,
-      ['Link--disabled']: disabled,
       [`Link--${size}`]: size,
       [`Link--${appearance}`]: appearance,
+      [`Link--${appearance}-disabled`]: disabled,
     },
     className
   );

package/core/components/atoms/link/__tests__/Link.test.tsx

@@ -73,10 +73,32 @@ describe('Link component', () => {
     });
   });
 
-  describe('Link component with prop:disabled', () => {
+  describe('Link component with prop:disabled and with no appearance', () => {
     it('link should be disabled', () => {
       const { getByTestId } = render(<Link disabled={true}>Click on Link</Link>);
-      expect(getByTestId('DesignSystem-Link')).toHaveClass('Link--disabled');
+      expect(getByTestId('DesignSystem-Link')).toHaveClass('Link--default-disabled');
+    });
+  });
+
+  describe('Link component with prop:disabled and with default appearance', () => {
+    it('link should be disabled', () => {
+      const { getByTestId } = render(
+        <Link disabled={true} appearance="default">
+          Click on Link
+        </Link>
+      );
+      expect(getByTestId('DesignSystem-Link')).toHaveClass('Link--default-disabled');
+    });
+  });
+
+  describe('Link component with prop:disabled and with subtle appearance', () => {
+    it('link should be disabled', () => {
+      const { getByTestId } = render(
+        <Link disabled={true} appearance="subtle">
+          Click on Link
+        </Link>
+      );
+      expect(getByTestId('DesignSystem-Link')).toHaveClass('Link--subtle-disabled');
     });
   });
 });

package/core/components/atoms/metricInput/MetricInput.tsx

@@ -171,6 +171,8 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
   const actionButton = classNames({
     ['p-0']: true,
     [`MetricInput-arrowIcon--${size}`]: size,
+    ['ml-4']: size === 'regular',
+    ['ml-6']: size === 'large',
   });
 
   const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -277,7 +279,7 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
         </Text>
       )}
 
-      <div>
+      <div className="MetricInput-arrowIcons">
         <Button
           icon="keyboard_arrow_up"
           size={actionButtonSize}

package/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx

@@ -65,8 +65,8 @@ describe('MetricInput component', () => {
   it('renders input and arrow icons', () => {
     const { getByTestId } = render(<MetricInput />);
     expect(getByTestId('DesignSystem-MetricInput').tagName).toMatch('INPUT');
-    expect(getByTestId('DesignSystem-MetricInput--upIcon')).toBeInTheDocument();
-    expect(getByTestId('DesignSystem-MetricInput--downIcon')).toBeInTheDocument();
+    expect(getByTestId('DesignSystem-MetricInput--upIcon').tagName).toMatch('BUTTON');
+    expect(getByTestId('DesignSystem-MetricInput--downIcon').tagName).toMatch('BUTTON');
   });
 });
 

package/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap

@@ -24,9 +24,11 @@ exports[`MetricInput component
         type="number"
         value="10"
       />
-      <div>
+      <div
+        class="MetricInput-arrowIcons"
+      >
         <button
-          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular mb-2"
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular ml-4 mb-2"
           data-test="DesignSystem-MetricInput--upIcon"
           tabindex="0"
         >
@@ -44,7 +46,7 @@ exports[`MetricInput component
           </div>
         </button>
         <button
-          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular"
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular ml-4"
           data-test="DesignSystem-MetricInput--downIcon"
           tabindex="0"
         >
@@ -91,9 +93,11 @@ exports[`MetricInput component
         type="number"
         value="10"
       />
-      <div>
+      <div
+        class="MetricInput-arrowIcons"
+      >
         <button
-          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular mb-2"
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular ml-4 mb-2"
           data-test="DesignSystem-MetricInput--upIcon"
           tabindex="0"
         >
@@ -111,7 +115,7 @@ exports[`MetricInput component
           </div>
         </button>
         <button
-          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular"
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular ml-4"
           data-test="DesignSystem-MetricInput--downIcon"
           tabindex="0"
         >
@@ -163,9 +167,11 @@ exports[`MetricInput component
       >
         kg
       </span>
-      <div>
+      <div
+        class="MetricInput-arrowIcons"
+      >
         <button
-          class="Button Button--regular Button--regularSquare Button--basic p-0 MetricInput-arrowIcon--large mb-2"
+          class="Button Button--regular Button--regularSquare Button--basic p-0 MetricInput-arrowIcon--large ml-6 mb-2"
           data-test="DesignSystem-MetricInput--upIcon"
           tabindex="0"
         >
@@ -183,7 +189,7 @@ exports[`MetricInput component
           </div>
         </button>
         <button
-          class="Button Button--regular Button--regularSquare Button--basic p-0 MetricInput-arrowIcon--large"
+          class="Button Button--regular Button--regularSquare Button--basic p-0 MetricInput-arrowIcon--large ml-6"
           data-test="DesignSystem-MetricInput--downIcon"
           tabindex="0"
         >
@@ -235,9 +241,11 @@ exports[`MetricInput component
       >
         kg
       </span>
-      <div>
+      <div
+        class="MetricInput-arrowIcons"
+      >
         <button
-          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular mb-2"
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular ml-4 mb-2"
           data-test="DesignSystem-MetricInput--upIcon"
           tabindex="0"
         >
@@ -255,7 +263,7 @@ exports[`MetricInput component
           </div>
         </button>
         <button
-          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular"
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular ml-4"
           data-test="DesignSystem-MetricInput--downIcon"
           tabindex="0"
         >

package/core/components/atoms/progressBar/__stories__/WithAnimation.story.jsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import ProgressBar from '../ProgressBar';
+
+const customCode = `() => {
+  const [progress, setProgress] = React.useState(0);
+  
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress(progress + 25);
+    }, 1000);
+  });
+
+  return <ProgressBar value={progress} max={100} />;
+}`;
+
+export const withAnimation = () => <></>;
+
+export default {
+  title: 'Components/ProgressBar/With Animation',
+  component: ProgressBar,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'ProgressBar',
+      },
+    },
+  },
+};

package/core/components/atoms/progressRing/__stories__/WithAnimation.story.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import ProgressBar from '../ProgressRing';
+
+const customCode = `() => {
+  const [progress, setProgress] = React.useState(0);
+  
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress(progress + 25);
+    }, 1000);
+  });
+
+  return <ProgressRing value={progress} max={100} />;
+}`;
+
+export const withAnimation = () => <></>;
+
+export default {
+  title: 'Components/ProgressRing/With Animation',
+  component: ProgressBar,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'ProgressRing',
+      },
+    },
+  },
+};

package/core/components/atoms/text/Text.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import GenericText from '../_text';
 import classNames from 'classnames';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
+import { TextColor } from '@/common.type';
 
 export type TextSize = 'small' | 'regular' | 'large';
 export type TextAppearance = 'default' | 'white' | 'destructive' | 'subtle' | 'disabled' | 'success' | 'link';
@@ -20,24 +21,29 @@ export interface TextProps extends BaseProps, BaseHtmlProps<HTMLSpanElement> {
    */
   small?: boolean;
   /**
-   * Color of `Text`
+   * State of `Text`
    */
   appearance: TextAppearance;
   /**
    * Size of `Text`
    */
   size: TextSize;
+  /**
+   * Color of `Text`
+   */
+  color?: TextColor;
 }
 
 export const Text = (props: TextProps) => {
-  const { appearance, size, children, weight, small, className, ...rest } = props;
+  const { appearance, size, children, weight, small, className, color, ...rest } = props;
 
   const classes = classNames(
     {
       Text: true,
-      [`Text--${appearance}`]: appearance,
+      [`Text--${appearance}`]: !color && appearance,
       [`Text--${weight}`]: weight,
       [`Text--${size}`]: size,
+      [`color-${color}`]: color,
       /* SOON_TO_BE_DEPRECATED */
       ['Text--small']: size === 'small' || small,
     },

package/core/components/atoms/text/__stories__/variants/Color.story.jsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import Text from '../../index';
+import { Row, Column } from '@/index';
+
+// CSF format story
+export const color = () => {
+  const colorList = [
+    [
+      'primary',
+      'primary-dark',
+      'primary-darker',
+      'primary-light',
+      'primary-lighter',
+      'primary-lightest',
+      'primary-shadow',
+    ],
+    [
+      'success',
+      'success-dark',
+      'success-darker',
+      'success-light',
+      'success-lighter',
+      'success-lightest',
+      'success-shadow',
+    ],
+    ['alert', 'alert-dark', 'alert-darker', 'alert-light', 'alert-lighter', 'alert-lightest', 'alert-shadow'],
+    [
+      'warning',
+      'warning-dark',
+      'warning-darker',
+      'warning-light',
+      'warning-lighter',
+      'warning-lightest',
+      'warning-shadow',
+    ],
+    [
+      'accent1',
+      'accent1-dark',
+      'accent1-darker',
+      'accent1-light',
+      'accent1-lighter',
+      'accent1-lightest',
+      'accent1-shadow',
+    ],
+    [
+      'accent2',
+      'accent2-dark',
+      'accent2-darker',
+      'accent2-light',
+      'accent2-lighter',
+      'accent2-lightest',
+      'accent2-shadow',
+    ],
+    [
+      'accent3',
+      'accent3-dark',
+      'accent3-darker',
+      'accent3-light',
+      'accent3-lighter',
+      'accent3-lightest',
+      'accent3-shadow',
+    ],
+    [
+      'accent4',
+      'accent4-dark',
+      'accent4-darker',
+      'accent4-light',
+      'accent4-lighter',
+      'accent4-lightest',
+      'accent4-shadow',
+    ],
+    ['secondary', 'secondary-dark', 'secondary-light', 'secondary-lighter', 'secondary-lightest', 'secondary-shadow'],
+
+    ['white', 'inverse', 'inverse-light', 'inverse-lighter', 'inverse-lightest', 'inverse-shadow'],
+  ];
+
+  return (
+    <Row>
+      {colorList.map((colors, key) => {
+        return (
+          <Row key={key} className="py-4">
+            {colors.map((color, ind) => {
+              return (
+                <Column key={ind}>
+                  <Text size="large" color={color} className={color === 'white' ? 'bg-dark' : ''}>
+                    {color}
+                  </Text>
+                </Column>
+              );
+            })}
+          </Row>
+        );
+      })}
+    </Row>
+  );
+};
+
+export default {
+  title: 'Components/Text/Variants/Color',
+  component: Text,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Text',
+      },
+    },
+  },
+};

package/core/components/atoms/text/__tests__/Text.test.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import Text, { TextProps as Props, TextAppearance, Size } from '../Text';
+import Text, { TextProps as Props, TextAppearance, TextSize } from '../Text';
 import { render } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
-const sizes: Size[] = ['small', 'regular', 'large'];
+const sizes: TextSize[] = ['small', 'regular', 'large'];
 const appearances: TextAppearance[] = ['default', 'white', 'destructive', 'disabled', 'subtle', 'success', 'link'];
 const weight = ['strong', 'medium'];
 const BooleanValue = [true, false];
@@ -132,3 +132,19 @@ describe('Text component', () => {
     });
   });
 });
+
+describe('Text Component with Prop:color', () => {
+  it('should have the text color as accent1 when prop color="accent1"', () => {
+    const { getByTestId } = render(<Text color="accent1">{'Design System'}</Text>);
+    expect(getByTestId('DesignSystem-Text')).toHaveClass('color-accent1');
+  });
+
+  it('should given preference to color over appearance prop', () => {
+    const { getByTestId } = render(
+      <Text color="accent1-lightest" appearance="destructive">
+        {'Design System'}
+      </Text>
+    );
+    expect(getByTestId('DesignSystem-Text')).toHaveClass('color-accent1-lightest');
+  });
+});

package/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap

@@ -155,9 +155,11 @@ exports[`Pagination component
           type="number"
           value="10"
         />
-        <div>
+        <div
+          class="MetricInput-arrowIcons"
+        >
           <button
-            class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular mb-2"
+            class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular ml-4 mb-2"
             data-test="DesignSystem-MetricInput--upIcon"
             tabindex="0"
           >
@@ -175,7 +177,7 @@ exports[`Pagination component
             </div>
           </button>
           <button
-            class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular"
+            class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular ml-4"
             data-test="DesignSystem-MetricInput--downIcon"
             tabindex="0"
           >

package/core/components/organisms/calendar/Calendar.tsx

@@ -198,7 +198,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
   componentDidUpdate(prevProps: CalendarProps, prevState: CalendarState) {
     const { monthsInView } = this.props;
 
-    if (prevProps.date !== this.props.date) {
+    if (prevProps.date?.getTime() !== this.props.date?.getTime()) {
       const { year, month, date } = getDateInfo(this.props.date);
       this.updateState(year, month, date);
       const d = convertToDate(this.props.date);
@@ -207,14 +207,14 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
       });
     }
 
-    if (prevProps.startDate !== this.props.startDate) {
+    if (prevProps.startDate?.getTime() !== this.props.startDate?.getTime()) {
       const d = convertToDate(this.props.startDate);
       this.setState({
         startDate: d,
       });
     }
 
-    if (prevProps.endDate !== this.props.endDate) {
+    if (prevProps.endDate?.getTime() !== this.props.endDate?.getTime()) {
       const d = convertToDate(this.props.endDate);
       this.setState({
         endDate: d,
@@ -248,7 +248,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
       }
     }
 
-    if (prevState.currDate !== this.state.currDate) {
+    if (prevState.currDate?.getTime() !== this.state.currDate?.getTime()) {
       const { rangePicker, onDateChange } = this.props;
 
       const { currDate, startDate, endDate } = this.state;
@@ -288,7 +288,10 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
       }
     }
 
-    if (prevState.startDate !== this.state.startDate || prevState.endDate !== this.state.endDate) {
+    if (
+      prevState.startDate?.getTime() !== this.state.startDate?.getTime() ||
+      prevState.endDate?.getTime() !== this.state.endDate?.getTime()
+    ) {
       const { onRangeChange } = this.props;
 
       const { startDate, endDate } = this.state;

package/core/components/organisms/horizontalNav/HorizontalNav.tsx

@@ -3,7 +3,13 @@ import classNames from 'classnames';
 import { Text, Icon, Pills } from '@/index';
 import { VerticalNavProps } from '@/index.type';
 import { extractBaseProps, BaseProps } from '@/utils/types';
-import { getTextAppearance, getIconAppearance, getPillsAppearance, isMenuActive, Menu } from '@/utils/navigationHelper';
+import {
+  getTextColor,
+  getHorizontalIconAppearance,
+  getPillsAppearance,
+  isMenuActive,
+  Menu,
+} from '@/utils/navigationHelper';
 
 export type HorizontalNavProps = BaseProps & Pick<VerticalNavProps, 'menus' | 'active' | 'onClick'>;
 export type Align = 'left' | 'center';
@@ -50,7 +56,7 @@ export const HorizontalNav = (props: HorizontalNavProps) => {
         <Icon
           className="mr-3"
           name={menu.icon}
-          appearance={getIconAppearance(isActive, menu.disabled)}
+          appearance={getHorizontalIconAppearance(isActive, menu.disabled)}
           data-test="DesignSystem-HorizontalNav--Icon"
         />
       );
@@ -64,6 +70,7 @@ export const HorizontalNav = (props: HorizontalNavProps) => {
 
     const menuClasses = classNames({
       'HorizontalNav-menu': true,
+      'HorizontalNav-menu--default': !isActive,
       ['HorizontalNav-menu--active']: isActive,
       ['HorizontalNav-menu--disabled']: menu.disabled,
     });
@@ -71,10 +78,10 @@ export const HorizontalNav = (props: HorizontalNavProps) => {
     return (
       // TODO(a11y)
       // eslint-disable-next-line
-      <div data-test="DesignSystem-HorizontalNav" key={index} className={menuClasses} onClick={onClickHandler(menu)}>
+      <div tabIndex={0} data-test="DesignSystem-HorizontalNav" key={index} className={menuClasses} onClick={onClickHandler(menu)}>
         {renderIcon(menu, isActive)}
         <Text
-          appearance={getTextAppearance(isActive, menu.disabled)}
+          color={getTextColor(isActive, menu.disabled)}
           data-test="DesignSystem-HorizontalNav--Text"
           className="HorizontalNav-menuText"
         >

package/core/components/organisms/horizontalNav/__stories__/default.story.jsx

@@ -24,7 +24,7 @@ export const defaultHorizontalNavigation = () => {
   };
 
   return (
-    <div className="d-flex align-items-center py-6" style={{ background: 'var(--secondary-lightest)' }}>
+    <div className="d-flex align-items-center py-6 bg-secondary-lightest">
       <HorizontalNav className="w-100 justify-content-center" menus={data} active={active} onClick={onClickHandler} />
     </div>
   );
@@ -52,7 +52,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="d-flex align-items-center py-6" style={{ background: 'var(--secondary-lightest)' }}>
+    <div className="d-flex align-items-center py-6 bg-secondary-lightest">
       <HorizontalNav
         className="w-100 justify-content-center"
         menus={data}