Installation

Follow these instructions if you want and use the to install the package from npm. If you want to modify GDS, read the Local GDS-Development Guide.

Please be aware that the package is private, and access has to be granted on an individual basis, see Getting Started for further information.

Adding the dependency

Authenticate at our NPM packages via:

bashnpm adduser --scope=@george-labs.com

Add the components to your project by adding it as a dependency via NPM:

bashnpm add @george-labs.com/design-system

Run npm install or yarn install to install all necessary dependencies.

GDS relies on a few peer dependencies, so install those as well, in case they are not already added to your project.

Usage in a project

Font

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

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

GDS Styles

George Design System provides its SASS source files and compiled and minified CSS files for you to include. While the minified CSS is vendor-prefixed, the source files are not. You will have to deal with vendor prefixes on your own. For that, George Design System provides a browserlist entry in package.json that you can use in conjunction with Autoprefixer.

Available Files:

You can either import them into your own Stylesheets or through JavaScript if you compile your project with Webpack.

SASS:

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

JavaScript:

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

Both our provided version of Bootstrap and the theme files are already namespaced and prefixed with .g-bootstrap.

GDS Components

To be able to use some of the components, your app needs to be wrapped by a ThemeContainer.
The best place to do this is your entry file, or where your React app gets mounted into the DOM.

Additionally, a pre-compiled stylesheet is necessary for GDS Components to work.

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 'react-dates/lib/css/_datepicker.css'; // Optional if you want to use DateInput/DateRangeInput
import '@george-labs.com/design-system/dist/bootstrap.min.css';
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 appropriate namespace classes depending on the theme you set:

• THEME.BS4: will be g-bootstrap g-bs4 and needs the gds-main stylesheet to work
• THEME.STORE: will be g-bootstrap g-bs4 and needs the gds-store stylesheet to work

You can then start using GDS Components in your project by simply including them via ES6 imports.

For example:

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

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