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

TeamForm's Design System, aka: ORCS

import React from "react";
import Expandable from ".";
import Typography from "../Typography";
import Box from "../Box";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/Expandable",
  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
    height: "300px",
    children: storyFn()
  })],
  component: Expandable
};
export const defaultExpandable = () => /*#__PURE__*/_jsx(Expandable, {
  title: "Details",
  children: /*#__PURE__*/_jsx(Typography.P, {
    children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
  })
});
export const openExpandable = () => /*#__PURE__*/_jsx(Expandable, {
  isOpen: true,
  title: "Details",
  children: /*#__PURE__*/_jsx(Typography.P, {
    children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
  })
});
export const expandableWithSubtitle = () => /*#__PURE__*/_jsx(Expandable, {
  title: "Complex example",
  subtitle: "Subtitle",
  children: /*#__PURE__*/_jsx(Typography.P, {
    children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
  })
});
export const expandableWithBadge = () => /*#__PURE__*/_jsx(Expandable, {
  title: "Complex example",
  badge: "status",
  badgeColour: "success",
  children: /*#__PURE__*/_jsx(Typography.P, {
    children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
  })
});
export const expandableSmall = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(Expandable, {
    small: true,
    title: "Small example",
    children: /*#__PURE__*/_jsx(Typography.P, {
      children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
    })
  }), /*#__PURE__*/_jsx(Expandable, {
    small: true,
    title: "Small complex example",
    subtitle: "Subtitle",
    badge: "status",
    badgeColour: "success",
    children: /*#__PURE__*/_jsx(Typography.P, {
      children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
    })
  })]
});
defaultExpandable.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultExpandable"
};
openExpandable.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "openExpandable"
};
expandableWithSubtitle.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "expandableWithSubtitle"
};
expandableWithBadge.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "expandableWithBadge"
};
expandableSmall.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "expandableSmall"
};