@nuskin/foundation-ui-components 1.2.0 → 1.4.0

package/package.json

@@ -1,8 +1,7 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.2.0",
+    "version": "1.4.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
-    "private": false,
     "main": "src/common/index.ts",
     "repository": {
         "type": "git",
@@ -37,7 +36,7 @@
         "test:pattern": "jest --coverage --testNamePattern accordion/*",
         "test:watch": "jest --watch",
         "test:failed": "npx jest --onlyFailures",
-        "test:coverage": "yarn test --coverage",
+        "test:coverage": "jest --coverage",
         "types:check": "tsc --pretty --noEmit"
     },
     "dependencies": {
@@ -47,7 +46,7 @@
         "@mui/material": "5.4.2",
         "@mui/utils": "^5.14.1",
         "@next/font": "13.2.4",
-        "@nuskin/foundation-theme": "1.0.0-develop.5",
+        "@nuskin/foundation-theme": "^1.0.0",
         "framer-motion": "^10.8.5",
         "next": "13.2.4",
         "react": "18.2.0",
@@ -103,5 +102,6 @@
     "files": [
         "src/common"
     ],
-    "readme": "./README.md"
+    "readme": "./README.md",
+    "packageManager": "yarn@3.6.3"
 }

package/src/common/auth-dropdown/NsAuthDropdown.tsx

@@ -25,27 +25,31 @@ const NsAuthDropdown = ({
     darkModeEnabled = true,
 }: NsAuthDropdownProps) => {
     const [isOpen, setIsOpen] = useState(false);
-    const dropdowneRef = useRef<HTMLDivElement | null>(null);
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
 
-    const handleToggle = () => {
+    const handleToggle = useCallback(() => {
         setIsOpen(!isOpen);
-    };
+    }, [isOpen]);
 
-    useOnClickOutside(dropdowneRef, handleToggle);
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+    },[]);
 
