Merge pull request #293 from cuweb/feature/WSDEV-4150-text-image

Feature/wsdev 4150 text image
cuweb · Apr 6, 2024 · a1fcfb2 · a1fcfb2
2 parents 14ada36 + 34389cb
commit a1fcfb2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 155 deletions.
diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx
@@ -24,6 +24,7 @@ Prefix the change with one of these keywords:
 - Page Header: added isCenter prop
 - Page Header: character limit on content prop
 - Stat Card: character limit on stat and desc props
+- Text and Image: character limit on content
 
 ### Changed
 
@@ -42,11 +43,13 @@ Prefix the change with one of these keywords:
 - Icon Cards: fixed width and height for icons inside container
 - Pagination: active text changed to red
 - Nav: space between logo and site title
+- Text and Image: header always has underline
 - Wide Image: opacity range set at 60-80
 
 ### Deprecated
 
 - Heading: is being replaced by PageHeader
+- Text and Image: removed image angle options
 
 ### Fixed
 

diff --git a/lib/components/TextImage/TextImage.stories.tsx b/lib/components/TextImage/TextImage.stories.tsx
@@ -1,6 +1,9 @@
+import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
+import { PageHeaders } from '../PageHeaders/PageHeaders'
 import { TextImage } from './TextImage'
 import { Button } from '../Button/Button'
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
 
 const meta: Meta<typeof TextImage> = {
   title: 'Components/Text Image',
@@ -77,98 +80,6 @@ export const ImageLeft: Story = {
   ),
 }
 
