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

package/src/common/image/NsNextImage.stories.tsx

@@ -1,5 +1,5 @@
 import { NsNextImage } from '.';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
 
 type ComponentType = typeof NsNextImage;
@@ -9,7 +9,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsNextImage',
     component: NsNextImage,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
 } as MetaStory;
 
 export const BrandImage: Story = {

package/src/common/image/NsNextImage.tsx

@@ -1,12 +1,8 @@
 import { NsNextImageProps } from './types';
-import { NsImage } from './';
+import Image from 'next/image';
+
 const NsNextImage = ({ src, width, height, alt, fill, priority, ...props }: NsNextImageProps) => {
-    try {
-        const Image = require('next/image');
-        return <Image src={src} width={width} height={height} alt={alt} fill={fill} priority={priority} {...props} />;
-    } catch {
-        return <NsImage src={src as any} width={width as any} height={height as any} alt={alt} {...props} />;
-    }
+    return <Image src={src} width={width} height={height} alt={alt} fill={fill} priority={priority} {...props} />;
 };
 
 export default NsNextImage;

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

@@ -15,13 +15,15 @@ export type NsNextImageProps = Pick<
     | 'blurDataURL'
     | 'fill'
     | 'unoptimized'
-> & {};
+> & { id?: string; className?: string };
 
 export type NsImageProps = {
-    src: string;
     alt: string;
-    width: number;
-    height: number;
+    className?: string;
     fill?: boolean;
+    height?: number | string;
+    id?: string;
+    src: string;
     variant?: 'product' | 'award' | 'icon' | 'fill';
+    width?: number | string;
 };

package/src/common/index.ts

@@ -1,21 +1,28 @@
-export * from './button';
-export * from './brand-components';
-export * from './checkbox';
-export * from './flag';
-export * from './link';
-export * from './nav-tab';
-export * from './nav-product-card';
+export * from './auth-dropdown';
 export * from './banner';
 export * from './breadcrumb';
-export * from './typography';
+export * from './brand-components';
+export * from './button';
 export * from './card';
 export * from './carousal';
 export * from './cart-icon';
+export * from './column-control';
+export * from './checkbox';
+export * from './dropdown';
+export * from './flag';
 export * from './icon';
 export * from './input';
 export * from './image';
+export * from './link';
 export * from './label';
+export * from './autocomplete';
 
 /* Dropdown Components */
 export * from './dropdown';
 export * from './auth-dropdown';
+export * from './alert';
+export * from './nav-tab';
+export * from './nav-product-card';
+export * from './typography';
+
+export * from './common.types';

package/src/common/input/InputWrapper.tsx

@@ -8,7 +8,7 @@ const options = {
     shouldForwardProp: (propKey: string) => propKey !== 'fieldState',
 };
 
-const getInputBorderColor = (fieldState: fieldStateType, isLight = true, palette: any): string => {
+const getInputBorderColor = (palette: any, fieldState: fieldStateType, isLight = true): string => {
     if (fieldState === 'success') {
         return isLight ? colors.success[40] : colors.success[40];
     } else if (fieldState === 'error') {
@@ -17,6 +17,7 @@ const getInputBorderColor = (fieldState: fieldStateType, isLight = true, palette
         return palette.primary.main;
     }
 };
+
 type InputWrapperType = {
     fieldState: fieldStateType;
 };
@@ -55,7 +56,7 @@ const InputWrapper = styled(
                     },
                 },
                 fieldset: {
-                    border: `1px solid ${getInputBorderColor(fieldState, isLight, palette as any)}`,
+                    border: `1px solid ${getInputBorderColor(palette as any, fieldState, isLight)}`,
                 },
                 input: {
                     color: palette.primary.main,

package/src/common/input/NsInputField.spec.tsx

@@ -1,10 +1,25 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import NsInputField from './NsInputField';
+import { nuskinTheme } from '@nuskin/foundation-theme';
+const { colors } = nuskinTheme;
 
+const { getByTestId } = screen;
 describe('NsInputField', () => {
     it('should render component', () => {
-        const { getByTestId } = render(<NsInputField fullWidth />);
+        render(<NsInputField fullWidth />);
         const Input = getByTestId('ns-input-field');
         expect(Input).toBeTruthy();
     });
+    it('should render component', () => {
+        render(<NsInputField fullWidth fieldState="error" />);
+        const Input = getByTestId('ns-input-field');
+        const fieldset = Input.querySelector('fieldset');
+        expect(fieldset).toHaveStyle(`border: 1px solid ${colors.red[20]}`);
+    });
+    it('should render component', () => {
+        render(<NsInputField fullWidth fieldState="success" />);
+        const Input = getByTestId('ns-input-field');
+        const fieldset = Input.querySelector('fieldset');
+        expect(fieldset).toHaveStyle(`border: 1px solid ${colors.success[40]}`);
+    });
 });

package/src/common/link/NsLink.spec.tsx

@@ -1,20 +1,27 @@
-/**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsLink.spec.tsx
- * @description In this example, we're using Jest to write a test case for our NsLink component.
- */
-
 import React from 'react';
+import { styled } from '@nuskin/foundation-theme';
 
 import { render } from '../../../test-utils/index';
 import { NsLink } from './';
 
-// Test suite for NsLink
+const CustomLink = styled.a`
+    color: red;
+    font-size: 30px;
+`;
 describe('Link', () => {
-    // Test cases go here
     test('renders default link', () => {
         const { getByText } = render(<NsLink href="https://example.com">Example</NsLink>);
         const linkElement = getByText('Example');
         expect(linkElement.tagName).toBe('A');
     });
+
+    test('passes href to custom component', () => {
+        const { getByText } = render(
+            <NsLink href="https://example.com" passHref prefetch>
+                <CustomLink>Example</CustomLink>
+            </NsLink>
+        );
+        const linkElement = getByText('Example');
+        expect(linkElement.tagName).toBe('A');
+    });
 });

package/src/common/link/NsLink.stories.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 
 import { NsLink } from './';
 import { NsTypography } from '../typography';
@@ -18,7 +18,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsLink',
     component: NsLink,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     argTypes: {
         children: {
             control: 'text',
@@ -41,3 +41,11 @@ export const Links: Story = {
         </NsTypography>
     ),
 };
+
+export const ReactComponentLink: Story = {
+    render: (args: any) => (
+        <NsLink {...args} href={args.href} passHref>
+            <NsTypography variant="sub-h-l">Test Link</NsTypography>
+        </NsLink>
+    ),
+};

package/src/common/link/NsLink.styled.tsx

@@ -16,7 +16,7 @@ type StyledProps = {
 
 /**
  * Wrapper StyledMUILink / StyledNextLink for NsLink.tsx
- * @params ( theme: { palette }) / Provide the color's to contaier from @nuskin/foundation-theme
+ * @params ( theme: { palette }) / Provide the color's to container from @nuskin/foundation-theme
  * @params ( disabled: boolean) / Element will be disable only when disabled is true
  */
 

package/src/common/link/NsLink.tsx

@@ -1,5 +1,4 @@
 /**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
  * @name NsLink.tsx
  * @description Exports one components - NsLink
  */
@@ -16,18 +15,41 @@ import { NsLinkProps } from './types';
  *
  */
 const NsLink = (props: PropsWithChildren<NsLinkProps>) => {
-    const { href, underlineOnHover, target, isSsr = false, additionalProps, children } = props;
+    const {
+        className,
+        href,
+        underlineOnHover,
+        target,
+        isSsr = false,
+        additionalProps,
+        children,
+        passHref,
+        prefetch,
+    } = props;
 
     if (isSsr) {
         return (
-            <StyledNextLink href={href} $underlineOnHover={underlineOnHover} {...additionalProps}>
+            <StyledNextLink
+                className={className}
+                href={href}
+                $underlineOnHover={underlineOnHover}
+                {...additionalProps}
+                passHref={passHref}
+                prefetch={prefetch}
+            >
                 {children}
             </StyledNextLink>
         );
     }
 
     return (
-        <StyledLink href={href} $underlineOnHover={underlineOnHover} target={target} {...additionalProps}>
+        <StyledLink
+            className={className}
+            href={href}
+            $underlineOnHover={underlineOnHover}
+            target={target}
+            {...additionalProps}
+        >
             {children}
         </StyledLink>
     );

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

@@ -1,16 +1,18 @@
 /**
  * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
  * @name types.tsx
- * @description Exports types for components - NsLink 
+ * @description Exports types for components - NsLink
  */
 import { AdditionalProps } from '../common.types';
 
-/** Props Types for NsLink Component */
 export type NsLinkProps = AdditionalProps & {
+    className?: string;
     href: string;
     // Used to enable the underline when hover the element
     underlineOnHover?: boolean;
     disabled?: boolean;
     target?: string;
     isSsr?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean;
 };

package/src/common/nav-product-card/NsNavProductCard.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 import { NsNavProductCard } from './';
 
 type ComponentType = typeof NsNavProductCard;
@@ -9,7 +9,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsNavProductCard',
     component: NsNavProductCard,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     args: {
         productDescription: `ageLOC LumiSpa iO pairs an intelligent,one-of-a-kind
     device that uses patented technology with powerful products. The results? You get the skin of your dreams.`,

package/src/common/nav-product-card/NsNavProductCard.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
 import React, { PropsWithChildren } from 'react';
-import { NsTypography } from '../';
+import { NsImage, NsTypography } from '../';
 import { ProductCardContainer } from './NsNavProductCard.styled';
 import { NsNavProductCardProps } from './types';
 
+/* TODO: can we update NsImage with NsNextImage, once storybook 7 is in place */
 export const NsNavProductCard = ({
     productImg,
     productDescription,
@@ -12,7 +13,7 @@ export const NsNavProductCard = ({
 }: PropsWithChildren<NsNavProductCardProps>) => {
     return (
         <ProductCardContainer className={className}>
-            <img src={productImg} alt="product-img" />
+            <NsImage src={productImg} alt="product-img" />
             <div className="text-container">
                 <NsTypography variant="h5" color="primary" className="mt-11 mb-3.5 underline-hover" weight="bold">
                     {productName}

package/src/common/nav-tab/NsNavTab.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 import { NsNavTab } from './';
 
 type ComponentType = typeof NsNavTab;
@@ -9,7 +9,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsNavTab',
     component: NsNavTab,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     argTypes: {
         tabs: { control: 'object' },
     },

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import NsVideo from './NsVideo';
+
+describe('IframeVideo', () => {
+    it('renders an Iframe with the correct props', () => {
+        const src = 'https://www.youtube.com/embed/12345';
+        const title = 'My Video';
+        const width = '560';
+        const height = '315';
+        const allowFullScreen = true;
+
+        const { getByTitle } = render(
+            <NsVideo src={src} title={title} width={width} height={height} allowFullScreen={allowFullScreen} />
+        );
+
+        const iframeElement = getByTitle(title);
+
+        expect(iframeElement).toBeInTheDocument();
+        expect(iframeElement).toHaveAttribute('src', src);
+        expect(iframeElement).toHaveAttribute('width', width);
+        expect(iframeElement).toHaveAttribute('height', height);
+        expect(iframeElement).toHaveAttribute('allowfullscreen');
+    });
+});

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

@@ -0,0 +1,32 @@
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsVideo.stories.tsx
+ * @description NsVideo component.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NsVideo } from '.';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsVideo;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/NsVideo',
+    component: NsVideo,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        allowFullScreen: { control: 'boolean' },
+    },
+    args: {
+        src: 'https://www.youtube.com/embed/UdpWdhi0pdI',
+        title: 'Nuskin Iframe',
+        width: '560',
+        height: '315',
+        allowFullScreen: true,
+    },
+} as MetaStory;
+
+export const Basic: Story = {};

package/src/common/videos/NsVideo.tsx

@@ -0,0 +1,25 @@
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsVideo.tsx
+ * @description NsVideo component with a Iframe video url props
+ */
+
+import { PropsWithChildren } from 'react';
+
+import { NsVideoProps } from './types';
+
+const NsVideo = (props: PropsWithChildren<NsVideoProps>) => {
+    const { src, title, width, height, allowFullScreen } = props;
+    return (
+        <iframe
+            title={title}
+            src={src}
+            width={width}
+            height={height}
+            allowFullScreen={allowFullScreen}
+            style={{ border: '0' }}
+        />
+    );
+};
+
+export default NsVideo;

package/src/common/videos/index.ts

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

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

@@ -0,0 +1,9 @@
+import { AdditionalProps } from '@/common/common.types';
+
+export type NsVideoProps = {
+    src: string;
+    title?: string;
+    width?: string;
+    height?: string;
+    allowFullScreen?: boolean;
+} & AdditionalProps;