slippers-ui

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 have jq 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 YARN yarn 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.