npm package: @spdesign/dhl-design-components
Description: DHL Design Components
Latest version: 1.0.3

# DHL Design Components

> Design Component Library for digital DHL products build with [Fractal](https://fractal.build/).

## Development Process

### Setting up your development environment

You'll need a recent version of [nodejs](https://nodejs.org/en/) to work on DHL Design Components. We use the LTS node version. You can use [nvm](https://github.com/creationix/nvm) to easily install and manage different versions of node on your system.

```
node -v
# or
nvm current
``` 

#### Code editor recommendations

We recommend to use [VS Code](https://code.visualstudio.com/) as editor, with the following plugins:

##### Linting and code styling
* [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) support for `.editorconifg` file
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to lint JavaScript
* [Styelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint) to lint CSS and SASS

##### Code formmatting
[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to format our code. Activate ESLint and Stylelint integration in VS Code Settings:

```json
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true,
```

##### Template language
[Twig Language 2](https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2), because we use Twig template engine for our Fractal templates. Also activate Emmet HTML support in Twig files in VS Code Settings:
```json
"emmet.includeLanguages": {
	"twig": "html"
},
```

### Checking out repository

> **NOTE**: If you expect to commit updated or new dependencies, please ensure you are using npm 5, which will
> also update `package-lock.json` correctly when you install or upgrade packages.

Once node is installed, clone the repo and run `npm install`

```
git clone git@github.com:strichpunkt-design/dhl-design-components.git
cd dhl-design-components
npm i
```

### Running development server

```
npm run start
open http://localhost:3000
```

`npm run start` runs a [Fractal development server](https://fractal.build/guide/web/server) instance with [BrowserSync](https://www.browsersync.io/) integration and [Webpack HMR](https://webpack.js.org/concepts/hot-module-replacement/) support with [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) 🤓 This should aid you in initial development of a component. It's served on port 3000. If you are running another browser-sync instance already, check out higher ports like 3003.

### Building Components

Each component requires the following items in order to be complete:

- A **template file** which provides the component's markup using the [Twig](https://github.com/twigjs/twig.js) template engine. _Filename: component-name.twig_
- A **component class** using vanilla JS and SCSS. _Filename: component-name.{js,scss}_
- A **README** which contains developer documentation on the component, including usage. _Filename: README.md_
- Optional: A **component configuration** which provides additional data, defines variants and determines how Fractal handles the component. There are a number of [configuration options](https://fractal.build/guide/components/configuration) you can set. _Filename: component-name.config.js_

To ensure a consistent structure run `npm run generate` and enter the component name to create all component files. Enter the component name as follows:

- Use Kebab Case (example-component-name)
- Only lowercase letters [a-z] and dashes are allowed

```
npm run generate
? Pattern name: example-component-name
```

> You'll find additional information about how Fractal handles components in the [Fractal documentation](https://fractal.build/guide/components).

### Multi Brand Support

Only add styles if they are not yet defined in the base SCSS and cannot be set using a SCSS variable. Think of "extending" the base not "overriding" when you add new styles in this file.

## Submitting Pull Requests

🚧 TODO: Complete Pull Request documentation

### Commit message conventions

When commiting or submitting PRs, make sure you're following our commit message conventions (which are the same as [angular's](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits)); our commit-msg hook should automatically enforce this.

```
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
```

🚧 TODO: Add commit message examples

#### Type

Must be one of the following:

* **feat**: A new feature
* **fix**: A bug fix
* **docs**: Documentation only changes
* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
* **refactor**: A code change that neither fixes a bug nor adds a feature
* **perf**: A code change that improves performance
* **test**: Adding missing or correcting existing tests
* **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation

#### Scope

The scope could be anything specifying place of the commit change. For example `ComponentName`, `page-test`, `webpack`, `package`, `linting`, ...

You can use `*` when the change affects more than a single scope.

#### Subject

The subject contains succinct description of the change:

* use the imperative, present tense: "change" not "changed" nor "changes"
* don't capitalize first letter
* no dot (.) at the end

🚧 TODO: Recommend [commitizen](https://www.npmjs.com/package/commitizen)?

## Dependencies

### Polyfills and Ponyfills

| Polyfill | Description | Included in library |
| -------- | ----------- | ------------------- |
| [IntersectionObserver Polyfill](https://www.npmjs.com/package/intersection-observer) | Add support for the native [IntersectionObserver](http://w3c.github.io/IntersectionObserver/) API. | nope | 
| [ResizeObserver Polyfill](https://www.npmjs.com/package/resize-observer-polyfill) | Add support for the native [ResizeObserver](https://wicg.github.io/ResizeObserver/) API. Used as [Ponyfill](https://www.npmjs.com/package/resize-observer-polyfill#usage-example). | yep |
| [Smoothscroll Polyfill](https://www.npmjs.com/package/smoothscroll-polyfill) | Add support for [`scroll-behavior`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) | nope |
| [focus-visible](https://www.npmjs.com/package/focus-visible) | Add support for CSS [`:focus-visible`](https://github.com/WICG/focus-visible) | yep |