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/jsontohtml.module.css

@@ -60,11 +60,8 @@
 
 .ul,
 .ol {
-  display: grid;
-  gap: var(--Space-x1);
   padding: 0;
-  margin-top: var(--Space-x2);
-  margin-bottom: var(--Space-x2);
+  margin: var(--Space-x2) 0;
 }
 
 .ol > li::marker {
@@ -73,16 +70,7 @@
 
 .li {
   margin-left: var(--Space-x3);
-}
-
-.heart > .li::before,
-.li:has(.heart)::before {
-  content: url('/_static/icons/heart.svg');
-  position: relative;
-  height: 8px;
-  top: 3px;
-  margin-right: var(--Space-x1);
-  margin-left: calc(var(--Space-x3) * -1);
+  margin-bottom: var(--Space-x05);
 }
 
 .heart > .li,
@@ -90,16 +78,27 @@
 .li:has(.check),
 .li:has(.heart) {
   list-style: none;
+  margin-left: 0;
+}
+
+.heart > .li::before,
+.li:has(.heart)::before,
+.check > .li::before,
+.li:has(.check)::before {
+  position: relative;
+  height: 8px;
+  top: 3px;
+  margin-right: var(--Space-x1);
 }
 
 .check > .li::before,
 .li:has(.check)::before {
   content: url('/_static/icons/check-ring.svg');
-  position: relative;
-  height: 8px;
-  top: 3px;
-  margin-right: var(--Space-x1);
-  margin-left: calc(var(--Space-x3) * -1);
+}
+
+.heart > .li::before,
+.li:has(.heart)::before {
+  content: url('/_static/icons/heart.svg');
 }
 
 .li > p {
@@ -127,17 +126,24 @@
 }
 
 @media screen and (min-width: 768px) {
-  .ol:has(li:nth-last-child(n + 5)),
-  .ul:has(li:nth-last-child(n + 5)) {
-    grid-template-columns: 1fr 1fr;
-    grid-auto-flow: column;
+  .ol,
+  .ul {
+    &.two-column,
+    &.two-columns,
+    &:has(.two-column, .two-columns) {
+      column-count: 2;
+      column-gap: var(--Space-x3);
+    }
   }
 }
 
 @container sidebar (max-width: 360px) {
   .ol,
   .ul {
-    display: flex;
-    flex-direction: column;
+    &.two-column,
+    &.two-columns,
+    &:has(.two-column, .two-columns) {
+      column-count: 1;
+    }
   }
 }