Storybook Landing Page (#672)

* fix: update card styles

Fix for card styles when an image has a height and width included. Changes prevent the header image from overlapping card content, due to the previous height 100% for set all divs inside of the card.

* feat: welcome page and storybook setup for mdx

Added storybook updates, ability to import png as modules, images to use, card style updates, svgr for svgs, jest config for static assets, welcome page organization and related files.

Closes D2IQ-78978

.storybook/main.js

@@ -1,7 +1,10 @@
 const customWebpack = require("./webpack.config.js");
 
 module.exports = {
-  stories: ["../packages/**/*.stories.@(tsx|mdx)"],
+  stories: [
+    "../packages/docs/stories/Welcome.stories.mdx",
+    "../packages/**/*.stories.@(tsx|mdx)"
+  ],
   webpackFinal: config => {
     return { ...config, ...customWebpack };
   },

.storybook/webpack.config.js

@@ -11,5 +11,18 @@ module.exports = ({ config }) => {
   config.resolve.alias["core-js"] = path.dirname(require.resolve("core-js"));
   config.module.rules[0].use[0].options.sourceType = "unambiguous";
 
+  // Taken from stackoverflow
+  // https://stackoverflow.com/a/59639736/3058839
+  const assetRule = config.module.rules.find(({ test }) => test.test(".svg"));
+
+  const assetLoader = {
+    loader: assetRule.loader,
+    options: assetRule.options || assetRule.query
+  };
+
+  config.module.rules.unshift({
+    test: /\.svg$/,
+    use: ["@svgr/webpack", assetLoader]
+  });
   return config;
 };

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

jest.config.js

@@ -13,6 +13,11 @@ module.exports = {
       transform: {
         "^.+\\.tsx?$": "ts-jest",
         "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx"
+      },
+      // Below is required for Jest + Webpack handling static assets: https://jestjs.io/docs/webpack
+      moduleNameMapper: {
+        "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
+        "\\.(gif|ttf|eot|svg|png)$": "<rootDir>/__mocks__/fileMock.js"
       }
     },
     {

package.json

@@ -46,6 +46,7 @@
     "@emotion/react": "11.7.0",
     "@emotion/styled": "11.6.0",
     "@popperjs/core": "2.4.0",
+    "@svgr/webpack": "5.5.0",
     "chartist": "^0.11.0",
     "copy-to-clipboard": "3.2.0",
     "downshift": "3.2.10",
@@ -71,13 +72,13 @@
     "@babel/types": "7.16.0",
     "@commitlint/cli": "7.2.0",
     "@commitlint/config-conventional": "7.1.2",
-    "@storybook/addon-a11y": "6.4.9",
-    "@storybook/addon-essentials": "6.4.9",
-    "@storybook/addons": "6.4.9",
-    "@storybook/react": "6.4.9",
-    "@storybook/source-loader": "6.4.9",
+    "@storybook/addon-a11y": "6.4.10",
+    "@storybook/addon-essentials": "6.4.10",
+    "@storybook/addons": "6.4.10",
+    "@storybook/react": "6.4.10",
+    "@storybook/source-loader": "6.4.10",
     "@storybook/storybook-deployer": "2.8.10",
-    "@storybook/theming": "6.4.9",
+    "@storybook/theming": "6.4.10",
     "@types/chartist": "0.11.1",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "3.1.14",

packages/card/components/Card.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cardBase, cardHeaderImage, headerHeight } from "../style";
+import { cardBase, cardHeaderImage, headerHeight, cardContent } from "../style";
 import { cx } from "@emotion/css";
 import { preserveAspectRatio, padding } from "../../shared/styles/styleUtils";
 import { SpaceSize } from "../../shared/styles/styleUtils/modifiers/modifierUtils";
@@ -70,7 +70,9 @@ class Card<P extends CardProps, S extends {}> extends React.PureComponent<
             <img src={header.headerImg} alt={header.headerImgAltText ?? ""} />
           </div>
         )}
-        <div className={padding("all", paddingSize)}>{children}</div>
+        <div className={cx(padding("all", paddingSize), cardContent)}>
+          {children}
+        </div>
       </div>
     );
   }

packages/card/style.ts

