@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/ItemList/ItemListItem.js

@@ -0,0 +1,88 @@
+// @flow
+import React, { Component } from 'react'
+
+import ItemListContext from './ItemListContext'
+
+type Props = {
+  /**
+   * The position of the item in the list. Used for highlighting items with the keyboard.
+   */
+  index: number,
+  /**
+   * Data associated with this item that is provided in `ItemList` `onSelect`.
+   */
+  data?: any,
+  /**
+   * Disables the item from being selected or highlighted.
+   */
+  disabled?: boolean,
+}
+
+class ItemListItem extends Component<Props> {
+  node = null
+
+  highlighted = false
+
+  componentDidMount() {
+    this.setNode()
+    this.unsubscribeItem = this.itemList.subscribeItem(this)
+  }
+
+  componentDidUpdate(lastProps) {
+    if (lastProps.index !== this.props.index) {
+      // sort items array since index has changed and is now misplaced
+      this.itemList.items.sort((a, b) => a.props.index - b.props.index)
+      this.setNode()
+    }
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeItem()
+  }
+
+  setNode() {
+    this.node = document.getElementById(
+      this.itemList.getItemId(this.props.index)
+    )
+  }
+
+  getNode() {
+    return this.node
+  }
+
+  highlight = () => {
+    if (!this.props.disabled) {
+      this.itemList.setHighlightedIndex(this.props.index, {
+        maybeScrollIntoView: false,
+      })
+    }
+  }
+
+  select = () => {
+    if (!this.props.disabled) {
+      this.itemList.selectItem(this.props.index)
+    }
+  }
+
+  render() {
+    return (
+      <ItemListContext.Consumer>
+        {(itemList) => {
+          if (!this.itemList) {
+            this.itemList = itemList
+          }
+          return this.props.children({
+            id: itemList.getItemId(this.props.index),
+            clearHighlight: itemList.clearHighlightedIndex,
+            highlight: this.highlight,
+            highlighted: this.highlighted,
+            select: this.select,
+            selected: itemList.isItemSelected(this.props.data),
+          })
+        }}
+      </ItemListContext.Consumer>
+    )
+  }
+}
+
+export default ItemListItem

package/src/ItemList/index.js

@@ -0,0 +1,5 @@
+import ItemList from './ItemList'
+import ItemListController from './ItemListController'
+import ItemListItem from './ItemListItem'
+
+export { ItemList, ItemListController, ItemListItem }

package/src/ItemList/utils.js

@@ -0,0 +1,58 @@
+import { getClosestViewport } from '../utils'
+
+export function isNumberKey(event) {
+  return event.keyCode >= 48 && event.keyCode <= 57
+}
+
+export function isLetterKey(event) {
+  return event.keyCode >= 65 && event.keyCode <= 90
+}
+
+export function isSpecialKey(event) {
+  return event.keyCode >= 188 && event.keyCode <= 190
+}
+
+export function isComboKey(event) {
+  return event.ctrlKey || event.metaKey || event.altKey
+}
+
+export function modulo(val, max) {
+  return val >= 0 ? val % max : ((val % max) + max) % max
+}
+
+export function scroller(node) {
+  if (node === document.body) {
+    return {
+      offsetTop: 0,
+      scrollY: window.pageYOffset,
+      height: window.innerHeight,
+      setPosition: (top) => window.scrollTo(0, top),
+    }
+  } else {
+    return {
+      offsetTop: node.getBoundingClientRect().top,
+      scrollY: node.scrollTop,
+      height: node.offsetHeight,
+      setPosition: (top) => (node.scrollTop = top),
+    }
+  }
+}
+
+export function scrollIntoView(node) {
+  const scrollParent = scroller(getClosestViewport(node))
+  if (scrollParent === null) {
+    return
+  }
+  const nodeRect = node.getBoundingClientRect()
+  const nodeTop = scrollParent.scrollY + (nodeRect.top - scrollParent.offsetTop)
+  if (nodeTop < scrollParent.scrollY) {
+    // the item is above the scrollable area
+    scrollParent.setPosition(nodeTop)
+  } else if (
+    nodeTop + nodeRect.height >
+    scrollParent.scrollY + scrollParent.height
+  ) {
+    // the item is below the scrollable area
+    scrollParent.setPosition(nodeTop + nodeRect.height - scrollParent.height)
+  }
+}

