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(card-refactoring): Redone usage of card and layouts of content-banner and listings - OEL-1689 #386

Merged
merged 15 commits into from
Jun 30, 2022
Merged

feat(card-refactoring): Redone usage of card and layouts of content-banner and listings - OEL-1689 #386

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1db987d
OEL-1689-#default
tibi2303 Jun 22, 2022
078a38d
WIP card refactoring
tibi2303 Jun 22, 2022
fdb89b5
WIP card grid
tibi2303 Jun 23, 2022
e4110bc
Done card layout
tibi2303 Jun 23, 2022
cf50558
Removed comments
tibi2303 Jun 23, 2022
d87ff90
Merge branch 'development' into OEL-1689-#default#
planctus Jun 24, 2022
2135270
Merge branch 'development' into OEL-1689-#default#
tibi2303 Jun 27, 2022
61fe7b8
Feedback
tibi2303 Jun 27, 2022
304ccd1
Revert layout
tibi2303 Jun 28, 2022
4f5aa45
Chromatic build
tibi2303 Jun 28, 2022
118f095
Merge branch 'development' into OEL-1689-#default#
tibi2303 Jun 29, 2022
f5a26eb
Designer feedback
tibi2303 Jun 29, 2022
b6226dc
Chromatic build
tibi2303 Jun 29, 2022
674169b
Changed control
tibi2303 Jun 29, 2022
070ba27
Merge branch 'development' into OEL-1689-#default#
planctus Jun 30, 2022
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
6 changes: 3 additions & 3 deletions src/components/bcl-card/__snapshots__/card.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,10 +174,10 @@ exports[`OE - Card renders horizontal correctly 1`] = `
class="w-50 card"
>
<div
class="row g-0"
class="row"
>
<div
class="col-4"
class="bcl-card-start-col"
>
<img
alt="alt img"
Expand All @@ -186,7 +186,7 @@ exports[`OE - Card renders horizontal correctly 1`] = `
/>
</div>
<div
class="col-8"
class="col"
>
<div
class="card-body"
Expand Down
10 changes: 6 additions & 4 deletions src/components/bcl-card/card.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,10 @@
- horizontal (boolean) (default: false)
- horizontal_grid (object) (default: {})
format: {
left_col_classes (default: 'col-4')
right_col_classes (default: 'col-8')
left_col_classes (default: 'bcl-card-start-col')
right_col_classes (default: 'col')
gutter (default: '')
gutter (default: '') - options: ['small', 'large']
}
- variant (string) (default: '')
- border_variant (string) (default: '')
Expand Down Expand Up @@ -63,8 +64,9 @@
{% set _variant = variant|default('') %}
{% set _horizontal = horizontal|default(false) %}
{% set _horizontal_grid = horizontal_grid|default({
left_col_classes: 'col-4',
right_col_classes: 'col-8'
left_col_classes: 'bcl-card-start-col',
right_col_classes: 'col',
left_col_size: '',
}) %}
{% set _border_variant = border_variant|default('') %}
{% set _text_color = text_color|default('') %}
Expand Down
12 changes: 6 additions & 6 deletions src/compositions/bcl-content-banner/__snapshots__/content-banner.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`OE - Content banner renders correctly 1`] = `
class="row"
>
<div
class="col-8 col-md-4 col-lg-3 offset-2 offset-md-0"
class="bcl-card-start-col bcl-size-large"
>
<img
alt="alt img"
Expand All @@ -24,7 +24,7 @@ exports[`OE - Content banner renders correctly 1`] = `
/>
</div>
<div
class="col-md-8 col-lg-9 col-xxl-8"
class="col-12 col-md-7 col-lg-8 col-xl-9 col-xxl-8"
>
<div
class="card-body pt-4 pt-md-0 px-0 px-md-3 pb-0"
Expand Down Expand Up @@ -118,7 +118,7 @@ exports[`OE - Content banner renders correctly with a date block 1`] = `
class="row"
>
<div
class="col-8 col-md-3 col-lg-2 offset-4 offset-md-0"
class="bcl-card-start-col"
>
<time
class="bcl-date-block bg-date rounded mw-date text-center d-flex flex-column ratio ratio-1x1"
Expand All @@ -145,7 +145,7 @@ exports[`OE - Content banner renders correctly with a date block 1`] = `
</time>
</div>
<div
class="col-md-9 col-lg-10 col-xxl-8"
class="col-12 col-md col-xxl-9"
>
<div
class="card-body pt-4 pt-md-0 px-0 px-md-3 pb-0"
Expand Down Expand Up @@ -239,7 +239,7 @@ exports[`OE - Content banner with links renders correctly 1`] = `
class="row"
>
<div
class="col-8 col-md-4 col-lg-3 offset-2 offset-md-0"
class="bcl-card-start-col bcl-size-large"
>
<img
alt="alt img"
Expand All @@ -248,7 +248,7 @@ exports[`OE - Content banner with links renders correctly 1`] = `
/>
</div>
<div
class="col-md-8 col-lg-9 col-xxl-8"
class="col-12 col-md-7 col-lg-8 col-xl-9 col-xxl-8"
>
<div
class="card-body pt-4 pt-md-0 px-0 px-md-3 pb-0"
Expand Down
13 changes: 6 additions & 7 deletions src/compositions/bcl-content-banner/content-banner.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,20 +63,19 @@
{% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}

