@hafslundnett/hdd-style

Hafslund digital designsystem (Hdd)

'Hafslund digital designsystem' is a design system that can be used across projects while maintaining consistancy. The project follows strict naming guidlines, your can read more about them in the wiki. Every component should be able to run in an isolated environment without depending on parent classes/elements.

For every used front-end framework a separate 'components' library should be created. Listed below are the already existing libraries. If you want to add your library to this list, please create a pull request.

Framework	Version	Repo
Angular 6.x	🚧 Alpha	Github
Vue 2.x	🚧 Alpha	Github

Documentation

HDD-style is documented along with it´s corresponding components library(HAL) at:

• https://hal-components.hafslundnett.io

The showoff website include all documentation off components with related examples. The showoff website can be generated/started by running:

• yarn
• yarn start

You need to have node and yarn installed in order to start the showoff website.

Publish new version

You need access to the Hafslund Nett NPM organisation

• yarn build
• npm publish

Code of conduct

We will behave ourselves if you behave yourselves. For more details see our code of conduct.

Contributing

Please read through our contributing guidelines.

Versioning

This project will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:

<major>.<minor>.<patch>

Releasing new versions and updating CDN

Azure CDN is used to host fonts and icons from the cdn/ folder. To update the contents of

1. Check in the new files under cdn/.
2. If this will be included in a new version of the package: Update the package version in package.json and the CDN-url in variables/fontawesome/_variables.scss. The three numbers after "hdd-style-release-" should match the package version. If the package version is 1.0.2, then the url bound to $fa-font-path should be https://hafslundnett.azureedge.net/hdd-style-release-1-0-2/icons.
3. Check in and get your pull request accepted into develop.
4. Create a new release-branch and push it to GitHub. The name of the branch should be on the format release/1.0.2, given that the package version is 1.0.2. This will start the hdd-style.release build, and upload the contents of cdn/ to Azure CDN.
5. Continue to release the new version of hdd-style by packaging and uploading the new version to npm manually.
6. When everything is ok, merge the release-branch into master, and draft a new release on GitHub.

Note: This process has room for improvements.

Team

• Erik Tallang
• Jeroen Rinzema

Changelog

Update [8.0.0]

In this update the default forms-compoentent have some breaking changes that fixes some styling-bugs.

Breaking changes

Removed spacing below last element in form_fields, checkboxs and radiobuttons

What can break!

Can affect spacing between .hdd-form_field elements and other elements.

How to fix!

Add your own spacing between elements with the hdd-spacing standards!

• .hdd-form_field - standard spacing between elements is the same, but spacing will not be added to the last element.
• .hdd-form_checkbox - standard spacing between elements is the same, but spacing will not be added to the last element.
• .hdd-form_radiobutton - standard spacing between elements is the same, but spacing will not be added to the last element.
• With border-box as the new universal box-sizing all elements will inherit this style.
• If style is breaking, either the box-sizing attribute can be set to content-box or the element itself needs to change.

Min + max width and height on the checkbox-mark

What can break!

Will affect the checkboxes if custom styling has been added to make the checkboxes smaller og bigger.

How to fix!

Overwrite the min + max width and height in your own component! Check with a designer if the change is needed.

• .hdd-form_checkbox_mark has now min + max width and height set to same height so that the size will never change.

Bold title for checkboxs, radiobuttons in form_fields

• .hdd-form_field_title has now the attribute font-weight: bold.