feat: Add majority of design system components, build system fixes (#11)

* feat(design-system): pre-port of roleypoly/ui

* feat(design-system): port molecules

* chore(design-system): prettier

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

* fix(common/utils): hack fixtures test data moved to design-system, update accordingly

* chore: document protoReflection.ts

* fix(design-system): some molecules missed the magic fuckery

* ci: keep going on bazel test failures

* fix(design-system): server masthead molecule missed the magic fuckery

* chore: fix ts paths

* chore: fix docker publisher

* chore: fix docker publisher names

* chore(discord-bot): fix publisher

* chore(discord-bot): fix publisher

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};
+    }
+`;