ds-living-styleguide v1.0.13

Living Styleguide

This library provides components, colors and fonts according to the doubleslash style. The components are created by using storybook, angular and bootstrap.

A detailed documentation can be found here: https://doubleslash.style

Milestones

Version 1.0.13

• Inputfield - Max, Min & Step & Required Inputs ✅

Version 1.0.11

• Event Binding: changed names to avoid conflicts

Version 1.9

Atoms

• Input fields with max, min and step

Molecules

• Implementation of multiselect & resettable Dropdowns

Version 1.7

• Release of new clickcolor ($ds-clickable: #00759e) to ensure a11y
• New Category: Styles ✅

Styles

• Color Palette update ✅
• Elevations ✅
• doubleSlash Icon Collection
• Typography & List

Version 1.0

• Migration to WebComponets

Atoms

• Buttons
• Checkboxes and Parent Checkbox, Radio Button
• Images
• Input Fields & Textareas
• Jumpmarks & Scrollbars
• Linkbox & Links, Infobox

Molecules

• Dropdown
• Switch

Organisms

• Alert, - Dialog
• Cookie Banner
• Footer

Styles

• Color Palette
• doubleSlash Icon Collection
• Typography & Lists

Web-Components

Utilize web components, including buttons, checkboxes, and many other elements, in your web applications.

Installation

`npm install ds-living-styleguide`

Import web-component.js and styles.scss in angular.json:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "node_modules/ds-living-styleguide/assets",
    "output": "assets"
  }
],
"styles": [
  "node_modules/ds-living-styleguide/styles/styles.scss",
  "src/styles.scss"
],
"scripts": [
  "node_modules/ds-living-styleguide/lib/web-components.js"
]

To use fonts, import them from node_modules into your styles.scss:

`@font-face {
  font-family: 'Inter';
  src:
    url ('../node_modules/ds-living-styleguide/assets/fonts/Inter-Regular.ttf') format('truetype'),
    url('../node_modules/ds-living-styleguide/assets/fonts/Inter-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src:
    url ('../node_modules/ds-living-styleguide/assets/fonts/Inter-SemiBold.ttf') format('truetype'),
    url('../node_modules/ds-living-styleguide/assets/fonts/Inter-SemiBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}`

To use webcomponents import:

`schemas: [CUSTOM_ELEMENTS_SCHEMA]`

Example implementation of button as webcomponent:

<web-ds-button (buttonClicked)="yourMethod()" type="primary">Button