@nuskin/foundation-ui-components 1.21.0 → 1.22.0-cx130-1102.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.21.0",
+    "version": "1.22.0-cx130-1102.2",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -46,7 +46,7 @@
         "@mui/material": "5.14.16",
         "@mui/utils": "^5.14.16",
         "@next/font": "13.5.6",
-        "@nuskin/foundation-theme": "1.4.1",
+        "@nuskin/foundation-theme": "^1.5.0",
         "@types/react": "^18.2.34",
         "@types/react-dom": "^18.2.14",
         "cliui": "^8.0.1",

package/src/common/accordion/colorMap.ts

@@ -1,7 +1,6 @@
-import { Themed } from '../common.types';
-import { ColorUtils } from '@nuskin/foundation-theme';
-import { AllColorKeyType } from '@nuskin/foundation-theme/src/common/themes/genome-colors/AllColors';
+import { AllColorKeyType, ColorUtils } from '@nuskin/foundation-theme';
 
+import { Themed } from '../common.types';
 import { AccordionVariant, AccordionVariantType } from './enums';
 
 const { getGenomeColor } = ColorUtils;

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

@@ -1,10 +1,11 @@
-import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { DarkModeEnabledOption } from '../common.types';
+import {
+    ColorUtils,
+    styled,
+} from '@nuskin/foundation-theme';
 
-//[TODO-Arun] - Use from custom color variables
-// const MAGENTA_COLOR = '#bb29bb';
+import { DarkModeEnabledOption } from '../common.types';
 
-const { color, paletteColor } = ColorUtils;
+const { getGenomeColor } = ColorUtils;
 
 export const AuthDropdownContainer = styled.div`
     position: relative;
@@ -21,7 +22,7 @@ export const AuthDropdown = styled.div`
     z-index: 600;
     top: calc(100% + 18px);
     right: 5%;
-    box-shadow: 0 0 5px 0 ${color('neutral', '20')};
+    box-shadow: 0 0 5px 0 ${({ theme }) => getGenomeColor(theme, 'N70')};
     transition: all 0.15s ease-in-out;
     padding: 25px;
 `;
@@ -41,11 +42,11 @@ export const Triangle = styled.div`
         position: absolute;
         width: 14px;
         height: 14px;
-        background-color: ${color('primary', 'white')};
+        background-color: ${({ theme }) => getGenomeColor(theme, 'N10')};
         transform: rotate(45deg);
         top: 17px;
         left: 5px;
-        box-shadow: 0 0 5px 0 ${color('neutral', '20')};
+        box-shadow: 0 0 5px 0 ${({ theme }) => getGenomeColor(theme, 'N70')};
     }
 `;
 export const AuthHead = styled('div')<DarkModeEnabledOption>`
@@ -54,7 +55,7 @@ export const AuthHead = styled('div')<DarkModeEnabledOption>`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: ${paletteColor('primary')};
+    color: ${({ theme }) => getGenomeColor(theme, 'N100')};
 `;
 
 export const Button = styled.div`
@@ -69,18 +70,18 @@ export const SignInButton = styled(Link)`
     display: block;
     padding: 13px;
     width: 100%;
-    background-color: ${color('primary', 'black')};
-    color: ${color('primary', 'white')};
+    background-color: ${({ theme }) => getGenomeColor(theme, 'N100')};
+    color: ${({ theme }) => getGenomeColor(theme, 'N10')};
     border: 0;
     font-size: 16px;
     &:hover {
-        background-color: ${color('neutral', '70')};
+        background-color: ${({ theme }) => getGenomeColor(theme, 'N60')};
     }
 `;
 
 export const SignUpLinkContainer = styled.div`
     margin-top: 15px;
-    color: ${color('primary', 'black')};
+    color: ${({ theme }) => getGenomeColor(theme, 'N100')};
     font-size: 13px;
     line-height: 16px;
     text-align: left;
@@ -92,11 +93,11 @@ export const SignUpLink = styled(Link)`
     font-size: 13px;
     line-height: 16px;
     text-decoration: none;
-    color: ${color('primary', 'black')};
+    color: ${({ theme }) => getGenomeColor(theme, 'N100')};
     position: relative;
     transition: all 0.15s ease-in-out;
     &:hover {
-        color: ${color('neutral', '70')};
+        color: ${({ theme }) => getGenomeColor(theme, 'N60')};
         font-size: 14px;
     }
     &:hover::after {
@@ -111,7 +112,7 @@ export const SignUpLink = styled(Link)`
         right: 0;
         width: 100%;
         height: 1px;
-        background-color: ${color('primary', 'black')};
+        background-color: ${({ theme }) => getGenomeColor(theme, 'N100')};
         transition: all 0.15s ease-in-out;
         opacity: 0;
         visibility: hidden;

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -1,7 +1,9 @@
-import { styled } from '@nuskin/foundation-theme';
 import React, { useMemo } from 'react';
