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

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

@@ -0,0 +1,124 @@
+/* eslint-disable max-len */
+import { styled, css, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+
+const { color } = ColorUtils;
+
+import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types';
+const gutterWidth = '10px';
+const closeButtonWidth = '12px';
+const iconWidth = '24px';
+
+const TypeMap: TypeMapCSS = {
+    banner: {
+        minHeight: '114px',
+        padding: '15px 45px',
+        contentColumnStart: 'row-center',
+        contentColumnEnd: 'row-center',
+        barPosition: 'top',
+        footVisibility: 'block',
+    },
+    card: {
+        minHeight: '72px',
+        padding: '24px 24px',
+        contentColumnStart: 'row-left',
+        contentColumnEnd: 'row-right',
+        barPosition: 'left',
+        footDisplay: '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;
+`;
+//[Todo-Arun] - Fonts should be driven through @next/font and according to theme
+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] ${iconWidth} [space] ${gutterWidth} [row-center] auto [space] ${gutterWidth} [row-right] ${closeButtonWidth};
+    grid-template-rows: [row1] auto;
+    grid-auto-row: auto;
+    grid-auto-flow: row;
+    background-color: ${color('primary', 'white')};
+    border: 1px solid ${color('primary', 'black')};
+    min-height: ${({ type }) => TypeMap?.[type]?.minHeight};
+    padding: ${({ type }) => TypeMap?.[type]?.padding};
+    color: ${(props) => color(contextType?.[props?.context] as FoundationTheme.AppColors, '40')(props)} };
+`;
+
+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: ${iconWidth};
+    height: ${iconWidth};
+`;
+
+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: ${color('primary', 'black')};
+        font-weight: 600;
+        font-size: 18px;
+        line-height: 20px;
+    }
+`;
+
+export const AlertContent = styled.div<{ type: AlertType }>`
+    margin-top: 8px;
+    color: ${color('primary', 'black')};
+    grid-column-start: ${({ type }) => TypeMap?.[type]?.contentColumnStart};
+    grid-column-end: ${({ type }) => TypeMap?.[type]?.contentColumnEnd};
+`;
+
+export const AlertFoot = styled.div<{ type: AlertType }>`
+    margin-top: 8px;
+    color: ${color('primary', 'black')};
+    display: ${({ type }) => TypeMap?.[type]?.['footDisplay']};
+    ${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/alert/NsAlert.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable react/require-default-props */
 import React, { useEffect, useState } from 'react';
-import { 
+import {
     AlertContainer,
     Alert,
     AlertIcon,
@@ -8,146 +7,64 @@ import {
     AlertCloseButton,
     AlertContent,
     AlertFoot,
-    AlertBody
-} from './NsAlert.styled'
-import type { NsAlertProps, HeaderProps, ContextType, AlertType } from './types';
+    AlertBody,
+} from './NsAlert.styled';
+import type { NsAlertProps, ContextType, AlertType } from './types.d';
 import { NsIcon } from '../icon';
-import { NsIconNameType } from '../icon/types'
-import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
-
-const Header: React.FC<HeaderProps> = ({ children, head }) => (
-    <>
-        {children}
-        {head}
-    </>
-);
-
-function isValidContextValue(value: string): boolean {
-    return (value as ContextType) !== undefined;
-}
-
-function isValidTypeValue(value: string):boolean {
-    return (value as AlertType) !== undefined;
-}
-
-const colorMap:{ [key: string]: FoundationTheme.PaletteColors } = {
-    error: 'error',
-    notice: 'info',
-    success: 'secondary',
-    warning: 'warning',
-    default: 'info',
-};
-
-const iconMap:{ [key: string]: NsIconNameType } = {
-    error: 'alertError',
-    success: 'success',
-    warning: 'warning',
-    default: 'infoFilled',
-};
+import Header, { colorMap, iconMap } from './Header';
+import useWindowSize from '../hooks/useWindowSize';
 
 export default function NsAlert({
     context = 'info',
     title = 'Information',
-    threshhold = 600,
+    threshold = 600,
     type = 'banner',
     visible = false,
     head,
     body,
     foot,
-    onDismiss = undefined
+    onDismiss = undefined,
 }: NsAlertProps) {
     const [alertType, setAlertType] = useState('banner');
-    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+    const windowSize = useWindowSize();
 
     const hasDismissListener = typeof onDismiss === 'function';
 
-    const getColor = () => {
-        return colorMap[context] || colorMap.default;
-    };
-
-    const getIcon = () => {
-        return iconMap[context] || iconMap.default;
-    };
-
-    const getTitleText = () => {
-        if (title) {
-            return title;
-        }
-    };
-
-    const handleDismiss = () => {
-        if (hasDismissListener) {
-            onDismiss();
-        }
-    };
-
-    const handleResize = () => {
-        setWindowWidth(window.innerWidth);
-    };
-
-    useEffect(() => {
-        let aType = ''
-        if (type === 'auto') {
-            aType = windowWidth < threshhold ? 'card' : 'banner';
-        } else {
-            aType = type;
-        }
-        setAlertType(aType)
-    }, [threshhold, type, windowWidth])
-
     useEffect(() => {
-        if (!isValidContextValue(context)) {
+        if (!context) {
             console.error(`Invalid prop value for 'context': ${context}`);
         }
-
-        if (!isValidTypeValue(type)) {
+        if (!type) {
             console.error(`Invalid prop value for 'type': ${type}`);
         }
-    }, [context, type]);
-
-    useEffect(() => {
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
+        if (type === 'auto') {
+            setAlertType(windowSize.width < threshold ? 'card' : 'banner');
+        } else {
+            setAlertType(type);
+        }
+    }, [threshold, type, windowSize.width, context]);
 
     return (
         <AlertContainer visible={visible} data-testid="alert-container">
             <Alert type={alertType as AlertType} context={context as ContextType}>
                 <AlertIcon>
                     <NsIcon
-                        name={getIcon()}
-                        color={getColor()}
+                        name={iconMap[context] || iconMap.default}
+                        color={colorMap[context] || colorMap.default}
                         size="large"
                     />
                 </AlertIcon>
                 <AlertHead>
-                    <Header head={<span>{getTitleText()}</span>}>
-                        {head}
-                    </Header>
+                    <Header head={<span>{title}</span>}>{head}</Header>
                 </AlertHead>
-                {
-                    hasDismissListener ? (
-                        <AlertCloseButton data-testid="alert-close-button" onClick={handleDismiss}>
-                            <NsIcon
-                                name='close'
-                                size='small'
-                            />
-                        </AlertCloseButton>
-                    ) : null
-                }
+                {hasDismissListener && (
+                    <AlertCloseButton data-testid="alert-close-button" onClick={onDismiss}>
+                        <NsIcon name="close" size="small" />
+                    </AlertCloseButton>
+                )}
                 <AlertContent type={alertType as AlertType}>
-                    <AlertBody>
-                        {body}
-                    </AlertBody>
-                    {
-                        foot ?  (
-                            <AlertFoot type={alertType as AlertType}>
-                                {foot}
-                            </AlertFoot>
-                        ) : null
-                    }
+                    <AlertBody>{body}</AlertBody>
+                    {foot ? <AlertFoot type={alertType as AlertType}>{foot}</AlertFoot> : null}
                 </AlertContent>
             </Alert>
         </AlertContainer>

package/src/common/alert/index.ts

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

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

@@ -1,15 +1,15 @@
 import { ReactNode, CSSProperties } from 'react';
 
 export interface NsAlertProps {
-    context?: string,
-    title?: string,
-    threshhold?: number,
-    type?: string,
-    visible?: boolean,
-    head?: ReactNode,
-    body?: ReactNode,
-    onDismiss?: () => void,
-    foot?: ReactNode
+    context?: string;
+    title?: string;
+    threshold?: number;
+    type?: string;
+    visible?: boolean;
+    head?: ReactNode;
+    body?: ReactNode;
+    onDismiss?: () => void;
+    foot?: ReactNode;
 }
 
 export interface HeaderProps {
@@ -18,28 +18,28 @@ export interface HeaderProps {
 }
 
 export type AlertContainerParams = {
-    visible: boolean
+    visible: boolean;
 };
 
-export type ContextType = 'error' | 'info' | 'notice'| 'success' | 'warning';
+export type ContextType = 'error' | 'info' | 'notice' | 'success' | 'warning';
 export type AlertType = 'auto' | 'banner' | 'card';
 
 export type AlertParams = {
-    context: ContextType,
-    type: AlertType
-}
+    context: ContextType;
+    type: AlertType;
+};
 
 export type CustomCSSProperties = CSSProperties & {
-    'min-height'?: string;
-    'content-column-start'? : string;
-    'content-column-end'? : string;
-    'bar-position'? : string;
-    'foot-visibility'? : string;
-    'foot-display'? : string;
+    minHeight?: string;
+    contentColumnStart?: string;
+    contentColumnEnd?: string;
+    barPosition?: string;
+    footVisibility?: string;
+    footDisplay?: string;
 };
 
 export interface TypeMapCSS {
-    banner: CustomCSSProperties,
-    card: CustomCSSProperties,
-    auto?: CustomCSSProperties
+    banner: CustomCSSProperties;
+    card: CustomCSSProperties;
+    auto?: CustomCSSProperties;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, screen } from '../../../test-utils';
+import { render, fireEvent, screen } from '@/test-utils/index';
 import { NsAuthDropdown } from './';
 
 describe('NsAuthDropdown', () => {
@@ -10,27 +10,45 @@ describe('NsAuthDropdown', () => {
         signUpLinkText: 'Sign Up',
         signUpLinkPrefixText: 'Do not have an account?',
         titleText: 'Welcome',
-        closeOnMouseLeave: false,
     };
 
-    it('should render component with title text', () => {
+    it('1. should render component with title text', () => {
         render(<NsAuthDropdown {...props} />);
         expect(screen.getByText('Welcome')).toBeInTheDocument();
     });
 
-    it('should render the sign in button with text', () => {
+    it('2. 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');
+        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent(props.signInBtnText);
+        expect(screen.getByTestId('signup-link')).toHaveTextContent(props.signUpLinkText);
     });
 
-    it('should have the correct href attribute in SignUpLink', () => {
+    it('3. 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');
     });
+    it('4. should close dropdown on mouse leave', () => {
+        const { container } = render(<NsAuthDropdown {...props} closeOnMouseLeave={true} />);
+        const authHead = screen.getByTestId('auth-head');
+        fireEvent.click(authHead);
+        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
+        const wrapper = container.querySelector('.auth-wrapper');
+        if (wrapper) fireEvent.mouseLeave(wrapper);
+        expect(container.querySelector('.auth-wrapper')).toBeNull();
+    });
+    it('5. should not close dropdown on mouse leave', () => {
+        const { container } = render(<NsAuthDropdown {...props} closeOnMouseLeave={false} />);
+        const authHead = screen.getByTestId('auth-head');
+        fireEvent.click(authHead);
+        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
+        const wrapper = container.querySelector('.auth-wrapper');
+        if (wrapper) fireEvent.mouseLeave(wrapper);
+        expect(container.querySelector('.auth-wrapper')).not.toBeNull();
+    });
 });

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

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

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

@@ -1,8 +1,11 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
-const { getPaletteColor } = ColorUtils;
+import { DarkModeEnabledOption } from '../common.types';
+import { skipDarkModeEnabled } from '../util';
 
-const MAGENTA_COLOR = '#bb29bb';
+//[TODO-Arun] - Use from custom color variables
+// const MAGENTA_COLOR = '#bb29bb';
+
+const { color, paletteColor } = ColorUtils;
 
 export const AuthDropdownContainer = styled.div`
     position: relative;
@@ -19,7 +22,7 @@ export const AuthDropdown = styled.div`
     z-index: 600;
     top: calc(100% + 18px);
     right: 5%;
-    box-shadow: 0 0 5px 0 ${({ theme }) => getAppColor(theme, 'neutral', '20')};
+    box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     transition: all 0.15s ease-in-out;
     padding: 25px;
 `;
@@ -39,21 +42,23 @@ export const Triangle = styled.div`
         position: absolute;
         width: 14px;
         height: 14px;
-        background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+        background-color: ${color('primary', 'white')};
         transform: rotate(45deg);
         top: 17px;
         left: 5px;
-        box-shadow: 0 0 5px 0 ${({ theme }) => getAppColor(theme, 'neutral', '20')};
+        box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     }
 `;
-
-export const AuthHead = styled.div`
+const options = {
+    shouldForwardProp: skipDarkModeEnabled,
+};
+export const AuthHead = styled('div', options)<DarkModeEnabledOption>`
     cursor: pointer;
     padding: 5px 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    color: ${paletteColor('primary')};
 `;
 
 export const Button = styled.div`
@@ -68,18 +73,18 @@ export const SignInButton = styled(Link)`
     display: block;
     padding: 13px;
     width: 100%;
-    background-color: ${MAGENTA_COLOR};
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+    background-color: ${color('primary', 'black')};
+    color: ${color('primary', 'white')};
     border: 0;
     font-size: 16px;
     &:hover {
-        background-color: ${({ theme }) => getAppColor(theme, 'neutral', '70')};
+        background-color: ${color('neutral', '70')};
     }
 `;
 
 export const SignUpLinkContainer = styled.div`
     margin-top: 15px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'main')};
+    color: ${color('primary', 'black')};
     font-size: 13px;
     line-height: 16px;
     text-align: left;
@@ -91,11 +96,11 @@ export const SignUpLink = styled(Link)`
     font-size: 13px;
     line-height: 16px;
     text-decoration: none;
-    color: ${MAGENTA_COLOR};
+    color: ${color('primary', 'black')};
     position: relative;
     transition: all 0.15s ease-in-out;
     &:hover {
-        color: ${({ theme }) => getAppColor(theme, 'neutral', '70')};
+        color: ${color('neutral', '70')};
         font-size: 14px;
     }
     &:hover::after {
@@ -110,7 +115,7 @@ export const SignUpLink = styled(Link)`
         right: 0;
         width: 100%;
         height: 1px;
-        background-color: ${MAGENTA_COLOR};
+        background-color: ${color('primary', 'black')};
         transition: all 0.15s ease-in-out;
         opacity: 0;
         visibility: hidden;

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { NsIcon } from '../icon';
 import {
     AuthDropdownContainer,
@@ -10,7 +10,7 @@ import {
     SignUpLinkContainer,
     SignUpLink,
 } from './NsAuthDropdown.styled';
-import { NsAuthDropdownProps } from './types';
+import { NsAuthDropdownProps } from './types.d';
 
 const NsAuthDropdown = ({
     signInRedirectLink,
@@ -20,6 +20,7 @@ const NsAuthDropdown = ({
     signUpLinkPrefixText,
     titleText,
     closeOnMouseLeave = false,
+    darkModeEnabled = true,
 }: NsAuthDropdownProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
@@ -27,19 +28,19 @@ const NsAuthDropdown = ({
         setIsOpen((prevIsOpen) => !prevIsOpen);
     };
 
-    const closeDropdown = () => {
+    const closeDropdown = useCallback(() => {
         if (closeOnMouseLeave) {
             setIsOpen(false);
         }
-    };
+    }, [closeOnMouseLeave]);
 
     return (
         <AuthDropdownContainer>
-            <AuthHead data-testid="auth-head" onClick={handleToggle}>
+            <AuthHead data-testid="auth-head" onClick={handleToggle} darkModeEnabled={darkModeEnabled}>
                 <Button>{titleText}</Button>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
                 {isOpen ? (
-                    <div onMouseLeave={closeDropdown}>
+                    <div onMouseLeave={closeDropdown} className="auth-wrapper">
                         <Triangle />
                         <AuthDropdown>
                             <SignInButton href={signInRedirectLink} data-testid="sign-in-btn">

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

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

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

@@ -1,3 +1,5 @@
+import { AdditionalProps } from '../common.types';
+
 export type NsAuthDropdownProps = {
     signInRedirectLink: string;
     signUpRedirectLink: string;
@@ -6,4 +8,4 @@ export type NsAuthDropdownProps = {
     signUpLinkPrefixText: string;
     titleText: string;
     closeOnMouseLeave?: boolean;
-};
+} & AdditionalProps;