@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.10

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

@@ -0,0 +1,57 @@
+/* eslint-disable no-unused-vars */
+import { React } from 'React'
+
+export interface Header {
+    label: string;
+    id: string | number;
+    numeric: boolean;
+    sortable?: boolean;
+}
+
+export interface Item {
+    [key: string]: string | number;
+}
+  
+export interface NsTableProps {
+    headers: Header[];
+    items: Item[];
+    rows: number;
+    itemKey: string;
+    rowsPerPageOptions: number[];
+    isExpandableAll?: boolean;
+    showActions?: boolean;
+    showExpandedContent?: boolean;
+    loading?: boolean;
+    expandableContent: (selectedItem: Item, index: number) => React.ReactNode;
+    actionClick: (item: Item) => React.ReactNode;
+}
+
+export type OrderType = 'asc' | 'desc';
+
+export interface NsTableHeaderProps {
+    onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Item) => void;
+    order: OrderType;
+    orderBy: string;
+    rowCount: number;
+    headCells: readonly Header[];
+}
+
+export interface NsTablePaginationProps {
+    rowsPerPageOptions: number[],
+    count: number;
+    rowsPerPage: number;
+    page: number,
+    onPageChange: (number) => void;
+}
+
+export interface NsTableRowProps {
+    expandableContent: (selectedItem: Item, index: number) => React.ReactNode;
+    isExpand: boolean;
+    handleClick: (index: number) => void;
+    row: Item;
+    index: number;
+    itemKeyList: string[];
+    showActions: boolean;
+    showExpandedContent: boolean;
+    actionClick: (item: Item) => React.ReactNode;
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { NsTextStrip } from '@/common/';
+
+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);
+        expect(element).toBeInTheDocument();
+        const descElement = screen.getByText(description);
+        expect(descElement).toBeInTheDocument();
+        const anchorElement = screen.getByText(link.title);
+        expect(anchorElement.tagName).toBe('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);
+        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

@@ -0,0 +1,33 @@
+/**
+ * NsTextStrip.stories.tsx
+ * @description NsTextStrip component.
+ */
+
+import type { StoryObj, Meta } from '@storybook/react';
+import { NsTextStrip } from '@/common/';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsTextStrip;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Data Display/NsTextStrip',
+    component: NsTextStrip,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        alignment: {
+            control: 'select',
+            options: ['center', 'start', 'end'],
+            description: 'specify whether items should be in center, start or end',
+        },
+    },
+    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' },
+        alignment: 'center',
+    },
+} as MetaStory;
+
+export const DefaultTextStrip: Story = {};

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

@@ -0,0 +1,47 @@
+/**
+ * NsTextStrip.tsx
+ * @description NsTextStrip component for scrolling text CTA
+ */
+
+import React from 'react';
+
+import { NsTextStripProps } from './types.d';
+import { NsTypography } from '../typography';
+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;
+    min-height: 60px;
+    padding: 2px 10px 12px;
+    a {
+        text-decoration: underline;
+        font-weight: 600;
+    }
+`;
+
+const NsTextStrip = (props: NsTextStripProps) => {
+    const { alignment = 'center', text, description, link, className = '' } = props;
+
+    return (
+        <StyledHeader className={`${className} items-${alignment}`}>
+            <NsTypography variant="h5" weight="bold">
+                {text}
+            </NsTypography>
+            <NsTypography variant="p-xs">
+                {description}&nbsp;
+                {link?.href ? <NsLink href={link.href}>{link.title}</NsLink> : ''}
+            </NsTypography>
+        </StyledHeader>
+    );
+};
+
+export default NsTextStrip;

package/src/common/text-strip/index.ts

@@ -0,0 +1,2 @@
+export { default as NsTextStrip } from './NsTextStrip';
+export type { NsTextStripProps } from './types.d';

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

@@ -0,0 +1,17 @@
+import { AdditionalProps } from '../common.types';
+
+export type AlignmentType = 'start' | 'center' | 'end';
+
+export type TextCtaDataType = {
+    link?: {
+        href?: string;
+        title?: string;
+    };
+    text?: string;
+    description?: string;
+};
+export type NsTextStripProps = {
+    alignment?: AlignmentType;
+    className?: string;
+} & AdditionalProps &
+    TextCtaDataType;

package/src/common/typography/NsTypography.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsTypography } from './';
 
 type ComponentType = typeof NsTypography;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsTypography',
+    title: 'Components/Data Display/NsTypography',
     component: NsTypography,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/typography/NsTypography.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { NsTypographyProps } from './types';
+import { NsTypographyProps } from './types.d';
 import { StyledTypography } from './Typography.styled';
 
 const NsTypography = ({

package/src/common/typography/Typography.styled.tsx

@@ -1,7 +1,7 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { NsTypographyProps } from './types';
+import { NsTypographyProps } from './types.d';
 
-const { getPaletteColor } = ColorUtils;
+const { paletteColor } = ColorUtils;
 
 const variantStyles = {
     h1: 'font-size: 36px; line-height: 44px;',
@@ -29,8 +29,8 @@ const fontWeightMap = {
 
 export const StyledTypography = styled.div<NsTypographyProps>`
     font-family: Inter;
