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

$3

-fixed user profile picture bug

$3

- New Tooltip styling
- fixed focus state on Header Element and user profile Element bug
- removed fixed position on Sidebar Element
- removed tooltip and cursor pointer on disabled Checkbox

$3

- New sorting options in dropdown
- Bugfix Limit in Multiselect search
- Added Disabled attribute to Multiselect Search Input

$3

- Moved Dropdown-link to Buttons and extended button component

- Introduced link buttons without href for clearer distinction

- Moved SocialMediaButtons from the “Buttons” category to “Links”

- Added Tooltip options: top-center and bottom-center

$3

- Fix Dropdown cross-interference

$3

- Provide loading indicators

$3

- Fix auto resize textarea height

$3

- Implementation of new component "Multi Select Search Input"

- Fix checklist icons

- Fix switch behaviour

- Fix textarea autowidth

- Improve file upload errorhandling

$3

- Change color documentation for web
- Bugfix: Language switch not working on firefox

- Add new activeLabel prop for language switch

$3

- Fix resize Textarea

$3

- Add tooltips to checkboxes

$3

- Fix label of inputfields and textareas

$3

- Fix outputevent of switch

$3

- Add new "onBlur" event for input-field, textarea and searchbar

$3

- Adjust relative spacings
- Adjust fontweights
- Fix contrast ratio of placeholder texts (input-field, textarea, searchbar)
- Fix image not shown in user profile
- Fix broken button styles in user profile
- Fix spacing for long titles in the dialog component

$3

- Change red, orange and green colors in all components

$3

- Add Status Indicator Component

$3

- 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

$3

- Hotfix missing webcomponents

$3

- Change hover effects on Split Button Component

- Change subButton card layout on Split Button Component

$3

- Add Split Button Component

$3

- Fix Dropdown label not taking full width

$3

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

$3

- Remove box-shadow on hover for sencondary Icon Button

$3

- Fix Switch Component

$3

- Fix build

$3

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

$3

- Bugfix outputevent fileupload

$3

- Bugfix disabled link underline color
- Add Tertiary Button style

$3

- Bugfix Dropdown lazy loading with search criterias

$3

- Bugfix Textarea min height

$3

- Bugfix Textarea Input binding

$3

- Bugfix Textarea

$3

- Autoheight option for Textareas

$3

- Tooltip for Fileupload Molecule

$3

- Textarea Scrollbar Fix

Version 1.1

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

$3

- Dropdown Lazy Loading

$3

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

$3

- Bugfix Button

$3

- Bugfix Dropdown

$3

- Bugfixes
- Tooltip Options added ✅

$3

- Bugfixes

$3

- Bugfixes

$3

- Tooltip Atom ✅
- Searchfield in Dropdown Molecule ✅

$3

- Drag & Drop / Upload Molecule ✅

$3

- Darkmode Colors ✅

$3

- Fontsets: 2 Sets with different sizes for Webapps ✅

$3

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

$3

- 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

``bash
npm install ds-living-styleguide
`

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

`bash
"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:

`bash
@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:

`bash
schemas: [CUSTOM_ELEMENTS_SCHEMA]
`

#### Example implementation of button as webcomponent:
`bash

Button
``