@nuskin/foundation-ui-components 1.0.0-cft-35.9 → 1.0.0-cft-35.10

package/CHANGELOG.md

@@ -1,3 +1,52 @@
+# [1.0.0-cft-35.10](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.9...v1.0.0-cft-35.10) (2023-04-25)
+
+
+### Chore
+
+* adding NsInput and NsLabel publish code ([5887e0e](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/5887e0e33115b2ecd1729fd34a59db3f14b3bd57))
+* Breadcrumb file export update ([1cc2fa3](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/1cc2fa346aa6df0a4c8d288fc39702fd247fa71c))
+* CX130-156 refactoring library exports ([71a8677](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/71a8677420bc32f9976d8537f5c416e0a425a6f7))
+* CX130-167 addressing review comments ([4c51c64](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/4c51c6445e17bf8062f47983cdf39ac3c0461ecd))
+* CX130-196 commenting nsNextImage from stories ([f969a9d](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/f969a9d621ccee1df10d380d46f8e5fe696c0268))
+* downgrading storybook to 6.5 ([b6fc98d](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/b6fc98d6a9beb166822f3b4b28d39602e0bbaa3d))
+* fix test failures. CX130-196 ([3758a2d](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/3758a2d2ee79cc2f0c18d4a147254088b7c77859))
+* fixing pipeline ([79126db](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/79126db24aa01d9d1288bb5de6c56805cb88e64d))
+* fixing pipeline ([5bdbfd1](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/5bdbfd1bd91329e26e58f619b464964690ce811f))
+* fixing pipeline ([615a6d8](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/615a6d8de9ba7db89db23e4473589fdf2f808779))
+* fixing typo ([e4e4e4a](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/e4e4e4a78883b9bb421a511ac518576647bbfede))
+* refactored code ([b30c0e0](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/b30c0e0bdf21e4c78e4e3c84bd9e13c431059976))
+* typo fix ([13a4fc9](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/13a4fc926492f5868de958258a59587927c62ee7))
+* updating types for NsInputField and NsLabel to omit unwanted ([69971ff](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/69971ffda98cb6b5eec5c9b7d5428341a56b9fa2))
+
+### Fix
+
+* exported auth dropdown ([bd86d69](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/bd86d6990bcb7f3a490916c4ea9f1d17c407e724))
+* NsDropdownoption background color ([55f6f17](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/55f6f17edce7a9220a692947810a9fae9428f996))
+* Prerelease pipeline ([307c9f8](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/307c9f829cafbad3bd50289b2a313df81c546dc0))
+* Used pallette color ([7eca719](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/7eca7195dcc486347e1d4b4bb861ebc8cd68e9ac))
+
+### FIX
+
+* checking if updated yarn.lock fixes pipeline ([dd9c83e](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/dd9c83e29ce33ce5ed2bc77ffb15203688af9603))
+
+### New
+
+* adding helper text to NsInputField ([63bc8d4](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/63bc8d4fc55442694eeea0cb544fba42e2873e1f))
+* CX130-156 adding initial commit for NsNextImage component ([80da6bc](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/80da6bcc9c548d5aaba22b2199560eab17b622bf))
+* Implemented SignIn/SignUp dropdown ([f6f9975](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/f6f99759f37c3a715b38b4137fcf2612460dca0b))
+* Pr comments updated ([0ca6082](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/0ca6082461a0d20d72b5d54817cdf6093312ea93))
+* pull file updataion ([53e1333](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/53e1333b55384111e17ed52c5e0a53986dc74eb4))
+
+### NEW
+
+* NS video comonent ([6d48788](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/6d4878865ac6a93e6fb4fd305603ba116f5c8db9))
+
+### Update
+
+* Chore CX130-156 updating NsImage and ([1073241](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/10732415c81bb8bdba14912df08ad6a1732fb764))
+* CX130-129 adding search icon ([a31c55d](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/a31c55d0d36cc31e7e1503413b26136660f92bb7))
+* CX130-196 updated storybook version from 6 to 7 and ([eba08e5](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/eba08e5287c11ad00f7f6835332bb98bda09866b))
+
 # [1.0.0-cft-35.9](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.8...v1.0.0-cft-35.9) (2023-04-20)
 
 
