@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.10

package/src/common/cart-icon/NsCartIcon.tsx

@@ -1,6 +1,6 @@
 import { NsIcon } from '../icon';
 import { CartIconContainer, ItemCount } from './NsCartIcon.styled';
-import { NsCartIconProps } from './types';
+import { NsCartIconProps } from './types.d';
 
 const NsCartIcon = ({ itemCount, size = 'large', color = 'primary' }: NsCartIconProps) => {
     return (

package/src/common/cart-icon/index.ts

@@ -1,2 +1,2 @@
 export { default as NsCartIcon } from './NsCartIcon';
-export type { NsCartIconProps } from './types';
+export type { NsCartIconProps } from './types.d';

package/src/common/checkbox/NsCheckbox.spec.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { render, fireEvent, noop } from '../../../test-utils';
+import { render, fireEvent, noop } from '@/test-utils/index';
 import NsCheckbox from './NsCheckbox';
 
 // Test suite for CustomCheckbox
@@ -54,4 +54,4 @@ describe('CustomCheckbox', () => {
         // Assert that the handleChange function has been called
         expect(handleChange).toHaveBeenCalled();
     });
-});
+});

package/src/common/checkbox/NsCheckbox.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { within } from '@testing-library/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 
@@ -13,7 +13,7 @@ type MetaStory = Meta<ComponentType>;
 const labelText = 'Checkbox Label';
 // In this case, we're only passing the label prop.
 export default {
-    title: 'Components/NsCheckbox',
+    title: 'Components/Inputs/NsCheckbox',
     component: NsCheckbox,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/checkbox/NsCheckbox.styled.tsx

@@ -1,19 +1,18 @@
 /**
  * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * checkbox.tsx
  * @description Styled Components for Checkbox
  */
 import DoneIcon from '@mui/icons-material/Done';
 
-import { styled } from '@nuskin/foundation-theme';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsFlag } from '../flag';
-
+const { paletteColor, buttonColor } = ColorUtils;
 /**
  * Wrapper BpIcon for checkbox.tsx
  * @params ( theme: { palette }) / Provide the color's to contaier from @nuskin/foundation-theme
  */
 
