Merge branch 'SLB-299-accordion' into dev

# Conflicts: # packages/drupal/gutenberg_blocks/css/edit.css
AmazeeLabs · May 13, 2024 · b36f7fb · b36f7fb
2 parents 26854e7 + adccb1f
commit b36f7fb
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 13 deletions.
diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css
@@ -78,3 +78,18 @@
   margin-top: 2px;
   content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='question-mark-circle'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 7C9.8243 6.99983 9.65165 7.04595 9.49945 7.13373C9.34724 7.22151 9.22085 7.34784 9.133 7.5C9.06957 7.61788 8.98311 7.72182 8.87876 7.80566C8.77441 7.8895 8.65429 7.95154 8.52552 7.9881C8.39675 8.02466 8.26194 8.03499 8.12911 8.01849C7.99627 8.00198 7.86809 7.95897 7.75218 7.89201C7.63628 7.82505 7.53499 7.7355 7.45433 7.62867C7.37367 7.52184 7.31529 7.3999 7.28263 7.27008C7.24997 7.14027 7.24371 7.00522 7.26421 6.87294C7.28472 6.74065 7.33157 6.61384 7.402 6.5C7.73222 5.92811 8.24191 5.48116 8.85203 5.22846C9.46214 4.97576 10.1386 4.93144 10.7765 5.10236C11.4143 5.27328 11.978 5.64989 12.38 6.1738C12.782 6.6977 13 7.33962 13 8C13.0002 8.62062 12.8079 9.22603 12.4498 9.73285C12.0916 10.2397 11.5851 10.623 11 10.83V11C11 11.2652 10.8946 11.5196 10.7071 11.7071C10.5196 11.8946 10.2652 12 10 12C9.73478 12 9.48043 11.8946 9.29289 11.7071C9.10536 11.5196 9 11.2652 9 11V10C9 9.73478 9.10536 9.48043 9.29289 9.29289C9.48043 9.10536 9.73478 9 10 9C10.2652 9 10.5196 8.89464 10.7071 8.70711C10.8946 8.51957 11 8.26522 11 8C11 7.73478 10.8946 7.48043 10.7071 7.29289C10.5196 7.10536 10.2652 7 10 7ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z' fill='%236B7280'/%3E%3C/g%3E%3C/svg%3E ");
 }
+
+.gutenberg__editor .custom-block-accordion-item-text.questionmark h3::before {
+  margin-right: 7px;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
+}
+
+.gutenberg__editor .custom-block-accordion-item-text.checkmark h3::before {
+  margin-right: 7px;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.gutenberg__editor .custom-block-accordion-item-text.arrow h3::before {
+  margin-right: 7px;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' %3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+}
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/accordion-item-text.tsx b/packages/drupal/gutenberg_blocks/src/blocks/accordion-item-text.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { Fragment } from 'react';
 import {
   InnerBlocks,
@@ -54,7 +55,12 @@ registerBlockType('custom/accordion-item-text', {
         </InspectorControls>
         <div className={'container-wrapper'}>
           <div className={'container-label'}>{__('Accordion Item Text')}</div>
-          <div className="custom-block-accordion-item-text">
+          <div
+            className={clsx(
+              'custom-block-accordion-item-text',
+              attributes.icon,
+            )}
+          >
             <RichText
               identifier="title"
               tagName="h3"

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockAccordion.stories.tsx b/packages/ui/src/components/Organisms/PageContent/BlockAccordion.stories.tsx
@@ -15,7 +15,8 @@ export const AccordionItemText = {
         icon: '',
         textContent: {
           markup: `
-          <p>The earliest known recipe for the modern form of cheese fondue comes from a 1699 book published in Zürich, under the name "Käss mit Wein zu kochen" 'to cook cheese with wine'. It calls for grated or cut-up cheese to be melted with wine, and for bread to be dipped in it.</p>
+          <p>The earliest known recipe for the modern form of cheese fondue comes from a 1699 book published in Zürich, under the name "Käss mit Wein zu kochen" 'to cook cheese with wine'.</p>
+          <p>It calls for grated or cut-up cheese to be melted with wine, and for bread to be dipped in it. However, the name "cheese fondue", until the late 19th century, referred to a dish composed of eggs and cheese, as in la Chapelle's 1735 Fonduë de Fromage, aux Truffes Fraiches; it was something between scrambled eggs with cheese and a cheese soufflé. Brillat-Savarin wrote in 1834 that it is "nothing other than scrambled eggs with cheese". Variations included cream ("à la genevoise") and truffles ("à la piémontaise") in addition to eggs, as well as what is now called "raclette" ("fondue valaisanne").</p>
           <ul>
           <li>Fribourgeoise</li>
           <li>Moitié-Moitié</li>
@@ -29,7 +30,7 @@ export const AccordionItemText = {
         textContent: {
           markup: `
           <p>Rösti is a kind of fried potato cake served as a main course or side dish.</p>
-          <p> As a main dish, rösti is usually accompanied with cheese, onions and cold meat or eggs. This dish, originally from Zürich, was first simply made by frying grated raw potatoes in a pan. It has then spread towards Bern where it is made with boiled potatoes instead. This is where it took the name Rösti. There are many variants in Switzerland and outside the borders. This culinary specialty gives its name to the röstigraben, which designates the cultural differences between the German- and French-speaking parts of the country.</p>
+          <p>As a main dish, rösti is usually accompanied with cheese, onions and cold meat or eggs. This dish, originally from Zürich, was first simply made by frying grated raw potatoes in a pan. It has then spread towards Bern where it is made with boiled potatoes instead. This is where it took the name Rösti. There are many variants in Switzerland and outside the borders. This culinary specialty gives its name to the röstigraben, which designates the cultural differences between the German- and French-speaking parts of the country.</p>
         ` as Markup,
         },
       },

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx b/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx
@@ -19,28 +19,25 @@ const unorderedItems: Plugin<[], Element> = () => (tree) => {
 
 const accordionTheme: CustomFlowbiteTheme['accordion'] = {
   root: {
-    base: 'mt-10 divide-y divide-gray-200 border-gray-200 dark:divide-gray-700 dark:border-gray-700',
+    base: 'mt-10 divide-y divide-gray-200 border-gray-200',
     flush: {
       off: 'last:border-0',
       on: 'last:border-0',
     },
   },
   content: {
-    base: 'pb-5 pt-5 text-base font-light text-gray-500 dark:bg-gray-900 dark:text-gray-100',
+    base: 'pb-5 pt-5 text-base font-light text-gray-500',
   },
   title: {
-    arrow: {
-      base: 'h-0 w-0',
-    },
-    base: 'flex w-full items-center justify-between p-4 pl-1 text-left font-normal text-lg text-gray-500 dark:text-gray-400',
+    base: 'flex w-full items-center justify-between p-4 pl-1 text-left font-normal text-lg text-gray-500',
     flush: {
-      off: 'hover:bg-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-800',
-      on: 'bg-transparent dark:bg-transparent',
+      off: 'hover:bg-gray-100',
+      on: 'bg-transparent',
     },
     heading: '',
     open: {
       off: '',
-      on: 'text-gray-900 dark:text-gray-100',
+      on: 'text-gray-900',
     },
   },
 };
@@ -54,7 +51,7 @@ const theme: CustomFlowbiteTheme = {
 export function BlockAccordion(props: BlockAccordionFragment) {
   return (
     <Flowbite theme={{ theme }}>
-      <Accordion>
+      <Accordion collapseAll>
         {props.items.map((item, index) => (
           <Accordion.Panel key={index}>
             <Accordion.Title>