update some font weight related properties in typography components

sumup-oss · Oct 15, 2024 · 66737ca · 66737ca
1 parent 0fb5dc0
commit 66737ca
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 54 deletions.
diff --git a/.changeset/yellow-moose-push.md b/.changeset/yellow-moose-push.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/eslint-plugin-circuit-ui": major
+---
+
+Added a semibold weight option to the Body and the Compact components. Added the `weight` prop to the Display component. Removed the `weight` prop from the Numeral component and changed its default font weight to semibold.
diff --git a/packages/circuit-ui/components/Body/Body.mdx b/packages/circuit-ui/components/Body/Body.mdx
@@ -24,7 +24,7 @@ The Body component comes in three sizes. Use the default `m` size in most cases.
 
 ### Weights
 
-The Body component comes in two weights. Use the default `regular` weight in most cases. Use the `as` prop to render bold text with the `strong` HTML element if appropriate.
+The Body component comes in three weights. Use the default `regular` weight in most cases. Use the `as` prop to render bold text with the `strong` HTML element if appropriate.
 
 <Story of={Stories.Weights} />
 

diff --git a/packages/circuit-ui/components/Body/Body.module.css b/packages/circuit-ui/components/Body/Body.module.css
@@ -25,6 +25,10 @@
   font-weight: var(--cui-font-weight-regular);
 }
 
+.semibold {
+  font-weight: var(--cui-font-weight-semibold);
+}
+
 .bold {
   font-weight: var(--cui-font-weight-bold);
 }

diff --git a/packages/circuit-ui/components/Body/Body.stories.tsx b/packages/circuit-ui/components/Body/Body.stories.tsx
@@ -42,7 +42,7 @@ export const Sizes = (args: BodyProps) =>
     </Body>
   ));
 
