Merge branch 'release/0.18.11'

Author: troychaplin

CHANGELOG.mdx

@@ -17,6 +17,20 @@ Prefix the change with one of these keywords:
 
 ## [Unreleased]
 
+##[0.18.11]
+
+### Added
+
+- Custom Slider
+
+### Fixed
+
+- Figure component to display the image size for retina display
+
+### Changed
+
+- Refactored Full Banner to remove bg image, position and improve mobile experience
+
 ##[0.18.10]
 
 ### Changed
@@ -135,6 +149,10 @@ Prefix the change with one of these keywords:
 - Accordion Content style by removing extra padding in mobile screen
 - Margin classes for the PageHeader with and without children
 
+### Fixed
+
+- Form auto suggest menu, options style
+
 ### Refactored
 
 - ImageGrid block to use aspect ratio and bg images

lib/components/Figure/Figure.tsx

@@ -28,7 +28,7 @@ export const FigureWrapper = ({
   return (
     <figure className={`cu-figure cu-component ${hideMobile}`}>
       <div
-        className={`not-prose overflow-hidden bg-white shadow-lg ${figureSizeClasses[size]} ${borderRadiusClasses[rounded]} ${figureAlignClasses[align]}`}
+        className={`not-prose overflow-hidden bg-white shadow-lg w-full ${figureSizeClasses[size]} ${borderRadiusClasses[rounded]} ${figureAlignClasses[align]}`}
       >
         {children}
         {caption && <figcaption className="px-5 py-4 text-base italic text-cu-black-700">{caption}</figcaption>}

lib/components/Form/AutoSuggest/styles.css

@@ -20,3 +20,11 @@
 .cu-autosuggest .css-19bb58m {
   @apply m-0 py-0;
 }
+
+.cu-autosuggest .css-1nmdiq5-menu {
+  @apply rounded-lg overflow-hidden;
+}
+
+.cu-autosuggest .css-10wo9uf-option {
+  @apply text-base;
+}

lib/components/FullBanner/FullBanner.stories.tsx

@@ -24,9 +24,7 @@ export const Primary: Story = {
     title: 'The nostalgia is real.',
     headerType: 'h1',
     image: 'https://picsum.photos/id/20/1600/700',
-    opacity: 70,
-    focalPointX: 50,
-    focalPointY: 50,
+    opacity: 80,
     justify: 'start',
   },
   render: (args) => {
@@ -36,7 +34,7 @@ export const Primary: Story = {
           The launch of the iPod revolutionized how the world consumes music on the move! The launch of the iPod
           revolutionized how the world consumes music on the move!
         </p>
-        <ButtonGroup>
+        <ButtonGroup align={args.justify}>
           <Button title="Apply Now" />
           <Button color="grey" title="Request Information" />
         </ButtonGroup>

lib/components/FullBanner/FullBanner.tsx

@@ -1,67 +1,48 @@
+import { justifyContentClasses, bgOpacityClasses } from '../../utils/propClasses'
 import { PageHeader } from '../PageHeader/PageHeader'
-import { justifyContentClasses } from '../../utils/propClasses'
 
 type justifyContentKeys = keyof typeof justifyContentClasses
-
-const opacityValues = Array.from({ length: 21 }, (_, index) => 60 + index)
+type bgOpacityKeys = keyof typeof bgOpacityClasses
 
 export interface FullBannerProps {
   children?: React.ReactNode
   as?: 'section' | 'div'
   title: string
   headerType?: 'h1' | 'h2'
   image?: string
-  focalPointX?: number
-  focalPointY?: number
   justify?: justifyContentKeys
-  opacity?: (typeof opacityValues)[number]
+  opacity?: bgOpacityKeys
 }
 
-// Used in WideImage, make a helper function when moving this component into RDS
-const getBackgroundImageStyles = (image: string = '', focalPointX: number, focalPointY: number) => ({
-  backgroundImage: `url(${image})`,
-  backgroundPosition: `${focalPointX}% ${focalPointY}%`,
-})
-
 export const FullBanner = ({
   children,
   as = 'section',
   title,
   headerType = 'h1',
   image,
-  focalPointX = 50,
-  focalPointY = 50,
   opacity = 70,
   justify = 'start',
 }: FullBannerProps) => {
-  if (!opacityValues.includes(opacity)) {
-    console.warn(`Invalid opacity value: ${opacity}. It should be one of ${opacityValues.join(', ')}.`)
-  }
-
   const FullBannerComponent = as
-  const inlineStyle = getBackgroundImageStyles(image, focalPointX, focalPointY)
-  const opacityStyle = {
-    opacity: `0.${opacity}`,
-  }
-  const contentAlign = justify === 'center' ? 'text-center [&>*]:justify-center' : ''
 
   return (
     <FullBannerComponent
-      className={`cu-fullbanner cu-fullbanner--${justify} cu-component cu-no-browsers-edge cu-prose cu-prose-light not-contained overflow-hidden bg-cu-black-200 bg-cover mb-6 pt-80 pb-0 md:pt-48 md:pb-12 lg:pt-64 lg:pb-24 xl:pt-96 xl:pb-36 px-0 md:px-10`}
-      style={inlineStyle}
+      className={`cu-fullbanner cu-component bg-cu-black-900 relative cu-no-browsers-edge not-prose not-contained`}
     >
-      <div className="mx-auto max-w-screen-2xl">
-        <div className={`flex ${justifyContentClasses[justify]}`}>
+      {image && (
+        <div className="relative">
+          <img src={image} className="rounded-none w-full h-auto" />
+        </div>
+      )}
+
+      <div className="lg:absolute lg:bottom-8 w-full px-8 lg:px-10">
+        <div className={`max-w-screen-2xl mx-auto flex ${justifyContentClasses[justify]}`}>
           <div
-            className={`relative overflow-hidden min-w-[420px] md:max-w-xl lg:max-w-2xl xl:max-w-3xl md:rounded-lg ${contentAlign}`}
+            className={`w-full lg:max-w-2xl bg-cu-black-900 ${bgOpacityClasses[opacity]} lg:px-8 pt-3 pb-5 lg:pt-6 lg:pb-8 rounded-lg text-white`}
           >
-            <div className="relative z-10 px-5 md:px-8 pt-3 pb-5 md:pt-6 md:pb-8">
-              <PageHeader header={title} as={headerType} size={headerType === 'h1' ? 'md' : 'sm'} noUnderline isWhite>
-                {children}
-              </PageHeader>
-            </div>
-
-            <div className="absolute top-0 left-0 w-full h-full bg-black" style={opacityStyle}></div>
+            <PageHeader header={title} as={headerType} size={headerType === 'h1' ? 'md' : 'sm'} noUnderline isWhite>
+              {children}
+            </PageHeader>
           </div>
         </div>
       </div>

lib/components/FullBanner/styles.css

@@ -1,3 +1,7 @@
+.cu-fullbanner--content > * {
+  @apply z-50 relative;
+}
+
 /* Top spacing when first block */
 
 main.cu-main > .cu-fullbanner:first-of-type,
@@ -16,23 +20,11 @@ section.cu-section > .cu-fullbanner:first-of-type {
 }
 
 .cu-fullbanner .cu-pageheader p {
-  @apply leading-7 md:leading-8 mt-0;
+  @apply md:text-xl;
 }
 
 /* Justification */
 
-.cu-fullbanner--center {
+.cu-fullbanner .justify-center {
   @apply text-center;
 }
-
-.cu-fullbanner--center .cu-buttongroup {
-  @apply justify-center;
-}
-
-.cu-fullbanner--end {
-  @apply text-right justify-end;
-}
-
-.cu-fullbanner--end .cu-buttongroup {
-  @apply justify-end;
-}

lib/components/ImageSlider/Image.tsx

@@ -0,0 +1,49 @@
+import { aspectRatioClasses } from '../../utils/propClasses'
+import { useLinkContext } from '../LinkProvider/useLinkContext'
+
+type aspectRatioKeys = keyof typeof aspectRatioClasses
+
+export interface ImageProps {
+  imageUrl: string
+  focalPointX?: number
+  focalPointY?: number
+  title?: string
+  link?: string
+  aspectRatio?: aspectRatioKeys
+}
+
+export const Image = ({
+  imageUrl,
+  focalPointX = 50,
+  focalPointY = 50,
+  title,
+  link,
+  aspectRatio = 'landscape',
+}: ImageProps) => {
+  const LinkComponent = useLinkContext()
+  const inlineImageStyles = {
+    backgroundImage: `url(${imageUrl})`,
+    backgroundPosition: `${focalPointX}% ${focalPointY}%`,
+  }
+
+  return (
+    <div
+      className={`relative ${aspectRatioClasses[aspectRatio]} bg-cover bg-center rounded-lg bg-black w-full h-full transition-[width] duration-[5000] ease-in-out`}
+      style={inlineImageStyles}
+    >
+      {title && (
+        <div
+          className={`bg-black/75 text-white absolute bottom-2 left-2 right-2 px-4 py-2.5 rounded-md ${link ? 'hover:bg-cu-red/85' : ''}`}
+        >
+          {link ? (
+            <LinkComponent href={link} className="cursor-pointer block hover-bg-cu-red">
+              <p className="text-sm md:text-base font-semibold line-clamp-2">{title}</p>
+            </LinkComponent>
+          ) : (
+            <p className="text-sm md:text-base font-semibold line-clamp-2">{title}</p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

lib/components/ImageSlider/ImageSlider.stories.tsx

@@ -19,29 +19,27 @@ type Story = StoryObj<typeof ImageSlider>
 
 export const Primary: Story = {
   args: {
-    customClass: 'slider',
+    slidesPerViewDesktop: 3,
+    slidesPerViewTablet: 2,
     slidesPerViewMobile: 1,
-    slidesPerViewTablet: 3,
-    slidesPerViewDesktop: 4,
-    loop: true,
-    speed: 1000,
   },
   render: (args) => {
     return (
       <ImageSlider {...args}>
         {sliderData.map((image, index) => {
           const { image: imageUrl, title, link, focalPointX, focalPointY, aspectRatio } = image
           return (
-            <ImageSlider.Item
-              key={index}
-              imageUrl={imageUrl}
-              title={title}
-              link={link}
-              focalPointX={focalPointX}
-              focalPointY={focalPointY}
-              aspectRatio={aspectRatio}
-              className={index == 0 ? `swiper-slide-active` : ``}
-            />
+            <ImageSlider.Slide key={index}>
+              <ImageSlider.Image
+                key={index}
+                imageUrl={imageUrl}
+                title={title}
+                link={link}
+                focalPointX={focalPointX}
+                focalPointY={focalPointY}
+                aspectRatio={aspectRatio}
+              />
+            </ImageSlider.Slide>
           )
         })}
       </ImageSlider>

lib/components/ImageSlider/ImageSlider.tsx

@@ -1,56 +1,58 @@
 import { useEffect } from 'react'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid'
-import { ImageSliderItem } from './ImageSliderItem'
-import SwiperSlider from './script'
+import { Slide } from './Slide'
+import { Image } from './Image'
+import SliderScript from './script.ts'
 
 export interface ImageSliderProp {
   children: React.ReactNode
-  loop?: boolean
-  speed?: number
-  slidesPerViewMobile?: number
-  slidesPerViewTablet?: number
   slidesPerViewDesktop: number
-  customClass?: string
+  slidesPerViewTablet?: number
+  slidesPerViewMobile?: number
 }
 
 export const ImageSliderWrapper = ({
   children,
-  loop = false,
-  speed = 500,
-  slidesPerViewMobile = 1,
-  slidesPerViewTablet = 2,
-  slidesPerViewDesktop = 3,
-  customClass,
+  slidesPerViewDesktop,
+  slidesPerViewTablet,
+  slidesPerViewMobile,
 }: ImageSliderProp) => {
   useEffect(() => {
-    SwiperSlider()
-  }, [])
+    SliderScript()
+  })
+
+  const arrowButtons = `bg-cu-black-50 text-cu-black-800 hover:bg-cu-red hover:text-white hover:bg-cu-red relative flex items-center justify-center rounded-md h-8 w-8 z-50`
+  const arrowIcons = `w-5 h-5 [&>path]:stroke-[2]`
 
   return (
     <div
-      className={`swiper swiper--slider ${customClass ? customClass : ''}`}
-      data-swiper-class={`${customClass ? customClass : 'swiper'}`}
-      data-swiper-loop={loop}
-      data-swiper-speed={speed}
-      data-swiper-perview-mobile={slidesPerViewMobile}
-      data-swiper-perview-tablet={slidesPerViewTablet}
-      data-swiper-perview-desktop={slidesPerViewDesktop}
+      className="slider overflow-hidden"
+      data-slides-desktop={slidesPerViewDesktop}
+      data-slides-tablet={slidesPerViewTablet}
+      data-slides-mobile={slidesPerViewMobile}
     >
-      <div className="swiper-wrapper">{children}</div>
-      <div className="swiper__footer">
-        <button type="button" className="swiper__button swiper__button--prev" aria-label="Previous slide">
-          <ChevronLeftIcon className="w-8 h-8 [&>path]:stroke-[2]" aria-hidden="true" />
+      {/* Slider Slides */}
+      <div className="slider__wrap flex align-items-center">{children}</div>
+
+      {/* Slider Arrow */}
+      <div className="flex align-items-center gap-3 justify-center mt-4">
+        <button className={`slider__arrow slider__arrow--prev ${arrowButtons}`}>
+          <span className="sr-only">Go to Previous Slide</span>
+          <ChevronLeftIcon className={arrowIcons} aria-hidden="true" />
         </button>
-        <button type="button" className="swiper__button swiper__button--next" aria-label="Next slide">
-          <ChevronRightIcon className="w-8 h-8 [&>path]:stroke-[2]" aria-hidden="true" />
+
+        <button className={`slider__arrow slider__arrow--next ${arrowButtons}`}>
+          <span className="sr-only">Go to Next Slide</span>
+          <ChevronRightIcon className={arrowIcons} aria-hidden="true" />
         </button>
       </div>
     </div>
   )
 }
 
 export const ImageSlider = Object.assign(ImageSliderWrapper, {
-  Item: ImageSliderItem,
+  Slide: Slide,
+  Image: Image,
 })
 
 ImageSliderWrapper.displayName = 'ImageSlider'