Stage to main

.kodiak/config.yaml

@@ -1,20 +1,24 @@
 version: 1.0
+#### If you have questions about this, please contact #kodiak-security on Slack. ####
 
+# Every repository requires a unique Service Now ID number. You need to create a new service using
+# the Service Registry Portal https://adobe.service-now.com/service_registry_portal.do#/search
+# You should NOT leave this default!
 snow:
   - id: 545804 # Milo Express
 
 notifications:
   jira:
     default:
-      project: MWPW # Mandatory
+      project: MWPW # Project queue in which the security ticket will be created. Can be any valid JIRA project.
       filters:
         include:
-          risk_rating: R5
+          risk_rating: R3 # Please do not change this unless instructed to do so.
       fields:
-        customfield_11800: MWPW-145743 #epic link
+        customfield_11800: MWPW-164516 # Jira epic security tickets will be assigned to.
         customfield_12900: 
-          value: Express dev
-        watchers:
+          value: Express dev # Team security tickets will be assigned to
+        watchers: # Everyone who is an admin on your repository should be a watcher.
           - dstrong
           - vhargrave
           - jinglhua
@@ -23,9 +27,9 @@ notifications:
           - all66020
           - cod87753
           - apganapa
-        labels:
+        labels: # You can add additional labels to your tickets here. Do not delete/change the first three.
           - "OriginatingProcess=Kodiak"
           - "security"
           - "kodiak-ticket"
         components:
-          - name: "DevOps Security"
+          - name: "DevOps Security" # Please do not change this.

express/blocks/banner/banner.css