@@ -15,10 +15,10 @@ export const cardBase = css`
   background-color: ${themeBgPrimary};
   box-shadow: 0 0 0 1px ${themeBorder};
   ${borderRadius("default")};
+`;
 
-  > div {
-    height: 100%;
-  }
+export const cardContent = css`
+  height: 100%;
 `;
 
 const headerSizes = {

packages/card/tests/__snapshots__/ButtonCard.test.tsx.snap

@@ -11,10 +11,6 @@ exports[`ButtonCard renders as disabled 1`] = `
   cursor: auto;
 }
 
-.emotion-0>div {
-  height: 100%;
-}
-
 .emotion-0:hover,
 .emotion-0:focus,
 .emotion-0:focus-within {
@@ -34,6 +30,7 @@ exports[`ButtonCard renders as disabled 1`] = `
 
 .emotion-1 {
   padding: 16px;
+  height: 100%;
 }
 
 <ButtonCard
@@ -67,10 +64,6 @@ exports[`ButtonCard renders as hasFocus 1`] = `
   outline: 0;
 }
 
-.emotion-0>div {
-  height: 100%;
-}
-
 .emotion-0:hover,
 .emotion-0:focus,
 .emotion-0:focus-within {
@@ -84,6 +77,7 @@ exports[`ButtonCard renders as hasFocus 1`] = `
 
 .emotion-1 {
   padding: 16px;
+  height: 100%;
 }
 
 <ButtonCard
@@ -114,10 +108,6 @@ exports[`ButtonCard renders as isActive 1`] = `
   cursor: pointer;
 }
 
-.emotion-0>div {
-  height: 100%;
-}
-
 .emotion-0:hover,
 .emotion-0:focus,
 .emotion-0:focus-within {
@@ -141,6 +131,7 @@ exports[`ButtonCard renders as isActive 1`] = `
 
 .emotion-1 {
   padding: 16px;
+  height: 100%;
 }
 
 <ButtonCard
@@ -172,10 +163,6 @@ exports[`ButtonCard renders default 1`] = `
   cursor: pointer;
 }
 
-.emotion-0>div {
-  height: 100%;
-}
-
 .emotion-0:hover,
 .emotion-0:focus,
 .emotion-0:focus-within {
@@ -189,6 +176,7 @@ exports[`ButtonCard renders default 1`] = `
 
 .emotion-1 {
   padding: 16px;
+  height: 100%;
 }
 
 <ButtonCard

packages/card/tests/__snapshots__/Card.test.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`Card default 1`] = `
 <div
-  class="css-1whabpp"
+  class="css-1dauq5a"
   data-cy="card"
 >
   <div
-    class="css-1hc6qpp"
+    class="css-ysit7j"
   >
     Example Content
   </div>
@@ -15,11 +15,11 @@ exports[`Card default 1`] = `
 
 exports[`Card with aspectRatio set 1`] = `
 <div
-  class="css-1wx7lyh"
+  class="css-1jnm1at"
   data-cy="card"
 >
   <div
-    class="css-1hc6qpp"
+    class="css-ysit7j"
   >
     Example Content
   </div>
@@ -28,11 +28,11 @@ exports[`Card with aspectRatio set 1`] = `
 
 exports[`Card with paddingSize set 1`] = `
 <div
-  class="css-1whabpp"
+  class="css-1dauq5a"
   data-cy="card"
 >
   <div
-    class="css-m6tl3x"
+    class="css-sriq2i"
   >
     Example Content
   </div>

packages/card/tests/__snapshots__/LinkCard.test.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`LinkCard renders default 1`] = `
 <div
-  class="css-ix5gb9"
+  class="css-e82819"
   data-cy="linkCard"
 >
   <div
-    class="css-1hc6qpp"
+    class="css-ysit7j"
   >
     <a
       class="css-gsqxnx"
@@ -26,11 +26,11 @@ exports[`LinkCard renders default 1`] = `
 
 exports[`LinkCard renders with external link 1`] = `
 <div
-  class="css-ix5gb9"
+  class="css-e82819"
   data-cy="linkCard"
 >
   <div
-    class="css-1hc6qpp"
+    class="css-ysit7j"
   >
     <a
       class="css-gsqxnx"