package/src/Link/Inline.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import Link from './Link'
+
+function Inline({ light, hover, focus, readOnly, ...restProps }) {
+  const pseudoStyles =
+    restProps.readOnly || restProps.disabled
+      ? {}
+      : { backgroundColor: light ? 'light-0' : 'dark-0' }
+  if (!restProps.disabled && (hover || focus)) {
+    restProps = {
+      ...restProps,
+      ...pseudoStyles,
+    }
+  }
+  return (
+    <Link
+      underline={false}
+      paddingLeft={0.5}
+      marginHorizontal={-0.5}
+      stroke={false}
+      backgroundColor="transparent"
+      color={light ? 'light-9' : 'dark-9'}
+      hover={pseudoStyles}
+      focus={pseudoStyles}
+      readOnly={readOnly}
+      {...restProps}
+    />
+  )
+}
+
+export default Inline

package/src/Link/Link.js

@@ -0,0 +1,73 @@
+// @flow
+import React from 'react'
+
+import Text from '../Text'
+
+type Props = {
+  /**
+   * Where the browser should navigate to when pressed.
+   */
+  to: boolean,
+
+  /**
+   * Opens the linked destination in a new window or tab.
+   */
+  external: boolean,
+
+  /**
+   * The color of the link.
+   */
+  color: string,
+
+  /**
+   * Show an underline when hovering link. Defaults to `true`.
+   */
+  underline: boolean,
+}
+
+function Link({
+  to,
+  color = 'linkForeground',
+  external,
+  underline = true,
+  hover,
+  focus,
+  ...restProps
+}: Props) {
+  const props = {
+    display: 'inline-block',
+    position: 'relative',
+    hover: { color, ...hover },
+    focus: { color, ...focus },
+    color,
+  }
+  if (restProps.disabled) {
+    props.cursor = 'not-allowed'
+    props.opacity = 0.64
+  } else {
+    props.cursor = 'pointer'
+    if (to) {
+      props.as = 'a'
+      props.href = to
+    }
+    if (external) {
+      props.rel = 'noopener noreferrer'
+      props.target = '_blank'
+    }
+    if (underline) {
+      props.hover = {
+        color,
+        textDecoration: 'underline',
+        ...hover,
+      }
+      props.focus = {
+        color,
+        textDecoration: 'underline',
+        ...focus,
+      }
+    }
+  }
+  return <Text {...props} {...restProps} />
+}
+
+export default Link

package/src/Link/Link.mdx

@@ -0,0 +1,31 @@
+---
+title: Link
+category: General
+---
+
+```jsx live
+render(
+  <Link to="https://www.google.com" external>
+    Google
+  </Link>
+)
+```
+
+```jsx live
+render(
+  <StackView
+    axis="horizontal"
+    alignment="center"
+    padding={1}
+    backgroundColor="primary"
+    spacing={<Icon name="caret-right" color="white" marginHorizontal={0.25} />}
+  >
+    <Link to="#" color="white">
+      First Church Of Carlsbad
+    </Link>
+    <Link to="#" color="white">
+      Sunday
+    </Link>
+  </StackView>
+)
+```

package/src/Link/index.js

@@ -0,0 +1,4 @@
+import Link from './Link'
+import Inline from './Inline'
+Link.Inline = Inline
+export default Link

package/src/LinkList/LinkList.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import Divider from '../Divider'
+import Link from '../Link'
+import StackView from '../StackView'
+
+function LinkList({ links, ...restProps }) {
+  return (
+    <StackView
+      axis="horizontal"
+      alignment="center"
+      spacing={<Divider axis="vertical" margin={1} color="grey-6" />}
+      wrap
+      {...restProps}
+    >
+      {links.map((link) => (
+        <Link key={link.url} to={link.url}>
+          {link.name}
+        </Link>
+      ))}
+    </StackView>
+  )
+}
+
+export default LinkList

