fix(SW-438): add ContentCard, ScriptedCard and Shortcuts to ContentPage sidebar

components/Sidebar/index.tsx

@@ -1,5 +1,8 @@
 import JsonToHtml from "@/components/JsonToHtml"
 
+import ShortcutsList from "../Blocks/ShortcutsList"
+import Card from "../TempDesignSystem/Card"
+import TeaserCard from "../TempDesignSystem/TeaserCard"
 import JoinLoyaltyContact from "./JoinLoyalty"
 import MyPagesNavigation from "./MyPagesNavigation"
 
@@ -26,6 +29,19 @@ export default function Sidebar({ blocks }: SidebarProps) {
                 />
               </section>
             )
+          case SidebarEnums.blocks.ContentCard:
+            console.log("EEE", block.content_card)
+            return (
+              <TeaserCard
+                {...block.content_card}
+                title={block.content_card.heading}
+                description={block.content_card.body_text}
+                style={
+                  block.content_card.theme === "gray" ? "default" : "featured"
+                }
+              />
+            )
+
           case SidebarEnums.blocks.DynamicContent:
             switch (block.dynamic_content.component) {
               case DynamicContentEnum.Sidebar.components.my_pages_navigation:
@@ -40,6 +56,20 @@ export default function Sidebar({ blocks }: SidebarProps) {
                 key={`${block.typename}-${idx}`}
               />
             )
+          case SidebarEnums.blocks.ScriptedCard:
+            return (
+              <Card
+                {...block.scripted_card}
+                bodyText={block.scripted_card.body_text}
+                scriptedTopTitle={block.scripted_card.scripted_top_title}
+                theme={block.scripted_card.theme ?? "image"}
+              />
+            )
+
+          /*case SidebarEnums.blocks.Shortcuts:
+            console.log("SSS", block)
+            return <ShortcutsList {...block.shortcuts} />*/
+
           default:
             return null
         }

components/Sidebar/sidebar.module.css

@@ -2,6 +2,10 @@
   display: grid;
   container-name: sidebar;
   container-type: inline-size;
+  gap: var(--Spacing-x3);
+
+  border-top: 1px solid var(--Base-Border-Subtle);
+  padding-top: var(--Spacing-x4);
 }
 
 .content {
@@ -11,8 +15,10 @@
 @media screen and (min-width: 1367px) {
   .aside {
     align-content: flex-start;
-    display: grid;
     gap: var(--Spacing-x4);
+
+    border-top: 0;
+    padding-top: 0;
   }
 }