Migration to Provet Cloud Design SystemNew

This guide will help you understand how to transition an existing project from using the Nord Design System to using the Provet Cloud Design System instead.

Updating dependencies #

The first step towards migrating to the Provet Cloud Design System is to update package.json with the necessary dependencies. You should:

• Rename existing @nordhealth/components to @provetcloud/web-components and update the version to 1.0.0.
• Rename existing @nordhealth/css to @provetcloud/css and update the version to 1.0.0.
• If using Vue, rename existing @nordhealth/vue to @provetcloud/web-components-vue-types and update the version to 1.0.0.
• If using Themes package, rename existing @nordhealth/themes to @provetcloud/themes and update the version to 1.0.0.
• If using Design Tokens package, rename existing @nordhealth/tokens to @provetcloud/tokens and update the version to 1.0.0.

Here’s an example package.json:

{
  "dependencies": {
    "@provetcloud/web-components": "^1.0.0",
    "@provetcloud/web-components-vue-types": "^1.0.0",
    "@provetcloud/css": "^1.0.0"
  }
}

Updating references #

You will need to update the following references to the Nord packages in your project to point to the Provet Cloud packages instead. This includes updating the following:

• Update any references from @nordhealth/components to @provetcloud/web-components. For example: import type { Layout } from '@nordhealth/components' to import type { Layout } from '@provetcloud/web-components'.
• Update any references from @nordhealth/css to @provetcloud/css.
• Update any references from @nordhealth/themes to @provetcloud/themes.
• Update any references from @nordhealth/vue to @provetcloud/web-components-vue-types. For example: "types": ["@nordhealth/vue"] to "types": ["@provetcloud/web-components-vue-types"].
• Update any references from @nordhealth/tokens to @provetcloud/tokens.
• Update any CSS overrides from nord- to provet-.
• Update nord theme to provet, nord-high-contrast to provet-high-contrast, etc.
• Switch from nord- namespace to provet- namespace instead (for example in Playwright tests, page.locator('provet-top-bar')).

Renaming components #

While the Provet Cloud Design System ships with the same set of Web Components, we use a different namespace for them. Instead of a <nord-button></nord-button> we have now a <provet-button></provet-button> and so forth. You will need to use find and replace on your whole project to update the component names:

• Replace all instances of <nord- with <provet-.
• Replace all instances of </nord- with </provet-.

Removing custom themes #

Since Provet Cloud Design System ships out-of-the-box with the Provet Cloud themes, you should remove any custom theming you may have set up in your project. You may for example have the following in your project that should be removed with the migration:

:root {
  --n-color-accent: #401197;
}

Updating CDN URLs #

If you’re loading any of the below listed packages via Nord CDN, you’ll have to update the URLs to point to the Provet Cloud CDN instead:

• Web Components
• Design Tokens
• Themes
• CSS Framework

For the latest available packages, please use the following URLs instead to migrate to the Provet Cloud CDN:

Design Tokens #

<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/tokens/1.0.0/tokens.custom-properties.css" integrity="sha384-VK/JPz9bWmhfdeh0J8Zpd/cpSMbKj0SBMzr/5lONiNYFY6U7XzjjQgRYLJt4XfPd" crossorigin="anonymous" />

Web Components #

<script type="module" src="https://nordcdn.net/ds/provetcloud/web-components/1.3.2/index.js" integrity="sha384-KDN832iCw/B3PvEG7/f8pjlBYkAwdpfbhtq4NBRnYaQvIijaSrtqQ23YqIRDKhvI" crossorigin="anonymous"></script>

CSS Framework #

<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/css/1.1.0/provet.min.css" integrity="sha384-1oPScOelquAHG7S9/NvXjf0pzu2XCqVDlTcdBiODTq4frAn/By0t8LStOJuHCN1i" crossorigin="anonymous" />

Themes #

Theme: Light defaultTheme: Light high contrastTheme: Dark defaultTheme: Dark high contrast

<!-- Light default theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/themes/1.0.0/provet.css" integrity="sha384-m91LHupcnWiGya8NVLut8CbIzk4BXmIyANudHXe2506i9wlTr4ccncegBmvsAThA" crossorigin="anonymous" />

<!-- Light high contrast theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/themes/1.0.0/provet-high-contrast.css" integrity="sha384-fbLjK//LfE5FFaBHp9DvaZCNWnVTuEA57zX/IolnOWbDZuSF9PtgDTMNqKsJtvp7" crossorigin="anonymous" />

<!-- Dark default theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/themes/1.0.0/provet-dark.css" integrity="sha384-Iuru6O5PBD9zuQgQfPdDPG2xi/VOwtaFEoF8TQxXewAqJF70UeXPVaN/TjmRNABQ" crossorigin="anonymous" />

<!-- Dark high contrast theme -->
<link rel="stylesheet" href="https://nordcdn.net/ds/provetcloud/themes/1.0.0/provet-dark-high-contrast.css" integrity="sha384-QtM+aBxPxUr2tIzhJxYufPFblRmd//5ZhGVyY+PgezK9YQdjhYRg2ft7KR63x7Pc" crossorigin="anonymous" />

Updating Localization Framework Integration #

If you are using the Localization Framework Integration, you will need to update the integration by following the updated guidelines:

View Guidelines

Getting support #

Have a question about migration? Please head over to the Support page for more guidelines and ways to contact us.