{% if _image is not empty %}
{% set _left_col_classes = 'col-8 col-md-4 col-lg-3 offset-2 offset-md-0' %}
{% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}
{% set _left_col_classes = 'bcl-card-start-col' %}
{% set _body_classes = 'pt-4 pt-md-0 px-0 px-md-3 pb-0' %}
{% if _image_size == 'lg' %}
{% set _left_col_classes = 'col-md-4' %}
{% set _right_col_classes = 'col-md-8' %}
{% set _left_col_classes = _left_col_classes ~ ' bcl-size-large' %}
{% set _right_col_classes = 'col-12 col-md-7 col-lg-8 col-xl-9 col-xxl-8' %}
{% endif %}
{% if _image_size == 'sm' %}
{% set _left_col_classes = 'col-6 col-md-4 col-lg-2 offset-3 offset-md-0' %}
{% set _left_col_classes = _left_col_classes ~ ' bcl-size-small' %}
{% endif %}
{% endif %}
{% if _date is not empty %}
{% set _left_col_classes = 'col-8 col-md-3 col-lg-2 offset-4 offset-md-0' %}
{% set _right_col_classes = 'col-md-9 col-lg-10 col-xxl-8' %}
{% set _left_col_classes = 'bcl-card-start-col' %}
{% set _right_col_classes = 'col-12 col-md col-xxl-9' %}
{% endif %}