-    color: ${({ color, theme, colorOverride }) =>
-        colorOverride?.startsWith('#') ? colorOverride : getPaletteColor(theme, color)};
+    color: ${({ color, colorOverride }) =>
+        colorOverride?.startsWith('#') ? colorOverride : paletteColor(color)};
     font-weight: ${({ weight = 'normal' }) => fontWeightMap[weight]};
     font-style: ${({ fontStyle }) => fontStyle};
     ${({ variant = 'h1' }) => variantStyles[variant]};

package/src/common/typography/index.ts

@@ -1,3 +1,3 @@
 export { default as NsTypography } from './NsTypography';
-export type { NsTypographyProps, Variants } from './types';
+export type { NsTypographyProps, Variants } from './types.d';
 export { default as GlobalFontInter } from './GlobalFontInter';

package/src/common/util.ts

@@ -0,0 +1 @@
+export const skipDarkModeEnabled = (key: string) => key !== 'darkModeEnabled';

package/src/common/utility/Show.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren, ReactElement } from 'react';
+
+type ShowType = PropsWithChildren & {
+    when?: boolean;
+    elseContent?: ReactElement;
+};
+const Show = ({ when, children, elseContent }: ShowType): ReactElement => {
+    if (when) {
+        return <>{children}</>;
+    }
+    return <>{elseContent}</>;
+};
+export default Show;

package/src/common/utility/index.ts

@@ -0,0 +1 @@
+export { default as Show } from './Show';

package/src/common/validations/regex.ts

