fix(SW-741): UI fixes on contentpages and some components

components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx

@@ -11,7 +11,7 @@ export default function ShortcutsListItems({
   className,
 }: ShortcutsListItemsProps) {
   return (
-    <ul className={className}>
+    <ul className={`${styles.list} ${className}`}>
       {shortcutsListItems.map((shortcut) => (
         <li key={shortcut.title} className={styles.listItem}>
           <Link

components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css

@@ -1,5 +1,8 @@
-.link {
-  background-color: var(--Base-Surface-Primary-light-Normal);
+.list {
+  height: fit-content;
+  border-radius: var(--Corner-radius-Medium);
+  overflow: hidden;
+  list-style: none;
 }
 
 .listItem {

components/Blocks/ShortcutsList/index.tsx

@@ -15,36 +15,36 @@ export default function ShortcutsList({
   hasTwoColumns,
 }: ShortcutsListProps) {
   const middleIndex = Math.ceil(shortcuts.length / 2)
-  const leftColumn = shortcuts.slice(0, middleIndex)
-  const rightColumn = shortcuts.slice(middleIndex)
-
-  const classNames =
+  const columns =
     hasTwoColumns && shortcuts.length > 1
-      ? {
-          section: styles.twoColumnSection,
-          leftColumn: styles.leftColumn,
-          rightColumn: styles.rightColumn,
-        }
-      : {
-          section: styles.oneColumnSection,
-          leftColumn:
-            shortcuts.length === 1
-              ? styles.leftColumnBorderBottomNone
-              : styles.leftColumnBorderBottom,
-        }
+      ? [
+          {
+            id: "shortcuts-column-1",
+            column: shortcuts.slice(0, middleIndex),
+          },
+          {
+            id: "shortcuts-column-2",
+            column: shortcuts.slice(middleIndex),
+          },
+        ]
+      : [
+          {
+            id: "shortcuts-column",
+            column: shortcuts,
+          },
+        ]
 
   return (
     <SectionContainer>
       <SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
-      <section className={classNames.section}>
-        <ShortcutsListItems
-          shortcutsListItems={leftColumn}
-          className={classNames.leftColumn}
-        />
-        <ShortcutsListItems
-          shortcutsListItems={rightColumn}
-          className={classNames.rightColumn}
-        />
+      <section className={styles.section}>
+        {columns.map(({ id, column }) => (
+          <ShortcutsListItems
+            key={id}
+            shortcutsListItems={column}
+            className={styles.column}
+          />
+        ))}
       </section>
     </SectionContainer>
   )

components/Blocks/ShortcutsList/shortcutsList.module.css

@@ -1,33 +1,24 @@
-.oneColumnSection,
-.twoColumnSection {
-  display: grid;
-  border-radius: var(--Corner-radius-Medium);
-  border: 1px solid var(--Base-Border-Subtle);
-  overflow: hidden;
-}
-
-.leftColumn,
-.leftColumnBorderBottom {
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-}
-
-.leftColumnBorderBottomNone {
-  border-bottom: none;
-}
-
-@media screen and (min-width: 1367px) {
-  .twoColumnSection {
-    grid-template-columns: 1fr 1fr;
-    column-gap: var(--Spacing-x2);
-    border-radius: 0;
-    border: none;
-  }
-
-  .leftColumn,
-  .rightColumn {
-    height: fit-content;
-    border: 1px solid var(--Base-Border-Subtle);
+@media screen and (max-width: 1366px) {
+  .section {
     border-radius: var(--Corner-radius-Medium);
     overflow: hidden;
   }
+  .column {
+    border-radius: 0;
+  }
+
+  .column + .column {
+    border-top: 1px solid var(--Base-Border-Subtle);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .section {
+    border-radius: 0;
+  }
+  .section:has(.column:nth-child(2)) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--Spacing-x2);
+  }
 }

components/Blocks/TextCols/index.tsx

@@ -14,13 +14,11 @@ export default function TextCols({ text_cols }: TextColProps) {
         return (
           <section key={col.title} className={styles.column}>
             <Subtitle>{col.title}</Subtitle>
-            <div className={styles.text}>
-              <JsonToHtml
-                nodes={col.text.json.children}
-                embeds={col.text.embedded_itemsConnection.edges}
-                renderOptions={renderOptions}
-              />
-            </div>
+            <JsonToHtml
+              nodes={col.text.json.children}
+              embeds={col.text.embedded_itemsConnection.edges}
+              renderOptions={renderOptions}
+            />
           </section>
         )
       })}

components/Blocks/TextCols/renderOptions.tsx

@@ -5,7 +5,6 @@ import styles from "./textcols.module.css"
 import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
 import { RTEItemTypeEnum, RTETypeEnum } from "@/types/transitionTypes/rte/enums"
 import type {
-  RTEDefaultNode,
   RTENext,
   RTENode,
   RTERegularNode,
@@ -13,18 +12,6 @@ import type {
 import type { RenderOptions } from "@/types/transitionTypes/rte/option"
 
 export const renderOptions: RenderOptions = {
-  [RTETypeEnum.p]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    return (
-      <p key={node.uid} className={styles.p}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </p>
-    )
-  },
   [RTETypeEnum.a]: (
     node: RTERegularNode,
     embeds: EmbedByUid,

components/Blocks/TextCols/textcols.module.css

@@ -1,39 +1,18 @@
 .columns {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: var(--Spacing-x3);
 }
 
 .column {
+  display: grid;
+  gap: var(--Spacing-x1);
+  align-content: start;
   padding-bottom: var(--Spacing-x2);
   border-bottom: 1px solid var(--Base-Border-Subtle);
-  gap: var(--Spacing-x1);
-  display: flex;
-  flex-direction: column;
-}
-
-.p {
-  color: var(--UI-Text-High-contrast);
-  line-height: var(--Spacing-x3);
-  margin: 0;
-}
-
-.a {
-  color: var(--Base-Text-High-contrast);
-}
-
-.text > section {
-  gap: 0;
 }
 
 @media (min-width: 768px) {
   .columns {
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  .column {
-    flex: 0 0 calc(50% - var(--Spacing-x3));
-    max-width: calc(50% - var(--Spacing-x3));
+    grid-template-columns: repeat(2, 1fr);
   }
 }

components/Blocks/UspGrid/renderOptions.tsx

@@ -1,50 +1,11 @@
 import Link from "@/components/TempDesignSystem/Link"
 
-import styles from "./uspgrid.module.css"
-
 import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
 import { RTEItemTypeEnum, RTETypeEnum } from "@/types/transitionTypes/rte/enums"
-import type {
-  RTEDefaultNode,
-  RTENext,
-  RTENode,
-  RTERegularNode,
-} from "@/types/transitionTypes/rte/node"
+import type { RTENext, RTENode } from "@/types/transitionTypes/rte/node"
 import type { RenderOptions } from "@/types/transitionTypes/rte/option"
 
 export const renderOptions: RenderOptions = {
-  [RTETypeEnum.p]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    return (
-      <p key={node.uid} className={styles.p}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </p>
-    )
-  },
-  [RTETypeEnum.a]: (
-    node: RTERegularNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    if (node.attrs.url) {
-      return (
-        <a
-          href={node.attrs.url}
-          target={node.attrs.target ?? "_blank"}
-          key={node.uid}
-          className={styles.a}
-        >
-          {next(node.children, embeds, fullRenderOptions)}
-        </a>
-      )
-    }
-    return null
-  },
   [RTETypeEnum.reference]: (
     node: RTENode,
     embeds: EmbedByUid,
@@ -59,7 +20,12 @@ export const renderOptions: RenderOptions = {
           : node.attrs.href
 
         return (
-          <Link href={href} key={node.uid} className={styles.a}>
+          <Link
+            href={href}
+            key={node.uid}
+            variant="underscored"
+            color="burgundy"
+          >
             {next(node.children, embeds, fullRenderOptions)}
           </Link>
         )

components/Blocks/UspGrid/uspgrid.module.css

@@ -2,26 +2,18 @@
   display: grid;
   gap: var(--Spacing-x3);
 }
+
+.usp {
+  display: grid;
+  gap: var(--Spacing-x3);
+  align-content: start;
+}
+
 @media screen and (min-width: 767px) {
   .grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .grid:has(.usp:nth-child(4)) {
     grid-template-columns: repeat(2, 1fr);
   }
-}
-.usp {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
-}
-.p {
-  margin: 0;
-  font-size: var(--typography-Caption-Regular-fontSize);
-  color: var(--UI-Text-Medium-contrast);
-  line-height: 21px; /* Caption variable for line-height is 139.9999976158142%, but it set to 21px in design  */
-}
-.a {
-  font-size: var(--typography-Caption-Regular-fontSize);
-  color: var(--Base-Text-High-contrast);
+  .grid:has(.usp:nth-child(3)):not(:has(.usp:nth-child(4))) {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }

components/DeprecatedJsonToHtml/renderOptions.tsx

@@ -65,6 +65,7 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
+    console.log({ RTE_A_NODE: node })
     if (node.attrs.url) {
       const props = extractPossibleAttributes(node.attrs)
       return (

components/JsonToHtml/renderOptions.tsx

@@ -1,7 +1,6 @@
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
-import { removeMultipleSlashes } from "@/utils/url"
 
 import ImageContainer from "../ImageContainer"
 import Divider from "../TempDesignSystem/Divider"

components/TempDesignSystem/Link/link.module.css

@@ -65,7 +65,6 @@
 
 .shortcut {
   align-items: center;
-  border-bottom: 1px solid var(--Base-Border-Subtle);
   display: grid;
   font-family: var(--typography-Body-Regular-fontFamily);
   font-size: var(--typography-Body-Regular-fontSize);
@@ -74,7 +73,13 @@
   grid-template-columns: 1fr auto;
   letter-spacing: var(--typography-Body-Regular-letterSpacing);
   line-height: var(--typography-Body-Regular-lineHeight);
-  padding: var(--Spacing-x3);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  transition: background-color 0.3s;
+}
+
+.shortcut:hover {
+  background-color: var(--UI-Input-Controls-Surface-Hover);
 }
 
 .shortcut:last-of-type {