Gaia Design System

Gaia libraries are in maintenance mode, no new features added, read more in Wiki

What does this mean in practice:

• New features - No new features such as new components or significant changes to existing ones will be done to the React library as they will be delivered as Web Components.
• Fixing - bugs and other abnormal functionality Only when they are deemed critical (see below).
• Usage - guidance for components Simple guidance can be provided to teams using the components, but no complex cases or onboarding are supported.
• Helping - with a contribution of improvements/fixes to existing complex components Only when they are deemed critical (see below).
• Definition of Critical - When a feature is missing or contains bugs that break existing systems and no workaround is available, they are considered critical. This is decided on a case-by-case basis by the Core Team.

You are free to ask questions and help each other in #design-system Slack channel! Please let us know if you have any questions about this.

~ DS team

Requirements

Important note: Currently Gaia monorepo only supports node version 12.

• Yarn >= 1.0.0
• Node version v12.18.3.

Installation

Run yarn in the root of repository to install all the dependencies.

Environment variables

DS site

If you need to run DS site, copy file packages/ds-site/.env.example to packages/ds-site/.env.

Replace in it real Algolia tokens, to be able to use search feature on the website and run it. You can copy values from team mate or copy them from Netlify build settings.

Variable GATSBY_GRAPHQL_IDE=playground gives access to GraphQL playground in http://localhost:8000/___graphql. Please use this only in development environment.

Component library current version and publish date are fetched from GitHub API with Gatsby plugin. In order to make it work, GitHub token should be created and added into env variables. Select "repo" scope when creating access token.

Running web components from the monorepo root

Run script yarn build:components && yarn start:components in the root of mono repo. This will stencil webb components and run stencil in watch mode and start storybook for web components.

Running sandbox testing of Storybook bundle

Run script yarn sandbox in the root of mono repo.

Test monorepo packages from the root

You can run tests of packages from root of mono repo. You can test components or telia-react-conponent-library packages directly on their own with npm scripts:

• Tests for components package: yarn test:components
• Tests for telia-react-conponent-library package: yarn test:react-component-library
• Both package tests: yarn test. When you are pushing changes to GitHub run scripts:
• components package: yarn pre-push:components
• telia-react-conponent-library package: yarn pre-push:react-component-library
• Both packages: yarn pre-push

Build telia-react-component-library

In order to successfully build telia-react-conponent-library, we first need to build components package and after that react package. We can build components, react and telia-react-conponent-library separately by running following scripts:

• For components package: yarn build:components
• For react package: yarn build:react
• For telia-react-component-library package: yarn:build
• Build them all: yarn build:all

Structure

This monorepo holds three packages inside: components Web component package created with Stencil.js. react Autogenerated output target of telia-component-library package. Web components are transformed into React components, which can be imported. This package should not be modified by hand. telia-react-component-library Original React component library. Includes original React component and imports new web component based components from react package. In future this package will be removed when all the features are moved under components package.

Contribution

Getting started

• Fork the repository
• Clone your own fork
• Set upstream repository with git remote add upstream [email protected]:TeliaSoneraFinland/gaia-design-system.git
  • When pulling changes/rebasing from upstream, remember to use git pull --rebase upstream master
  • After this you should update your remote fork with git push --force-with-lease origin master
• Install dependencies with yarn
• Run storybook: yarn dev
• Access storybook in URL http://localhost:6007
• Run tests in terminal with yarn test

Creating a pull request

Pull request is needed to make a merge of your chnages into library. Also it's a good way to get improvement comments.

• Push your changes to your own fork
• Create descriptive pull request to the upstream repository
• Wait until code and design reviews are done and make changes if asked to

Viewing designs

You can check designs from Figma. Please contact us on #design-system channel, if something is unclear.

Artifactory

Configuration

Include .npmrc file into the root of your project. You can copy example file .npmrc.example from repository root.

File .npmrc should include:

registry= https://artifactory.verso.sonera.fi:443/api/npm/npm-registry-virtual/
always-auth = true

Gain access

Then login to the artifactory by running npm login. When the command line asks, enter your RTM credentials and suiting email. After this you'll be logged in to artifactory and you are able to install the dependencies and publish packages.

Note: Use NPM instead of Yarn to login, when installing package from artifactory. Yarn doesn't support gaining access when login. Only when publishing.

With Yarn version of 1.X.X yarn login won't work here, because it will not ask for your password and therefore not login to Artifactory.

If .npmrc is correctly set command yarn config get registry should return https://artifactory.verso.sonera.fi:443/api/npm/npm-registry-virtual/, if it is not correct, it may return "the default npm registry url".

You can also visit artifactory from website, to debug if login problems occur only in development environment.

Deploying release

Read from Deployment documentation.

Versioning

Component library uses Semantic versioning.