@@ -0,0 +1,3 @@
+export const emailPattern =
+        // eslint-disable-next-line max-len
+        /^[\s]*[A-Za-z0-9!#$%&*+/=?^_`{|}~-]+(?:\.[A-Za-z0-9!#$%&*+/=?^_`{|}~-]+)*@(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?[\s]*$/;

package/src/common/videos/NsVideo.stories.tsx

@@ -7,14 +7,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { NsVideo } from '.';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsVideo;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsVideo',
+    title: 'Components/Data Display/NsVideo',
     component: NsVideo,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/videos/NsVideo.tsx

@@ -6,7 +6,7 @@
 
 import { PropsWithChildren } from 'react';
 
-import { NsVideoProps } from './types';
+import { NsVideoProps } from './types.d';
 
 const NsVideo = (props: PropsWithChildren<NsVideoProps>) => {
     const { src, title, width, height, allowFullScreen } = props;

package/src/common/videos/index.ts

@@ -1,2 +1,2 @@
 export { default as NsVideo } from './NsVideo';
-export type { NsVideoProps } from './types';
+export type { NsVideoProps } from './types.d';

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

@@ -1,4 +1,4 @@
-import { AdditionalProps } from '@/common/common.types';
+import { AdditionalProps } from '../common.types';
 
 export type NsVideoProps = {
     src: string;

package/src/common/alert/NsAlert.styled.ts

@@ -1,124 +0,0 @@
-/* eslint-disable max-len */
-import { styled, css } from '@nuskin/foundation-theme';
-import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
-import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
-
-import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types';
-const gutter_width=  '10px';
-const close_button_width = '12px';
-const icon_width = '24px';
-
-const TypeMap: TypeMapCSS = {
-    banner: {
-        'min-height' : '114px',
-        'padding' : '15px 45px',
-        'content-column-start': 'row-center',
-        'content-column-end': 'row-center',
-        'bar-position': 'top',
-        'foot-visibility': 'block'
-    },
-    card: {
-        'min-height' : '72px',
-        'padding' : '24px 24px',
-        'content-column-start': 'row-left',
-        'content-column-end': 'row-right',
-        'bar-position': 'left',
-        'foot-display': 'none',
-    }
-}
-
-const contextType = {
-    error: 'red',
-    info: 'info',
-    notice: 'info',
-    success: 'success',
-    warning: 'warning'
-}
-
-export const AlertContainer = styled.div<AlertContainerParams>`
-    display: ${({ visible }) => visible ? 'block' : 'none'};
-    * {
-        box-sizing: border-box;
-        webkit-font-smoothing: antialiased;
-    }
-    text-align: left;
-`;
-
-const fontFamilyStyles = css`
-  font-family: "proxima-nova", "OpenSans", "Pridi", "NotoSans", "NotoSansSC", "NotoSansHebrew",
-    "NotoSansJapanese", "Hiragino Kaku Gothic Pro", "Yu Gothic Medium", "Yu Gothic", Meiryo, "source-han-sans-japanese",
-    "source-han-sans-korean", "source-han-sans-simplified-c", Helvetica, Arial, sans-serif;
-`;
-
-export const Alert = styled.div<AlertParams>`
-    position: relative;
-    display: grid;
-    grid-template-columns: [row-left] ${icon_width} [space] ${gutter_width} [row-center] auto [space] ${gutter_width} [row-right] ${close_button_width};
-    grid-template-rows: [row1] auto;
-    grid-auto-row: auto;
-    grid-auto-flow: row;
-    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
-    border: 1px solid ${({ theme }) => getAppColor(theme, 'primary', 'black')};
-    min-height: ${({ type }) => TypeMap?.[type]?.['min-height']};
-    padding: ${({ type }) => TypeMap?.[type]?.['padding']};
-    color: ${({ context, theme }) => getAppColor(theme, contextType?.[context] as FoundationTheme.AppColors, '40')} };
-`;
-
-export const AlertCloseButton = styled.div`
-    grid-column-start: row-right;
-    grid-column-end: row-right;
-    grid-row-start: row1;
-    grid-row-end: row1;
-    align-self: center;
-    cursor: pointer;
-`;
-
-export const AlertIcon = styled.div`
-    grid-column-start: row-left;
-    grid-column-end: row-left;
-    grid-row-start: row1;
-    grid-row-end: row1;
-    width: ${icon_width};
-    height: ${icon_width};
-`;
-
-export const AlertHead = styled.div`
-    grid-column-start: row-center;
-    grid-column-end: row-center;
-    grid-row-start: row1;
-    grid-row-end: row1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    span {
-        ${fontFamilyStyles}
-        color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
-        font-weight: 600;
-        font-size: 18px;
-        line-height: 20px;
-    }
-`;
-
-export const AlertContent = styled.div<{type: AlertType}>`
-    margin-top: 8px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
-    grid-column-start: ${({ type }) => TypeMap?.[type]?.['content-column-start']}; 
-    grid-column-end: ${({ type }) => TypeMap?.[type]?.['content-column-end']};
-`;
-
-export const AlertFoot = styled.div<{type: AlertType}>`
-    margin-top: 8px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};;
-    display: ${({ type }) => TypeMap?.[type]?.['foot-display']};
-    ${fontFamilyStyles}
-    font-weight: 300;
-    font-size: 14px;
-    line-height: 18px;
-`;
-
-export const AlertBody = styled.div`
-    ${fontFamilyStyles}
-    font-weight: 300;
-    font-size: 16px;
-    line-height: 21px;
-`;

package/src/common/card/tests/NsFfgCard.spec.tsx

@@ -1,23 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import NsFfgCard from '../NsFfgCard';
-
-describe('NsFfgCard component', () => {
-    const props = {
-        topImageUrl: 'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
-        topImageAlt: 'alt-text',
-        text: 'card text',
-        actionLink: 'https://www.google.com',
-    };
-    it('renders with background image', () => {
-        render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card' }} />);
-        const card = screen.getByTestId('ffg-card');
-        expect(card).toHaveStyle(`
-    			background-color: #fff;
-    		`);
-    });
-    it('renders with cover size', () => {
-        render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card-1' }} actionText="Details" />);
-        const card = screen.getByText('Details');
-        expect(card).toBeInTheDocument();
-    });
-});

package/src/common/column-control/NDivs.story.tsx

@@ -1,35 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
-
-type DivArrayProps = {
-    elementsCount: number;
-};
-
-/**
- * this component return a fragment containing n number of div, with each div numbered as per its index
- * @param n: number of div to render
- * @returns
- */
-export const DivArray = ({ elementsCount }: DivArrayProps) => (
-    <>
-        {Array(elementsCount)
-            .fill(0)
-            .map((e, i) => (
-                <div key={i}>{i + 1}</div>
-            ))}
-    </>
-);
-type ComponentType = typeof DivArray;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/NsColumnControl/NDivs',
-    component: DivArray,
-    decorators: [withCenterDecorator],
-    args: {
-        n: 2,
-    },
-} as MetaStory;
-
-export const Basic: Story = {};

package/src/common/common.types.ts

@@ -1,10 +0,0 @@
-export type ContentStackLiveTags = {
-    'data-cslp'?: string;
-};
-
-export type AdditionalProps = {
-    additionalProps?: {
-        ariaLabel?: string;
-        testid?: string;
-    } & ContentStackLiveTags;
-};