From 9cf997408c210e6195dd5c0de42c2315c6b9fd3c Mon Sep 17 00:00:00 2001 From: si4126is Date: Thu, 12 Mar 2026 09:51:28 +0900 Subject: [PATCH 1/7] Add disclosure component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit details/summary要素を使ったdisclosureコンポーネントを追加。 cellのmixinに準拠したsize・densityプロパティを持ち、hover/focus時のインタラクションスタイルもadapter関数を使って実装。 Co-Authored-By: Claude Sonnet 4.6 --- packages/components-web/_index.scss | 1 + .../inhouse-components-web.scss | 2 + packages/components-web/package.json | 1 + packages/disclosure/_index.scss | 1 + packages/disclosure/_mixins.scss | 98 +++++++++++++++++ packages/disclosure/_variables.scss | 4 + packages/disclosure/inhouse-disclosure.scss | 2 + packages/disclosure/package.json | 23 ++++ packages/stories-web/package.json | 1 + .../src/components/disclosure/Disclosure.tsx | 53 +++++++++ .../stories-web/src/disclosure.stories.tsx | 104 ++++++++++++++++++ 11 files changed, 290 insertions(+) create mode 100644 packages/disclosure/_index.scss create mode 100644 packages/disclosure/_mixins.scss create mode 100644 packages/disclosure/_variables.scss create mode 100644 packages/disclosure/inhouse-disclosure.scss create mode 100644 packages/disclosure/package.json create mode 100644 packages/stories-web/src/components/disclosure/Disclosure.tsx create mode 100644 packages/stories-web/src/disclosure.stories.tsx diff --git a/packages/components-web/_index.scss b/packages/components-web/_index.scss index 8d76d72..130236c 100644 --- a/packages/components-web/_index.scss +++ b/packages/components-web/_index.scss @@ -9,6 +9,7 @@ @forward "@pepabo-inhouse/checkbox" as checkbox-*; @forward "@pepabo-inhouse/container" as container-*; @forward "@pepabo-inhouse/description-list" as description-list-*; +@forward "@pepabo-inhouse/disclosure" as disclosure-*; @forward "@pepabo-inhouse/flavor" as flavor-*; @forward "@pepabo-inhouse/grid" as grid-*; @forward "@pepabo-inhouse/header" as header-*; diff --git a/packages/components-web/inhouse-components-web.scss b/packages/components-web/inhouse-components-web.scss index a98ce70..4832248 100644 --- a/packages/components-web/inhouse-components-web.scss +++ b/packages/components-web/inhouse-components-web.scss @@ -9,6 +9,7 @@ @use "@pepabo-inhouse/container"; @use "@pepabo-inhouse/description-list"; @use "@pepabo-inhouse/dialog"; +@use "@pepabo-inhouse/disclosure"; @use "@pepabo-inhouse/flavor"; @use "@pepabo-inhouse/grid"; @use "@pepabo-inhouse/header"; @@ -43,6 +44,7 @@ @include container.export; @include description-list.export; @include dialog.export; +@include disclosure.export; @include grid.export; @include icon.export; @include interactive-list.export; diff --git a/packages/components-web/package.json b/packages/components-web/package.json index 6b8e4dc..57ba693 100644 --- a/packages/components-web/package.json +++ b/packages/components-web/package.json @@ -24,6 +24,7 @@ "@pepabo-inhouse/constants": "^3.9.3", "@pepabo-inhouse/container": "^3.9.3", "@pepabo-inhouse/description-list": "^3.9.3", + "@pepabo-inhouse/disclosure": "^3.9.3", "@pepabo-inhouse/flavor": "^3.9.3", "@pepabo-inhouse/grid": "^3.9.3", "@pepabo-inhouse/header": "^3.9.3", diff --git a/packages/disclosure/_index.scss b/packages/disclosure/_index.scss new file mode 100644 index 0000000..9e8069c --- /dev/null +++ b/packages/disclosure/_index.scss @@ -0,0 +1 @@ +@forward "./mixins" show style, export; diff --git a/packages/disclosure/_mixins.scss b/packages/disclosure/_mixins.scss new file mode 100644 index 0000000..df71211 --- /dev/null +++ b/packages/disclosure/_mixins.scss @@ -0,0 +1,98 @@ +@use "sass:map"; +@use "@pepabo-inhouse/adapter/functions" as adapter; +@use "@pepabo-inhouse/cell/mixins" as cell; +@use "./variables"; + +@mixin style($option: variables.$default-option) { + $option: map.merge(variables.$default-option, $option); + + > ._summary { + @include -summary-proto( + $density: map.get($option, density), + $size: map.get($option, size) + ); + } + + &[open] > ._summary { + background-color: + adapter.get-background-overlay-color( + $brightness: light, + $state: activated + ); + + > ._chevron { + transform: rotate(90deg); + } + } + + @each $size in adapter.get-cell-sizes() { + &.-size-#{$size} > ._summary { + @include -summary-proto( + $density: map.get($option, density), + $size: $size + ); + } + } + + @each $density in adapter.get-densities() { + &.-density-#{$density} > ._summary { + @include -summary-proto( + $density: $density, + $size: map.get($option, size) + ); + } + } + + @each $density in adapter.get-densities() { + @each $size in adapter.get-cell-sizes() { + &.-density-#{$density}.-size-#{$size} > ._summary { + @include -summary-proto($density: $density, $size: $size); + } + } + } +} + +@mixin export { + .in-disclosure { + @include style; + } +} + +@mixin -summary-proto($density: normal, $size: m) { + @include cell.style((density: $density, size: $size)); + + display: flex; + gap: adapter.get-interactive-list-spacing-size(); + align-items: center; + background-color: + adapter.get-background-overlay-color( + $brightness: light, + $state: enabled + ); + list-style: none; + cursor: pointer; + + &::-webkit-details-marker { + display: none; + } + + &:hover, + &.--hover { + background-color: + adapter.get-background-overlay-color( + $brightness: light, + $state: hover + ); + } + + &:focus-visible, + &.--focused { + background-color: + adapter.get-background-overlay-color( + $brightness: light, + $state: focused + ); + outline: adapter.get-focus-ring-outline(); + outline-offset: adapter.get-focus-ring-outline-offset(); + } +} diff --git a/packages/disclosure/_variables.scss b/packages/disclosure/_variables.scss new file mode 100644 index 0000000..0c1a492 --- /dev/null +++ b/packages/disclosure/_variables.scss @@ -0,0 +1,4 @@ +$default-option: ( + density: normal, + size: m, +); diff --git a/packages/disclosure/inhouse-disclosure.scss b/packages/disclosure/inhouse-disclosure.scss new file mode 100644 index 0000000..b2be6e9 --- /dev/null +++ b/packages/disclosure/inhouse-disclosure.scss @@ -0,0 +1,2 @@ +@use "./mixins"; +@include mixins.export; diff --git a/packages/disclosure/package.json b/packages/disclosure/package.json new file mode 100644 index 0000000..15444cf --- /dev/null +++ b/packages/disclosure/package.json @@ -0,0 +1,23 @@ +{ + "name": "@pepabo-inhouse/disclosure", + "description": "Inhouse Components for the web disclosure component", + "version": "3.9.3", + "repository": { + "type": "git", + "url": "https://github.com/pepabo/inhouse-components-web.git", + "directory": "packages/disclosure" + }, + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@pepabo-inhouse/adapter": "^3.9.3", + "@pepabo-inhouse/cell": "^3.9.3", + "@pepabo-inhouse/icon": "^3.9.3" + }, + "devDependencies": { + "@pepabo-inhouse/constants": "^3.9.3", + "@pepabo-inhouse/flavor": "^3.9.3", + "@pepabo-inhouse/tokens": "^2.4.0" + } +} diff --git a/packages/stories-web/package.json b/packages/stories-web/package.json index 506bc1d..35040af 100644 --- a/packages/stories-web/package.json +++ b/packages/stories-web/package.json @@ -27,6 +27,7 @@ "@pepabo-inhouse/container": "^3.9.3", "@pepabo-inhouse/description-list": "^3.9.3", "@pepabo-inhouse/dialog": "^3.9.3", + "@pepabo-inhouse/disclosure": "^3.9.3", "@pepabo-inhouse/flavor": "^3.9.3", "@pepabo-inhouse/grid": "^3.9.3", "@pepabo-inhouse/header": "^3.9.3", diff --git a/packages/stories-web/src/components/disclosure/Disclosure.tsx b/packages/stories-web/src/components/disclosure/Disclosure.tsx new file mode 100644 index 0000000..49d3f7b --- /dev/null +++ b/packages/stories-web/src/components/disclosure/Disclosure.tsx @@ -0,0 +1,53 @@ +import React, { FC, ReactNode } from 'react' +import { Density, Size } from '../types' +import Icon from '../Icon' + +export interface Props { + children: ReactNode + density?: Density + open?: boolean + size?: Extract + summary: string +} + +const Disclosure: FC = (props: Props) => { + const { + children, + density, + open, + size, + summary, + ...rest + } = props + + const classes = ['in-disclosure'] + + if (typeof density !== 'undefined') { + classes.push(`-density-${density}`) + } + + if (typeof size !== 'undefined') { + classes.push(`-size-${size}`) + } + + return ( +
+ + + {summary} + +
+ {children} +
+
+ ) +} + +export default Disclosure diff --git a/packages/stories-web/src/disclosure.stories.tsx b/packages/stories-web/src/disclosure.stories.tsx new file mode 100644 index 0000000..21a7041 --- /dev/null +++ b/packages/stories-web/src/disclosure.stories.tsx @@ -0,0 +1,104 @@ +import type { StoryFn, Meta } from '@storybook/react' +import React from 'react' +import Disclosure, { Props } from './components/disclosure/Disclosure' + +export default { + title: 'Components/Disclosure', + component: Disclosure, + argTypes: { + density: { + control: { type: 'select' }, + options: ['dense', 'normal', 'comfort'], + }, + size: { + control: { type: 'select' }, + options: ['s', 'm', 'l'], + }, + }, +} as Meta + +const Template: StoryFn = (args) => + +const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' + +export const Default = Template.bind({}) +Default.args = { + summary: 'Summary text', + children: content, + density: 'normal', + size: 'm', +} + +export const Open = Template.bind({}) +Open.args = { + summary: 'Summary text', + children: content, + density: 'normal', + size: 'm', + open: true, +} + +export const SizeSmall = Template.bind({}) +SizeSmall.args = { + summary: 'Summary text (size: s)', + children: content, + density: 'normal', + size: 's', + open: true, +} + +export const SizeLarge = Template.bind({}) +SizeLarge.args = { + summary: 'Summary text (size: l)', + children: content, + density: 'normal', + size: 'l', + open: true, +} + +export const DensityDense = Template.bind({}) +DensityDense.args = { + summary: 'Summary text (density: dense)', + children: content, + density: 'dense', + size: 'm', + open: true, +} + +export const DensityComfort = Template.bind({}) +DensityComfort.args = { + summary: 'Summary text (density: comfort)', + children: content, + density: 'comfort', + size: 'm', + open: true, +} + +const MultipleTemplate: StoryFn = () => ( + <> + + {content} + + + {content} + + + {content} + + +) + +export const Multiple = MultipleTemplate.bind({}) From a53729c900371ea9966e234424a3861afea46775 Mon Sep 17 00:00:00 2001 From: si4126is Date: Thu, 12 Mar 2026 12:13:58 +0900 Subject: [PATCH 2/7] Fix lint: correct property order in disclosure mixin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit stylelint-config-rational-order に従い、list-style を background-color より前に移動。 Co-Authored-By: Claude Sonnet 4.6 --- packages/disclosure/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/disclosure/_mixins.scss b/packages/disclosure/_mixins.scss index df71211..832826b 100644 --- a/packages/disclosure/_mixins.scss +++ b/packages/disclosure/_mixins.scss @@ -64,12 +64,12 @@ display: flex; gap: adapter.get-interactive-list-spacing-size(); align-items: center; + list-style: none; background-color: adapter.get-background-overlay-color( $brightness: light, $state: enabled ); - list-style: none; cursor: pointer; &::-webkit-details-marker { From 5376d0a260872db8519a3755c01001bec45427c8 Mon Sep 17 00:00:00 2001 From: si4126is Date: Thu, 12 Mar 2026 14:32:25 +0900 Subject: [PATCH 3/7] Update package-lock.json to include disclosure package Co-Authored-By: Claude Sonnet 4.6 --- package-lock.json | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/package-lock.json b/package-lock.json index 573da7c..f054d4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4427,6 +4427,10 @@ "resolved": "packages/dialog", "link": true }, + "node_modules/@pepabo-inhouse/disclosure": { + "resolved": "packages/disclosure", + "link": true + }, "node_modules/@pepabo-inhouse/flavor": { "resolved": "packages/flavor", "link": true @@ -30857,6 +30861,7 @@ "@pepabo-inhouse/constants": "^3.9.3", "@pepabo-inhouse/container": "^3.9.3", "@pepabo-inhouse/description-list": "^3.9.3", + "@pepabo-inhouse/disclosure": "^3.9.3", "@pepabo-inhouse/flavor": "^3.9.3", "@pepabo-inhouse/grid": "^3.9.3", "@pepabo-inhouse/header": "^3.9.3", @@ -30929,6 +30934,19 @@ "@pepabo-inhouse/tokens": "^2.4.0" } }, + "packages/disclosure": { + "version": "3.9.3", + "dependencies": { + "@pepabo-inhouse/adapter": "^3.9.3", + "@pepabo-inhouse/cell": "^3.9.3", + "@pepabo-inhouse/icon": "^3.9.3" + }, + "devDependencies": { + "@pepabo-inhouse/constants": "^3.9.3", + "@pepabo-inhouse/flavor": "^3.9.3", + "@pepabo-inhouse/tokens": "^2.4.0" + } + }, "packages/flavor": { "name": "@pepabo-inhouse/flavor", "version": "3.9.3", @@ -31138,6 +31156,7 @@ "@pepabo-inhouse/container": "^3.9.3", "@pepabo-inhouse/description-list": "^3.9.3", "@pepabo-inhouse/dialog": "^3.9.3", + "@pepabo-inhouse/disclosure": "^3.9.3", "@pepabo-inhouse/flavor": "^3.9.3", "@pepabo-inhouse/grid": "^3.9.3", "@pepabo-inhouse/header": "^3.9.3", From 6e78729e2dea836daea3cde470eed5b0cc01debf Mon Sep 17 00:00:00 2001 From: si4126is Date: Thu, 26 Mar 2026 20:15:23 +0900 Subject: [PATCH 4/7] rename class --- packages/disclosure/_mixins.scss | 12 ++++++------ .../src/components/disclosure/Disclosure.tsx | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/disclosure/_mixins.scss b/packages/disclosure/_mixins.scss index 832826b..030851c 100644 --- a/packages/disclosure/_mixins.scss +++ b/packages/disclosure/_mixins.scss @@ -6,27 +6,27 @@ @mixin style($option: variables.$default-option) { $option: map.merge(variables.$default-option, $option); - > ._summary { + > ._leading { @include -summary-proto( $density: map.get($option, density), $size: map.get($option, size) ); } - &[open] > ._summary { + &[open] > ._leading { background-color: adapter.get-background-overlay-color( $brightness: light, $state: activated ); - > ._chevron { + > ._icon { transform: rotate(90deg); } } @each $size in adapter.get-cell-sizes() { - &.-size-#{$size} > ._summary { + &.-size-#{$size} > ._leading { @include -summary-proto( $density: map.get($option, density), $size: $size @@ -35,7 +35,7 @@ } @each $density in adapter.get-densities() { - &.-density-#{$density} > ._summary { + &.-density-#{$density} > ._leading { @include -summary-proto( $density: $density, $size: map.get($option, size) @@ -45,7 +45,7 @@ @each $density in adapter.get-densities() { @each $size in adapter.get-cell-sizes() { - &.-density-#{$density}.-size-#{$size} > ._summary { + &.-density-#{$density}.-size-#{$size} > ._leading { @include -summary-proto($density: $density, $size: $size); } } diff --git a/packages/stories-web/src/components/disclosure/Disclosure.tsx b/packages/stories-web/src/components/disclosure/Disclosure.tsx index 49d3f7b..ce97ef2 100644 --- a/packages/stories-web/src/components/disclosure/Disclosure.tsx +++ b/packages/stories-web/src/components/disclosure/Disclosure.tsx @@ -36,12 +36,12 @@ const Disclosure: FC = (props: Props) => { open={open} {...rest} > - + - {summary} + {summary}
{children} From f47e24b56af54e90b490587125225a09d0a063c2 Mon Sep 17 00:00:00 2001 From: si4126is Date: Thu, 26 Mar 2026 20:16:32 +0900 Subject: [PATCH 5/7] =?UTF-8?q?disclosure=E3=81=AEsummary=E3=81=AEleading?= =?UTF-8?q?=20icon=E3=81=A8text=E3=81=AEgap=E3=82=92xs=E3=81=AB=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit どのサイズにおいてもxsが最適に見えたのでxs固定で良いと判断した --- packages/disclosure/_mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/disclosure/_mixins.scss b/packages/disclosure/_mixins.scss index 030851c..5dab848 100644 --- a/packages/disclosure/_mixins.scss +++ b/packages/disclosure/_mixins.scss @@ -62,7 +62,7 @@ @include cell.style((density: $density, size: $size)); display: flex; - gap: adapter.get-interactive-list-spacing-size(); + gap: adapter.get-gap-size(xs); align-items: center; list-style: none; background-color: From ec7628d938dd1dd86ee2c530d5b0fae4fa71c86b Mon Sep 17 00:00:00 2001 From: si4126is Date: Thu, 26 Mar 2026 20:16:41 +0900 Subject: [PATCH 6/7] update package-lock.json --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index f054d4e..5d145a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30935,6 +30935,7 @@ } }, "packages/disclosure": { + "name": "@pepabo-inhouse/disclosure", "version": "3.9.3", "dependencies": { "@pepabo-inhouse/adapter": "^3.9.3", From ffd759f52d603f86ce52887fed80f9bfc74d4970 Mon Sep 17 00:00:00 2001 From: si4126is Date: Thu, 26 Mar 2026 20:19:59 +0900 Subject: [PATCH 7/7] =?UTF-8?q?disclosure=E3=81=AEsample=20code=E3=81=AE?= =?UTF-8?q?=E3=83=9E=E3=83=BC=E3=82=AF=E3=82=A2=E3=83=83=E3=83=97=E3=81=AB?= =?UTF-8?q?=E3=81=8A=E3=81=91=E3=82=8Bcontent=E3=82=AF=E3=83=A9=E3=82=B9?= =?UTF-8?q?=E3=82=92body=E3=82=AF=E3=83=A9=E3=82=B9=E3=81=AB=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/stories-web/src/components/disclosure/Disclosure.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/stories-web/src/components/disclosure/Disclosure.tsx b/packages/stories-web/src/components/disclosure/Disclosure.tsx index ce97ef2..e5926bc 100644 --- a/packages/stories-web/src/components/disclosure/Disclosure.tsx +++ b/packages/stories-web/src/components/disclosure/Disclosure.tsx @@ -43,7 +43,7 @@ const Disclosure: FC = (props: Props) => { /> {summary}
-
+
{children}