@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/Card/Card-story.js

@@ -0,0 +1,389 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _onboarding = require("../../../.storybook/data/onboarding");
+
+var _people = require("../../../.storybook/data/people");
+
+var _index = require("./index");
+
+var _List = _interopRequireDefault(require("../List/List"));
+
+var _TextContainer = _interopRequireDefault(require("../TextContainer/TextContainer"));
+
+var _Page = _interopRequireWildcard(require("../Page"));
+
+var _Layout = _interopRequireWildcard(require("../Layout"));
+
+var _Text = _interopRequireDefault(require("../Text/Text"));
+
+var _Subheading = _interopRequireDefault(require("../Subheading/Subheading"));
+
+var _Image = _interopRequireDefault(require("../Image/Image"));
+
+var _Button = _interopRequireWildcard(require("../Button/Button"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+
+var _user0196w = _interopRequireDefault(require("../../../static/assets/users/user-01--96w.png"));
+
+var _spruceTypes = require("@sprucelabs/spruce-types");
+
+var LockIcon2 = function LockIcon2(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M2.5 9A1.5 1.5 0 0 1 4 7.5h8A1.5 1.5 0 0 1 13.5 9v6a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 15V9z",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    d: "M4.5 7.5V5a3.5 3.5 0 1 1 7 0v2.5",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), _react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M8 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+LockIcon2.defaultProps = {
+  className: "card-header__label-icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "18",
+  viewBox: "0 0 16 18"
+};
+
+var AlertIcon3 = function AlertIcon3(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.413 13.333L9.18 1.433a1.333 1.333 0 0 0-2.362 0l-6.232 11.9a1.333 1.333 0 0 0 1.182 1.952H14.23a1.333 1.333 0 0 0 1.182-1.952zm-8.08-7.718a.667.667 0 0 1 1.334 0v4a.667.667 0 1 1-1.334 0v-4zm.682 7.674h.018A.984.984 0 0 0 9 12.267a1.018 1.018 0 0 0-1.016-.978h-.019A.984.984 0 0 0 7 12.309c.02.546.468.978 1.015.98z"
+  }));
+};
+
+AlertIcon3.defaultProps = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var cardJSON = {
+  header: {
+    title: 'Introducing the Card Builder! (Note: WIP)',
+    labelText: '',
+    actions: [{
+      type: _spruceTypes.IHWButtonTypes.Button,
+      text: 'More Info',
+      href: '#',
+      target: '_blank',
+      isSmall: true
+    }]
+  },
+  body: {
+    items: [{
+      type: _spruceTypes.IHWCardBuilderBodyItemType.Text,
+      viewModel: {
+        id: 'first',
+        text: "The Card Builder enables Skill devs to build cards using JSON. It should not be used for core cards."
+      }
+    }]
+  },
+  footer: {
+    buttonGroup: {
+      actions: [{
+        type: _spruceTypes.IHWButtonTypes.Button,
+        text: 'Do things',
+        kind: _Button.ButtonKinds.Secondary,
+        isSmall: true
+      }]
+    }
+  }
+};
+var cardJSON2 = {
+  header: {
+    title: 'Your sales for today!'
+  },
+  body: {
+    items: [{
+      type: _spruceTypes.IHWCardBuilderBodyItemType.Text,
+      viewModel: {
+        id: 'first',
+        text: 'This is your typical score card'
+      }
+    }, {
+      type: _spruceTypes.IHWCardBuilderBodyItemType.ScoreCard,
+      viewModel: {
+        scores: [{
+          id: '1',
+          label: 'Today',
+          value: '$1,848'
+        }, {
+          id: '2',
+          label: 'This Week',
+          value: '$5,778'
+        }, {
+          id: '3',
+          label: 'This Month',
+          value: '$25,068'
+        }]
+      }
+    }]
+  }
+};
+var cardJSON3 = {
+  onboarding: {
+    title: 'Setup your first skill!',
+    steps: [{
+      id: '1',
+      isComplete: true,
+      tabTitle: 'Add your first location',
+      panelTitle: 'It is time to add your location.',
+      panelCopy: "It's going to be so great, you know it!"
+    }, {
+      id: '2',
+      tabTitle: 'Set up your team',
+      tabIcon: {
+        name: 'location',
+        isLineIcon: true
+      },
+      panelTitle: 'Team setup is the best',
+      panelCopy: 'Teammwork makes the dream work!'
+    }, {
+      id: '3',
+      tabIcon: {
+        name: 'launch',
+        isLineIcon: true
+      },
+      tabTitle: 'Go live',
+      panelTitle: "You're ready to go live!",
+      panelCopy: 'Do it! Do it!'
+    }]
+  }
+};
+var cardJSON4 = {
+  header: {
+    labelText: 'The last example!'
+  },
+  body: {
+    items: [{
+      type: _spruceTypes.IHWCardBuilderBodyItemType.List,
+      viewModel: {
+        header: {
+          title: 'This is a list!'
+        },
+        items: [{
+          id: 'number_one',
+          title: 'This is so cool!',
+          subtitle: 'For sure!',
+          icon: {
+            name: 'complete',
+            isLineIcon: true
+          }
+        }, {
+          id: 'number_two',
+          title: 'Takes all the props a List can take!',
+          icon: {
+            name: 'complete',
+            isLineIcon: true
+          }
+        }]
+      }
+    }, {
+      type: _spruceTypes.IHWCardBuilderBodyItemType.Text,
+      viewModel: {
+        text: 'Following up with text component!'
+      }
+    }]
+  },
+  footer: {
+    buttonGroup: {
+      actions: [{
+        type: _spruceTypes.IHWButtonTypes.Button,
+        text: 'Do things',
+        kind: _Button.ButtonKinds.Secondary,
+        isSmall: true
+      }]
+    }
+  }
+};
+var cardJSON5 = {
+  header: {
+    title: 'Danger Zone'
+  },
+  footer: {
+    buttonGroup: {
+      actions: [{
+        type: _spruceTypes.IHWButtonTypes.Button,
+        text: 'Delete this thing forever',
+        icon: {
+          name: 'remove'
+        },
+        kind: _Button.ButtonKinds.Caution,
+        isSmall: true,
+        onClick: function onClick() {}
+      }]
+    },
+    helper: 'This is a permanant thing you are doing, be sure you want to do the thing'
+  }
+};
+var stories = (0, _react2.storiesOf)('Card', module); // stories.addDecorator(
+// 	withKnobsOptions({
+// 		escapeHTML: false
+// 	})
+// )
+
+stories.addDecorator(function (story) {
+  return _react["default"].createElement(_Page["default"], null, _react["default"].createElement(_Page.PageContent, null, _react["default"].createElement(_Layout["default"], null, _react["default"].createElement(_Layout.LayoutSection, null, story()))));
+});
+stories.addDecorator(_addonKnobs.withKnobs);
+stories.add('Critical Card', function () {
+  return _react["default"].createElement(_index.Card, {
+    isCritical: true
+  }, _react["default"].createElement(_index.Card.Header, {
+    title: (0, _addonKnobs.text)('title', 'Please update your credit card'),
+    labelText: (0, _addonKnobs.text)('labelText', 'Billing failure'),
+    labelIcon: {
+      customIcon: AlertIcon3,
+      isLineIcon: false
+    }
+  }), _react["default"].createElement(_index.Card.Body, null, _react["default"].createElement(_Text["default"], null, "Two roads diverged in a wood, and I took the one less traveled by, And that has made all the difference.")), _react["default"].createElement(_index.Card.Footer, null, _react["default"].createElement(_Button["default"], {
+    kind: _Button.ButtonKinds.Secondary,
+    text: "Update credit card"
+  })));
+}).add('Score Card', function () {
+  return _react["default"].createElement(_index.Card, null, _react["default"].createElement(_index.Card.Header, {
+    title: (0, _addonKnobs.text)('title', 'Value of future appointments'),
+    actions: (0, _addonKnobs.object)('actions', [{
+      text: 'Go to reports'
+    }])
+  }), _react["default"].createElement(_index.Card.Body, null, _react["default"].createElement(_Text["default"], null, "Two roads diverged in a wood, and I took the one less traveled by, And that has made all the difference."), _react["default"].createElement(_index.Scores, {
+    scores: (0, _addonKnobs.object)('scores', [{
+      id: '1',
+      label: 'Today',
+      value: '$1,848'
+    }, {
+      id: '2',
+      label: 'This Week',
+      value: '$5,778'
+    }, {
+      id: '3',
+      label: 'This Month',
+      value: '$25,068'
+    }])
+  })));
+}).add('People Card', function () {
+  return _react["default"].createElement(_index.Card, null, _react["default"].createElement(_index.Card.Header, {
+    title: (0, _addonKnobs.text)('title', 'Your upcoming appointments'),
+    actions: (0, _addonKnobs.object)('actions', [{
+      text: 'View in calendar'
+    }])
+  }), _react["default"].createElement(_index.Card.Body, null, _react["default"].createElement(_List["default"], {
+    items: _people.userList
+  }), _react["default"].createElement("a", {
+    href: "#",
+    style: {
+      display: 'block'
+    }
+  }, "+3 more today")));
+}).add('Person Card', function () {
+  return _react["default"].createElement(_index.Card, {
+    isCentered: true
+  }, _react["default"].createElement(_index.Card.Header, null), _react["default"].createElement(_index.Card.Body, null, _react["default"].createElement(_Avatar["default"], {
+    isLarge: true,
+    image: (0, _addonKnobs.text)('Avatar Image', _user0196w["default"]),
+    alt: "Rosamund Mueleer"
+  }), _react["default"].createElement(_TextContainer["default"], {
+    spacing: "tight"
+  }, _react["default"].createElement(_Subheading["default"], {
+    className: "card-header__title",
+    element: "h3"
+  }, "Say \"Happy Birthday\""), _react["default"].createElement(_Text["default"], null, "It\u2019s Rosamond Mueller\u2019s birthday today. Don\u2019t forget to say happy birthday!"))), _react["default"].createElement(_index.Card.Footer, null, _react["default"].createElement(_Button["default"], {
+    kind: _Button.ButtonKinds.Secondary,
+    text: "Send a birthday message",
+    isSmall: true
+  })));
+}).add('Place Card', function () {
+  return _react["default"].createElement(_index.Card, null, _react["default"].createElement(_Image["default"], {
+    id: "header",
+    src: "https://images.unsplash.com/photo-1535401991746-da3d9055713e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9fa1c73c0d29848a6e63595c588051ad&auto=format&fit=crop&w=720&h=360&q=80",
+    width: 720,
+    height: 360
+  }), _react["default"].createElement(_index.Card.Body, null, _react["default"].createElement("h3", null, "Les Basics"), _react["default"].createElement(_Text["default"], null, "101 Purdy Lakes, West Jordanmouth, NH 38827-6100")), _react["default"].createElement(_index.Card.Footer, null, _react["default"].createElement(_Button["default"], {
+    kind: _Button.ButtonKinds.Secondary,
+    text: "Book an appointment"
+  })));
+}).add('Celebration Card', function () {
+  return _react["default"].createElement(_index.Card, {
+    isCentered: true
+  }, _react["default"].createElement(_Image["default"], {
+    src: "https://images.unsplash.com/photo-1499306215218-42e51ae058b2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6a6ae71facb70ced00bcbae8174ee47c&auto=format&fit=crop&w=720&h=360&q=80",
+    width: 720,
+    height: 360
+  }), _react["default"].createElement(_index.Card.Body, null, _react["default"].createElement("h3", null, "Congrats on 10k guests!"), _react["default"].createElement(_Text["default"], null, "I\u2019ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.")));
+}).add('To Do', function () {
+  return _react["default"].createElement(_index.Card, null, _react["default"].createElement(_index.Card.Header, {
+    labelText: (0, _addonKnobs.text)('Label Text', ''),
+    labelIcon: (0, _addonKnobs["boolean"])('Label Icon', false) ? {
+      customIcon: LockIcon2,
+      isLineIcon: true
+    } : undefined,
+    title: (0, _addonKnobs.text)('Title', 'Get the most out of Spruce'),
+    actions: (0, _addonKnobs["boolean"])('Header Action', false) ? [{
+      kind: _Button.ButtonKinds.Simple,
+      text: 'Go to team',
+      isSmall: true
+    }] : undefined,
+    contextMenu: (0, _addonKnobs.object)('contextMenu', {
+      actions: [{
+        text: 'One'
+      }, {
+        text: 'Two'
+      }, {
+        text: 'Three'
+      }]
+    })
+  }), _react["default"].createElement(_index.Card.Body, null, _react["default"].createElement(_Text["default"], null, (0, _addonKnobs.text)('Body Copy', 'Two roads diverged in a wood, and I took the one less traveled by, And that has made all the difference.'))), _react["default"].createElement(_index.Card.Footer, null, _react["default"].createElement(_Button["default"], {
+    kind: _Button.ButtonKinds.Secondary,
+    text: "Get some skills",
+    isSmall: true
+  })));
+}).add('Onboarding Card', function () {
+  return _react["default"].createElement(_index.OnboardingCard, _onboarding.onboarding);
+}).add('CardBuilder', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.CardBuilder, (0, _extends2["default"])({
+    key: "foo-0"
+  }, (0, _addonKnobs.object)('json', cardJSON))), _react["default"].createElement(_index.CardBuilder, (0, _extends2["default"])({
+    key: "foo-1"
+  }, (0, _addonKnobs.object)('json2', cardJSON2))), _react["default"].createElement(_index.CardBuilder, (0, _extends2["default"])({
+    key: "foo-2"
+  }, (0, _addonKnobs.object)('json3', cardJSON3))), _react["default"].createElement(_index.CardBuilder, (0, _extends2["default"])({
+    key: "foo-3"
+  }, (0, _addonKnobs.object)('json4', cardJSON4))), _react["default"].createElement(_index.CardBuilder, (0, _extends2["default"])({
+    key: "foo-4"
+  }, (0, _addonKnobs.object)('json5', cardJSON5))));
+}).add('Expandable Card', function () {
+  return _react["default"].createElement(_index.Card, {
+    expandable: true,
+    headerProps: {
+      title: 'Hello'
+    },
+    defaultExpanded: false
+  }, _react["default"].createElement(_index.Card.Body, null, _react["default"].createElement("p", null, "Hello I am card content")));
+});
+//# sourceMappingURL=Card-story.js.map

