Merge branch 'topic-implement-typography'

packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx

@@ -2,9 +2,10 @@ import { Global, SerializedStyles } from '@emotion/react'
 import React, { useMemo } from 'react'
 import { ButtonStyles } from '../Button/Button.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
+import { TypographyStyles } from '../Typography/Typography.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
-  [ButtonStyles]
+  [ButtonStyles, TypographyStyles]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({
   theme = defaultThemes.light,

packages/lsd-react/src/components/Typography/Typography.classes.ts

@@ -0,0 +1,17 @@
+import { pairs } from '../../utils/object.utils'
+import { TypographyVariants } from '../Theme'
+import { THEME_TYPOGRAPHY_VARIANTS } from '../Theme/constants'
+
+export const typographyClasses: {
+  root: string
+  primary: string
+  secondary: string
+} & Record<TypographyVariants, string> = {
+  ...pairs(
+    THEME_TYPOGRAPHY_VARIANTS,
+    (variant) => `lsd-typography--${variant}`,
+  ),
+  root: `lsd-typography`,
+  primary: `lsd-typography--primary`,
+  secondary: `lsd-typography--secondary`,
+}

packages/lsd-react/src/components/Typography/Typography.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, Story } from '@storybook/react'
+import { THEME_TYPOGRAPHY_VARIANTS } from '../Theme'
+import { Typography, TypographyProps } from './Typography'
+
+export default {
+  title: 'Typography',
+  component: Typography,
+  argTypes: {
+    variant: {
+      type: {
+        name: 'enum',
+        value: THEME_TYPOGRAPHY_VARIANTS,
+      },
+      defaultValue: 'body1',
+    },
+    color: {
+      type: {
+        name: 'enum',
+        value: ['primary', 'secondary'],
+        required: false,
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<TypographyProps> = (args) => (
+  <Typography {...args}>Text</Typography>
+)
+
+Root.args = {
+  color: 'primary',
+}

packages/lsd-react/src/components/Typography/Typography.styles.ts

@@ -0,0 +1,44 @@
+import { css } from '@emotion/react'
+import {
+  THEME_TYPOGRAPHY_VARIANTS,
+  TypographyVariants,
+  withTheme,
+} from '../Theme'
+import { THEME_TYPOGRAPHY_ELEMENTS } from '../Theme/constants'
+import { typographyClasses } from './Typography.classes'
+
+const selectors = (variant: TypographyVariants) =>
+  [
+    ...(THEME_TYPOGRAPHY_ELEMENTS[variant] ?? []),
+    `.${typographyClasses[variant]}`,
+  ].join(', ')
+
+export const TypographyStyles = withTheme(
+  (theme) => css`
+    .${typographyClasses.root} {
+    }
+
+    .${typographyClasses.primary} {
+      color: rgb(var(--lsd-text-primary));
+    }
+
+    .${typographyClasses.secondary} {
+      color: rgb(var(--lsd-text-secondary));
+    }
+
+    ${THEME_TYPOGRAPHY_VARIANTS.map(
+      (variant) => css`
+        ${selectors(variant)} {
+          color: rgb(var(--lsd-text-primary));
+          font-weight: normal;
+          font-size: var(--lsd-${variant}-fontSize);
+          line-height: var(--lsd-${variant}-lineHeight);
+        }
+      `,
+    )}
+
+    h1, h2, h3, h4, h5, h6, p, span {
+      margin: 0;
+    }
+  `,
+)

packages/lsd-react/src/components/Typography/Typography.tsx

@@ -0,0 +1,73 @@
+import clsx from 'clsx'
+import React from 'react'
+import { TypographyVariants } from '../Theme'
+import { typographyClasses } from './Typography.classes'
+
+export type TypographyProps = {
+  variant?: TypographyVariants
+  color?: 'primary' | 'secondary'
+} & (
+  | ({
+      component?: 'p'
+    } & React.HTMLAttributes<HTMLParagraphElement>)
+  | ({
+      component?: 'span'
+    } & React.HTMLAttributes<HTMLSpanElement>)
+  | ({
+      component?: 'label'
+    } & React.LabelHTMLAttributes<HTMLLabelElement>)
+  | ({
+      component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+    } & React.HTMLAttributes<HTMLHeadingElement>)
+  | ({
+      component?: 'div'
+    } & React.HtmlHTMLAttributes<HTMLDivElement>)
+  | ({
+      component?: 'a'
+    } & React.AnchorHTMLAttributes<HTMLAnchorElement>)
+)
+
+export const Typography: React.FC<TypographyProps> & {
+  classes: typeof typographyClasses
+} = ({
+  color,
+  variant = 'body1',
+  component,
+  className,
+  children,
+  ...props
+}) => {
+  const componentName =
+    component ??
+    (
+      {
+        h1: 'h1',
+        h2: 'h2',
+        h3: 'h3',
+        h4: 'h4',
+        h5: 'h5',
+        h6: 'h6',
+        label1: 'label',
+        label2: 'label',
+      } as Record<TypographyVariants, string>
+    )[variant] ??
+    'span'
+
+  const Component = componentName as any as React.ComponentType<TypographyProps>
+
+  return (
+    <Component
+      className={clsx(
+        typographyClasses.root,
+        typographyClasses[variant],
+        color && typographyClasses[color],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  )
+}
+
+Typography.classes = typographyClasses

packages/lsd-react/src/components/Typography/index.ts

@@ -0,0 +1 @@
+export * from './Typography'