@nuskin/foundation-ui-components 1.6.0 → 1.7.0

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

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { NsBgCard } from '../';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-
-type ComponentType = typeof NsBgCard;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    component: NsBgCard,
-    title: 'Components/Containers/Card/NsBgCard',
-    argTypes: {},
-    args: {
-        title: 'ageLOC LumiSpa',
-        backgroundImageUrl: 'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
-    },
-    decorators: [withCenterDecorator],
-} as MetaStory;
-
-export const BgCard: Story = {};

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

@@ -1,73 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsFfgCard } from '../';
-
-type ComponentType = typeof NsFfgCard;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    component: NsFfgCard,
-    title: 'Components/Containers/Card/NsFfgCard',
-    argTypes: {
-        onClick: {
-            action: 'clicked',
-        },
-    },
-    decorators: [withCenterDecorator],
-} as MetaStory;
-
-const text = `Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation,
- we’re empowering children around the world with hope for a brighter future.`;
-const host = 'https://images.contentstack.io/v3/assets';
-
-export const Default: Story = {
-    args: {
-        cardLink: {
-            href: 'https://www.forceforgood.org/',
-            title: 'LEARN MORE',
-        },
-        text,
-        topImageUrl: `${host}/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp`,
-        topImageAlt: 'Force for Good Foundation',
-        additionalProps: {
-            testid: 'ffg-card',
-        },
-        onClick: () => {
-            console.log('onClick called');
-        },
-    },
-    play: async ({ canvasElement }: any) => {
-        const canvas = within(canvasElement);
-        userEvent.hover(canvas.getByTestId('ffg-card'));
-        userEvent.hover(canvas.getByRole('link'));
-        expect(canvas.getByText(text)).toBeInTheDocument();
-    },
-};
-const d = { count: -1 };
-export const OnClick: Story = {
-    args: {
-        cardLink: {
-            href: 'https://www.forceforgood.org/',
-            title: 'LEARN MORE',
-        },
-        text,
-        topImageUrl: `${host}/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp`,
-        topImageAlt: 'Force for Good Foundation',
-        additionalProps: {
-            testid: 'ffg-card',
-        },
-        onClick: () => {
-            d.count = 1;
-            console.log('on click called');
-        },
-    },
-    play: async ({ canvasElement }: any) => {
-        d.count = 0;
-        const canvas = within(canvasElement);
-        userEvent.click(canvas.getByTestId('ffg-card'));
-        expect(d.count).toEqual(1);
-    },
-};

package/src/common/card/styled/NsFfgStyled.tsx

@@ -1,46 +0,0 @@
-import { Box } from '@mui/material';
-import { styled } from '@nuskin/foundation-theme';
-
-const Component = () => {
-    return {
-        backgroundClip: 'border-box',
-        backgroundColor: '#fff',
-        border: '1px solid #eff2f7',
-        borderRadius: '1rem',
-        boxShadow: '0 0.75rem 1.5rem rgba(18, 38, 63, .03)',
-        cursor: 'pointer',
-        display: 'flex',
-        flexDirection: 'column' as 'column', // https://github.com/cssinjs/jss/issues/1344
-        marginBottom: '16px',
-        transition: 'all .2s ease',
-        textAlign: 'center' as 'center',
-        wordWrap: 'break-word' as 'break-word',
-        ':hover': {
-            transform: 'translateY(-10px)',
-            boxShadow: '0 1rem 3rem rgba(31, 45, 61, .125) !important',
-            '.action-link': {
-                color: '#2CD5C4',
-                textDecoration: 'none',
-            },
-        },
-        '.body-text': {
-            padding: '0 1.5rem 4rem',
-            fontSize: '16px',
-            color: '#8492a6',
-        },
-        '.top-image': {
-            padding: '3rem 1.5rem',
-            img: {
-                maxWidth: '100%',
-            },
-        },
-        '.action-link': {
-            color: '#3c4858',
-            fontSize: '1.25rem',
-            padding: '0 1.5rem 3rem',
-            fontWeight: 600,
-            marginBottom: '0.67rem',
-        },
-    };
-};
-export const NsFfgStyled = styled(Box)(Component);