feat(foundation): added the first elements to foundation docs

.prettierignore

@@ -1,3 +1,4 @@
 package.json
 *.hbs
-*.css.d.ts
+*.css.d.ts
+width.scss

packages/website/gatsby-config.js

@@ -1,22 +1,34 @@
 module.exports = {
-    siteMetadata: {
-        title: `ruids - Design System`,
-        description: `Kick off your next project with ruids Design System`,
-        promoText: '',
-        promoLink: '',
-        promoLinkText: '',
+  siteMetadata: {
+    title: `ruids - Design System`,
+    description: `Kick off your next project with ruids Design System`,
+    promoText: '',
+    promoLink: '',
+    promoLinkText: '',
+    menuLinks: [
+      {
+        name: 'Foundation',
+        link: '',
         menuLinks: [
-            {
-                name: 'Foundation',
-                link: '',
-                menuLinks: [
-                    {
-                        name: 'Color',
-                        link: '/foundation/color/',
-                    }
-                ]
-            }
-        ]
+          {
+            name: 'Color',
+            link: '/foundation/color/',
+          },
+          {
+            name: 'Margin',
+            link: '/foundation/margin/',
+          },
+          {
+            name: 'Padding',
+            link: '/foundation/padding/',
+          },
+          {
+            name: 'Box Shadows',
+            link: '/foundation/box-shadows/',
+          },
+        ],
+      },
+    ],
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
@@ -29,22 +41,22 @@ module.exports = {
     },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
-      {
-          resolve: 'gatsby-plugin-mdx',
-          options: {
-              defaultLayouts: {
-                  default: require.resolve('./src/components/layout.tsx'),
-              },
-              gatsbyRemarkPlugins: [
-                  {
-                      resolve: `gatsby-remark-images`,
-                      options: {
-                          maxWidth: 912,
-                      },
-                  },
-              ],
+    {
+      resolve: 'gatsby-plugin-mdx',
+      options: {
+        defaultLayouts: {
+          default: require.resolve('./src/components/layout.tsx'),
+        },
+        gatsbyRemarkPlugins: [
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              maxWidth: 912,
+            },
           },
+        ],
       },
+    },
     'gatsby-plugin-emotion',
     {
       resolve: `gatsby-plugin-manifest`,

packages/website/package.json

@@ -5,9 +5,9 @@
   "version": "0.0.0-dev",
   "author": "Julian Koehn <[email protected]>",
   "dependencies": {
-    "@ruids/components": "^1.4.0",
-    "@ruids/css": "^1.3.0",
-    "@ruids/tokens": "^1.3.2",
+    "@ruids/components": "^1.7.0",
+    "@ruids/css": "^1.3.2",
+    "@ruids/tokens": "^1.6.0",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-emotion": "^4.3.10",

packages/website/src/components/ColorSwatch/ColorSwatch.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react'
+import { styles } from './styles'
+import { rgb2cmyk } from '../../helpers/rgb2cmyk'
+
+type Props = {
+  name: string
+  hex: string
+}
+
+const hexToRgb = (hex: string) => {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null
+}
+
+export const ColorSwatch: React.FC<Props> = ({ hex, name }) => {
+  const { rgb, cmyk } = useMemo(() => {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    const r = parseInt(result[1], 16)
+    const g = parseInt(result[2], 16)
+    const b = parseInt(result[3], 16)
+    const rgb = `${r}, ${g}, ${b}`
+
+    const cmyk = rgb2cmyk(r, g, b)
+    const cmykString = `${cmyk.c}, ${cmyk.m}, ${cmyk.y}, ${cmyk.k}`
+    return {
+      rgb,
+      cmyk: cmykString,
+    }
+  }, [hex])
+
+  return (
+    <div className="w-full" css={styles.colorSwatch}>
+      <div
+        css={styles.header}
+        style={{
+          backgroundColor: hex,
+        }}
+      ></div>
+      <div css={styles.body}>
+        <div css={styles.wrap}>
+          <div css={styles.item}>
+            <div css={styles.label}>Text Class</div>
+            <div css={styles.value}>text-{name}</div>
+          </div>
+          <div css={styles.item}>
+            <div css={styles.label}>RGB</div>
+            <div css={styles.value}>{rgb}</div>
+          </div>
+          <div css={styles.item}>
+            <div css={styles.label}>CMYK</div>
+            <div css={styles.value}>{cmyk}</div>
+          </div>
+        </div>
+        <div css={styles.wrap}>
+          <div css={styles.item}>
+            <div css={styles.label}>Bg Class</div>
+            <div css={styles.value}>bg-{name}</div>
+          </div>
+          <div css={styles.item}>
+            <div css={styles.label}>Hex</div>
+            <div css={styles.value}>{hex}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/website/src/components/ColorSwatch/Swatch.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { css } from '@emotion/core'
+
+export const Swatch: React.FC<{
+  hex: string
+}> = ({ hex }) => (
+  <div
+    css={css({
+      float: 'left',
+      height: 40,
+      width: 40,
+      marginRight: 20,
+      borderRadius: 4,
+      border: '1px solid transparent',
+    })}
+    style={{
+      backgroundColor: hex,
+    }}
+  />
+)

packages/website/src/components/ColorSwatch/index.ts

@@ -0,0 +1,2 @@
+export { ColorSwatch } from './ColorSwatch'
+export { Swatch } from './Swatch'

packages/website/src/components/ColorSwatch/styles.ts

@@ -0,0 +1,49 @@
+import { css } from '@emotion/core'
+import tokens from '@ruids/tokens'
+
+export const styles = {
+  colorSwatch: css`
+    box-sizing: border-box;
+    margin: ${tokens.spacing4};
+    border-radius: 6px;
+    background-color: #f4f5f7;
+    :after {
+      content: ' ';
+      display: table;
+      clear: both;
+    }
+  `,
+  header: css`
+    position: relative;
+    height: 0;
+    padding-bottom: 50%;
+    border-radius: 6px 6px 0 0;
+    border: 1px solid transparent;
+  `,
+  body: css`
+    position: relative;
+    left: 50%;
+    float: left;
+    padding: 10px 0;
+    transform: translateX(-50%);
+  `,
+  wrap: css`
+    float: left;
+    padding: 0 15px;
+    min-width: 65px;
+  `,
+  item: css`
+    padding: 15px 0;
+  `,
+  label: css`
+    font-family: ${tokens.fontSans};
+    font-size: 11px;
+    color: #62748c;
+    text-transform: uppercase;
+    line-height: 16px;
+  `,
+  value: css`
+    font-family: ${tokens.fontSans};
+    font-size: 14px;
+  `,
+}

packages/website/src/components/ColorTable.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Table, Tag } from '@ruids/components'
+import { Swatch } from './ColorSwatch/Swatch'
+import tokens from '@ruids/tokens'
+
+type Props = {
+  name: string
+  colors: string[]
+}
+
+const getInitialLetter = (name: string) => {
+  const letter = name.charAt(0)
+
+  return letter.toUpperCase()
+}
+
+const toClassName = (name: string, color: string) => {
+  return `-${name.toLowerCase()}-${color}`
+}
+
+export const ColorTable: React.FC<Props> = ({ name, colors }) => {
+  return (
+    <Table>
+      <Table.Body>
+        {colors.map((c, i) => (
+          <Table.Row key={`${name}-${c}-${i}`}>
+            <Table.Cell>
+              <Swatch hex={tokens[`color${name}${c}`]} />
+            </Table.Cell>
+            <Table.Cell>
+              {getInitialLetter(name)}
+              {c}
+            </Table.Cell>
+            <Table.Cell>
+              <Tag>{tokens[`color${name}${c}`]}</Tag>
+            </Table.Cell>
+
+            <Table.Cell>
+              <Tag>text{toClassName(name, c)}</Tag>
+            </Table.Cell>
+            <Table.Cell>
+              <Tag>bg{toClassName(name, c)}</Tag>
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}

packages/website/src/components/DocFormatter/DocFormatter.tsx

@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react'
+import { Heading } from '@ruids/components'
+import { styles } from './styles'
+
+export const DocFormatter: React.FC<{
+  frontmatter: any
+}> = ({ frontmatter, children }) => {
+  const data = useMemo(() => {
+    return {
+      title: frontmatter && frontmatter.title,
+      githubUrl: frontmatter && frontmatter.storybook,
+      storybookUrl: frontmatter && frontmatter.github,
+      status: frontmatter && frontmatter.status,
+    }
+  }, [])
+
+  return (
+    <React.Fragment>
+      <header css={styles.header}>
+        {data.title && <Heading is="h3">{data.title}</Heading>}
+      </header>
+      <main>{children}</main>
+    </React.Fragment>
+  )
+}

packages/website/src/components/DocFormatter/index.ts

@@ -0,0 +1 @@
+export { DocFormatter } from './DocFormatter'

packages/website/src/components/DocFormatter/styles.ts

@@ -0,0 +1,12 @@
+import { css } from '@emotion/core'
+import tokens from '@ruids/tokens'
+
+export const styles = {
+  header: css`
+    min-width: 100%;
+    margin: 0 auto;
+    padding-bottom: ${tokens.spacing8};
+    margin-bottom: ${tokens.spacing8};
+    border-bottom: 1px solid ${tokens.colorNeutral30};
+  `,
+}