@nuskin/foundation-ui-components 1.12.0 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.12.0",
+    "version": "1.14.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/autocomplete/NsAutocomplete.spec.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
+
 import { render, screen, waitFor } from '@/test-utils/index';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 
 import { AutocompleteMockList } from '../autocomplete/mock/MockData';
 import { OptionUiComponent } from '../autocomplete/mock/MockUI';
@@ -43,7 +44,7 @@ describe('CustomAutocomplete', () => {
             },
             { timeout: 5000 }
         );
-    }, 40000);
+    }, 160000);
 
     it('4. selects an option when clicking on it', async () => {
         const onChangeMock = jest.fn();
@@ -55,7 +56,7 @@ describe('CustomAutocomplete', () => {
             await userEvent.click(optionLi);
         });
         expect(onChangeMock).toHaveBeenCalled();
-    }, 40000);
+    }, 160000);
 
     it('5. should load more options when clicking load more button', async () => {
         const seeMore = {
@@ -71,7 +72,7 @@ describe('CustomAutocomplete', () => {
             await userEvent.click(loadMoreButton);
         });
         expect(seeMore.onSeeMore).toHaveBeenCalled();
-    }, 40000);
+    }, 160000);
 
     it('6. should clear options when clicking clear button', async () => {
         const clear = {
@@ -86,5 +87,5 @@ describe('CustomAutocomplete', () => {
             const clearButton = screen.getByText(clear.text);
             await userEvent.click(clearButton);
         });
-    }, 40000);
+    }, 160000);
 });

package/src/common/card/CardButton.tsx

@@ -1,4 +1,7 @@
-import { NsButton, NsIcon } from '..';
+import {
+    NsButton,
+    NsIcon,
+} from '../';
 import { NsCardButton } from './types';
 
 const CardButton = ({
@@ -18,7 +21,13 @@ const CardButton = ({
                     color={buttonColor}
                     variant={buttonVariant}
                     fullWidth={fullWidth}
-                    endIcon={endIcon ? <NsIcon name={endIcon} color={buttonColor} /> : null}
+                    endIcon={
+                        buttonVariant === 'text' ? (
+                            <NsIcon name="arrowRight" size="small" color="primary" />
+                        ) : endIcon ? (
+                            <NsIcon name={endIcon} color={buttonColor} />
+                        ) : null
+                    }
                 >
                     {buttonText}
                 </NsButton>

package/src/common/card/NsMediumCard.tsx

@@ -1,5 +1,6 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
+
 import { NsImage, NsTypography } from '../';
 import CardButton from './CardButton';
 import { NsCardButton } from './types';
@@ -12,21 +13,42 @@ type NsMediumCardProps = {
     backgroundImageAlt: string;
     button?: NsCardButton;
     className?: string;
+    fluid?: boolean;
+};
+const textVariantButton = {
+    padding: '0 0 4px',
+    gap: '7px',
+    span: {
+        margin: 0,
+    },
+    '>div': {
+        margin: 0,
+        borderBottom: '1px solid #252525',
+    },
+    '.MuiButton-endIcon': {
+        svg: {
+            g: {
+                strokeWidth: 2,
+            },
+        },
+    },
 };
+const buttonVariantStyle = (variant: string) => (variant === 'text' ? { a: textVariantButton } : {});
+const CardContainer = styled(Box)<{ fluid: boolean; variant: string }>(({ fluid, variant }) => {
+    const textVariantCssModification = buttonVariantStyle(variant);
 
-const CardContainer = styled(Box)(() => {
     return {
         display: 'flex',
         flexDirection: 'column',
         position: 'relative',
         '.image': {
-            width: '300px',
+            width: fluid ? '100%' : '300px',
             height: '300px',
             objectFit: 'cover',
         },
         '.content': {
             display: 'flex',
-            width: '300px',
+            width: fluid ? '100%' : '300px',
             flexDirection: 'column',
         },
         '.subtitle': {
@@ -40,6 +62,7 @@ const CardContainer = styled(Box)(() => {
         },
         '.cta': {
             marginTop: '10px',
+            ...textVariantCssModification,
         },
     };
 });
@@ -52,9 +75,17 @@ export default function NsMediumCard({
     backgroundImageAlt,
     button,
     className,
+    fluid,
 }: NsMediumCardProps) {
     return (
-        <CardContainer className={className} role="medium-card" component="div" data-testid="medium-card">
+        <CardContainer
+            className={className}
+            role="medium-card"
+            component="div"
+            data-testid="medium-card"
+            fluid={fluid || false}
+            variant={button?.buttonVariant ?? ''}
+        >
             <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
             <div className="content">
                 <NsTypography variant="h5" color="primary" className="title" weight={titleFontWeight}>

package/src/common/card/index.ts

@@ -12,3 +12,4 @@ export { default as NsXLargeCard } from './NsXLargeCard';
 export { default as NsLargeCard } from './NsLargeCard';
 export { default as NsMediumCard } from './NsMediumCard';
 export { default as NsAwardCard } from './NsAwardCard';
+export * from './types.d';

package/src/common/card/stories/NsMediumCard.stories.tsx

@@ -1,5 +1,6 @@
-import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { NsMediumCard } from '../';
 
 type ComponentType = typeof NsMediumCard;
@@ -30,5 +31,6 @@ export const Default: Story = {
             buttonColor: 'primary',
             url: 'https://www.forceforgood.org/',
         },
+        fluid: false,
     },
 };

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

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