Merge pull request #32 from contentstack/preprod

TSOND-584 | Update SDK, Bug fixes and CMS content changes
contentstack · Dec 11, 2024 · e798bf1 · e798bf1
2 parents 2d932d5 + e4a1cc9
commit e798bf1
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 176 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -135,10 +135,10 @@ body {
   --removed-item-color: rgba(255, 0, 0);
 }
 
-picture .cs-compare__void--added, img.cs-compare__void--added {
+picture .cs-compare__void--added, img.cs-compare__void--added, video.cs-compare__void--added {
   border: 3px solid var(--added-item-color);
 }
 
-picture .cs-compare__void--removed, img.cs-compare__void--removed {
+picture .cs-compare__void--removed, img.cs-compare__void--removed, video.cs-compare__void--removed {
   border: 3px solid var(--removed-item-color);
 }
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -1,7 +1,7 @@
 'use client'
 /* eslint-disable @next/next/no-img-element */
 import { Fragment, useEffect, useState } from 'react'
-import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'
+import { Dialog, DialogPanel, Disclosure, Popover, PopoverBackdrop, PopoverButton, PopoverGroup, PopoverPanel, Transition } from '@headlessui/react'
 import {
     Bars3Icon,
     ChevronRightIcon,
@@ -135,19 +135,19 @@ function Header (props: App.Header) {
                 </div>
 
                 {/* DESKTOP MENU */}
-                <Popover.Group className='hidden lg:flex lg:gap-x-12'>
+                <PopoverGroup className='hidden lg:flex lg:gap-x-12'>
                     {items?.map((item, itemInd) => (
                         item?.mega_menu?.length ? <Popover key={item.text} data-id={`navItem-${itemInd}`} className='flex'>
-                            <Popover.Button
+                            <PopoverButton
                                 className='flex items-center gap-x-1 text-m font-semibold leading-6 text-gray-900 outline-none'
                             >
                                 <span
                                     className='flex items-center gap-x-1π'
                                 >
                                     {item.text}<ChevronDownIcon className='h-5 w-5 flex-none text-gray-900  ui-open:transform ui-open:rotate-180' aria-hidden='true' />
                                 </span>
-                            </Popover.Button>
-
+                            </PopoverButton>
+                            <PopoverBackdrop className='fixed inset-0 bg-transparent -z-20' />
                             <Transition
                                 as={Fragment}
                                 enter='transition ease-out duration-200'
@@ -157,7 +157,7 @@ function Header (props: App.Header) {
                                 leaveFrom='opacity-100 translate-y-0'
                                 leaveTo='opacity-0 -translate-y-1'
                             >
-                                <Popover.Panel
+                                <PopoverPanel
                                     className='absolute inset-x-0 top-0 -z-10 bg-white pt-14 shadow-lg ring-1 ring-gray-900/5 opacity-100 translate-y-0'
                                 >
                                     {item?.mega_menu?.[0]?.sections?.[0]?.links?.length && <div className='px-8'>
@@ -201,7 +201,7 @@ function Header (props: App.Header) {
                                         </Carousel>
                                     </div>}
                                     {item?.mega_menu?.[0]?.cta_group?.[0] && CTAGroup(item.mega_menu[0].cta_group[0])}
-                                </Popover.Panel>
+                                </PopoverPanel>
                             </Transition>
                         </Popover> : <>
                             {item?.link?.[0]?.url && <span {...item?.$?.link} className='flex items-center gap-x-1 text-m font-semibold leading-6 text-gray-900'><Link
@@ -215,13 +215,13 @@ function Header (props: App.Header) {
                     <LanguageSelector
                         locales={locales}
                     />
-                </Popover.Group>
+                </PopoverGroup>
             </nav>
 
             {/* MOBILE MENU */}
             <Dialog as='div' className='lg:hidden' open={mobileMenuOpen} onClose={setMobileMenuOpen}>
                 <div className='fixed inset-0 z-50' />
-                <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
+                <DialogPanel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
                     <div className='flex items-center justify-between'>
                         <div className='flex lg:flex-1'>
                             {logo?.url && <Link url='/' className='-m-1.5 ml-1.5 p-1.5'>
@@ -344,7 +344,7 @@ function Header (props: App.Header) {
                             </div>
                         </div>
                     </div>
-                </Dialog.Panel>
+                </DialogPanel>
             </Dialog>
         </header>
     )

diff --git a/components/LanguageSelector/LanguageSelector.tsx b/components/LanguageSelector/LanguageSelector.tsx
@@ -2,7 +2,7 @@
 
 import { Fragment, FunctionComponent, useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import _ from 'lodash'
 
@@ -41,7 +41,7 @@ const LanguageSelector: FunctionComponent<App.LangaugeSelector> = (props: App.La
             const flagCode = getFlagCode(locale?.code)
 
             return (
-                <Menu.Item
+                <MenuItem
                 >
                     <a
                         className={classNames(
@@ -56,7 +56,7 @@ const LanguageSelector: FunctionComponent<App.LangaugeSelector> = (props: App.La
                             {locale?.name}
                         </span>
                     </a>
-                </Menu.Item>
+                </MenuItem>
             )
 
         })
@@ -77,12 +77,12 @@ const LanguageSelector: FunctionComponent<App.LangaugeSelector> = (props: App.La
             className='relative inline-block text-left'
         >
             <div>
-                <Menu.Button 
+                <MenuButton
                     className={`inline-flex w-full justify-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold text-gray-900 hover:bg-gray-50 border border-transparent hover:border-gray-300 ${(!Opac) ? 'bg-opacity-100' : 'bg-opacity-20'}`}
                 >
                     <span className={`fi fi-${(currentLocale === 'en') ? 'us' : currentLocale} mt-1`}></span>
                     <ChevronDownIcon className='h-5 w-5 flex-none text-gray-900  ui-open:transform ui-open:rotate-180' aria-hidden='true' />
-                </Menu.Button>
+                </MenuButton>
             </div>
 
             <Transition
@@ -94,11 +94,11 @@ const LanguageSelector: FunctionComponent<App.LangaugeSelector> = (props: App.La
                 leaveFrom='transform opacity-100 scale-100'
                 leaveTo='transform opacity-0 scale-95'
             >
-                <Menu.Items className='absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'>
+                <MenuItems className='absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'>
                     {
                         renderDropdownOptions()
                     }
-                </Menu.Items>
+                </MenuItems>
             </Transition>
         </Menu>
     )

diff --git a/components/RenderComponents/index.tsx b/components/RenderComponents/index.tsx
@@ -2,7 +2,7 @@ import { CardCollection, FeaturedArticles, Teaser, Text, TextAndImage } from '@/
 import { Page } from '@/types'
 import { pageBlocks } from '@/types/pages'
 import { isDataInLiveEdit } from '@/utils'
-
+import { VB_EmptyBlockParentClass } from '@contentstack/live-preview-utils'
 
 function RenderComponents ({ components, featured_articles, $, isABEnabled = false }: Page.pageRenderProps) {
 
@@ -59,11 +59,11 @@ function RenderComponents ({ components, featured_articles, $, isABEnabled = fal
     return (
         <div>
             <div {...((isDataInLiveEdit() && $?.components) || {})} //Parent wrapper
-                className={components?.length ? undefined : 'visual-builder__empty-block-parent max-height mt-32'}
+                className={components?.length ? undefined : `${VB_EmptyBlockParentClass} max-height mt-32`}
             >
                 {components?.map((component, key: number) => <div
                     key={`component-${key}`} id={`component-${key}`}
-                    {...(isDataInLiveEdit() && $?.['components__' + key])}
+                    {...(isDataInLiveEdit() && $?.[`components__${key}`])}
                 >
                     {
                         componentMapper(component, key)

diff --git a/components/Teaser/Teaser.tsx b/components/Teaser/Teaser.tsx
@@ -53,7 +53,7 @@ const Teaser: React.FC<TeaserProps> = (props: TeaserProps) => {
     return (
         <div
             id={id}
-            className={'teaser-container relative bg-cover bg-no-repeat'}
+            className={'teaser-container relative bg-cover bg-no-repeat mb-24'}
         >
             <div className='absolute inset-0 overflow-hidden'>
                 {!image?.[0]?.image?.url && video?.video?.url