package/src/LinkList/LinkList.mdx

@@ -0,0 +1,29 @@
+---
+title: LinkList
+category: General
+---
+
+```jsx live
+render(
+  <LinkList
+    links={[
+      {
+        name: 'Twitter',
+        url: 'http://twitter.com',
+      },
+      {
+        name: 'Facebook',
+        url: 'http://facebook.com',
+      },
+      {
+        name: 'Google',
+        url: 'http://google.com',
+      },
+      {
+        name: 'Snapchat',
+        url: 'http://snapchat.com',
+      },
+    ]}
+  />
+)
+```

package/src/LinkList/index.js

@@ -0,0 +1,2 @@
+import LinkList from './LinkList'
+export default LinkList

package/src/List/List.js

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import StackView from '../StackView'
+import { cloneChildren } from '../utils'
+
+import ListItem from './ListItem'
+
+function List({
+  border,
+  borderColor = 'separatorTertiary',
+  children,
+  divider = true,
+  dividerColor = 'separatorTertiary',
+  onItemRemoveRequest,
+  ...restProps
+}) {
+  if (border) {
+    restProps.borderTopWidth = 1
+    restProps.borderTopColor = borderColor
+    restProps.borderBottomWidth = 1
+    restProps.borderBottomColor = borderColor
+  }
+  return (
+    <StackView {...restProps}>
+      {cloneChildren(children, (child, { index, lastChild }) => {
+        const childProps =
+          divider && !lastChild
+            ? {
+                borderBottomWidth: 1,
+                borderBottomColor: dividerColor,
+              }
+            : {}
+        if (onItemRemoveRequest || child.props.onRemoveRequest) {
+          childProps.onRemoveRequest = () => {
+            if (onItemRemoveRequest) {
+              onItemRemoveRequest(index)
+            }
+            if (child.props.onRemoveRequest) {
+              child.props.onRemoveRequest(index)
+            }
+          }
+        }
+        return childProps
+      })}
+    </StackView>
+  )
+}
+
+List.Item = ListItem
+
+export default List

package/src/List/List.mdx

@@ -0,0 +1,41 @@
+---
+title: List
+category: General
+---
+
+```jsx live
+render(() => {
+  const [open, setOpen] = React.useState(false)
+  return (
+    <Card padding={2}>
+      <Toolbar
+        title={<Heading level={3}>Title</Heading>}
+        helpContent="Toolbars need help too"
+        actions={
+          <Button
+            title={open ? 'Done' : 'Add'}
+            onClick={() => setOpen(!open)}
+          />
+        }
+        marginBottom={1}
+      />
+      <Collapse open={open} lazy>
+        <Combobox.Popover autoFocus>
+          <Combobox.Item>Item 1</Combobox.Item>
+          <Combobox.Item>Item 2</Combobox.Item>
+          <Combobox.Item>Item 3</Combobox.Item>
+        </Combobox.Popover>
+      </Collapse>
+      <Card
+        as={List}
+        marginTop={1}
+        onItemRemoveRequest={(index) => alert('Delete item at index ' + index)}
+      >
+        <List.Item>One</List.Item>
+        <List.Item>Two</List.Item>
+        <List.Item>Three</List.Item>
+      </Card>
+    </Card>
+  )
+})
+```

package/src/List/ListItem.js

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import Button from '../Button'
+import StackView from '../StackView'
+import { useHover } from '../hooks'
+
+function ListItem({
+  children,
+  onRemoveRequest,
+  removeTitle = 'Remove item',
+  ...restProps
+}) {
+  const { hover, hoverProps } = useHover()
+  return (
+    <StackView
+      axis="horizontal"
+      alignment="center"
+      distribution="space-between"
+      padding={1}
+      backgroundColor="surface"
+      {...hoverProps}
+      {...restProps}
+    >
+      {children}
+      {onRemoveRequest && (
+        <Button
+          icon={{ name: 'remove-circle-filled' }}
+          title={removeTitle}
+          size="sm"
+          theme="error"
+          variant="naked"
+          marginLeft={1}
+          opacity={hover ? 1 : 0}
+          onClick={onRemoveRequest}
+        />
+      )}
+    </StackView>
+  )
+}
+
+export default ListItem

