diff --git a/src/patterns/03-layouts/_index.scss b/src/patterns/03-layouts/_index.scss index 8c1849081e35c8c3b26eb409f06b7f26683a1528..70e40923db7169d2116dc73a3c7c4786ea61bc1d 100644 --- a/src/patterns/03-layouts/_index.scss +++ b/src/patterns/03-layouts/_index.scss @@ -1,3 +1,4 @@ +@forward 'block/block'; @forward 'carousel/carousel'; @forward 'content/content'; @forward 'footer/footer'; diff --git a/src/patterns/03-layouts/block/_block.scss b/src/patterns/03-layouts/block/_block.scss new file mode 100644 index 0000000000000000000000000000000000000000..5f4fef40a9be8cfa396527f0b9a1b417704c9480 --- /dev/null +++ b/src/patterns/03-layouts/block/_block.scss @@ -0,0 +1,13 @@ +@use '../../01-core' as *; + +// @file +// Styles for Block. + +.block { + margin-bottom: var(--grid-gap); +} + +// disable margin for layout builder blocks +.block--provider-layout-builder { + margin-bottom: 0; +} diff --git a/src/patterns/03-layouts/block/block.twig b/src/patterns/03-layouts/block/block.twig new file mode 100644 index 0000000000000000000000000000000000000000..a3cde7c82c23be6db9819fa541e252ea9d9f6e92 --- /dev/null +++ b/src/patterns/03-layouts/block/block.twig @@ -0,0 +1,49 @@ +{% set classes = [ + 'block', + modifier ? modifier: '', + attributes ? attributes.class +]|join(' ')|trim %} + +{% set title_classes = [ + 'block__title', + title_attributes ? title_attributes.class +]|join(' ')|trim %} + +{% set content_classes = [ + 'block__content', + content_attributes ? content_attributes.class +]|join(' ')|trim %} + +{% if block_wrapper %} +<div class="{{ classes }}" {{ attributes ? attributes|without('class','id') }}> +{% endif %} + + {% if constrain %} + <div class="{{ constrain }}"> + {% endif %} + + {{ title_prefix }} + {% if label %} + <{{ label_element ?: 'h2' }} class="{{ title_classes }}" {{ title_attributes ? title_attributes|without('class') }}>{{ label }}</{{ label_element ?: 'h2' }}> + {% endif %} + {{ title_suffix }} + + {% if content_wrapper %} + <div class="{{ content_classes }}" {{ content_attributes ? content_attributes|without('class') }}> + {% endif %} + + {% block content %} + {{ content }} + {% endblock %} + + {% if content_wrapper %} + </div> + {% endif %} + + {% if constrain %} + </div> +{% endif %} + +{% if block_wrapper %} +</div> +{% endif %} diff --git a/src/patterns/03-layouts/block/block.yml b/src/patterns/03-layouts/block/block.yml new file mode 100644 index 0000000000000000000000000000000000000000..a7e3dabeb4f9047968501a80581fab69a4c08980 --- /dev/null +++ b/src/patterns/03-layouts/block/block.yml @@ -0,0 +1,10 @@ +--- +block_wrapper: true +constrain: '' +title_prefix: '' +label_element: '' +label: 'Block title' +title_suffix: '' +content_wrapper: true +content: |- + <p>Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p> diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss index e238ef83a430007d6010745226d3420d2c019991..6f6b8f6199e5019f3d97a668e746ef45cd9da7a9 100644 --- a/src/patterns/04-components/_index.scss +++ b/src/patterns/04-components/_index.scss @@ -39,6 +39,7 @@ @forward 'mobile-menu/mobile-menu'; @forward 'mobile-menu-button/mobile-menu-button'; @forward 'multi-type-list/multi-type-list'; +@forward 'page-title/page-title'; @forward 'remote-video/remote-video'; @forward 'search/search'; @forward 'search/search--wcms-headerbar/search--wcms-headerbar'; diff --git a/src/patterns/04-components/image-gallery/_image-gallery.scss b/src/patterns/04-components/image-gallery/_image-gallery.scss index ac2dabae5b6eb745c4762798d05103b6f4c8de04..490d42d45136dd22e49645c5884f814caa1d374d 100644 --- a/src/patterns/04-components/image-gallery/_image-gallery.scss +++ b/src/patterns/04-components/image-gallery/_image-gallery.scss @@ -164,7 +164,7 @@ $size-xlarge: 7; position: relative; width: 100%; a { - background: var(--uw-black); + background: transparent; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); display: block; height: 100%; diff --git a/src/patterns/04-components/image/_image.twig b/src/patterns/04-components/image/_image.twig index 942db39a454708b59070612ebf41f1c2128707ab..e2410e60db41aff44111138180fcc7a7112d8c43 100644 --- a/src/patterns/04-components/image/_image.twig +++ b/src/patterns/04-components/image/_image.twig @@ -8,7 +8,7 @@ <div class="uw-image__wrapper {{ image_class }}"> {% if image.type == 'full' %} - {{ image.image.img_element['#uri'] }} + {% include '@components/responsive-image/responsive-image.twig' with { 'sources': image.image.sources, 'img_element': image.image.img_element['#uri'], diff --git a/src/patterns/04-components/message/message.twig b/src/patterns/04-components/message/message.twig index 8ef5c2c3c93b02e58feda346751964a55fc7b717..af79b3e766077e2c6051bd506afd3734497d8312 100644 --- a/src/patterns/04-components/message/message.twig +++ b/src/patterns/04-components/message/message.twig @@ -16,7 +16,7 @@ attributes ? additional_attributes.class ]|join(' ')|trim %} -<div {% if type == 'error' %} role="alert" {% else %} role="contentinfo" {% endif %} {% if heading %}aria-label="{{ heading }}"{% endif %} class="{{messages_classes}}" {{ attributes ? attributes|without('class') }}>> +<div {% if type == 'error' %} role="alert" {% else %} role="contentinfo" {% endif %} {% if heading %}aria-label="{{ heading }}"{% endif %} class="{{messages_classes}}" {{ attributes ? attributes|without('class') }}> {% if messages|length > 1 %} <h2 class="visually-hidden">{{ heading }}</h2> <ul class="message__list">