packages/docs/components/WelcomeBanner.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { HeadingText1, HeadingText2, Text, SpacingBox } from "../..";
+import { purpleLighten4 } from "../../design-tokens/build/js/designTokens";
+import { BannerContainer, ImgWrapper, TextWrapper } from "../styles";
+import { ReactComponent as BannerImg } from "../assets/welcome-banner.svg";
+
+const WelcomeBanner = () => {
+  return (
+    <BannerContainer>
+      <SpacingBox textAlign="center" spacingSize="xxl" side="vert">
+        <ImgWrapper>
+          <BannerImg />
+        </ImgWrapper>
+        <SpacingBox side="bottom" spacingSize="l">
+          <HeadingText1 color={purpleLighten4}>
+            <strong>D2DS</strong>
+          </HeadingText1>
+          <HeadingText2 color={purpleLighten4}>
+            <strong>Day 2 Design System</strong>
+          </HeadingText2>
+        </SpacingBox>
+        <TextWrapper>
+          <Text color={purpleLighten4} align="center">
+            D2DS is a design system to drive the design of software products for
+            Day2 operations. The system contains a series of components,
+            standards, and guidelines to use to create a unified user experience
+            at D2iQ.
+          </Text>
+        </TextWrapper>
+      </SpacingBox>
+    </BannerContainer>
+  );
+};
+
+export default WelcomeBanner;

packages/docs/components/WelcomeCards.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+
+import { Card } from "../../card";
+import { Link } from "../../link";
+import { Text } from "../../styleUtils/typography";
+import { GridList, SpacingBox } from "../..";
+import { purpleDarken4 } from "../../design-tokens/build/js/designTokens";
+
+import headerUrlOne from "../assets/banner-one.png";
+import headerUrlTwo from "../assets/banner-two.png";
+import headerUrlThree from "../assets/banner-three.png";
+
+const welcomeHeaderOne = {
+  headerImg: headerUrlOne
+};
+const welcomeHeaderTwo = {
+  headerImg: headerUrlTwo
+};
+const welcomeHeaderThree = {
+  headerImg: headerUrlThree
+};
+
+const WelcomeCards = () => {
+  return (
+    <>
+      <SpacingBox spacingSizePerSide={{ vert: "xxl", horiz: "xl" }}>
+        <GridList
+          columnCount={{ small: 1, medium: 2, large: 3 }}
+          gutterSize="l"
+        >
+          <Card header={welcomeHeaderOne}>
+            <Text color={purpleDarken4} size="l">
+              <strong>Design Tokens</strong>
+            </Text>
+            <p>
+              Ready-to-use UI elements that provide the foundation for D2iQ user
+              experience development.
+            </p>
+            <p>
+              Design tokens to ensure branding, spacing, and general UI
+              consistency.
+            </p>
+            <Link openInNewTab={true} url="https://github.com/dcos-labs/ui-kit">
+              UI Kit Storybook
+            </Link>
+          </Card>
+          <Card header={welcomeHeaderTwo}>
+            <Text color={purpleDarken4} size="l" weight="medium">
+              <strong>Standards, Guidelines, and Patterns</strong>
+            </Text>
+            <p>
+              Design principles and best practices that guide beautiful,
+              consistent, user-friendly D2iQ product experiences.
+            </p>
+            <p>
+              Content standards and guidelines to ensure a single, consistent,
+              and clear voice.
+            </p>
+            <Link
+              openInNewTab={true}
+              url="https://github.com/dcos-labs/ui-kit/tree/master/design-guidelines"
+            >
+              UI Standards and Guidelines
+            </Link>
+          </Card>
+          <Card header={welcomeHeaderThree}>
+            <Text color={purpleDarken4} size="l" weight="medium">
+              <strong>D2iQ Brand</strong>
+            </Text>
+            <p>
+              Standards for our general branding including logo usage, and brand
+              colors. Primarily used for our marketing website materials.
+            </p>
+            <Link openInNewTab={true} url="https://d2iq.com/brand">
+              D2iQ Brand Resources
+            </Link>
+          </Card>
+        </GridList>
+      </SpacingBox>
+    </>
+  );
+};
+
+export default WelcomeCards;