feat(card-refactoring): Redone usage of card and layouts of content-b…

…anner and listings - OEL-1689 (#386)
openeuropa · Jun 30, 2022 · 2feb14e · 2feb14e · github-actions · Jun 30, 2022
1 parent cf5fc5f
commit 2feb14e
Show file tree

Hide file tree

Showing 30 changed files with 451 additions and 423 deletions.
diff --git a/src/components/bcl-card/__snapshots__/card.test.js.snap b/src/components/bcl-card/__snapshots__/card.test.js.snap
@@ -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"
@@ -186,7 +186,7 @@ exports[`OE - Card renders horizontal correctly 1`] = `
         />
       </div>
       <div
-        class="col-8"
+        class="col"
       >
         <div
           class="card-body"

diff --git a/src/components/bcl-card/card.html.twig b/src/components/bcl-card/card.html.twig
@@ -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: '')
@@ -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('') %}

diff --git a/src/compositions/bcl-content-banner/__snapshots__/content-banner.test.js.snap b/src/compositions/bcl-content-banner/__snapshots__/content-banner.test.js.snap
@@ -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"
@@ -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"
@@ -121,7 +121,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"
@@ -148,7 +148,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"
@@ -245,7 +245,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"
@@ -254,7 +254,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"

diff --git a/src/compositions/bcl-content-banner/content-banner.html.twig b/src/compositions/bcl-content-banner/content-banner.html.twig
@@ -11,7 +11,7 @@
     - image (object)
     - image_size: (string)
     - date: (object)
-      options: ['sm', 'md', 'lg']
+      options: ['sm', 'md', 'lg', 'xl']
     - content: (string)
     - badges: (array of objects of type badge)
     - links: (array of objects of type link)
@@ -63,20 +63,23 @@
 {% 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 %}
+  {% if _image_size == 'xl' %}
+    {% set _left_col_classes = _left_col_classes ~ ' bcl-size-extra-large' %}
+    {% set _right_col_classes = 'col-12 col-lg-7 col-xl-8' %}
   {% 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 = {

diff --git a/src/compositions/bcl-content-banner/content-banner.story.js b/src/compositions/bcl-content-banner/content-banner.story.js
@@ -71,7 +71,7 @@ const getArgTypes = () => ({
   image_size: {
     name: "image size",
     type: { name: "select" },
-    options: ["sm", "md", "lg"],
+    options: ["md", "lg", "xl"],
     description: "Size of the image",
     table: {
       type: { summary: "string" },

diff --git a/src/compositions/bcl-content-banner/data/data--page-title.js b/src/compositions/bcl-content-banner/data/data--page-title.js
@@ -6,5 +6,4 @@ module.exports = {
     path: "https://picsum.photos/255/255?random=6",
     alt: "alt img",
   },
-  image_size: "sm",
 };
diff --git a/src/compositions/bcl-content-banner/data/data.js b/src/compositions/bcl-content-banner/data/data.js
@@ -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>

diff --git a/src/compositions/bcl-content-banner/test-content-banner.story.js b/src/compositions/bcl-content-banner/test-content-banner.story.js
@@ -18,10 +18,10 @@ export const LargeImage = () =>
 
 LargeImage.storyName = "Large image";
 
-export const SmallImage = () =>
-  contentBanner(correctPaths({ ...demoData, image_size: "sm" }));
+export const ExtraLargeImage = () =>
+  contentBanner(correctPaths({ ...demoData, image_size: "xl" }));
 
-SmallImage.storyName = "Small image";
+ExtraLargeImage.storyName = "Extra large image";
 
 export const WithDate = () =>
   contentBanner(correctPaths({ ...demoData, image: {}, date: dataDate }));

diff --git a/src/compositions/bcl-event/__snapshots__/event.test.js.snap b/src/compositions/bcl-event/__snapshots__/event.test.js.snap
@@ -949,7 +949,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"
@@ -976,7 +976,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"
@@ -1045,7 +1045,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"
@@ -1071,7 +1071,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"
@@ -1144,7 +1144,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"
@@ -1170,7 +1170,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"
@@ -1239,7 +1239,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"
@@ -1265,7 +1265,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"
@@ -1340,7 +1340,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"
@@ -1366,7 +1366,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"
@@ -1444,7 +1444,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"
@@ -1470,7 +1470,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"
@@ -2499,7 +2499,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"
@@ -2508,7 +2508,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"

diff --git a/src/compositions/bcl-event/data/data--page.js b/src/compositions/bcl-event/data/data--page.js
@@ -26,6 +26,7 @@ module.exports = {
       path: "https://picsum.photos/255/255?random=6",
       alt: "alt img",
     },
+    image_size: "lg",
     links: [
       {
         label: "Register",