-const weights = ['regular', 'bold'] as const;
+const weights = ['regular', 'semibold', 'bold'] as const;
 
 export const Weights = (args: BodyProps) =>
   weights.map((weight) => (

diff --git a/packages/circuit-ui/components/Body/Body.tsx b/packages/circuit-ui/components/Body/Body.tsx
@@ -40,12 +40,12 @@ export interface BodyProps extends HTMLAttributes<HTMLParagraphElement> {
      */
     | 'two';
   /**
-   * Choose from two font weights. Default: `regular`.
+   * Choose from three font weights. Default: `regular`.
    *
    * Use the `as` prop to render the component as the `strong` HTML element
    * if appropriate.
    */
-  weight?: 'regular' | 'bold';
+  weight?: 'regular' | 'semibold' | 'bold';
   /**
    * Choose a style or text decoration. Underline is reserved for hyperlinks.
    *

diff --git a/packages/circuit-ui/components/Compact/Compact.mdx b/packages/circuit-ui/components/Compact/Compact.mdx
@@ -24,7 +24,7 @@ The Compact component comes in three sizes. Use the default `m` size in most cas
 
 ### Weights
 
-The Compact component comes in two weights. Use the default `regular` weight in most cases.
+The Compact component comes in three weights. Use the default `regular` weight in most cases.
 
 <Story of={Stories.Weights} />
 

diff --git a/packages/circuit-ui/components/Compact/Compact.module.css b/packages/circuit-ui/components/Compact/Compact.module.css
@@ -25,6 +25,10 @@
   font-weight: var(--cui-font-weight-regular);
 }
 
+.semibold {
+  font-weight: var(--cui-font-weight-semibold);
+}
+
 .bold {
   font-weight: var(--cui-font-weight-bold);
 }

diff --git a/packages/circuit-ui/components/Compact/Compact.stories.tsx b/packages/circuit-ui/components/Compact/Compact.stories.tsx
@@ -41,7 +41,7 @@ export const Sizes = (args: CompactProps) =>
     </Compact>
   ));
 
-const weights = ['regular', 'bold'] as const;
+const weights = ['regular', 'semibold', 'bold'] as const;
 
 export const Weights = (args: CompactProps) =>
   weights.map((weight) => (

diff --git a/packages/circuit-ui/components/Compact/Compact.tsx b/packages/circuit-ui/components/Compact/Compact.tsx
@@ -26,9 +26,9 @@ export interface CompactProps extends HTMLAttributes<HTMLParagraphElement> {
    */
   size?: 's' | 'm' | 'l';
   /**
-   * Choose from two font weights. Default: `regular`.
+   * Choose from three font weights. Default: `regular`.
    */
-  weight?: 'regular' | 'bold';
+  weight?: 'regular' | 'semibold' | 'bold';
   /**
    * Choose a foreground color. Default: `normal`.
    */

diff --git a/packages/circuit-ui/components/Display/Display.mdx b/packages/circuit-ui/components/Display/Display.mdx
@@ -20,6 +20,12 @@ The Display component comes in three sizes. In most cases, use the [Headline com
 
 <Story of={Stories.Sizes} />
 
+### Weights
+
+The Display component comes in three weight. Use the default `bold` weight in most cases.
+
+<Story of={Stories.Weights} />
+
 ---
 
 ## Accessibility

diff --git a/packages/circuit-ui/components/Display/Display.module.css b/packages/circuit-ui/components/Display/Display.module.css
@@ -4,6 +4,20 @@
   letter-spacing: var(--cui-letter-spacing);
 }
 
+/* Weights */
+
+.regular {
+  font-weight: var(--cui-font-weight-regular);
+}
+
+.semibold {
+  font-weight: var(--cui-font-weight-semibold);
+}
+
+.bold {
+  font-weight: var(--cui-font-weight-bold);
+}
+
 /* Sizes */
 
 .l {

diff --git a/packages/circuit-ui/components/Display/Display.stories.tsx b/packages/circuit-ui/components/Display/Display.stories.tsx
@@ -40,3 +40,16 @@ export const Sizes = (args: DisplayProps) =>
 Sizes.args = {
   as: 'h1',
 };
+
+const weights = ['regular', 'semibold', 'bold'] as const;
+
+export const Weights = (args: DisplayProps) =>
+  weights.map((weight) => (
+    <Display key={weight} {...args} weight={weight}>
+      This is weight {weight}
+    </Display>
+  ));
+
+Weights.args = {
+  as: 'h1',
+};
diff --git a/packages/circuit-ui/components/Display/Display.tsx b/packages/circuit-ui/components/Display/Display.tsx
@@ -22,6 +22,10 @@ import { deprecate } from '../../util/logger.js';
 import classes from './Display.module.css';
 
 export interface DisplayProps extends HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * Choose from three font weights. Default: `regular`.
+   */
+  weight?: 'regular' | 'semibold' | 'bold';
   /**
    * Choose from 3 font sizes. Defaults to `m`.
    */
@@ -64,7 +68,10 @@ const deprecatedSizeMap: Record<string, string> = {
  * A flexible title component capable of rendering any HTML heading element.
  */
 export const Display = forwardRef<HTMLHeadingElement, DisplayProps>(
-  ({ className, as, size: legacySize = 'm', ...props }, ref) => {
+  (
+    { className, as, size: legacySize = 'm', weight = 'bold', ...props },
+    ref,
+  ) => {
     if (
       process.env.NODE_ENV !== 'production' &&
       process.env.NODE_ENV !== 'test' &&
@@ -94,7 +101,12 @@ export const Display = forwardRef<HTMLHeadingElement, DisplayProps>(
       <Element
         {...props}
         ref={ref}
-        className={clsx(classes.base, classes[size], className)}
+        className={clsx(
+          classes.base,
+          classes[size],
+          classes[weight],
+          className,
+        )}
       />
     );
   },

diff --git a/packages/circuit-ui/components/Numeral/Numeral.mdx b/packages/circuit-ui/components/Numeral/Numeral.mdx
@@ -22,12 +22,6 @@ The Numeral component comes in three sizes. Use the default `m` size in most cas
 
 <Story of={Stories.Sizes} />
 
-### Weights
-
-The Numeral component comes in two weights. Use the default `regular` weight in most cases.
-
-<Story of={Stories.Weights} />
-
 ### Colors
 
 The Numeral component accepts any foreground color. Use the default `normal` color in most cases.

diff --git a/packages/circuit-ui/components/Numeral/Numeral.module.css b/packages/circuit-ui/components/Numeral/Numeral.module.css
@@ -1,4 +1,5 @@
 .base {
+  font-weight: var(--cui-font-weight-semibold);
   font-variant-numeric: tabular-nums;
   letter-spacing: var(--cui-letter-spacing);
 }
@@ -20,16 +21,6 @@
   line-height: var(--cui-numeral-s-line-height);
 }
 
-/* Weights */
-
-.regular {
-  font-weight: var(--cui-font-weight-regular);
-}
-
-.bold {
-  font-weight: var(--cui-font-weight-bold);
-}
-
 /* Colors */
 
 .normal {

diff --git a/packages/circuit-ui/components/Numeral/Numeral.stories.tsx b/packages/circuit-ui/components/Numeral/Numeral.stories.tsx
@@ -40,15 +40,6 @@ export const Sizes = (args: NumeralProps) =>
     </Numeral>
   ));
 
-const weights = ['regular', 'bold'] as const;
-
-export const Weights = (args: NumeralProps) =>
-  weights.map((weight) => (
-    <Numeral key={weight} {...args} weight={weight}>
-      {content} in {weight} weight
-    </Numeral>
-  ));
-
 const colors = [
   'normal',
   'subtle',

diff --git a/packages/circuit-ui/components/Numeral/Numeral.tsx b/packages/circuit-ui/components/Numeral/Numeral.tsx
@@ -25,10 +25,6 @@ export interface NumeralProps extends HTMLAttributes<HTMLParagraphElement> {
    * Choose from 3 font sizes. Default `m`.
    */
   size?: 's' | 'm' | 'l';
-  /**
-   * Choose from two font weights. Default: `regular`.
-   */
-  weight?: 'regular' | 'bold';
   /**
    * Choose a foreground color. Default: `normal`.
    */
@@ -55,26 +51,13 @@ export interface NumeralProps extends HTMLAttributes<HTMLParagraphElement> {
  */
 export const Numeral = forwardRef<HTMLParagraphElement, NumeralProps>(
   (
-    {
-      className,
-      as: Element = 'p',
-      size = 'm',
-      weight = 'regular',
-      color = 'normal',
-      ...props
-    },
+    { className, as: Element = 'p', size = 'm', color = 'normal', ...props },
     ref,
   ) => (
     <Element
       {...props}
       ref={ref}
-      className={clsx(
-        classes.base,
-        classes[size],
-        classes[weight],
-        classes[color],
-        className,
-      )}
+      className={clsx(classes.base, classes[size], classes[color], className)}
     />
   ),
 );