+
 import Slider from 'react-slick';
 
+import { styled } from '@nuskin/foundation-theme';
+
 import { NsScrollingCarousalProps } from '../';
 
 type StyledType = {

package/src/common/carousal/stories/NsScrollingCarousal.stories.tsx

@@ -1,35 +1,56 @@
-/**
- * NsScrollingText.stories.tsx
- * @description NsScrollingText component.
- */
-
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsScrollingCarousal, NsTextStrip } from '@/common/';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { Meta, StoryObj } from '@storybook/react';
 
 type ComponentType = typeof NsScrollingCarousal;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
-export const renderSlide = (slide: any, i: number) => <NsTextStrip key={i} {...slide} />;
+const renderSlide = (slide: any, i: number) => <NsTextStrip key={i} {...slide} />;
 
-export const slides = [
+const slides = [
     {
-        text: 'Hello Nike App',
         description: 'Download the app to access everything Nike',
-        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Get Your Great' },
+        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Hello Nike App' },
         alignment: 'center',
     },
     {
-        text: 'New Styles on Sale: Up to 40% Off',
-        // description: 'Download the app to access everything Nike',
-        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Shop All Our New Markdowns' },
+        description: '',
+        link: {
+            href: 'https://www.nike.com/in/help/a/shipping-delivery-gs',
+            title: 'Shop All Our New Markdowns, New Styles on Sale: Up to 40% Off (empty description)',
+        },
         alignment: 'center',
     },
     {
-        text: 'Free Delivery',
         // description: 'Applies to orders of ₹ 14 000.00 or more. ',
-        // link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'View Details' },
+        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Free Delivery' },
+        alignment: 'center',
+    },
+    {
+        description:
+            'Download the app to access everything Nike Download the app to access everything Nike Download the app to access everything Nike Download the app to access everything Nike',
+        link: {
+            href: 'https://www.nike.com/in/help/a/shipping-delivery-gs',
+            title: ' Hello Nike AppHello Nike App Hello Nike App Hello Nike App',
+        },
+        alignment: 'center',
+    },
+    {
+        description: '',
+        link: {
+            href: 'https://www.nike.com/in/help/a/shipping-delivery-gs',
+            title: 'Shop All Our New Markdowns, New Styles on Sale: Up to 40% Off (empty description)',
+        },
+        alignment: 'center',
+    },
+    {
+        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Free Delivery' },
+        alignment: 'center',
+    },
+    {
+        description: 'Empty href Empty href Empty href Empty href Empty href Empty href Empty href Empty href',
+        link: { href: '', title: '' },
         alignment: 'center',
     },
 ];
@@ -41,12 +62,17 @@ export default {
     args: {
         slides,
         renderSlide,
-        stillSeconds: 3,
-        scrollSeconds: 1,
+        stillSeconds: 6,
+        scrollSeconds: 4,
         additionalProps: {
             testid: 'scrolling-carousal',
         },
     },
+    render: (args) => (
+        <div style={{ width: '90vw' }}>
+            <NsScrollingCarousal {...args} />
+        </div>
+    ),
 } as MetaStory;
 
 export const ScrollingText: Story = {};

package/src/common/text-strip/NsTextStrip.spec.tsx

@@ -1,30 +1,27 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+
 import { NsTextStrip } from '@/common/';
+import { render, screen } from '@testing-library/react';
 
 describe('NsTextStrip component', () => {
     it('renders text description and link', () => {
-        const text = 'Free Delivery';
         const description = 'Download the app to access everything Nike';
-        const link = { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'View Details' };
-        render(<NsTextStrip link={link} description={description} text={text} />);
-        const element = screen.getByText(text);
+        const link = { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Free Delivery' };
+        const { container } = render(<NsTextStrip link={link} description={description} />);
+        const element = screen.getByText(link.title);
         expect(element).toBeInTheDocument();
         const descElement = screen.getByText(description);
         expect(descElement).toBeInTheDocument();
-        const anchorElement = screen.getByText(link.title);
-        expect(anchorElement.tagName).toBe('A');
+        const anchorElement = container.querySelector('a');
         expect(anchorElement).toHaveAttribute('href', link.href);
     });
     it('does not have anchor when link is undefined', () => {
-        const text = 'Free Delivery';
         const description = 'Download the app to access everything Nike';
-        let link = { title: 'hi' };
-        render(<NsTextStrip link={link} description={description} text={text} />);
-        const element = screen.getByText(text);
+        let link = { title: 'Free Delivery' };
+        render(<NsTextStrip link={link} description={description} />);
+        const element = screen.getByText(link.title);
         expect(element).toBeInTheDocument();
         const descElement = screen.getByText(description);
         expect(descElement).toBeInTheDocument();
-        expect(() => screen.getByText(link.title)).toThrow();
     });
 });

package/src/common/text-strip/NsTextStrip.stories.tsx

@@ -3,9 +3,9 @@
  * @description NsTextStrip component.
  */
 
-import type { StoryObj, Meta } from '@storybook/react';
 import { NsTextStrip } from '@/common/';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { Meta, StoryObj } from '@storybook/react';
 
 type ComponentType = typeof NsTextStrip;
 type Story = StoryObj<ComponentType>;
@@ -23,11 +23,39 @@ export default {
         },
     },
     args: {
-        text: 'Free Delivery',
-        description: 'Download the app to access everything Nike',
-        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'View Details' },
+        description: 'Download the app to access everything Nike. View Details',
+        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Free Delivery' },
         alignment: 'center',
     },
 } as MetaStory;
 
 export const DefaultTextStrip: Story = {};
