Card index.stories.tsx

85.71% Statements 6/7
100% Branches 0/0
50% Functions 1/2
83.33% Lines 5/6
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
1x
1x
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
  import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import {
  Title,
  Subtitle,
  Description,
  Primary,
  ArgsTable,
  Stories,
  PRIMARY_STORY,
} from "@storybook/addon-docs";
 
import Card from "./index";
 
export default {
  title: "Components/Card",
  component: Card,
  parameters: {
    backgrounds: {
      default: "green",
      values: [{ name: "green", value: "#d5ffd7" }],
    },
    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle>
            <p>Component for displaying blog posts in card format</p>
          </Subtitle>
          <Description
            markdown={`## What is this component?
The Card Component is used to display the article summary and header in a card format on the index page of a blog.
 
In addition to the title, the article includes a description, the date the article was written, and tag information, which are also displayed clearly.
 
## Preview
![preview](./assets/storybook-card-prev.gif)
`}
          />
          <Primary />
          <ArgsTable story={PRIMARY_STORY} />
          <Stories />
        </>
      ),
    },
    viewport: {
      defaultViewport: "tablet",
    },
  },
} as ComponentMeta<typeof Card>;
 
const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
 
export const Default = Template.bind({});
Default.args = {
  title: "Storybookを使ってコンポーネントを管理しよう！",
  date: "2022-01-01",
  url: "#",
  headerImage: "https://i.imgur.com/6B7WC7D.jpg",
  description: "こんにちはこんにちはこんにちはこんにちは！！",
  tags: ["テスト", "Storybook"],
  index: 0,
};
 
export const NoTags = Template.bind({});
NoTags.args = {
  title: "Storybookを使ってコンポーネントを管理しよう！",
  date: "2022-01-01",
  url: "#",
  headerImage: "https://i.imgur.com/6B7WC7D.jpg",
  description: "こんにちはこんにちはこんにちはこんにちは！！",
  tags: [],
  index: 0,
};