@@ -18,7 +67,7 @@
 * button import name chnaged ([47522e3](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/47522e3f8c2e940ac720d204d69448a0b46442ce))
 * conflict ([971e4a5](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/971e4a50c88a545f2890a62349f2ebd06759384a))
 * merge issue ([67a72ce](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/67a72ce440c27b88a339e68f4c74a39c1c23b9a1))
-* Typography and banner ui updates ([99a8322](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/99a8322c968c9b31dca4bc1d0d3652d47a65338b))
+* NsTypography and banner ui updates ([99a8322](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/99a8322c968c9b31dca4bc1d0d3652d47a65338b))
 
 ### FIX
 
@@ -84,7 +133,7 @@
 
 ### Chore
 
-* CFT-64 jest tests for Typography, BrandComponent and Icons ([eb9bfac](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/eb9bfac26f46ba051b2e0a598a7ad623b4405ba7))
+* CFT-64 jest tests for NsTypography, BrandComponent and Icons ([eb9bfac](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/eb9bfac26f46ba051b2e0a598a7ad623b4405ba7))
 
 ### Docs
 
@@ -120,7 +169,7 @@ uses the format from [Project Changelog](https://code.tls.nuskin.io/ns-am/ux/des
 
 ### New
 
-* Added Typography component with storybook
+* Added NsTypography component with storybook
 * Added Button component with storybook and jest
 * Added Brand component with storybook
 

package/package.json

@@ -1,92 +1,92 @@
 {
-  "name": "@nuskin/foundation-ui-components",
-  "version": "1.0.0-cft-35.9",
-  "description": "It is a foundation library written in react, that provides commom components to all UI pages",
-  "private": false,
-  "main": "src/common/index.ts",
-  "repository": {
-    "type": "git",
-    "url": "git@code.tls.nuskin.io:ns-am/content-foundation/foundation-ui-components.git"
-  },
-  "homepage": "https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/blob/master/README.md",
-  "author": {
-    "email": "rpalanisamy@nuskin.com",
-    "name": "Ruthraj Palanisamy"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [
-    "react",
-    "foundation-ui",
-    "foundation-ui-components"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "storybook": "start-storybook -p 6007",
-    "test": "jest",
-    "test:coverage": "yarn test --coverage",
-    "test:watch": "jest --watch",
-    "build-storybook": "build-storybook"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@mui/icons-material": "^5.11.11",
-    "@mui/material": "5.4.2",
-    "@next/font": "13.2.4",
-    "@nuskin/foundation-theme": "1.0.0-cft-33.12",
-    "@types/jest": "^29.5.0",
-    "framer-motion": "^10.8.5",
-    "next": "13.2.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-material-ui-carousel": "^3.4.2",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "^1.8.1",
-    "typescript": "4.9.5"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
-    "@emotion/jest": "^11.10.5",
-    "@nuskin/eslint-config": "^1.0.0-setup.1",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@types/lodash": "^4.14.191",
-    "@types/node": "18.15.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
-    "@types/react-slick": "^0.23.10",
-    "@types/react-test-renderer": "^18.0.0",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "babel-jest": "^29.5.0",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-emotion": "^11.0.0",
-    "eslint": "8.36.0",
-    "eslint-config-next": "13.2.4",
-    "eslint-config-prettier": "^8.7.0",
-    "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.11",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0"
-  },
-  "files": [
-    "src/common"
-  ]
+    "name": "@nuskin/foundation-ui-components",
+    "version": "1.0.0-cft-35.10",
+    "description": "It is a foundation library written in react, that provides commom components to all UI pages",
+    "private": false,
+    "main": "src/common/index.ts",
+    "repository": {
+        "type": "git",
+        "url": "git@code.tls.nuskin.io:ns-am/content-foundation/foundation-ui-components.git"
+    },
+    "homepage": "https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/blob/master/README.md",
+    "author": {
+        "email": "rpalanisamy@nuskin.com",
+        "name": "Ruthraj Palanisamy"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "keywords": [
+        "react",
+        "foundation-ui",
+        "foundation-ui-components"
+    ],
+    "license": "MIT",
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "storybook": "start-storybook -p 6007",
+        "test": "jest",
+        "test:coverage": "yarn test --coverage",
+        "test:watch": "jest --watch",
+        "build-storybook": "build-storybook"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.10.6",
+        "@emotion/styled": "^11.10.6",
+        "@mui/icons-material": "^5.11.11",
+        "@mui/material": "5.4.2",
+        "@next/font": "13.2.4",
+        "@nuskin/foundation-theme": "1.0.0-cft-33.12",
+        "@types/jest": "^29.5.0",
+        "framer-motion": "^10.8.5",
+        "next": "13.2.4",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-material-ui-carousel": "^3.4.2",
+        "react-slick": "^0.29.0",
+        "slick-carousel": "^1.8.1",
+        "typescript": "4.9.5"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.21.0",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.21.0",
+        "@emotion/jest": "^11.10.5",
+        "@nuskin/eslint-config": "^1.0.0-setup.1",
+        "@storybook/addon-actions": "^6.5.16",
+        "@storybook/addon-essentials": "^6.5.16",
+        "@storybook/addon-interactions": "^6.5.16",
+        "@storybook/addon-links": "^6.5.16",
+        "@storybook/builder-webpack5": "^6.5.16",
+        "@storybook/manager-webpack5": "^6.5.16",
+        "@storybook/react": "^6.5.16",
+        "@storybook/testing-library": "^0.0.13",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^14.0.0",
+        "@types/lodash": "^4.14.191",
+        "@types/node": "18.15.0",
+        "@types/react": "18.0.28",
+        "@types/react-dom": "18.0.11",
+        "@types/react-slick": "^0.23.10",
+        "@types/react-test-renderer": "^18.0.0",
+        "@types/testing-library__jest-dom": "^5.14.5",
+        "babel-jest": "^29.5.0",
+        "babel-loader": "^9.1.2",
+        "babel-plugin-emotion": "^11.0.0",
+        "eslint": "8.36.0",
+        "eslint-config-next": "13.2.4",
+        "eslint-config-prettier": "^8.7.0",
+        "eslint-plugin-json": "^3.1.0",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-storybook": "^0.6.11",
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.5.0"
+    },
+    "files": [
+        "src/common"
+    ]
 }

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, fireEvent, screen } from '../../../test-utils';
+import { NsAuthDropdown } from './';
+
+describe('NsAuthDropdown', () => {
+    const props = {
+        signInRedirectLink: '/signIn',
+        signUpRedirectLink: '/signUp',
+        signInBtnText: 'Sign In',
+        signUpLinkText: 'Sign Up',
+        signUpLinkPrefixText: 'Do not have an account?',
+        titleText: 'Welcome',
+        closeOnMouseLeave: false,
+    };
+
+    it('should render component with title text', () => {
+        render(<NsAuthDropdown {...props} />);
+        expect(screen.getByText('Welcome')).toBeInTheDocument();
+    });
+
+    it('should render the sign in button with text', () => {
+        render(<NsAuthDropdown {...props} />);
+        const authHead = screen.getByTestId('auth-head');
+        fireEvent.click(authHead);
+        expect(screen.getByTestId('sign-in-btn')).toBeInTheDocument();
+        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
+    });
+
+    it('should have the correct href attribute in SignUpLink', () => {
+        render(<NsAuthDropdown {...props} />);
+        const authHead = screen.getByTestId('auth-head');
+        fireEvent.click(authHead);
+        const signUpLink = screen.getByTestId('signup-link');
+        expect(signUpLink).toHaveAttribute('href', '/signUp');
+    });
+});

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { NsAuthDropdown } from './';
+
+export default {
+    title: 'Components/NsAuthDropdown',
+    component: NsAuthDropdown,
+    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+    argTypes: {},
+    args: {
+        signInRedirectLink: '/signIn',
+        signUpRedirectLink: '/signUp',
+        signInBtnText: 'Sign In',
+        signUpLinkText: 'Sign up today!',
+        signUpLinkPrefixText: 'New customer?',
+        titleText: 'SIGN UP / SIGN IN',
+        closeOnMouseLeave: true,
+    },
+} as ComponentMeta<typeof NsAuthDropdown>;
+
+export const AuthDropdown: ComponentStory<typeof NsAuthDropdown> = (args) => <NsAuthDropdown {...args} />;

package/src/common/auth-dropdown/NsAuthDropdown.styled.ts

@@ -0,0 +1,118 @@
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
+const { getPaletteColor } = ColorUtils;
+
+const MAGENTA_COLOR = '#bb29bb';
+
+export const AuthDropdownContainer = styled.div`
+    position: relative;
+    display: inline-block;
+`;
+
+export const AuthDropdown = styled.div`
+    min-width: 280px;
+    background-color: white;
+    color: black;
+    text-align: center;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 600;
+    top: calc(100% + 18px);
+    right: 5%;
+    box-shadow: 0 0 5px 0 ${({ theme }) => getAppColor(theme, 'neutral', '20')};
+    transition: all 0.15s ease-in-out;
+    padding: 25px;
+`;
+
+export const Triangle = styled.div`
+    position: absolute;
+    bottom: -18px;
+    left: 50%;
+    width: 24px;
+    height: 24px;
+    overflow: hidden;
+    transition: all 0.15s ease-in-out;
+    z-index: 700;
+    opacity: 1;
+    &::after {
+        content: '';
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+        transform: rotate(45deg);
+        top: 17px;
+        left: 5px;
+        box-shadow: 0 0 5px 0 ${({ theme }) => getAppColor(theme, 'neutral', '20')};
+    }
+`;
+
+export const AuthHead = styled.div`
+    cursor: pointer;
+    padding: 5px 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+`;
+
+export const Button = styled.div`
+    padding-right: 10px;
+`;
+
+export const Link = styled.a`
+    text-decoration: none;
+`;
+
+export const SignInButton = styled(Link)`
+    display: block;
+    padding: 13px;
+    width: 100%;
+    background-color: ${MAGENTA_COLOR};
+    color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+    border: 0;
+    font-size: 16px;
+    &:hover {
+        background-color: ${({ theme }) => getAppColor(theme, 'neutral', '70')};
+    }
+`;
+
+export const SignUpLinkContainer = styled.div`
+    margin-top: 15px;
+    color: ${({ theme }) => getAppColor(theme, 'primary', 'main')};
+    font-size: 13px;
+    line-height: 16px;
+    text-align: left;
+`;
+
+export const SignUpLink = styled(Link)`
+    cursor: pointer;
+    font-weight: 300;
+    font-size: 13px;
+    line-height: 16px;
+    text-decoration: none;
+    color: ${MAGENTA_COLOR};
+    position: relative;
+    transition: all 0.15s ease-in-out;
+    &:hover {
+        color: ${({ theme }) => getAppColor(theme, 'neutral', '70')};
+        font-size: 14px;
+    }
+    &:hover::after {
+        opacity: 1;
+        visibility: visible;
+    }
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 1px;
+        background-color: ${MAGENTA_COLOR};
+        transition: all 0.15s ease-in-out;
+        opacity: 0;
+        visibility: hidden;
+    }
+`;

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

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { NsIcon } from '../icon';
+import {
+    AuthDropdownContainer,
+    AuthHead,
+    Button,
+    AuthDropdown,
+    Triangle,
+    SignInButton,
+    SignUpLinkContainer,
+    SignUpLink,
+} from './NsAuthDropdown.styled';
+import { NsAuthDropdownProps } from './types';
+
+const NsAuthDropdown = ({
+    signInRedirectLink,
+    signUpRedirectLink,
+    signInBtnText,
+    signUpLinkText,
+    signUpLinkPrefixText,
+    titleText,
+    closeOnMouseLeave = false,
+}: NsAuthDropdownProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleToggle = () => {
+        setIsOpen((prevIsOpen) => !prevIsOpen);
+    };
+
+    const closeDropdown = () => {
+        if (closeOnMouseLeave) {
+            setIsOpen(false);
+        }
+    };
+
+    return (
+        <AuthDropdownContainer>
+            <AuthHead data-testid="auth-head" onClick={handleToggle}>
+                <Button>{titleText}</Button>
+                <NsIcon testId="chevron-icon" name={isOpen ? 'arrowDown' : 'arrowUp'} color="primary" />
+                {isOpen ? (
+                    <div onMouseLeave={closeDropdown}>
+                        <Triangle />
+                        <AuthDropdown>
+                            <SignInButton href={signInRedirectLink} data-testid="sign-in-btn">
+                                {signInBtnText}
+                            </SignInButton>
+                            <SignUpLinkContainer>
+                                {signUpLinkPrefixText}{' '}
+                                <SignUpLink data-testid="signup-link" href={signUpRedirectLink}>
+                                    {signUpLinkText}
+                                </SignUpLink>
+                            </SignUpLinkContainer>
+                        </AuthDropdown>
+                    </div>
+                ) : null}
+            </AuthHead>
+        </AuthDropdownContainer>
+    );
+};
+
+export default NsAuthDropdown;

package/src/common/auth-dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default as NsAuthDropdown } from './NsAuthDropdown';
+export type { NsAuthDropdownProps } from './types';

