@nuskin/foundation-ui-components 1.11.0 → 1.12.0-911-v1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.11.0",
+    "version": "1.12.0-911-v1.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/typography/NsTypography.tsx

@@ -12,12 +12,14 @@ const NsTypography = ({
     color = 'primary',
     additionalProps = {},
     colorOverride = '',
+    noSpacing = false,
     renderHTMLNode,
 }: PropsWithChildren<NsTypographyProps>) => {
     const htmlTagVariant: HtmlTagVariant | undefined = renderHTMLNode ? HtmlTagVariantMapping[variant] : undefined;
 
     return (
         <StyledTypography
+            noSpacing={noSpacing}
             as={htmlTagVariant}
             className={className}
             weight={weight}

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

@@ -129,10 +129,18 @@ const fontWeightMap = {
     bold: 600,
 };
 
-export const StyledTypography = styled.div<NsTypographyProps>`
-    font-family: Inter;
-    color: ${({ color, colorOverride }) => (colorOverride?.startsWith('#') ? colorOverride : paletteColor(color))};
-    font-weight: ${({ weight = 'normal' }) => fontWeightMap[weight]};
-    ${({ variant = 'h1' }) => variantStyles[variant]};
-    text-decoration-line: ${({ decoration }) => decoration};
-`;
+export const StyledTypography = styled('div')<NsTypographyProps>(
+    ({ theme, weight = 'normal', variant = 'h1', noSpacing, decoration, color, colorOverride }) => {
+        const fontStyles = variantStyles[variant];
+        if (noSpacing) {
+            fontStyles.margin = '0px';
+        }
+        return {
+            ...fontStyles,
+            fontFamily: 'Inter',
+            textDecorationLine: decoration,
+            fontWeight: fontWeightMap[weight],
+            color: colorOverride?.startsWith('#') ? colorOverride : paletteColor(color)({ theme }),
+        };
+    }
+);

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

@@ -33,4 +33,5 @@ export type NsTypographyProps = {
     className?: string;
     colorOverride?: string;
     renderHTMLNode?: boolean;
+    noSpacing?:boolean;
 } & AdditionalProps;