From 30f250212e28ebfe7c067cb6ec6f20e4e89ffccf Mon Sep 17 00:00:00 2001 From: Lukas Zimmer Date: Wed, 6 Mar 2024 14:38:43 +0100 Subject: [PATCH] MiniTeaser Component --- gfi-ihk-2024/stories/_global/styles/grid.scss | 4 +- gfi-ihk-2024/stories/_global/styles/main.scss | 1 + .../mini-teaser/MiniTeaser.stories.js | 6 +- .../mini-teaser/MiniTeaserComponent.js | 19 ++- .../components/mini-teaser/miniteaser.scss | 155 +++++++++--------- .../marketingheader/MarketingHeaderData.js | 9 +- 6 files changed, 96 insertions(+), 98 deletions(-) diff --git a/gfi-ihk-2024/stories/_global/styles/grid.scss b/gfi-ihk-2024/stories/_global/styles/grid.scss index fa70b7b..422f64e 100644 --- a/gfi-ihk-2024/stories/_global/styles/grid.scss +++ b/gfi-ihk-2024/stories/_global/styles/grid.scss @@ -23,9 +23,9 @@ max-width: 100%; margin: 0 auto; - &.medium { + /*&.medium { --container-width: 1100px; - } + }*/ &.small { --container-width: 1000px; diff --git a/gfi-ihk-2024/stories/_global/styles/main.scss b/gfi-ihk-2024/stories/_global/styles/main.scss index 1be3c7b..d4cf8d7 100644 --- a/gfi-ihk-2024/stories/_global/styles/main.scss +++ b/gfi-ihk-2024/stories/_global/styles/main.scss @@ -9,6 +9,7 @@ --theme-color-primary-dimmed-03: #CCD7E6; --theme-color-primary-dimmed-04: #E3EBF5; + --theme-color-secondary: #56BD66; --theme-color-secondary-intensed: #2E8533; --theme-color-secondary-dimmed: #E4F1E4; diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js index 30048ad..9b1dc6c 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js +++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js @@ -4,14 +4,14 @@ export default { title: 'Components/Mini Teaser', parameters: { backgrounds: { - default: 'lightblue', + default: 'white', }, }, argTypes: { type: { name: 'Typ', control: {type: 'select'}, - options: ['standard', 'infobanner'], + options: ['standard', 'infoteaser'], defaultValue: 'standard', }, title: { @@ -41,4 +41,4 @@ export const StandardMiniTeaser = MiniTeaser.bind({}); StandardMiniTeaser.args = {}; export const infobanner = MiniTeaser.bind({}); -infobanner.args = {type:'infobanner'}; +infobanner.args = {type:'infoteaser'}; diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js index 1a6f3c9..f037ccc 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js +++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js @@ -3,19 +3,24 @@ import {createElement} from "../../_global/scripts/helpers"; import { createButton } from '../../atoms/button/ButtonComponent'; export const createMiniTeaser = ({ type = 'standard', - title = 'Hallo Welt', + category = 'IHK Mitgliedschaft', + title = 'Werden Sie Teil unseres Netzwerks!', link = '#', - icon = 'Eule Doktorhut', - buttonlabel = 'mehr erfahren', + icon = 'Roboter', + buttonlabel = 'IHK-Newsletter sichern', }) => { - const tile = createElement('div', ['tile', 'topic-teaser', 'mini-teaser', type === 'infobanner' ? 'infob' :'standard', type], null); + const tile = createElement('div', ['tile', 'mini-teaser', type], null); tile.href = link; - createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, tile); + const textBox = createElement('div', ['text-box'], null, tile); + if (type === 'standard') { + createElement('h5', ['category'], category, textBox); + }else{ + createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox); + } createElement('h4', ['title'], title, textBox); - if (type === 'infobanner') { + if (type === 'infoteaser') { textBox.appendChild(createButton({color: 'white', label: buttonlabel, iconPosition: 'icon-right', icon: null})) } - return tile; } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss index a5b604a..55694d2 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss +++ b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss @@ -1,113 +1,108 @@ @import '../../_global/styles/mixins'; @import '../../_global/styles/vars'; -.topic-teaser, .topics .tile { - --topic-tile-padding: 24px; +.mini-teaser { position: relative; - display: flex; - flex-direction: column; background-color: white; overflow: hidden; width: 100%; - //max-width: 420px; - border-radius: var(--border-radius-lg); - padding: var(--topic-tile-padding); + max-width: 420px; + border-radius: 4px; + padding: 16px 12px; transition: 0.25s ease; line-height: 1.2; text-align: center; text-decoration: none; - - @media(max-width: 999px) { - --topic-tile-padding: 14px; - } - - @media(max-width: 767px) { - font-size: 16px; - min-height: 84px; - border-radius: 8px; - } - - .icon-box { - font-family: 'Pictograms', sans-serif; - font-size: 72px; - line-height: 1; - color: var(--theme-color-secondary); - margin-top: 6px; - - @media(max-width: 567px) { - font-size: 50px; - margin-top: 0; - } + background-color: var(--theme-grey-light); + .title{ + font-size: 22px; } -} - -.col { - .topic-teaser, .topics .tile { - max-width: none; - } -} - -a.topic-teaser, .topics:not([data-type="list"]) a.tile { - @include focus-visible(); - - &:before { + &.standard::before { content: ""; position: absolute; display: block; - bottom: 0; + top: 0; left: 0; right: 0; height: var(--border-width); background-color: var(--theme-color-secondary); transition: 0.2s ease; } - - &:hover:before { + &.standard:hover::before { height: var(--border-width-hover); } - - .title { - text-decoration: underline; - margin: 12px 0; - - @media(max-width: 999px) { - margin: 8px 0; + h4{ + font-size: 22px; + } + &.infoteaser{ + background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%); + &:after{ + content:""; + position:absolute; + left:0; + right:0; + top:0; + bottom:0; + z-index:-1; + background: linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%); } - @media(max-width: 567px) { - margin: 4px 0; + .title, .category, .btn{ + color:white; + } + .title{ + margin-top: 0; + padding-left: 54px; + min-height: 48px; + text-align: left; + line-height: 24px; + margin-bottom: 19px; + } + .btn{ + background-color: transparent; + border: 1px solid white; + margin-left: 54px; + display: inline-block; + padding:8px 10px; + line-height: 22px; + border-radius:16px; + --button-padding: 8px 10px; + min-height: 0; + font-size: 22px; + } + .icon-box{ + margin-bottom: 19px; + margin-top: 0; + padding-top: 0; + position: absolute; + top: 16px; + left: 12px; + } + .text-box{ + padding: 0; + display: flex; + flex-wrap: wrap; } } - .text-box { - display: flex; - align-items: center; - justify-content: center; - flex-grow: 1; - } -} - -div.topic-teaser, .topics[data-type="list"] .tile { - padding: 0 var(--topic-tile-padding) 0.5em; - .icon-box { - background-color: var(--theme-color-primary); - color: var(--theme-color-background); - margin: 0 calc(var(--topic-tile-padding) * -1); - padding: 10px 0; - font-size: 60px; - - @media(max-width: 767px) { - font-size: 46px; - } + font-family: 'Pictograms', sans-serif; + line-height: 1; + color: white; + font-size:48px } - - .text-box { - display: block; + .category{ text-align: left; + padding:0; + margin:0; + margin-bottom:8px; } - - .title { - text-decoration: none; - margin: 0.8em 0; + .title{ + text-align: left; + padding:0; + margin:0; } } + + + + diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js index 58d8bc2..2ff9399 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js @@ -29,23 +29,20 @@ export const teaserData = [ { category: 'Wachstum durch Innovation', title: 'Jetzt Teil der Digitalisierungswelle werden.', - desc: 'Neugierig auf Musterstadt 2024? Digitalisierung verändert unsere Stadt. Klicken Sie, um zu erfahren, wie Sie Teil dieser Entwicklung werden können!', link: '#', - icon: 'Person', + icon: 'Virus', }, { category: 'IHK Mitgliedschaft', title: 'Exklusive Einblicke und Branchen-Trends:', - desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', link: '#', - icon: 'Person', + icon: 'Roboter', }, { category: 'IHK Mitgliedschaft', title: 'Exklusive Einblicke und Branchen-Trends:', - desc: 'Entfesseln Sie das volle Potenzial der generativen KI und beherrschen Sie die Kunst des Prompt-Engineerings!', link: '#', - icon: 'Person', + icon: 'Stadt', } ]