Merge pull request #38 from adobecom/MWPW-143367

feat: MWPW-143367 | add how-to-steps-carousel block

express/blocks/ax-columns/ax-columns.js

@@ -263,7 +263,7 @@ export default async function decorate(block) {
     });
   });
   addAnimationToggle(block);
-  addHeaderSizing(block, 'columns-heading');
+  addHeaderSizing(null, block, 'columns-heading');
 
   // decorate offer
   if (block.classList.contains('offer')) {

express/blocks/how-to-steps-carousel/how-to-steps-carousel.css

@@ -0,0 +1,205 @@
+.how-to-steps-carousel-container {
+  margin: 120px 0 0 0;
+  padding: 0;
+  text-align: center;
+}
+
+.how-to-steps-carousel-container > picture > img {
+  width: 100%;
+  margin-bottom: 56px;
+}
+
+.how-to-steps-carousel-container > div.content{
+  background-color: var(--color-gray-100);
+  border-radius: 40px;
+
+  margin: 0 24px;
+  padding: 56px 24px;
+  width: 100%;
+  max-width: fit-content;
+}
+
+.how-to-steps-carousel-container > div.content p,
+.how-to-steps-carousel-container > div.content p.button-container,
+.how-to-steps-carousel-container > div.content p.button-container a {
+  text-align: left;
+  margin: 0;
+}
+
+.how-to-steps-carousel-container > div.content p.button-container {
+  margin: 16px 0;
+}
+
+.how-to-steps-carousel-container > div.content > h2 {
+  text-align: left;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.how-to-steps-carousel-container > div.content > h2:not(:lang(ja)) {
+  font-size: var(--heading-font-size-xl);
+}
+
+.how-to-steps-carousel-container > div > div {
+  max-width: 810px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.how-to-steps-carousel .tips .tip {
+  display: none;
+
+  grid-row-start: 1;
+  grid-column-start: 1;
+
+  text-align: left;
+  margin-top: 64px;
+  margin-bottom: 56px;
+}
+
+.how-to-steps-carousel .tips .tip.active {
+  display: block;
+
+  animation: fadeIn ease 2s;
+  -webkit-animation: fadeIn ease 2s;
+  -moz-animation: fadeIn ease 2s;
+  -o-animation: fadeIn ease 2s;
+  -ms-animation: fadeIn ease 2s;
+}
+
+@keyframes fadeIn {
+  0% { opacity:0.1; }
+  100% { opacity:1; }
+}
+
+@-moz-keyframes fadeIn {
+  0% { opacity:0; }
+  100% { opacity:1; }
+}
+
+@-webkit-keyframes fadeIn {
+  0% { opacity:0; }
+  100% { opacity:1; }
+}
+
+@-o-keyframes fadeIn {
+  0% { opacity:0; }
+  100% { opacity:1; }
+}
+
+@-ms-keyframes fadeIn {
+  0% { opacity:0; }
+  100% { opacity:1; }
+}
+
+.how-to-steps-carousel .tip-numbers {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  text-align: left;
+  margin-top: 18px;
+}
+
+.how-to-steps-carousel .tip-number {
+  width: 34px;
+  min-width: 34px;
+  height: 34px;
+  min-height: 34px;
+  display: block;
+  position: relative;
+  background-color: var(--color-gray-200);
+  border-radius: 50%;
+  margin-right: 12px;
+  color: var(--color-black);
+  font-size: var(--body-font-size-s);
+  font-weight: 600;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  cursor: pointer;
+}
+
+.how-to-steps-carousel .tip-number:focus {
+  outline: none;
+  box-shadow:
+          0 0 0 2px var(--color-white),
+          0 0 0 4px var(--color-info-accent );
+}
+
+.how-to-steps-carousel .tip-number.active {
+  background-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.how-to-steps-carousel .tip-number span {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.how-to-steps-carousel .tip-text p,
+.how-to-steps-carousel .tip-text div {
+  font-size: var(--body-font-size-xl);
+  margin-top: 16px;
+  margin-bottom: 0;
+}
+
+.how-to-steps-carousel .tip-text h3 {
+  margin-bottom: 16px;
+  font-size: var(--heading-font-size-m);
+  text-align: left;
+}
+
+.how-to-steps-carousel-container .icon {
+  width: 56px;
+  height: 56px;
+}
+
+.how-to-steps-carousel-container > picture > img {
+  margin-bottom: 80px;
+  width: calc(100% - 40px);
+}
+
+@media (min-width: 600px) {
+  .how-to-steps-carousel-container > picture > img {
+    margin: 0;
+    object-position: right;
+    object-fit: cover;
+    min-height: 100%;
+    max-height: 100%;
+    width: unset;
+  }
+
+  .how-to-steps-carousel .tips .tip {
+    margin-top: 64px;
+    margin-bottom: 80px;
+  }
+
+  .section.how-to-steps-carousel-container {
+    display: flex;
+    justify-content: center;
+    align-items: start;
+  }
+
+  .how-to-steps-carousel-container > div.content {
+    max-width: 600px;
+    padding: 80px 88px;
+  }
+}
+
+@media (min-width: 900px) {
+  .how-to-steps-carousel-container > div.content {
+    margin: 0 80px;
+  }
+
+  .how-to-steps-carousel-container > div p.button-container {
+    margin: 40px 0 0;
+  }
+}
+
+@media (min-width: 1200px) {
+  .how-to-steps-carousel-container.no-cover > div {
+    margin: 0 120px 0 20px;
+  }
+}