@nuskin/foundation-ui-components 1.14.0 → 1.16.0-cx130-990.1

package/README.md

@@ -1,39 +1,122 @@
+<div align="right">
+<a href='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/badges/master/pipeline.svg'><img src='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/badges/master/pipeline.svg' alt='Pipeline Badge' /></a>
+<a href='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/badges/release.svg'><img src='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/badges/release.svg' alt='Latest Release Badge' /></a>
+<a href='https://img.shields.io/npm/dt/%40nuskin/foundation-ui-components'><img src='https://img.shields.io/npm/dt/%40nuskin/foundation-ui-components' alt='Downloads Badge' /></a>
+</div>
+
 # @nuskin/foundation-ui-components
 
-This is a library that contains react components used in NuSkin Pages
+This comprehensive library houses a collection of reusable React components specifically designed for NuSkin Pages. These components are meticulously crafted to ensure consistent UI/UX across all NuSkin digital properties, fostering a seamless user experience.
+
+## Releases
+
+### [CHANGELOG](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/blob/master/CHANGELOG.md)
+
+## Installation Guide
+
+To integrate the NuSkin React Components Library into your NuSkin Pages project, follow these steps:
+
+### Clone the repository to your local machine
+
+```shell
+git clone git@code.tls.nuskin.io:ns-am/content-foundation/foundation-ui-components.git
+```
 
-## Installing
+## Running the project
 
-Usng npm:
+### Run the main application using yarn
 
-```bash
-npm add @nuskin/foundation-ui-components
+```shell
+yarn dev
 ```
 
-Usng yarn:
+### Storybook
+
+See how React components look and behave in isolation using Storybook. To get started, follow these steps:
 
-```bash
-yarn add @nuskin/foundation-ui-components
+#### Run storybook using yarn.
+
+```shell
+yarn storybook
 ```
 
-## Example usage
+#### To view the Storybook, use the following URLs
+
+| Environment | URL                                                     |
+| ----------- | ------------------------------------------------------- |
+| Local       | http://localhost:6007                                   |
+| Test        | https://test.nuskin.com/static/foundation-ui-components |
 
-```ts
-import { Button } from "@nuskin/foundation-ui-components";
+## Usage
 
+The following example illustrates how to use this project
+
+```shell
+import { NsButton } from '@nuskin/foundation-ui-components';
 const Page = () => {
   return (
-    <Button variant="contained" color="primary">
+    <NsButton variant="contained" color="primary">
       Sample
-    </Button>
+    </NsButton>
   );
 };
 ```
 
-## Resources
+## Dependencies
+
+This project relies on the following dependencies:
+
+**Emotion UI Libraries**
+
+-   `@emotion/react@^11.11.1`
+-   `@emotion/styled@^11.11.0`
+
+**Material-UI Libraries**
+
+-   `@mui/material@5.14.16`
+-   `@mui/icons-material@^5.14.16`
+-   `@mui/utils@^5.14.16`
+
+**NuSkin Foundation Theme**
+
+-   `@nuskin/foundation-theme@1.2.0`
+
+**Carousel Libraries**
+
+-   `react-material-ui-carousel@^3.4.2`
+-   `react-slick@^0.29.0`
+-   `slick-carousel@^1.8.1`
+
+**Other Libraries**
+
+-   `cliui@^8.0.1`
+-   `framer-motion@^10.16.4`
+
+## Testing
+
+We use Jest for testing our project. Below are the available test scripts:
+
+-   Run all tests and generate coverage report:\*\*
+    ```bash
+    yarn test
+    ```
+-   Run tests for a specific pattern (e.g., accordion/\*):
+    ```bash
+    yarn run test:pattern
+    ```
+-   Run only failed tests from the last test run:
+    ```bash
+    yarn run test:failed
+    ```
+-   Generate and view code coverage report:
+
+    ```bash
+    yarn run test:coverage
+    ```
 
-- 0.1.0 - Initial commit
+-   The yarn test script builds the project using Next.js before running Jest tests.
+-   Feel free to customize the test patterns or add additional options as needed.
 
-## License
+### Coverage Report:
 
-[MIT](https://opensource.org/licenses/MIT)
+After running tests, open the `index.html` file in the `coverage` directory to view the coverage report.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.14.0",
+    "version": "1.16.0-cx130-990.1",
     "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.2.0",
+        "@nuskin/foundation-theme": "1.3.0-cx130-596.3",
         "@types/react": "^18.2.34",
         "@types/react-dom": "^18.2.14",
         "cliui": "^8.0.1",

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

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import { styled, css, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 
 const { color } = ColorUtils;
 
@@ -43,12 +43,6 @@ export const AlertContainer = styled.div<AlertContainerParams>`
     }
     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;
