Merge pull request #615 from kiwicom/deprecated-card

FIX: Added deprecated Card

src/_deprecated/Card/Card.stories.js

@@ -0,0 +1,179 @@
+// @flow
+import * as React from "react";
+import { storiesOf, setAddon } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import styles from "@sambego/storybook-styles";
+import chaptersAddon from "react-storybook-addon-chapters";
+import { withKnobs, text, boolean, select } from "@storybook/addon-knobs/react";
+
+import * as Icons from "../../icons";
+import Heading from "../../Heading";
+import Text from "../../Text";
+import CardHeader from "./CardHeader";
+import CardContent from "./CardContent";
+import CardSection from "./CardSection";
+import SPACINGS_AFTER from "../../common/getSpacingToken/consts";
+
+import Card from "./index";
+
+setAddon(chaptersAddon);
+
+const getIcons = defaultIcon => select("Icon", Object.keys(Icons), defaultIcon);
+const getIcon = source => Icons[source];
+
+storiesOf("Deprecated Card", module)
+  .addDecorator(withKnobs)
+  .addDecorator(
+    styles({
+      padding: "20px",
+    }),
+  )
+  .addWithChapters("Default", () => {
+    const title = text("Title", "Card with title");
+    const description = text("Description");
+    return {
+      info: "This is the default configuration of this component.",
+      chapters: [
+        {
+          sections: [
+            {
+              sectionFn: () => (
+                <Card>
+                  <CardHeader icon={<Icons.Airplane />} title={title} subTitle={description} />
+                </Card>
+              ),
+            },
+          ],
+        },
+      ],
+    };
+  })
+  .addWithChapters("Card with description", () => {
+    const title = text("Title", "Card with title & description");
+    const description = text("Description", "This is a description of the card.");
+    return {
+      info:
+        "Card component is a simple container for grouping some relevant information. It’s possible to add title and description. Visit Orbit.Kiwi for more detailed guidelines.",
+      chapters: [
+        {
+          sections: [
+            {
+              sectionFn: () => (
+                <Card>
+                  <CardHeader icon={<Icons.Airplane />} title={title} subTitle={description} />
+                </Card>
+              ),
+            },
+          ],
+        },
+      ],
+    };
+  })
+  .addWithChapters("Card with sections", () => {
+    const title = text("Title", "Card with sections");
+    const description = text("Description", "This is a description of the card.");
+    return {
+      info:
+        "Card sections allow you to create separate sections in every card when you need to create more advanced content structure. Visit Orbit.Kiwi for more detailed guidelines.",
+      chapters: [
+        {
+          sections: [
+            {
+              sectionFn: () => (
+                <Card>
+                  <CardHeader title={title} subTitle={description} />
+                  <CardSection>
+                    <Heading type="title3" element="h3">
+                      Insert your title here...
+                    </Heading>
+                    <Text>Insert your content here...</Text>
+                  </CardSection>
+                  <CardSection>
+                    <Heading type="title3" element="h3">
+                      Insert your title here...
+                    </Heading>
+                    <Text>Insert your content here...</Text>
+                  </CardSection>
+                  <CardSection>
+                    <Heading type="title3" element="h3">
+                      Insert your title here...
+                    </Heading>
+                    <Text>Insert your content here...</Text>
+                  </CardSection>
+                </Card>
+              ),
+            },
+          ],
+        },
+      ],
+    };
+  })
+  .addWithChapters("Card with only content", () => {
+    const content = text("Content", "This is a content of the card.");
+    return {
+      info:
+        "Card component is a simple container for grouping some relevant information. You can add a content to Card. Visit Orbit.Kiwi for more detailed guidelines.",
+      chapters: [
+        {
+          sections: [
+            {
+              sectionFn: () => (
+                <Card>
+                  <CardContent>
+                    <Text>{content}</Text>
+                  </CardContent>
+                </Card>
+              ),
+            },
+          ],
+        },
+      ],
+    };
+  })
+  .addWithChapters("Playground", () => {
+    const title = text("Title", "Customisable card title");
+    const description = text("Description", "This is a customisable description of the card.");
+    const Icon = getIcon(getIcons("Airplane"));
+    const closable = boolean("Closable", false);
+    const dataTest = text("dataTest", "test");
+    const spaceAfter = select("spaceAfter", [undefined, ...Object.values(SPACINGS_AFTER)]);
+    return {
+      info:
+        "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+      chapters: [
+        {
+          sections: [
+            {
+              sectionFn: () => (
+                <Card
+                  closable={closable}
+                  onClose={action("Close")}
+                  dataTest={dataTest}
+                  spaceAfter={spaceAfter}
+                >
+                  <CardHeader
+                    icon={<Icon />}
+                    title={title}
+                    subTitle={description}
+                    dataTest={dataTest}
+                  />
+                  <CardContent dataTest={dataTest}>
+                    <Heading type="title3" element="h3">
+                      Content with Heading and text
+                    </Heading>
+                    <Text>Text in content</Text>
+                  </CardContent>
+                  <CardSection dataTest={dataTest}>
+                    <Heading type="title3" element="h3">
+                      Section with Heading and text
+                    </Heading>
+                    <Text>Text in section</Text>
+                  </CardSection>
+                </Card>
+              ),
+            },
+          ],
+        },
+      ],
+    };
+  });