-    const closeDropdown = useCallback(() => {
+    useOnClickOutside(dropdownRef?.current, handleClose);
+
+    const handleOnMouseLeave = useCallback(() => {
         if (closeOnMouseLeave) {
-            setIsOpen(false);
+            handleClose();
         }
-    }, [closeOnMouseLeave]);
+    }, [closeOnMouseLeave, handleClose]);
 
     return (
-        <AuthDropdownContainer ref={dropdowneRef}>
+        <AuthDropdownContainer ref={dropdownRef}>
             <AuthHead data-testid="auth-head" onClick={handleToggle} darkModeEnabled={darkModeEnabled}>
                 <Button>{titleText}</Button>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
                 {isOpen ? (
-                    <div onMouseLeave={closeDropdown} className="auth-wrapper">
+                    <div onMouseLeave={handleOnMouseLeave} className="auth-wrapper">
                         <Triangle />
                         <AuthDropdown>
                             <SignInButton href={signInRedirectLink} data-testid="sign-in-btn">

package/src/common/button/NsButton.stories.tsx

@@ -6,7 +6,6 @@ import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 import { nuskinTheme } from '@nuskin/foundation-theme';
-
 const { palette } = nuskinTheme;
 
 type ComponentType = typeof NsButton;
@@ -40,7 +39,9 @@ export default {
     },
 } as MetaStory;
 
-export const button: Story = {};
+export const button: Story = {
+    args: {},
+};
 
 export const IconOnlyButton: Story = {
     render: (args: any) => (

package/src/common/button/NsButton.tsx

@@ -4,13 +4,38 @@ import { useTheme } from '@mui/material/styles';
 import StyledButton from './NsButton.styled';
 
 import { NsButtonProps } from './types.d';
+import { NsIcon } from '../icon';
 
 const NsButton = ({ children, darkModeEnabled = true, ...props }: PropsWithChildren<NsButtonProps>) => {
-    const { color } = props;
+    const { color, startIconName, endIconName, variant } = props;
     const { palette } = useTheme();
     const btnColor = color && palette?.[color] ? color : 'primary';
+    let iconColor = btnColor;
+    if (variant === 'contained') {
+        if (btnColor === 'secondary') {
+            iconColor = 'primary';
+        } else {
+            iconColor = 'secondary';
+        }
+    }
+    let startIcon = props.startIcon;
+    if (!startIcon && startIconName) {
+        startIcon = <NsIcon name={startIconName} color={iconColor} size={props.size} />;
+    }
+    let endIcon = props.endIcon;
+    if (!endIcon && endIconName) {
+        endIcon = <NsIcon name={endIconName} color={iconColor} size={props.size} />;
+    }
+
     return (
-        <StyledButton {...props} color={btnColor} disableRipple darkModeEnabled={darkModeEnabled}>
+        <StyledButton
+            {...props}
+            startIcon={startIcon}
+            endIcon={endIcon}
+            color={btnColor}
+            disableRipple
+            darkModeEnabled={darkModeEnabled}
+        >
             {children}
         </StyledButton>
     );

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

@@ -1,22 +1,26 @@
 import { ButtonProps as MUIButtonProps } from '@mui/material';
+import { NsIconProps } from '../icon';
 
 export type NsButtonProps = Pick<
-  MUIButtonProps,
-  | 'size'
-  | 'variant'
-  | 'disabled'
-  | 'fullWidth'
-  | 'color'
-  | 'type'
-  | 'onBlur'
-  | 'onClick'
-  | 'onChange'
-  | 'onFocus'
-  | 'aria-label'
-  | 'className'
-  | 'startIcon'
-  | 'endIcon'
+    MUIButtonProps,
+    | 'aria-label'
+    | 'className'
+    | 'color'
+    | 'disabled'
+    | 'endIcon'
+    | 'fullWidth'
+    | 'href'
+    | 'onBlur'
+    | 'onClick'
+    | 'onChange'
+    | 'onFocus'
+    | 'size'
+    | 'startIcon'
+    | 'type'
+    | 'variant'
 > & {
-  iconOnly?: boolean;
-  darkModeEnabled?: boolean;
+    iconOnly?: boolean;
+    darkModeEnabled?: boolean;
+    startIconName?: NsIconProps['name'];
+    endIconName?: NsIconProps['name'];
 };

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

@@ -1,10 +1,11 @@
-import { NsCartIcon } from './';
 import { render, screen } from '@/test-utils/index';
 
+import { NsCartIcon } from './';
+
 const { getByTestId } = screen;
 describe('NsCartIcon', () => {
     it('1. renders Cart icon when item count is 0', () => {
-        render(<NsCartIcon itemCount={0} color="primary" size="large" />);
+        render(<NsCartIcon />);
         const cartIcon = getByTestId('cart-badge-icon');
         expect(cartIcon).toBeInTheDocument();
     });

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

@@ -19,7 +19,7 @@ export default {
         },
     },
     args: {
-        itemCount: 5,
+        itemCount: 0,
         color: 'primary',
         size: 'large',
     },

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

@@ -0,0 +1,14 @@
+import { Badge, Theme } from '@mui/material';
+import { ColorUtils, styled, FoundationTheme } from '@nuskin/foundation-theme';
+
+type ItemCountParams = {
+    theme?: Theme;
+    bgcolor: FoundationTheme.PaletteColors;
+};
+const { paletteColor } = ColorUtils;
+export const StyledBadge = styled(Badge)<ItemCountParams>`
+    & .MuiBadge-badge {
+        background-color: ${({ bgcolor, theme }) => paletteColor(bgcolor)({ theme })};
+        color: ${({ bgcolor, theme }) => paletteColor(bgcolor, 'contrastText')({ theme })};
+    }
+`;

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

@@ -4,7 +4,7 @@ import { NsCartIconProps } from './types.d';
 
 const NsCartIcon = ({ itemCount = 0, size = 'large', color = 'primary', maxItemCount = 999 }: NsCartIconProps) => {
     return (
-        <StyledBadge badgeContent={itemCount} max={maxItemCount} bgcolor={color}>
+        <StyledBadge badgeContent={itemCount} max={maxItemCount} bgcolor={color} showZero>
             <NsIcon testId="cart-badge-icon" name="cart" size={size} color={color} />
         </StyledBadge>
     );

package/src/common/cart-icon/types.d.ts

@@ -1,8 +1,8 @@
 import { FoundationTheme } from '@nuskin/foundation-theme';
 
 export type NsCartIconProps = {
-    itemCount: number;
+    itemCount?: number;
     size?: 'small' | 'medium' | 'large' | 'xLarge';
     color?: FoundationTheme.PaletteColors;
-    maxItemCount?:number;
+    maxItemCount?: number;
 };

package/src/common/dropdown/NsDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import { DropdownContainer, DropdownButton, DropdownList, DropdownHead } from './NsDropdown.styled';
 import { NsIcon } from '../icon';
@@ -19,20 +19,24 @@ const NsDropdown: React.FC<DropdownProps> = ({
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(selectedValue || '');
-    const dropdowneRef = useRef<HTMLDivElement | null>(null);
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
 
-    const handleToggle = () => {
+    const handleToggle = useCallback(() => {
         if (disabled) return;
-        setIsOpen(!isOpen);
-    };
+        setIsOpen((x) => !x);
+    }, [disabled]);
+
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+    }, []);
 
-    useOnClickOutside(dropdowneRef, handleToggle);
+    useOnClickOutside(dropdownRef?.current, handleClose);
 
-    const closeDropdown = () => {
+    const handleOnMouseLeave = useCallback(() => {
         if (closeOnMouseLeave) {
-            setIsOpen(false);
+            handleClose();
         }
-    };
+    }, [closeOnMouseLeave, handleClose]);
 
     const handleSelect = (input: string) => {
         onSelect(input);
@@ -41,7 +45,7 @@ const NsDropdown: React.FC<DropdownProps> = ({
     };
 
     return (
-        <DropdownContainer disabled={disabled} ref={dropdowneRef}>
+        <DropdownContainer disabled={disabled} ref={dropdownRef}>
             <DropdownHead data-testid="dropdown-head" disabled={disabled} type={type} onClick={handleToggle}>
                 <DropdownButton>{selectedLabel || placeholder}</DropdownButton>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
@@ -49,7 +53,7 @@ const NsDropdown: React.FC<DropdownProps> = ({
             {isOpen ? (
                 <DropdownList
                     data-testid="dropdown-list"
-                    onMouseLeave={closeDropdown}
+                    onMouseLeave={handleOnMouseLeave}
                     borderColor={dropdownBorderColor}
                 >
                     {React.Children.map(children, (child) => {

package/src/common/email-simple/NsEmailSimple.tsx

@@ -43,7 +43,7 @@ const NsEmailSimple = (props: NsEmailSimpleProps) => {
                     errorMessageValue = '';
                 }
             } catch (error) {
-                console.log('API error', error);
+                console.error('API error', error);
             }
         } else {
             //TODO What happens when user does not pass valid checkEmail function

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

@@ -1,10 +1,10 @@
+import { render } from '@/test-utils/index';
 import React from 'react';
 
-import { render } from '@/test-utils/index';
 import { NsFlag } from '../';
 
 describe('FlagComponent', () => {
-    it('renders a div element with background color and text', () => {
+    it('1. renders a div element with background color and text', () => {
         const text = 'NU SKIN';
         const { getByText } = render(<NsFlag message="NU SKIN" color="accentColorA" />);
         const divElement = getByText(text);
@@ -12,4 +12,16 @@ describe('FlagComponent', () => {
         expect(divElement).toBeInTheDocument();
         expect(divElement).toHaveTextContent(text);
     });
+    it('2. should render a flag with default size, color, and testId when only message prop is provided', () => {
+        const props = {
+            message: 'Test Message',
+        };
+        const { getByTestId } = render(<NsFlag {...props} />);
+        const flag = getByTestId('ns-flag-component');
+        expect(flag).toBeInTheDocument();
+        expect(flag).toHaveStyle('height: 20px');
+        expect(flag).toHaveStyle('color: #ffffff');
+        expect(flag).toHaveStyle('background: #f56767');
+        expect(flag).toHaveTextContent(props.message);
+    });
 });

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

@@ -27,7 +27,7 @@ const FlagHeightMap = {
 };
 
 const getFlagHeight = ({ $size }: { $size: NsFlagSize }) => {
-    return FlagHeightMap[$size] || FlagHeightMap['small' as NsFlagSize];
+    return FlagHeightMap[$size];
 };
 
 const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
@@ -36,10 +36,7 @@ const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
 };
 
 const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagThemeParams) => {
-    if (theme) {
-        return `${makeFlagSize({ $size })}px solid ${paletteColor($bgColor)({ theme })}`;
-    }
-    return '';
+    return `${makeFlagSize({ $size })}px solid ${paletteColor($bgColor)({ theme })}`;
 };
 
 export const StyledFlag = styled('span')<NsFlagThemeParams>`

package/src/common/hooks/useOnClickOutside.tsx

@@ -1,25 +1,25 @@
-import { RefObject, useEffect } from 'react';
+import { useEffect } from 'react';
 
 export type Handler = () => void;
 
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-    ref: RefObject<T>,
-    handler: Handler,
+export function useOnClickOutside(
+    element: HTMLDivElement | null,
+    handler: Handler = () => {},
     mouseEvent: 'click' | 'mousedown' | 'mouseup' = 'click'
 ): void {
-    const handleEventListener = (event: MouseEvent) => {
-        const el = ref?.current;
-        if (!el || el.contains(event.target as Node)) {
-            return;
-        }
-        handler();
-    };
     useEffect(() => {
+        const eventListener = (event: MouseEvent) => {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!element || element.contains(event.target as Node)) {
+                return;
+            }
+            handler?.();
+        };
         if (document) {
-            document.addEventListener(mouseEvent, handleEventListener);
+            document.addEventListener(mouseEvent, eventListener);
             return () => {
-                document.removeEventListener(mouseEvent, handleEventListener);
+                document.removeEventListener(mouseEvent, eventListener);
             };
         }
-    }, []);
+    }, [mouseEvent, handler, element]);
 }

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

@@ -1,31 +1,33 @@
-import React from 'react';
 import { render, screen } from '@/test-utils/index';
+import { fireEvent } from '@storybook/testing-library';
+import React from 'react';
+
 import { NsIcon, NsIconNameType, NsIconVariants } from './';
 
 describe('NsIcon Component', () => {
-    it('renders cartBadge icon with custom size and color', () => {
-        const { getByTestId } = render(<NsIcon name="cart" size="medium" color="secondary" />);
+    it('1. renders cartBadge icon with custom size and color', () => {
+        const { getByTestId } = render(<NsIcon name="cart" size={'medium'} color="secondary" />);
         const icon = getByTestId('icon');
         const svgIcon = icon.querySelector('svg');
         // expect(svgIcon).toHaveClass('MuiSvgIcon-colorSecondary');
         expect(svgIcon).toHaveClass('MuiSvgIcon-fontSizeMedium');
     });
 
-    it('renders with testId', () => {
+    it('2. renders with testId', () => {
         Object.keys(NsIconVariants).forEach((iconName) => {
             render(<NsIcon name={iconName as NsIconNameType} />);
             const icon = screen.getByTestId(iconName);
             expect(icon).toBeInTheDocument();
         });
     });
-    it('renders with custom testId', () => {
+    it('3. renders with custom testId', () => {
         const { getByTestId } = render(<NsIcon name="cart" testId="custom-icon" />);
         const icon = getByTestId('custom-icon');
         expect(icon).toBeInTheDocument();
         expect(icon.innerHTML).toContain('svg');
     });
 
-    it('throws an error if invalid icon name is provided', () => {
+    it('4. throws an error if invalid icon name is provided', () => {
         const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
         // @ts-ignore
         const { queryByTestId } = render(<NsIcon name="invalidIcon" />);
@@ -33,4 +35,17 @@ describe('NsIcon Component', () => {
         expect(consoleErrorSpy).not.toHaveBeenCalled();
         consoleErrorSpy.mockRestore();
     });
+    it('5. renders default color of alertErrorIcon', () => {
+        const { getByTestId } = render(<NsIcon name="alertError" size={'medium'} />);
+        const icon = getByTestId('alertError');
+        expect(icon).toBeInTheDocument();
+    });
+    it('6. calls onClick event handler', () => {
+        const onClick = jest.fn();
+        const { getByTestId } = render(<NsIcon name="alertError" size="medium" onClick={onClick} />);
+        const icon = getByTestId('alertError');
+        expect(icon).toBeInTheDocument();
+        fireEvent.click(icon);
+        expect(onClick).toHaveBeenCalled();
+    });
 });

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

@@ -1,3 +1,4 @@
+import { PaletteColors } from '@nuskin/foundation-theme';
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsIcon, NsIconVariants } from './';
@@ -18,7 +19,7 @@ export default {
         },
         color: {
             control: 'select',
-            options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
+            options: PaletteColors,
         },
         colorOverride: {
             control: 'color',

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

@@ -1,19 +1,22 @@
 import { styled } from '@nuskin/foundation-theme';
 import { NsIconSizeType } from './types.d';
 
-const iconSize = {
+export const iconSize: Record<NsIconSizeType, string> = {
     small: '16px',
     medium: '20px',
     large: '24px',
     xLarge: '30px',
 };
+type IconWrapperType = { size: NsIconSizeType };
 
-export const IconContainer = styled.div<{ size: NsIconSizeType }>`
-    display: flex;
-    place-content: center;
-    place-items: center;
-    svg {
-        width: ${({ size }) => iconSize[size]};
-        height: ${({ size }) => iconSize[size]};
-    }
-`;
+export const IconWrapper = styled('div')<IconWrapperType>(({ size }) => {
+    return {
+        display: 'flex',
+        placeContent: 'center',
+        placeItems: 'center',
+        svg: {
+            width: iconSize[size],
+            height: iconSize[size],
+        },
+    };
+});

package/src/common/icon/NsIcon.tsx

@@ -1,19 +1,22 @@
 import { useTheme } from '@mui/material';
 import { ColorUtils } from '@nuskin/foundation-theme';
-import { IconContainer } from './NsIcon.styled';
+
+import { IconWrapper } from './NsIcon.styled';
 import IconVariants from './NsIconVariants';
-import { NsIconProps } from './types.d';
+import { NsIconNameType, NsIconProps } from './types.d';
 
 const { paletteColor } = ColorUtils;
+
 const NsIcon = ({
     name,
-    size = 'large',
+    size,
     color = 'primary',
     testId = 'icon',
     className,
     colorOverride,
+    onClick = () => {},
 }: NsIconProps) => {
-    const Icon = IconVariants[name];
+    const Icon = IconVariants[name as NsIconNameType];
     const theme = useTheme();
     const iconColor = paletteColor(color)({ theme });
     if (!Icon) {
@@ -21,9 +24,9 @@ const NsIcon = ({
     }
 
     return (
-        <IconContainer data-testid={testId} size={size} className={className}>
+        <IconWrapper data-testid={testId} size={size || 'large'} className={className} onClick={onClick}>
             <Icon color={colorOverride ? colorOverride : (iconColor as any)} />
-        </IconContainer>
+        </IconWrapper>
     );
 };
 

package/src/common/icon/NsIconVariants.ts

@@ -20,6 +20,7 @@ import CloseIcon from './icons/CloseIcon';
 import UserIcon from './icons/UserIcon';
 import HamburgerIcon from './icons/HamburgerIcon';
 import UserOutline from './icons/UserOutline';
+import Check from './icons/Check';
 
 const IconVariants = {
     arrowDown: ArrowDown,
@@ -30,6 +31,7 @@ const IconVariants = {
     cart: Cart,
     cartBadge: CartBadge,
     close: CloseIcon,
+    check: Check,
     checkShield: CheckShield,
     checkVerified: CheckVerified,
     error: ErrorIcon,

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

@@ -1,5 +1,6 @@
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
 /**
  *
  * @param props { fill: color to be filled for icon, color: color of the tick icon}
@@ -24,7 +25,7 @@ const AlertErrorIcon = (props: SvgIconProps) => {
                         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.color || '#B2140A'}
+                        fill={props.color}
                         fillRule="nonzero"
                     ></path>
                     <path

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

@@ -1,4 +1,4 @@
-import { SvgIconProps, SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 const ArrowLeft = (props: SvgIconProps) => {
     return (
@@ -19,7 +19,7 @@ const ArrowLeft = (props: SvgIconProps) => {
                 strokeLinecap="round"
                 strokeLinejoin="round"
             >
-                <g transform="translate(-196, -226)" stroke={props.color || '#000'}>
+                <g transform="translate(-196, -226)" stroke={props.color}>
                     <polyline
                         // eslint-disable-next-line max-len
                         transform="translate(209.000000, 237.500000) scale(-1.2, 1.2) rotate(90.000000) translate(-209.000000, -237.500000)"

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

@@ -1,4 +1,4 @@
-import { SvgIconProps, SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export const ArrowRight = (props: SvgIconProps) => {
     return (
@@ -19,7 +19,7 @@ export const ArrowRight = (props: SvgIconProps) => {
                 strokeLinecap="round"
                 strokeLinejoin="round"
             >
-                <g transform="translate(-196, -226)" stroke={props.color || '#000'}>
+                <g transform="translate(-196, -226)" stroke={props.color}>
                     <polyline
                         // eslint-disable-next-line max-len
                         transform="translate(209.000000, 237.500000) scale(-1.2, 1.2) rotate(-90.000000) translate(-209.000000, -237.500000)"

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

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 
-import { SvgIconProps, SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 const CartBadge = (props: SvgIconProps) => {
     return (
@@ -20,7 +20,7 @@ const CartBadge = (props: SvgIconProps) => {
                 width="30px"
                 height="30px"
             >
-                <g id="Group" transform="translate(0.000000, 0.500000)" stroke={props.color || 'currentColor'}>
+                <g id="Group" transform="translate(0.000000, 0.500000)" stroke={props.color}>
                     <circle id="Oval" cx="11" cy="21.5" r="1.5"></circle>
                     <circle id="Oval" cx="23" cy="21.5" r="1.5"></circle>
                     <polyline