From ba683acd263ba49d4f8a7f9a047c8bd5fe876bc7 Mon Sep 17 00:00:00 2001
From: Kris Urbas <krzysu@interia.pl>
Date: Mon, 17 Aug 2020 00:28:48 +1000
Subject: [PATCH] define a few meta components in storybook (#55)

---
 .../.storybook/preview-body.html              |   5 +
 packages/design-system/src/MetaBox.tsx        |  26 +++++
 packages/design-system/src/MetaTag.tsx        |  14 +++
 packages/design-system/src/index.ts           |  22 ++--
 packages/design-system/src/theme.ts           |  20 +++-
 .../design-system/stories/0-Text.stories.tsx  | 109 ++++++++++++++++--
 .../stories/1-Button.stories.tsx              |  73 ------------
 .../stories/1-MetaButton.stories.tsx          |  42 +++++++
 .../stories/2-MetaBox.stories.tsx             |  34 ++++++
 packages/design-system/test/0-Text.test.tsx   |   4 +-
 10 files changed, 248 insertions(+), 101 deletions(-)
 create mode 100644 packages/design-system/.storybook/preview-body.html
 create mode 100644 packages/design-system/src/MetaBox.tsx
 create mode 100644 packages/design-system/src/MetaTag.tsx
 delete mode 100644 packages/design-system/stories/1-Button.stories.tsx
 create mode 100644 packages/design-system/stories/1-MetaButton.stories.tsx
 create mode 100644 packages/design-system/stories/2-MetaBox.stories.tsx

diff --git a/packages/design-system/.storybook/preview-body.html b/packages/design-system/.storybook/preview-body.html
new file mode 100644
index 00000000..7ad22ae9
--- /dev/null
+++ b/packages/design-system/.storybook/preview-body.html
@@ -0,0 +1,5 @@
+<style>
+  body {
+    padding: 2em;
+  }
+</style>
diff --git a/packages/design-system/src/MetaBox.tsx b/packages/design-system/src/MetaBox.tsx
new file mode 100644
index 00000000..fceb4123
--- /dev/null
+++ b/packages/design-system/src/MetaBox.tsx
@@ -0,0 +1,26 @@
+import { Box, Text } from '@chakra-ui/core';
+import React from 'react';
+
+export type MetaBoxProps = {
+  title: string;
+  children: React.ReactNode;
+};
+
+export const MetaBox: React.FC<MetaBoxProps> = ({ children, title }) => (
+  <Box>
+    <Box bg="purpleBoxLight" p={4}>
+      <Text
+        fontFamily="mono"
+        fontSize="sm"
+        fontWeight="bold"
+        color="blueLight"
+        as="div"
+      >
+        {title}
+      </Text>
+    </Box>
+    <Box bg="purpleBoxDark" p={6}>
+      {children}
+    </Box>
+  </Box>
+);
diff --git a/packages/design-system/src/MetaTag.tsx b/packages/design-system/src/MetaTag.tsx
new file mode 100644
index 00000000..00e7cc6e
--- /dev/null
+++ b/packages/design-system/src/MetaTag.tsx
@@ -0,0 +1,14 @@
+import { Tag, TagProps } from '@chakra-ui/core';
+import React from 'react';
+
+export const MetaTag: React.FC<TagProps> = ({ children, ...props }) => (
+  <Tag
+    fontFamily="body"
+    fontSize="sm"
+    backgroundColor="purpleTag"
+    color="white"
+    {...props}
+  >
+    {children}
+  </Tag>
+);
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index 0246a35e..c5bf36eb 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -1,26 +1,26 @@
 export {
-  ChakraProvider,
-  CSSReset,
-  Heading,
-  Box,
-  Image,
-  Text,
   Avatar,
+  Box,
   Button,
   ButtonGroup,
-  Grid,
-  SimpleGrid,
-  Flex,
+  CSSReset,
+  ChakraProvider,
   Divider,
+  Flex,
+  Grid,
+  Heading,
   Icon,
   IconButton,
+  Image,
+  Input,
   Link,
   List,
-  Input,
   Select,
+  SimpleGrid,
   Skeleton,
   Spinner,
   Stack,
+  Text,
   useTheme,
   useToast,
 } from '@chakra-ui/core';
@@ -30,3 +30,5 @@ export { Icon3box } from './icons';
 export { EmailIcon } from '@chakra-ui/icons';
 export { MetaHeading } from './MetaHeading';
 export { MetaButton } from './MetaButton';
+export { MetaBox } from './MetaBox';
+export { MetaTag } from './MetaTag';
diff --git a/packages/design-system/src/theme.ts b/packages/design-system/src/theme.ts
index c2df9bc6..6fcca701 100644
--- a/packages/design-system/src/theme.ts
+++ b/packages/design-system/src/theme.ts
@@ -3,6 +3,12 @@ import chakraTheme, { Theme as ChakraTheme } from '@chakra-ui/theme';
 interface MetaColors {
   offwhite: string;
   blue02: string;
+  dark: string;
+  purpleBoxDark: string;
+  purpleBoxLight: string;
+  purpleTag: string;
+  blueLight: string;
+  cyanText: string;
 }
 
 interface MetaTheme {
@@ -17,7 +23,7 @@ export const theme: Theme = {
     ...chakraTheme.styles,
     global: {
       ...chakraTheme.styles.global,
-      background: 'black',
+      background: '#1b0d2a',
       color: 'white',
     },
   },
@@ -35,8 +41,6 @@ export const theme: Theme = {
       800: '#00494b',
       900: '#001a1b',
     },
-    offwhite: '#F6F8F9',
-    blue02: 'rgba(79, 105, 205, 0.2)',
     purple: {
       50: '#eee7ff',
       100: '#c8bafc',
@@ -49,10 +53,18 @@ export const theme: Theme = {
       800: '#150747',
       900: '#07021d',
     },
+    offwhite: '#F6F8F9',
+    blue02: 'rgba(79, 105, 205, 0.2)',
+    dark: '#1B0D2A',
+    purpleBoxDark: '#261943',
+    purpleBoxLight: '#392373',
+    purpleTag: '#40347C',
+    blueLight: '#A5B9F6',
+    cyanText: '#79F8FB',
   },
   fonts: {
     body: '"IBM Plex Sans", sans-serif',
     mono: '"IBM Plex Mono", monospace',
     heading: '"Press Start 2P", sans-serif',
-  }
+  },
 };
