slippers-ui
v2.2.0-alpha.1
Published
GitLab Marketing Design System
Downloads
8,927
Keywords
Readme
Slippers UI - GitLab's Marketing Design System
Slippers is the open-source GitLab Marketing Web Design System. It was created in the spirit of "everyone can contribute".
Resources:
- Storybook: https://gitlab-com.gitlab.io/marketing/digital-experience/slippers-ui/.
- Figma: https://www.figma.com/file/nWIOpmuMp7RZXmfTj6ujAF/Slippers_foundations.
- GitLab project: https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui.
- Further documentation: https://about.gitlab.com/handbook/marketing/digital-experience/slippers-design-system/.
Gettings started with Slippers:
Local development
Slippers uses Storybook to enable component exploration.
Yarn is the preferred package manager.
Running Storybook locally:
- Clone the Slippers project.
- Install the dependecies using the version of node specified in .npmrc -
npm install
. - Run Storybook -
yarn storybook
. - Storybook should now be running at: http://localhost:6009/.
Updating the slippers-ui NPM package
- Make changes to slippers-ui.
- If needed, create/update .stories so Storybook is upto date.
- Increment the version number in package.json.
- If needed, add component into install.js (this adds components into the build).
- Build /dist folder -
yarn build-library
. - Publish to NPM -
yarn publish
. - You can optionally publish using
sh scripts/publish.sh
. Note that you must havejq
installed. This attempts to run Step 5 and 6 and validate all of this process for you. - Merge changes into origin/main.
- Once the package has been published it's now ready to be updated in the consuming repositories (Example: Buyer Experience, be-navigation, etc.).
Importing slippers-ui into your project:
- With NPM
npm install slippers-ui
OR with YARNyarn add slippers-ui
- Slippers main entry point is /dist/slippers-core.umd.min.js, example usage. To import the styling for the above components, the compiled css file can be found at: /dist/slippers-core.css.