Start generics article

src/components/BubbleQuotes.tsx

@@ -2,10 +2,12 @@
 import { css, jsx } from '@emotion/core'
 import Emoji, { emojiToComponent } from 'src/components/Emoji'
 import useTheme from 'src/hooks/useTheme'
+import { allColors } from 'src/lib/theme/colors'
 
 interface BubbleQuoteProps {
   type: keyof typeof emojiToComponent
   children: React.ReactNode
+  backgroundColor?: keyof typeof allColors
 }
 
 type Size = 'md' | 'lg'
@@ -25,48 +27,50 @@ const BubbleQuotes = ({
         margin-bottom: ${spaces(1.75, true)};
         ${ns} {
           font-size: ${size === 'lg' ? fontSizes(1.2) : fontSizes(1)};
-          line-height: ${size === 'lg' ? lineHeights(1.5) : lineHeights(1.6)};
+          line-height: ${size === 'lg' ? lineHeights(1.2) : lineHeights(1)};
         }
       `}
     >
-      {quotes.map(({ type, children }, index) => (
-        <div
-          key={`${type}${index}`}
-          css={css`
-            margin: 0 0 ${spaces(1, true)};
-            display: flex;
-          `}
-        >
+      {quotes.map(
+        ({ type, children, backgroundColor = 'lightYellow1' }, index) => (
           <div
+            key={`${type}${index}`}
             css={css`
-              font-size: ${size === 'lg' ? fontSizes(2) : fontSizes(1)};
-              margin-right: ${size === 'lg' ? spaces(0.5) : spaces(0.25)};
-              padding-top: ${spaces(0.5)};
-
-              ${ns} {
-                padding-top: ${spaces(0)};
-                margin-right: ${size === 'lg' ? spaces(1) : spaces(0.75)};
-                font-size: ${size === 'lg' ? fontSizes(4) : fontSizes(1)};
-              }
+              margin: 0 0 ${spaces(1, true)};
+              display: flex;
             `}
           >
-            <Emoji type={type} />
-          </div>
-          <div
-            css={css`
-              background: ${colors('lightYellow1')};
-              padding: ${spaces(1, true)} ${spaces(1, true)} 0;
-              border-radius: ${radii(0.5)};
+            <div
+              css={css`
+                font-size: ${size === 'lg' ? fontSizes(2) : fontSizes(1.6)};
+                margin-right: ${size === 'lg' ? spaces(0.5) : spaces(0.25)};
+                padding-top: ${spaces(0.5)};
 
-              ${ns} {
+                ${ns} {
+                  padding-top: ${size === 'lg' ? spaces(0) : spaces(0.25)};
+                  margin-right: ${size === 'lg' ? spaces(1) : spaces(0.75)};
+                  font-size: ${size === 'lg' ? fontSizes(4) : fontSizes(2)};
+                }
+              `}
+            >
+              <Emoji type={type} />
+            </div>
+            <div
+              css={css`
+                background: ${colors(backgroundColor)};
                 padding: ${spaces(1, true)} ${spaces(1, true)} 0;
-              }
-            `}
-          >
-            {children}
+                border-radius: ${radii(0.5)};
+
+                ${ns} {
+                  padding: ${spaces(1, true)} ${spaces(1, true)} 0;
+                }
+              `}
+            >
+              {children}
+            </div>
           </div>
-        </div>
-      ))}
+        )
+      )}
     </div>
   )
 }

src/components/Caption.tsx

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import useTheme from 'src/hooks/useTheme'
+
+const Caption = ({ children }: { children: React.ReactNode }) => {
+  const { spaces, fontSizes, colors } = useTheme()
+  return (
+    <div
+      css={[
+        css`
+          font-size: ${fontSizes(0.85)};
+          color: ${colors('brown')};
+          padding-bottom: ${spaces(0.5)};
+          max-width: 18rem;
+          margin: 0 auto;
+        `
+      ]}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Caption

src/components/Card.tsx

@@ -0,0 +1,181 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import React from 'react'
+import { allColors } from 'src/lib/theme/colors'
+import useTheme from 'src/hooks/useTheme'
+import { H3 } from 'src/components/ContentTags'
+
+export interface CardProps {
+  children: React.ReactNode
+  color?: 'default'
+  slideNumber?: number
+  slideCount?: number
+  isLast?: boolean
+  title?: React.ReactNode
+  footer?: {
+    content: React.ReactNode
+    color?: CardProps['color']
+  }
+}
+
+export interface CardState {
+  overrideColor?: CardProps['color']
+}
+
+export const backgroundColor = (
+  color: NonNullable<CardProps['color']>
+): keyof typeof allColors =>
+  ({
+    default: 'lightYellow1' as const
+  }[color])
+
+const slideLabelBgColor = (
+  color: NonNullable<CardProps['color']>
+): keyof typeof allColors =>
+  ({
+    default: 'brown' as const
+  }[color])
+
+const Card = ({
+  title,
+  color = 'default',
+  children,
+  slideNumber,
+  slideCount,
+  isLast,
+  footer
+}: CardProps) => {
+  const { ns, colors, fontSizes, spaces, radii } = useTheme()
+  return (
+    <>
+      <div
+        css={css`
+          position: relative;
+          margin-left: ${spaces('-0.75')};
+          margin-right: ${spaces('-0.75')};
+
+          ${ns} {
+            margin-left: ${spaces('-1.5')};
+            margin-right: ${spaces('-1.5')};
+          }
+        `}
+      >
+        {slideNumber && slideCount && (
+          <div
+            css={css`
+              position: absolute;
+              bottom: -0.5rem;
+              right: 1rem;
+              font-size: ${fontSizes(0.75)};
+              line-height: 1;
+              color: ${colors('white')};
+              background: ${colors(slideLabelBgColor(color))};
+              padding: ${spaces(0.25)} ${spaces(0.5)};
+              border-radius: 9999px;
+              user-select: none;
+            `}
+          >
+            <>
+              <span
+                css={css`
+                  color: ${colors('white75')};
+                `}
+              >
+                Slide{' '}
+              </span>
+              <span
+                css={css`
+                  font-weight: bold;
+                `}
+              >
+                {slideNumber}
+              </span>{' '}
+              <span
+                css={css`
+                  color: ${colors('white75')};
+                  font-weight: bold;
+                `}
+              >
+                / {slideCount}
+              </span>
+            </>
+          </div>
+        )}
+        <div>
+          <div
+            css={css`
+              padding-top: ${spaces(1)};
+              padding-left: ${spaces(0.75)};
+              padding-right: ${spaces(0.75)};
+              padding-bottom: ${spaces(0.5)};
+
+              ${ns} {
+                padding-top: ${spaces(1.5)};
+                padding-left: ${spaces(1.5)};
+                padding-right: ${spaces(1.5)};
+                padding-bottom: ${spaces(1)};
+              }
+              border-top-right-radius: ${radii(0.5)};
+              border-top-left-radius: ${radii(0.5)};
+              border-bottom-right-radius: ${footer ? 0 : radii(0.5)};
+              border-bottom-left-radius: ${footer ? 0 : radii(0.5)};
+              background: ${colors(backgroundColor(color))};
+            `}
+          >
+            {title && (
+              <H3
+                css={[
+                  css`
+                    text-align: center;
+                    margin-left: ${spaces('-0.25')};
+                    margin-right: ${spaces('-0.25')};
+                  `
+                ]}
+              >
+                {title}
+              </H3>
+            )}
+            {children}
+          </div>
+          {footer && (
+            <div
+              css={css`
+                padding-top: ${spaces(0.75)};
+                padding-left: ${spaces(1)};
+                padding-right: ${spaces(1)};
+                padding-bottom: ${spaces(0.5)};
+
+                ${ns} {
+                  margin-top: ${spaces('-0.25')};
+                  padding-top: ${spaces(1.25)};
+                  padding-left: ${spaces(2)};
+                  padding-right: ${spaces(2)};
+                  padding-bottom: ${spaces(1)};
+                }
+                background: ${colors(
+                  backgroundColor(footer.color || 'default')
+                )};
+                border-bottom-right-radius: ${radii(0.5)};
+                border-bottom-left-radius: ${radii(0.5)};
+              `}
+            >
+              {footer.content}
+            </div>
+          )}
+        </div>
+      </div>
+      {!isLast && (
+        <div
+          css={css`
+            width: 1.25rem;
+            height: 2rem;
+            margin: 0 auto;
+            background: ${colors('paleGreen')};
+          `}
+        />
+      )}
+    </>
+  )
+}
+
+export default Card