@substrate/design-system
v1.0.13
Published
Substrate design system
Downloads
9
Maintainers
Keywords
Readme
Substrate Design System
Tech stack
Building components
- 📚 Storybook for UI component development and auto-generated docs
- 💅 Tachyons for component-scoped styling
- ⚛️ React declarative component-centric UI
Maintaining the system
- 📦 NPM for packaging and distribution
- ✅ Chromatic to prevent UI bugs in components (by Storybook maintainers)
- 🚥 CircleCI Continuous integration
Install
npm install --save @substrate/design-system
Global Styles
Components within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:
Option 1: Render the GlobalStyle
component
Useful when you don't need any custom body
styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level App
component.
import { global } from '@storybook/design-system';
const { GlobalStyle } = global;
/* Render the global styles once per page */
<GlobalStyle />
Option 2: Use the bodyStyles
to apply styling
Useful when you want build upon the shared global styling.
import { createGlobalStyle } from 'styled-components';
import { global } from '@storybook/design-system';
const { bodyStyles } = global;
const CustomGlobalStyle = createGlobalStyle`
body {
${bodyStyles}
// Custom body styling for the app
}
`;
/* Render the global styles once per page */
<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 '@storybook/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 '@storybook/design-system';
const Layout = ({ children }) => (
<html>
<head>
<link href={global.fontUrl} rel="stylesheet" />
</head>
<body>{children}</body>
</html>
);
export default Layout;
Development Scripts
yarn release
Bump the version
Push a release to GitHub and npm
Push a changelog to GitHub
Notes:
- Requires authentication with
npm adduser
auto
is used to generate a changelog and push it to GitHub. In order for this to work correctly, an environment variable calledGH_TOKEN
is needed that references a GitHub personal access token with the appropriate permissions to update the repo.