From 11c3a057dc3226069c24106aaba0d65d8e79b39d Mon Sep 17 00:00:00 2001 From: KANAMORI Yu Date: Tue, 19 Mar 2024 10:00:38 +0900 Subject: [PATCH] =?UTF-8?q?feat!:=20HeadlineArea=20=E3=81=A8=20LineUp=20?= =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4=20(#4465)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/Dialog.stories.tsx | 6 +- .../HeadlineArea/HeadlineArea.stories.tsx | 21 ---- src/components/HeadlineArea/HeadlineArea.tsx | 69 ----------- src/components/HeadlineArea/index.tsx | 1 - src/components/HeadlineArea/useClassNames.ts | 16 --- .../Layout/LineUp/LineUp.stories.tsx | 113 ------------------ src/components/Layout/LineUp/LineUp.tsx | 44 ------- .../Layout/LineUp/VRTLineUp.stories.tsx | 60 ---------- src/components/Layout/LineUp/index.ts | 1 - src/components/Layout/index.ts | 1 - src/index.ts | 3 +- test-runner-jest.config.js | 1 - 12 files changed, 4 insertions(+), 332 deletions(-) delete mode 100644 src/components/HeadlineArea/HeadlineArea.stories.tsx delete mode 100644 src/components/HeadlineArea/HeadlineArea.tsx delete mode 100644 src/components/HeadlineArea/index.tsx delete mode 100644 src/components/HeadlineArea/useClassNames.ts delete mode 100644 src/components/Layout/LineUp/LineUp.stories.tsx delete mode 100644 src/components/Layout/LineUp/LineUp.tsx delete mode 100644 src/components/Layout/LineUp/VRTLineUp.stories.tsx delete mode 100644 src/components/Layout/LineUp/index.ts diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx index ac39f60dbe..18e06d69d1 100644 --- a/src/components/Dialog/Dialog.stories.tsx +++ b/src/components/Dialog/Dialog.stories.tsx @@ -9,7 +9,7 @@ import { DatePicker } from '../DatePicker' import { FormControl } from '../FormControl' import { Heading } from '../Heading' import { Input } from '../Input' -import { Cluster, LineUp, Stack } from '../Layout' +import { Cluster, Stack } from '../Layout' import { Fieldset } from '../NewFieldset' import { RadioButton } from '../RadioButton' import { Section } from '../SectioningContent' @@ -832,10 +832,10 @@ export const Modeless_Dialog: StoryFn = () => {
- + ラジオボタン1 ラジオボタン2 - +
diff --git a/src/components/HeadlineArea/HeadlineArea.stories.tsx b/src/components/HeadlineArea/HeadlineArea.stories.tsx deleted file mode 100644 index f881488b1a..0000000000 --- a/src/components/HeadlineArea/HeadlineArea.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Story } from '@storybook/react' -import * as React from 'react' - -import { HeadlineArea } from './HeadlineArea' - -export default { - title: 'Data Display（データ表示）/HeadlineArea（非推奨）', - component: HeadlineArea, -} - -const heading = { - children: 'HeadlineArea（非推奨）', -} - -export const All: Story = () => ( - -) -All.storyName = 'all' diff --git a/src/components/HeadlineArea/HeadlineArea.tsx b/src/components/HeadlineArea/HeadlineArea.tsx deleted file mode 100644 index 89940f163e..0000000000 --- a/src/components/HeadlineArea/HeadlineArea.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { HTMLAttributes, ReactNode, VFC } from 'react' -import styled, { css } from 'styled-components' - -import { Theme, useTheme } from '../../hooks/useTheme' -import { Heading, Props as HeadingProps } from '../Heading' -import { Section } from '../SectioningContent' - -import { useClassNames } from './useClassNames' - -type Props = { - /** 見出し領域に表示する内容 */ - heading: { - /** 見出しの内容 */ - children: HeadingProps['children'] - /** 見出しの HTML タグ */ - tag?: HeadingProps['tag'] - } - /** 説明テキスト */ - description?: ReactNode - /** コンポーネントに適用するクラス名 */ - className?: string -} - -type ElementProps = Omit, keyof Props> - -/** - * @deprecated `HeadlineArea` は非推奨です。`Stack` で書き換えてください。 - */ -export const HeadlineArea: VFC = ({ - heading, - description, - className = '', - ...props -}) => { - const theme = useTheme() - const classNames = useClassNames() - - return ( - - {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */} - - {heading.children} - - {description && ( - - {description} - - )} - - ) -} - -const WrapperSection = styled(Section)` - display: block; - margin: 0; - padding: 0; -` -const Description = styled.div<{ themes: Theme }>` - ${({ themes }) => { - const { fontSize, spacingByChar, color } = themes - - return css` - margin-top: ${spacingByChar(1)}; - color: ${color.TEXT_BLACK}; - font-size: ${fontSize.M}; - line-height: 1.5; - ` - }} -` diff --git a/src/components/HeadlineArea/index.tsx b/src/components/HeadlineArea/index.tsx deleted file mode 100644 index a85c91d6f9..0000000000 --- a/src/components/HeadlineArea/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './HeadlineArea' diff --git a/src/components/HeadlineArea/useClassNames.ts b/src/components/HeadlineArea/useClassNames.ts deleted file mode 100644 index 4a43da275f..0000000000 --- a/src/components/HeadlineArea/useClassNames.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useMemo } from 'react' - -import { useClassNameGenerator } from '../../hooks/useClassNameGenerator' - -import { HeadlineArea } from './HeadlineArea' - -export function useClassNames() { - const generate = useClassNameGenerator(HeadlineArea.displayName || 'HeadlineArea') - return useMemo( - () => ({ - wrapper: generate(), - description: generate('description'), - }), - [generate], - ) -} diff --git a/src/components/Layout/LineUp/LineUp.stories.tsx b/src/components/Layout/LineUp/LineUp.stories.tsx deleted file mode 100644 index e1a4101880..0000000000 --- a/src/components/Layout/LineUp/LineUp.stories.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { Story } from '@storybook/react' -import React from 'react' -import styled, { css } from 'styled-components' - -import { Heading } from '../../Heading' -import { FaExternalLinkAltIcon } from '../../Icon' -import { StatusLabel } from '../../StatusLabel' -import { Stack } from '../Stack' - -import { LineUp } from '.' - -export default { - title: 'Layouts（レイアウト）/LineUp（非推奨）', - component: LineUp, - parameters: { - withTheming: true, - }, -} - -export const All: Story = () => ( - -
-
- 初期値は gap: 8px で横に並べます。 -
- - {[...Array(5)].map((_, i) => ( - - ))} - -
-
-
- 間隔は gap で調整します。gap={1} -
- - {[...Array(5)].map((_, i) => ( - - ))} - -
-
-
- 抽象値の指定もできます。gap=“M” -
- - {[...Array(5)].map((_, i) => ( - - ))} - -
-
-
- reverse で並びの向きを変えられます。 -
- - {[...Array(4)].map((_, i) => ( - {i + 1} - ))} - -
-
-
- align-items や justify-content など - - {' '} - Flexbox{' '} - {' '} - に準じたプロパティを渡せます。 -
- - 完了 - {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */} - レイアウトコンポーネントの調整 - -
-
-
- 必要に応じて inline を使ってください。 -
-

- これはテキスト内リンクなので - - - inline-flex - - - - にします -

-
- -) - -const ColorBox = styled.div( - ({ theme: { color } }) => css` - display: flex; - align-items: center; - justify-content: center; - background-color: ${color.BRAND}; - color: ${color.TEXT_WHITE}; - width: 80px; - height: 80px; - `, -) - -const Link = styled.a( - ({ theme: { color } }) => css` - color: ${color.TEXT_LINK}; - text-decoration: underline; - text-underline-position: under; - `, -) diff --git a/src/components/Layout/LineUp/LineUp.tsx b/src/components/Layout/LineUp/LineUp.tsx deleted file mode 100644 index fcb9c3d31e..0000000000 --- a/src/components/Layout/LineUp/LineUp.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import styled, { css } from 'styled-components' - -import { useSpacing } from '../../../hooks/useSpacing' -import { AbstractSize, CharRelativeSize } from '../../../themes/createSpacing' - -type alignMethod = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' -type verticalAlignMethod = 'normal' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' - -/** - * @deprecated LineUp コンポーネントは非推奨です。Cluster または Sidebar コンポーネントを使用してください。 - * @param inline true の場合は inline-flex - * @param gap 間隔の指定（基準フォントサイズの相対値または抽象値）。align が space-between や space-around を取る場合は無視されます - * @param reverse 並べる方向の指定（flex-direction） - * @param align 並べ方の指定（justify-content） - * @param vAlign 縦位置の揃え方（align-items） - */ -export const LineUp = styled.div<{ - /** true の場合は inline-flex */ - inline?: boolean - /** 間隔の指定（基準フォントサイズの相対値または抽象値）。align が space-between や space-around を取る場合は無視されます */ - gap?: CharRelativeSize | AbstractSize - /** 並べる方向の指定（flex-direction） */ - reverse?: boolean - /** 並べ方の指定（justify-content） */ - align?: alignMethod - /** 縦位置の揃え方（align-items） */ - vAlign?: verticalAlignMethod -}>( - ({ inline = false, gap = 0.5, reverse, align = 'flex-start', vAlign = 'normal' }) => css` - display: ${inline ? 'inline-flex' : 'flex'}; - ${reverse && 'flex-direction: row-reverse;'} - ${align && `justify-content: ${align};`} - ${vAlign && `align-items: ${vAlign};`} - gap: ${useSpacing(gap)}; - - /* - Chromeで空の要素にflex-gapがあると印刷時にレイアウトが崩れるので gap の値を0にする - See https://bugs.chromium.org/p/chromium/issues/detail?id=1161709 - */ - &:empty { - gap: 0; - } - `, -) diff --git a/src/components/Layout/LineUp/VRTLineUp.stories.tsx b/src/components/Layout/LineUp/VRTLineUp.stories.tsx deleted file mode 100644 index 5a229baf82..0000000000 --- a/src/components/Layout/LineUp/VRTLineUp.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { StoryFn } from '@storybook/react' -import React from 'react' -import styled from 'styled-components' - -import { LineUp } from '../../..' -import { InformationPanel } from '../../InformationPanel' - -import { All } from './LineUp.stories' - -export default { - title: 'Layouts（レイアウト）/LineUp（非推奨）', - component: LineUp, - parameters: { - withTheming: true, - }, -} - -export const VRTLineUpNarrow: StoryFn = () => ( - - - 画面幅が狭い状態で表示されます - - - -) - -export const VRTLineUpForcedColors: StoryFn = () => ( - - - Chromatic 上では強制カラーモードで表示されます - - - -) - -VRTLineUpNarrow.parameters = { - viewport: { - defaultViewport: 'vrtMobile', - }, - chromatic: { - modes: { - vrtMobile: { viewport: 'vrtMobile' }, - }, - }, -} - -VRTLineUpForcedColors.parameters = { - chromatic: { forcedColors: 'active' }, -} - -const Wrapper = styled.div` - height: 100vh; - box-sizing: border-box; - padding: 24px; - color: ${({ theme }) => theme.color.TEXT_BLACK}; -` - -const VRTInformationPanel = styled(InformationPanel)` - margin-bottom: 24px; -` diff --git a/src/components/Layout/LineUp/index.ts b/src/components/Layout/LineUp/index.ts deleted file mode 100644 index a95741535d..0000000000 --- a/src/components/Layout/LineUp/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { LineUp } from './LineUp' diff --git a/src/components/Layout/index.ts b/src/components/Layout/index.ts index 654412fa66..f87c4ccaca 100644 --- a/src/components/Layout/index.ts +++ b/src/components/Layout/index.ts @@ -1,5 +1,4 @@ export { Stack } from './Stack' -export { LineUp } from './LineUp' export { Cluster } from './Cluster' export { Reel } from './Reel' export { Sidebar } from './Sidebar' diff --git a/src/index.ts b/src/index.ts index 787e243bc7..c90297d2b7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -73,7 +73,6 @@ export { } from './components/AppNavi' export { TabBar, TabItem } from './components/TabBar' export { Heading, PageHeading } from './components/Heading' -export { HeadlineArea } from './components/HeadlineArea' export { Select } from './components/Select' export { DropZone } from './components/DropZone' export { DefinitionList } from './components/DefinitionList' @@ -109,7 +108,7 @@ export * from './components/Badge' export * from './components/Switch' // layout components -export { Center, Cluster, LineUp, Reel, Stack, Sidebar } from './components/Layout' +export { Center, Cluster, Reel, Stack, Sidebar } from './components/Layout' // hooks export { useTheme } from './hooks/useTheme' diff --git a/test-runner-jest.config.js b/test-runner-jest.config.js index d96ddec187..69000242f7 100644 --- a/test-runner-jest.config.js +++ b/test-runner-jest.config.js @@ -13,7 +13,6 @@ module.exports = { * 上位の Layout.stories.tsx でテストが実行されるので除外している */ 'Cluster.stories.tsx', - 'LineUp.stories.tsx', 'Reel.stories.tsx', 'Sidebar.stories.tsx', 'Stack.stories.tsx',