-export const ImageAngle: Story = {
-  render: () => (
-    <TextImage maxWidth="7xl" hasBorder>
-      <TextImage.Content
-        title="Website and Application Development"
-        imageUrl="https://picsum.photos/400/266"
-        imageZoom={50}
-        angle="left"
-        hasMobileImage
-      >
-        <p>
-          Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-          reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-          in. Praesent quis ligula quis nulla malesuada tempor.
-        </p>
-        <div className="flex flex-wrap gap-4 mt-6 buttons md:gap-6 md:mt-10">
-          <Button title="Primary" />
-          <Button title="Secondary" color="grey" />
-        </div>
-      </TextImage.Content>
-    </TextImage>
-  ),
-}
-
-export const ImageAngleReverse: Story = {
-  render: () => (
-    <TextImage maxWidth="7xl" hasBorder flipX>
-      <TextImage.Content
-        title="Website and Application Development"
-        imageUrl="https://picsum.photos/400/266"
-        angle="left"
-        flipX
-      >
-        <p>
-          Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-          reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-          in. Praesent quis ligula quis nulla malesuada tempor.
-        </p>
-        <div className="flex flex-wrap gap-4 mt-6 buttons md:gap-6 md:mt-10">
-          <Button title="Primary" />
-          <Button title="Secondary" color="grey" />
-        </div>
-      </TextImage.Content>
-    </TextImage>
-  ),
-}
-
-export const ImageDualAngle: Story = {
-  render: () => (
-    <TextImage maxWidth="7xl" hasBorder>
-      <TextImage.Content
-        title="Website and Application Development"
-        imageUrl="https://picsum.photos/400/266"
-        angle="dual"
-      >
-        <p>
-          Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-          reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-          in. Praesent quis ligula quis nulla malesuada tempor.
-        </p>
-        <div className="flex flex-wrap gap-4 mt-6 buttons md:gap-6 md:mt-10">
-          <Button title="Primary" />
-          <Button title="Secondary" color="grey" />
-        </div>
-      </TextImage.Content>
-    </TextImage>
-  ),
-}
-
-export const ImageDualAngleReverse: Story = {
-  render: () => (
-    <TextImage maxWidth="7xl" hasBorder flipX>
-      <TextImage.Content
-        title="Website and Application Development"
-        imageUrl="https://picsum.photos/400/266"
-        angle="dual"
-        flipX
-      >
-        <p>
-          Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
-          reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus
-          in. Praesent quis ligula quis nulla malesuada tempor.
-        </p>
-        <div className="flex flex-wrap gap-4 mt-6 buttons md:gap-6 md:mt-10">
-          <Button title="Primary" />
-          <Button title="Secondary" color="grey" />
-        </div>
-      </TextImage.Content>
-    </TextImage>
-  ),
-}
-
 export const NoContent: Story = {
   render: () => (
     <TextImage>

diff --git a/lib/components/TextImage/TextImageContent.tsx b/lib/components/TextImage/TextImageContent.tsx
@@ -13,13 +13,30 @@ export interface TextImageMediaProps {
   imageUrl?: string
   contentWidth?: number
   imageZoom?: number
-  angle?: 'left' | 'dual' | 'none'
-  flipX?: boolean
   focalPointX?: string
   focalPointY?: string
   hasMobileImage?: boolean
 }
 
+// const isValidChild = (child: React.ReactNode): child is React.ReactElement => {
+//   if (React.isValidElement(child)) {
+//     // Check for <p>, <ol>, <ul> tags directly
+//     if (
+//       typeof child.type === 'string' &&
+//       (child.type.toLowerCase() === 'p' || child.type.toLowerCase() === 'ol' || child.type.toLowerCase() === 'ul')
+//     ) {
+//       return true
+//     }
+
+//     // Check for elements with specific classes
+//     const className: string = child.props.className || ''
+//     if (className.includes('cu-buttongroup') || className.includes('cu-button') || className.includes('buttons')) {
+//       return true
+//     }
+//   }
+//   return false
+// }
+
 export const TextImageContent = ({
   children,
   title,
@@ -28,19 +45,13 @@ export const TextImageContent = ({
   imageUrl,
   contentWidth = 50,
   imageZoom = 0,
-  angle,
-  flipX,
   focalPointX = '50',
   focalPointY = '50',
   hasMobileImage,
 }: TextImageContentProps & TextImageMediaProps) => {
-  // Spacing and alignment
   const contentPadding = imageUrl ? 'md:py-4' : ''
   const verticallyCenter = isCenter ? 'justify-center' : ''
 
-  // Header underline
-  const hasUnderline = children ? styles.underline : ''
-
   // Image options
   let hasImage
   let noImageOnMobile
@@ -64,57 +75,16 @@ export const TextImageContent = ({
     }
   }
 
-  // Image angle
-  let leftSvg = null
-  let rightSvg = null
-
-  switch (angle) {
-    case 'left':
-      leftSvg = (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className={flipX ? mediaStyles.svgFlipRight : mediaStyles.svgLeft}
-          fill="none"
-          viewBox="0 0 123 440"
-        >
-          <path
-            fill="#fff"
-            d="M0 440h6c-4.4 0-4.5-3-3.5-6C49.344 293.466 118.06 4.849 119 2.5c1-2.5 3-2.5 4-2.5H0v440Z"
-          />
-        </svg>
-      )
-      break
-    case 'dual':
-      leftSvg = (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className={flipX ? mediaStyles.svgFlipRight : mediaStyles.svgLeft}
-          fill="none"
-          viewBox="0 0 123 440"
-        >
-          <path
-            fill="#fff"
-            d="M0 440h6c-4.4 0-4.5-3-3.5-6C49.344 293.466 118.06 4.849 119 2.5c1-2.5 3-2.5 4-2.5H0v440Z"
-          />
-        </svg>
-      )
-      rightSvg = (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className={flipX ? mediaStyles.svgFlipLeft : mediaStyles.svgRight}
-          fill="none"
-          viewBox="0 0 123 440"
-        >
-          <path
-            fill="#fff"
-            d="M0 440h6c-4.4 0-4.5-3-3.5-6C49.344 293.466 118.06 4.849 119 2.5c1-2.5 3-2.5 4-2.5H0v440Z"
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
+  // const validatedChildren = React.Children.map(children, (child) => {
+  //   if (React.isValidElement(child) && isValidChild(child)) {
+  //     return child
+  //   } else {
+  //     console.warn(
+  //       'TextImageContent only accepts <p> tags or elements with "cu-button-group" or "cu-button" classes as children.',
+  //     )
+  //     return null
+  //   }
+  // })
 
   return (
     <>
@@ -126,16 +96,15 @@ export const TextImageContent = ({
         }`}
         style={inlineContentStyles}
       >
-        {title && headerType === 'h1' && <h1 className={`${styles.headerOne} ${hasUnderline}`}>{title}</h1>}
-        {title && headerType === 'h2' && <h2 className={`${styles.headerTwo} ${hasUnderline}`}>{title}</h2>}
+        {title && headerType === 'h1' && <h1 className={`${styles.headerOne} ${styles.underline}`}>{title}</h1>}
+        {title && headerType === 'h2' && <h2 className={`${styles.headerTwo} ${styles.underline}`}>{title}</h2>}
+        {/* {validatedChildren} */}
         {children}
       </div>
 
       {imageUrl && (
         <div className={`${mediaStyles.mediaWrapper} ${noImageOnMobile}`}>
           <div className={`${mediaStyles.mediaBgImage}`} style={inlineImageStyles}></div>
-          {leftSvg}
-          {rightSvg}
         </div>
       )}
     </>