@@ -8,6 +8,14 @@ main div:has(> .banner.cool) {
   background: linear-gradient(170.96deg, #bfe4ff -0.25%, #cecef6 104.12%);
 }
 
+main .section .banner .bg-img-container {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 20px;
+  max-height: 300px;
+}
+
 main .section.banner-container,
 main .section.banner-light-container {
   padding: 80px 15px;

express/blocks/banner/banner.js

@@ -6,6 +6,20 @@ export default async function decorate(block) {
   const isBannerCoolVariant = block.classList.contains('cool');
   const isBannerNarrowVariant = block.classList.contains('narrow');
 
+  const bgImgURL = block.children[0]?.querySelector('img')?.src;
+  const header = block.querySelector('h2');
+  if (header) {
+    const headerParent = header.parentElement;
+    if (bgImgURL) {
+      const firstChild = block.children[0];
+      if (firstChild) {
+        block.removeChild(firstChild);
+      }
+      headerParent.classList.add('bg-img-container');
+      headerParent.style.backgroundImage = `url(${bgImgURL})`;
+    }
+  }
+
   if (isBannerStandoutVariant || isBannerCoolVariant) {
     const contentContainer = createTag('div', {
       class: 'content-container',

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

@@ -11,10 +11,8 @@ main .how-to-steps-carousel-container > picture > img {
 main .how-to-steps-carousel-container > div {
   background-color: var(--color-gray-100);
   border-radius: 40px;
-
   margin: 0 24px;
   padding: 56px 24px;
-  width: 100%;
   max-width: fit-content;
 }
 

express/blocks/how-to-v2/how-to-v2.css

@@ -0,0 +1,216 @@
+main .how-to-v2 h2 {
+  font-size: 22px;
+  text-align: center;
+  padding: 0 24px;
+}
+
+main .how-to-v2 ol {
+  list-style-type: none;
+  font-size: 21px;
+  font-weight: 900;
+}
+
+main .how-to-v2 ol li {
+  padding: 8px 0;
+  cursor: pointer;
+  transition: all 0.21s;
+  display: flex;
+}
+
+main .how-to-v2 ol li .step-indicator {
+  width: 5px;
+  min-width: 5px;
+  background: linear-gradient(-96.68deg, #FF4885 5.24%, #FC7D00 94.76%), #686DF4;
+  border-radius: 2.5px;
+}
+
+main .how-to-v2 ol li .step-content {
+  padding: 8px 16px;
+  margin: 0;
+}
+
+main .how-to-v2 ol li .step-indicator:has(+ div .closed) {
+  background: linear-gradient(95.55deg, rgba(255, 255, 255, 0.5) 4.43%, rgba(255, 255, 255, 0.3) 93.65%), #8F8F8F;
+}
+
+main .how-to-v2 ol li h3 {
+  text-align: left;
+  font-size: 18px;
+  line-height: 23.4px;
+  font-weight: 700;
+}
+
+main .how-to-v2 ol li .detail-container {
+  font-size: 16px;
+  line-height: 20.8px;
+  font-weight: 400;
+}
+
+main .how-to-v2 ol li .detail-container {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.21s ease-out;
+}
+
+main .how-to-v2 ol li .detail-text {
+  padding-top: 10px;
+}
+
+/* so that there is no initial re-paint */
+main .how-to-v2 ol li:first-child .detail-container {
+  max-height: none;
+}
+
+main .how-to-v2.video lite-youtube,
+main .how-to-v2.image picture {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+main .how-to-v2 em {
+  font-style: normal;
+  background: linear-gradient(140.08deg, #FF4DD2 67.54%, #FF993B 76.42%);
+  background-size: 108% 108%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 900;
+}
+
+main .how-to-v2 .steps-content {
+  display: flex;
+  flex-direction: column;
+  padding: 0 24px;
+  position: relative;
+}
+
+main .how-to-v2 .steps-content .steps-content-backg {
+  position: absolute;
+  width: 100%;
+  top: -24vw;
+  z-index: -1;
+  height: 100%;
+  transform: scale(0.9);
+}
+
+main .how-to-v2 ol.steps {
+  margin: 6px 0 0;
+  padding: 0;
+}
+
+main .how-to-v2 ol.steps .step .step-content h3:hover {
+  background-color: var( --color-gray-100);
+  margin: -8px 0 -8px -16px; 
+  padding: 8px 0 8px 16px;
+}
+
+main .how-to-v2.video .video-container {
+  margin-top: 20px;
+}
+
+main .how-to-v2.image .image-container {
+  margin-top: 20px;
+  width: 100%; 
+  overflow: hidden;
+}
+
+main .how-to-v2.image .image-container img,
+main .how-to-v2.video .video-container > * {
+  border-radius: 16px;
+  max-width: 400px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+main .how-to-v2.video .video-container > * {
+  margin-left: auto;
+  margin-right: auto;
+  height: unset;
+}
+
+main .how-to-v2.video,
+main .how-to-v2.image {
+  /* note we don't set margin here because background gradient has to go past into this container */
+  margin: 0;
+  max-width: unset;
+}
+
+@media (min-width: 768px) {
+
+  main .how-to-v2 h2 {
+    font-size: 28px;
+  }
+
+  main .how-to-v2.video,
+  main .how-to-v2.image  {
+    max-width: 950px;
+    margin: auto;
+  }
+
+  main .how-to-v2 .steps-content {
+    display: flex;
+    flex-direction: row;
+    padding: 0 24px;
+  }
+
+  main .how-to-v2 .steps-content > * {
+    flex: 1 1 50%;
+    box-sizing: border-box;
+  }
+
+  main .how-to-v2.image .image-container,
+  main .how-to-v2.video .video-container {
+    align-items: center;
+    display: inline-grid;
+  }
+
+  main .how-to-v2.image .image-container img {
+    height: unset;
+  }
+
+  main .how-to-v2 .steps-content .steps {
+    padding-left: 20px;
+  }
+
+  main .how-to-v2 .steps-content .steps-content-backg {
+    left: -90px;
+    width: 67%;
+    transform: scale(0.9);
+    top: -68px;
+  }
+}
+
+@media (min-width: 1280px) {
+
+  main .how-to-v2 h2 {
+    font-size: 36px;
+  }
+
+  main .how-to-v2.video,
+  main .how-to-v2.image  {
+    max-width: 1300px;
+    margin: auto;
+  }
+
+  main .how-to-v2.image .image-container img,
+  main .how-to-v2.video .video-container > * {
+    max-height: 300px;
+    max-width: 533px;
+  }
+
+  main .how-to-v2.image .image-container {
+    display: inline-block;
+  }
+
+  main .how-to-v2 .steps-content {
+    margin-top: 30px;
+  }
+
+  main .how-to-v2 ol li h3 {
+    text-align: left;
+    font-size: 22px;
+    line-height: 28.6px;
+    font-weight: 700;
+  }
+}