From 12bac586893539f036eee653c761f65fad24cc17 Mon Sep 17 00:00:00 2001 From: PerIngeVaaje <60141320+PerIngeVaaje@users.noreply.github.com> Date: Wed, 10 Apr 2024 15:04:33 +0200 Subject: [PATCH] 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 --- .../src/lib/components/Link/Link.module.scss | 17 +---- .../src/lib/components/Link/Link.tsx | 2 +- .../Typography/BodyLong/BodyLong.module.scss | 19 +---- .../Typography/BodyLong/BodyLong.tsx | 21 ++++-- libs/pxweb2-ui/src/lib/text-styles.scss | 74 +++++++++++++++++++ 5 files changed, 90 insertions(+), 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 index 1b26eac0..56873e4b 100644 --- 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 index d4d282b2..b26cf313 100644 --- 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 index 7190e683..2815e4c5 100644 --- 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,4 +1,5 @@ @use '../../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixvar; +@use '../../../text-styles.scss'; .bodylong { font-style: normal; @@ -6,15 +7,6 @@ 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 index 7e01c668..f2748baa 100644 --- 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 (

{children} diff --git a/libs/pxweb2-ui/src/lib/text-styles.scss b/libs/pxweb2-ui/src/lib/text-styles.scss index cc15a055..1cc9f7b6 100644 --- 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;