Skip to content

Commit ba43c7a

Browse files
AtsushiMAtsushiM
committed
refactor!: AccordionPanel を Accordion にrename
1 parent 2637cfd commit ba43c7a

28 files changed

Lines changed: 491 additions & 491 deletions

packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.test.tsx renamed to packages/smarthr-ui/src/components/Accordion/Accordion.test.tsx

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import { userEvent } from 'storybook/test'
55
import { Fieldset } from '../Fieldset'
66
import { RadioButton } from '../RadioButton'
77

8-
import { AccordionPanel } from './AccordionPanel'
9-
import { AccordionPanelContent } from './AccordionPanelContent'
10-
import { AccordionPanelItem } from './AccordionPanelItem'
11-
import { AccordionPanelTrigger } from './AccordionPanelTrigger'
8+
import { Accordion } from './Accordion'
9+
import { AccordionContent } from './AccordionContent'
10+
import { AccordionItem } from './AccordionItem'
11+
import { AccordionTrigger } from './AccordionTrigger'
1212

13-
describe('AccordionPanel', () => {
13+
describe('Accordion', () => {
1414
beforeAll(() => {
1515
config.disabled = true
1616
})
@@ -22,27 +22,27 @@ describe('AccordionPanel', () => {
2222
test('アコーディオン内に配置したラジオボタンをキーボード操作できる', async () => {
2323
render(
2424
<form>
25-
<AccordionPanel>
26-
<AccordionPanelItem name="accordion-panel-1">
27-
<AccordionPanelTrigger>アコーディオンパネル1</AccordionPanelTrigger>
28-
<AccordionPanelContent>
25+
<Accordion>
26+
<AccordionItem name="accordion-panel-1">
27+
<AccordionTrigger>アコーディオンパネル1</AccordionTrigger>
28+
<AccordionContent>
2929
<Fieldset legend="ラジオボタン" innerMargin={0.5}>
3030
<RadioButton name="radio1">ラジオボタン1-1</RadioButton>
3131
<RadioButton name="radio1">ラジオボタン1-2</RadioButton>
3232
</Fieldset>
33-
</AccordionPanelContent>
34-
</AccordionPanelItem>
33+
</AccordionContent>
34+
</AccordionItem>
3535

36-
<AccordionPanelItem name="accordion-panel-2">
37-
<AccordionPanelTrigger>アコーディオンパネル2</AccordionPanelTrigger>
38-
<AccordionPanelContent>
36+
<AccordionItem name="accordion-panel-2">
37+
<AccordionTrigger>アコーディオンパネル2</AccordionTrigger>
38+
<AccordionContent>
3939
<Fieldset legend="ラジオボタン" innerMargin={0.5}>
4040
<RadioButton name="radio2">ラジオボタン2-1</RadioButton>
4141
<RadioButton name="radio2">ラジオボタン2-2</RadioButton>
4242
</Fieldset>
43-
</AccordionPanelContent>
44-
</AccordionPanelItem>
45-
</AccordionPanel>
43+
</AccordionContent>
44+
</AccordionItem>
45+
</Accordion>
4646
</form>,
4747
)
4848

@@ -66,30 +66,30 @@ describe('AccordionPanel', () => {
6666
expect(screen.getByRole('radio', { name: 'ラジオボタン1-1' })).toBeChecked()
6767
})
6868

69-
test('矢印キーでAccordionPanelItem間を移動できる', async () => {
69+
test('矢印キーでAccordionItem間を移動できる', async () => {
7070
render(
7171
<form>
72-
<AccordionPanel>
73-
<AccordionPanelItem name="accordion-panel-1">
74-
<AccordionPanelTrigger>アコーディオンパネル1</AccordionPanelTrigger>
75-
<AccordionPanelContent>
72+
<Accordion>
73+
<AccordionItem name="accordion-panel-1">
74+
<AccordionTrigger>アコーディオンパネル1</AccordionTrigger>
75+
<AccordionContent>
7676
<Fieldset legend="ラジオボタン" innerMargin={0.5}>
7777
<RadioButton name="radio1">ラジオボタン1-1</RadioButton>
7878
<RadioButton name="radio1">ラジオボタン1-2</RadioButton>
7979
</Fieldset>
80-
</AccordionPanelContent>
81-
</AccordionPanelItem>
80+
</AccordionContent>
81+
</AccordionItem>
8282

83-
<AccordionPanelItem name="accordion-panel-2">
84-
<AccordionPanelTrigger>アコーディオンパネル2</AccordionPanelTrigger>
85-
<AccordionPanelContent>
83+
<AccordionItem name="accordion-panel-2">
84+
<AccordionTrigger>アコーディオンパネル2</AccordionTrigger>
85+
<AccordionContent>
8686
<Fieldset legend="ラジオボタン" innerMargin={0.5}>
8787
<RadioButton name="radio2">ラジオボタン2-1</RadioButton>
8888
<RadioButton name="radio2">ラジオボタン2-2</RadioButton>
8989
</Fieldset>
90-
</AccordionPanelContent>
91-
</AccordionPanelItem>
92-
</AccordionPanel>
90+
</AccordionContent>
91+
</AccordionItem>
92+
</Accordion>
9393
</form>,
9494
)
9595

packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx renamed to packages/smarthr-ui/src/components/Accordion/Accordion.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { type VariantProps, tv } from 'tailwind-variants'
1616

1717
import { flatArrayToMap } from '../../libs/map'
1818

19-
import { getNewExpandedItems } from './accordionPanelHelper'
19+
import { getNewExpandedItems } from './accordionHelper'
2020

2121
type AbstractProps = PropsWithChildren<{
2222
/** アイコンの左右位置 */
@@ -31,7 +31,7 @@ type AbstractProps = PropsWithChildren<{
3131
VariantProps<typeof classNameGenerator>
3232
type Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>
3333

34-
export const AccordionPanelContext = createContext<{
34+
export const AccordionContext = createContext<{
3535
iconPosition: 'left' | 'right'
3636
expandedItems: Map<string, string>
3737
expandableMultiply: boolean
@@ -46,16 +46,16 @@ export const AccordionPanelContext = createContext<{
4646
})
4747

4848
const ROUNDED = {
49-
t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',
50-
t_r: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tr-l',
51-
b_l: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded="true"])]:shr-rounded-bl-l',
52-
b_r: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded="true"])]:shr-rounded-br-l',
49+
t_l: '[&>.smarthr-ui-Accordion-item:first-child_.smarthr-ui-Accordion-trigger]:shr-rounded-tl-l',
50+
t_r: '[&>.smarthr-ui-Accordion-item:first-child_.smarthr-ui-Accordion-trigger]:shr-rounded-tr-l',
51+
b_l: '[&>.smarthr-ui-Accordion-item:last-child_.smarthr-ui-Accordion-trigger:not([aria-expanded="true"])]:shr-rounded-bl-l',
52+
b_r: '[&>.smarthr-ui-Accordion-item:last-child_.smarthr-ui-Accordion-trigger:not([aria-expanded="true"])]:shr-rounded-br-l',
5353
}
5454

5555
const ROUNDED_ALL = [ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]
5656

5757
const classNameGenerator = tv({
58-
base: 'smarthr-ui-AccordionPanel',
58+
base: 'smarthr-ui-Accordion',
5959
variants: {
6060
rounded: {
6161
true: ROUNDED_ALL,
@@ -72,7 +72,7 @@ const classNameGenerator = tv({
7272
},
7373
})
7474

75-
export const AccordionPanel: FC<Props> = ({
75+
export const Accordion: FC<Props> = ({
7676
iconPosition = 'left',
7777
expandableMultiply = true,
7878
defaultExpanded = [],
@@ -100,7 +100,7 @@ export const AccordionPanel: FC<Props> = ({
100100
}, [defaultExpanded])
101101

102102
return (
103-
<AccordionPanelContext.Provider
103+
<AccordionContext.Provider
104104
value={{
105105
onClickTrigger,
106106
onClickProps,
@@ -111,6 +111,6 @@ export const AccordionPanel: FC<Props> = ({
111111
}}
112112
>
113113
<div {...rest} ref={parentRef} role="presentation" className={actualClassName} />
114-
</AccordionPanelContext.Provider>
114+
</AccordionContext.Provider>
115115
)
116116
}

packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelContent.tsx renamed to packages/smarthr-ui/src/components/Accordion/AccordionContent.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ import { tv } from 'tailwind-variants'
1313

1414
import { getIsInclude } from '../../libs/map'
1515

16-
import { AccordionPanelContext } from './AccordionPanel'
17-
import { AccordionPanelItemContext } from './AccordionPanelItem'
16+
import { AccordionContext } from './Accordion'
17+
import { AccordionItemContext } from './AccordionItem'
1818

1919
type AbstractProps = PropsWithChildren
2020
type Props = AbstractProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps>
2121

2222
const classNameGenerator = tv({
2323
base: [
24-
'smarthr-ui-AccordionPanel-content',
24+
'smarthr-ui-Accordion-content',
2525
'shr-invisible shr-max-h-0 shr-opacity-0 shr-transition-[max-height,_visible,_opacity] shr-duration-150 shr-ease-in-out',
2626
'[&.entered]:shr-visible [&.entered]:shr-max-h-[revert] [&.entered]:shr-opacity-100',
2727
// HINT: flexなどで囲まれると、非表示だが内容分高さが出てしまい、スクロール領域が不自然に伸びてしまう現象が起きる場合がある
@@ -30,9 +30,9 @@ const classNameGenerator = tv({
3030
],
3131
})
3232

33-
export const AccordionPanelContent: FC<Props> = ({ className, ...rest }) => {
34-
const { name } = useContext(AccordionPanelItemContext)
35-
const { expandedItems } = useContext(AccordionPanelContext)
33+
export const AccordionContent: FC<Props> = ({ className, ...rest }) => {
34+
const { name } = useContext(AccordionItemContext)
35+
const { expandedItems } = useContext(AccordionContext)
3636
const visible = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])
3737
const wrapperRef = useRef<HTMLDivElement>(null)
3838
const actualClassName = useMemo(() => classNameGenerator({ className }), [className])

packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelItem.tsx renamed to packages/smarthr-ui/src/components/Accordion/AccordionItem.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,24 @@ type AbstractProps = PropsWithChildren<{
1717
}>
1818
type Props = AbstractProps & Omit<ComponentPropsWithoutRef<'section'>, keyof AbstractProps>
1919

20-
export const AccordionPanelItemContext = createContext<{ name: string }>({
20+
export const AccordionItemContext = createContext<{ name: string }>({
2121
name: '',
2222
})
2323

2424
const classNameGenerator = tv({
25-
base: ['smarthr-ui-AccordionPanel-item', '[&_+_&]:shr-border-t-shorthand'],
25+
base: ['smarthr-ui-Accordion-item', '[&_+_&]:shr-border-t-shorthand'],
2626
})
2727

28-
export const AccordionPanelItem: FC<Props> = ({ name, className, ...rest }) => {
28+
export const AccordionItem: FC<Props> = ({ name, className, ...rest }) => {
2929
const actualClassName = useMemo(() => classNameGenerator({ className }), [className])
3030

3131
return (
32-
<AccordionPanelItemContext.Provider
32+
<AccordionItemContext.Provider
3333
value={{
3434
name,
3535
}}
3636
>
3737
<Section {...rest} className={actualClassName} />
38-
</AccordionPanelItemContext.Provider>
38+
</AccordionItemContext.Provider>
3939
)
4040
}

packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx renamed to packages/smarthr-ui/src/components/Accordion/AccordionTrigger.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ import { Heading, type HeadingTagTypes } from '../Heading'
1818
import { FaCaretDownIcon, FaCaretRightIcon } from '../Icon'
1919
import { Cluster } from '../Layout'
2020

21-
import { AccordionPanelContext } from './AccordionPanel'
22-
import { AccordionPanelItemContext } from './AccordionPanelItem'
21+
import { AccordionContext } from './Accordion'
22+
import { AccordionItemContext } from './AccordionItem'
2323
import {
2424
focusFirstSibling,
2525
focusLastSibling,
2626
focusNextSibling,
2727
focusPreviousSibling,
2828
getNewExpandedItems,
29-
} from './accordionPanelHelper'
29+
} from './accordionHelper'
3030

3131
import type { TextProps } from '../Text'
3232

@@ -45,13 +45,13 @@ const classNameGenerator = tv({
4545
title: 'shr-grow shr-leading-tight',
4646
titleWrapper: 'shr-flex-nowrap',
4747
button: [
48-
'smarthr-ui-AccordionPanel-trigger',
48+
'smarthr-ui-Accordion-trigger',
4949
'shr-group shr-w-full shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0.75 shr-text-left shr-text-inherit shr-text-color-inherit',
5050
'disabled:shr-cursor-not-allowed disabled:shr-bg-white-darken disabled:shr-text-disabled',
5151
'hover:shr-bg-white-darken',
5252
'focus-visible:shr-focus-indicator',
53-
// Base 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Base に overflow: hidden を与えるとフォーカスリングが表示されなくなる）
54-
'[.smarthr-ui-Base_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Base_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:last-child_&]:shr-rounded-b-l',
53+
// Base 直下に Accordion がある場合、背景が付き抜けないように角丸を指定（Base に overflow: hidden を与えるとフォーカスリングが表示されなくなる）
54+
'[.smarthr-ui-Base_>_.smarthr-ui-Accordion_.smarthr-ui-Accordion-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Base_>_.smarthr-ui-Accordion_.smarthr-ui-Accordion-item:last-child_&]:shr-rounded-b-l',
5555
],
5656
leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',
5757
rightIcon: 'group-aria-expanded:-shr-rotate-180',
@@ -64,7 +64,7 @@ const classNameGenerator = tv({
6464
],
6565
})
6666

67-
export const AccordionPanelTrigger: FC<Props> = ({
67+
export const AccordionTrigger: FC<Props> = ({
6868
children,
6969
className,
7070
headingType = 'blockTitle',
@@ -83,15 +83,15 @@ export const AccordionPanelTrigger: FC<Props> = ({
8383
}
8484
}, [className])
8585

86-
const { name } = useContext(AccordionPanelItemContext)
86+
const { name } = useContext(AccordionItemContext)
8787
const {
8888
iconPosition,
8989
expandedItems,
9090
onClickTrigger,
9191
onClickProps,
9292
expandableMultiply,
9393
parentRef,
94-
} = useContext(AccordionPanelContext)
94+
} = useContext(AccordionContext)
9595

9696
const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])
9797

packages/smarthr-ui/src/components/AccordionPanel/accordionPanelHelper.ts renamed to packages/smarthr-ui/src/components/Accordion/accordionHelper.ts

File renamed without changes.

‎packages/smarthr-ui/src/components/Accordion/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { Accordion } from './Accordion'
2+
export { AccordionItem } from './AccordionItem'
3+
export { AccordionContent } from './AccordionContent'
4+
export { AccordionTrigger } from './AccordionTrigger'

0 commit comments

Comments
 (0)