+export const NoDescription: Story = {
+    args: {
+        description: '',
+        link: {
+            href: 'https://www.nike.com/in/help/a/shipping-delivery-gs',
+            title: 'Shop All Our New Markdowns, New Styles on Sale: Up to 40% Off (empty description)',
+        },
+        alignment: 'center',
+    },
+};
+export const LongDescription: Story = {
+    args: {
+        description:
+            'Download the app to access everything Nike Download the app to access everything Nike Download the app to access everything Nike Download the app to access everything Nike',
+        link: {
+            href: 'https://www.nike.com/in/help/a/shipping-delivery-gs',
+            title: 'Shop All Our New Markdowns, New Styles on Sale: Up to 40% Off (empty description)',
+        },
+        alignment: 'center',
+    },
+};
+
+export const NoTitle: Story = {
+    args: {
+        description: 'Empty href Empty href Empty href Empty href Empty href Empty href Empty href Empty href',
+        link: { href: '', title: '' },
+        alignment: 'center',
+    },
+};

package/src/common/text-strip/NsTextStrip.tsx

@@ -5,41 +5,52 @@
 
 import React from 'react';
 
-import { NsTextStripProps } from './types.d';
-import { NsTypography } from '../typography';
+import { ColorUtils, styled } from '@nuskin/foundation-theme';
+
 import { NsLink } from '../link';
-import { styled, ColorUtils } from '@nuskin/foundation-theme';
-
-const { isDarkMode, paletteColor, color } = ColorUtils;
-
-const StyledHeader = styled.header`
-    background: ${(props) => (
-        !isDarkMode(props)
-            ? color('primary', 'gray')
-            : paletteColor('primary', 'contrastText')
-    )};
-    display: flex;
-    flex-direction: column;
+import { NsTypography } from '../typography';
+import { NsTextStripProps } from './types.d';
+
+const { getGenomeColor } = ColorUtils;
+
+const StyledHeader = styled(NsLink)`
+    background: ${({ theme }) => getGenomeColor(theme, 'N20')};
     min-height: 60px;
-    padding: 2px 10px 12px;
+    padding: 4px 12px;
     a {
         text-decoration: underline;
         font-weight: 600;
     }
+    .text-strip-title {
+        max-width: 90%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .text-strip-description {
+        max-width: 90%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 `;
 
 const NsTextStrip = (props: NsTextStripProps) => {
-    const { alignment = 'center', text, description, link, className = '' } = props;
+    const { alignment = 'center', description, link, className = '' } = props;
 
     return (
-        <StyledHeader className={`${className} items-${alignment}`}>
-            <NsTypography variant="title-m" className="tracking-normal">
-                {text}
-            </NsTypography>
-            <NsTypography variant="body-xs">
-                {description}&nbsp;
-                {link?.href ? <NsLink href={link.href}>{link.title}</NsLink> : ''}
-            </NsTypography>
+        <StyledHeader
+            href={link?.href ?? ''}
+            className={`${className} items-${alignment} justify-center min-h-16 flex flex-col gap-1`}
+        >
+            {link?.title ? (
+                <NsTypography weight="bold" variant="label-m" className="text-strip-title whitespace-nowrapd" noSpacing>
+                    <span title={link?.title}>{link?.title}</span>
+                </NsTypography>
+            ) : null}
+            {description ? (
+                <NsTypography className="text-strip-description whitespace-nowrap" variant="body-m" noSpacing>
+                    <span title={description}>{description}</span>
+                </NsTypography>
+            ) : null}
         </StyledHeader>
     );
 };

package/src/common/text-strip/types.d.ts

@@ -3,11 +3,10 @@ import { AdditionalProps } from '../common.types';
 export type AlignmentType = 'start' | 'center' | 'end';
 
 export type TextCtaDataType = {
-    link?: {
+    link: {
         href?: string;
         title?: string;
     };
-    text?: string;
     description?: string;
 };
 export type NsTextStripProps = {