@nuskin/foundation-ui-components 1.0.0-develop.1 → 1.0.0-develop.3

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/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/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/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[]) {
+    let 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) + '%');
+}

package/src/common/column-control/types.d.ts

@@ -18,22 +18,7 @@ export type NsColumnControlProps = PropsWithChildren<{
      *  ns-col-md-(column-ratio) (for tablet screens >= 600px),
      *  and ns-col-sm-(column-ratio) (for mobile screens i.e < 600px)
      * sample values
-     * 'ns-col-lg-2-1',
-    'ns-col-lg-1-2',
-    'ns-col-lg-1-1',
-    'ns-col-lg-1-1-1',
-    'ns-col-lg-2-1-1',
-    'ns-col-lg-1-1-1-1',
-    'ns-col-md-1',
-    'ns-col-md-1-1',
-    'ns-col-md-1-2',
-    'ns-col-md-2-1',
-    'ns-col-md-1-1-1',
-    'ns-col-md-2-1-1',
-    'ns-col-sm-1',
-    'ns-col-sm-1-1',
-    'ns-col-sm-1-2',
-    'ns-col-sm-2-1',
+     * 'ns-col-lg-2-1', 'ns-col-lg-1-2', 'ns-col-lg-1-1',
      */
     columnClass: string;
     gap?: number;
@@ -45,3 +30,17 @@ export type sizeObjectType = {
     tabletFractions?: number[];
     mobileFractions?: number[];
 };
+
+export type NsFlexColumnsProps = PropsWithChildren<{
+    /**
+     * follows the convention of ns-col-lg-{column-ratio}
+     * sample value for column-ratio = 2-1 ==>ns-col-lg-2-1
+     */
+    columnClass: string;
+    gap: number;
+    /* when this boolean is true, column control takes full width of page instead of being restricted to 1200px */
+    isFullWidth?: boolean;
+}> &
+    AdditionalProps;
+
+export type NsGridColumnsProps = NsFlexColumnsProps;

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

@@ -1,5 +1,5 @@
 import { ValueOf } from 'next/dist/shared/lib/constants';
-import { NsColumnControlProps, sizeObjectType } from './types';
+import { NsColumnControlProps, sizeObjectType } from './types.d';
 
 export const columnClasses: NsColumnControlProps['columnClass'][] = [
     'ns-col-lg-2-1',

package/src/common/dropdown/NsDropdown.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, screen, waitFor } from '../../../test-utils';
+import { render, fireEvent, screen, waitFor } from '@/test-utils/index';
 import NsDropdown from './NsDropdown';
 import NsDropdownOption from './NsDropdownOption';
 

package/src/common/dropdown/NsDropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { DropdownContainer, DropdownButton, DropdownList, DropdownHead } from './NsDropdown.styled';
 import { NsIcon } from '../icon';
-import { DropdownProps } from './types';
+import { DropdownProps } from './types.d';
 
 const NsDropdown: React.FC<DropdownProps> = ({
     selectedValue,

package/src/common/dropdown/NsDropdownOption.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ListItem, ListItemContainer } from './NsDropdown.styled';
-import { DropdownOptionProps } from './types';
+import { DropdownOptionProps } from './types.d';
 
 export const NsDropdownOption: React.FC<DropdownOptionProps> = ({
     value,

package/src/common/dropdown/index.ts

@@ -1,3 +1,3 @@
 export { default as NsDropdown } from './NsDropdown';
 export { default as NsDropdownOption } from './NsDropdownOption';
-export type { DropdownOptionProps, DropdownProps } from './types';
+export type { DropdownOptionProps, DropdownProps } from './types.d';

package/src/common/dropdown/stories/NsDropdown.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;

package/src/common/dropdown/stories/NsDropdownCountry.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;

package/src/common/flag/NsFlag.spec.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
 
-import { render } from '../../../test-utils/index';
+import { render } from '@/test-utils/index';
 import NsFlag from './NsFlag';
 
 const { palette } = nuskinTheme;

package/src/common/flag/NsFlag.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsFlag } from './';
 
 type ComponentType = typeof NsFlag;

package/src/common/flag/NsFlag.styled.tsx

@@ -7,7 +7,7 @@
 import { Theme } from '@mui/material';
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 
-import { NsFlagSize } from './types';
+import { NsFlagSize } from './types.d';
 
 type NsFlagThemeParams = {
     $size: NsFlagSize;
@@ -33,11 +33,9 @@ const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
     return sizeValue / FLAG_SCALE_VALUE;
 };
 
-const {
-    getPaletteColor,
-} = ColorUtils;
+const { getPaletteColor } = ColorUtils;
 
-const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme}: NsFlagThemeParams) => {
+const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagThemeParams) => {
     if (theme) {
         return `${makeFlagSize({ $size })}px solid ${getPaletteColor(theme, $bgColor)}`;
     }

package/src/common/flag/NsFlag.tsx

@@ -8,7 +8,7 @@ import React, { PropsWithChildren } from 'react';
 
 import { StyledFlag } from './NsFlag.styled';
 
-import { NsFlagProps } from './types';
+import { NsFlagProps } from './types.d';
 
 const NsFlag = (props: PropsWithChildren<NsFlagProps>) => {
     const { className = '', size = 'small', color = 'accentColorA', message, testId = 'ns-flag-component' } = props;

package/src/common/flag/index.ts

@@ -1,2 +1,2 @@
 export { default as NsFlag } from './NsFlag';
-export type { NsFlagProps, NsFlagSize } from './types';
+export type { NsFlagProps, NsFlagSize } from './types.d';

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

@@ -1,6 +1,4 @@
 /**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * types.d.ts
  * @description Extend the FlagProps interface to include message, color and size prop.
  */
 

package/src/common/icon/NsIcon.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 import { NsIcon, NsIconNameType, NsIconVariants } from './';
 
 describe('NsIcon Component', () => {

package/src/common/icon/NsIcon.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsIcon, NsIconVariants } from './';
 
 type ComponentType = typeof NsIcon;

package/src/common/icon/NsIcon.styled.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@nuskin/foundation-theme';
-import { NsIconSizeType } from './types';
+import { NsIconSizeType } from './types.d';
 
 const iconSize = {
     small: '16px',

package/src/common/icon/NsIcon.tsx

@@ -1,6 +1,6 @@
 import { IconContainer } from './NsIcon.styled';
 import IconVariants from './NsIconVariants';
-import { NsIconProps } from './types';
+import { NsIconProps } from './types.d';
 
 const NsIcon = ({
     name,

package/src/common/icon/NsIconVariants.ts

@@ -17,27 +17,31 @@ import Home from './icons/home';
 import AlertErrorIcon from './icons/AlertErrorIcon';
 import WarningIcon from './icons/WarningIcon';
 import CloseIcon from './icons/CloseIcon';
+import UserIcon from './icons/UserIcon';
+import HamburgerIcon from './icons/HamburgerIcon';
 
 const IconVariants = {
     arrowDown: ArrowDown,
     arrowUp: ArrowUp,
     arrowLeft: ArrowLeft,
     arrowRight: ArrowRight,
+    alertError: AlertErrorIcon,
     cart: Cart,
     cartBadge: CartBadge,
+    close: CloseIcon,
     checkShield: CheckShield,
     checkVerified: CheckVerified,
     error: ErrorIcon,
+    hamburgerIcon: HamburgerIcon,
+    home: Home,
     infoFilled: InfoFilled,
     infoOutlined: InfoOutlined,
     search: SearchIcon,
     success: SuccessIcon,
-    trash: TrashIcon,
     slash: SlashIcon,
-    home: Home,
-    alertError: AlertErrorIcon,
+    trash: TrashIcon,
+    userIcon: UserIcon,
     warning: WarningIcon,
-    close: CloseIcon
 };
 
 export default IconVariants;

package/src/common/icon/icons/AlertErrorIcon.tsx

@@ -16,17 +16,26 @@ const AlertErrorIcon = (props: SvgIconProps) => {
             xmlns="http://www.w3.org/2000/svg"
             {...props}
         >
-            <g id="💎-icon/alert/WarningFill-red" transform="translate(1.000000, 1.000000)">
+            <g id="icon/alert/WarningFill-red" transform="translate(1.000000, 1.000000)">
                 <g id="Error2" transform="translate(0.000000, 1.200000)">
-                    <path d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
+                    <path
+                        d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
                         0.100809118 8.58923271,0.246687943 L0.0706452929,14.8670135 C-0.0142965839,15.0216954 -0.0118890438,15.2093943 0.0769925071,15.3618609 C0.165874058,
                         15.5143276 0.328282319,15.6093523 0.505163987,15.6123832 L17.5120236,15.6123832 C17.6889052,15.6093523 17.8513135,15.5143276 17.940195,15.3618609 C18.0290766,
-                        15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z" id="Shape" fill={props.fill || '#B2140A'} fill-rule="nonzero">
-                    </path>
-                    <path d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
+                        15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z"
+                        id="Shape"
+                        fill={props.fill || '#B2140A'}
+                        fillRule="nonzero"
+                    ></path>
+                    <path
+                        d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
                     12.0467652 9.37034806,12.1211477 9.52,12.265 C9.65709398,12.4241339 9.72701115,12.6303 9.715,12.84 C9.72048715,13.0522748 9.64341383,13.2584012 9.5,
                     13.415 C9.35312473,13.5641498 9.1489517,13.6425377 8.94,13.63 C8.72997224,13.6424095 8.52401376,13.5683367 8.37,13.425 C8.23531653,13.2613056 8.17063593,
-                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z" id="Shape" fill={props.fill || '#FFFFFF'} fill-rule="nonzero"></path>
+                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z"
+                        id="Shape"
+                        fill={props.fill || '#FFFFFF'}
+                        fillRule="nonzero"
+                    ></path>
                 </g>
             </g>
         </SvgIcon>