-export const BpIcon = styled(DoneIcon)(({ theme: { palette } }) => ({
+export const BpIcon = styled(DoneIcon)(({ theme }) => ({
     border: '1px solid #8C8C8C',
     path: {
         display: 'none',
@@ -25,31 +24,31 @@ export const BpIcon = styled(DoneIcon)(({ theme: { palette } }) => ({
         outline: '3px solid #94D6E9',
     },
     'input:disabled ~ &': {
-        background: palette?.primary?.buttonState?.hovered,
+        background: buttonColor('primary', 'hovered')({ theme }),
     },
 }));
 
 /**
  * Wrapper BpCheckedIcon for checkbox.tsx
- * @params ( theme: { palette }) / Provide the color's to contaier from @nuskin/foundation-theme
+ * @params ( theme: { palette }) / Provide the color's to container from @nuskin/foundation-theme
  */
 
-export const BpCheckedIcon = styled(BpIcon)(({ theme: { palette } }) => ({
+export const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
     path: {
         display: 'block',
     },
-    background: palette.primary.main,
-    color: palette.primary.contrastText,
+    background: paletteColor('primary', 'main')({ theme }),
+    color: paletteColor('primary', 'contrastText')({ theme }),
 }));
 
-export const StyledLabel = styled('span')<{ $hasDisabled: boolean }>`
-    ${({ $hasDisabled, theme: { palette } }) =>
-        $hasDisabled &&
-        `
-    color: ${palette?.primary?.buttonState?.hovered};
-`}
-`;
+const getLabelColor = (isDisabled: boolean, color: string) => (!isDisabled ? '' : `color: ${color}`);
 
+export const StyledLabel = styled('span')<{ isDisabled: boolean }>`
+    ${({ isDisabled, theme }) => {
+        const color = buttonColor('primary', 'hovered')({ theme });
+        return getLabelColor(isDisabled, color);
+    }}
+`;
 export const StyledFlagLabel = styled(NsFlag)`
     margin-right: 16px;
 `;

package/src/common/checkbox/NsCheckbox.tsx

@@ -9,7 +9,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import { default as MUICheckbox } from '@mui/material/Checkbox';
 
 import { BpCheckedIcon, BpIcon, StyledLabel, StyledFlagLabel } from './NsCheckbox.styled';
-import { NsCheckboxProps } from './types';
+import { NsCheckboxProps } from './types.d';
 
 import { NsTypography } from '../';
 
@@ -54,7 +54,7 @@ const NsCheckbox = (props: PropsWithChildren<NsCheckboxProps>) => {
         () => (
             <NsTypography variant="p-l">
                 <StyledFlagLabel {...flag} size={size} testId={`${name}-flag-label`} />
-                <StyledLabel className="checkbox-label-text" $hasDisabled={disabled}>
+                <StyledLabel className="checkbox-label-text" isDisabled={disabled}>
                     {label}
                 </StyledLabel>
             </NsTypography>

package/src/common/checkbox/index.ts

@@ -1,2 +1,2 @@
 export { default as NsCheckbox } from './NsCheckbox';
-export type { NsCheckboxProps } from './types';
+export type { NsCheckboxProps } from './types.d';

package/src/common/checkbox/types.d.ts

@@ -1,15 +1,9 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * types.d.ts
- * @description NsCheckbox Props extending Mui CheckboxProps interface.
- */
-
 import { CheckboxProps as MUICheckboxProps } from '@material-ui/core/Checkbox';
 
 import { NsFlagProps } from '../flag';
 
 // Define the props for the custom checkbox component
-export type NsCheckboxProps = Pick<MUICheckboxProps, 'label' | 'onChange'> & {
+export type NsCheckboxProps = Partial<Pick<MUICheckboxProps, 'label' | 'onChange'>> & {
     name: string;
     className?: string;
     checked: boolean;

package/src/common/column-control/NsColumnControl.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
-import { NsColumnControlProps, sizeObjectType } from './types';
+import { NsColumnControlProps, sizeObjectType } from './types.d';
 import { getColumnSizes } from './utils';
 
 const options = {

package/src/common/column-control/NsFlexColumns.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { getColumnSizes } from './utils';
+import { StyledFlex } from './styled/StyledFlex';
+import { NsFlexColumnsProps } from './types';
+
+const NsFlexColumns = ({ columnClass, children, gap, additionalProps, isFullWidth }: NsFlexColumnsProps) => {
+    const sizes = useMemo(() => {
+        return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
+    }, [columnClass]);
+    return (
+        <StyledFlex
+            isFullWidth={isFullWidth || false}
+            gap={gap}
+            sizes={sizes}
+            className="ns-flex-columns"
+            data-testid={additionalProps?.testid ?? 'ns-flex-columns'}
+        >
+            {children}
+        </StyledFlex>
+    );
+};
+export default NsFlexColumns;

package/src/common/column-control/NsGridColumns.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { getColumnSizes } from './utils';
+import { StyledGrid } from './styled/StyledGrid';
+import { NsGridColumnsProps } from './types';
+
+const NsGridColumns = ({ columnClass, children, gap, isFullWidth, additionalProps }: NsGridColumnsProps) => {
+    const sizes = useMemo(() => {
+        return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
+    }, [columnClass]);
+    return (
+        <StyledGrid
+            isFullWidth={isFullWidth || false}
+            gap={gap}
+            sizes={sizes}
+            className="ns-grid-columns"
+            data-testid={additionalProps?.testid ?? 'ns-grid-columns'}
+        >
+            {children}
+        </StyledGrid>
+    );
+};
+export default NsGridColumns;

package/src/common/column-control/index.ts

@@ -1,2 +1,4 @@
 export { default as NsColumnControl } from './NsColumnControl';
-export type { NsColumnControlProps } from './types';
+export { default as NsFlexColumns } from './NsFlexColumns';
+export { default as NsGridColumns } from './NsGridColumns';
+export type { NsColumnControlProps } from './types.d';

package/src/common/column-control/{NsColumnControl.spec.tsx → specs/NsColumnControl.spec.tsx}

@@ -1,6 +1,6 @@
-import { render, screen } from '../../../test-utils';
-import { NsColumnControl } from './';
-import { DivArray } from './NDivs.story';
+import { NsColumnControl } from '@/common/index';
+import { render, screen } from '@/test-utils/index';
+import { DivArray } from '../stories/DivArray';
 
 describe('NsColumnControl component', () => {
     it('renders an column with proper grid value for tablet', () => {

package/src/common/column-control/specs/NsFlexColumns.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '../../../../test-utils';
+import { NsFlexColumns } from '@/common/index';
+import { DivArray } from '../stories/DivArray';
+
+describe('NsFlexColumns component', () => {
+    it('renders an column with proper grid value for tablet', () => {
+        render(
+            <NsFlexColumns columnClass="ns-col-lg-1-1-1" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsFlexColumns>
+        );
+        const element = screen.getByTestId('ns-flex-columns');
+        expect(element).toBeInTheDocument();
+    });
+    it('renders an column with proper grid value', () => {
+        console.warn = jest.fn();
+        render(
+            <NsFlexColumns columnClass="" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsFlexColumns>
+        );
+        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Received invalid className'));
+    });
+});

package/src/common/column-control/specs/NsGridColumns.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '../../../../test-utils';
+import { NsGridColumns } from '@/common/index';
+import { DivArray } from '../stories/DivArray';
+
+describe('NsGridColumns component', () => {
+    it('renders an column with proper grid value for tablet', () => {
+        render(
+            <NsGridColumns columnClass="ns-col-lg-1-1-1" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsGridColumns>
+        );
+        const element = screen.getByTestId('ns-grid-columns');
+        expect(element).toBeInTheDocument();
+    });
+    it('renders an column with proper grid value', () => {
+        console.warn = jest.fn();
+        render(
+            <NsGridColumns columnClass="" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsGridColumns>
+        );
+        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Received invalid className'));
+    });
+});

package/src/common/column-control/stories/DivArray.stories.tsx

@@ -0,0 +1,18 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import {DivArray} from './DivArray';
+
+type ComponentType = typeof DivArray;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Data Display/Column/NDivs',
+    component: DivArray,
+    decorators: [withCenterDecorator],
+    args: {
+        elementsCount: 2,
+    },
+} as MetaStory;
+
+export const Basic: Story = {};

package/src/common/column-control/stories/DivArray.tsx

@@ -0,0 +1,63 @@
+import { PropsWithChildren } from 'react';
+
+type DivArrayProps = {
+    elementsCount: number;
+};
+
+const getRandom = (n: number) => (Math.random() * n).toFixed(0);
+
+type DivComponentProps = PropsWithChildren<{ style: Record<string, any>; index: number }>;
+export const DivComponent = ({ style, index, children }: DivComponentProps) => {
+    const borderWidth = `${getRandom(5)}px`;
+    const padding = `${getRandom(20)}px`;
+    return (
+        <div
+            style={{
+                padding,
+                border: `${borderWidth} solid`,
+                borderColor: `hsl(${getRandom(359)},100%, 50%)`,
+                background: `hsla(${getRandom(359)},100%, 50%,0.3)`,
+                ...style,
+            }}
+        >
+            {index}
+            {children}
+        </div>
+    );
+};
+/**
+ * this component return a fragment containing n number of div, with each div numbered as per its index
+ * @param n: number of div to render
+ * @returns
+ */
+export const DivArray = ({ elementsCount }: DivArrayProps) => (
+    <>
+        {Array(elementsCount)
+            .fill(0)
+            .map((_, index) => (
+                <DivComponent key={index} index={index + 1} style={{}} />
+            ))}
+    </>
+);
+export const DivArrayRandom = ({ elementsCount }: DivArrayProps) => (
+    <>
+        {Array(elementsCount)
+            .fill(0)
+            .map((_, index) => {
+                const width = `${getRandom(700)}px`;
+                const height = `${getRandom(400)}px`;
+                return (
+                    <DivComponent
+                        key={index}
+                        index={index + 1}
+                        style={{
+                            width,
+                            height,
+                        }}
+                    >
+                        item no = {index + 1} with width = {width} and height = {height}
+                    </DivComponent>
+                );
+            })}
+    </>
+);

package/src/common/column-control/{NsColumnControl.stories.tsx → stories/NsColumnControl.stories.tsx}

@@ -1,25 +1,15 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
-import { NsColumnControl } from '.';
-import { DivArray } from './NDivs.story';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsColumnControl } from '@/common/index';
+import { DivArray } from './DivArray';
+import { childrenMapping, selectDivOptions } from './common';
 
 type ComponentType = typeof NsColumnControl;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
-/* an array from 1 to n */
-const selectDivOptions = Array(16)
-    .fill(0)
-    .map((e, i) => i + 1);
-const childrenMapping = selectDivOptions.reduce((a, c) => {
-    return {
-        ...a,
-        [c]: <DivArray elementsCount={c} />,
-    };
-}, {});
-
 export default {
-    title: 'Components/NsColumnControl',
+    title: 'Components/Data Display/Column/NsColumnControl',
     component: NsColumnControl,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -42,7 +32,10 @@ export default {
     },
 } as MetaStory;
 
-export const SingleColumnControl: Story = {};
+export const ResponsiveColumnControl: Story = {};
+export const SingleColumnControl: Story = {
+    args: { columnClass: '' },
+};
 export const TwoColumn11: Story = {
     args: { columnClass: 'ns-col-lg-1-1' },
 };

package/src/common/column-control/stories/NsFlexColumns.stories.tsx

@@ -0,0 +1,63 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsFlexColumns } from '..';
+import { DivArray, DivArrayRandom } from './DivArray';
+import { childrenMapping, selectDivOptions } from './common';
+
+type ComponentType = typeof NsFlexColumns;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Data Display/Column/NsFlexColumns',
+    component: NsFlexColumns,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        columnClass: {
+            control: 'text',
+            defaultValue: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
+        },
+        gap: {
+            control: 'number',
+            defaultValue: 16,
+        },
+        children: {
+            control: {
+                type: 'select',
+                options: selectDivOptions,
+            },
+            defaultValue: <DivArrayRandom elementsCount={8} />,
+            mapping: childrenMapping,
+        },
+    },
+    args: {
+        columnClass: '',
+        children: <DivArrayRandom elementsCount={12} />,
+    },
+} as MetaStory;
+
+export const DefaultColumnControl: Story = {
+    args: {
+        children: <DivArray elementsCount={8} />,
+    },
+};
+export const TwoColumn11: Story = {
+    args: { columnClass: 'ns-col-lg-1-1' },
+};
+export const TwoColumn21: Story = {
+    args: { columnClass: 'ns-col-lg-2-1' },
+};
+
+export const ThreeColumn211: Story = {
+    args: { columnClass: 'ns-col-lg-2-1-1' },
+};
+export const ThreeColumn121: Story = {
+    args: { columnClass: 'ns-col-lg-1-2-1' },
+};
+export const ThreeColumn111: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1' },
+};
+
+export const FourColumn1111: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1-1' },
+};

package/src/common/column-control/stories/NsGridColumns.stories.tsx

@@ -0,0 +1,63 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsGridColumns } from '..';
+import { DivArray, DivArrayRandom } from './DivArray';
+import { childrenMapping, selectDivOptions } from './common';
+
+type ComponentType = typeof NsGridColumns;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Data Display/Column/NsGridColumns',
+    component: NsGridColumns,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        columnClass: {
+            control: 'text',
+            defaultValue: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
+        },
+        gap: {
+            control: 'number',
+            defaultValue: 16,
+        },
+        children: {
+            control: {
+                type: 'select',
+                options: selectDivOptions,
+            },
+            defaultValue: <DivArrayRandom elementsCount={8} />,
+            mapping: childrenMapping,
+        },
+    },
+    args: {
+        columnClass: '',
+        children: <DivArrayRandom elementsCount={12} />,
+    },
+} as MetaStory;
+
+export const DefaultColumnControl: Story = {
+    args: {
+        children: <DivArray elementsCount={8} />,
+    },
+};
+export const TwoColumn11: Story = {
+    args: { columnClass: 'ns-col-lg-1-1' },
+};
+export const TwoColumn21: Story = {
+    args: { columnClass: 'ns-col-lg-2-1' },
+};
+
+export const ThreeColumn211: Story = {
+    args: { columnClass: 'ns-col-lg-2-1-1' },
+};
+export const ThreeColumn121: Story = {
+    args: { columnClass: 'ns-col-lg-1-2-1' },
+};
+export const ThreeColumn111: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1' },
+};
+
+export const FourColumn1111: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1-1' },
+};

package/src/common/column-control/stories/common.tsx

@@ -0,0 +1,14 @@
+import { DivArray } from './DivArray';
+
+/* an array from 1 to n */
+export const selectDivOptions = Array(16)
+    .fill(0)
+    .map((_, index) => index + 1);
+
+/* this component is used only as a utility to show column control in storybook */
+export const childrenMapping = selectDivOptions.reduce((childrenMappingObject, elementCount) => {
+    return {
+        ...childrenMappingObject,
+        [elementCount]: <DivArray elementsCount={elementCount} />,
+    };
+}, {});

package/src/common/column-control/styled/StyledFlex.tsx

@@ -0,0 +1,45 @@
+import { Box } from '@mui/material';
+import { styled } from '@nuskin/foundation-theme';
+import { sizeObjectType } from '../types';
+import { commonStyles, getPercentArray } from './common';
+
+const options = {
+    shouldForwardProp: (propKey: string) => !['sizes', 'gap', 'isFullWidth'].includes(propKey),
+};
+
+type StyledFlexProps = {
+    sizes: sizeObjectType;
+    gap?: number;
+    isFullWidth: boolean;
+};
+
+/* main wrapper for column control using css flex */
+export const StyledFlex = styled(
+    Box as any,
+    options
+)<StyledFlexProps>(({ sizes, gap, isFullWidth }: StyledFlexProps) => {
+    const gridGap = gap ? `${gap}px` : '2rem';
+    const fraction = getPercentArray(sizes.fractions);
+    const flexResponsive = { flexGrow: 1, flexShrink: 1 };
+    const maxWidth = isFullWidth ? '100%' : '1200px';
+    const style: any = {
+        gap: gridGap,
+        ...commonStyles,
+        maxWidth,
+        display: 'flex',
+        paddingInline: '20px',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        '> *': {
+            display: 'flex',
+            minWidth: '220px',
+        },
+    };
+    fraction.forEach((f, i) => {
+        style[`> :nth-of-type(${fraction.length}n+${i + 1})`] = {
+            flexBasis: `calc(${fraction[i]} - ${gridGap})`,
+            ...flexResponsive,
+        };
+    });
+    return style;
+});

package/src/common/column-control/styled/StyledGrid.tsx

@@ -0,0 +1,40 @@
+import { Box } from '@mui/material';
+import { styled } from '@nuskin/foundation-theme';
+import { sizeObjectType } from '../types';
+import { commonStyles, getPercentArray } from './common';
+
+type StyledGridProps = {
+    sizes: sizeObjectType;
+    gap?: number;
+    isFullWidth: boolean;
+};
+const options = {
+    shouldForwardProp: (propKey: string) => !['sizes', 'gap', 'isFullWidth'].includes(propKey),
+};
+
+/* main wrapper for column control using css grid */
+export const StyledGrid = styled(
+    Box as any,
+    options
+)<StyledGridProps>(({ sizes, gap, isFullWidth }: StyledGridProps) => {
+    const gridGap = gap ?? '2rem';
+    const maxWidth = isFullWidth ? '100%' : '1200px';
+    return {
+        gap: gridGap,
+        ...commonStyles,
+        maxWidth,
+        display: 'grid',
+        /* here we are creating gridTemplateColumns as calc(40% - 20px) calc(40% - 20px), */
+        gridTemplateColumns: getPercentArray(sizes.fractions)
+            ?.map((fractionPercent) => `calc(${fractionPercent} - 20px)`)
+            .join(''),
+        justifyContent: 'center',
+        '> *': {
+            minWidth: '220px',
+            width: 'auto !important',
+        },
+        '.span-2': {
+            gridColumn: 'span 2',
+        },
+    } as any;
+});

package/src/common/column-control/styled/common.ts

@@ -0,0 +1,27 @@
+const mobileBreakPoint = '600px';
+
+export const commonStyles = {
+    margin: '32px auto',
+
+    [`@media (max-width: ${mobileBreakPoint})`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'wrap',
+        margin: '2rem 1rem',
+        '> * ': {
+            flex: '1 1 0 !important',
+        },
+    },
+};
+/*
+   we have kept extra margin by taking 80% instead of 100%, because margins and padding,
+   and gaps also take up space, so we should be left with appropriate space
+   example:
+   ['1','1'] => ['40%','40%']
+   ['1','2'] => ['27%','53%']
+ */
+export function getPercentArray(fractionArray?: string[] | number[]) {
+    const numbers = fractionArray?.map((numberString) => +numberString)?.filter((num) => 0 < num && num < 10) ?? [];
+    const sum = numbers.reduce((currentSum, currentNumber) => currentSum + currentNumber, 0);
+    return numbers.map((currentNumber) => ((currentNumber / sum) * 80).toFixed(2) + '%');
+}