From ec6cc4baaf96e32831bb0ff2ce0eea04608ec9fb Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Fri, 5 Apr 2024 21:09:38 -0400 Subject: [PATCH] change: forced title underline, removed image angle options --- CHANGELOG.mdx | 3 + .../TextImage/TextImage.stories.tsx | 95 +------------------ lib/components/TextImage/TextImageContent.tsx | 95 +++++++------------ 3 files changed, 38 insertions(+), 155 deletions(-) diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx index f68426276..3a38c9afd 100644 --- a/CHANGELOG.mdx +++ b/CHANGELOG.mdx @@ -22,6 +22,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 @@ -33,12 +34,14 @@ 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 - Avatar: removed hasShadow and hasBorder props - 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 index 6f81dab50..e568971ea 100644 --- 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 = { title: 'Components/Text Image', @@ -77,98 +80,6 @@ export const ImageLeft: Story = { ), } -export const ImageAngle: Story = { - render: () => ( - - -

- 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. -

-
-
- - - ), -} - -export const ImageAngleReverse: Story = { - render: () => ( - - -

- 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. -

-
-
- - - ), -} - -export const ImageDualAngle: Story = { - render: () => ( - - -

- 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. -

-
-
- - - ), -} - -export const ImageDualAngleReverse: Story = { - render: () => ( - - -

- 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. -

-
-
- - - ), -} - export const NoContent: Story = { render: () => ( diff --git a/lib/components/TextImage/TextImageContent.tsx b/lib/components/TextImage/TextImageContent.tsx index 30760da55..544e561af 100644 --- 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

,

    ,
      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 = ( - - - - ) - break - case 'dual': - leftSvg = ( - - - - ) - rightSvg = ( - - - - ) - break - default: - break - } + // const validatedChildren = React.Children.map(children, (child) => { + // if (React.isValidElement(child) && isValidChild(child)) { + // return child + // } else { + // console.warn( + // 'TextImageContent only accepts

      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' &&

      {title}

      } - {title && headerType === 'h2' &&

      {title}

      } + {title && headerType === 'h1' &&

      {title}

      } + {title && headerType === 'h2' &&

      {title}

      } + {/* {validatedChildren} */} {children} {imageUrl && (
      - {leftSvg} - {rightSvg}
      )}