feat(timeline-item): header content

Wizleap-Inc · Oct 27, 2024 · d718d01 · d718d01
1 parent 910e034
commit d718d01
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 0 deletions.
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
@@ -292,3 +292,21 @@ Disabled.args = {
   title: "disabledにすると、タイムラインのアイテムがグレーアウトします",
   disabled: true,
 };
+
+export const Header: StoryFn<typeof WizTimelineItem> = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: { WizTimelineItem, WizText },
+  template: `
+    <WizTimelineItem v-bind="args">
+      <template #header>
+        <WizText fontSize="sm">header content</WizText>
+      </template>
+    </WizTimelineItem>
+  `,
+});
+
+Header.args = {
+  title: "タイトルの下にコンテンツを表示できます",
+};
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
@@ -39,6 +39,7 @@
           <span v-if="isTitleEscape" :class="styles.title">
             {{ title }}
           </span>
+          <slot name="header" />
         </div>
         <div :class="styles.body" v-if="slot.default">
           <slot />

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
@@ -16,6 +16,7 @@ interface TimelineItemProps {
   tag?: string;
   annotation?: ReactNode;
   children?: ReactNode;
+  header?: ReactNode;
   footer?: ReactNode;
   disabled?: boolean;
   icon?: TIcon;
@@ -35,6 +36,7 @@ const TimelineItem: FC<TimelineItemProps> = ({
   annotation,
   children,
   footer,
+  header,
   disabled = false,
   icon = WizICalendar,
 }) => {
@@ -95,6 +97,7 @@ const TimelineItem: FC<TimelineItemProps> = ({
               <span className={styles.annotation}>{annotation}</span>
             </div>
             {isTitleEscape && <span className={styles.title}>{title}</span>}
+            <div>{header}</div>
           </div>
           {children && <div className={styles.body}>{children}</div>}
         </div>

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
@@ -198,6 +198,18 @@ export const VariantGray: Story = {
     />
   ),
 };
+export const Header: Story = {
+  render: () => (
+    <WizTimelineItem
+      title="タイトルの下にコンテンツを表示できます"
+      header={
+        <>
+          <WizText fontSize="sm">header content</WizText>
+        </>
+      }
+    />
+  ),
+};
 
 export const MobileDevice: Story = {
   render: () => (