diff --git a/aiur.config.js b/aiur.config.js index 850f379..6418120 100644 --- a/aiur.config.js +++ b/aiur.config.js @@ -63,6 +63,7 @@ module.exports = { molecules: { file: "./lib/documentation/MOLECULES.md", children: { + alert: "./lib/components/alert/alert.md", announcement: "./lib/components/announcement/announcement.md", cards: "./lib/components/cards/cards.md", breadcrumb: "./lib/components/breadcrumb/breadcrumb.md", diff --git a/lib/assets/images/icons/close.svg b/lib/assets/images/icons/close.svg new file mode 100644 index 0000000..7d6fa89 --- /dev/null +++ b/lib/assets/images/icons/close.svg @@ -0,0 +1,4 @@ + + + diff --git a/lib/assets/stylesheets/application.scss b/lib/assets/stylesheets/application.scss index ad83fd8..bc923d3 100644 --- a/lib/assets/stylesheets/application.scss +++ b/lib/assets/stylesheets/application.scss @@ -18,6 +18,7 @@ Application specific code // Components @import "../../components/achtung-box/achtung-box"; +@import "../../components/alert/alert"; @import "../../components/announcement/announcement"; @import "../../components/article-logo/article-logo"; @import "../../components/breadcrumb/breadcrumb"; diff --git a/lib/components/alert/_alert.scss b/lib/components/alert/_alert.scss new file mode 100644 index 0000000..0c5b99e --- /dev/null +++ b/lib/components/alert/_alert.scss @@ -0,0 +1,42 @@ +.alert { + @extend %heading-font-regular; + + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + + width: 100%; + padding: $spacer-xs; + + font-size: $font-size-base; + color: $brand-text; + + &--info { + background-color: $brand-primary-light; + } + + &--warn { + background-color: $brand-tertiary-light; + } + + &--error { + background-color: $brand-error; + } +} + +.alert__text { + margin-bottom: 0; +} + +.alert__btn { + @extend %base-button; + + color: inherit; + background-color: transparent; +} + +@include for-tablet-landscape-up { + .alert { + padding: $spacer-sm; + } +} diff --git a/lib/components/alert/alert.md b/lib/components/alert/alert.md new file mode 100644 index 0000000..f0bff2d --- /dev/null +++ b/lib/components/alert/alert.md @@ -0,0 +1,28 @@ +title: Alert +description: Alert + +```html +
+

Erfolg! Vielen Dank.

+ +
+ +
+

Das hat nicht geklappt! Bitte füllen Sie alle Felder aus.

+ +
+ +
+

Das hat nicht geklappt! Bitte füllen Sie alle Felder aus.

+ +
+``` diff --git a/lib/components/buttons/_buttons.scss b/lib/components/buttons/_buttons.scss index ae47c9f..badcdd7 100644 --- a/lib/components/buttons/_buttons.scss +++ b/lib/components/buttons/_buttons.scss @@ -1,3 +1,27 @@ +%base-button { + cursor: pointer; + user-select: none; + + position: relative; + + display: inline-block; + + text-decoration: none; + white-space: nowrap; + + background: none; + border: 0; + + &:focus { + outline: none; + } + + &:hover, + &:focus { + text-decoration: none; + } +} + .btn { @extend %body-font-bold; diff --git a/lib/components/icons/_icons.scss b/lib/components/icons/_icons.scss index 7c21348..30de69b 100644 --- a/lib/components/icons/_icons.scss +++ b/lib/components/icons/_icons.scss @@ -1,5 +1,65 @@ -.icon { - &.icon-add { - @include icon-before("icons/add.svg", inherit, 1.5rem); +// Icon helper +@mixin icon-before($svg-path, $color, $height: 1rem) { + &::before { + content: " "; + + display: block; + + width: $height; + height: $height; + + color: $color; + + background-color: currentcolor; + + mask-image: asset-url($svg-path); + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; } } + +.icon--add { + @include icon-before("icons/add.svg", 1.5rem); +} + +.icon--close { + @include icon-before("icons/close.svg", inherit, 1rem); +} + +//Sizes +.icon--small { + width: $spacer-sm; + height: $spacer-sm; +} + +.icon--medium { + width: $spacer-lg; + height: $spacer-lg; +} + +.icon--big { + width: $spacer-xl; + height: $spacer-xl; +} + +// Colors +.icon--brand-primary { + background: $brand-primary; +} + +.icon--brand-secondary { + background: $brand-secondary; +} + +.icon--brand-white { + background: $brand-white; +} + +.icon--brand-black { + background: $brand-black; +} + +.icon-close { + mask-image: asset-url("icons/close.svg"); +} diff --git a/lib/components/icons/icons.md b/lib/components/icons/icons.md index 6c37d2b..44f0c09 100644 --- a/lib/components/icons/icons.md +++ b/lib/components/icons/icons.md @@ -6,5 +6,7 @@ Here are the icons that we have available for use in the system _add_ ```html - + + + ``` diff --git a/lib/fundamentals/_helpers.scss b/lib/fundamentals/_helpers.scss index 5bfe09a..aea944e 100644 --- a/lib/fundamentals/_helpers.scss +++ b/lib/fundamentals/_helpers.scss @@ -1,24 +1,3 @@ -// Icon helper -@mixin icon-before($svg-path, $color, $height: 1rem) { - &::before { - content: " "; - - display: block; - - width: $height; - height: $height; - - color: $color; - - background-color: currentcolor; - - mask-image: asset-url($svg-path); - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; - } -} - // Only visible to screen reader @mixin visually-hidden() { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ @@ -29,7 +8,11 @@ width: 1px; height: 1px; + padding: 0; + + white-space: nowrap; - clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + border: 0; } diff --git a/lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md b/lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md index 6b15ea8..25923e0 100644 --- a/lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md +++ b/lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md @@ -1,6 +1,10 @@ title: Customer Proflie Edit Page description: Customer Proflie Edit Page +## Alerts + +See [All available alert styles](https://styleguide.socreatory.com/molecules/alert) + ```html