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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.15.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/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 }),
         };
     }