Merge pull request #248 from AmazeeLabs/SLB-287-background-image-cards

SLB-287: Background image cards - DEV
AmazeeLabs · May 21, 2024 · 4de9aed · 4de9aed
2 parents fb306dd + aef7de3
commit 4de9aed
Show file tree

Hide file tree

Showing 12 changed files with 300 additions and 163 deletions.
diff --git a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
@@ -7,8 +7,8 @@ _meta:
   depends:
     3a0fe860-a6d6-428a-9474-365bd57509aa: media
     478c4289-961d-4ce8-85d6-578ae05f3019: media
-    72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media
     5dfc1856-e9e4-4f02-9cd6-9d888870ce1a: media
+    72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media
 default:
   revision_uid:
     - target_id: 1
@@ -95,7 +95,7 @@ default:
         <!-- /wp:quote -->
 
         <!-- wp:custom/image-teasers -->
-        <!-- wp:custom/image-teaser {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"title":"Teaser 1","ctaUrl":"https://google.com","ctaText":"Foo"} /-->
+        <!-- wp:custom/image-teaser {"mediaEntityIds":["5dfc1856-e9e4-4f02-9cd6-9d888870ce1a"],"title":"Teaser 1","ctaUrl":"https://google.com","ctaText":"Foo"} /-->
 
         <!-- wp:custom/image-teaser {"mediaEntityIds":["72187a1f-3e48-4b45-a9b7-189c6fd7ee26"],"title":"Teaser 2","ctaUrl":"https://google.com","ctaText":"Bar"} /-->
         <!-- /wp:custom/image-teasers -->

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -40,11 +40,10 @@
   "dependencies": {
     "@amazeelabs/silverback-iframe": "^1.3.0",
     "@custom/schema": "workspace:*",
-    "@headlessui/react": "^1.7.17",
+    "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.1",
     "@hookform/resolvers": "^3.3.3",
     "clsx": "^2.1.0",
-    "flowbite-react": "^0.9.0",
     "framer-motion": "^10.17.4",
     "hast-util-is-element": "^2.1.3",
     "hast-util-select": "^5.0.5",

diff --git a/packages/ui/src/components/Client/DesktopMenu.tsx b/packages/ui/src/components/Client/DesktopMenu.tsx
@@ -1,5 +1,14 @@
 'use client';
-import { Disclosure, Popover, Transition } from '@headlessui/react';
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Popover,
+  PopoverButton,
+  PopoverGroup,
+  PopoverPanel,
+  Transition,
+} from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
@@ -8,9 +17,9 @@ import { avoidFocusOnClick } from '../../utils/avoidFocusOnClick';
 
 export function DesktopMenu({ children }: PropsWithChildren<{}>) {
   return (
-    <Popover.Group className="hidden lg:flex lg:gap-x-12">
+    <PopoverGroup className="hidden lg:flex lg:gap-x-12">
       {children}
-    </Popover.Group>
+    </PopoverGroup>
   );
 }
 