@@ -90,12 +84,8 @@ export const AlertHead = styled.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
-    span {
-        ${fontFamilyStyles}
+    .alert-head-title {
         color: ${color('primary', 'black')};
-        font-weight: 600;
-        font-size: 18px;
-        line-height: 20px;
     }
 `;
 
@@ -110,14 +100,14 @@ export const AlertFoot = styled.div<{ type: AlertType }>`
     margin-top: 8px;
     color: ${color('primary', 'black')};
     display: ${({ type }) => TypeMap?.[type]?.['footDisplay']};
-    ${fontFamilyStyles}
+    font-family: ${({ theme }) => theme?.fonts?.sectionFonts?.body};
     font-weight: 300;
     font-size: 14px;
     line-height: 18px;
 `;
 
 export const AlertBody = styled.div`
-    ${fontFamilyStyles}
+    font-family: ${({ theme }) => theme?.fonts?.sectionFonts?.body};
     font-weight: 300;
     font-size: 16px;
     line-height: 21px;

package/src/common/alert/NsAlert.tsx

@@ -15,6 +15,7 @@ import type { NsAlertProps, ContextType, AlertType } from './types.d';
 import { NsIcon } from '../icon';
 import Header, { colorMap, iconMap } from './Header';
 import useWindowSize from '../hooks/useWindowSize';
+import { NsTypography } from '../typography';
 
 export default function NsAlert({
     context = 'info',
@@ -57,7 +58,11 @@ export default function NsAlert({
                     />
                 </AlertIcon>
                 <AlertHead>
-                    <Header head={<span>{title}</span>}>{head}</Header>
+                    <Header head={
+                        <NsTypography variant="body-xl" className='alert-head-title' weight="bold" noSpacing>
+                            {title}
+                        </NsTypography>
+                    }>{head}</Header>
                 </AlertHead>
                 {hasDismissListener && (
                     <AlertCloseButton data-testid="alert-close-button" onClick={onDismiss}>

package/src/common/card/CardButton.tsx

@@ -1,7 +1,4 @@
-import {
-    NsButton,
-    NsIcon,
-} from '../';
+import { NsButton, NsIcon } from '../';
 import { NsCardButton } from './types';
 
 const CardButton = ({
@@ -12,6 +9,7 @@ const CardButton = ({
     buttonVariant = 'outlined',
     buttonColor = 'primary',
     fullWidth = false,
+    showArrowWithText = false,
 }: NsCardButton) => {
     if (showButton && url) {
         return (
@@ -22,7 +20,7 @@ const CardButton = ({
                     variant={buttonVariant}
                     fullWidth={fullWidth}
                     endIcon={
-                        buttonVariant === 'text' ? (
+                        showArrowWithText && buttonVariant === 'text' ? (
                             <NsIcon name="arrowRight" size="small" color="primary" />
                         ) : endIcon ? (
                             <NsIcon name={endIcon} color={buttonColor} />

package/src/common/card/NsMediumCard.tsx

@@ -14,6 +14,7 @@ type NsMediumCardProps = {
     button?: NsCardButton;
     className?: string;
     fluid?: boolean;
+    showArrowWithButtonText?: boolean;
 };
 const textVariantButton = {
     padding: '0 0 4px',
@@ -76,6 +77,7 @@ export default function NsMediumCard({
     button,
     className,
     fluid,
+    showArrowWithButtonText = false,
 }: NsMediumCardProps) {
     return (
         <CardContainer
@@ -92,7 +94,7 @@ export default function NsMediumCard({
                     {title}
                 </NsTypography>
                 <article className="subtitle">{subtitle}</article>
-                {button ? <CardButton {...button} /> : null}
+                {button ? <CardButton {...button} showArrowWithText={showArrowWithButtonText} /> : null}
             </div>
         </CardContainer>
     );

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

@@ -21,4 +21,5 @@ export type NsCardButton = {
     buttonText: string;
     buttonVariant?: 'text' | 'outlined' | 'contained';
     buttonColor?: 'secondary' | 'primary';
+    showArrowWithText?: boolean;
 };

package/src/common/typography/GlobalFontInter.tsx

@@ -4,9 +4,6 @@ const GlobalFontInter = () => (
     <GlobalStyles
         styles={css`
             @import url('https://fonts.googleapis.com/css2?family=Inter');
-            body {
-                font-family: 'Inter', sans-serif;
-            }
         `}
     />
 );

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

@@ -24,7 +24,7 @@ describe('GlobalFontInter', () => {
                 weight="bold"
                 className="mt-2"
                 decoration="underline"
-                fontStyle="italic"
+                
                 color="primary"
             >
                 {text}
@@ -41,7 +41,6 @@ describe('GlobalFontInter', () => {
                 weight="bold"
                 className="mt-2"
                 decoration="underline"
-                fontStyle="italic"
                 color="accentColorA"
             >
                 {text}

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

@@ -1,125 +1,153 @@
-import { styled, ColorUtils } from '@nuskin/foundation-theme';
+import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 import { NsTypographyProps } from './types.d';
 
 const { paletteColor } = ColorUtils;
 
-const variantStyles = {
+type TypographyConfig = {
+    fontFamily: string;
+    fontSize?: number;
+    lineHeight?: number;
+    letterSpacingPercentage?: number;
+    paragraphSpacing?: number;
+    fontWeight?: number;
+};
+
+const defaultFont = 'Roboto';
+const defaultTypographyStyles = {
     h1: {
-        'font-size': '42px',
-        'line-height': '48px',
-        'letter-spacing': '0px',
-        margin: '0px',
+        fontFamily: defaultFont,
+        fontSize: 42,
+        lineHeight: 48,
+        letterSpacingPercentage: 0,
+        paragraphSpacing: 0,
     },
     h2: {
-        'font-size': '36px',
-        'line-height': '42px',
-        'letter-spacing': '0px',
-        margin: '0px',
+        fontFamily: defaultFont,
+        fontSize: 36,
+        lineHeight: 42,
+        letterSpacingPercentage: 0,
+        paragraphSpacing: 0,
     },
     h3: {
-        'font-size': '32px',
-        'line-height': '38px',
-        'letter-spacing': '0px',
-        margin: '0px',
+        fontFamily: defaultFont,
+        fontSize: 32,
+        lineHeight: 38,
+        letterSpacingPercentage: 0,
+        paragraphSpacing: 0,
     },
     h4: {
-        'font-size': '26px',
-        'line-height': '34px',
-        'letter-spacing': '0px',
-        margin: '0px',
+        fontFamily: defaultFont,
+        fontSize: 26,
+        lineHeight: 34,
+        letterSpacingPercentage: 0,
+        paragraphSpacing: 0,
     },
     h5: {
-        'font-size': '22px',
-        'line-height': '28px',
-        'letter-spacing': '0px',
-        'font-weight': '700',
-        margin: '0px',
+        fontFamily: defaultFont,
+        fontSize: 22,
+        lineHeight: 28,
+        letterSpacingPercentage: 0,
+        fontWeight: 700,
+        paragraphSpacing: 0,
     },
     h6: {
-        'font-size': '18px',
-        'line-height': '24px',
-        'letter-spacing': '0px',
-        'font-weight': '600',
-        margin: '0px',
+        fontFamily: defaultFont,
+        fontSize: 18,
+        lineHeight: 24,
+        letterSpacingPercentage: 0,
+        fontWeight: 600,
+        paragraphSpacing: 0,
     },
     'title-l': {
-        'font-size': '22px',
-        'line-height': '28px',
-        'letter-spacing': '2px',
-        'font-weight': '700',
-        margin: '0px',
+        fontFamily: defaultFont,
+        fontSize: 22,
+        lineHeight: 28,
+        letterSpacingPercentage: 2,
+        fontWeight: 700,
+        paragraphSpacing: 0,
     },
     'title-m': {
-        'font-size': '16px',
-        'line-height': '20px',
-        'letter-spacing': '4px',
-        'font-weight': '700',
-        margin: '0px',
+        fontFamily: defaultFont,
+        fontSize: 16,
+        lineHeight: 20,
+        letterSpacingPercentage: 4,
+        fontWeight: 700,
+        paragraphSpacing: 0,
     },
     'title-s': {
-        'font-size': '16px',
-        'line-height': '16px',
-        'letter-spacing': '4px',
-        'font-weight': '700',
-        margin: '0px',
+        fontFamily: defaultFont,
+        fontSize: 16,
+        lineHeight: 16,
+        letterSpacingPercentage: 4,
+        fontWeight: 700,
+        paragraphSpacing: 0,
     },
     'label-l': {
-        'font-size': '20px',
-        'line-height': '26px',
-        'letter-spacing': '0px',
-        'font-weight': '600',
-        margin: '8px',
+        fontFamily: defaultFont,
+        fontSize: 20,
+        lineHeight: 26,
+        letterSpacingPercentage: 0,
+        fontWeight: 600,
+        paragraphSpacing: 8,
     },
     'label-m': {
-        'font-size': '16px',
-        'line-height': '22px',
-        'letter-spacing': '0px',
-        'font-weight': '600',
-        margin: '8px',
+        fontFamily: defaultFont,
+        fontSize: 16,
+        lineHeight: 22,
+        letterSpacingPercentage: 0,
+        fontWeight: 600,
+        paragraphSpacing: 8,
     },
     'label-s': {
-        'font-size': '14px',
-        'line-height': '20px',
-        'letter-spacing': '0px',
-        'font-weight': '700',
-        margin: '6px',
+        fontFamily: defaultFont,
+        fontSize: 14,
+        lineHeight: 20,
+        letterSpacingPercentage: 0,
+        fontWeight: 700,
+        paragraphSpacing: 6,
     },
     'body-xl': {
-        'font-size': '18px',
-        'line-height': '22px',
-        'letter-spacing': '0px',
-        margin: '22px',
+        fontFamily: defaultFont,
+        fontSize: 18,
+        lineHeight: 22,
+        letterSpacingPercentage: 0,
+        paragraphSpacing: 22,
     },
     'body-l': {
-        'font-size': '16px',
-        'line-height': '22px',
-        'letter-spacing': '0px',
-        margin: '20px',
+        fontFamily: defaultFont,
+        fontSize: 16,
+        lineHeight: 22,
+        letterSpacingPercentage: 0,
+        paragraphSpacing: 20,
     },
     'body-m': {
-        'font-size': '14px',
-        'line-height': '20px',
-        'letter-spacing': '0px',
-        margin: '18px',
+        fontFamily: defaultFont,
+        fontSize: 14,
+        lineHeight: 20,
+        letterSpacingPercentage: 0,
+        paragraphSpacing: 18,
     },
     'body-s': {
-        'font-size': '12px',
-        'line-height': '16px',
-        'letter-spacing': '1px',
-        margin: '16px',
+        fontFamily: defaultFont,
+        fontSize: 12,
+        lineHeight: 16,
+        letterSpacingPercentage: 1,
+        paragraphSpacing: 16,
     },
     'body-xs': {
-        'font-size': '10px',
-        'line-height': '14px',
-        'letter-spacing': '2px',
-        margin: '14px',
+        fontFamily: defaultFont,
+        fontSize: 10,
+        lineHeight: 14,
+        letterSpacingPercentage: 2,
+        paragraphSpacing: 14,
     },
     CTA: {
-        'font-size': '14px',
-        'line-height': '20px',
-        'letter-spacing': '0.14px',
-        'font-weight': '600',
-        margin: '0px',
+        fontFamily: defaultFont,
+        fontSize: 14,
+        lineHeight: 20,
+        letterSpacingPercentage: 0.14,
+        fontWeight: 600,
+        paragraphSpacing: 0,
     },
 };
 
@@ -129,17 +157,37 @@ const fontWeightMap = {
     bold: 600,
 };
 
+const getVariantStyle = (
+    themeTypographyVariants: Record<FoundationTheme.TypographyVariants, TypographyConfig>,
+    variant: FoundationTheme.TypographyVariants
+) => {
+    const variantStyles = themeTypographyVariants[variant as FoundationTheme.TypographyVariants];
+    if (variantStyles) {
+        return variantStyles;
+    }
+    return defaultTypographyStyles[variant as FoundationTheme.TypographyVariants];
+};
+
 export const StyledTypography = styled('div')<NsTypographyProps>(
-    ({ theme, weight = 'normal', variant = 'h1', noSpacing, decoration, color, colorOverride }) => {
-        const fontStyles = variantStyles[variant];
+    ({ theme, weight, variant, noSpacing, decoration, color, colorOverride }) => {
+        const fontStyles: TypographyConfig = getVariantStyle(theme.fonts.typographyVariants, variant) || {};
         if (noSpacing) {
-            fontStyles.margin = '0px';
+            fontStyles.paragraphSpacing = 0;
+        }
+        if (weight) {
+            fontStyles.fontWeight = fontWeightMap[weight] || fontWeightMap.normal;
         }
+        const updatedFontStyle = {
+            fontFamily: fontStyles?.fontFamily || defaultFont,
+            fontSize: `${fontStyles?.fontSize || 16}px`,
+            lineHeight: `${fontStyles?.lineHeight || 16}px`,
+            margin: fontStyles?.paragraphSpacing || 0,
+            fontWeight: fontStyles?.fontWeight || 400,
+            letterSpacing: fontStyles?.letterSpacingPercentage || 0,
+        };
         return {
-            ...fontStyles,
-            fontFamily: 'Inter',
+            ...updatedFontStyle,
             textDecorationLine: decoration,
-            fontWeight: fontWeightMap[weight],
             color: colorOverride?.startsWith('#') ? colorOverride : paletteColor(color)({ theme }),
         };
     }