disclosureを追加

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-*;

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;

packages/components-web/package.json

@@ -24,6 +24,7 @@
     "@pepabo-inhouse/constants": "^4.0.0",
     "@pepabo-inhouse/container": "^4.0.0",
     "@pepabo-inhouse/description-list": "^4.0.0",
+    "@pepabo-inhouse/disclosure": "^4.0.0",
     "@pepabo-inhouse/flavor": "^4.0.0",
     "@pepabo-inhouse/grid": "^4.0.0",
     "@pepabo-inhouse/header": "^4.0.0",

packages/disclosure/_index.scss

@@ -0,0 +1 @@
+@forward "./mixins" show style, export;

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);
+
+  > ._leading {
+    @include -summary-proto(
+      $density: map.get($option, density),
+      $size: map.get($option, size)
+    );
+  }
+
+  &[open] > ._leading {
+    background-color:
+      adapter.get-background-overlay-color(
+        $brightness: light,
+        $state: activated
+      );
+
+    > ._icon {
+      transform: rotate(90deg);
+    }
+  }
+
+  @each $size in adapter.get-cell-sizes() {
+    &.-size-#{$size} > ._leading {
+      @include -summary-proto(
+        $density: map.get($option, density),
+        $size: $size
+      );
+    }
+  }
+
+  @each $density in adapter.get-densities() {
+    &.-density-#{$density} > ._leading {
+      @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} > ._leading {
+        @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-gap-size(xs);
+  align-items: center;
+  list-style: none;
+  background-color:
+    adapter.get-background-overlay-color(
+      $brightness: light,
+      $state: enabled
+    );
+  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();
+  }
+}

packages/disclosure/_variables.scss

@@ -0,0 +1,4 @@
+$default-option: (
+  density: normal,
+  size: m,
+);

packages/disclosure/inhouse-disclosure.scss

@@ -0,0 +1,2 @@
+@use "./mixins";
+@include mixins.export;

packages/disclosure/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@pepabo-inhouse/disclosure",
+  "description": "Inhouse Components for the web disclosure component",
+  "version": "4.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pepabo/inhouse-components-web.git",
+    "directory": "packages/disclosure"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pepabo-inhouse/adapter": "^4.0.0",
+    "@pepabo-inhouse/cell": "^4.0.0",
+    "@pepabo-inhouse/icon": "^4.0.0"
+  },
+  "devDependencies": {
+    "@pepabo-inhouse/constants": "^4.0.0",
+    "@pepabo-inhouse/flavor": "^4.0.0",
+    "@pepabo-inhouse/tokens": "^2.4.0"
+  }
+}

packages/stories-web/package.json

@@ -27,6 +27,7 @@
     "@pepabo-inhouse/container": "^4.0.0",
     "@pepabo-inhouse/description-list": "^4.0.0",
     "@pepabo-inhouse/dialog": "^4.0.0",
+    "@pepabo-inhouse/disclosure": "^4.0.0",
     "@pepabo-inhouse/flavor": "^4.0.0",
     "@pepabo-inhouse/grid": "^4.0.0",
     "@pepabo-inhouse/header": "^4.0.0",

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<Size, 's' | 'm' | 'l'>
+  summary: string
+}
+
+const Disclosure: FC<Props> = (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 (
+    <details
+      className={classes.join(' ')}
+      open={open}
+      {...rest}
+    >
+      <summary className='_leading'>
+        <Icon
+          className='_icon'
+          icon='chevron_right'
+        />
+        {summary}
+      </summary>
+      <div className='_body'>
+        {children}
+      </div>
+    </details>
+  )
+}
+
+export default Disclosure

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<Props> = (args) => <Disclosure {...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 = () => (
+  <>
+    <Disclosure
+      density='normal'
+      size='m'
+      summary='First item'
+    >
+      {content}
+    </Disclosure>
+    <Disclosure
+      density='normal'
+      open
+      size='m'
+      summary='Second item (open)'
+    >
+      {content}
+    </Disclosure>
+    <Disclosure
+      density='normal'
+      size='m'
+      summary='Third item'
+    >
+      {content}
+    </Disclosure>
+  </>
+)
+
+export const Multiple = MultipleTemplate.bind({})