orcs-design-system/es/components/Card/Card.stories.js

TeamForm's Design System, aka: ORCS

import React from "react";
import Box from "../Box";
import StyledLink from "../StyledLink";
import { H3, P } from "../Typography";
import Spacer from "../Spacer";
import Icon from "../Icon";
import Flex from "../Flex";
import Button from "../Button";
import Card from ".";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/Card",
  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
    bg: "greyLightest",
    p: "r",
    children: storyFn()
  })],
  component: Card
};
export const basicCard = () => /*#__PURE__*/_jsxs(Card, {
  title: "Card title",
  subtitle: "Subtitle",
  children: [/*#__PURE__*/_jsx(P, {
    marginBottom: 4,
    children: "Card content lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  }), /*#__PURE__*/_jsx(StyledLink, {
    "aria-label": "Card title - Learn More",
    href: "#",
    bold: true,
    children: "Learn more"
  })]
});
basicCard.story = {
  name: "Basic card"
};
export const alternateCard = () => /*#__PURE__*/_jsx(Card, {
  alternate: true,
  icon: ["fas", "building"],
  title: "Works for",
  subtitle: "18",
  children: /*#__PURE__*/_jsx(P, {
    children: "This is an alternate style card that supports an icon and moves the subtitle to the right of the title, rather than underneath it."
  })
});
alternateCard.story = {
  name: "Alternate card"
};
export const colouredCards = () => /*#__PURE__*/_jsxs(Spacer, {
  my: 4,
  children: [/*#__PURE__*/_jsx(Card, {
    alternate: true,
    icon: ["fas", "map-marker-alt"],
    title: "Locations",
    subtitle: "57",
    colour: "primary",
    children: /*#__PURE__*/_jsx(P, {
      children: "This is an alternate style card that supports a coloured border, an icon and moves the subtitle to the right of the title, rather than underneath it."
    })
  }), /*#__PURE__*/_jsx(Card, {
    alternate: true,
    icon: ["fas", "address-card"],
    title: "Roles",
    subtitle: "Here is a subtitle",
    colour: "success",
    children: /*#__PURE__*/_jsx(P, {
      children: "This is an alternate style card that supports a coloured border, an icon and moves the subtitle to the right of the title, rather than underneath it."
    })
  }), /*#__PURE__*/_jsx(Card, {
    alternate: true,
    icon: ["fas", "user"],
    title: "4,539 People",
    changeValue: "No change",
    colour: "warning",
    children: /*#__PURE__*/_jsx(P, {
      children: "This is an alternate style card that supports a coloured border, an icon and shows a delta change."
    })
  }), /*#__PURE__*/_jsx(Card, {
    alternate: true,
    icon: ["fas", "chart-pie"],
    title: "12 Divisions",
    changeValue: "2 (-1%)",
    changeIcon: "arrowDown",
    colour: "danger",
    children: /*#__PURE__*/_jsx(P, {
      children: "This is an alternate style card that supports a coloured border, an icon and shows a delta change."
    })
  }), /*#__PURE__*/_jsx(Card, {
    alternate: true,
    icon: ["fas", "users"],
    title: "289 Teams",
    changeValue: "9 (+2%)",
    changeIcon: "arrowUp",
    colour: "greyDark",
    children: /*#__PURE__*/_jsx(P, {
      children: "This is an alternate style card that supports a coloured border, an icon and shows a delta change."
    })
  })]
});
colouredCards.story = {
  name: "Coloured cards"
};
export const complexCard = () => /*#__PURE__*/_jsx(Flex, {
  justifyContent: "center",
  children: /*#__PURE__*/_jsxs(Spacer, {
    mx: "r",
    children: [/*#__PURE__*/_jsx(Card, {
      children: /*#__PURE__*/_jsxs(Flex, {
        flexDirection: "column",
        gap: "r",
        alignItems: "center",
        children: [/*#__PURE__*/_jsx(Icon, {
          icon: ["fas", "file"],
          size: "3x",
          color: "greyLight"
        }), /*#__PURE__*/_jsx(H3, {
          children: "Create new"
        }), /*#__PURE__*/_jsx(P, {
          children: "Start with a blank slate and add your own data"
        }), /*#__PURE__*/_jsx(Button, {
          children: "Start fresh"
        })]
      })
    }), /*#__PURE__*/_jsx(Card, {
      children: /*#__PURE__*/_jsxs(Flex, {
        flexDirection: "column",
        gap: "r",
        alignItems: "center",
        children: [/*#__PURE__*/_jsx(Icon, {
          icon: ["fas", "eye"],
          size: "3x",
          color: "greyLight"
        }), /*#__PURE__*/_jsx(H3, {
          children: "Explore app"
        }), /*#__PURE__*/_jsx(P, {
          children: "Look at pre-populated data to see app in action"
        }), /*#__PURE__*/_jsx(Button, {
          children: "View example"
        })]
      })
    })]
  })
});
complexCard.story = {
  name: "Complex card"
};
basicCard.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "basicCard"
};
alternateCard.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "alternateCard"
};
colouredCards.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "colouredCards"
};
complexCard.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "complexCard"
};