#1284 - Update Image with credit and captions componentto use @container

queries
undp · Sep 26, 2023 · 26856ce · 26856ce
1 parent f8334bd
commit 26856ce
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 59 deletions.
diff --git a/docs/css/base-minimal-no-grid.min.css b/docs/css/base-minimal-no-grid.min.css
diff --git a/docs/css/base-minimal.min.css b/docs/css/base-minimal.min.css
diff --git a/docs/css/components/image-caption.min.css b/docs/css/components/image-caption.min.css
diff --git a/docs/css/templates/article-page.min.css b/docs/css/templates/article-page.min.css
diff --git a/stories/Atom/Images/ImageCaptionCredit/image-caption-credit.scss b/stories/Atom/Images/ImageCaptionCredit/image-caption-credit.scss
@@ -1,8 +1,12 @@
 @import '../../../assets/scss/variables';
 @import '../../../assets/scss/mixins';
 
+$container-size: 30em;
+
 /* image with caption start */
 figure {
+  container-type: inline-size;
+  container-name: figure;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -21,7 +25,7 @@ figure {
     margin: $spacing-05 $spacing-06 $spacing-07;
     line-height: 1.4;
 
-    @include devicebreak(medium) {
+    @container figure (width > #{$container-size}) {
       margin: $spacing-07 0 $spacing-07;
       width: 100%;
       max-width: 64rem;
@@ -36,7 +40,7 @@ figure.medium {
   margin-left: auto;
   margin-right: auto;
 
-  @include devicebreak(medium) {
+  @container figure (width > #{$container-size}) {
     margin: 0 auto;
     width: 100%;
 
@@ -56,29 +60,33 @@ figure.medium {
 }
 
 figure.portrait {
-  align-items: flex-end;
-  flex-wrap: nowrap;
-  flex-direction: column;
+  // align-items: flex-end;
+  // flex-wrap: nowrap;
+  // flex-direction: column;
   margin-left: auto;
   margin-right: auto;
 
-  @include devicebreak(medium) {
-    flex-direction: row;
-
-    img {
-      width: 100%;
-    }
+  img {
+    width: 100%;
+  }
 
+  @container figure (width > #{$container-size}) {
+    // flex-direction: row;
     >div,
     >img {
       width: 50%;
+      display: inline-block;
+    }
+    img {
+      float: left;
     }
-
     figcaption {
-      display: block;
-      margin: 0 0 0 $spacing-06;
-      padding-bottom: 0;
-      width: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      margin: 0;
+      padding: 0 0 0 $spacing-06;
+      width: calc(50% - #{$spacing-06});
       max-width: 64rem;
 
       p {
@@ -114,13 +122,12 @@ figure.portrait {
   }
 }
 
-@include devicebreak(medium) {
-  [dir='rtl'] {
-    figure.portrait {
-      figcaption {
-        margin: 0 $spacing-06 0 0;
-      }
-
+[dir='rtl'] {
+  figure.portrait {
+    @container figure (width > #{$container-size}) {
+      // figcaption {
+      //   margin: 0 $spacing-06 0 0;
+      // }
       .credits {
         border-right: 0;
         margin-right: 0;

diff --git a/stories/Atom/Images/ImageCredit/image-credit.scss b/stories/Atom/Images/ImageCredit/image-credit.scss
@@ -6,7 +6,7 @@
   line-height: 1.4;
   margin-left: auto;
 
-  @include devicebreak(medium) {
+  @container (width > 30em) {
     font-size: $font-size-16;
   }
-}
+}
diff --git a/stories/Molecules/ImageCaption/image-caption.scss b/stories/Molecules/ImageCaption/image-caption.scss
@@ -1,13 +1,15 @@
 @import '../../assets/scss/variables';
 @import '../../assets/scss/breakpoints';
 
+$container-size: 30em;
+
 /* image caption start */
 figcaption {
   color: $color-gray-600;
   border-bottom: 2px solid $color-black;
   font-size: $font-size-16;
 
-  @include devicebreak(medium) {
+  @container (width > #{$container-size}) {
     display: flex;
     justify-content: space-between;
     padding-bottom: $spacing-07;
@@ -23,7 +25,7 @@ figcaption {
     padding-top: $spacing-05;
     color: $color-black;
 
-    @include devicebreak(medium) {
+    @container (width > #{$container-size}) {
       //border-left: 1px solid $color-gray-500;
       border-top: 0;
       display: block;
@@ -37,7 +39,7 @@ figcaption {
     strong {
       margin-left: $spacing-02;
 
-      @include devicebreak(medium) {
+      @container (width > #{$container-size}) {
         margin-left: 0;
       }
     }
@@ -47,53 +49,42 @@ figcaption {
     color: $color-gray-600;
     margin-bottom: $spacing-05;
 
-    @include devicebreak(medium) {
+    @container (width > #{$container-size}) {
       border: 0;
       margin: 0;
-    }
 
-    +.credits {
-      @include devicebreak(medium) {
-        border-left: 1px solid $color-gray-500;
-        padding-left: $spacing-07;
-        margin-left: $spacing-07;
+
+      +.credits {
+          border-left: 1px solid $color-gray-500;
+          padding-left: $spacing-07;
+          margin-left: $spacing-07;
       }
     }
   }
 }
 
 [dir='rtl'] {
   figcaption {
-    p {
-      @include devicebreak(medium) {
-        padding-right: 0;
+    .credits {
+      strong {
+        margin-right: $spacing-02;
       }
-
-
     }
-
-    .credits {
-      @include devicebreak(medium) {
+    @container (width > #{$container-size}) {
+      p {
+        padding-right: 0;
+      }
+      .credits {
         border-right: 1px solid $color-gray-500;
         border-top: 0;
         display: block;
         margin-right: $spacing-07;
         padding-right: $spacing-07;
         padding-top: 0;
-      }
-    }
-
-    .credits {
-      @include devicebreak(medium) {
         border-left: none;
         margin-left: 0;
         padding-left: 0;
-      }
-
-      strong {
-        margin-right: $spacing-02;
-
-        @include devicebreak(medium) {
+        strong {
           margin-right: 0;
         }
       }
@@ -112,4 +103,4 @@ figcaption {
   }
 }
 
-/* image caption end */
+/* image caption end */
diff --git a/stories/Templates/ArticlePage/article-page.scss b/stories/Templates/ArticlePage/article-page.scss
@@ -68,6 +68,7 @@
 
   .image-caption {
     padding-top: $spacing-07;
+    container-type: inline-size;
 
     @include devicebreak(mediumonlytab) {
       .image__caption {
@@ -104,6 +105,7 @@
   }
 
   .middle-caption {
+    container-type: inline-size;
     margin-bottom: $spacing-50;
 
     @include devicebreak(medium) {