renamed onGrid to baseline, add monoSpacedNumbers

Author: oddvernes

packages/eds-core-react/src/components/Typography/Text/Text.stories.tsx

@@ -108,10 +108,10 @@ export const Demo: StoryFn<TextProps> = () => {
         A heading
       </Text>
       <Text>
-        <b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit, sed do
-        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
-        ex ea commodo consequat.
+        <b>Lorem ipsum dolor sit amet</b>, 0123456789 consectetur adipiscing
+        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+        ut aliquip ex ea commodo consequat.
       </Text>
       <Text as="a" href="#q">
         As a link
@@ -130,6 +130,16 @@ export const Demo: StoryFn<TextProps> = () => {
         dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </Text>
+      <Text>
+        <b>Normal numbers</b>
+      </Text>
+      <Text size="3xl">0123456789</Text>
+      <Text>
+        <b>Monospaced numbers</b>
+      </Text>
+      <Text size="3xl" monoSpacedNumbers>
+        0123456789
+      </Text>
     </>
   )
 }

packages/eds-core-react/src/components/Typography/Text/Text.tsx

@@ -7,17 +7,19 @@ export type TextProps = TypographyProps & {
   /** When true, text is pushed to the bottom of its text-box (making it "on grid" as the total heigth is rounded to a multiple of 4px), when false it is centered within the text-box. Only works when variant is "ui"
    * @default false
    */
-  onGrid?: boolean
-  /** header: uses the "equinor" typeface. Please use the "as" prop to assign the correct header level when variant is header. Always "on grid"
-   * body: uses "inter" typeface. Is always "on grid"
-   * ui: uses inter typeface. For use in ui components such as buttons, tabs, chips etc. Unlocks "onGrid" prop which is false by default to center text vertically.
+  baselined?: boolean
+  /** header: uses the "equinor" typeface. Please use the "as" prop to assign the correct header level when variant is header. Always "baselined"
+   * body: uses "inter" typeface. Is always "baselined"
+   * ui: uses inter typeface. For use in ui components such as buttons, tabs, chips etc. Unlocks "baselined" prop which is false by default to center text vertically.
    * @default 'body'
    */
   variant?: 'ui' | 'body' | 'header'
+  monoSpacedNumbers?: boolean
   as?: ElementType
 }
 const INTER_VERTICAL_OFFSET = 0.002
 const EQUINOR_VERTICAL_OFFSET = 0.06
+//prominence/color
 
 export const Text: OverridableComponent<TextProps, HTMLElement> = forwardRef(
   function Text(
@@ -27,10 +29,11 @@ export const Text: OverridableComponent<TextProps, HTMLElement> = forwardRef(
       fontWeight = 'normal',
       letterSpacing = 'normal',
       variant = 'body',
+      monoSpacedNumbers,
       lines,
       color,
       as,
-      onGrid = false,
+      baselined = false,
       children,
       ...rest
     },
@@ -40,7 +43,7 @@ export const Text: OverridableComponent<TextProps, HTMLElement> = forwardRef(
       variant === 'header' ? variant : 'ui-body'
     const offset =
       variant === 'header' ? EQUINOR_VERTICAL_OFFSET : INTER_VERTICAL_OFFSET
-    const gridOn = variant === 'ui' ? onGrid : true
+    const gridOn = variant === 'ui' ? baselined : true
     return (
       <Typography
         ref={ref}
@@ -53,6 +56,7 @@ export const Text: OverridableComponent<TextProps, HTMLElement> = forwardRef(
         $lines={lines}
         $fontWeight={fontWeight}
         $letterSpacing={letterSpacing}
+        $monoSpacedNumbers={monoSpacedNumbers}
         $onGrid={gridOn}
         {...rest}
       >

packages/eds-core-react/src/components/Typography/_components/Typography.tsx

@@ -14,6 +14,7 @@ export type StyleHeadingProps = {
   $lineHeight: TypographyLineHeight
   $fontWeight: TypographyFontWeight
   $letterSpacing: TypographyLetterSpacing
+  $monoSpacedNumbers?: boolean
   $offset?: number
   $onGrid?: boolean
   $color?: string
@@ -28,6 +29,7 @@ export const Typography = styled.p<StyleHeadingProps>`
     $lineHeight,
     $fontWeight,
     $letterSpacing,
+    $monoSpacedNumbers,
     $offset = 0,
     $onGrid = true,
     $color,
@@ -51,6 +53,7 @@ export const Typography = styled.p<StyleHeadingProps>`
     line-height: ${`var(--eds-typography-${$type}-${$size}-lineheight-${$lineHeight})`};
     font-weight: ${`var(--eds-typography-${$type}-${$size}-font-weight-${$fontWeight})`};
     letter-spacing: ${`var(--eds-typography-${$type}-${$size}-tracking-${$letterSpacing})`};
+    font-variant-numeric: ${$monoSpacedNumbers ? 'tabular-nums' : 'normal'};
     /*TODO: determine if --override-text-color/link-color is needed or if inherit covers all the bases. override overrides all, while inherit only applies when color prop is not set*/
     color: var(--override-text-color, var(--_text-preset-color, inherit));
     --_offset: calc(${$offset} * 1em);