@@ -21,8 +30,8 @@ export function DesktopMenuDropDown({
   return (
     <Popover className="relative">
       {({ open }) => (
-        <React.Fragment>
-          <Popover.Button
+        <>
+          <PopoverButton
             className={clsx(
               'flex items-center text-base font-medium ml-8 hover:text-blue-600',
               open ? 'text-blue-600' : 'text-gray-600',
@@ -37,7 +46,7 @@ export function DesktopMenuDropDown({
               )}
               aria-hidden="true"
             />
-          </Popover.Button>
+          </PopoverButton>
           <Transition
             as={React.Fragment}
             enter="transition ease-out duration-200"
@@ -47,14 +56,11 @@ export function DesktopMenuDropDown({
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Popover.Panel
-              static
-              className="absolute left-8 top-full z-10 mt-3 w-56 rounded bg-white shadow-md ring-1 ring-gray-100"
-            >
+            <PopoverPanel className="absolute left-8 top-full z-10 mt-3 w-56 rounded bg-white shadow-md ring-1 ring-gray-100">
               {children}
-            </Popover.Panel>
+            </PopoverPanel>
           </Transition>
-        </React.Fragment>
+        </>
       )}
     </Popover>
   );
@@ -68,7 +74,7 @@ export function DesktopMenuDropdownDisclosure({
     <Disclosure as="div" className="">
       {({ open }) => (
         <div className={clsx('m-1.5 rounded', open && 'bg-gray-100')}>
-          <Disclosure.Button
+          <DisclosureButton
             className={clsx(
               'flex w-full items-center justify-between px-2 py-1 text-sm leading-[1.25rem] hover:text-blue-600',
               open ? 'text-blue-600 font-medium' : 'text-gray-500',
@@ -81,8 +87,8 @@ export function DesktopMenuDropdownDisclosure({
               })}
               aria-hidden="true"
             />
-          </Disclosure.Button>
-          <Disclosure.Panel className="">{children}</Disclosure.Panel>
+          </DisclosureButton>
+          <DisclosurePanel className="">{children}</DisclosurePanel>
         </div>
       )}
     </Disclosure>

diff --git a/packages/ui/src/components/Client/MobileMenu.tsx b/packages/ui/src/components/Client/MobileMenu.tsx
@@ -1,5 +1,11 @@
 'use client';
-import { Dialog, Disclosure } from '@headlessui/react';
+import {
+  Dialog,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import clsx from 'clsx';
 import React, { createContext, PropsWithChildren } from 'react';
@@ -11,7 +17,7 @@ const MobileMenuContext = createContext({
   setIsOpen: (isOpen: boolean) => {},
 });
 
-export function MobileMenuProvider({ children }: PropsWithChildren) {
+export function MobileMenuProvider({ children }: PropsWithChildren<{}>) {
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
@@ -42,14 +48,15 @@ export function MobileMenuButton(
     </button>
   );
 }
+
 export function MobileMenu({ children }: PropsWithChildren<{}>) {
   const { isOpen, setIsOpen } = React.useContext(MobileMenuContext);
   return (
     <Dialog as="div" className="lg:hidden" open={isOpen} onClose={setIsOpen}>
       <div className="fixed inset-0 z-10" />
-      <Dialog.Panel className="fixed border-t border-t-solid border-t-blue-100 top-[5.75rem] inset-y-0 right-0 w-full overflow-y-auto bg-white py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 z-20">
+      <DialogPanel className="fixed border-t border-t-blue-100 top-[5.75rem] inset-y-0 right-0 w-full overflow-y-auto bg-white py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 z-20">
         {children}
-      </Dialog.Panel>
+      </DialogPanel>
     </Dialog>
   );
 }
@@ -62,13 +69,13 @@ export function MobileMenuLink({
   title: string;
 }) {
   return (
-    <Disclosure.Button
+    <DisclosureButton
       as="a"
       href={href}
       className="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50"
     >
       {title}
-    </Disclosure.Button>
+    </DisclosureButton>
   );
 }
 
@@ -86,15 +93,13 @@ export function MobileMenuDropdown({
             open && nestLevel === 2 && 'bg-gray-100 rounded mx-8',
           )}
         >
-          <Disclosure.Button
+          <DisclosureButton
             className={clsx(
               'flex w-full items-center justify-between py-4 leading-[1.25rem]',
               open && 'text-blue-600',
               !open && 'text-gray-600',
               open && nestLevel === 1 && 'bg-blue-100',
-              !open &&
-                nestLevel === 1 &&
-                'border-b border-b-solid border-b-blue-100',
+              !open && nestLevel === 1 && 'border-b border-b-blue-100',
               nestLevel === 1 && 'px-8 text-lg',
               !open && nestLevel === 2 && 'px-10',
               open && nestLevel === 2 && 'px-2',
@@ -107,8 +112,8 @@ export function MobileMenuDropdown({
               })}
               aria-hidden="true"
             />
-          </Disclosure.Button>
-          <Disclosure.Panel className="">{children}</Disclosure.Panel>
+          </DisclosureButton>
+          <DisclosurePanel className="">{children}</DisclosurePanel>
         </div>
       )}
     </Disclosure>

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx b/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx
@@ -1,11 +1,18 @@
+'use client';
 import { BlockAccordionFragment, Html } from '@custom/schema';
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/react';
 import {
   ArrowRightCircleIcon,
   CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
   QuestionMarkCircleIcon,
 } from '@heroicons/react/20/solid';
 import clsx from 'clsx';
-import { Accordion, CustomFlowbiteTheme, Flowbite } from 'flowbite-react';
 import type { Element } from 'hast';
 import { selectAll } from 'hast-util-select';
 import React, { PropsWithChildren } from 'react';
@@ -17,53 +24,39 @@ const unorderedItems: Plugin<[], Element> = () => (tree) => {
   });
 };
 
-const accordionTheme: CustomFlowbiteTheme['accordion'] = {
-  root: {
-    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-normal text-gray-500',
-  },
-  title: {
-    base: 'flex w-full items-center justify-between p-4 pl-1 text-left font-medium text-lg text-gray-500',
-    flush: {
-      off: 'hover:bg-gray-100',
-      on: 'bg-transparent',
-    },
-    heading: '',
-    open: {
-      off: '',
-      on: 'text-gray-900',
-    },
-  },
-};
-
-// Applying the custom theme to the Accordion component
-// doesn't work out, wrapping it in a Flowbite component.
-const theme: CustomFlowbiteTheme = {
-  accordion: accordionTheme,
-};
-
 export function BlockAccordion(props: BlockAccordionFragment) {
   return (
-    <div className="container-page">
+    <div className="container-page my-10">
       <div className="container-content">
         <div className="container-text">
-          <Flowbite theme={{ theme }}>
-            <Accordion collapseAll>
-              {props.items.map((item, index) => (
-                <Accordion.Panel key={index}>
-                  <Accordion.Title>
+          {props.items.map((item, index) => (
+            <Disclosure key={index}>
+              {({ open }) => (
+                <>
+                  <DisclosureButton
+                    className={clsx(
+                      'border-b border-gray-200 last:border-0 flex w-full items-center justify-between p-4 pl-1 text-left font-medium text-lg hover:bg-gray-100',
+                      { 'text-black': open, 'text-gray-500': !open },
+                    )}
+                  >
                     <span className="flex items-center">
                       {item.icon && <AccordionIcon icon={item.icon} />}{' '}
                       {item.title}
                     </span>
-                  </Accordion.Title>
-                  <Accordion.Content className="space-y-2">
+                    <span>
+                      {open ? (
+                        <ChevronUpIcon className={'h-6 w-6'} />
+                      ) : (
+                        <ChevronDownIcon className={'h-6 w-6'} />
+                      )}
+                    </span>
+                  </DisclosureButton>
+                  <DisclosurePanel
+                    className={clsx(
+                      'py-5 text-base font-normal text-gray-500',
+                      { 'border-b border-gray-200 last:border-0': open },
+                    )}
+                  >
                     <div className="sm:w-full md:w-4/5">
                       {item.textContent?.markup && (
                         <Html
@@ -94,11 +87,11 @@ export function BlockAccordion(props: BlockAccordionFragment) {
                         />
                       )}
                     </div>
-                  </Accordion.Content>
-                </Accordion.Panel>
-              ))}
-            </Accordion>
-          </Flowbite>
+                  </DisclosurePanel>
+                </>
+              )}
+            </Disclosure>
+          ))}
         </div>
       </div>
     </div>

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.stories.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.stories.tsx
@@ -0,0 +1,36 @@
+import { Url } from '@custom/schema';
+import Landscape from '@stories/landscape.jpg?as=metadata';
+import Portrait from '@stories/portrait.jpg?as=metadata';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { image } from '../../../helpers/image';
+import { BlockImageTeasers } from './BlockImageTeasers';
+
+export default {
+  component: BlockImageTeasers,
+} satisfies Meta<typeof BlockImageTeasers>;
+
+export const Default = {
+  args: {
+    teasers: [
+      {
+        title: 'Title',
+        ctaText: 'Call to action',
+        ctaUrl: '/test' as Url,
+        image: {
+          source: image(Landscape),
+          alt: 'Alt text',
+        },
+      },
+      {
+        title: 'Title',
+        ctaText: 'Call to action',
+        ctaUrl: '/test' as Url,
+        image: {
+          source: image(Portrait),
+          alt: 'Alt text',
+        },
+      },
+    ],
+  },
+} satisfies StoryObj<typeof BlockImageTeasers>;