src/_deprecated/Card/CardContent/index.js

@@ -0,0 +1,21 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+
+import defaultTokens from "../../../defaultTokens";
+
+import type { Props } from "./index";
+
+export const StyledCardContent = styled.div`
+  padding: ${({ theme }) => theme.orbit.spaceLarge};
+`;
+
+StyledCardContent.defaultProps = {
+  theme: defaultTokens,
+};
+
+const CardContent = ({ children, dataTest }: Props) => (
+  <StyledCardContent data-test={dataTest}>{children}</StyledCardContent>
+);
+
+export default CardContent;

src/_deprecated/Card/CardContent/index.js.flow

@@ -0,0 +1,11 @@
+// @flow
+import type { Globals } from "../../../common/common.js.flow";
+
+export type Props = {|
+  +children: React$Node,
+  ...Globals,
+|};
+
+declare export var StyledCardContent: React$ComponentType<>;
+
+declare export default React$ComponentType<Props>;

src/_deprecated/Card/CardHeader/index.js

@@ -0,0 +1,63 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+
+import defaultTokens from "../../../defaultTokens";
+import Heading from "../../../Heading";
+import Text from "../../../Text";
+
+import type { Props } from "./index";
+
+export const StyledCardHeader = styled.div`
+  position: relative;
+  width: 100%;
+  padding: ${({ theme }) => theme.orbit.spaceLarge};
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.orbit.colorHeading};
+`;
+
+StyledCardHeader.defaultProps = {
+  theme: defaultTokens,
+};
+
+const StyledHeadingWrapper = styled.div`
+  display: flex;
+`;
+
+const StyledSubTitle = styled.div`
+  text-align: center;
+  margin-top: ${({ theme }) => theme.orbit.spaceXSmall};
+`;
+
+StyledSubTitle.defaultProps = {
+  theme: defaultTokens,
+};
+
+const StyledIcon = styled.div`
+  color: ${({ theme }) => theme.orbit.colorHeading};
+  display: flex;
+  align-items: center;
+  margin-right: ${({ theme }) => theme.orbit.spaceXSmall};
+`;
+
+StyledIcon.defaultProps = {
+  theme: defaultTokens,
+};
+
+const CardHeader = ({ icon, title, subTitle }: Props) => (
+  <StyledCardHeader>
+    <StyledHeadingWrapper>
+      {icon && <StyledIcon>{icon}</StyledIcon>}
+      <Heading type="title2" element="h2">
+        {title}
+      </Heading>
+    </StyledHeadingWrapper>
+    {subTitle && (
+      <StyledSubTitle>
+        <Text>{subTitle}</Text>
+      </StyledSubTitle>
+    )}
+  </StyledCardHeader>
+);
+
+export default CardHeader;

src/_deprecated/Card/CardHeader/index.js.flow

@@ -0,0 +1,15 @@
+// @flow
+import type { ReactComponentStyled } from "styled-components";
+
+import type { Globals } from "../../../common/common.js.flow";
+
+export type Props = {|
+  +icon?: React$Node,
+  +title: string,
+  +subTitle?: string,
+  ...Globals,
+|};
+
+declare export var StyledCardHeader: ReactComponentStyled<any>;
+
+declare export default React$ComponentType<Props>;

src/_deprecated/Card/CardSection/index.js

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+
+import defaultTokens from "../../../defaultTokens";
+
+import type { Props } from "./index";
+
+export const StyledCardSection = styled.div`
+  width: 100%;
+  padding: ${({ theme }) => theme.orbit.spaceLarge};
+  box-sizing: border-box;
+  border-top: ${({ theme }) =>
+    `${theme.orbit.borderWidthCard} ${theme.orbit.borderStyleCard} ${theme.orbit.borderColorCard}`};
+
+  &:first-of-type {
+    border: 0;
+  }
+`;
+
+StyledCardSection.defaultProps = {
+  theme: defaultTokens,
+};
+
+const CardSection = ({ children, dataTest }: Props) => (
+  <StyledCardSection data-test={dataTest}>{children}</StyledCardSection>
+);
+
+export default CardSection;

src/_deprecated/Card/CardSection/index.js.flow

@@ -0,0 +1,11 @@
+// @flow
+import type { Globals } from "../../../common/common.js.flow";
+
+export type Props = {|
+  +children: React$Node,
+  ...Globals,
+|};
+
+declare export var StyledCardSection: React$ComponentType<>;
+
+declare export default React$ComponentType<Props>;