Getting started

Groove Storybook Design System (SDS) is a reusable component library that helps developers build Groove branded, consistent UIs faster. It's an SSOT (single source of truth) for all UI components used across various Groove applications.

Installing

To use SDS in your project, first install the package:


yarn add @groovehq/design-system

Previewing

To see available components, navigate through the sidebar on the left and copy the source code. For instance, to use the Heading component:

Import it into your UI:


import { Heading } from '@groovehq/design-system'

and use it like so:


const example = () => (
  <div>
    <Heading size="big">Groove Storybook Design System</Heading>
  </div>
)

Global styles

Components within the design system assume that a set of global variables and styles have been configured. Here is how you can use Emotion Globals to inject our global variables and styles into your app:


yarn add @emotion/core


import { Global, css } from '@emotion/core'
import { global } from '@groovehq/design-system'
const { bodyStyles, variables } = global

const customGlobalStyle = css`
  :root {
    ${variables}
    // Custom variables for the app
  }
  body {
    ${bodyStyles}
    // Custom body styling for the app
  }
`


/* Render the global styles once per page */
<Global styles={customGlobalStyle} />

Font loading

Rather than @import fonts in the GlobalStyle component, the design system's font URL is exported with the intention of using it in a <link> tag as the href. Different frameworks and environments handle component re-renders in their own way (a re-render would cause the font to be re-fetched), so this approach allows the design system consumers to choose the font loading method that is most appropriate for their environment.

Option 1: Build the link tag manually


import { global } from '@groovehq/design-system'

const fontLink = document.createElement('link')

fontLink.href = global.fontUrl
fontLink.rel = 'stylesheet'

document.head.appendChild(fontLink)

Option 2: Render the link tag in a component


import React from 'react'
import { global } from '@groovehq/design-system'

const Layout = ({ children }) => (
  <html>
    <head>
      <link href={global.fontUrl} rel="stylesheet" />
    </head>

    <body>{children}</body>
  </html>
)

export default Layout