@nuskin/foundation-ui-components 1.0.0-develop.1 → 1.0.0-develop.11

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;
-};