package/src/List/index.js

@@ -0,0 +1,2 @@
+import List from './List'
+export default List

package/src/Logo/Logo.js

@@ -0,0 +1,112 @@
+import React from 'react'
+
+import Box from '../Box'
+
+const mark = {
+  services: `M12,0C2.4,0,0,2.4,0,12c0,9.6,2.4,12,12,12s12-2.4,12-12C24,2.4,21.6,0,12,0z M6.5,17.4c-0.7,0-1.3-0.6-1.3-1.3
+    c0-0.7,0.6-1.3,1.3-1.3s1.3,0.6,1.3,1.3C7.8,16.9,7.2,17.4,6.5,17.4z M6.5,13.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
+    s1.3,0.6,1.3,1.3C7.8,12.7,7.2,13.3,6.5,13.3z M6.5,9.2c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3s1.3,0.6,1.3,1.3S7.2,9.2,6.5,9.2z
+     M18,16.7c0,0.3-0.3,0.6-0.6,0.6H9.8c-0.3,0-0.6-0.3-0.6-0.6v-1.1c0-0.3,0.3-0.6,0.6-0.6h7.7c0.3,0,0.6,0.3,0.6,0.6V16.7z M18,12.6
+    c0,0.3-0.3,0.6-0.6,0.6H9.8c-0.3,0-0.6-0.3-0.6-0.6v-1.1c0-0.3,0.3-0.6,0.6-0.6h7.7c0.3,0,0.6,0.3,0.6,0.6V12.6z M18,8.4
+    C18,8.8,17.8,9,17.4,9H9.8C9.5,9,9.2,8.8,9.2,8.4V7.3c0-0.3,0.3-0.6,0.6-0.6h7.7C17.8,6.7,18,7,18,7.3V8.4z`,
+  'music-stand': `M12.1,0C2.5,0,0,2.3,0,11.9C0,21.5,2.3,24,11.9,24c9.6,0,12-2.3,12.1-11.9C24,2.5,21.7,0,12.1,0z M17.3,14.5L17.3,14.5
+    c0,0.9-1,1.7-2.3,1.9c-1.4,0.2-2.6-0.5-2.7-1.4c-0.1-0.9,0.9-1.8,2.3-1.9c0.4-0.1,0.9,0,1.2,0.1l0-4.4l-6.1,2l0,5.5l0,0
+    c-0.1,0.8-1.1,1.5-2.3,1.7c-1.4,0.2-2.6-0.5-2.7-1.4c-0.1-0.9,0.9-1.8,2.3-1.9c0.4-0.1,0.9,0,1.2,0.1l0-5.1c0-0.3,0.1-0.7,0.3-0.7
+    c1.3-0.4,7.4-2.4,8.2-2.6c0.3-0.1,0.5,0.2,0.5,0.3L17.3,14.5z`,
+}
+
+const type = {
+  services: {
+    width: 114,
+    path: `M41.1,14.4c0,1.8-1.5,3.6-4.4,3.6c-1.9,0-3.3-0.8-4-1.2l0,0c-0.2-0.2-0.4-0.5-0.3-0.8l0.5-1.1c0.1-0.1,0.2-0.3,0.4-0.3
+    c0.2-0.1,0.4,0,0.6,0.1l0,0c0.7,0.4,1.5,0.8,2.9,0.8c0.9,0,1.4-0.4,1.4-1c0-0.7-0.8-1.2-2.5-1.9c-1.7-0.8-3.3-1.8-3.3-3.9
+    c0-1.7,1.3-3.4,4.1-3.4c1.6,0,2.9,0.5,3.6,0.9c0.4,0.3,0.5,0.7,0.3,1.1L40,8.1c-0.2,0.4-0.6,0.4-1,0.3c-0.9-0.4-1.7-0.6-2.5-0.6
+    c-1,0-1.4,0.5-1.4,0.9c0,0.7,0.7,1.1,2,1.6C39.5,11.3,41.1,12.2,41.1,14.4z M53.5,10.9c0,0.2,0,0.6-0.1,0.8c0,0.4-0.4,0.6-0.7,0.6
+    h-8.1c0.1,1.5,1.5,3,3.4,3c1.4,0,2.1-0.5,2.8-1c0.1-0.1,0.3-0.2,0.5-0.2c0.1,0,0.3,0.1,0.4,0.3l0.7,1.1c0.2,0.3,0.4,0.6-0.1,1
+    C52,16.9,50.5,18,47.9,18c-3.5,0-6.1-2.7-6.1-6.4c0-3.6,2.6-6.4,6.1-6.4C51,5.3,53.5,7.7,53.5,10.9z M44.8,10.2h5.8
+    c-0.1-1.2-1.1-2.4-2.8-2.4C46.2,7.8,45,8.7,44.8,10.2z M60.8,5.3c-2,0-3.1,1.1-3.6,1.6L57,6.1c-0.1-0.3-0.4-0.5-0.7-0.5h-0.6
+    c-0.4,0-0.7,0.3-0.7,0.7V17c0,0.4,0.3,0.7,0.7,0.7h1.2c0.4,0,1,0,1-0.7V9.5C58.1,9.2,59,8,60.5,8c0.4,0,0.9,0.1,1,0.2
+    c0.2,0.1,0.3,0.1,0.5,0c0.2-0.1,0.3-0.2,0.4-0.4l0.6-1.3c0.1-0.3,0.1-0.5,0-0.6C62.8,5.5,61.7,5.3,60.8,5.3z M74.7,5.5h-1.2
+    c-0.3,0-0.7,0-0.9,0.4L69.3,13L66.3,6c-0.1-0.2-0.3-0.4-0.6-0.4H64c-0.3,0-0.5,0.1-0.6,0.3c-0.1,0.2-0.1,0.4,0,0.6l5.2,11.2
+    c0.1,0.2,0.3,0.4,0.6,0.4h0.2c0.3,0,0.5-0.1,0.6-0.4l5.2-11.2c0.1-0.2,0.1-0.4,0-0.6C75.2,5.6,74.9,5.5,74.7,5.5z M78.4,5.5H77
+    c-0.4,0-0.7,0.3-0.7,0.7V17c0,0.4,0.3,0.7,0.7,0.7h1.4c0.4,0,0.7-0.3,0.7-0.7V6.3C79.1,5.9,78.8,5.5,78.4,5.5z M77.7,0.2
+    c-1,0-1.8,0.8-1.8,1.9c0,1,0.8,1.9,1.8,1.9c1,0,1.9-0.8,1.9-1.9C79.6,1,78.8,0.2,77.7,0.2z M90.7,13.8c-0.3-0.3-0.7-0.2-1,0.1
+    c-0.1,0.1-0.2,0.2-0.3,0.3c-0.5,0.5-1.2,1.2-2.4,1.2c-1.9,0-3.4-1.6-3.4-3.7c0-2,1.5-3.6,3.5-3.6c0.9,0,1.8,0.6,2.4,1.1
+    c0.2,0.2,0.5,0.5,1,0.1l0.9-0.9c0.3-0.3,0.4-0.7,0.1-1C90.2,6,88.8,5.3,87,5.3c-3.5,0-6.3,2.9-6.3,6.4c0,3.6,2.7,6.4,6.2,6.4
+    c2,0,3.7-0.9,4.8-2.5c0.2-0.2,0.2-0.6-0.2-1L90.7,13.8z M104,10.9c0,0.2,0,0.6-0.1,0.8c0,0.4-0.4,0.6-0.7,0.6h-8.1
+    c0.1,1.5,1.5,3,3.4,3c1.4,0,2.1-0.5,2.8-1c0.1-0.1,0.3-0.2,0.5-0.2c0.1,0,0.3,0.1,0.4,0.3l0.7,1.1c0.2,0.3,0.4,0.6-0.1,1
+    c-0.4,0.4-1.9,1.5-4.5,1.5c-3.5,0-6.1-2.7-6.1-6.4c0-3.6,2.6-6.4,6.1-6.4C101.6,5.3,104,7.7,104,10.9z M95.3,10.2h5.8
+    C101,9,100,7.8,98.3,7.8C96.7,7.8,95.5,8.7,95.3,10.2z M109.5,10.3c-1.3-0.6-2-1-2-1.6c0-0.5,0.4-0.9,1.4-0.9
+    c0.8,0,1.6,0.2,2.5,0.6c0.3,0.1,0.8,0.1,1-0.3l0.4-0.8c0.2-0.4,0.1-0.8-0.3-1.1c-0.7-0.4-2-0.9-3.6-0.9c-2.8,0-4.1,1.7-4.1,3.4
+    c0,2.1,1.6,3.1,3.3,3.9c1.7,0.8,2.5,1.2,2.5,1.9c0,0.6-0.6,1-1.4,1c-1.4,0-2.2-0.5-2.9-0.8l0,0c-0.2-0.1-0.4-0.1-0.6-0.1
+    c-0.2,0-0.3,0.2-0.4,0.3l-0.5,1.1c-0.2,0.3,0,0.6,0.2,0.8l0,0c0.7,0.5,2.1,1.2,4,1.2c2.9,0,4.4-1.8,4.4-3.6
+    C113.4,12.2,111.9,11.3,109.5,10.3z`,
+  },
+  'music-stand': {
+    width: 152,
+    path: `M50.8,11.2l0,6c0,0.4-0.3,0.7-0.7,0.7l-1.4,0c-0.4,0-0.7-0.3-0.7-0.7l0-6.1c0-1.9-0.7-2.9-2.2-2.9c-1.5,0-2.3,0.9-2.7,1.2
+      c0,0,0,0.1-0.1,0.1c0.1,0.3,0.1,1,0.1,1.6l0,6.2c0,0.4-0.3,0.7-0.7,0.7l-1.5,0c-0.4,0-0.7-0.3-0.7-0.7l0-6.1c0-2-0.7-2.9-2.2-2.9
+      c-1.8,0-2.6,1.3-2.7,1.6l0,7.4c0,0.4-0.3,0.7-0.7,0.7l-1.4,0c-0.4,0-0.7-0.3-0.7-0.7l0-10.8c0-0.4,0.3-0.7,0.7-0.7l0.6,0
+      c0.3,0,0.5,0.2,0.6,0.5l0.3,0.8c0.6-0.6,1.8-1.5,3.7-1.5c1.6,0,2.7,0.6,3.6,1.8c1.2-1.2,2.6-1.8,4-1.8C50.4,5.4,50.8,8.7,50.8,11.2
+      z M63.5,6.5l0,10.8c0,0.4-0.3,0.7-0.7,0.7l-0.6,0c-0.4,0-0.6-0.3-0.7-0.6l-0.2-0.6c-0.4,0.5-1.6,1.5-3.7,1.5c-4.1,0-4.6-3-4.6-5.6
+      l0-6.2c0-0.4,0.3-0.7,0.7-0.7l1.4,0c0.4,0,0.7,0.3,0.7,0.7l0,6.3c0,1.8,0.7,2.7,2.2,2.7c1.6,0,2.6-1.3,2.7-1.8l0-7.2
+      c0-0.7,0.4-0.7,0.8-0.7l1.3,0C63.2,5.8,63.5,6.1,63.5,6.5z M73.8,14.7c0,1.8-1.5,3.6-4.4,3.6c-1.9,0-3.3-0.8-4-1.3l0,0
+      c-0.2-0.2-0.4-0.5-0.2-0.8l0.5-1.1c0.1-0.1,0.2-0.3,0.4-0.3c0.2-0.1,0.4,0,0.6,0.1l0,0c0.7,0.4,1.5,0.8,2.9,0.8
+      c0.9,0,1.4-0.4,1.4-1c0-0.7-0.8-1.2-2.5-1.9c-1.7-0.8-3.3-1.8-3.3-3.9c0-1.7,1.3-3.4,4.1-3.4c1.6,0,2.9,0.5,3.6,0.9
+      c0.4,0.3,0.5,0.7,0.3,1.1l-0.4,0.8c-0.2,0.4-0.6,0.4-1,0.3C70.9,8.2,70.1,8,69.3,8c-1,0-1.4,0.5-1.4,0.9c0,0.7,0.7,1.1,1.9,1.6
+      C72.3,11.6,73.8,12.4,73.8,14.7z M78.6,2.3c0,1-0.9,1.9-1.9,1.9c-1,0-1.8-0.8-1.8-1.9c0-1.1,0.8-1.9,1.8-1.9
+      C77.8,0.4,78.6,1.3,78.6,2.3z M78.1,6.5l0,10.8c0,0.4-0.3,0.7-0.7,0.7l-1.4,0c-0.4,0-0.7-0.3-0.7-0.7l0-10.8c0-0.4,0.3-0.7,0.7-0.7
+      l1.4,0C77.8,5.8,78.1,6.2,78.1,6.5z M90.4,14.8c0.5,0.4,0.4,0.8,0.2,1c-1.1,1.6-2.8,2.5-4.8,2.5c-3.5,0-6.2-2.8-6.2-6.4
+      c0-3.5,2.8-6.4,6.3-6.4c1.9,0,3.3,0.7,4.4,2.1c0.3,0.3,0.2,0.7-0.1,1l-0.9,0.8c-0.4,0.4-0.8,0.1-1-0.1c-0.5-0.6-1.4-1.2-2.3-1.2
+      c-1.9,0-3.5,1.6-3.5,3.6c0,2,1.5,3.7,3.4,3.7c1.3,0,1.9-0.6,2.4-1.1c0.1-0.1,0.2-0.2,0.3-0.3c0.3-0.3,0.7-0.3,1-0.1L90.4,14.8z
+       M105.6,14.8c0,1.8-1.5,3.6-4.4,3.6c-1.9,0-3.3-0.8-4-1.3l0,0C97,17,96.8,16.7,97,16.4l0.5-1.1c0.1-0.1,0.2-0.3,0.4-0.3
+      c0.2-0.1,0.4,0,0.6,0.1l0,0c0.7,0.4,1.5,0.8,2.9,0.8c0.9,0,1.4-0.4,1.4-1c0-0.7-0.8-1.2-2.5-1.9c-1.7-0.8-3.3-1.8-3.3-3.9
+      c0-1.7,1.3-3.4,4.1-3.4c1.6,0,2.9,0.5,3.6,0.9c0.4,0.3,0.5,0.7,0.3,1.1l-0.4,0.8c-0.2,0.4-0.6,0.4-1,0.3c-0.9-0.4-1.7-0.6-2.5-0.6
+      c-1,0-1.4,0.5-1.4,0.9c0,0.7,0.7,1.1,1.9,1.6C104.1,11.7,105.6,12.6,105.6,14.8z M114.8,16.7c0.2,0.5-0.2,0.8-0.3,0.9
+      c-0.5,0.3-1.9,0.9-3.4,0.9c-2.8,0-3.1-2-3.1-3.7l0-6.3l-1.2,0c-0.4,0-0.7-0.4-0.7-0.7l0-1.1c0-0.4,0.3-0.7,0.7-0.7l1.2,0l0-3.2
+      c0-0.4,0.3-0.7,0.7-0.7l1.5,0c0.4,0,0.7,0.3,0.7,0.7l0,3.2l3,0c0.4,0,0.7,0.3,0.7,0.7l0,1.1c0,0.4-0.3,0.7-0.7,0.7l-3,0l0,6.2
+      c0,1,0.4,1.1,0.8,1.1c0.8,0,1.6-0.4,1.8-0.5c0.2-0.1,0.4-0.1,0.5-0.1c0.2,0.1,0.3,0.2,0.4,0.4L114.8,16.7z M120.9,5.8
+      c-2.3,0-4.1,0.6-4.2,0.7c-0.4,0.1-0.6,0.4-0.5,0.9l0.2,1c0.1,0.4,0.4,0.7,0.8,0.6c0.6-0.2,1.9-0.6,3.3-0.5c0.6,0,1,0.1,1.3,0.4
+      c0.4,0.4,0.5,1,0.5,2c-0.4-0.1-1.3-0.3-2.3-0.3c-3,0-4.9,1.5-4.9,4c0,2.5,1.6,4.1,4,4.1c1.4,0,2.6-0.5,3.6-1.4l0.2,0.6
+      c0.1,0.3,0.3,0.5,0.6,0.5l0.9,0c0.4,0,0.7-0.3,0.7-0.7l0-6.3C125.2,8.2,124.9,5.8,120.9,5.8z M119.7,16.1c-1.1,0-1.7-0.7-1.7-1.8
+      c0-1.1,0.9-1.8,2.3-1.8c0.9,0,1.8,0.3,2,0.4l0,1.9C122,15.3,120.8,16.1,119.7,16.1z M138.4,11.6l0,6c0,0.4-0.3,0.7-0.7,0.7l-1.4,0
+      c-0.4,0-0.7-0.3-0.7-0.7l0-6.1c0-1.9-0.8-2.9-2.2-2.9c-1.7,0-2.8,1.1-3,1.6l0,7.4c0,0.5-0.3,0.7-0.8,0.7l-1.3,0
+      c-0.4,0-0.7-0.3-0.7-0.7l0-10.8c0-0.4,0.3-0.7,0.7-0.7l0.6,0c0.3,0,0.6,0.2,0.6,0.5l0.3,0.8c0.4-0.4,1.8-1.5,4-1.5
+      C136.8,5.8,138.4,7.7,138.4,11.6z M150.9,0l-1.5,0c-0.4,0-0.7,0.3-0.7,0.7l0,5.7c-0.5-0.2-1.5-0.6-2.9-0.6c-3.4,0-5.9,2.7-5.9,6.3
+      c0,3.6,2.4,6.4,5.6,6.4c2,0,3.4-1.1,3.9-1.5l0.2,0.7c0.1,0.4,0.3,0.6,0.7,0.6l0.6,0c0.4,0,0.7-0.3,0.7-0.7l0.1-16.9
+      C151.6,0.3,151.3,0,150.9,0z M145.8,15.9c-1.7,0-3.1-1.6-3.1-3.7c0-2,1.5-3.6,3.3-3.6c1.3,0,2.3,0.5,2.6,0.7l0,5
+      C148.5,14.6,147.6,15.9,145.8,15.9z`,
+  },
+}
+
+const Logo = ({ name, markOnly, ...restProps }) => {
+  if (markOnly) {
+    return (
+      <Box
+        as="svg"
+        width="24px"
+        height="24px"
+        viewBox="0 0 24 24"
+        {...restProps}
+      >
+        <path d={mark[name]} />
+      </Box>
+    )
+  } else {
+    const { width, path } = type[name]
+    return (
+      <Box
+        as="svg"
+        width={width + 'px'}
+        height="24px"
+        viewBox={`0 0 ${width} 24`}
+        {...restProps}
+      >
+        <path d={mark[name]} />
+        <path d={path} />
+      </Box>
+    )
+  }
+}
+
+export default Logo

package/src/Logo/Logo.mdx

@@ -0,0 +1,18 @@
+---
+title: Logo
+category: General
+summary: Generates an SVG for the respective app's logo which includes the mark and/or type.
+---
+
+```jsx live
+render(
+  <StackView spacing={2}>
+    <Box padding={2} backgroundColor="services">
+      <Logo name="services" fill="white" />
+    </Box>
+    <Box padding={2} backgroundColor="music-stand">
+      <Logo name="music-stand" fill="white" />
+    </Box>
+  </StackView>
+)
+```

package/src/Logo/index.js

@@ -0,0 +1,2 @@
+import Logo from './Logo'
+export default Logo

package/src/Menu/Heading.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import HeadingUppercase from '../HeadingUppercase'
+
+function Heading({ children, ...restProps }) {
+  return (
+    <HeadingUppercase padding={1} paddingBottom={0.5} {...restProps}>
+      {children}
+    </HeadingUppercase>
+  )
+}
+
+export default Heading