@charcoal-ui/react 6.0.0-rc.0 → 6.0.0-rc.2

package/src/components/Carousel/index.css

@@ -0,0 +1,274 @@
+.charcoal-carousel {
+  position: relative;
+  display: block;
+
+  &[data-full-width='true'] {
+    width: 100vw;
+    margin-inline: calc(50% - 50vw);
+  }
+}
+
+.charcoal-carousel__viewport {
+  position: relative;
+}
+
+.charcoal-carousel__scroller {
+  position: relative;
+  display: flex;
+  gap: 24px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  outline: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &[data-focus-visible] {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
+}
+
+.charcoal-carousel[data-size='S'] .charcoal-carousel__scroller {
+  gap: 0;
+}
+
+/* スクロールスナップ type は prop（scrollSnap.type）で scroller に出し分ける。
+   align は基底 .charcoal-carousel__item の後（後述）に置く（no-descending-specificity 回避）。
+   未指定時の既定（M=none / S=mandatory / align=center）は JS 側で data 属性に解決する。 */
+.charcoal-carousel[data-scroll-snap-type='none'] .charcoal-carousel__scroller {
+  scroll-snap-type: none;
+}
+
+.charcoal-carousel[data-scroll-snap-type='proximity']
+  .charcoal-carousel__scroller {
+  scroll-snap-type: x proximity;
+}
+
+.charcoal-carousel[data-scroll-snap-type='mandatory']
+  .charcoal-carousel__scroller {
+  scroll-snap-type: x mandatory;
+}
+
+/* グラデーション: はみ出してスクロール可能な側のみ、端のアイテムを背景色（白）へ
+   フェードさせる。mask による透過ではなく、72px の「背景色→透明」オーバーレイを
+   ビューポートに重ねて白で覆う。スクロール可能な側だけ data-can-prev/next で出し分ける。 */
+.charcoal-carousel[data-has-gradient='true']
+  .charcoal-carousel__viewport::before,
+.charcoal-carousel[data-has-gradient='true']
+  .charcoal-carousel__viewport::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 72px;
+  pointer-events: none;
+  opacity: 0;
+  transition: 0.2s opacity;
+  z-index: 1;
+}
+
+.charcoal-carousel[data-has-gradient='true']
+  .charcoal-carousel__viewport::before {
+  left: 0;
+  background: linear-gradient(to right, #fff, transparent);
+}
+
+.charcoal-carousel[data-has-gradient='true']
+  .charcoal-carousel__viewport::after {
+  right: 0;
+  background: linear-gradient(to left, #fff, transparent);
+}
+
+.charcoal-carousel[data-has-gradient='true'][data-can-prev='true']
+  .charcoal-carousel__viewport::before {
+  opacity: 1;
+}
+
+.charcoal-carousel[data-has-gradient='true'][data-can-next='true']
+  .charcoal-carousel__viewport::after {
+  opacity: 1;
+}
+
+.charcoal-carousel__item {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.charcoal-carousel[data-size='S'] .charcoal-carousel__item {
+  flex: 0 0 100%;
+}
+
+/* scroll-snap-align は prop（scrollSnap.align）で出し分ける。基底 .charcoal-carousel__item
+   より後に置くことで no-descending-specificity を回避する。 */
+.charcoal-carousel[data-scroll-snap-align='center'] .charcoal-carousel__item {
+  scroll-snap-align: center;
+}
+
+.charcoal-carousel[data-scroll-snap-align='start'] .charcoal-carousel__item {
+  scroll-snap-align: start;
+}
+
+/* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */
+
+/* マスクと同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */
+.charcoal-carousel__navigation {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  display: grid;
+  grid-template-columns: 72px 1fr 72px;
+  align-items: center;
+  /* 白フェード（z-index: 1）より上にボタンを表示する */
+  z-index: 2;
+  /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */
+  opacity: 0;
+  transition: 0.4s opacity;
+
+  &[data-visible='false'] {
+    display: none;
+  }
+}
+
+/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */
+.charcoal-carousel:hover .charcoal-carousel__navigation,
+.charcoal-carousel:focus-within .charcoal-carousel__navigation {
+  opacity: 1;
+}
+
+.charcoal-carousel__navigation__item {
+  pointer-events: auto;
+
+  &[data-direction='prev'] {
+    grid-column: 1;
+    justify-self: center;
+  }
+
+  &[data-direction='next'] {
+    grid-column: 3;
+    justify-self: center;
+  }
+}
+
+/* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より
+   高い詳細度で打ち消すため、ルートを前置する。 */
+.charcoal-carousel .charcoal-carousel__navigation__item[data-hidden='true'] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* タッチデバイスではナビゲーションボタンを出さず、スワイプ操作に委ねる。 */
+@media (hover: none) and (pointer: coarse) {
+  .charcoal-carousel__navigation {
+    display: none;
+  }
+}
+
+/* ── Indicator: JS Fallback ── */
+
+.charcoal-carousel__indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  gap: 8px;
+
+  &[data-visible='false'] {
+    display: none;
+  }
+}
+
+.charcoal-carousel__indicator__item {
+  appearance: none;
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background-color: var(--charcoal-color-text-tertiary-default);
+  cursor: pointer;
+  transition: 0.2s background-color;
+
+  &:hover {
+    background-color: var(--charcoal-color-text-secondary-default);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(0, 150, 250, 0.56);
+    outline-offset: 2px;
+  }
+
+  &[data-active='true'] {
+    background-color: var(--charcoal-color-text-default);
+  }
+}
+
+/* ── CSS Scroll Markers (progressive enhancement) ── */
+
+/* CSS Scroll Markers / Anchor Positioning は新しい仕様で、stylelint がプロパティ・
+   擬似要素・擬似クラスを未知と判定するため、この @supports ブロックでは該当ルールを無効化する。 */
+/* stylelint-disable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */
+@supports (scroll-marker-group: after) {
+  .charcoal-carousel[data-indicator='true'] {
+    padding-bottom: 40px;
+  }
+
+  .charcoal-carousel__scroller {
+    anchor-name: --charcoal-carousel;
+    scroll-marker-group: after;
+
+    &::scroll-button(*) {
+      content: none;
+    }
+
+    &::scroll-marker-group {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 40px;
+      gap: 8px;
+
+      position: absolute;
+      position-anchor: --charcoal-carousel;
+      top: anchor(bottom);
+      justify-self: anchor-center;
+    }
+  }
+
+  .charcoal-carousel[data-indicator='false'] .charcoal-carousel__scroller {
+    scroll-marker-group: none;
+  }
+
+  .charcoal-carousel__item::scroll-marker {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border: 0;
+    border-radius: 50%;
+    background-color: var(--charcoal-color-text-tertiary-default);
+    cursor: pointer;
+    transition: 0.2s background-color;
+
+    &:hover {
+      background-color: var(--charcoal-color-text-secondary-default);
+    }
+
+    &:focus {
+      outline: 2px solid rgba(0, 150, 250, 0.56);
+      outline-offset: 2px;
+    }
+
+    &:target-current {
+      background-color: var(--charcoal-color-text-default);
+    }
+  }
+
+  .charcoal-carousel__indicator {
+    display: none;
+  }
+}
+/* stylelint-enable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */

package/src/components/Carousel/index.story.tsx

@@ -0,0 +1,169 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+import Carousel, { type CarouselItem } from '.'
+
+const sampleImage = (
+  <img
+    src="/carousel-sample.png"
+    alt="サンプル画像"
+    style={{
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      display: 'block',
+    }}
+  />
+)
+
+const items: CarouselItem[] = Array.from({ length: 6 }, (_, i) => ({
+  id: `item-${i + 1}`,
+  children: sampleImage,
+}))
+
+// 横幅が確定したスロット（defaultScroll の初期位置計算と 0.75 ページ送りを確認するため）
+const numberedItems: CarouselItem[] = Array.from({ length: 20 }, (_, i) => ({
+  id: `num-${i + 1}`,
+  children: (
+    <div
+      style={{
+        width: 200,
+        height: 120,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: i % 2 === 0 ? '#cfe3ff' : '#ffe3cf',
+        borderRadius: 8,
+        font: 'bold 32px sans-serif',
+        color: '#333',
+      }}
+    >
+      {i + 1}
+    </div>
+  ),
+}))
+
+export default {
+  title: 'react/Carousel',
+  component: Carousel,
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    items,
+    size: 'M',
+    hasGradient: false,
+    fullWidth: false,
+    scrollStep: 0.75,
+  },
+  argTypes: {
+    size: {
+      control: { type: 'radio' },
+      options: ['S', 'M'],
+    },
+    hasGradient: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    navigationButtons: { control: 'boolean' },
+    indicator: { control: 'boolean' },
+    // react-sandbox 互換コールバックを Actions パネルで確認できるようにする。
+    onScroll: { action: 'onScroll' },
+    onResize: { action: 'onResize' },
+    onScrollStateChange: { action: 'onScrollStateChange' },
+    scrollStep: {
+      // number は clientWidth に対する比率。関数 (ctx) => px も渡せるが、
+      // Controls では数値（比率）のみ操作可能。関数形式は ScrollStepFunction story を参照。
+      control: { type: 'range', min: 0.1, max: 1.5, step: 0.05 },
+    },
+  },
+} satisfies Meta<typeof Carousel>
+
+export const SizeM: StoryObj<typeof Carousel> = {
+  args: { size: 'M' },
+}
+
+export const SizeS: StoryObj<typeof Carousel> = {
+  args: { size: 'S' },
+}
+
+export const WithGradient: StoryObj<typeof Carousel> = {
+  args: { size: 'M', hasGradient: true },
+}
+
+export const FullWidth: StoryObj<typeof Carousel> = {
+  args: { size: 'M', fullWidth: true },
+}
+
+export const NavigationButtonsOnSizeS: StoryObj<typeof Carousel> = {
+  args: { size: 'S', navigationButtons: true },
+}
+
+export const IndicatorOnSizeM: StoryObj<typeof Carousel> = {
+  args: { size: 'M', indicator: true },
+}
+
+// 横幅が確定したスロット（番号付き）
+export const DefaultScrollCenter: StoryObj<typeof Carousel> = {
+  args: { size: 'M', items: numberedItems, defaultScroll: { align: 'center' } },
+}
+
+export const DefaultScrollRight: StoryObj<typeof Carousel> = {
+  args: { size: 'M', items: numberedItems, defaultScroll: { align: 'right' } },
+}
+
+// 遅延読み込み画像（マウント時に幅が未確定）でも初期位置が効くことの確認
+export const DefaultScrollCenterAsyncImages: StoryObj<typeof Carousel> = {
+  args: { size: 'M', items, defaultScroll: { align: 'center' } },
+}
+
+// 白フェードが見えることの確認用（暗色コンテンツなら白フェードが明確に出る）
+const darkTiles: CarouselItem[] = Array.from({ length: 10 }, (_, i) => ({
+  id: `dark-${i + 1}`,
+  children: (
+    <div
+      style={{
+        width: 220,
+        height: 140,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#2a3b8f',
+        color: '#fff',
+        borderRadius: 4,
+        font: 'bold 28px sans-serif',
+      }}
+    >
+      {i + 1}
+    </div>
+  ),
+}))
+
+export const GradientOnDarkContent: StoryObj<typeof Carousel> = {
+  args: { size: 'M', hasGradient: true, items: darkTiles },
+}
+
+// scrollStep に関数を渡してフル制御する例（送り量を clientWidth - 48px に固定）。
+// Controls の数値スライダーでは表現できない使い方の確認用。
+export const ScrollStepFunction: StoryObj<typeof Carousel> = {
+  args: {
+    size: 'M',
+    items: numberedItems,
+    scrollStep: ({ clientWidth }) => clientWidth - 48,
+  },
+}
+
+// scroll-snap を item ごと（mandatory）に。align: start で各アイテムが左端にスナップする。
+export const ScrollSnapPerItem: StoryObj<typeof Carousel> = {
+  args: {
+    size: 'M',
+    items: numberedItems,
+    scrollSnap: { type: 'mandatory', align: 'start' },
+  },
+}
+
+export const AllControls: StoryObj<typeof Carousel> = {
+  args: {
+    size: 'M',
+    hasGradient: true,
+    fullWidth: false,
+    navigationButtons: true,
+    indicator: true,
+  },
+}