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
``