@ultimaker/ultimaker.com-designsystem v3.6.0
Ultimaker.com Designsystem
Prerequisites
- Git client of your choice
- NodeJS (Installation through brew(macos)/chocolatey(windows) recommended)
Install
- Clone project from https://github.com/Ultimaker/Ultimaker.com-designsystem
- Run npm ito install NPM dependencies
- Test project with npm run unit
NPM Commands
- storybook: Storybook development environment
- testor- unit: Execute all tests in browserstack (first create test/karma.conf.json)
- unit:chrome: Execute all unit tests in headless chrome
- unit:debug: Execute all test continuously, attach your own browser
- build: Build amd module
- build:dev: Builds an amd module for local testing
- lint: Lints all javascript
- build-storybook: Generate static storybook environment
Hygen Timesavers
We’ve added hygen, the scalable code generator that saves you time, to the stack so that you can quickly generate a new component using our component standard, which is reflected in the component structure outputted by the command.
Below is an example of issuing the command to create an atom component called my-component.
npx hygen modules component --name my-component --type atomoptions - type
- atom
- molecule
- organism
Prettier
To add and run prettier against a component use the following command adjusting the component directory path as necessary
npx prettier --write --insert-pragma --require-pragma=false src/js/components/molecules/cards/card-article/**/*.{ts,scss,html}Git Hooks
git hook management has been setup using using husky. current hooks:
- pre-push
SVG Icons
SVG icons reside individually in the designsystem in the /src/assets/icons directory. Webpack combines them into one sprite file, which is placed in the dist/static/icons folder. The UX Harmonization team is working on a new icon set, but for now, this is our icon set. Also, once we have one repo that serves as our frontend application another way to serve the SVG icon set can be investigated, but for now, the following strategy is used:
frontend
Updating frontend will need to happen manually. The SVG sprite in the designsystem dist/static/icons folder should be placed in the src/index.template.html file in the frontend project.
legacy
Updating legacy will need to happen manually. The SVG sprite in the designsystem dist/static/icons folder should be placed in the src/SiteBundle/Resources/views/layout.html.twig and src/SiteBundle/Resources/views/popup_layout.html.twig files in the legacy project.
storybook
Updating storybook need to happen manually. The SVG sprite in the designsystem dist/static/icons folder should be placed in the .storybook/preview-body.html file in the designsystem project.
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago