Installation

Follow these instructions to install the design-system package in your app. If you want to run GDS standalone, read the Local GDS Development Guide.

Adding the dependency

To get access to the registry, please request it through the George Labs Ticket System.

Authenticate with the package registry

bashnpm login --registry https://jfrog.g-labs.io/artifactory/api/npm/web/

You will be prompted to log in via the website. Make sure you use npm login rather than yarn login - there is a difference.

Update package manager configuration

Your .yarnrc should look like this:

jsxregistry "https://jfrog.g-labs.io/artifactory/api/npm/web/"

Your .npmrc should look like this:

jsxregistry=https://jfrog.g-labs.io/artifactory/api/npm/web/
always-auth=true

Install dependencies

bashyarn add @george-labs.com/design-system
yarn add @george-labs.com/george-assets
yarn

HINT If you are not prompted to log in and the installation fails with a 401 error, remove any old tokens (e.g., in ~/.npmrc) and try again.

Peer dependencies

GDS relies on React and george-assets as peer dependencies:

Package	Version
george-assets	see package.json
react	>= 16.14.0 < 20
react-dom	>= 16.14.0 < 20

Usage in a React app

HINT Check out our sample-gds-app repository for an example React app using GDS.

GDS Styles

George Design System provides both SASS source files and compiled, minified CSS files for you to include. While the minified CSS is vendor-prefixed, the source files are not - you will need to handle vendor prefixes yourself. George Design System provides a browserlist entry in package.json that you can use with Autoprefixer.

Available files:

Source (unprefixed)	Compiled CSS (prefixed)	Comment
`sass/gds-main.scss`	`dist/gds-main.min.css`	Main Theme (`THEME.BS4`)
`sass/gds-store.scss`	`dist/gds-store.min.css`	Store Theme (`THEME.STORE`)
not available	`dist/gds-components.min.css`	For GDS React Components

You can import these into your own stylesheets or through JavaScript if you’re using Webpack to compile your project.

JavaScript:

jsimport '@george-labs.com/design-system/dist/gds-main.min.css';
import '@george-labs.com/design-system/dist/gds-store.min.css';
import '@george-labs.com/design-system/dist/gds-components.min.css';
// ...

SASS:

scss@import '~@george-labs.com/design-system/sass/gds-main';
@import '~@george-labs.com/design-system/sass/gds-store';
// ...

Both theme files are already namespaced and prefixed with .g-bootstrap.

GDS Components

Wrap your app with a ThemeProvider and a LanguageProvider.
The best place to do this is in your entry file, or wherever your React app gets mounted into the DOM.

Your entry file should look similar to this:

jsximport React from 'react';
import { LanguageProvider, ThemeProvider } from '@george-labs.com/design-system';
import { MyApp } from './app';
import '@george-labs.com/design-system/dist/gds-main.min.css'; // or gds-store.min.css
import '@george-labs.com/design-system/dist/gds-components.min.css';

ReactDOM.render(
    <OtherWrapper>
        <LanguageProvider locale="en" strings={{ common: { close: 'Close' }, ... }}>
            <ThemeProvider theme={ThemeProvider.THEME.BS4}>
                <MyApp />
            </ThemeProvider>
        </LanguageProvider>
    </OtherWrapper>,
    document.getElementById('app'),
);

ThemeProvider will set the appropriate namespace classes depending on the theme you choose:

THEME.BS4: sets g-bootstrap g-bs4 classes and requires the gds-main stylesheet
THEME.STORE: sets g-bootstrap g-store classes and requires the gds-store stylesheet

You can then use GDS Components in your project by importing them via ES6 imports.

For example:

jsximport { Button } from '@george-labs.com/design-system';

const MyButton = () => <Button>Click me!</Button>;

Font

George Design System (GDS) does not include default font definitions. While GDS uses the Inter font (sourced from the npm package inter-ui), there are no strict guidelines for integration. The method for adding the Inter font varies depending on your setup for hosting font files.

For more information and to download the Inter font, please visit here.

Usage in non-React projects

If your project does not use React, you can still use GDS styles through the compiled stylesheets in the npm package.

To enable the styles on any part of a page, add the classes g-bootstrap and g-bs4 to a high-level parent container or even the <body> element. To use the Store theme, use g-store instead of g-bs4.

html<link
  type="text/css"
  rel="stylesheet"
  href="@george-labs.com/design-system/dist/gds-main.min.css"
/>
<div class="g-bootstrap g-bs4">
  <p>GDS Main Theme</p>
</div>

html<link
  type="text/css"
  rel="stylesheet"
  href="@george-labs.com/design-system/dist/gds-store.min.css"
/>
<div class="g-bootstrap g-store">
  <p>GDS Store Theme</p>
</div>

HINT Please adjust the paths according to your project setup. This example uses direct paths to the file locations in the npm package.