MCF UI Components

User Interface (UI) components for use in the MCF project.

WIP: we're working on open-sourcing this!

View the Storybook here: https://wog.sgts.gitlab-dedicated.site/wsg/mycareersfuture/wsg-mycareersfuture/lib-ui/

Usage

Install this package through NPM:

# for NPM
npm i @mcf/lib-ui tachyons

Call it from your code with:

import {...} from '@mcf/lib-ui';

Where ... is the component name.

You also need to load or import tachyons once somewhere in your project.

import 'tachyons/src/tachyons.css';

You eventually need to import the default style provided once somewhere in your project

import '@mcf/lib-ui/dist/main.css';

This step is optional. You can provide your own style using CSS variables. Using CSS variables make it easy to configure yourself the style of your components at the application level or at a component level.

List of CSS variables overridable (default only if you use the provided style):

• colors:
  • --primary: default to var(--purple)
  • --light-primary: default to #e3d7f4
  • --gray: default to gray
  • --white: default to white
  • --dark-primary: default to #552895
  • --secondary: default to #D6008F
  • --dark-secondary: default to #c10081
  • --danger: default to #EF4456
  • --dark-danger: default to #eb142a;
• borders:
  • --borderstyle: default to 1px solid var(--black-20)
• sizes:
  • --font-size-1: default to 3rem
  • --font-size-2: default to 2.25rem
  • --font-size-3: default to 1.5rem
  • --font-size-4: default to 1.25rem
  • --font-size-5: default to 1rem
  • --font-size-6: default to .875rem
  • --font-size-2-5: default to calc(((var(--font-size-2) + var(--font-size-3)) / 2))
  • --font-size-3-5: default to calc(((var(--font-size-4) + var(--font-size-4)) / 2))
  • --font-size-4-5: default to calc(((var(--font-size-4) + var(--font-size-5)) / 2))
  • --font-size-5-5: default to calc(((var(--font-size-5) + var(--font-size-6)) / 2))
  • --iconsize: default to 40px
  • --icongap: default to 0px
  • --radio-button-outer-circle: default to 16px
  • --radio-button-inner-circle: default to 8px

Components

• Dropdown
• Toggle
• RadioButtonGroup

Quick Links

NPM: https://www.npmjs.com/package/@mcf/lib-ui Dependency Images: https://sgts.gitlab-dedicated.com/wog/wsg/mycareersfuture/wsg-mycareersfuture/lib-ui/container_registry/3171 Application Images: https://sgts.gitlab-dedicated.com/wog/wsg/mycareersfuture/wsg-mycareersfuture/lib-ui/container_registry/3173

Contributing

Get Started

Clone this repository and run the following to get started:

yarn install
yarn start # runs a storybook server at http://localhost:9001

This repo uses node v20

Development

Component code is stored in ./src. See the ./src/Example/Text for an example.

Make sure to build before submitting a merge request:

yarn build

# or
yarn build-watch

Use yarn link to test drive your changes in lib-ui with another project. Run yarn link in this repo and follow the instructions. Likewise, run yarn unlink in this repo and follow the instructions to unlink.

Testing

To run tests:

yarn test

To run tests in development with file watching:

yarn test-watch

To run lints:

yarn lint
yarn lint-fix

Documentation

1. Add the component to the Catalog section above linking to [2].
2. Add a README.md in the component directory which describes the component behaviour and it's available props.

Pipeline

The Pipeline runs only in the master branch.

The following release tags are available for use in your commit message to denote a type of release:

• [release]: performs a release by bumping the version in ./package.json to the same as that of the latest Git tag
• [major]: performs a major version bump (X.y.z -> Y.0.0, Y = X + 1)
• [minor]: performs a major version bump (x.Y.z -> x.Z.0, Z = Y + 1)

By default, every push to master will result in a patch version bump.

When both a "[release]" and a "[major]" or "[minor]" is present in the commit message, the version is bumped first before the release happens, so the package.json will contain the version AFTER the

Merge Request

On passing of the pipeline, submit a Merge/Pull Request to the master branch and wait for the code to be reviewed and merged in.

🍻