altinn / designsystem

Altinn designsystem

Altinn Design System

⚠️⚠️⚠️ DEPRECATED ⚠️⚠️⚠️
The design system v2 (npm) supersedes this project. Consider moving your project to rely on the newer design system instead of this one.

---

This design system is based on Pattern Lab code and atomic design principles. The repo contains the source code and configuration for building and running the design system locally and for creating distribution files.

You can always test the live version of the latest build, or download the altinn-designsystem npm package.

Dependencies

Make sure that Node.js (version 14 or newer) is installed. The package manager npm will be included.

Setup

git clone https://github.com/Altinn/DesignSystem.git

Navigate to the root of the code and run:

npm install

Run

The design system is divided into three projects: Altinn.no (Infoportal and Portal), Altinn Digital and common.

To run the design system for altinn.no

npm run start:altinn

To run the design system for Altinn Digital

npm run start:altinndigital

To run the design system for components that are common to all projects

npm run start:common

The command will build and run the design system locally on http://127.0.0.1:3000 and automatically rebuild if the source code is changed.

Distribution

The /dist folder contains css, javascript, fonts and images for distribution via the npm package.

To update the /dist folder

npm run dist

GitHub pages

To update the live version of the design system

npm run update:gh-pages

then commit and push the changes to git.

Source code

The source code is structured as follows:

###/_patternlab PatternLab specific files: patterns, meta, data and config.

Each project has its own folder. Common components should only be changed in the /common folder, where they will automatically be copied to all other projects. Changes to common components anywhere else will be automatically overwritten.

###/css Changes to css should be made in the scss files under /css/scss. The css files will be automatically updated.

###/fonts

###/images

###/js JavaScript files are divided into /production and /prototype and bundled automatically. To add new files to a bundle update the config under /scripts/build-config.json

designsystem's Issues

Service search result when creating/editing a local role is not closable with keyboard navigation

Service search result when creating/editing a local role is not closable with keyboard navigation.
'ESC' does nothing and 'Tab' continues navigation through the list of added services but does not close the search result (see added gif).

This is relevant for both:

• sider-portal-andre-med-rettigheter-egendefinert-rolle
• sider-portal-andre-med-rettigheter-egendefinert-rolle-rediger

Service search result under "Gi og fjerne rettigheter" goes out of bounds/screen at lower resolution

Service search result under "Gi og fjerne rettigheter" goes out of bounds/screen at lower resolution:

Caused by CSS (_lists.scss):
@media (min-width: 768px)
.a-autocomplete-container {
width: 200%;
}

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency concurrently to v8
• Update dependency postcss-cli to v11
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency postcss to v8.4.31 [SECURITY]
• Update dependency shx to v0.3.4
• Update npm non-major dependencies (@pattern-lab/cli, @pattern-lab/engine-handlebars, @pattern-lab/starterkit-handlebars-vanilla, autoprefixer, bootstrap, bootstrap-datepicker, clean-css-cli, clipboard, concurrently, jquery-ui, jquery-validation, postcss-cli, sass, yargs)
• Update dependency @pattern-lab/cli to v6
• Update dependency @pattern-lab/core to v6
• Update dependency @pattern-lab/engine-handlebars to v6
• Update dependency @pattern-lab/uikit-workshop to v6
• Update dependency anchor-js to v5
• Update dependency bootstrap to v5
• Update dependency jquery-validation-unobtrusive to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @pattern-lab/cli ^5.15.0
• @pattern-lab/core ^5.15.0
• @pattern-lab/engine-handlebars ^5.14.3
• @pattern-lab/starterkit-handlebars-vanilla ^1.4.2
• @pattern-lab/uikit-workshop ^5.15.0
• anchor-js ^4.3.1
• autoprefixer ^10.3.7
• bootstrap ^4.6.0
• bootstrap-datepicker ^1.9.0
• chokidar-cli ^3.0.0
• clean-css-cli ^5.4.1
• clipboard ^2.0.8
• concat-with-sourcemaps ^1.1.0
• concurrently ^6.3.0
• decompress-cli ^2.0.0
• jquery-ui ^1.12.1
• jquery-validation ^1.19.3
• jquery-validation-unobtrusive ^3.2.12
• mark.js ^8.11.1
• postcss ^8.3.9
• postcss-cli ^9.0.1
• sass ^1.42.1
• shx ^0.3.3
• slick-carousel ^1.8.1
• truncate.js ^1.1.2
• yargs ^17.2.1

---

• Check this box to trigger a request for Renovate to run again on this repository

Remove unused Bootstrap code from files in dist.

Make the distributed css-file smaller.

Add design documentation back into patternlab

Add design documentation (http://altinn-dev.dev.bouvet.no/profil) back to patternlab (see v3 of PL).

Find a good way to switch between different themes that also switch between profile-documentation. For example, if BR, Altinn and Altinnett is going to use the same design system.

Lenke mangler?

På denne siden: https://altinn.github.io/designsystem-styleguide/komigang/prosjektet.html under punkt 4: skal det være en lenke på "Kom i gang som designer" til denne https://altinn.github.io/designsystem-styleguide/komigang/designere.html?

Gratulerer med ny drakt, Altinn!

Host FortAwesome ourselves

(do not refer to https://use.fortawesome.com/ed31cded.js)

Make plugin for sorting components based on state.

Errors after running `npm run dist`

Using this package for another of Brønnøysunds projects. When installing the npm package, and including style.dist.portal.min.css file to our React app, the CSS file references files that are not in the dist-folder (and one ../../images/brick_pattern.svg file which is supposed to be ../images/brick_pattern.svg).

But it references a Content-folder which is not in the dist-folder. Not in the npm package, or when I have cloned this repo and run npm run dist.

Create drag-and-drop prototype-tool that is synced with patternlab components. Plugin?

If plugin is not feasible, maybe we can try one of this tools:

http://pinegrow.com/
http://macaw.co/
https://webflow.com/

Automatically push to gh-pages

When we push to dev, there should be an automatic push of the content in public-folder to gh-pages (but keep the folders: "dist", "prototype-starteogdrive" and "versjon-altinndagen".

Translate the designsystem to english (need approval)

Open template/page in new window/tab is not working anymore, part of url is missing.

When you right click a page from the dropdown menu and choose "Open in new tab/window" the url is missing last level:
http://altinn.github.io/DesignSystem/patterns/04-sider-30-artikkel/04-sider-30-artikkel.html

The correct url should be:
http://altinn.github.io/DesignSystem/patterns/04-sider-30-artikkel-80-artikkel-v-nyhet/04-sider-30-artikkel-80-artikkel-v-nyhet.html

Make it possible to run "npm start" from a chosen project

The different projects are sharing atoms, molecules and organisms, but have their own templates and pages. To make the build go faster, it should be possible to start the build in gulp from a specific project, so it builds all atoms, molecules and organisms, but only the templates and pages from portal / infoportal / altinnett / brreg.