feat(image): v2 updates

docs/dotcom-v2-migration.md

@@ -33,6 +33,8 @@ For Carbon v11 migration guidance, see their
 | content-group-simple      | This component is deprecated in v2 in favor for content-group, image, & content-item components |
 | cta-block                 | This component is deprecated in v2 in favor for content-section/block & content-item components |
 | cta-section               | This component is deprecated in v2 in favor for content-section/block & content-item components |
+| image                     | View changes [here](#image)            |
+| image-with-caption        | Replaced by `image`                    |
 | link-list-section         | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components |
 | logo-grid                 | This component is deprecated in v2 in favor for content-section/block & image-group components |
 | pictogram-item            | This component is deprecated in v2 in favor for content-item (pictogram variation) componet |
@@ -41,4 +43,8 @@ For Carbon v11 migration guidance, see their
 
 ### BackToTop
 
-- 
+- 
+
+### Image
+
+- New `lightbox-contrast` property

packages/styles/scss/components/callout-with-media/_callout-with-media.scss

@@ -15,7 +15,6 @@
 @use '../../internal/content-block';
 @use '../../internal/content-item/content-item';
 @use '../image';
-@use '../image-with-caption';
 @use '../content-block-simple/content-block-simple';
 
 @mixin callout-with-media {

packages/styles/scss/components/card-in-card/_card-in-card.scss

@@ -96,7 +96,7 @@
     }
 
     ::slotted(svg[slot='icon']) {
-      @extend .#{$prefix}--image__icon;
+      @extend :host(#{$dds-prefix}-image::slotted(svg[slot='icon']));
 
       @include breakpoint(md) {
         right: calc(75% - #{$spacing-07});

packages/styles/scss/components/content-block-media/_content-block-media.scss

@@ -15,7 +15,6 @@
 @use '../card';
 @use '../content-group-simple/index';
 @use '../image';
-@use '../image-with-caption';
 @use '../feature-card';
 
 @mixin themed-items {

packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss

@@ -12,7 +12,7 @@
 @use '../../internal/content-block';
 @use '../../internal/content-group';
 @use '../../internal/content-item/content-item';
-@use '../image-with-caption';
+@use '../image';
 
 @mixin content-block-segmented {
   :host(#{$dds-prefix}-content-block-segmented),

packages/styles/scss/components/image/_image.scss

@@ -10,10 +10,38 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/colors' as *;
+@use '../lightbox-media-viewer/lightbox-media-viewer';
 
 @mixin image {
-  .#{$prefix}--image {
+  :host(#{$dds-prefix}-card-cta-image),
+  :host(#{$dds-prefix}-image) {
     position: relative;
+    display: block;
+  }
+
+  :host(#{$dds-prefix}-card-cta-image::slotted(svg[slot='icon'])),
+  :host(#{$dds-prefix}-image::slotted(svg[slot='icon'])) {
+    position: absolute;
+    top: calc(50% - #{$spacing-07});
+    right: calc(50% - #{$spacing-07});
+  }
+
+  :host(#{$dds-prefix}-image-item) {
+    display: none;
+  }
+
+  :host(#{$dds-prefix}-card-cta-image) {
+    @include ratio-base(4, 3, true);
+
+    .#{$prefix}--image__img {
+      position: absolute;
+      height: 100%;
+      top: 0;
+    }
   }
 
   .#{$prefix}--image__img {
@@ -36,10 +64,109 @@
     overflow: hidden;
   }
 
-  .#{$prefix}--image__icon {
-    position: absolute;
-    top: calc(50% - #{$spacing-07});
-    right: calc(50% - #{$spacing-07});
+  :host(#{$dds-prefix}-image)[heading] {
+    display: block;
+    margin-top: $spacing-07;
+    margin-bottom: $spacing-07;
+    max-width: carbon--mini-units(80);
+
+    @include breakpoint(md) {
+      margin-top: $spacing-07;
+      margin-bottom: $spacing-07;
+    }
+  }
+
+  .#{$prefix}--image-with-caption__image {
+    display: block;
+    width: 100%;
+    padding: 0;
+    position: relative;
+    pointer-events: none;
+    border: 1px solid $border-tile-01;
+    background-color: transparent;
+
+    &:hover {
+      // only have lightbox functionality on bigger breakpoints
+      @include breakpoint(md) {
+        cursor: zoom-in;
+
+        .#{$prefix}--image__img {
+          filter: brightness(80%);
+        }
+
+        .#{$prefix}--image-with-caption__zoom-button {
+          background-color: rgba($gray-100, 1);
+        }
+      }
+    }
+
+    &:focus {
+      // only have lightbox functionality on bigger breakpoints
+      @include breakpoint(md) {
+        outline: $spacing-01 solid $focus;
+        border: 1px solid $focus-inset;
+      }
+    }
+  }
+
+  .#{$prefix}--image-with-caption__zoom-button {
+    display: none;
+
+    // only have lightbox functionality on bigger breakpoints
+    @include breakpoint(md) {
+      width: $spacing-09;
+      height: $spacing-09;
+      display: flex;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      background-color: rgba($gray-100, 0.85);
+
+      svg {
+        margin: auto;
+        fill: $white;
+      }
+    }
+  }
+
+  .#{$prefix}--image-with-caption__image,
+  .#{$prefix}--image-with-caption__zoom-button {
+    // only have lightbox functionality on bigger breakpoints
+    @include breakpoint(md) {
+      transition: $duration-moderate-01 motion(standard, productive);
+      pointer-events: auto;
+    }
+  }
+
+  .#{$prefix}--image__caption {
+    @include type-style('body-01');
+
+    margin-top: $spacing-03;
+    color: $text-helper;
+  }
+
+  :host(#{$dds-prefix}-image[lightbox-contrast='dark']) {
+    .#{$prefix}--image-with-caption__zoom-button {
+      background-color: rgba($white, 0.85);
+
+      svg {
+        fill: $gray-90;
+      }
+    }
+    .#{$prefix}--image-with-caption__image {
+      &:hover {
+        // only have lightbox functionality on bigger breakpoints
+        @include breakpoint(md) {
+          .#{$prefix}--image__img {
+            filter: brightness(120%);
+          }
+
+          .#{$prefix}--image-with-caption__zoom-button {
+            background-color: rgba($white, 1);
+          }
+        }
+      }
+    }
   }
 
   // dds-image-logo style.

packages/styles/scss/components/leadspace-block/_leadspace-block.scss

@@ -15,7 +15,7 @@
 @use '../../globals/vars' as *;
 @use '../button-group';
 @use '../link-list';
-@use '../image-with-caption';
+@use '../image';
 @use '../../internal/content-block';
 
 %leadspace-block-padding {

packages/styles/scss/ibm-dotcom-styles.scss

@@ -42,7 +42,6 @@
 @use 'components/footer';
 @use 'components/horizontal-rule';
 @use 'components/image';
-@use 'components/image-with-caption';
 @use 'components/layout';
 @use 'components/leadspace';
 @use 'components/leadspace-block';

packages/web-components/examples/codesandbox/components/content-block-media/cdn.html

@@ -39,7 +39,7 @@
           <dds-content-group-heading>
             Lorem ipsum dolor sit amet
           </dds-content-group-heading>
-          <dds-image-with-caption
+          <dds-image
             slot="media"
             alt="Image alt text"
             default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
@@ -60,7 +60,7 @@
               srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
             >
             </dds-image-item>
-          </dds-image-with-caption>
+          </dds-image>
           <dds-content-item>
             <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
             <dds-content-item-copy>

packages/web-components/examples/codesandbox/components/content-block-media/index.html

@@ -37,7 +37,7 @@
               <dds-content-group-heading>
                 Lorem ipsum dolor sit amet
               </dds-content-group-heading>
-              <dds-image-with-caption
+              <dds-image
                 slot="media"
                 alt="Image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
@@ -58,7 +58,7 @@
                   srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                 >
                 </dds-image-item>
-              </dds-image-with-caption>
+              </dds-image>
               <dds-content-item>
                 <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
                 <dds-content-item-copy>

packages/web-components/src/components/content-block-mixed/index.ts

@@ -16,6 +16,5 @@ import '../content-group/content-group-copy';
 import '../content-item/index';
 import '../cta/card-link-cta';
 import '../image/image';
-import '../image-with-caption/image-with-caption';
 import '../link-list/index';
 import '../pictogram-item/index';