package/lib/components/Card/Card-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Card/Card-story.tsx"],"names":["LockIcon2","AlertIcon3","cardJSON","header","title","labelText","actions","type","IHWButtonTypes","Button","text","href","target","isSmall","body","items","IHWCardBuilderBodyItemType","Text","viewModel","id","footer","buttonGroup","kind","ButtonKinds","Secondary","cardJSON2","ScoreCard","scores","label","value","cardJSON3","onboarding","steps","isComplete","tabTitle","panelTitle","panelCopy","tabIcon","name","isLineIcon","cardJSON4","List","subtitle","icon","cardJSON5","Caution","onClick","helper","stories","module","addDecorator","story","withKnobs","add","customIcon","userList","display","userImageLg","undefined","Simple"],"mappings":"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","sourcesContent":["import React, { Fragment } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, text, boolean, object } from '@storybook/addon-knobs'\nimport { onboarding } from '../../../.storybook/data/onboarding'\nimport { userList } from '../../../.storybook/data/people'\nimport { Card, CardBuilder, OnboardingCard } from './index'\nimport List from '../List/List'\nimport TextContainer from '../TextContainer/TextContainer'\nimport Page, { PageContent } from '../Page'\nimport Layout, { LayoutSection } from '../Layout'\nimport Text from '../Text/Text'\nimport Subheading from '../Subheading/Subheading'\nimport Image from '../Image/Image'\nimport { Scores } from './index'\nimport Button, { ButtonKinds } from '../Button/Button'\nimport Avatar from '../Avatar/Avatar'\nimport userImageLg from '../../../static/assets/users/user-01--96w.png'\nimport LockIcon2 from '../../../static/assets/icons/Interface-Essential/Lock/Unlock/lock-6--16w.svg'\nimport AlertIcon3 from '../../../static/assets/icons/Interface-Essential/Alerts/alert-triangle--16w.svg'\nimport { ICardBuilderProps } from './components/CardBuilder'\nimport {\n\tIHWButtonTypes,\n\tIHWCardBuilderBodyItemType\n} from '@sprucelabs/spruce-types'\n\nconst cardJSON: ICardBuilderProps = {\n\theader: {\n\t\ttitle: 'Introducing the Card Builder! (Note: WIP)',\n\t\tlabelText: '',\n\t\tactions: [\n\t\t\t{\n\t\t\t\ttype: IHWButtonTypes.Button,\n\t\t\t\ttext: 'More Info',\n\t\t\t\thref: '#',\n\t\t\t\ttarget: '_blank',\n\t\t\t\tisSmall: true\n\t\t\t}\n\t\t]\n\t},\n\tbody: {\n\t\titems: [\n\t\t\t{\n\t\t\t\ttype: IHWCardBuilderBodyItemType.Text,\n\t\t\t\tviewModel: {\n\t\t\t\t\tid: 'first',\n\t\t\t\t\ttext: `The Card Builder enables Skill devs to build cards using JSON. It should not be used for core cards.`\n\t\t\t\t}\n\t\t\t}\n\t\t]\n\t},\n\tfooter: {\n\t\tbuttonGroup: {\n\t\t\tactions: [\n\t\t\t\t{\n\t\t\t\t\ttype: IHWButtonTypes.Button,\n\t\t\t\t\ttext: 'Do things',\n\t\t\t\t\tkind: ButtonKinds.Secondary,\n\t\t\t\t\tisSmall: true\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}\n\nconst cardJSON2: ICardBuilderProps = {\n\theader: {\n\t\ttitle: 'Your sales for today!'\n\t},\n\tbody: {\n\t\titems: [\n\t\t\t{\n\t\t\t\ttype: IHWCardBuilderBodyItemType.Text,\n\t\t\t\tviewModel: { id: 'first', text: 'This is your typical score card' }\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: IHWCardBuilderBodyItemType.ScoreCard,\n\t\t\t\tviewModel: {\n\t\t\t\t\tscores: [\n\t\t\t\t\t\t{ id: '1', label: 'Today', value: '$1,848' },\n\t\t\t\t\t\t{ id: '2', label: 'This Week', value: '$5,778' },\n\t\t\t\t\t\t{ id: '3', label: 'This Month', value: '$25,068' }\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t}\n\t\t]\n\t}\n}\nconst cardJSON3: ICardBuilderProps = {\n\tonboarding: {\n\t\ttitle: 'Setup your first skill!',\n\t\tsteps: [\n\t\t\t{\n\t\t\t\tid: '1',\n\t\t\t\tisComplete: true,\n\t\t\t\ttabTitle: 'Add your first location',\n\t\t\t\tpanelTitle: 'It is time to add your location.',\n\t\t\t\tpanelCopy: \"It's going to be so great, you know it!\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: '2',\n\t\t\t\ttabTitle: 'Set up your team',\n\t\t\t\ttabIcon: { name: 'location', isLineIcon: true },\n\t\t\t\tpanelTitle: 'Team setup is the best',\n\t\t\t\tpanelCopy: 'Teammwork makes the dream work!'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: '3',\n\t\t\t\ttabIcon: { name: 'launch', isLineIcon: true },\n\t\t\t\ttabTitle: 'Go live',\n\t\t\t\tpanelTitle: \"You're ready to go live!\",\n\t\t\t\tpanelCopy: 'Do it! Do it!'\n\t\t\t}\n\t\t]\n\t}\n}\nconst cardJSON4: ICardBuilderProps = {\n\theader: {\n\t\tlabelText: 'The last example!'\n\t},\n\tbody: {\n\t\titems: [\n\t\t\t{\n\t\t\t\ttype: IHWCardBuilderBodyItemType.List,\n\t\t\t\tviewModel: {\n\t\t\t\t\theader: {\n\t\t\t\t\t\ttitle: 'This is a list!'\n\t\t\t\t\t},\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: 'number_one',\n\t\t\t\t\t\t\ttitle: 'This is so cool!',\n\t\t\t\t\t\t\tsubtitle: 'For sure!',\n\t\t\t\t\t\t\ticon: { name: 'complete', isLineIcon: true }\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: 'number_two',\n\t\t\t\t\t\t\ttitle: 'Takes all the props a List can take!',\n\t\t\t\t\t\t\ticon: { name: 'complete', isLineIcon: true }\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: IHWCardBuilderBodyItemType.Text,\n\t\t\t\tviewModel: {\n\t\t\t\t\ttext: 'Following up with text component!'\n\t\t\t\t}\n\t\t\t}\n\t\t]\n\t},\n\tfooter: {\n\t\tbuttonGroup: {\n\t\t\tactions: [\n\t\t\t\t{\n\t\t\t\t\ttype: IHWButtonTypes.Button,\n\t\t\t\t\ttext: 'Do things',\n\t\t\t\t\tkind: ButtonKinds.Secondary,\n\t\t\t\t\tisSmall: true\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}\n\nconst cardJSON5: ICardBuilderProps = {\n\theader: {\n\t\ttitle: 'Danger Zone'\n\t},\n\tfooter: {\n\t\tbuttonGroup: {\n\t\t\tactions: [\n\t\t\t\t{\n\t\t\t\t\ttype: IHWButtonTypes.Button,\n\t\t\t\t\ttext: 'Delete this thing forever',\n\t\t\t\t\ticon: {\n\t\t\t\t\t\tname: 'remove'\n\t\t\t\t\t},\n\t\t\t\t\tkind: ButtonKinds.Caution,\n\t\t\t\t\tisSmall: true,\n\t\t\t\t\tonClick: () => {}\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\thelper:\n\t\t\t'This is a permanant thing you are doing, be sure you want to do the thing'\n\t}\n}\n\nconst stories = storiesOf('Card', module)\n\n// stories.addDecorator(\n// \twithKnobsOptions({\n// \t\tescapeHTML: false\n// \t})\n// )\n\nstories.addDecorator(story => (\n\t<Page>\n\t\t<PageContent>\n\t\t\t<Layout>\n\t\t\t\t<LayoutSection>{story()}</LayoutSection>\n\t\t\t</Layout>\n\t\t</PageContent>\n\t</Page>\n))\n\nstories.addDecorator(withKnobs)\n\nstories\n\t.add('Critical Card', () => (\n\t\t<Card isCritical>\n\t\t\t<Card.Header\n\t\t\t\ttitle={text('title', 'Please update your credit card')}\n\t\t\t\tlabelText={text('labelText', 'Billing failure')}\n\t\t\t\tlabelIcon={{ customIcon: AlertIcon3, isLineIcon: false }}\n\t\t\t/>\n\t\t\t<Card.Body>\n\t\t\t\t<Text>\n\t\t\t\t\tTwo roads diverged in a wood, and I took the one less traveled by, And\n\t\t\t\t\tthat has made all the difference.\n\t\t\t\t</Text>\n\t\t\t</Card.Body>\n\t\t\t<Card.Footer>\n\t\t\t\t<Button kind={ButtonKinds.Secondary} text=\"Update credit card\" />\n\t\t\t</Card.Footer>\n\t\t</Card>\n\t))\n\t.add('Score Card', () => (\n\t\t<Card>\n\t\t\t<Card.Header\n\t\t\t\ttitle={text('title', 'Value of future appointments')}\n\t\t\t\tactions={object('actions', [\n\t\t\t\t\t{\n\t\t\t\t\t\ttext: 'Go to reports'\n\t\t\t\t\t}\n\t\t\t\t])}\n\t\t\t/>\n\t\t\t<Card.Body>\n\t\t\t\t<Text>\n\t\t\t\t\tTwo roads diverged in a wood, and I took the one less traveled by, And\n\t\t\t\t\tthat has made all the difference.\n\t\t\t\t</Text>\n\t\t\t\t<Scores\n\t\t\t\t\tscores={object('scores', [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: '1',\n\t\t\t\t\t\t\tlabel: 'Today',\n\t\t\t\t\t\t\tvalue: '$1,848'\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: '2',\n\t\t\t\t\t\t\tlabel: 'This Week',\n\t\t\t\t\t\t\tvalue: '$5,778'\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tid: '3',\n\t\t\t\t\t\t\tlabel: 'This Month',\n\t\t\t\t\t\t\tvalue: '$25,068'\n\t\t\t\t\t\t}\n\t\t\t\t\t])}\n\t\t\t\t/>\n\t\t\t</Card.Body>\n\t\t</Card>\n\t))\n\t.add('People Card', () => (\n\t\t<Card>\n\t\t\t<Card.Header\n\t\t\t\ttitle={text('title', 'Your upcoming appointments')}\n\t\t\t\tactions={object('actions', [\n\t\t\t\t\t{\n\t\t\t\t\t\ttext: 'View in calendar'\n\t\t\t\t\t}\n\t\t\t\t])}\n\t\t\t/>\n\t\t\t<Card.Body>\n\t\t\t\t<List items={userList} />\n\t\t\t\t<a href=\"#\" style={{ display: 'block' }}>\n\t\t\t\t\t+3 more today\n\t\t\t\t</a>\n\t\t\t</Card.Body>\n\t\t</Card>\n\t))\n\t.add('Person Card', () => (\n\t\t<Card isCentered>\n\t\t\t<Card.Header />\n\t\t\t<Card.Body>\n\t\t\t\t<Avatar\n\t\t\t\t\tisLarge\n\t\t\t\t\timage={text('Avatar Image', userImageLg)}\n\t\t\t\t\talt=\"Rosamund Mueleer\"\n\t\t\t\t/>\n\t\t\t\t<TextContainer spacing=\"tight\">\n\t\t\t\t\t<Subheading className=\"card-header__title\" element=\"h3\">\n\t\t\t\t\t\t{`Say \"Happy Birthday\"`}\n\t\t\t\t\t</Subheading>\n\t\t\t\t\t<Text>\n\t\t\t\t\t\tIt’s Rosamond Mueller’s birthday today. Don’t forget to say happy\n\t\t\t\t\t\tbirthday!\n\t\t\t\t\t</Text>\n\t\t\t\t</TextContainer>\n\t\t\t</Card.Body>\n\t\t\t<Card.Footer>\n\t\t\t\t<Button\n\t\t\t\t\tkind={ButtonKinds.Secondary}\n\t\t\t\t\ttext=\"Send a birthday message\"\n\t\t\t\t\tisSmall\n\t\t\t\t/>\n\t\t\t</Card.Footer>\n\t\t</Card>\n\t))\n\t.add('Place Card', () => (\n\t\t<Card>\n\t\t\t<Image\n\t\t\t\tid=\"header\"\n\t\t\t\tsrc=\"https://images.unsplash.com/photo-1535401991746-da3d9055713e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9fa1c73c0d29848a6e63595c588051ad&auto=format&fit=crop&w=720&h=360&q=80\"\n\t\t\t\twidth={720}\n\t\t\t\theight={360}\n\t\t\t/>\n\t\t\t<Card.Body>\n\t\t\t\t<h3>Les Basics</h3>\n\t\t\t\t<Text>101 Purdy Lakes, West Jordanmouth, NH 38827-6100</Text>\n\t\t\t</Card.Body>\n\t\t\t<Card.Footer>\n\t\t\t\t<Button kind={ButtonKinds.Secondary} text=\"Book an appointment\" />\n\t\t\t</Card.Footer>\n\t\t</Card>\n\t))\n\t.add('Celebration Card', () => (\n\t\t<Card isCentered>\n\t\t\t<Image\n\t\t\t\tsrc=\"https://images.unsplash.com/photo-1499306215218-42e51ae058b2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6a6ae71facb70ced00bcbae8174ee47c&auto=format&fit=crop&w=720&h=360&q=80\"\n\t\t\t\twidth={720}\n\t\t\t\theight={360}\n\t\t\t/>\n\n\t\t\t<Card.Body>\n\t\t\t\t<h3>Congrats on 10k guests!</h3>\n\t\t\t\t<Text>\n\t\t\t\t\tI’ve learned that people will forget what you said, people will forget\n\t\t\t\t\twhat you did, but people will never forget how you made them feel.\n\t\t\t\t</Text>\n\t\t\t</Card.Body>\n\t\t</Card>\n\t))\n\t.add('To Do', () => (\n\t\t<Card>\n\t\t\t<Card.Header\n\t\t\t\tlabelText={text('Label Text', '')}\n\t\t\t\tlabelIcon={\n\t\t\t\t\tboolean('Label Icon', false)\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tcustomIcon: LockIcon2,\n\t\t\t\t\t\t\t\tisLineIcon: true\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttitle={text('Title', 'Get the most out of Spruce')}\n\t\t\t\tactions={\n\t\t\t\t\tboolean('Header Action', false)\n\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tkind: ButtonKinds.Simple,\n\t\t\t\t\t\t\t\t\ttext: 'Go to team',\n\t\t\t\t\t\t\t\t\tisSmall: true\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t  ]\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tcontextMenu={object('contextMenu', {\n\t\t\t\t\tactions: [{ text: 'One' }, { text: 'Two' }, { text: 'Three' }]\n\t\t\t\t})}\n\t\t\t/>\n\t\t\t<Card.Body>\n\t\t\t\t<Text>\n\t\t\t\t\t{text(\n\t\t\t\t\t\t'Body Copy',\n\t\t\t\t\t\t'Two roads diverged in a wood, and I took the one less traveled by, And that has made all the difference.'\n\t\t\t\t\t)}\n\t\t\t\t</Text>\n\t\t\t</Card.Body>\n\t\t\t<Card.Footer>\n\t\t\t\t<Button kind={ButtonKinds.Secondary} text=\"Get some skills\" isSmall />\n\t\t\t</Card.Footer>\n\t\t</Card>\n\t))\n\t.add('Onboarding Card', () => <OnboardingCard {...onboarding} />)\n\t.add('CardBuilder', () => (\n\t\t<Fragment>\n\t\t\t<CardBuilder key=\"foo-0\" {...object('json', cardJSON)} />\n\t\t\t<CardBuilder key=\"foo-1\" {...object('json2', cardJSON2)} />\n\t\t\t<CardBuilder key=\"foo-2\" {...object('json3', cardJSON3)} />\n\t\t\t<CardBuilder key=\"foo-3\" {...object('json4', cardJSON4)} />\n\t\t\t<CardBuilder key=\"foo-4\" {...object('json5', cardJSON5)} />\n\t\t</Fragment>\n\t))\n\t.add('Expandable Card', () => {\n\t\treturn (\n\t\t\t<Card expandable headerProps={{ title: 'Hello' }} defaultExpanded={false}>\n\t\t\t\t<Card.Body>\n\t\t\t\t\t<p>Hello I am card content</p>\n\t\t\t\t</Card.Body>\n\t\t\t</Card>\n\t\t)\n\t})\n"],"file":"Card-story.js"}

package/lib/components/Card/Card.d.ts

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import { ICardHeaderProps } from './components/CardHeader';
+export interface ICardProps {
+    /** Should be Card Header, Card Body, and Card Footer, unless using the card background for styling only. */
+    children?: React.ReactNode;
+    /** Set true to make all content center aligned. */
+    isCentered?: boolean;
+    /** Set true if this card is mission-critical for the person who sees it. */
+    isCritical?: boolean;
+    /** Set true to render a smaller card variation */
+    isSmall?: boolean;
+    /** Set true to fill space of parent */
+    isFullSize?: boolean;
+    /** Optional classname */
+    className?: string;
+    /** Optional; makes the card expandable */
+    expandable?: boolean;
+    /** Optional; for expandable cards, sets the default expanded state */
+    defaultExpanded?: boolean;
+    /** Optional; render the card header */
+    headerProps?: ICardHeaderProps;
+}
+interface ICardDefaultProps {
+    isCentered: boolean;
+    expandable: boolean;
+    defaultExpanded: boolean;
+}
+interface ICardState {
+    /** Is the card expanded? */
+    isExpanded: boolean;
+}
+export default class Card extends Component<ICardProps, ICardState> {
+    static Header: {
+        (props: import("@sprucelabs/spruce-types").IHWCardHeader | ICardHeaderProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+        displayName: string;
+        defaultProps: {
+            title: string;
+            labelText: string;
+            labelIcon: null;
+            headerActions: never[];
+            contextMenu: null;
+        };
+    };
+    static Body: {
+        (props: import("./components/CardBody").ICardBodyProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+        displayName: string;
+        defaultProps: {
+            isSectioned: boolean;
+            areSectionSeparatorsVisible: boolean;
+            hasTopPadding: boolean;
+            hasBottomPadding: boolean;
+        };
+    };
+    static Section: (props: import("./components/CardSection").ICardSectionProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    static Footer: {
+        (props: import("./components/CardFooter").ICardFooterProps): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+        displayName: string;
+    };
+    static defaultProps: {
+        isCentered: boolean;
+        expandable: boolean;
+        defaultExpanded: boolean;
+    };
+    constructor(props: ICardProps & ICardDefaultProps);
+    toggleExpanded: () => void;
+    render(): React.ReactElement;
+}
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/lib/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAmB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAKtE,MAAM,WAAW,UAAU;IAC1B,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAA;CAC9B;AAED,UAAU,iBAAiB;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,eAAe,EAAE,OAAO,CAAA;CACxB;AAED,UAAU,UAAU;IACnB,4BAA4B;IAC5B,UAAU,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAS,CAAC,UAAU,EAAE,UAAU,CAAC;IAClE,OAAc,MAAM;;;;;;;;;;MAAa;IACjC,OAAc,IAAI;;;;;;;;;MAAW;IAC7B,OAAc,OAAO,kRAAc;IACnC,OAAc,MAAM;;;MAAa;IAEjC,OAAc,YAAY;;;;MAIzB;gBAIkB,KAAK,EAAE,UAAU,GAAG,iBAAiB;IAQjD,cAAc,aAIpB;IAEM,MAAM,IAAI,KAAK,CAAC,YAAY;CA0CnC"}

package/lib/components/Card/Card.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _CardHeader = _interopRequireDefault(require("./components/CardHeader"));
+
+var _CardBody = _interopRequireDefault(require("./components/CardBody"));
+
+var _CardSection = _interopRequireDefault(require("./components/CardSection"));
+
+var _CardFooter = _interopRequireDefault(require("./components/CardFooter"));
+
+var Card =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Card, _Component);
+
+  function Card(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Card);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Card).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleExpanded", function () {
+      _this.setState(function (prevState) {
+        return {
+          isExpanded: !prevState.isExpanded
+        };
+      });
+    });
+    _this.state = {
+      isExpanded: props.defaultExpanded
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Card, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          isCentered = _this$props.isCentered,
+          isCritical = _this$props.isCritical,
+          isSmall = _this$props.isSmall,
+          isFullSize = _this$props.isFullSize,
+          className = _this$props.className,
+          expandable = _this$props.expandable,
+          headerProps = _this$props.headerProps;
+      var isExpanded = this.state.isExpanded;
+      return _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('card', className, {
+          'card--centered': isCentered,
+          'card--critical': isCritical,
+          'card--small': isSmall,
+          'card--full-size': isFullSize,
+          'card--is-collapsed': expandable && !isExpanded
+        })
+      }, expandable && _react["default"].createElement(_CardHeader["default"], (0, _extends2["default"])({}, headerProps, {
+        actions: [{
+          icon: {
+            name: isExpanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'
+          },
+          onClick: function onClick() {
+            return _this2.toggleExpanded();
+          }
+        }]
+      })), isExpanded && children);
+    }
+  }]);
+  return Card;
+}(_react.Component);
+
+exports["default"] = Card;
+(0, _defineProperty2["default"])(Card, "Header", _CardHeader["default"]);
+(0, _defineProperty2["default"])(Card, "Body", _CardBody["default"]);
+(0, _defineProperty2["default"])(Card, "Section", _CardSection["default"]);
+(0, _defineProperty2["default"])(Card, "Footer", _CardFooter["default"]);
+(0, _defineProperty2["default"])(Card, "defaultProps", {
+  isCentered: false,
+  expandable: false,
+  defaultExpanded: true // TODO: TS/React should be inferring this, but it isn't.
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
+
+});
+//# sourceMappingURL=Card.js.map

package/lib/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"names":["Card","props","setState","prevState","isExpanded","state","defaultExpanded","children","isCentered","isCritical","isSmall","isFullSize","className","expandable","headerProps","icon","name","onClick","toggleExpanded","Component","CardHeader","CardBody","CardSection","CardFooter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;IA0CqBA,I;;;;;AAcpB,gBAAmBC,KAAnB,EAA0D;AAAA;;AAAA;AACzD,gHAAMA,KAAN;AADyD,uGAQlC,YAAM;AAC7B,YAAKC,QAAL,CAAc,UAAAC,SAAS;AAAA,eAAK;AAC3BC,UAAAA,UAAU,EAAE,CAACD,SAAS,CAACC;AADI,SAAL;AAAA,OAAvB;AAGA,KAZyD;AAGzD,UAAKC,KAAL,GAAa;AACZD,MAAAA,UAAU,EAAEH,KAAK,CAACK;AADN,KAAb;AAHyD;AAMzD;;;;6BAQmC;AAAA;;AAAA,wBAU/B,KAAKL,KAV0B;AAAA,UAElCM,QAFkC,eAElCA,QAFkC;AAAA,UAGlCC,UAHkC,eAGlCA,UAHkC;AAAA,UAIlCC,UAJkC,eAIlCA,UAJkC;AAAA,UAKlCC,OALkC,eAKlCA,OALkC;AAAA,UAMlCC,UANkC,eAMlCA,UANkC;AAAA,UAOlCC,SAPkC,eAOlCA,SAPkC;AAAA,UAQlCC,UARkC,eAQlCA,UARkC;AAAA,UASlCC,WATkC,eASlCA,WATkC;AAAA,UAY3BV,UAZ2B,GAYZ,KAAKC,KAZO,CAY3BD,UAZ2B;AAanC,aACC;AACC,QAAA,SAAS,EAAE,4BAAG,MAAH,EAAWQ,SAAX,EAAsB;AAChC,4BAAkBJ,UADc;AAEhC,4BAAkBC,UAFc;AAGhC,yBAAeC,OAHiB;AAIhC,6BAAmBC,UAJa;AAKhC,gCAAsBE,UAAU,IAAI,CAACT;AALL,SAAtB;AADZ,SASES,UAAU,IACV,gCAAC,sBAAD,gCACKC,WADL;AAEC,QAAA,OAAO,EAAE,CACR;AACCC,UAAAA,IAAI,EAAE;AACLC,YAAAA,IAAI,EAAEZ,UAAU,GACb,qBADa,GAEb;AAHE,WADP;AAMCa,UAAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACC,cAAL,EAAN;AAAA;AANV,SADQ;AAFV,SAVF,EAwBEd,UAAU,IAAIG,QAxBhB,CADD;AA4BA;;;EArEgCY,gB;;;iCAAbnB,I,YACGoB,sB;iCADHpB,I,UAECqB,oB;iCAFDrB,I,aAGIsB,uB;iCAHJtB,I,YAIGuB,sB;iCAJHvB,I,kBAMS;AAC5BQ,EAAAA,UAAU,EAAE,KADgB;AAE5BK,EAAAA,UAAU,EAAE,KAFgB;AAG5BP,EAAAA,eAAe,EAAE,IAHW,CAM7B;AACA;;AAP6B,C","sourcesContent":["import React, { Component } from 'react'\nimport cx from 'classnames'\nimport CardHeader, { ICardHeaderProps } from './components/CardHeader'\nimport CardBody from './components/CardBody'\nimport CardSection from './components/CardSection'\nimport CardFooter from './components/CardFooter'\n\nexport interface ICardProps {\n\t/** Should be Card Header, Card Body, and Card Footer, unless using the card background for styling only. */\n\tchildren?: React.ReactNode\n\n\t/** Set true to make all content center aligned. */\n\tisCentered?: boolean\n\n\t/** Set true if this card is mission-critical for the person who sees it. */\n\tisCritical?: boolean\n\n\t/** Set true to render a smaller card variation */\n\tisSmall?: boolean\n\n\t/** Set true to fill space of parent */\n\tisFullSize?: boolean\n\n\t/** Optional classname */\n\tclassName?: string\n\n\t/** Optional; makes the card expandable */\n\texpandable?: boolean\n\n\t/** Optional; for expandable cards, sets the default expanded state */\n\tdefaultExpanded?: boolean\n\n\t/** Optional; render the card header */\n\theaderProps?: ICardHeaderProps\n}\n\ninterface ICardDefaultProps {\n\tisCentered: boolean\n\texpandable: boolean\n\tdefaultExpanded: boolean\n}\n\ninterface ICardState {\n\t/** Is the card expanded? */\n\tisExpanded: boolean\n}\n\nexport default class Card extends Component<ICardProps, ICardState> {\n\tpublic static Header = CardHeader\n\tpublic static Body = CardBody\n\tpublic static Section = CardSection\n\tpublic static Footer = CardFooter\n\n\tpublic static defaultProps = {\n\t\tisCentered: false,\n\t\texpandable: false,\n\t\tdefaultExpanded: true\n\t}\n\n\t// TODO: TS/React should be inferring this, but it isn't.\n\t// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640\n\tpublic constructor(props: ICardProps & ICardDefaultProps) {\n\t\tsuper(props)\n\n\t\tthis.state = {\n\t\t\tisExpanded: props.defaultExpanded\n\t\t}\n\t}\n\n\tpublic toggleExpanded = () => {\n\t\tthis.setState(prevState => ({\n\t\t\tisExpanded: !prevState.isExpanded\n\t\t}))\n\t}\n\n\tpublic render(): React.ReactElement {\n\t\tconst {\n\t\t\tchildren,\n\t\t\tisCentered,\n\t\t\tisCritical,\n\t\t\tisSmall,\n\t\t\tisFullSize,\n\t\t\tclassName,\n\t\t\texpandable,\n\t\t\theaderProps\n\t\t} = this.props\n\n\t\tconst { isExpanded } = this.state\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx('card', className, {\n\t\t\t\t\t'card--centered': isCentered,\n\t\t\t\t\t'card--critical': isCritical,\n\t\t\t\t\t'card--small': isSmall,\n\t\t\t\t\t'card--full-size': isFullSize,\n\t\t\t\t\t'card--is-collapsed': expandable && !isExpanded\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{expandable && (\n\t\t\t\t\t<CardHeader\n\t\t\t\t\t\t{...headerProps}\n\t\t\t\t\t\tactions={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ticon: {\n\t\t\t\t\t\t\t\t\tname: isExpanded\n\t\t\t\t\t\t\t\t\t\t? 'keyboard_arrow_down'\n\t\t\t\t\t\t\t\t\t\t: 'keyboard_arrow_right'\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tonClick: () => this.toggleExpanded()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{isExpanded && children}\n\t\t\t</div>\n\t\t)\n\t}\n}\n"],"file":"Card.js"}