Merge pull request #72 from 8845musign/add-typography-props-to-box

Add text props to box
ubie-oss · Apr 26, 2024 · 8aa2203 · 8aa2203
2 parents e34e12e + 2dd1b35
commit 8aa2203
Show file tree

Hide file tree

Showing 8 changed files with 468 additions and 21 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -57,5 +57,14 @@ module.exports = {
     'unused-imports/no-unused-imports': 'error',
     'import/no-unresolved': 'off',
     'no-console': 'error',
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "_",
+        "varsIgnorePattern": "_",
+        "caughtErrorsIgnorePattern": "_",
+        "destructuredArrayIgnorePattern": "_"
+      }
+    ]
   },
 };
diff --git a/src/components/Box/Box.module.css b/src/components/Box/Box.module.css
@@ -4,6 +4,10 @@
   padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
   margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
   border-radius: var(--radius);
+  font-size: var(--text-size);
+  color: var(--text-color);
+  line-height: var(--text-leading);
+  font-weight: var(--text-bold);
 }
 
 .box.backgroundColorPrimary {
@@ -53,3 +57,11 @@
 .box.widthFull {
   width: 100%;
 }
+
+.box.textBold {
+  font-weight: bold;
+}
+
+.box.textNormal {
+  font-weight: normal;
+}
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -3,12 +3,30 @@
 import clsx from 'clsx';
 import styles from './Box.module.css';
 import {} from '../../types/style';
-import { paddingVariables, marginVariables, radiusVariables } from '../../utils/style';
+import {
+  paddingVariables,
+  marginVariables,
+  radiusVariables,
+  cssFontSizeToken,
+  cssLeadingToken,
+  colorVariable,
+} from '../../utils/style';
 import { HTMLTagname } from '../../utils/types';
-import type { PaddingProps, MarginProps, RadiusProp, BackgroundColor } from '../../types/style';
-import type { FC, PropsWithChildren } from 'react';
+import type {
+  PaddingProps,
+  MarginProps,
+  RadiusProp,
+  BackgroundColor,
+  TextType,
+  TextColor,
+  BodyFontSize,
+  BodyLeading,
+  NoteFontSize,
+  NoteLeading,
+} from '../../types/style';
+import type { CSSProperties, FC, PropsWithChildren } from 'react';
 
-type Props = {
+type BaseProps = {
   /**
    * レンダリングされるHTML要素
    * @default div
@@ -26,14 +44,115 @@ type Props = {
    * 幅を指定。他のスタイルの影響を受け、幅が100%とならない場合にのみ使用
    */
   width?: 'full';
+  /**
+   * 内包するテキストをボールドとするかどうか。指定しない場合は親要素のスタイルを継承、trueでボールド、falseとするとnormal
+   */
+  textBold?: boolean;
+  /**
+   * 文字色の抽象値。のかのtext系Propとは独立して指定可能
+   */
+  textColor?: TextColor;
 } & PaddingProps &
   MarginProps &
   RadiusProp;
 
+type PropsWithoutText = BaseProps & {
+  /**
+   * 配下に含むテキストの種類
+   */
+  textType?: undefined;
+  /**
+   * 配下に含むテキストのフォントサイズの抽象値。合わせてtextTypeの指定が必須で、typeに応じた値が指定可能
+   */
+  textSize?: never;
+  /**
+   * 配下に含むテキストの行送りの抽象値（`line-height`）。合わせてtextTypeとtextSizeの指定が必須で、typeに応じた値が指定可能
+   */
+  textLeading?: never;
+};
+
+type PropsWithTextBody = BaseProps & {
+  /**
+   * 配下に含むテキストの種類
+   */
+  textType: Extract<TextType, 'body'>;
+  /**
+   * 配下に含むテキストのフォントサイズの抽象値。合わせてtextTypeの指定が必須で、typeに応じた値が指定可能
+   */
+  textSize?: BodyFontSize;
+  /**
+   * 配下に含むテキストの行送りの抽象値（`line-height`）。合わせてtextTypeとtextSizeの指定が必須で、typeに応じた値が指定可能
+   */
+  textLeading?: BodyLeading;
+};
+
+type PropsWithTextNote = BaseProps & {
+  /**
+   * 配下に含むテキストの種類
+   */
+  textType: Extract<TextType, 'note'>;
+  /**
+   * 配下に含むテキストのフォントサイズの抽象値。合わせてtextTypeの指定が必須で、typeに応じた値が指定可能
+   */
+  textSize?: NoteFontSize;
+  /**
+   * 配下に含むテキストの行送りの抽象値（`line-height`）。合わせてtextTypeとtextSizeの指定が必須で、typeに応じた値が指定可能
+   */
+  textLeading?: NoteLeading;
+};
+
+/**
+ * If type is not specified, an empty object is returned because it is unknown how it is to be styled, i.e. it is not styled.
+ * If type is specified but size or leading is not, specify default values (md or default.)
+ */
+export const textStyleVariables = ({
+  type,
+  size: _size,
+  leading: _leading,
+}:
+  | {
+      type: undefined;
+      size: never;
+      leading: never;
+    }
+  | {
+      type: Extract<TextType, 'body'>;
+      size: BodyFontSize | undefined;
+      leading: BodyLeading | undefined;
+    }
+  | {
+      type: Extract<TextType, 'note'>;
+      size: NoteFontSize | undefined;
+      leading: NoteLeading | undefined;
+    }): CSSProperties => {
+  if (type == null) return {};
+
+  const size = type != null && _size == null ? 'md' : _size;
+  const leading = type != null && _leading == null ? 'default' : _leading;
+
+  switch (type) {
+    case 'body':
+      return {
+        '--text-size': size ? cssFontSizeToken({ type, size }) : 'inherit',
+        '--text-leading': leading ? cssLeadingToken({ type, size: size || 'md', leading }) : 'inherit',
+      } as CSSProperties;
+    case 'note':
+      return {
+        '--text-size': size ? cssFontSizeToken({ type, size }) : 'inherit',
+        '--text-leading': leading ? cssLeadingToken({ type, size: size || 'md', leading }) : 'inherit',
+      } as CSSProperties;
+    default:
+      // eslint-disable-next-line no-case-declarations
+      const _: never = type;
+  }
+
+  return {};
+};
+
 const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
-export const Box: FC<PropsWithChildren<Props>> = ({
-  as: BoxCopmonent = 'div',
+export const Box: FC<PropsWithChildren<PropsWithoutText | PropsWithTextBody | PropsWithTextNote>> = ({
+  as: BoxComponent = 'div',
   children,
   pt,
   pr,
@@ -47,14 +166,29 @@ export const Box: FC<PropsWithChildren<Props>> = ({
   backgroundColor,
   border,
   width,
+  textType,
+  textSize,
+  textLeading,
+  textColor,
+  textBold,
 }) => {
+  let _textVariables: CSSProperties = {};
+
+  if (textType === 'body') {
+    _textVariables = textStyleVariables({ type: textType, size: textSize, leading: textLeading });
+  } else if (textType === 'note') {
+    _textVariables = textStyleVariables({ type: textType, size: textSize, leading: textLeading });
+  }
+
   return (
-    <BoxCopmonent
+    <BoxComponent
       className={clsx([
         styles.box,
         backgroundColor && styles[`backgroundColor${capitalize(backgroundColor)}`],
         border && styles[`border${capitalize(border)}`],
         width && styles.widthFull,
+        textBold && styles.textBold,
+        textBold === false && styles.textNormal,
       ])}
       style={{
         ...paddingVariables({
@@ -70,9 +204,11 @@ export const Box: FC<PropsWithChildren<Props>> = ({
           ml,
         }),
         ...radiusVariables(radius),
+        ..._textVariables,
+        ...colorVariable(textColor),
       }}
     >
       {children}
-    </BoxCopmonent>
+    </BoxComponent>
   );
 };
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -3,7 +3,19 @@
 import { clsx } from 'clsx';
 import { FC, ReactNode } from 'react';
 import styles from './Text.module.css';
-import { TextColor } from '../../types/style';
+import {
+  TextColor,
+  BodyFontSize,
+  BodyLeading,
+  HeadingFontSize,
+  HeadingLeading,
+  NoteFontSize,
+  NoteLeading,
+  ButtonFontSize,
+  ButtonLeading,
+  TagFontSize,
+  TagLeading,
+} from '../../types/style';
 import { HTMLTagname } from '../../utils/types';
 
 type BaseProps = {
@@ -32,8 +44,6 @@ type BaseProps = {
   id?: string;
 };
 
-type BodyFontSize = 'sm' | 'md' | 'lg';
-type BodyLeading = 'default' | 'narrow' | 'tight';
 type BodyProps = BaseProps & {
   /**
    * テキストの種類
@@ -51,7 +61,6 @@ type BodyProps = BaseProps & {
   leading?: BodyLeading;
 };
 
-type HeadingFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type HeadingProps = BaseProps & {
   /**
    * テキストの種類
@@ -65,11 +74,9 @@ type HeadingProps = BaseProps & {
    * 行送りの抽象値（`line-height`）
    * @default default
    */
-  leading?: 'default';
+  leading?: HeadingLeading;
 };
 
-type NoteFontSize = 'sm' | 'md' | 'lg';
-type NoteLeading = 'default' | 'narrow' | 'tight';
 type NoteProps = BaseProps & {
   /**
    * テキストの種類
@@ -86,7 +93,6 @@ type NoteProps = BaseProps & {
   leading?: NoteLeading;
 };
 
-type ButtonFontSize = 'sm' | 'md' | 'lg';
 type ButtonProps = BaseProps & {
   /**
    * テキストの種類
@@ -100,10 +106,9 @@ type ButtonProps = BaseProps & {
    * 行送りの抽象値（`line-height`）
    * @default default
    */
-  leading?: 'default';
+  leading?: ButtonLeading;
 };
 
-type TagFontSize = 'sm' | 'md' | 'lg';
 type TagProps = BaseProps & {
   /**
    * テキストの種類
@@ -117,7 +122,7 @@ type TagProps = BaseProps & {
    * 行送りの抽象値（`line-height`）
    * @default default
    */
-  leading?: 'default';
+  leading?: TagLeading;
 };
 
 type TextProps = BodyProps | HeadingProps | NoteProps | ButtonProps | TagProps;