pdh-design-system/src/organisms/Card/Card.stories.js

PDH Design System React Components

import React, { Children } from "react"
import { Card } from "./Card"
import { ListGroup } from "react-bootstrap"
//import { preProcessFile } from 'typescript';

export default {
    title: "organisms/Card",
    component: Card,
    argTypes: {
        image: {
            control: {
                type: "text",
            },
            description: "Image URL",
        },
        tags: {
            control: {
                type: "array",
            },
            description: 'Tags eg. [{"name": "tag1", "bg": "info"}]',
        },
    },
}

const Template = (args) => {
    return <Card {...args} />
}

const KitchenSink = (args) => {
    return (
        <Card {...args}>
            <ListGroup>
                <ListGroup.Item>Item 1</ListGroup.Item>
                <ListGroup.Item>Item 2</ListGroup.Item>
                <ListGroup.Item>Item 3</ListGroup.Item>
            </ListGroup>
        </Card>
    )
}

export const _Card = Template.bind({})
_Card.args = {
    width: "18rem",
    header: "Header",
    title: "Card Title",
    body: "Some quick example text to build on the card title and make up the bulk of the cards content.",
    headerclasses: "text-bg-primary",
    textBg: "",
}

export const _CardTile = Template.bind({})
_CardTile.args = {
    width: "12rem",
    header: "Tile",
    title: "Card Title",
    body: "Some quick example text to build on the card title and make up the bulk of the cards content.",
    className: "text-bg-primary",
}

export const _ImageCard = Template.bind({})
_ImageCard.args = {
    // header: 'Header', ## It's either an image or a header. Using both is buggy (rounded border issue).
    title: "Card Title",
    body: "Some quick example text to build on the card title and make up the bulk of the cards content.",
    image: "https://picsum.photos/300",
    imagevariant: "top",
}

export const _KitchenSinkCard = KitchenSink.bind({})
_KitchenSinkCard.args = {
    header: "Header",
    title: "Card Title",
    body: "Some quick example text to build on the card title and make up the bulk of the cards content.",
    image: "https://picsum.photos/350",
    imagevariant: "top",
    footer: "Footer",
}

export const _HorizontalCard = Template.bind({})
_HorizontalCard.args = {
    title: "Card Title",
    body: (
        <p>
            Some quick example text in a JSX Element to build on the card title and make up the bulk of the cards
            content.
        </p>
    ),
    image: "https://picsum.photos/400",
    orientation: "horizontal",
    imagevariant: "bottom",
}

export const _CardWithTags = Template.bind({})
_CardWithTags.args = {
    title: "Card Title",
    body: "Some quick example text to build on the card title and make up the bulk of the cards content.",
    tags: [
        { name: "tag1", bg: "info" },
        { name: "tag2", bg: "danger" },
    ],
}

export const _CardWithButtons = Template.bind({})
_CardWithButtons.args = {
    title: "Card Title",
    body: "Some quick example text to build on the card title and make up the bulk of the cards content.",
    buttons: [
        { name: "Button1", variant: "primary" },
        { name: "Button2", variant: "secondary" },
    ],
}