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.2.6

• Add Status Indicator Component

Version 1.2.5

• Add autocomplete to input field and textarea
• Add password option to input field
• Unify spacings of components notifications, icon, textarea, user-profile, alert, cookie banner, dialog, footer
• UI improvement for the sidebar component
• Add Component Loading Indicator
• Add Loading Indicator for List, Table and Button

Version 1.2.4

• Hotfix missing webcomponents

Version 1.2.3

• Change hover effects on Split Button Component
• Change subButton card layout on Split Button Component

Version 1.2.2

• Add Split Button Component

Version 1.2.1

• Fix Dropdown label not taking full width

Version 1.2.0

• Add Table Component
• Fix double delete x in Search Component

Version 1.1.14

• Remove box-shadow on hover for sencondary Icon Button

Version 1.1.13

• Fix Switch Component

Version 1.1.11

• Fix build

Version 1.1.10

• Add User Profile Component
• Bugfix remove link box on mouse use

Version 1.1.9

• Bugfix outputevent fileupload

Version 1.1.8

• Bugfix disabled link underline color
• Add Tertiary Button style

Version 1.1.7

• Bugfix Dropdown lazy loading with search criterias

Version 1.1.6

• Bugfix Textarea min height

Version 1.1.5

• Bugfix Textarea Input binding

Version 1.1.4

• Bugfix Textarea

Version 1.1.3

• Autoheight option for Textareas

Version 1.1.2

• Tooltip for Fileupload Molecule

Version 1.1.1

• Textarea Scrollbar Fix

Version 1.1

• Copy-Field Molecule ✅
• Error Page Molecule ✅
• Accordions Molecule ✅
• Icons ✅

Version 1.0.29

• Dropdown Lazy Loading

Version 1.0.28

• Textarea Height-Option added
• Dropdown Bugfixes
• Switch Secondary Design added
• Buttons Scale Option added

Version 1.0.26

• Bugfix Button

Version 1.0.25

• Bugfix Dropdown

Version 1.0.24

• Bugfixes
• Tooltip Options added ✅

Version 1.0.21

• Bugfixes

Version 1.0.20

• Bugfixes

Version 1.0.19

• Tooltip Atom ✅
• Searchfield in Dropdown Molecule ✅

Version 1.0.17

• Drag & Drop / Upload Molecule ✅

Version 1.0.16

• Darkmode Colors ✅

Version 1.0.14

• Fontsets: 2 Sets with different sizes for Webapps ✅

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",
  "node_modules/ds-living-styleguide/styles/fontset-standard.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