Feature/pxweb2 155 use common text styles for bodylong and link (#108)

* PXWEB2-155 Moved text-styles to comm text-style file. Added property for classname * PXWEB2-155 Made separate classes for bold/regular. Easier to compare for designer. * PXWEB2-155 use common text-styles for link and use bodyshort as class in link as in Figma * PXWEB2-155 Removed commented out code * PXWEB2-155 Removed commented out text
PxTools · Apr 10, 2024 · 12bac58 · 12bac58
1 parent 7d21391
commit 12bac58
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 43 deletions.
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -1,4 +1,5 @@
 @use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixvar;
+@use '../../text-styles.scss';
 
 .link {
   text-decoration-line: underline;
@@ -51,19 +52,3 @@
   padding-top: 8px;
   padding-bottom: 8px;
 }
-
-.bodylong-small {
-  font-family: PxWeb-font-400;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.bodylong-medium {
-  font-family: PxWeb-font-400;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.75rem;
-}
diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.tsx b/libs/pxweb2-ui/src/lib/components/Link/Link.tsx
@@ -29,7 +29,7 @@ export function Link({
       className={cl(classes.link, {
         [classes.no_underline]: noUnderline,
         [classes.inline]: inline,
-        [classes[`bodylong-${size}`]]: size,
+        [classes[`bodyshort-${size}`]]: size,
         [classes[`padding-${size}`]]: size,
       })}
     >

diff --git a/libs/pxweb2-ui/src/lib/components/Typography/BodyLong/BodyLong.module.scss b/libs/pxweb2-ui/src/lib/components/Typography/BodyLong/BodyLong.module.scss
@@ -1,20 +1,12 @@
 @use '../../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixvar;
+@use '../../../text-styles.scss';
 
 .bodylong {
   font-style: normal;
   align-self: stretch;
   margin: 0;
 }
 
-.small {
-  font-size: 0.875rem;
-  line-height: 1.5rem; /* 171.429% */
-}
-.medium {
-  font-size: 1rem;
-  line-height: 1.75rem; /* 150% */
-}
-
 .small-spacing {
   margin-bottom: fixvar.$spacing-6;
 }
@@ -38,12 +30,3 @@
 .text-color-subtle {
   color: var(--px-color-text-subtle);
 }
-
-.font-weight-regular {
-  font-family: PxWeb-font-400;
-  font-weight: 400;
-}
-.font-weight-bold {
-  font-family: PxWeb-font-700;
-  font-weight: 700;
-}
diff --git a/libs/pxweb2-ui/src/lib/components/Typography/BodyLong/BodyLong.tsx b/libs/pxweb2-ui/src/lib/components/Typography/BodyLong/BodyLong.tsx
@@ -8,6 +8,7 @@ export interface BodyLongProps
   align?: 'start' | 'center' | 'end';
   textcolor?: 'default' | 'subtle';
   weight?: 'regular' | 'bold';
+  className?: string;
   children: React.ReactNode;
 }
 
@@ -18,18 +19,22 @@ export function BodyLong({
   textcolor = 'default',
   weight = 'regular',
   spacing = false,
+  className = '',
   ...rest
 }: BodyLongProps) {
+  const cssClasses = className.length > 0 ? ' ' + className : '';
+  const weightClassExtension = weight === 'regular' ? '' : '-' + weight;
   return (
     <p
-      className={cl(
-        classes.bodylong,
-        classes[size],
-        classes[`align-${align}`],
-        classes[`text-color-${textcolor}`],
-        classes[`font-weight-${weight}`],
-        cl({ [classes[`${size}-spacing`]]: spacing })
-      )}
+      className={
+        cl(
+          classes.bodylong,
+          classes[`align-${align}`],
+          classes[`text-color-${textcolor}`],
+          classes[`bodylong-${size}${weightClassExtension}`],
+          cl({ [classes[`${size}-spacing`]]: spacing })
+        ) + cssClasses
+      }
       {...rest}
     >
       {children}

diff --git a/libs/pxweb2-ui/src/lib/text-styles.scss b/libs/pxweb2-ui/src/lib/text-styles.scss
@@ -1,5 +1,6 @@
 @use '../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
 
+/* Label/Small */
 .label-small {
   font-family: PxWeb-font-500;
   font-style: normal;
@@ -8,6 +9,7 @@
   line-height: 1.25rem; /* 125% */
 }
 
+/* Label/Medium */
 .label-medium {
   font-family: PxWeb-font-500;
   font-style: normal;
@@ -16,6 +18,78 @@
   line-height: 1.5rem; /* 150% */
 }
 
+/* BodyLong/Medium */
+.bodylong-medium {
+  font-family: PxWeb-font-400;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.75rem; /* 175% */
+}
+
+/* BodyLong/Medium/strong */
+.bodylong-medium-bold {
+  font-family: PxWeb-font-700;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.75rem; /* 175% */
+}
+
+/* BodyLong/Small */
+.bodylong-small {
+  font-family: PxWeb-font-400;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem; /* 150% */
+}
+
+/* BodyLong/Small/strong */
+.bodylong-small-bold {
+  font-family: PxWeb-font-700;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem; /* 150% */
+}
+
+/* BodyShort/medium */
+.bodyshort-medium {
+  font-family: PxWeb-font-400;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem; /* 150% */
+}
+
+/* BodyShort/medium/strong */
+.bodyshort-medium-bold {
+  font-family: PxWeb-font-700;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight:700;
+  line-height: 1.5rem; /* 150% */
+}
+
+/* BodyShort/Small */
+.bodyshort-small {
+  font-family: PxWeb-font-400;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25rem; /* 125% */
+}
+
+/* BodyShort/Small/strong */
+.bodyshort-small-bold {
+  font-family: PxWeb-font-700;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.25rem; /* 125% */
+}
+
 /* Heading/Desktop/XSmall */
 .heading-xsmall {
   font-family: PxWeb-font-700;