Merge pull request #2520 from boltdesignsystem/feature/DS-767-Remove-…

…usage-of-image-component-from-card DS-767 Remove usage of image component from card
boltdesignsystem · Aug 23, 2022 · b86f5c2 · b86f5c2
2 parents 2220752 + 9e9619d
commit b86f5c2
Show file tree

Hide file tree

Showing 40 changed files with 636 additions and 378 deletions.
diff --git a/...rc/pages/pattern-lab/_patterns/10-visual-styles/20-information-density/_info-density.twig b/...rc/pages/pattern-lab/_patterns/10-visual-styles/20-information-density/_info-density.twig
@@ -132,14 +132,21 @@
       } only %}
     {% endset %}
     {% set card %}
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            alt: '/alt text',
+            src: '/images/placeholders/landscape-16x9-mountains.jpg',
+            loading: 'lazy',
+
+          },
+        } only %}
+      {% endset %}
       {% include "@bolt-components-card-replacement/card-replacement.twig" with {
         border_radius: "large",
         height: "auto",
         media: {
-          image: {
-            src: "/images/content/promos/promo-16x9-forrester.jpg",
-            alt: "Image alt.",
-          },
+          image: image,
         },
         body: {
           eyebrow: "Whitepaper",
@@ -260,14 +267,21 @@
   } only %}
 
   {% set content %}
+    {% set image %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          alt: 'alt text',
+          src: '/images/placeholders/landscape-16x9-mountains.jpg',
+          loading: 'lazy',
+
+        },
+      } only %}
+    {% endset %}
     {% set card_1 %}
       {% include "@bolt-components-card-replacement/card-replacement.twig" with {
         border_radius: "large",
         media: {
-          image: {
-            src: "/images/placeholders/landscape-16x9-mountains.jpg",
-            alt: "Image alt.",
-          },
+          image: image,
         },
         body: {
           eyebrow: "Lorem Ipsum",
@@ -287,10 +301,7 @@
       {% include "@bolt-components-card-replacement/card-replacement.twig" with {
         border_radius: "large",
         media: {
-          image: {
-            src: "/images/placeholders/landscape-16x9-mountains.jpg",
-            alt: "Image alt.",
-          },
+          image: image,
         },
         body: {
           eyebrow: "In Pellentesque",
@@ -309,10 +320,7 @@
       {% include "@bolt-components-card-replacement/card-replacement.twig" with {
         border_radius: "large",
         media: {
-          image: {
-            src: "/images/placeholders/landscape-16x9-mountains.jpg",
-            alt: "Image alt.",
-          },
+          image: image,
         },
         body: {
           eyebrow: "Proin Quis Tortor",

diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/band/55-band-collection.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/band/55-band-collection.twig
@@ -1,12 +1,18 @@
 {% set content %}
+  {% set image %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        alt: 'alt text',
+        src: '/images/placeholders/landscape-16x9-mountains.jpg',
+        loading: 'lazy',
+
+      },
+    } only %}
+  {% endset %}
   {% set card_1 %}
     {% include '@bolt-components-card-replacement/card-replacement.twig' with {
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image description',
-          lazyload: false,
-        },
+        image: image,
       },
       body: {
         headline: 'Collection 1',
@@ -22,11 +28,7 @@
   {% set card_2 %}
     {% include '@bolt-components-card-replacement/card-replacement.twig' with {
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image description',
-          lazyload: false,
-        },
+        image: image,
       },
       body: {
         headline: 'Collection 2',
@@ -42,11 +44,7 @@
   {% set card_3 %}
     {% include '@bolt-components-card-replacement/card-replacement.twig' with {
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image description',
-          lazyload: false,
-        },
+        image: image,
       },
       body: {
         headline: 'Collection 3',

diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/00-card-replacement-docs.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/00-card-replacement-docs.twig
@@ -1,12 +1,19 @@
 {% set usage %}
 {% verbatim %}
 // Standard card-replacement
-{% include '@bolt-components-card-replacement/card-replacement.twig' with {
-  media: {
-    image: {
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'alt text',
       src: '/images/placeholders/landscape-16x9-mountains.jpg',
-      alt: 'Image alt.',
+      loading: 'lazy',
+
     },
+  } only %}
+{% endset %}
+{% include '@bolt-components-card-replacement/card-replacement.twig' with {
+  media: {
+    image: image,
   },
   body: {
     eyebrow: 'This is an eyebrow',

diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/05-card.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/05-card.twig
@@ -1,9 +1,14 @@
-{% include '@bolt-components-card-replacement/card-replacement.twig' with {
-  media: {
-    image: {
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
       src: '/images/placeholders/landscape-16x9-mountains.jpg',
-      alt: 'Image alt.',
     },
+  } only %}
+{% endset %}
+{% include '@bolt-components-card-replacement/card-replacement.twig' with {
+  media: {
+    image: image,
   },
   body: {
     eyebrow: 'This is an eyebrow',

diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/06-card-horizontal.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/06-card-horizontal.twig
@@ -13,24 +13,59 @@
 }{% endverbatim %}
 {% endset %}
 
+{% set image_element_usage %}{% verbatim %}
+  {% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    background: true,
+    attributes: {
+      alt: 'Image alt text',
+      src: 'path/image.jpg',
+    },
+  } only %}
+{% endset %}
+{% include '@bolt-components-card-replacement/card-replacement.twig' with {
+  horizontal: true,
+  height: 'auto',
+  media: {
+    image: image,
+  },
+  ...
+} only %}
+{% endverbatim %}
+{% endset %}
+
 {% set customBodyDemo %}{% verbatim %}body: {
   content: customContentWithGrid,
 }{% endverbatim %}
 {% endset %}
 
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    background: true,
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
+
 {% set card %}
   <bolt-text headline>
     Default horizontal card
   </bolt-text>
+  <bolt-text>
+    When creating a horizontal card by setting the <code>horizontal</code> prop to <code>true</code> remember to set <code>height</code> prop to <code>auto</code>. The image you pass for card media should also have its <code>background</code> prop set to <code>true</code> in order to allow the image to be cropped and display properly.
+  </bolt-text>
+  {% include '@bolt-components-code-snippet/code-snippet.twig' with {
+    content: image_element_usage,
+    lang: 'twig',
+    mode: 'dark',
+  } only %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     horizontal: true,
     height: 'auto',
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-        placeholder_color: '#afcde6',
-      },
+      image: image
     },
     body: {
       eyebrow: 'This is an eyebrow',
@@ -78,11 +113,7 @@
           horizontal: true,
           height: 'auto',
           media: {
-            image: {
-              src: '/images/placeholders/landscape-16x9-mountains.jpg',
-              alt: 'Image alt.',
-              placeholder_color: '#afcde6',
-            },
+            image: image,
             attributes: {
               style: 'min-width:' ~ width,
             }
@@ -196,4 +227,4 @@
       } only %}
     </bolt-grid-item>
   {% endfor %}
-</bolt-grid>>
+</bolt-grid>
diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/card/10-card-button-variations.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/card/10-card-button-variations.twig
@@ -1,10 +1,16 @@
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
+
 {% set card_1 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       eyebrow: 'This is an eyebrow',
@@ -23,10 +29,7 @@
 {% set card_2 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       eyebrow: 'This is an eyebrow',
@@ -46,10 +49,7 @@
 {% set card_3 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       eyebrow: 'This is an eyebrow',
@@ -69,10 +69,7 @@
 {% set card_4 %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       eyebrow: 'This is an eyebrow',

diff --git a/.../pages/pattern-lab/_patterns/40-components/card/15-card-replacement-with-two-buttons.twig b/.../pages/pattern-lab/_patterns/40-components/card/15-card-replacement-with-two-buttons.twig
@@ -1,11 +1,16 @@
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
 
 {% set card %}
   {% include '@bolt-components-card-replacement/card-replacement.twig' with {
     media: {
-      image: {
-        src: '/images/placeholders/landscape-16x9-mountains.jpg',
-        alt: 'Image alt.',
-      },
+      image: image,
     },
     body: {
       eyebrow: 'This is an eyebrow',

diff --git a/...pages/pattern-lab/_patterns/40-components/card/25-card-replacement-height-variations.twig b/...pages/pattern-lab/_patterns/40-components/card/25-card-replacement-height-variations.twig
@@ -1,5 +1,12 @@
 {% set schema = bolt.data.components['@bolt-components-card-replacement'].schema %}
-
+{% set image %}
+  {% include '@bolt-elements-image/image.twig' with {
+    attributes: {
+      alt: 'Image alt text',
+      src: '/images/placeholders/landscape-16x9-mountains.jpg',
+    },
+  } only %}
+{% endset %}
 <bolt-grid gutter="medium" row-gutter="medium">
   {% for height in schema.properties.height.enum %}
     {% if height == 'full' %}
@@ -11,10 +18,7 @@
       {% include '@bolt-components-card-replacement/card-replacement.twig' with {
         height: height,
         media: {
-          image: {
-            src: '/images/placeholders/landscape-16x9-mountains.jpg',
-            alt: 'Image alt.',
-          },
+          image: image,
         },
         body: {
           headline: 'This card has ' ~ height ~ ' height. ' ~ more_text,
@@ -41,10 +45,7 @@
     {% include '@bolt-components-card-replacement/card-replacement.twig' with {
       height: 'full',
       media: {
-        image: {
-          src: '/images/placeholders/landscape-16x9-mountains.jpg',
-          alt: 'Image alt.',
-        },
+        image: image,
       },
       body: {
         headline: 'This card also has full height.',