pdh-design-system/src/organisms/Datacards/Datacard.stories.js

PDH Design System React Components

import React, { Children } from "react"
import { Datacard } from "./Datacards"
import { Image } from "@atoms/Image/Image"
import { ListGroup } from "react-bootstrap"
import { Link } from "react-router-dom"
//import { preProcessFile } from 'typescript';

export default {
    title: "organisms/Datacards",
    component: Datacard,
    argTypes: {},
}

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

const GridTemplate = (args) => {
    return (
        <div className="row row-cols-1 row-cols-sm-2 row-cols-lg-3">
            <div className="col" style={{ maxWidth: 400 }}>
                <Datacard {...args} />
            </div>
        </div>
    )
}

export const _DataListCard = Template.bind({})
_DataListCard.args = {
    variant: "basic",
    title: "DataListcard Title",
    body: "Some quick example text to build on the card title and make up the bulk of the cards content.",
    tags: [
        { name: "Science", bg: "primary" },
        { name: "Math", bg: "info" },
    ],
    inlinetags: [{ name: "Restricted", bg: "warning", icon: "lock" }],
    sourcetags: [{ name: "pdhdatabase", bg: "success", icon: "database-fill-lock" }],
    icons: ["filetype-pdf", "filetype-doc", "filetype-xls"],
    link: "/datalistcard",
}

export const _SlideCard = GridTemplate.bind({})
_SlideCard.args = {
    variant: "slide",
    title: "DataFlipcard Title which is long and should truncate on the front of the card",
    body: "Some quick example text to build on the card title and make up the bulk of the cards content. The content shoudl be able to cater to a long string of text if needed, and ensure the card size on both front and back are the same height as each other.",
    image: "https://placehold.co/600x800",
    tags: [
        { name: "Science", bg: "primary" },
        { name: "Math", bg: "info" },
    ],
    inlinetags: [{ name: "Restricted", bg: "warning", icon: "lock" }],
    sourcetags: [{ name: "pdhdatabase", bg: "success", icon: "database-fill-lock" }],
    icons: ["filetype-pdf", "filetype-doc", "filetype-xls"],
    link: "/datalistcard",
    className: "border-light",
}
export const _FlipCard = GridTemplate.bind({})
_FlipCard.args = {
    variant: "flip",
    title: "DataFlipcard Title which is long and should truncate on the front of the card",
    body: "Some quick example text to build on the card title and make up the bulk of the cards content. The content shoudl be able to cater to a long string of text if needed, and ensure the card size on both front and back are the same height as each other.",
    image: "https://placehold.co/600x800",
    tags: [
        { name: "Science", bg: "primary" },
        { name: "Math", bg: "info" },
    ],
    inlinetags: [{ name: "Restricted", bg: "warning", icon: "lock" }],
    sourcetags: [{ name: "pdhdatabase", bg: "success", icon: "database-fill-lock" }],
    icons: ["filetype-pdf", "filetype-doc", "filetype-xls"],
    link: "/datalistcard",
}
export const _SlideCardWithImageComponent = GridTemplate.bind({})
_SlideCardWithImageComponent.args = {
    variant: "slide",
    title: "DataFlipcard Title which is long and should truncate on the front of the card",
    body: "Some quick example text to build on the card title and make up the bulk of the cards content. The content shoudl be able to cater to a long string of text if needed, and ensure the card size on both front and back are the same height as each other.",
    image: <Image src="https://pacificdata.org/themes/custom/spc/img/rsz_home_bg_1_0.jpg" />,
}
export const _FlipCardWithoutImage = GridTemplate.bind({})
_FlipCardWithoutImage.args = {
    variant: "flip",
    title: "DataFlipcard Title which is long and should truncate on the front of the card",
    icons: ["filetype-pdf", "filetype-doc", "filetype-xls"],
}