feat(design-system): add intro card and MDX components

.storybook/preview.js

@@ -1,3 +1,10 @@
+import { roleypolyTheme } from './theme';
+import { mdxComponents } from '../src/design-system/atoms/typography/mdx';
+
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    docs: {
+        theme: roleypolyTheme,
+        components: mdxComponents,
+    },
 };

.storybook/theme.js

@@ -9,7 +9,7 @@ export const roleypolyTheme = create({
 
     // UI
     appBg: palette.taupe300,
-    appContentBg: palette.taupe300,
+    appContentBg: palette.taupe200,
     appBorderColor: palette.taupe100,
     appBorderRadius: 0,
 

src/design-system/BUILD.bazel

@@ -1,8 +0,0 @@
-load("@npm//@bazel/typescript:index.bzl", "ts_library")
-
-package(default_visibility = ["//visibility:public"])
-
-ts_library(
-    name = "lib",
-    srcs = glob(["*.ts"]),
-)

src/design-system/Intro.stories.mdx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Logotype } from 'roleypoly/src/design-system/atoms/branding';
+import { Space } from 'roleypoly/src/design-system/atoms/space';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+
+<Meta title="Roleypoly Design System" />
+
+<Logotype height="4em" circleFill={palette.taupe100} />
+<Space />
+
+# Rapid UI
+
+#### Roleypoly Design System
+
+This is a tool for Roleypoly developers to design and show off UI
+components as they build them.
+
+If you're interested in helping build Roleypoly, [please visit the GitHub project.][roleypoly]
+
+All components here follow the [Atomic Design System][atomic], and might be used in any number of Roleypoly UI systems, not limited to
+just the end user web application.
+
+[roleypoly]: https://github.com/roleypoly/roleypoly
+[atomic]: https://bradfrost.com/blog/post/atomic-web-design/

src/design-system/README.md

@@ -8,7 +8,7 @@ The Roleypoly Design System (rapid) is an atomic design system to help rapidly a
 
 **Please follow hermeticity considerations.**
 
-This package cannot reference RPC types, as they do not exist in the outside world. Storybook is the core component of this, and Storybook doesn't know how to find RPC types at CI build time, as Bazel is also not present.
+This package cannot reference RPC types, as they do not exist in the outside world. Storybook is the core component of this, and Storybook doesn't know how to find RPC types at CI build time, as Bazel is also not present. If you are worried about RPC types being compatible, please write a unit test and include the RPC types then.
 
 You need:
 

src/design-system/atoms/typography/BUILD.bazel

@@ -6,6 +6,8 @@ react_library(
     name = "typography",
     deps = [
         "styled-components",
+        "//src/design-system/atoms/colors",
+        "//src/design-system/atoms/timings",
         "@types/styled-components",
     ],
 )

src/design-system/atoms/typography/mdx.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import {
+    AccentTitle,
+    LargeTitle,
+    Link,
+    MediumTitle,
+    SmallTitle,
+    Text,
+    text600,
+    text700,
+    text800,
+    text900,
+} from './typography';
+
+export const mdxComponents = {
+    h1: styled.h1`
+        ${text900}
+    `,
+    h2: styled.h2`
+        ${text800}
+    `,
+    h3: styled.h3`
+        ${text700}
+    `,
+    h4: styled.h4`
+        ${text600}
+    `,
+    p: styled.p`
+        ${Text}
+    `,
+    a: Link,
+};

src/design-system/atoms/typography/typography.stories.tsx

@@ -107,3 +107,12 @@ export const Spacing = () => (
         })}
     </div>
 );
+
+export const Link = () => (
+    <typography.Link
+        target="_blank"
+        href="https://images.boredomfiles.com/wp-content/uploads/sites/5/2016/03/fox-door-5.png"
+    >
+        Here is a link &lt;3
+    </typography.Link>
+);

src/design-system/atoms/typography/typography.tsx

@@ -1,4 +1,6 @@
 import styled, { css } from 'styled-components';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
 import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
 
 const reset = css`
@@ -86,3 +88,12 @@ export const AmbientLarge = styled.span`
 export const AmbientSmall = styled.span`
     ${text100}
 `;
+
+export const Link = styled.a`
+    color: ${palette.taupe500};
+    text-decoration: none;
+    transition: color ${transitions.actionable}s ease-in-out;
+    &:hover {
+        color: ${palette.taupe600};
+    }
+`;