diff --git a/.pa11yci b/.pa11yci index 6de6dd112f..40587d5947 100644 --- a/.pa11yci +++ b/.pa11yci @@ -18,7 +18,6 @@ "http://127.0.0.1:8080/patterns/elements-toggle/index.html", "http://127.0.0.1:8080/patterns/components-accordion/index.html", "http://127.0.0.1:8080/patterns/components-breadcrumb/index.html", - "http://127.0.0.1:8080/patterns/components-cards/index.html", "http://127.0.0.1:8080/patterns/components-dialog/index.html", "http://127.0.0.1:8080/patterns/components-dropdown/index.html", "http://127.0.0.1:8080/patterns/components-form/index.html", diff --git a/source/_meta/_head.hbs b/source/_meta/_head.hbs index 4585854163..0c3faabee7 100644 --- a/source/_meta/_head.hbs +++ b/source/_meta/_head.hbs @@ -15,6 +15,7 @@ + diff --git a/source/_patterns/00-base/_init.global.scss b/source/_patterns/00-base/_init.global.scss index 2a3af7aa32..31390fd229 100644 --- a/source/_patterns/00-base/_init.global.scss +++ b/source/_patterns/00-base/_init.global.scss @@ -50,15 +50,12 @@ body { // Inline a { - color: $db-colors-secondary-enabled; + // TODO: Move to DB UI Base + color: inherit; strong { color: currentColor; } - - &:hover { - color: #5d616a; // TODO: Identify correct color variable - } } code { diff --git a/source/_patterns/02-components/cards/_card.hbs b/source/_patterns/02-components/cards/_card.hbs deleted file mode 100755 index c49c4fb0e3..0000000000 --- a/source/_patterns/02-components/cards/_card.hbs +++ /dev/null @@ -1,19 +0,0 @@ - -
  • - {{#if link }}{{/if }} -
    - {{#if_eq variant "banner" }} - - {{else}} - {{> elements-image src="../../icons/functional/images/navigation/db_ic_list_20.svg" alt="" role="presentation" }} - {{/if_eq }} -
    - -

    {{ title }}

    - {{#if text }}

    {{{ text }}}

    {{/if }} -
    -
    - {{#if link }}    {{/if }} -
    • diff --git a/source/_patterns/02-components/cards/_cards.variables.scss b/source/_patterns/02-components/cards/_cards.variables.scss deleted file mode 100644 index a6735e94eb..0000000000 --- a/source/_patterns/02-components/cards/_cards.variables.scss +++ /dev/null @@ -1 +0,0 @@ -@import "../../../css/db-ui-core.variables"; diff --git a/source/_patterns/02-components/cards/card.hbs b/source/_patterns/02-components/cards/card.hbs new file mode 100755 index 0000000000..ad2a81bc68 --- /dev/null +++ b/source/_patterns/02-components/cards/card.hbs @@ -0,0 +1,29 @@ +{{#unless list }} +
    +{{else}} + +
  • +{{/unless}} + {{#if hyperlink }}{{/if }} + {{#if figure }}
    + {{#if_eq variant "banner" }} + + {{else}} + {{> elements-image src="../../icons/functional/images/navigation/db_ic_list_20.svg" alt="" role="presentation" }} + {{/if_eq }} +
    {{/if }} + {{#if headline}} + +

    {{ headline }}

    + {{/if }} + {{#if text }}

    {{{ text }}}

    {{/if }} + {{#if figure }}
    +
    {{/if }} + {{#if hyperlink }}    {{/if }} +{{#unless list }} +
    • +{{else}} + +{{/unless }} diff --git a/source/_patterns/02-components/cards/card.scss b/source/_patterns/02-components/cards/card.scss index a1c4e462c3..dc0d106d2a 100644 --- a/source/_patterns/02-components/cards/card.scss +++ b/source/_patterns/02-components/cards/card.scss @@ -1,22 +1,49 @@ +@use "@db-ui/base/build/scss/init" as *; @use "@db-ui/base/build/scss/variables" as *; +@use "@db-ui/base/build/scss/variables.global" as *; @use "@db-ui/base/build/scss/helpers/functions" as *; -@import "cards.variables"; +@use "@db-ui/base/build/scss/color/color-variants" as *; .cmp-card { - background-color: #fff; + @extend %focus-placeholder; + @extend %color-variants; + + background-color: var( + --db-current-background-color, + $db-colors-neutral-bg-0-enabled + ); border-radius: 8px; - box-shadow: $box-shadow-01, $box-shadow-02; + box-shadow: $db-elevation-4; + padding: $db-spacing-fixed-md; & > a { text-decoration: none; } + &[data-variant="w-full"], + &[data-variant="width-full"] { + width: 100vw; + border-radius: 0; + } + + &[data-variant="ia"] { + &:hover { + cursor: pointer; + box-shadow: $db-elevation-8; + } + + &:active { + box-shadow: $db-elevation-2; + } + } + + // Cards contents are probably deprecated + // TODO: probably remove after discussions and/or move to demonstration styles for the homepage figure { margin: $db-spacing-fixed-normal-m $db-spacing-fixed-normal-m $db-spacing-fixed-normal-m $db-spacing-fixed-normal-xs; } - // Banner variant &[data-variant="banner"] { figure { @@ -49,7 +76,6 @@ } } } - // Tile variant &[data-variant="tile"] { text-align: center; diff --git a/source/_patterns/02-components/cards/cards-colors.hbs b/source/_patterns/02-components/cards/cards-colors.hbs new file mode 100644 index 0000000000..c5810628d6 --- /dev/null +++ b/source/_patterns/02-components/cards/cards-colors.hbs @@ -0,0 +1,80 @@ +

    outer container db-bg-neutral-2

    +
    + +
    + +

    card with nested cards db-bg-information

    +
    + +
    + +

    cards with data-color-variant=success-light

    + + +

    cards with data-color-variant=success-light and data-variant="ia"

    + + diff --git a/source/_patterns/02-components/cards/cards.hbs b/source/_patterns/02-components/cards/cards.hbs index 4399375d71..6d1bcc6037 100755 --- a/source/_patterns/02-components/cards/cards.hbs +++ b/source/_patterns/02-components/cards/cards.hbs @@ -1,5 +1,5 @@ diff --git a/source/_patterns/02-components/cards/cards.json b/source/_patterns/02-components/cards/cards.json deleted file mode 100755 index f2ee79eeac..0000000000 --- a/source/_patterns/02-components/cards/cards.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "cards": [ - { - "title": "Angebote 01", - "badge": "3", - "icon": "notes", - "status": "Aktiv" - }, - { - "title": "Angebote 02", - "badge": "1", - "icon": "notes", - "status": "Inaktiv" - }, - { - "title": "Angebote 03", - "badge": "8", - "icon": "notes", - "status": "Aktiv" - }, - { - "title": "Angebote 04", - "badge": "5", - "icon": "notes", - "status": "Inaktiv" - } - ] -} diff --git a/source/_patterns/02-components/cards/cards~banner.json b/source/_patterns/02-components/cards/cards~banner.json deleted file mode 100644 index 2894b7aad9..0000000000 --- a/source/_patterns/02-components/cards/cards~banner.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "variant": "banner", - "cards": [ - { - "title": "Angebote 01", - "icon": "action/db_ic_il_christmas", - "text": "Lorem ipsum dolores sint." - }, - { - "title": "Angebote 02", - "icon": "action/db_ic_il_christmas", - "text": "Lorem ipsum dolores sint." - }, - { - "title": "Angebote 03", - "icon": "action/db_ic_il_christmas", - "text": "Lorem ipsum dolores sint." - }, - { - "title": "Angebote 04", - "icon": "action/db_ic_il_christmas", - "text": "Lorem ipsum dolores sint." - } - ] -} diff --git a/source/_patterns/02-components/cards/cards~default.json b/source/_patterns/02-components/cards/cards~default.json new file mode 100644 index 0000000000..b682d31518 --- /dev/null +++ b/source/_patterns/02-components/cards/cards~default.json @@ -0,0 +1,20 @@ +{ + "cards": [ + { + "headline": "Headline 01", + "text": "Lorem ipsum dolores sint." + }, + { + "headline": "Headline 02", + "text": "Lorem ipsum dolores sint." + }, + { + "headline": "Headline 03", + "text": "Lorem ipsum dolores sint." + }, + { + "headline": "Headline 04", + "text": "Lorem ipsum dolores sint." + } + ] +} diff --git a/source/_patterns/02-components/cards/cards~interactive.json b/source/_patterns/02-components/cards/cards~interactive.json new file mode 100644 index 0000000000..ab7e53226c --- /dev/null +++ b/source/_patterns/02-components/cards/cards~interactive.json @@ -0,0 +1,25 @@ +{ + "variant": "ia", + "cards": [ + { + "headline": "Interactive 01", + "text": "Lorem ipsum dolores sint.", + "hyperlink": true + }, + { + "headline": "Interactive 02", + "text": "Lorem ipsum dolores sint.", + "hyperlink": true + }, + { + "headline": "Interactive 03", + "text": "Lorem ipsum dolores sint.", + "hyperlink": true + }, + { + "headline": "Interactive 04", + "text": "Lorem ipsum dolores sint.", + "hyperlink": true + } + ] +} diff --git a/source/_patterns/02-components/cards/card~full-width.json b/source/_patterns/02-components/cards/card~full-width.json new file mode 100644 index 0000000000..8a5477b8dc --- /dev/null +++ b/source/_patterns/02-components/cards/card~full-width.json @@ -0,0 +1,5 @@ +{ + "headline": "Test", + "text": "Test 123", + "variant": "width-full" +} diff --git a/source/_patterns/02-components/cards/enterprise/_cards.variables.scss b/source/_patterns/02-components/cards/enterprise/_cards.variables.scss deleted file mode 100644 index b06098d43a..0000000000 --- a/source/_patterns/02-components/cards/enterprise/_cards.variables.scss +++ /dev/null @@ -1 +0,0 @@ -@import "../../../../css/enterprise/db-ui-core.variables"; diff --git a/source/_patterns/02-components/cards/enterprise/card.scss b/source/_patterns/02-components/cards/enterprise/card.scss index ea4c5e4fe0..4d55b32b46 100644 --- a/source/_patterns/02-components/cards/enterprise/card.scss +++ b/source/_patterns/02-components/cards/enterprise/card.scss @@ -1,2 +1 @@ -@import "cards.variables"; @import "../card"; diff --git a/source/_patterns/02-components/cards/enterprise/cards.scss b/source/_patterns/02-components/cards/enterprise/cards.scss index 51ab840b37..057341f3b4 100644 --- a/source/_patterns/02-components/cards/enterprise/cards.scss +++ b/source/_patterns/02-components/cards/enterprise/cards.scss @@ -1,3 +1,2 @@ -@import "cards.variables"; @import "../cards"; @import "../card"; diff --git a/source/_patterns/04-pages/intro.hbs b/source/_patterns/04-pages/intro.hbs index 04dfa21ca3..2ed54a955c 100644 --- a/source/_patterns/04-pages/intro.hbs +++ b/source/_patterns/04-pages/intro.hbs @@ -28,7 +28,7 @@
    {{> elements-headline type='2' text='Core principals' }} - {{> components-cards variant="banner" }} + {{> components-cards variant="banner" figure=true }}
    diff --git a/source/_patterns/04-pages/intro.json b/source/_patterns/04-pages/intro.json index dc3d0664b7..d2abeb7fe2 100644 --- a/source/_patterns/04-pages/intro.json +++ b/source/_patterns/04-pages/intro.json @@ -46,34 +46,40 @@ ], "cards": [ { - "title": "Consistent & Compliant", + "headline": "Consistent & Compliant", "icon": "devices/db_ic_il_laptop", - "text": "DB UI Core is based on the DB UX Design System, that are the guidelines for any Personenverkehr Customer and Deutsche Bahn Enterprise website and web applications." + "text": "DB UI Core is based on the DB UX Design System, that are the guidelines for any Personenverkehr Customer and Deutsche Bahn Enterprise website and web applications.", + "figure": true }, { - "title": "Accessible", + "headline": "Accessible", "icon": "action/db_ic_il_handshake", - "text": "DB UI Core leverages semantic HTML, ARIA roles, states and properties to apply our styles wherever possible, thus enforcing correct, accessible markup. And we're quality checking this in partnership with the Team Digital Accessibility" + "text": "DB UI Core leverages semantic HTML, ARIA roles, states and properties to apply our styles wherever possible, thus enforcing correct, accessible markup. And we're quality checking this in partnership with the Team Digital Accessibility", + "figure": true }, { - "title": "Declarative", + "headline": "Declarative", "icon": "news/db_ic_il_newspaper", - "text": "DB UI Core uses declarative selectors instead of visual helpers to ensure our HTML class names and structure are human read- and understandable, lean, performant and so much easier to update." + "text": "DB UI Core uses declarative selectors instead of visual helpers to ensure our HTML class names and structure are human read- and understandable, lean, performant and so much easier to update.", + "figure": true }, { - "title": "Decoupled", + "headline": "Decoupled", "icon": "communication/db_ic_il_broken", - "text": "DB UI Core is decoupled from the JavaScript layer, to implement the patterns in any Web Development technology context; and we're providing universal Web Components and native JS framework components with DB UI Elements as well." + "text": "DB UI Core is decoupled from the JavaScript layer, to implement the patterns in any Web Development technology context; and we're providing universal Web Components and native JS framework components with DB UI Elements as well.", + "figure": true }, { - "title": "Evergreen", + "headline": "Evergreen", "icon": "feature/db_ic_il_green", - "text": "As DB UX Design System evolves, so does DB UI Core, meaning apps only need to keep their DB UI Core package updated to ensure the latest look and feel." + "text": "As DB UX Design System evolves, so does DB UI Core, meaning apps only need to keep their DB UI Core package updated to ensure the latest look and feel.", + "figure": true }, { - "title": "Community driven", + "headline": "Community driven", "icon": "action/db_ic_il_tips", - "text": "A platform providing the space and technology for a common basis of curated components; their development is mainly driven by the community, adapted out of the work done in projects and through the huge amount of feedback." + "text": "A platform providing the space and technology for a common basis of curated components; their development is mainly driven by the community, adapted out of the work done in projects and through the huge amount of feedback.", + "figure": true } ], "navItems": [ diff --git a/source/css/enterprise/db-ui-core.classes.scss b/source/css/enterprise/db-ui-core.classes.scss new file mode 100644 index 0000000000..2cdeba29d7 --- /dev/null +++ b/source/css/enterprise/db-ui-core.classes.scss @@ -0,0 +1 @@ +@import "@db-ui/base/build/scss/color-classes";