{% set _horizontal_classes = {
Expand Down
1 change: 0 additions & 1 deletion src/compositions/bcl-content-banner/data/data--page-title.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,4 @@ module.exports = {
path: "https://picsum.photos/255/255?random=6",
alt: "alt img",
},
image_size: "sm",
};
1 change: 1 addition & 0 deletions src/compositions/bcl-content-banner/data/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ module.exports = {
path: "https://picsum.photos/255/255?random=6",
alt: "alt img",
},
image_size: "lg",
action_bar: `<div class="d-flex justify-content-end mt-2 align-items-center">
<button class="w-auto me-3 btn btn-outline-primary btn-md" type="button">Print<svg class="ms-2-5 bi icon--fluid"><use xlink:href="/icons.svg#printer-fill"></use></svg></button>
<button class="w-auto btn btn-outline-primary btn-md" type="button">Export<svg class="ms-2-5 bi icon--fluid"><use xlink:href="/icons.svg#file-arrow-down-fill"></use></svg></button>
Expand Down
28 changes: 14 additions & 14 deletions src/compositions/bcl-event/__snapshots__/event.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -943,7 +943,7 @@ exports[`OE - event listing renders correctly 1`] = `
class="row"
>
<div
class="col-md-3 col-lg-2 rounded mw-col-date mb-3"
class="bcl-card-start-col bcl-size-small mb-3 mb-lg-0"
>
<time
class="bcl-date-block bg-date rounded mw-date text-center d-flex flex-column ratio ratio-1x1"
Expand All @@ -970,7 +970,7 @@ exports[`OE - event listing renders correctly 1`] = `
</time>
</div>
<div
class="col-md-9 col-lg-10"
class="col-12 col-md"
>
<div
class="card-body p-0 pb-md-0 pb-3"
Expand Down Expand Up @@ -1036,7 +1036,7 @@ exports[`OE - event listing renders correctly 1`] = `
class="row"
>
<div
class="col-md-3 col-lg-2 rounded mw-col-date mb-3"
class="bcl-card-start-col bcl-size-small mb-3 mb-lg-0"
>
<time
class="bcl-date-block bg-date rounded mw-date text-center d-flex flex-column ratio ratio-1x1"
Expand All @@ -1062,7 +1062,7 @@ exports[`OE - event listing renders correctly 1`] = `
</time>
</div>
<div
class="col-md-9 col-lg-10"
class="col-12 col-md"
>
<div
class="card-body p-0 pb-md-0 pb-3"
Expand Down Expand Up @@ -1133,7 +1133,7 @@ exports[`OE - event listing renders correctly 1`] = `
class="row"
>
<div
class="col-md-3 col-lg-2 rounded mw-col-date mb-3"
class="bcl-card-start-col bcl-size-small mb-3 mb-lg-0"
>
<time
class="bcl-date-block bg-date rounded mw-date text-center d-flex flex-column ratio ratio-1x1"
Expand All @@ -1159,7 +1159,7 @@ exports[`OE - event listing renders correctly 1`] = `
</time>
</div>
<div
class="col-md-9 col-lg-10"
class="col-12 col-md"
>
<div
class="card-body p-0 pb-md-0 pb-3"
Expand Down Expand Up @@ -1225,7 +1225,7 @@ exports[`OE - event listing renders correctly 1`] = `
class="row"
>
<div
class="col-md-3 col-lg-2 rounded mw-col-date mb-3"
class="bcl-card-start-col bcl-size-small mb-3 mb-lg-0"
>
<time
class="bcl-date-block bg-date rounded mw-date text-center d-flex flex-column ratio ratio-1x1"
Expand All @@ -1251,7 +1251,7 @@ exports[`OE - event listing renders correctly 1`] = `
</time>
</div>
<div
class="col-md-9 col-lg-10"
class="col-12 col-md"
>
<div
class="card-body p-0 pb-md-0 pb-3"
Expand Down Expand Up @@ -1322,7 +1322,7 @@ exports[`OE - event listing renders correctly 1`] = `
class="row"
>
<div
class="col-md-3 col-lg-2 rounded mw-col-date mb-3"
class="bcl-card-start-col bcl-size-small mb-3 mb-lg-0"
>
<time
class="bcl-date-block bg-date rounded mw-date text-center d-flex flex-column ratio ratio-1x1"
Expand All @@ -1348,7 +1348,7 @@ exports[`OE - event listing renders correctly 1`] = `
</time>
</div>
<div
class="col-md-9 col-lg-10"
class="col-12 col-md"
>
<div
class="card-body p-0 pb-md-0 pb-3"
Expand Down Expand Up @@ -1419,7 +1419,7 @@ exports[`OE - event listing renders correctly 1`] = `
class="row"
>
<div
class="col-md-3 col-lg-2 rounded mw-col-date mb-3"
class="bcl-card-start-col bcl-size-small mb-3 mb-lg-0"
>
<time
class="bcl-date-block bg-date rounded mw-date text-center d-flex flex-column ratio ratio-1x1"
Expand All @@ -1445,7 +1445,7 @@ exports[`OE - event listing renders correctly 1`] = `
</time>
</div>
<div
class="col-md-9 col-lg-10"
class="col-12 col-md"
>
<div
class="card-body p-0 pb-md-0 pb-3"
Expand Down Expand Up @@ -2463,7 +2463,7 @@ exports[`OE - event page renders correctly 1`] = `
class="row"
>
<div
class="col-8 col-md-4 col-lg-3 offset-2 offset-md-0"
class="bcl-card-start-col bcl-size-large"
>
<img
alt="alt img"
Expand All @@ -2472,7 +2472,7 @@ exports[`OE - event page renders correctly 1`] = `
/>
</div>
<div
class="col-md-8 col-lg-9 col-xxl-8"
class="col-12 col-md-7 col-lg-8 col-xl-9 col-xxl-8"
>
<div
class="card-body pt-4 pt-md-0 px-0 px-md-3 pb-0"
Expand Down
1 change: 1 addition & 0 deletions src/compositions/bcl-event/data/data--page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ module.exports = {
path: "https://picsum.photos/255/255?random=6",
alt: "alt img",
},
image_size: "lg",
links: [
{
label: "Register",
Expand Down
Loading