feat(SW-3173): Added support for one or two columns for the list inside the RTE

Approved-by: Matilda Landström

packages/design-system/lib/components/JsonToHtml/renderOptions.tsx

@@ -9,13 +9,13 @@ import Table from '../Table'
 import { Typography } from '../Typography'
 
 import {
+  extractAvailableListClassNames,
   hasAvailableParagraphFormat,
-  hasAvailableULFormat,
-  makeCssModuleCompatibleClassName,
 } from './utils'
 
 import styles from './jsontohtml.module.css'
 
+import { insertResponseToImageVaultAsset } from './insertResponseToImageVaultAsset'
 import type { EmbedByUid } from './JsonToHtml'
 import type { Attributes, RTEImageVaultAttrs } from './types/rte/attrs'
 import {
@@ -33,7 +33,6 @@ import {
   type RTETextNode,
 } from './types/rte/node'
 import type { RenderOptions } from './types/rte/option'
-import { insertResponseToImageVaultAsset } from './insertResponseToImageVaultAsset'
 
 function noNestedLinksOrReferences(node: RTENode) {
   if ('type' in node) {
@@ -255,15 +254,12 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     const { className, ...props } = extractPossibleAttributes(node.attrs)
-    const compatibleClassName = makeCssModuleCompatibleClassName(
-      className,
-      'ul'
-    )
+    const compatibleClassNames = extractAvailableListClassNames(className)
     return (
       <li
         key={node.uid}
         {...props}
-        className={cx(styles.li, compatibleClassName)}
+        className={cx(styles.li, compatibleClassNames)}
       >
         {next(node.children, embeds, fullRenderOptions)}
       </li>
@@ -277,26 +273,11 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     const { className, ...props } = extractPossibleAttributes(node.attrs)
-
-    // Set the number of rows dynamically to create even rows for each column. We want the li:s
-    // to flow with the column, so therefore this is needed.
-    let numberOfRows: number | undefined
-    if (node.children.length > 4) {
-      const half = node.children.length / 2
-      numberOfRows = Math.ceil(half)
-    }
+    const compatibleClassNames = extractAvailableListClassNames(className)
 
     return (
       <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
-        <ol
-          className={cx(styles.ol, className)}
-          {...props}
-          style={
-            numberOfRows
-              ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
-              : {}
-          }
-        >
+        <ol className={cx(styles.ol, compatibleClassNames)} {...props}>
           {next(node.children, embeds, fullRenderOptions)}
         </ol>
       </Typography>
@@ -340,8 +321,9 @@ export const renderOptions: RenderOptions = {
     let propsClassName = className
 
     if (className) {
-      if (hasAvailableULFormat(className)) {
-        propsClassName = styles[className]
+      const availableClassNames = extractAvailableListClassNames(className)
+      if (availableClassNames.length) {
+        propsClassName = cx(availableClassNames)
       }
     }
 
@@ -361,8 +343,9 @@ export const renderOptions: RenderOptions = {
     let propsClassName = className
 
     if (className) {
-      if (hasAvailableULFormat(className)) {
-        propsClassName = styles[className]
+      const availableClassNames = extractAvailableListClassNames(className)
+      if (availableClassNames.length) {
+        propsClassName = cx(availableClassNames)
       }
     }
 
@@ -656,32 +639,11 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     const { className, ...props } = extractPossibleAttributes(node.attrs)
-    const compatibleClassName = makeCssModuleCompatibleClassName(
-      className,
-      'ul'
-    )
-
-    // Set the number of rows dynamically to create even rows for each column. We want the li:s
-    // to flow with the column, so therefore this is needed.
-    let numberOfRows: number | undefined
-    if (node.children.length > 4) {
-      const half = node.children.length / 2
-      numberOfRows = Math.ceil(half)
-    }
+    const compatibleClassNames = extractAvailableListClassNames(className)
 
     return (
       <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
-        <ul
-          className={cx(styles.ul, compatibleClassName)}
-          {...props}
-          style={
-            numberOfRows
-              ? {
-                  gridTemplateRows: `repeat(${numberOfRows}, auto)`,
-                }
-              : {}
-          }
-        >
+        <ul className={cx(styles.ul, compatibleClassNames)} {...props}>
           {next(node.children, embeds, fullRenderOptions)}
         </ul>
       </Typography>
@@ -747,8 +709,9 @@ export const renderOptions: RenderOptions = {
     }
 
     if (className) {
-      if (hasAvailableULFormat(className)) {
-        propsClassName = styles[className]
+      const availableClassNames = extractAvailableListClassNames(className)
+      if (availableClassNames.length) {
+        propsClassName = cx(availableClassNames)
       }
     }