Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(banner): Fixed height variant on banners - OEL-2164 #505

Merged
merged 5 commits into from
Feb 7, 2024
Merged

feat(banner): Fixed height variant on banners - OEL-2164 #505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7fa8fc6
OEL-2164-#default
tibi2303 Jan 12, 2023
a8c048f
Fixed height variant on banner
tibi2303 Jan 13, 2023
261ee3f
Merge branch 'development' into OEL-2164-#default#
tibi2303 Jul 26, 2023
be8efa6
Merge branch 'development' into OEL-2164-#default#
tibi2303 Feb 7, 2024
2f3bdf1
Merge branch 'development' into OEL-2164-#default#
tibi2303 Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 60 additions & 20 deletions src/compositions/bcl-banner/__snapshots__/banner.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`OE - Hero banner default renders correctly 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner full-width hero"
class="bcl-banner hero"
>
<div
class="container"
Expand Down Expand Up @@ -43,7 +43,7 @@ exports[`OE - Hero banner default renders correctly 1`] = `
exports[`OE - Hero banner default renders correctly with title 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner full-width hero"
class="bcl-banner hero"
>
<div
class="container"
Expand Down Expand Up @@ -83,7 +83,7 @@ exports[`OE - Hero banner default renders correctly with title 1`] = `
exports[`OE - Hero banner default renders correctly with title and link 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner full-width hero"
class="bcl-banner hero"
>
<div
class="container"
Expand Down Expand Up @@ -128,7 +128,7 @@ exports[`OE - Hero banner default renders correctly with title and link 1`] = `
exports[`OE - Hero banner image shade renders correctly 1`] = `
<jest>
<div
class="bg-lighter text-center bcl-banner shade hero"
class="bcl-banner shade hero"
>
<div
class="bcl-banner__image"
Expand Down Expand Up @@ -172,7 +172,7 @@ exports[`OE - Hero banner image shade renders correctly 1`] = `
exports[`OE - Hero banner image shade renders correctly with title 1`] = `
<jest>
<div
class="bg-lighter text-center bcl-banner shade hero"
class="bcl-banner shade hero"
>
<div
class="bcl-banner__image"
Expand Down Expand Up @@ -216,7 +216,7 @@ exports[`OE - Hero banner image shade renders correctly with title 1`] = `
exports[`OE - Hero banner image text-block renders correctly 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner overlay hero"
class="bcl-banner overlay hero"
>
<div
class="bcl-banner__image"
Expand Down Expand Up @@ -260,7 +260,7 @@ exports[`OE - Hero banner image text-block renders correctly 1`] = `
exports[`OE - Hero banner image text-block renders correctly with title 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner overlay hero"
class="bcl-banner overlay hero"
>
<div
class="bcl-banner__image"
Expand Down Expand Up @@ -304,7 +304,7 @@ exports[`OE - Hero banner image text-block renders correctly with title 1`] = `
exports[`OE - Hero banner primary renders correctly 1`] = `
<jest>
<div
class="bg-primary text-white text-center bcl-banner hero"
class="bcl-banner hero"
>
<div
class="container"
Expand Down Expand Up @@ -344,7 +344,7 @@ exports[`OE - Hero banner primary renders correctly 1`] = `
exports[`OE - Hero banner primary renders correctly with title 1`] = `
<jest>
<div
class="bg-primary text-white text-center bcl-banner hero"
class="bcl-banner hero"
>
<div
class="container"
Expand Down Expand Up @@ -384,7 +384,47 @@ exports[`OE - Hero banner primary renders correctly with title 1`] = `
exports[`OE - Page banner default renders correctly 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner "
class="bcl-banner"
>
<div
class="container"
>
<div
class="bcl-banner__content"
>
<div
class="display-6 mb-3 bcl-heading"
>
EU Budget for the future
</div>
<p
class="mb-4"
>
Innovation, economy, environment and geopolitics
</p>
<a
class="btn btn-primary"
href="/example.html"
>
Subscribe
<svg
class="ms-2-5 bi icon--fluid"
>
<use
xlink:href="/icons.svg#chevron-right"
/>
</svg>
</a>
</div>
</div>
</div>
</jest>
`;

exports[`OE - Page banner default renders correctly fixed height 1`] = `
<jest>
<div
class="bcl-banner fixed-height"
>
<div
class="container"
Expand Down Expand Up @@ -424,7 +464,7 @@ exports[`OE - Page banner default renders correctly 1`] = `
exports[`OE - Page banner default renders correctly full width 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner full-width"
class="bcl-banner full-width"
>
<div
class="container"
Expand Down Expand Up @@ -464,7 +504,7 @@ exports[`OE - Page banner default renders correctly full width 1`] = `
exports[`OE - Page banner default renders correctly with content classes 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner "
class="bcl-banner"
>
<div
class="container"
Expand Down Expand Up @@ -504,7 +544,7 @@ exports[`OE - Page banner default renders correctly with content classes 1`] = `
exports[`OE - Page banner default renders correctly with title 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner "
class="bcl-banner"
>
<div
class="container"
Expand Down Expand Up @@ -544,7 +584,7 @@ exports[`OE - Page banner default renders correctly with title 1`] = `
exports[`OE - Page banner default renders correctly with title and link 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner "
class="bcl-banner"
>
<div
class="container"
Expand Down Expand Up @@ -589,7 +629,7 @@ exports[`OE - Page banner default renders correctly with title and link 1`] = `
exports[`OE - Page banner image shade renders correctly 1`] = `
<jest>
<div
class="bg-lighter text-center bcl-banner shade "
class="bcl-banner shade"
>
<div
class="bcl-banner__image"
Expand Down Expand Up @@ -633,7 +673,7 @@ exports[`OE - Page banner image shade renders correctly 1`] = `
exports[`OE - Page banner image shade renders correctly with title 1`] = `
<jest>
<div
class="bg-lighter text-center bcl-banner shade "
class="bcl-banner shade"
>
<div
class="bcl-banner__image"
Expand Down Expand Up @@ -677,7 +717,7 @@ exports[`OE - Page banner image shade renders correctly with title 1`] = `
exports[`OE - Page banner image text-block renders correctly 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner overlay"
class="bcl-banner overlay"
>
<div
class="bcl-banner__image"
Expand Down Expand Up @@ -721,7 +761,7 @@ exports[`OE - Page banner image text-block renders correctly 1`] = `
exports[`OE - Page banner image text-block renders correctly with title 1`] = `
<jest>
<div
class="bg-lighter text-dark text-center bcl-banner overlay"
class="bcl-banner overlay"
>
<div
class="bcl-banner__image"
Expand Down Expand Up @@ -765,7 +805,7 @@ exports[`OE - Page banner image text-block renders correctly with title 1`] = `
exports[`OE - Page banner primary renders correctly 1`] = `
<jest>
<div
class="bg-primary text-white text-center bcl-banner "
class="bcl-banner"
>
<div
class="container"
Expand Down Expand Up @@ -805,7 +845,7 @@ exports[`OE - Page banner primary renders correctly 1`] = `
exports[`OE - Page banner primary renders correctly with title 1`] = `
<jest>
<div
class="bg-primary text-white text-center bcl-banner "
class="bcl-banner"
>
<div
class="container"
Expand Down
30 changes: 23 additions & 7 deletions src/compositions/bcl-banner/banner.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
- shade: (boolean) (default: false)
- hero: (boolean) (default: false)
- full_width: (boolean) (default: false)
- fixed_height: (boolean) (default: false)
drishu marked this conversation as resolved.
Show resolved Hide resolved
- content_classes: (string) (default: '')
- attributes (drupal attrs)
#}
Expand All @@ -25,6 +26,7 @@
{% set _shade = shade ?? false %}
{% set _hero = hero ?? false %}
{% set _full_width = full_width ?? false %}
{% set _fixed_height = fixed_height ?? false %}
{% set _content_classes = content_classes|default('') %}

{% set _content_class = 'bcl-banner__content' %}
Expand All @@ -39,13 +41,27 @@

{% set _title_attributes = _title_attributes.addClass(_title_classes) %}

{% set _classes = [
'bcl-banner',
_shade ? 'shade',
_image and not _shade ? 'overlay',
_hero ? 'hero',
_full_width ? 'full-width'
] %}
{% set _classes = ['bcl-banner'] %}

{% if _shade %}
{% set _classes = _classes|merge(['shade']) %}
{% endif %}

{% if _image and not _shade %}
{% set _classes = _classes|merge(['overlay']) %}
{% endif %}

{% if _hero %}
{% set _classes = _classes|merge(['hero']) %}
{% endif %}

{% if _full_width %}
{% set _classes = _classes|merge(['full-width']) %}
{% endif %}

{% if _fixed_height %}
{% set _classes = _classes|merge(['fixed-height']) %}
{% endif %}

{% if attributes is empty %}
{% set attributes = create_attribute() %}
Expand Down
18 changes: 17 additions & 1 deletion src/compositions/bcl-banner/banner.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const getArgs = (data) => {
centered: true,
hero: false,
full_width: false,
fixed_height: false,
};
if (data.image) {
args.image = data.image || "";
Expand Down Expand Up @@ -66,6 +67,16 @@ const getArgTypes = (data) => {
category: "Display",
},
},
fixed_height: {
name: "fixed-height",
type: "boolean",
description: "Disable aspect ratio and keep a fixed height",
table: {
type: { summary: "boolean" },
defaultValue: { summary: false },
category: "Display",
},
},
};
if (data.image) {
argTypes.image = {
Expand All @@ -83,7 +94,12 @@ const getArgTypes = (data) => {
};

const resetAttrs = (data, args) => {
data.attributes.removeClass(["text-center", "hero", "full-width"]);
data.attributes.removeClass([
"text-center",
"hero",
"full-width",
"fixed-height",
]);
if (args.centered) {
data.attributes.addClass("text-center");
}
Expand Down
Loading
Loading