diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 77678792..19ea8e1c 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,3 +1,9 @@ + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d5b0ea8b..17baaa1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,6 @@ "@types/react-dom": "18.2.7", "@typescript-eslint/eslint-plugin": "5.62.0", "@typescript-eslint/parser": "5.62.0", - "@ubie/design-tokens": "0.1.4", "@ubie/prettier-config": "0.1.0", "@vitejs/plugin-react": "^4.2.1", "@vitejs/plugin-react-swc": "^3.6.0", @@ -81,7 +80,7 @@ }, "peerDependencies": { "@headlessui/react": ">1.7.0 <2.0.0", - "@ubie/design-tokens": "^0.0.10 || ^0.1.0", + "@ubie/design-tokens": ">=0.2.0", "@ubie/ubie-icons": ">=0.5.0 <0.6.2 || >=0.8.0", "clsx": ">1.2.0", "react": "^17 || ^18", @@ -7094,9 +7093,10 @@ } }, "node_modules/@ubie/design-tokens": { - "version": "0.1.4", - "dev": true, - "license": "Apache-2.0" + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@ubie/design-tokens/-/design-tokens-0.2.0.tgz", + "integrity": "sha512-4GAfCFYtbtbzi92tT6W6JVuhcrmBmuVekVEikCxxpV3aZyjkexZPCqdW7GKZRsB8Vr1lwnwM345ui8VAC2xskg==", + "peer": true }, "node_modules/@ubie/prettier-config": { "version": "0.1.0", diff --git a/package.json b/package.json index fc7719a3..c7481c8c 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,6 @@ "@types/react-dom": "18.2.7", "@typescript-eslint/eslint-plugin": "5.62.0", "@typescript-eslint/parser": "5.62.0", - "@ubie/design-tokens": "0.1.4", "@ubie/prettier-config": "0.1.0", "@vitejs/plugin-react": "^4.2.1", "@vitejs/plugin-react-swc": "^3.6.0", @@ -127,7 +126,7 @@ }, "peerDependencies": { "@headlessui/react": ">1.7.0 <2.0.0", - "@ubie/design-tokens": "^0.0.10 || ^0.1.0", + "@ubie/design-tokens": ">=0.2.0", "@ubie/ubie-icons": ">=0.5.0 <0.6.2 || >=0.8.0", "clsx": ">1.2.0", "react": "^17 || ^18", diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx index 7e68a8a3..c84b3d68 100644 --- a/src/components/Box/Box.tsx +++ b/src/components/Box/Box.tsx @@ -22,8 +22,6 @@ import type { TextColor, BodyFontSize, BodyLeading, - NoteFontSize, - NoteLeading, WidthProps, } from '../../types/style'; import type { CSSProperties, FC, ReactNode } from 'react'; @@ -110,21 +108,6 @@ type PropsWithTextBody = BaseProps & { textLeading?: BodyLeading; }; -type PropsWithTextNote = BaseProps & { - /** - * 配下に含むテキストの種類 - */ - textType: Extract; - /** - * 配下に含むテキストのフォントサイズの抽象値。合わせて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.) @@ -143,11 +126,6 @@ export const textStyleVariables = ({ type: Extract; size: BodyFontSize | undefined; leading: BodyLeading | undefined; - } - | { - type: Extract; - size: NoteFontSize | undefined; - leading: NoteLeading | undefined; }): CSSProperties => { if (type == null) return {}; @@ -160,11 +138,6 @@ export const textStyleVariables = ({ '--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; @@ -175,7 +148,7 @@ export const textStyleVariables = ({ const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1); -export const Box: FC = ({ +export const Box: FC = ({ as: BoxComponent = 'div', children, p, @@ -212,8 +185,6 @@ export const Box: FC = if (textType === 'body') { _textVariables = textStyleVariables({ type: textType, size: textSize, leading: textLeading }); - } else if (textType === 'note') { - _textVariables = textStyleVariables({ type: textType, size: textSize, leading: textLeading }); } const width = _width === 'full' ? '100%' : _width; diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css index 3f5e3d7a..c62706b0 100644 --- a/src/components/Button/Button.module.css +++ b/src/components/Button/Button.module.css @@ -253,7 +253,7 @@ .fixedIcon > * { width: var(--icon-size); - height: var(--sicon-size); + height: var(--icon-size); } .suffixIcon { @@ -264,5 +264,5 @@ .suffixIcon > * { width: var(--icon-size); - height: var(--sicon-size); + height: var(--icon-size); } diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css index bf0b06a6..2a697b16 100644 --- a/src/components/Checkbox/Checkbox.module.css +++ b/src/components/Checkbox/Checkbox.module.css @@ -36,13 +36,13 @@ } .label.medium { - font-size: var(--text-body-md-tight-size); - line-height: var(--text-body-md-tight-line); + font-size: var(--text-body-md-size); + line-height: var(--text-body-md-narrow-line); } .label.small { - font-size: var(--text-body-sm-tight-size); - line-height: var(--text-body-sm-tight-line); + font-size: var(--text-body-sm-size); + line-height: var(--text-body-sm-narrow-line); } /** diff --git a/src/components/HelperMessage/HelperMessage.module.css b/src/components/HelperMessage/HelperMessage.module.css index 4531edb4..6286b32b 100644 --- a/src/components/HelperMessage/HelperMessage.module.css +++ b/src/components/HelperMessage/HelperMessage.module.css @@ -1,8 +1,8 @@ .message { margin: 0; - font-size: var(--text-note-lg-size); + font-size: var(--text-body-sm-size); hyphens: auto; - line-height: var(--text-note-lg-tight-line); + line-height: var(--text-body-sm-line); color: var(--color-text-sub); overflow-wrap: anywhere; } diff --git a/src/components/LinkCard/LinkCard.module.css b/src/components/LinkCard/LinkCard.module.css index 5ae20aff..8e1e91a6 100644 --- a/src/components/LinkCard/LinkCard.module.css +++ b/src/components/LinkCard/LinkCard.module.css @@ -60,13 +60,13 @@ .medium { --icon-size: 2rem; --title-font-size: var(--text-heading-xs-line); - --description-font-size: var(--text-note-lg-size); - --description-line-height: var(--text-note-lg-line); + --description-font-size: var(--text-body-sm-size); + --description-line-height: var(--text-body-sm-line); } .small { --icon-size: 1.25rem; --title-font-size: var(--text-button-md-size); - --description-font-size: var(--text-note-md-size); - --description-line-height: var(--text-note-md-line); + --description-font-size: var(--text-body-xs-size); + --description-line-height: var(--text-body-xs-line); } diff --git a/src/components/RadioButton/RadioButton.module.css b/src/components/RadioButton/RadioButton.module.css index 28a4e8f7..fe960f77 100644 --- a/src/components/RadioButton/RadioButton.module.css +++ b/src/components/RadioButton/RadioButton.module.css @@ -82,11 +82,11 @@ } .medium .label { - font-size: var(--text-body-md-tight-size); - line-height: var(--text-body-md-tight-line); + font-size: var(--text-body-md-size); + line-height: var(--text-body-md-narrow-line); } .small .label { - font-size: var(--text-body-sm-tight-size); - line-height: var(--text-body-sm-tight-line); + font-size: var(--text-body-sm-size); + line-height: var(--text-body-sm-narrow-line); } diff --git a/src/components/RadioCard/RadioCard.module.css b/src/components/RadioCard/RadioCard.module.css index ef0a0a36..d63c5404 100644 --- a/src/components/RadioCard/RadioCard.module.css +++ b/src/components/RadioCard/RadioCard.module.css @@ -14,10 +14,10 @@ box-sizing: border-box; display: inline-block; padding: 16px 12px 16px 44px; - font-size: 16px; + font-size: var(--text-body-md-size); font-weight: bold; hyphens: auto; - line-height: 23px; + line-height: var(--text-body-md-narrow-line); color: var(--color-text-main); overflow-wrap: anywhere; vertical-align: text-top; diff --git a/src/components/Select/Select.module.css b/src/components/Select/Select.module.css index 409606dc..9e06123c 100644 --- a/src/components/Select/Select.module.css +++ b/src/components/Select/Select.module.css @@ -9,7 +9,7 @@ width: 100%; min-height: 54px; padding: 0 64px 0 16px; - font-size: 16px; + font-size: var(--text-body-md-size); font-weight: bold; line-height: 54px; color: var(--color-text-main); diff --git a/src/components/Text/Text.module.css b/src/components/Text/Text.module.css index 1cb2758f..dfd15a11 100644 --- a/src/components/Text/Text.module.css +++ b/src/components/Text/Text.module.css @@ -55,6 +55,10 @@ button.text.link:focus-visible { } /* font-size */ +.body.xs { + --font-size: var(--text-body-xs-size); +} + .body.sm { --font-size: var(--text-body-sm-size); } @@ -87,18 +91,6 @@ button.text.link:focus-visible { --font-size: var(--text-heading-xl-size); } -.note.sm { - --font-size: var(--text-note-sm-size); -} - -.note.md { - --font-size: var(--text-note-md-size); -} - -.note.lg { - --font-size: var(--text-note-lg-size); -} - .button.sm { --font-size: var(--text-button-sm-size); } @@ -111,10 +103,6 @@ button.text.link:focus-visible { --font-size: var(--text-button-lg-size); } -.tag.sm { - --font-size: var(--text-tag-sm-size); -} - .tag.md { --font-size: var(--text-tag-md-size); } @@ -151,10 +139,6 @@ button.text.link:focus-visible { --leading: var(--text-body-md-narrow-line); } -.tight { - --leading: var(--text-body-md-tight-line); -} - /* color */ .main { --color: var(--color-text-main); diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index e4f3693a..49281eae 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -9,8 +9,6 @@ import { BodyLeading, HeadingFontSize, HeadingLeading, - NoteFontSize, - NoteLeading, ButtonFontSize, ButtonLeading, TagFontSize, @@ -88,22 +86,6 @@ type HeadingProps = BaseProps & { leading?: HeadingLeading; }; -type NoteProps = BaseProps & { - /** - * テキストの種類 - */ - type: 'note'; - /** - * フォントサイズの抽象値 - */ - size?: NoteFontSize; - /** - * 行送りの抽象値（`line-height`） - * @default default - */ - leading?: NoteLeading; -}; - type ButtonProps = BaseProps & { /** * テキストの種類 @@ -136,7 +118,7 @@ type TagProps = BaseProps & { leading?: TagLeading; }; -type TextProps = BodyProps | HeadingProps | NoteProps | ButtonProps | TagProps; +type TextProps = BodyProps | HeadingProps | ButtonProps | TagProps; function TextInner( props: { diff --git a/src/stories/Box.stories.tsx b/src/stories/Box.stories.tsx index a24c5bc2..647ea2f3 100644 --- a/src/stories/Box.stories.tsx +++ b/src/stories/Box.stories.tsx @@ -138,10 +138,6 @@ export const Radius: Story = { export const Border: Story = { render: (args) => (
- - Border Gray - - Border Gray @@ -218,9 +214,9 @@ export const TextVariations: Story = { {...args} mt="md" backgroundColor="gray" - textType="note" - textSize="lg" - textLeading="tight" + textType="body" + textSize="sm" + textLeading="narrow" textBold={false} >

nested. reset styles

@@ -255,15 +251,19 @@ export const TextVariations: Story = {

Body size & leading default value

+ +

Body Extra Small Default

+ + +

Body Extra Small Narrow

+ +

Body Small Default

Body Small Narrow

 - -

Body Small Tight

-

Body Medium Default

@@ -271,9 +271,6 @@ export const TextVariations: Story = {

Body Medium Narrow

 - -

Body Medium Tight

-

Body Large Default

@@ -281,43 +278,6 @@ export const TextVariations: Story = {

Body Large Narrow

 - -

Body Large Tight

- - - -

Note size & leading default value

- - - -

Note Small Default

- - -

Note Small Narrow

- - -

Note Small Tight

- - - -

Note Medium Default

- - -

Note Medium Narrow

- - -

Note Medium Tight

- - - -

Note Large Default

- - -

Note Large Narrow

- - -

Note Large Tight

-

Text Left

diff --git a/src/stories/Text.stories.tsx b/src/stories/Text.stories.tsx index e7675e73..2457fb96 100644 --- a/src/stories/Text.stories.tsx +++ b/src/stories/Text.stories.tsx @@ -86,6 +86,11 @@ export const Body: Story = {
Default Leading
+ + xs +
+ {`${bodyText}`} + sm
@@ -109,40 +114,22 @@ export const Body: Story = {
Narrow Leading
- - sm -
- {`${bodyText}`} - - - md -
- {`${bodyText}`} - - - lg + + xs
{`${bodyText}`} - -
-
- -
-
Tight Leading
-
- - + sm
{`${bodyText}`} - + md
{`${bodyText}`} - + lg
{`${bodyText}`} @@ -156,86 +143,6 @@ export const Body: Story = { args: defaultArgs, }; -export const Note: Story = { - render: () => { - const noteText = - '症状検索エンジン「ユビー」は「適切なタイミングでの適切な医療との出会い」の橋渡しによって、みなさんの健康・安全をサポートし、医療についての不安・悩み・苦痛を和らげます。'; - - return ( - -
-
Default Leading
-
- - - sm -
- {`${noteText}`} - - - md -
- {`${noteText}`} - - - lg -
- {`${noteText}`} - - -
-
- -
-
Narrow Leading
-
- - - sm -
- {`${noteText}`} - - - md -
- {`${noteText}`} - - - lg -
- {`${noteText}`} - - -
-
-
-
Tight Leading
-
- - - sm -
- {`${noteText}`} - - - md -
- {`${noteText}`} - - - lg -
- {`${noteText}`} - - -
-
- - ); - }, - args: defaultArgs, -}; - export const Button: Story = { render: () => { const buttonText = '同意して症状から調べる'; @@ -269,11 +176,6 @@ export const Tag: Story = { return ( - - sm -
- {`${tagText}`} - md
@@ -300,8 +202,8 @@ export const WithId: Story = { export const TextInText: Story = { render: () => ( - - + + Alert: {' '} Please fill in all fields diff --git a/src/types/style.ts b/src/types/style.ts index 0aeeddf3..fe909e97 100644 --- a/src/types/style.ts +++ b/src/types/style.ts @@ -1,28 +1,24 @@ export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; -export type TextType = 'body' | 'heading' | 'note' | 'button' | 'tag'; +export type TextType = 'body' | 'heading' | 'button' | 'tag'; -export type Leading = 'default' | 'narrow' | 'tight'; +export type Leading = 'default' | 'narrow'; export type TextColor = 'main' | 'sub' | 'link' | 'linkSub' | 'disabled' | 'primary' | 'accent' | 'alert' | 'white'; -export type BodyFontSize = Extract; +export type BodyFontSize = Extract; -export type BodyLeading = Extract; +export type BodyLeading = Extract; export type HeadingFontSize = Extract; export type HeadingLeading = Extract; -export type NoteFontSize = Extract; - -export type NoteLeading = Extract; - export type ButtonFontSize = Extract; export type ButtonLeading = Extract; -export type TagFontSize = Extract; +export type TagFontSize = Extract; export type TagLeading = Extract; diff --git a/src/utils/style.ts b/src/utils/style.ts index 1edd037b..4c2c83e0 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -6,11 +6,10 @@ import type { TextType, BodyFontSize, BodyLeading, - NoteFontSize, - NoteLeading, ButtonFontSize, ButtonLeading, HeadingLeading, + TagFontSize, TagLeading, TextColor, CSSMinWidth, @@ -45,10 +44,6 @@ export const cssFontSizeToken = ({ type: Extract; size: BodyFontSize; } - | { - type: Extract; - size: NoteFontSize; - } | { type: Extract; size: HeadingFontSize; @@ -59,13 +54,11 @@ export const cssFontSizeToken = ({ } | { type: Extract; - size: NoteFontSize; + size: TagFontSize; }) => { switch (type) { case 'body': return `var(--${DesignTokens.text[`${type}-${size}-size`].path.join('-')})`; - case 'note': - return `var(--${DesignTokens.text[`${type}-${size}-size`].path.join('-')})`; case 'heading': return `var(--${DesignTokens.text[`${type}-${size}-size`].path.join('-')})`; case 'button': @@ -90,11 +83,6 @@ export const cssLeadingToken = ({ size: BodyFontSize; leading: BodyLeading; } - | { - type: Extract; - size: NoteFontSize; - leading: NoteLeading; - } | { type: Extract; size: HeadingFontSize; @@ -107,7 +95,7 @@ export const cssLeadingToken = ({ } | { type: Extract; - size: NoteFontSize; + size: TagFontSize; leading: TagLeading; }) => { switch (type) { @@ -117,10 +105,6 @@ export const cssLeadingToken = ({ : `var(--${DesignTokens.text[`${type}-${size}-${leading}-line`].path.join('-')})`; case 'heading': return `var(--${DesignTokens.text[`${type}-${size}-line`].path.join('-')})`; - case 'note': - return leading === 'default' - ? `var(--${DesignTokens.text[`${type}-${size}-line`].path.join('-')})` - : `var(--${DesignTokens.text[`${type}-${size}-${leading}-line`].path.join('-')})`; case 'button': return `var(--${DesignTokens.text[`${type}-${size}-line`].path.join('-')})`; case 'tag':