@adapt-design-system/core

adapt-design-system/core

React components that implement ADAPT Design System.

Getting Started

Using the ADAPT Design System in your project

1. Install library

yarn add @adapt-design-system/core @emotion/react

1. Use <AdaptThemeProvider /> with a theme file and set the global fonts.

import { Global, css, useTheme } from '@emotion/react';
import { AdaptThemeProvider, Button } from '@adapt-design-system/core';

const theme = useTheme();

const App = () => (
  <AdaptThemeProvider>
    <>
      <Global
        styles={css`
          body {
            font-family: ${theme.fonts.default};
            color: ${theme.colors.text};
          }
          @font-face {
            font-family: 'Graphik';
            src: url('/Graphik-Regular-Web.woff2') format('woff2');
            font-style: normal;
            font-weight: 400;
            font-display: fallback;
          }

          @font-face {
            font-family: 'Graphik';
            src: url('/Graphik-Semibold-Web.woff2') format('woff2');
            font-style: normal;
            font-weight: 600;
            font-display: fallback;
          }
        `}
      />
      <Button>Hi!</Button>
    </>
  </AdaptThemeProvider>
);

1. You're ready to go! Import components as you need them. Check out the docs

Developing

Install

1. Install dependencies (monorepo users: remember to be in the /packages/adapt-design-system-core folder).

yarn install

1. To actively develop components, you can run

yarn run build:watch

The build will re-run every time you save changes. Alternatively you can run yarn run build each time you wish to build.

Trying out changes locally

To test out your changes to the DS locally, run npm link in this repo directory to link it locally. Then, in your new consumer project (Gatsby, for example*) run yarn add @adapt-design-system/core (if it's never been installed), then run npm link @adapt-design-system/core to link it to the local version. If you're running the design system the build:watch mode, your project should reload every time you save a change to the DS.

Publish new version

To publish a new version run yarn publish-package. If you introduce a breaking change, bump the major version (2.0.3 -> 3.0.0). If you add new (non-breaking) functionality bump the minor version (2.0.3 -> 2.1.0). Otherwise bump patch when adding new icons (2.0.3 -> 2.0.4). You will be asked for a new version.

⚠️ Important!

Don't forget to upgrade the consuming packages, in this case /docs, to make use of the new version. Like so: yarn upgrade @adapt-design-system/core@^2.0.4