UI-KIT

Create new version and deploying to artifactory

• You can publish manually:
  1. After made changes in the library you need to build new version, pack and deploy it to artifactory.
  2. Install all dependencies from project hekate-artifactory.
  3. Run script from package json:
     • Update version of Ui-kit library in the package.json
     • Run npm run ui-kit:lib-build
     • After build npm run ui-kit:lib-pack
  4. After this command will be created archive with version of library ui-kit-X.XX.X.tgz. Publish to artifactory from the folder with archive:
     • Authentication for Artifactory (need once)
     • Go to the directory where the archive was generated, for example hekate-artifactory/libs/ui-kit/dest/ui-kit
     • run command npm publish ui-kit-X.XX.X.tgz
     • Also, you can check package in the artifactory-packages
• Or in automatic mode
  1. Open terminal in the hekate-artifactory folder
  2. Execute command npm run ui-kit:publish

If you want to customize variables of the theme you can do follow:

• Create custom variables: \

  $fa-text-h1-font: 600 14px 'Roboto', sans-serif;
  $fa-text-h2-font: 500 18px 'Roboto', sans-serif;
  $fa-text-h3-font: 500 18px 'Roboto', sans-serif;
  $fa-text-h4-font: 500 14px 'Roboto', sans-serif;

• Then merge existing theme with custom variables:

  $newTheme: map-merge($vqo-mb-theme, (
  #{$--vq8-text-h1-font}: #{$fa-text-h1-font},
  #{$--vq8-text-h2-font}: #{$fa-text-h2-font},
  #{$--vq8-text-h3-font}: #{$fa-text-h3-font},
  #{$--vq8-text-h4-font}: #{$fa-text-h4-font},
  ));

All icons for download for icons font are located on Figma separated page:

• https://www.figma.com/file/OR3WgYQHKmh0f2E43UL5Sr/VQ8-Platform-%2F-Atomic-Library-of-Elements?node-id=3915%3A14708&t=2Wvpmmj1r6EzRxNK-0

Add new icon:

• copy icon_name.svg to directory hekate-artifactory/libs/ui-kit/src/lib/ui/icons/svg
• run script generate-icons
  To check added icon you need run script storybook:serve and open Icons Preview page.

Generate country flag svg sprite:

• cd hekate-artifactory\builds\build-icon-flags;
• node index.js
• Then will be generated sprite-flag.svg file in the libs/ui-kit/src/assets/icons/flags

How to use @hekate/ui-kit with npm link

• cd hekate-artifactory;
• npm run ui-kit:build-watch
• cd hekate-artifactory/libs/ui-kit/dist
• Run npm link
• Then go cd hekate-aurora
• Need to check hekate-aurora/apps/aurora/project.json cli.cache.enabled should be false
• Run npm link @hekate/ui-kit
• Also, don't forget to do npm unlink @hekate/ui-kit when you're done.