diff --git a/packages/design-system/stories/0-Text.stories.tsx b/packages/design-system/stories/0-Text.stories.tsx
index ec307d3f..f20800ef 100644
--- a/packages/design-system/stories/0-Text.stories.tsx
+++ b/packages/design-system/stories/0-Text.stories.tsx
@@ -1,23 +1,108 @@
-import { Stack, Text } from '@chakra-ui/core';
 import React from 'react';
 
+import { Box, Button, Heading, Link, Stack, Text } from '../src';
+
 export default {
   title: 'Text',
   component: Text,
 };
 
-export const Sizes = () => (
+export const AllTypes = () => (
   <Stack spacing={3}>
-    <Text fontSize="6xl">In love with MetaGame</Text>
-    <Text fontSize="5xl">In love with MetaGame</Text>
-    <Text fontSize="4xl">In love with MetaGame</Text>
-    <Text fontSize="3xl">In love with MetaGame</Text>
-    <Text fontSize="2xl">In love with MetaGame</Text>
-    <Text fontSize="xl">In love with MetaGame</Text>
-    <Text fontSize="lg">In love with MetaGame</Text>
-    <Text fontSize="md">In love with MetaGame</Text>
-    <Text fontSize="sm">In love with MetaGame</Text>
-    <Text fontSize="xs">In love with MetaGame</Text>
+    <Heading fontSize="3xl">Become a Player</Heading>
+
+    <Text fontFamily="mono" fontSize="sm">
+      I’ll do this later.{' '}
+      <Button
+        variant="link"
+        size="sm"
+        color="cyanText"
+        fontWeight="normal"
+        verticalAlign="inherit"
+        onClick={() => {}}
+      >
+        Go to my profile
+      </Button>
+    </Text>
+
+    <Box>
+      <Text fontSize="xl" fontFamily="heading">
+        PΞTH
+      </Text>
+      <Text fontFamily="body" fontSize="md">
+        @peth
+      </Text>
+    </Box>
+
+    <Box>
+      <Text
+        fontFamily="body"
+        fontSize="sm"
+        fontWeight="bold"
+        color="blueLight"
+        textTransform="uppercase"
+      >
+        Role
+      </Text>
+      <Text fontFamily="body" fontSize="md" fontWeight="bold">
+        Community Lead
+      </Text>
+    </Box>
+
+    <Text fontFamily="mono" fontSize="sm" color="blueLight">
+      About me
+    </Text>
+
+    <Box>
+      <Text fontFamily="body" fontSize="2xl" fontWeight="bold">
+        Peter Jursic
+      </Text>
+      <Text fontFamily="body" fontSize="md">
+        Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
+        sint. Velit officia consequat duis enim velit mollit. Exercitation
+        veniam consequat sunt nostrud amet.{' '}
+        <Button
+          fontFamily="body"
+          variant="link"
+          size="sm"
+          color="cyanText"
+          fontWeight="normal"
+          verticalAlign="inherit"
+          onClick={() => {}}
+        >
+          Read more
+        </Button>
+      </Text>
+
+      <Link
+        fontFamily="body"
+        fontSize="sm"
+        color="cyanText"
+        href="https://metagame.wtf"
+      >
+        Go to external url
+      </Link>
+    </Box>
+
+    <Box>
+      <Text fontFamily="body" fontSize="lg" fontWeight="bold">
+        The Reformer
+      </Text>
+      <Text fontFamily="body" fontSize="sm" color="blueLight">
+        Principled, Purposeful, Self-Controlled, and Perfectionistic
+      </Text>
+    </Box>
+
+    <Box>
+      <Text fontFamily="body" fontSize="sm" fontWeight="bold" color="blueLight">
+        MetaGame Discord Bots
+      </Text>
+      <Text fontFamily="body" fontSize="sm">
+        Would be great to have the bot message every person promoted to MG
+        Player with “Welcome to the game…” (an onboarding guide, something like
+        this)
+      </Text>
+    </Box>
   </Stack>
 );
 
diff --git a/packages/design-system/stories/1-Button.stories.tsx b/packages/design-system/stories/1-Button.stories.tsx
deleted file mode 100644
index b2d9d2d4..00000000
--- a/packages/design-system/stories/1-Button.stories.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Button, ButtonGroup } from '@chakra-ui/core';
-import { ArrowForwardIcon, EmailIcon } from '@chakra-ui/icons';
-import React from 'react';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const Sizes = () => (
-  <ButtonGroup spacing={4}>
-    <Button colorScheme="teal" size="xs">
-      Button
-    </Button>
-    <Button colorScheme="teal" size="sm">
-      Button
-    </Button>
-    <Button colorScheme="teal" size="md">
-      Button
-    </Button>
-    <Button colorScheme="teal" size="lg">
-      Button
-    </Button>
-  </ButtonGroup>
-);
-
-export const Variants = () => (
-  <ButtonGroup spacing={4}>
-    <Button colorScheme="teal" variant="solid">
-      Button
-    </Button>
-    <Button colorScheme="teal" variant="outline">
-      Button
-    </Button>
-    <Button colorScheme="teal" variant="ghost">
-      Button
-    </Button>
-    <Button colorScheme="teal" variant="link">
-      Button
-    </Button>
-  </ButtonGroup>
-);
-
-export const Icons = () => (
-  <ButtonGroup spacing={4}>
-    <Button leftIcon={<EmailIcon />} colorScheme="teal" variant="solid">
-      Email
-    </Button>
-    <Button
-      rightIcon={<ArrowForwardIcon />}
-      colorScheme="teal"
-      variant="outline"
-    >
-      Call us
-    </Button>
-  </ButtonGroup>
-);
-
-export const Loading = () => (
-  <ButtonGroup spacing={4}>
-    <Button isLoading colorScheme="teal" variant="solid">
-      Email
-    </Button>
-    <Button
-      isLoading
-      loadingText="Submitting"
-      colorScheme="teal"
-      variant="outline"
-    >
-      Submit
-    </Button>
-  </ButtonGroup>
-);
diff --git a/packages/design-system/stories/1-MetaButton.stories.tsx b/packages/design-system/stories/1-MetaButton.stories.tsx
new file mode 100644
index 00000000..daec0173
--- /dev/null
+++ b/packages/design-system/stories/1-MetaButton.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { ButtonGroup, MetaButton, Stack } from '../src';
+
+export default {
+  title: 'MetaButton',
+  component: MetaButton,
+};
+
+export const Sizes = () => (
+  <Stack spacing={4}>
+    <ButtonGroup spacing={4}>
+      <MetaButton size="xs">MetaButton</MetaButton>
+      <MetaButton size="sm">MetaButton</MetaButton>
+      <MetaButton size="md">MetaButton</MetaButton>
+      <MetaButton size="lg">MetaButton</MetaButton>
+    </ButtonGroup>
+    <ButtonGroup spacing={4}>
+      <MetaButton size="xs" variant="outline">
+        MetaButton
+      </MetaButton>
+      <MetaButton size="sm" variant="outline">
+        MetaButton
+      </MetaButton>
+      <MetaButton size="md" variant="outline">
+        MetaButton
+      </MetaButton>
+      <MetaButton size="lg" variant="outline">
+        MetaButton
+      </MetaButton>
+    </ButtonGroup>
+  </Stack>
+);
+
+export const Variants = () => (
+  <ButtonGroup spacing={4}>
+    <MetaButton variant="solid">MetaButton</MetaButton>
+    <MetaButton variant="outline">MetaButton</MetaButton>
+    <MetaButton variant="ghost">MetaButton</MetaButton>
+    <MetaButton variant="link">MetaButton</MetaButton>
+  </ButtonGroup>
+);
diff --git a/packages/design-system/stories/2-MetaBox.stories.tsx b/packages/design-system/stories/2-MetaBox.stories.tsx
new file mode 100644
index 00000000..294c0dc7
--- /dev/null
+++ b/packages/design-system/stories/2-MetaBox.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { MetaBox, MetaTag, Stack, Text } from '../src';
+
+export default {
+  title: 'MetaBox',
+  component: MetaBox,
+};
+
+export const Default = () => (
+  <MetaBox title="About me">
+    <Text fontFamily="body" fontSize="2xl" fontWeight="bold" mb={4}>
+      Name Nickname
+    </Text>
+    <Text fontFamily="body">
+      Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
+      Velit officia consequat duis enim velit mollit. Exercitation veniam
+      consequat sunt nostrud amet....
+    </Text>
+  </MetaBox>
+);
+
+export const WithTags = () => (
+  <MetaBox title="Skills">
+    <Stack spacing={2} isInline flexWrap="wrap" mb={-2}>
+      <MetaTag mb={2}>Writing code</MetaTag>
+      <MetaTag mb={2}>Observability</MetaTag>
+      <MetaTag mb={2}>Dealing with ambiguity</MetaTag>
+      <MetaTag mb={2}>Knowledge Sharing</MetaTag>
+      <MetaTag mb={2}>Facilitation</MetaTag>
+      <MetaTag mb={2}>Teamwork</MetaTag>
+    </Stack>
+  </MetaBox>
+);
diff --git a/packages/design-system/test/0-Text.test.tsx b/packages/design-system/test/0-Text.test.tsx
index 91aeb048..5fe0dd22 100644
--- a/packages/design-system/test/0-Text.test.tsx
+++ b/packages/design-system/test/0-Text.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { Sizes } from '../stories/0-Text.stories';
+import { Fonts } from '../stories/0-Text.stories';
 
 describe('Text Stories', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<Sizes />, div);
+    ReactDOM.render(<Fonts />, div);
     ReactDOM.unmountComponentAtNode(div);
   });
 });