docs: add Card examples (#1952)

examples/Card/ACTIONS.json

@@ -0,0 +1,8 @@
+{
+	"imports": "import Button from \"@kiwicom/orbit-components/lib/Button\";\nimport ButtonLink from \"@kiwicom/orbit-components/lib/ButtonLink\";\nimport Card from \"@kiwicom/orbit-components/lib/Card\";\nimport CardSection from \"@kiwicom/orbit-components/lib/CardSection\";\nimport Dialog from \"@kiwicom/orbit-components/lib/Dialog\";",
+	"example": "() => {\n  const [showDialog, setShowDialog] = React.useState(false)\n  return (\n    <>\n      <Card\n        title=\"Passenger info\"\n        actions={\n          <ButtonLink\n            size=\"small\"\n            onClick={() => {\n              setShowDialog(true)\n            }}\n          >\n            Edit list\n          </ButtonLink>\n        }\n      >\n        <CardSection>Yasmin Karenth</CardSection>\n      </Card>\n      {showDialog && (\n        <Dialog\n          title=\"Here you could edit this list\"\n          primaryAction={\n            <Button\n              onClick={() => {\n                setShowDialog(false)\n              }}\n            >\n              Close\n            </Button>\n          }\n        />\n      )}\n    </>\n  )\n}\n",
+	"info": {
+		"title": "Card actions",
+		"description": "Cards and card sections can have actions associated with the card or section."
+	}
+}

examples/Card/CLOSABLE.json

@@ -0,0 +1,8 @@
+{
+	"imports": "import Button from \"@kiwicom/orbit-components/lib/Button\";\nimport ButtonLink from \"@kiwicom/orbit-components/lib/ButtonLink\";\nimport Card from \"@kiwicom/orbit-components/lib/Card\";\nimport CardSection from \"@kiwicom/orbit-components/lib/CardSection\";\nimport Dialog from \"@kiwicom/orbit-components/lib/Dialog\";",
+	"example": "() => {\n  const [showCard, setShowCard] = React.useState(true)\n  return (\n    <>\n      {showCard && (\n        <Card\n          title=\"Passenger info\"\n          onClose={() => {\n            setShowCard(false)\n          }}\n        >\n          <CardSection>Yasmin Karenth</CardSection>\n        </Card>\n      )}\n      {!showCard && (\n        <Button\n          onClick={() => {\n            setShowCard(true)\n          }}\n        >\n          Show card\n        </Button>\n      )}\n    </>\n  )\n}\n",
+	"info": {
+		"title": "Closable card",
+		"description": "Passing onClose to the card makes the close button appear, which you can use to control whether the card is visable."
+	}
+}

examples/Card/DEFAULT.json

@@ -0,0 +1,8 @@
+{
+	"imports": "import Card from \"@kiwicom/orbit-components/lib/Card\";\nimport CardSection from \"@kiwicom/orbit-components/lib/CardSection\";",
+	"example": "() => (\n  <Card title=\"Passenger info\" description=\"All passengers in this itinerary\">\n    <CardSection>Yasmin Karenth</CardSection>\n  </Card>\n)\n",
+	"info": {
+		"title": "Default card",
+		"description": "Cards can have titles and descriptions that cover all of their contents plus sections for organization."
+	}
+}

examples/Card/EXPAND_CONTROLLED.json

@@ -0,0 +1,8 @@
+{
+	"imports": "import ButtonLink from \"@kiwicom/orbit-components/lib/ButtonLink\";\nimport Card from \"@kiwicom/orbit-components/lib/Card\";\nimport CardSection from \"@kiwicom/orbit-components/lib/CardSection\";\nimport Stack from \"@kiwicom/orbit-components/lib/Stack\";\nimport Text from \"@kiwicom/orbit-components/lib/Text\";",
+	"example": "() => {\n  const [expanded1, setExpanded1] = React.useState(false)\n  const [expanded2, setExpanded2] = React.useState(false)\n  return (\n    <Card\n      title=\"Passenger info\"\n      actions={\n        <ButtonLink\n          size=\"small\"\n          onClick={() => {\n            const action = expanded1 || expanded2 ? false : true\n            setExpanded1(action)\n            setExpanded2(action)\n          }}\n        >\n          {expanded1 || expanded2 ? \"Close all\" : \"Expand all\"}\n        </ButtonLink>\n      }\n    >\n      <CardSection\n        expandable\n        expanded={expanded1}\n        onClose={() => {\n          setExpanded1(false)\n        }}\n        onExpand={() => {\n          setExpanded1(true)\n        }}\n        title={`Yasmin Karenth – ${expanded1 ? \"expanded\" : \"closed\"}`}\n        icon={<Icons.GenderWoman ariaLabel=\"female\" />}\n      >\n        <Stack direction=\"column\" spacing=\"condensed\">\n          <Text type=\"secondary\">January 20, 1978</Text>\n          <Text type=\"secondary\">yas.karenth@example.com</Text>\n        </Stack>\n      </CardSection>\n      <CardSection\n        expandable\n        expanded={expanded2}\n        onClose={() => {\n          setExpanded2(false)\n        }}\n        onExpand={() => {\n          setExpanded2(true)\n        }}\n        title={`Robin Kask – ${expanded2 ? \"expanded\" : \"closed\"}`}\n        icon={<Icons.GenderMan ariaLabel=\"male\" />}\n      >\n        <Stack direction=\"column\" spacing=\"condensed\">\n          <Text type=\"secondary\">June 11, 1985</Text>\n          <Text type=\"secondary\">robin2fly@example.com</Text>\n        </Stack>\n      </CardSection>\n    </Card>\n  )\n}\n",
+	"info": {
+		"title": "Expandable sections – controlled",
+		"description": "You can control the expanding and closing of card sections yourself via the state. As soon as you pass the expanded prop (either true or false), you will have to control the sections yourself using onExpand and onClose and/or other actions."
+	}
+}

examples/Card/EXPAND_UNCONTROLLED.json

@@ -0,0 +1,8 @@
+{
+	"imports": "import Card from \"@kiwicom/orbit-components/lib/Card\";\nimport CardSection from \"@kiwicom/orbit-components/lib/CardSection\";\nimport Stack from \"@kiwicom/orbit-components/lib/Stack\";\nimport Text from \"@kiwicom/orbit-components/lib/Text\";",
+	"example": "() => (\n  <Card title=\"Passenger info\">\n    <CardSection\n      expandable\n      title=\"Yasmin Karenth\"\n      icon={<Icons.GenderWoman ariaLabel=\"female\" />}\n    >\n      <Stack direction=\"column\" spacing=\"condensed\">\n        <Text type=\"secondary\">January 20, 1978</Text>\n        <Text type=\"secondary\">yas.karenth@example.com</Text>\n      </Stack>\n    </CardSection>\n    <CardSection\n      expandable\n      title=\"Robin Kask\"\n      icon={<Icons.GenderMan ariaLabel=\"male\" />}\n    >\n      <Stack direction=\"column\" spacing=\"condensed\">\n        <Text type=\"secondary\">June 11, 1985</Text>\n        <Text type=\"secondary\">robin2fly@example.com</Text>\n      </Stack>\n    </CardSection>\n  </Card>\n)\n",
+	"info": {
+		"title": "Expandable sections – uncontrolled",
+		"description": "Card sections can be set to expand and close on user input without your needing to control the state yourself. It's enough to make the sections expandable."
+	}
+}

examples/Card/HEADER.json

@@ -0,0 +1,8 @@
+{
+	"imports": "import Badge from \"@kiwicom/orbit-components/lib/Badge\";\nimport Card from \"@kiwicom/orbit-components/lib/Card\";\nimport Stack from \"@kiwicom/orbit-components/lib/Stack\";\nimport Text from \"@kiwicom/orbit-components/lib/Text\";\nimport Check from \"@kiwicom/orbit-components/lib/icons/Check\";",
+	"example": "() => (\n  <Card\n    icon={<Icons.Airplane ariaLabel=\"Flight\" />}\n    header={\n      <Stack align=\"center\" inline justify=\"end\">\n        <Text type=\"secondary\">Trip length: 1h 55min</Text>\n        <Badge icon={<Icons.Check />} type=\"success\">\n          Checked in\n        </Badge>\n      </Stack>\n    }\n  />\n)\n",
+	"info": {
+		"title": "Card with custom header",
+		"description": "If you need a different header layout than title and description, you can add it as a custom header."
+	}
+}

examples/Card/LOADING.json

@@ -0,0 +1,8 @@
+{
+	"imports": "import Card from \"@kiwicom/orbit-components/lib/Card\";\nimport CardSection from \"@kiwicom/orbit-components/lib/CardSection\";",
+	"example": "() => (\n  <Card loading title=\"Passenger info\">\n    <CardSection>Yasmin Karenth</CardSection>\n  </Card>\n)\n",
+	"info": {
+		"title": "Loading card",
+		"description": "Pass the loading prop if you need to wait for data to load before displaying the card."
+	}
+}

src/Card/__examples__/ACTIONS.js

@@ -0,0 +1,51 @@
+// @flow
+import * as React from "react";
+
+import Button from "../../Button";
+import ButtonLink from "../../ButtonLink";
+import Card from "../index";
+import CardSection from "../CardSection/index";
+import Dialog from "../../Dialog";
+
+export default {
+  Example: () => {
+    const [showDialog, setShowDialog] = React.useState(false);
+    return (
+      <>
+        <Card
+          title="Passenger info"
+          actions={
+            <ButtonLink
+              size="small"
+              onClick={() => {
+                setShowDialog(true);
+              }}
+            >
+              Edit list
+            </ButtonLink>
+          }
+        >
+          <CardSection>Yasmin Karenth</CardSection>
+        </Card>
+        {showDialog && (
+          <Dialog
+            title="Here you could edit this list"
+            primaryAction={
+              <Button
+                onClick={() => {
+                  setShowDialog(false);
+                }}
+              >
+                Close
+              </Button>
+            }
+          />
+        )}
+      </>
+    );
+  },
+  info: {
+    title: "Card actions",
+    description: "Cards and card sections can have actions associated with the card or section.",
+  },
+};

src/Card/__examples__/CLOSABLE.js

@@ -0,0 +1,40 @@
+// @flow
+import * as React from "react";
+
+import Button from "../../Button";
+import Card from "../index";
+import CardSection from "../CardSection/index";
+
+export default {
+  Example: () => {
+    const [showCard, setShowCard] = React.useState(true);
+    return (
+      <>
+        {showCard && (
+          <Card
+            title="Passenger info"
+            onClose={() => {
+              setShowCard(false);
+            }}
+          >
+            <CardSection>Yasmin Karenth</CardSection>
+          </Card>
+        )}
+        {!showCard && (
+          <Button
+            onClick={() => {
+              setShowCard(true);
+            }}
+          >
+            Show card
+          </Button>
+        )}
+      </>
+    );
+  },
+  info: {
+    title: "Closable card",
+    description:
+      "Passing onClose to the card makes the close button appear, which you can use to control whether the card is visable.",
+  },
+};

src/Card/__examples__/DEFAULT.js

@@ -0,0 +1,18 @@
+// @flow
+import * as React from "react";
+
+import Card from "../index";
+import CardSection from "../CardSection/index";
+
+export default {
+  Example: () => (
+    <Card title="Passenger info" description="All passengers in this itinerary">
+      <CardSection>Yasmin Karenth</CardSection>
+    </Card>
+  ),
+  info: {
+    title: "Default card",
+    description:
+      "Cards can have titles and descriptions that cover all of their contents plus sections for organization.",
+  },
+};

src/Card/__examples__/EXPAND_CONTROLLED.js

@@ -0,0 +1,73 @@
+// @flow
+import * as React from "react";
+
+import ButtonLink from "../../ButtonLink";
+import Card from "../index";
+import CardSection from "../CardSection/index";
+import Stack from "../../Stack";
+import Text from "../../Text";
+import * as Icons from "../../icons";
+
+export default {
+  Example: () => {
+    const [expanded1, setExpanded1] = React.useState(false);
+    const [expanded2, setExpanded2] = React.useState(false);
+    const action = expanded1 || expanded2;
+    return (
+      <Card
+        title="Passenger info"
+        actions={
+          <ButtonLink
+            size="small"
+            onClick={() => {
+              setExpanded1(!action);
+              setExpanded2(!action);
+            }}
+          >
+            {action ? "Close all" : "Expand all"}
+          </ButtonLink>
+        }
+      >
+        <CardSection
+          expandable
+          expanded={expanded1}
+          onClose={() => {
+            setExpanded1(false);
+          }}
+          onExpand={() => {
+            setExpanded1(true);
+          }}
+          title={`Yasmin Karenth – ${expanded1 ? "expanded" : "closed"}`}
+          icon={<Icons.GenderWoman ariaLabel="female" />}
+        >
+          <Stack direction="column" spacing="condensed">
+            <Text type="secondary">January 20, 1978</Text>
+            <Text type="secondary">yas.karenth@example.com</Text>
+          </Stack>
+        </CardSection>
+        <CardSection
+          expandable
+          expanded={expanded2}
+          onClose={() => {
+            setExpanded2(false);
+          }}
+          onExpand={() => {
+            setExpanded2(true);
+          }}
+          title={`Robin Kask – ${expanded2 ? "expanded" : "closed"}`}
+          icon={<Icons.GenderMan ariaLabel="male" />}
+        >
+          <Stack direction="column" spacing="condensed">
+            <Text type="secondary">June 11, 1985</Text>
+            <Text type="secondary">robin2fly@example.com</Text>
+          </Stack>
+        </CardSection>
+      </Card>
+    );
+  },
+  info: {
+    title: "Expandable sections – controlled",
+    description:
+      "You can control the expanding and closing of card sections yourself via the state. As soon as you pass the expanded prop (either true or false), you will have to control the sections yourself using onExpand and onClose and/or other actions.",
+  },
+};

src/Card/__examples__/EXPAND_UNCONTROLLED.js

@@ -0,0 +1,36 @@
+// @flow
+import * as React from "react";
+
+import Card from "../index";
+import CardSection from "../CardSection/index";
+import Stack from "../../Stack";
+import Text from "../../Text";
+import * as Icons from "../../icons";
+
+export default {
+  Example: () => (
+    <Card title="Passenger info">
+      <CardSection
+        expandable
+        title="Yasmin Karenth"
+        icon={<Icons.GenderWoman ariaLabel="female" />}
+      >
+        <Stack direction="column" spacing="condensed">
+          <Text type="secondary">January 20, 1978</Text>
+          <Text type="secondary">yas.karenth@example.com</Text>
+        </Stack>
+      </CardSection>
+      <CardSection expandable title="Robin Kask" icon={<Icons.GenderMan ariaLabel="male" />}>
+        <Stack direction="column" spacing="condensed">
+          <Text type="secondary">June 11, 1985</Text>
+          <Text type="secondary">robin2fly@example.com</Text>
+        </Stack>
+      </CardSection>
+    </Card>
+  ),
+  info: {
+    title: "Expandable sections – uncontrolled",
+    description:
+      "Card sections can be set to expand and close on user input without your needing to control the state yourself. It's enough to make the sections expandable.",
+  },
+};

src/Card/__examples__/HEADER.js

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+
+import Badge from "../../Badge";
+import Card from "../index";
+import Stack from "../../Stack";
+import Text from "../../Text";
+import * as Icons from "../../icons";
+
+export default {
+  Example: () => (
+    <Card
+      icon={<Icons.Airplane ariaLabel="Flight" />}
+      header={
+        <Stack align="center" inline justify="end">
+          <Text type="secondary">Trip length: 1h 55min</Text>
+          <Badge icon={<Icons.Check />} type="success">
+            Checked in
+          </Badge>
+        </Stack>
+      }
+    />
+  ),
+  info: {
+    title: "Card with custom header",
+    description:
+      "If you need a different header layout than title and description, you can add it as a custom header.",
+  },
+};

src/Card/__examples__/LOADING.js

@@ -0,0 +1,18 @@
+// @flow
+import * as React from "react";
+
+import Card from "../index";
+import CardSection from "../CardSection/index";
+
+export default {
+  Example: () => (
+    <Card loading title="Passenger info">
+      <CardSection>Yasmin Karenth</CardSection>
+    </Card>
+  ),
+  info: {
+    title: "Loading card",
+    description:
+      "Pass the loading prop if you need to wait for data to load before displaying the card.",
+  },
+};

src/examples.js

@@ -26,6 +26,13 @@ export { default as ButtonRef } from "./Button/__examples__/REF";
 export { default as ButtonSizes } from "./Button/__examples__/SIZES";
 export { default as ButtonTypes } from "./Button/__examples__/TYPES";
 export { default as ButtonWidth } from "./Button/__examples__/WIDTH";
+export { default as CardActions } from "./Card/__examples__/ACTIONS";
+export { default as CardClosable } from "./Card/__examples__/CLOSABLE";
+export { default as CardCustomHeader } from "./Card/__examples__/HEADER";
+export { default as CardDefault } from "./Card/__examples__/DEFAULT";
+export { default as CardExpandableControlled } from "./Card/__examples__/EXPAND_CONTROLLED";
+export { default as CardExpandableUncontrolled } from "./Card/__examples__/EXPAND_UNCONTROLLED";
+export { default as CardLoading } from "./Card/__examples__/LOADING";
 export { default as IconAccessibility } from "./Icon/__examples__/ACCESSIBILITY";
 export { default as IconColors } from "./Icon/__examples__/COLORS";
 export { default as IconDefault } from "./Icon/__examples__/DEFAULT";