Phase two redo

404.html

@@ -11,7 +11,7 @@
   <meta property="og:title" content="Page not found">
   <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
   <script type="module">
-    import { sampleRUM } from '/scripts/lib-franklin.js';
+    import { sampleRUM } from '/scripts/aem.js';
 
     window.addEventListener('load', () => {
       if (document.referrer) {

README.md

@@ -3,9 +3,9 @@ Takeda Integrated Health Systems
 
 ## Environments
 
--Preview: https://main--takeda-ihs--hlxsites.hlx.page/
+-Preview: https://phase-two-redo--takeda-ihs--hlxsites.hlx.page/
 
--Live: https://main--takeda-ihs--hlxsites.hlx.live/
+-Live: https://phase-two-redo--takeda-ihs--hlxsites.hlx.live/
 
 ## Installation
 

blocks/brightcove/brightcove.js

@@ -1,4 +1,4 @@
-import { readBlockConfig } from '../../scripts/lib-franklin.js';
+import { readBlockConfig } from '../../scripts/aem.js';
 
 export default async function decorate(block) {
   const config = readBlockConfig(block);

blocks/calendar-events/calendar-events.js

@@ -1,4 +1,4 @@
-import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { decorateIcons } from '../../scripts/aem.js';
 
 export default async function decorate(block) {
   block.classList.add(`calendar-events-${block.children.length}`);

blocks/cards/cards.css

@@ -10,9 +10,11 @@
   gap: 1.75em;
 }
 
+
 .cards.default.block > div {
   padding: 20px 16px;
-  border-radius: 10px;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px 0 rgba(0 0 0 / 20%);
   background-color: rgba(255 255 255 / 66%);
 }
 
@@ -49,6 +51,8 @@
 @media screen and (min-width: 600px) {
   .cards.default.block > div {
     padding: 20px 32px;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px 0 rgba(0 0 0 / 20%);
   }
 }
 

blocks/cards/cta.css

@@ -3,65 +3,96 @@
   gap: 1em;
 }
 
-.cards.cta.block > ul > li {
-  display: block;
-  padding: 16px;
-  border-radius: 8px;
+.cards.cta.block>ul>li {
+  display: flex;
+  padding: 24px;
   box-shadow: 0 4px 10px 0 rgba(0 0 0 / 20%);
+  background-color: #fff;
+  justify-content: center;
+  position:relative ;
 }
 
-.cards.cta.block > ul > li div {
-  padding-top: 30px;
+.cards.cta.block>ul>li div {
+  padding-top: 0;
   border-top: 3px solid white;
 }
 
-.cards.cta.block > ul > li.onepath div {
-  border-color: var(--onepath);
+.cards.cta.block>ul>li.onepath div {
+  /* border-color: var(--onepath); */
+}
+
+.cards.cta.block>ul>li.myigsource div {
+  /* border-color: var(--myigsource); */
+}
+
+.cards.cta.block>ul>li.hello-programs div {
+  /* border-color: var(--hello-programs); */
+}
+
+.cards.cta.block button.primary.top-link {
+  display: inline-block;
+  padding: 0;
+  font-weight: bold;
+  line-height: var(--line-height-l);
+  text-decoration: none;
+  border: 0;
 }
 
-.cards.cta.block > ul > li.myigsource div {
-  border-color: var(--myigsource);
+.cards.cta.block .card-body .top-section {
+  position: relative;
+  margin-left: 12px;
+}
+
+.cards.cta.block .card-body p.link-container span.icon svg {
+  position: relative;
+  height: 25px;
+  width: 25px;
 }
 
-.cards.cta.block > ul > li.hello-programs div {
-  border-color: var(--hello-programs);
+.cards.cta.block .card-body p.link-container span.icon {
+  display: block;
+  width: 100%;
+  position: absolute;
+  left: 96%;
+  top: -5px;
 }
 
-.cards.cta.block > ul > li div p.image {
+.cards.cta.block>ul>li div p.image {
   width: 230px;
-  margin: 0 auto;
 }
 
-.cards.cta.block > ul > li picture {
+.cards.cta.block>ul>li picture {
   display: block;
   position: relative;
   height: 100%;
   width: 100%;
 }
 
-.cards.cta.block > ul > li picture img {
-  position: absolute;
-  top: 0;
-  left: 0;
+.cards.cta.block>ul>li picture img {
   height: 100%;
   width: 100%;
   object-position: center center;
   object-fit: contain;
 }
 
-.cards.cta.block > ul > li h3 {
+.cards.cta.block>ul>li h3 {
   font-size: var(--heading-font-size-xs);
-  text-align: center;
-  color: var(--gray);
-  margin: 12px auto;
+  text-align: left;
+  color: var(--gray-neutral-80);
+  margin-bottom:4px;
+}
+
+.cards.cta.block>ul>li p {
+  text-align: left;
 }
 
-.cards.cta.block > ul > li p {
-  text-align: center;
+.cards.cta.block>ul>li p.link-container {
+  text-align: left;
 }
 
-.cards.cta.block > ul > li p.button-container {
-  margin: 18px auto;
+.cards.cta.block>ul>li p.button-container {
+  text-align: left;
+  margin-top:auto;
 }
 
 @media screen and (min-width: 900px) {
@@ -73,24 +104,40 @@
     grid-template-columns: 1fr 1fr 1fr;
   }
 
-  .cards.cta.block > ul > li > div {
+  .cards.cta.block ul.cards-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .cards.cta.block>ul>li>div {
     display: flex;
     flex-direction: column;
     justify-content: stretch;
     height: 100%;
   }
 
-  .cards.cta.block > ul > li > div > * {
-    flex-basis: 33%;
+  .cards.cta.block>ul>li>div>* {
+
   }
 
-  .cards.cta.block > ul > li div p.image {
+  .cards.cta.block>ul>li div p.image {
     width: 100%;
   }
+
+  .cards.cta.block .card-body {
+
+  }
+
+  .cards.cta.block .card-body p.link-container span.icon {
+    display: block;
+    width: 100%;
+    position: absolute;
+    left: 96%;
+    top: -5px;
+  }
 }
 
 @media screen and (min-width: 1200px) {
-  .cards.cta.block > ul > li div p.image {
-    width: 230px;
+  .cards.cta.block>ul>li div p.image {
+    width: 100%;
   }
 }

blocks/cards/cta.js

@@ -1,26 +1,35 @@
-import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { decorateIcons } from '../../scripts/aem.js';
 
 /**
  * Builds the CTA variation of the cards block.
  * @param {HTMLDivElement} block
  */
 export default async function decorate(block) {
   const cards = [...block.children];
+  const anchor = block.querySelector('a');
+  anchor.classList.remove('button', 'primary');
+  anchor.classList.add('top-link');
   const ul = document.createElement('ul');
   ul.classList.add(`cards-${cards.length}`);
   cards.forEach((card) => {
+    const topSection = document.createElement('div');
+    topSection.classList.add('top-section');
+    const cardBody = (card.children[1]);
+    cardBody.classList.add('card-body');
+    const ButtonContainer = card.querySelector('p.button-container');
+    ButtonContainer.classList.add('link-container');
+    cardBody.prepend(topSection);
+    const topLink = card.querySelector('p.link-container');
+    /* cardBody.append(topLink); */
     const li = document.createElement('li');
     li.classList.add('cta', card.children[0].textContent);
     li.append(card.children[1]);
-
     const picture = li.querySelector('picture');
     picture.closest('p').classList.add('image');
-
     const img = picture.querySelector('img');
-    const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
-    picture.style.paddingBottom = `${ratio}%`;
+    const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 0;
+    img.style.marginBottom = `${ratio}%`;
     ul.append(li);
   });
   block.replaceChildren(ul);
-  await decorateIcons(block);
 }

blocks/cards/icon-cta.js

@@ -1,4 +1,4 @@
-import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { decorateIcons } from '../../scripts/aem.js';
 
 /**
  * Builds the Icons variation of the cards block.
@@ -43,5 +43,4 @@
       card.append(content, link);
     });
   });
-  await decorateIcons(block);
 }

blocks/cards/icon.css

@@ -1,27 +1,44 @@
+
 .cards.icon.block {
   display: grid;
   gap: 24px;
+  max-width:1200px;
+  margin:auto;
+}
+
+.cards-wrapper {
+  max-width: var(--normal-page-width);
 }
 
 .cards.icon.block .row {
   display: grid;
   gap: 24px;
 }
 
-
 .cards.icon.block .card {
   display: flex;
-  padding: 20px 30px;
+  padding-right:20px;
+  margin:20px 0;
   flex-direction: column;
   background-color: white;
-  box-shadow: 0 4px 10px 0 rgba(0 0 0 / 20%);
-  border-radius: 10px;
+  text-align: center;
+  border-bottom: 1px solid grey;
 }
 
 .cards.icon.block .card span.icon {
   display: inline-block;
-  height: 43px;
-  width: 43px;
+  height: 70px;
+  width: 70px;
+  margin-bottom:1em;
+}
+
+.cards.icon.block .card .button-container  span.icon {
+  position: relative;
+  top: 8px;
+  left: 10px;
+  display: inline-block;
+  height: 25px;
+  width: 25px;
 }
 
 .cards.icon.block .card span.icon svg {
@@ -30,18 +47,38 @@
   width: 100%;
 }
 
+.cards.icon.block .card:last-of-type {
+  border:0;
+}
+
 .cards.icon.block .card h3 {
   margin-bottom: 1em;
   font-size: var(--heading-font-size-xs);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-s);
 }
 
+.cards.icon.block .card  p {
+  margin-bottom:0;
+
+}
+@media screen and (min-width: 600px) {
+  .cards.icon.block .card {
+
+  }
+}
+
 @media screen and (min-width: 900px) {
   .cards.icon.block .row {
     grid-template-columns: repeat(2, 1fr);
   }
 
+  .cards.icon.block .card {
+    border-right: 1px solid grey;
+    border-bottom:0;
+
+  }
+
   main .section[data-layout] .cards.icon.block .row {
     grid-template-columns: 1fr;
   }
@@ -52,4 +89,5 @@
   main .section[data-layout] .cards.icon.block .row {
     grid-template-columns: repeat(3, 1fr);
   }
+
 }

blocks/cards/icon.js

@@ -1,4 +1,4 @@
-import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { decorateIcons } from '../../scripts/aem.js';
 
 export default async function decorate(block) {
   let count;
@@ -13,5 +13,4 @@
       card.classList.add('card');
     });
   });
-  await decorateIcons(block);
 }