Merge pull request #1425 from Wizleap-Inc/feat/gray-timeline

Feat(timeline-item): gray background
Wizleap-Inc · Dec 9, 2024 · 54a9802 · 54a9802
2 parents dbc5da1 + 6851473
commit 54a9802
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 51 deletions.
diff --git a/.changeset/soft-rivers-count.md b/.changeset/soft-rivers-count.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+Feat(timeline-item): 背景色として gray.200 を選択可能に
diff --git a/packages/styles/customs/timeline.css.ts b/packages/styles/customs/timeline.css.ts
@@ -112,7 +112,6 @@ export const card = style({
   width: "100%",
   borderRadius: THEME.spacing.xs2,
   overflow: "hidden",
-  backgroundColor: THEME.color.white[800],
 });
 
 export const contents = style({

diff --git a/packages/wiz-ui-next/src/components/custom/timeline/stories/timeline-item.stories.ts b/packages/wiz-ui-next/src/components/custom/timeline/stories/timeline-item.stories.ts
@@ -40,6 +40,10 @@ export default {
     disabled: {
       control: { type: "boolean" },
     },
+    backgroundColor: {
+      control: { type: "select" },
+      options: ["white.800", "gray.200"],
+    },
   },
   decorators: [
     () => ({
@@ -207,10 +211,10 @@ Overview.parameters = {
   },
 };
 
-const Template: StoryFn<typeof WizTimelineItem> = (_, { argTypes }) => ({
-  props: Object.keys(argTypes),
+const Template: StoryFn<typeof WizTimelineItem> = (args) => ({
+  setup: () => ({ args }),
   components: { WizTimelineItem },
-  template: `<WizTimelineItem v-bind="$props"/>`,
+  template: `<WizTimelineItem v-bind="args"/>`,
 });
 
 export const Icon = Template.bind({});
@@ -292,3 +296,9 @@ Disabled.args = {
   title: "disabledにすると、タイムラインのアイテムがグレーアウトします",
   disabled: true,
 };
+
+export const BackgroundColor = Template.bind({});
+BackgroundColor.args = {
+  title: "背景色を設定できます",
+  backgroundColor: "gray.200",
+};
diff --git a/packages/wiz-ui-next/src/components/custom/timeline/timeline-item.vue b/packages/wiz-ui-next/src/components/custom/timeline/timeline-item.vue
@@ -15,7 +15,13 @@
     >
       <WizIcon :size="iconSize" :icon="icon" color="white.800" />
     </div>
-    <div :class="[styles.card, disabled && styles.disabled]">
+    <div
+      :class="[
+        styles.card,
+        disabled && styles.disabled,
+        backgroundStyle[backgroundColor],
+      ]"
+    >
       <div :class="styles.contents">
         <div :class="styles.header">
           <div :class="styles.headerRow">
@@ -50,7 +56,8 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { ColorKeys, ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { backgroundStyle } from "@wizleap-inc/wiz-ui-styles/commons";
 import * as styles from "@wizleap-inc/wiz-ui-styles/customs/timeline.css";
 import { PropType, computed, inject, useSlots } from "vue";
 
@@ -96,6 +103,11 @@ const props = defineProps({
     type: Object as PropType<TIcon>,
     default: WizICalendar,
   },
+  backgroundColor: {
+    type: String as PropType<Extract<ColorKeys, "white.800" | "gray.200">>,
+    required: false,
+    default: "white.800",
+  },
 });
 
 const TAG_COLOR_MAP = {

diff --git a/packages/wiz-ui-react/src/components/custom/timeline/components/timeline-item.tsx b/packages/wiz-ui-react/src/components/custom/timeline/components/timeline-item.tsx
@@ -1,4 +1,5 @@
-import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { ColorKeys, ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { backgroundStyle } from "@wizleap-inc/wiz-ui-styles/commons";
 import * as styles from "@wizleap-inc/wiz-ui-styles/customs/timeline.css";
 import clsx from "clsx";
 import { FC, ReactNode, useContext, useMemo } from "react";
@@ -19,6 +20,7 @@ interface TimelineItemProps {
   footer?: ReactNode;
   disabled?: boolean;
   icon?: TIcon;
+  backgroundColor?: Extract<ColorKeys, "white.800" | "gray.200">;
 }
 
 const TAG_COLOR_MAP = {
@@ -37,6 +39,7 @@ const TimelineItem: FC<TimelineItemProps> = ({
   footer,
   disabled = false,
   icon = WizICalendar,
+  backgroundColor = "white.800",
 }) => {
   const ctx = useContext(TimelineContext);
   if (!ctx) {
@@ -75,7 +78,13 @@ const TimelineItem: FC<TimelineItemProps> = ({
       >
         <WizIcon size={iconSize} icon={icon} color="white.800" />
       </div>
-      <div className={clsx(styles.card, disabled && styles.disabled)}>
+      <div
+        className={clsx(
+          styles.card,
+          disabled && styles.disabled,
+          backgroundStyle[backgroundColor]
+        )}
+      >
         <div className={styles.contents}>
           <div className={styles.header}>
             <div className={styles.headerRow}>

diff --git a/packages/wiz-ui-react/src/components/custom/timeline/stories/timeline-item.stories.tsx b/packages/wiz-ui-react/src/components/custom/timeline/stories/timeline-item.stories.tsx
@@ -140,63 +140,51 @@ export const Overview: Story = {
 };
 
 export const Icon: Story = {
-  render: () => (
-    <WizTimelineItem
-      variant="success"
-      title="Iconをカスタマイズできます。"
-      icon={WizIAdd}
-    />
-  ),
+  args: {
+    variant: "success",
+    title: "Iconをカスタマイズできます。",
+    icon: WizIAdd,
+  },
 };
 
 export const WithTag: Story = {
-  render: () => (
-    <WizTimelineItem
-      variant="success"
-      tag="これはタグです"
-      title="タグを設定できます"
-    />
-  ),
+  args: {
+    variant: "success",
+    title: "タグを設定できます",
+    tag: "これはタグです",
+  },
 };
 
 export const WithAnnotation: Story = {
-  render: () => (
-    <WizTimelineItem
-      variant="success"
-      title="注釈（日付）を設定できます"
-      annotation="2021年01月01日"
-    />
-  ),
+  args: {
+    variant: "success",
+    title: "注釈（日付）を設定できます",
+    annotation: "2021年01月01日",
+  },
 };
 
 export const VariantFailure: Story = {
-  render: () => (
-    <WizTimelineItem
-      variant="failure"
-      tag="タグは赤くなります"
-      title="失敗ステータスのバリエーションです"
-    />
-  ),
+  args: {
+    variant: "failure",
+    tag: "タグは赤くなります",
+    title: "失敗ステータスのバリエーションです",
+  },
 };
 
 export const VariantYellow: Story = {
-  render: () => (
-    <WizTimelineItem
-      variant="yellow"
-      tag="タグは黄色になります"
-      title="黄色のバリエーションです"
-    />
-  ),
+  args: {
+    variant: "yellow",
+    tag: "タグは黄色になります",
+    title: "黄色のバリエーションです",
+  },
 };
 
 export const VariantGray: Story = {
-  render: () => (
-    <WizTimelineItem
-      variant="gray"
-      tag="タグは灰色になります"
-      title="灰色のバリエーションです"
-    />
-  ),
+  args: {
+    variant: "gray",
+    tag: "タグは灰色になります",
+    title: "灰色のバリエーションです",
+  },
 };
 
 export const MobileDevice: Story = {
@@ -220,5 +208,14 @@ export const MobileDevice: Story = {
 };
 
 export const Disabled: Story = {
-  render: () => <Template disabled />,
+  args: {
+    disabled: true,
+  },
+};
+
+export const BackgroundColor: Story = {
+  args: {
+    backgroundColor: "gray.200",
+    title: "背景色を設定できます",
+  },
 };