package/src/common/auth-dropdown/types.d.ts

@@ -0,0 +1,9 @@
+export type NsAuthDropdownProps = {
+    signInRedirectLink: string;
+    signUpRedirectLink: string;
+    signInBtnText: string;
+    signUpLinkText: string;
+    signUpLinkPrefixText: string;
+    titleText: string;
+    closeOnMouseLeave?: boolean;
+};

package/src/common/banner/NsBanner.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import NsBanner from './';
+import { NsBanner } from './';
 
 describe('Hero component', () => {
     it('renders banner image and title', () => {

package/src/common/banner/NsBanner.stories.tsx

@@ -5,16 +5,18 @@
  */
 
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { NsBanner, NsTypography, NsButton } from '../';
+import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
 
-import Banner from './';
-import Typography from '../typography';
-import Button from '../button/NsButton';
+type ComponentType = typeof NsBanner;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components',
-    component: Banner,
-    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+    title: 'Components/NsBanner',
+    component: NsBanner,
+    decorators: [CenterStoryDecorator],
     argTypes: {
         children: {
             control: 'text', // use the text control to edit children prop
@@ -27,16 +29,16 @@ export default {
         justify: 'start',
         children: (
             <div>
-                <Typography className="w-80" variant="h1" colorOverride="#000000">
+                <NsTypography className="w-80" variant="h1" colorOverride="#000000">
                     Limited time offers on LumiSpa iO cleansers and bundles!
-                </Typography>
-                <Typography variant="p-m" className="my-5" colorOverride="#000000">
+                </NsTypography>
+                <NsTypography variant="p-m" className="my-5" colorOverride="#000000">
                     Learn more about what I do and how I can help you
-                </Typography>
-                <Button variant="contained">Contact me</Button>
+                </NsTypography>
+                <NsButton variant="contained">Contact me</NsButton>
             </div>
         ),
     },
-} as ComponentMeta<typeof Banner>;
+} as MetaStory;
 
-export const NsBanner: ComponentStory<typeof Banner> = (args) => <Banner {...args} />;
+export const DefaultNsBanner: Story = {};

package/src/common/banner/index.ts

@@ -1 +1,2 @@
-export { default } from './NsBanner';
+export { default as NsBanner } from './NsBanner';
+export type { NsBannerProps } from './types';

package/src/common/brand-components/NsBrand.stories.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import NsBrandComponent from './NsBrandComponent';
+import type { StoryObj, Meta } from '@storybook/react';
+import { NsBrandComponent } from './';
+import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+
+type ComponentType = typeof NsBrandComponent;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
 
 export default {
     title: 'Components/NsBrandComponent',
     component: NsBrandComponent,
-    decorators: [
-        (story) => (
-            <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>
-        ),
-    ],
+    decorators: [CenterStoryDecorator],
     argTypes: {
         size: { control: 'text', defaultValue: '100px' },
         variant: {
@@ -21,8 +21,6 @@ export default {
         size: '100px',
         variant: 'stacked',
     },
-} as ComponentMeta<typeof NsBrandComponent>;
+} as MetaStory;
 
-export const Brand: ComponentStory<typeof NsBrandComponent> = (args) => (
-    <NsBrandComponent {...args} />
-);
+export const Brand: Story = {};

package/src/common/brand-components/index.ts

@@ -1,2 +1,2 @@
-export { default } from './NsBrandComponent';
-export type { NsBrandComponentProps } from './types';
+export { default as NsBrandComponent } from './NsBrandComponent';
+export type { NsBrandComponentProps } from './types';

package/src/common/breadcrumb/NsBreadcrumb.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import NsBreacrumb from './';
+import { NsBreadcrumb } from './';
 import { ItemProps } from './types';
 
 const breadcrumbItems: ItemProps[] = [
@@ -12,7 +12,7 @@ const breadcrumbItems: ItemProps[] = [
 
 describe('Breadcrumb', () => {
     it('renders breadcrumb items with navigation icons', () => {
-        const { getByText } = render(<NsBreacrumb items={breadcrumbItems} />);
+        const { getByText } = render(<NsBreadcrumb items={breadcrumbItems} />);
         expect(getByText('Home')).toBeInTheDocument();
         expect(getByText('Products')).toBeInTheDocument();
         expect(getByText('Shirts')).toBeInTheDocument();