From 5f8e50f96733fdd69a6c00d8a7e86df4a3f83c69 Mon Sep 17 00:00:00 2001 From: ClaraTschamon Date: Tue, 16 Dec 2025 14:24:02 +0100 Subject: [PATCH] fix: minor component fixes --- package-lock.json | 2 +- package.json | 2 +- .../AvatarWithName/AvatarWithName.tsx | 6 ++- src/components/BoemlyTag/BoemlyTag.tsx | 2 +- src/components/HeroCard/HeroCard.stories.tsx | 46 +++++++++++++++++++ src/components/HeroCard/HeroCard.tsx | 14 +++--- .../QuoteCard/QuoteCard.stories.tsx | 4 ++ src/components/QuoteCard/QuoteCard.tsx | 4 ++ src/components/RichText/RichText.stories.tsx | 12 ++--- src/components/RichText/RichText.tsx | 34 ++++++++------ src/components/Select/Select.tsx | 5 +- src/constants/componentCustomizations.tsx | 12 ++++- 12 files changed, 106 insertions(+), 37 deletions(-) create mode 100644 src/components/HeroCard/HeroCard.stories.tsx diff --git a/package-lock.json b/package-lock.json index 2d0879f3..18b3aa68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71,7 +71,7 @@ }, "peerDependencies": { "react": "^18 || ^19", - "react-dom": "^18" + "react-dom": "^18 || ^19" } }, "node_modules/@actions/core": { diff --git a/package.json b/package.json index 051f997a..96f78666 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ }, "peerDependencies": { "react": "^18 || ^19", - "react-dom": "^18" + "react-dom": "^18 || ^19" }, "jest": { "setupFilesAfterEnv": [ diff --git a/src/components/AvatarWithName/AvatarWithName.tsx b/src/components/AvatarWithName/AvatarWithName.tsx index fe564ad9..6b07d862 100644 --- a/src/components/AvatarWithName/AvatarWithName.tsx +++ b/src/components/AvatarWithName/AvatarWithName.tsx @@ -5,6 +5,8 @@ export interface AvatarWithNameProps { name: string; description: string; imageSrc: string; + imageAlt?: string; + imageObjectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'; orientation?: 'vertical' | 'horizontal'; size?: 'sm' | 'md' | 'lg' | 'xl'; } @@ -57,6 +59,8 @@ export const AvatarWithName: React.FC = ({ name, description, imageSrc, + imageAlt, + imageObjectFit = 'cover', orientation = 'horizontal', size = 'md', }: AvatarWithNameProps) => { @@ -68,7 +72,7 @@ export const AvatarWithName: React.FC = ({ > - + ; return ( - + {children} {isClosable && ( diff --git a/src/components/HeroCard/HeroCard.stories.tsx b/src/components/HeroCard/HeroCard.stories.tsx new file mode 100644 index 00000000..4ed561b0 --- /dev/null +++ b/src/components/HeroCard/HeroCard.stories.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { StoryFn, Meta } from '@storybook/react-webpack5'; + +import { HeroCard } from './HeroCard'; +import { storybookCoverUrl } from '../../test/storybookMedia'; + +export default { + title: 'components/HeroCard', + component: HeroCard, + argTypes: { + 'link.onClick': { action: 'Link clicked' }, + }, +} as Meta; + +const Template: StoryFn = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + title: 'Welcome to the Forest', + subTitle: 'Discover the beauty of nature and help us plant more trees for a sustainable future.', + image: Forest cover, +}; + +export const WithLink = Template.bind({}); +WithLink.args = { + title: 'Welcome to the Forest', + subTitle: 'Discover the beauty of nature and help us plant more trees for a sustainable future.', + link: { + text: 'Learn More', + onClick: () => {}, + }, + image: Forest cover, +}; + +export const WithoutImage = Template.bind({}); +WithoutImage.args = { + title: 'Welcome to the Forest', + subTitle: 'Discover the beauty of nature and help us plant more trees for a sustainable future.', + link: { + text: 'Get Started', + onClick: () => {}, + }, +}; +WithoutImage.globals = { + backgrounds: { value: 'dark' }, +}; diff --git a/src/components/HeroCard/HeroCard.tsx b/src/components/HeroCard/HeroCard.tsx index 30e06a48..b311a47b 100644 --- a/src/components/HeroCard/HeroCard.tsx +++ b/src/components/HeroCard/HeroCard.tsx @@ -1,5 +1,4 @@ import { Box, Button, Heading, Text } from '@chakra-ui/react'; -import { css } from '@emotion/react'; import React, { ReactNode } from 'react'; import { Gradient } from '../Gradient'; @@ -24,13 +23,12 @@ export const HeroCard: React.FC = ({ height="lg" textAlign="center" borderRadius="2xl" - css={css` - & span, - div, - img { - border-radius: var(--boemly-radii-2xl); - } - `} + overflow="hidden" + css={{ + '& span, div, img': { + borderRadius: 'var(--boemly-radii-2xl)', + }, + }} > {image && ( <> diff --git a/src/components/QuoteCard/QuoteCard.stories.tsx b/src/components/QuoteCard/QuoteCard.stories.tsx index 756d5094..412d4b18 100644 --- a/src/components/QuoteCard/QuoteCard.stories.tsx +++ b/src/components/QuoteCard/QuoteCard.stories.tsx @@ -18,5 +18,9 @@ Default.args = { name: 'Hans', description: 'CEO @ a company', imageSrc: storybookAvatarUrl, + imageAlt: 'Hans', + imageObjectFit: 'cover', + orientation: 'horizontal', + size: 'md', }, }; diff --git a/src/components/QuoteCard/QuoteCard.tsx b/src/components/QuoteCard/QuoteCard.tsx index c933d745..f9d30bb6 100644 --- a/src/components/QuoteCard/QuoteCard.tsx +++ b/src/components/QuoteCard/QuoteCard.tsx @@ -18,6 +18,10 @@ export const QuoteCard: React.FC = ({ text, avatar }: QuoteCardP imageSrc={avatar.imageSrc} name={avatar.name} description={avatar.description} + imageAlt={avatar.imageAlt} + imageObjectFit={avatar.imageObjectFit} + orientation={avatar.orientation} + size={avatar.size} /> diff --git a/src/components/RichText/RichText.stories.tsx b/src/components/RichText/RichText.stories.tsx index 3f823e92..f2bc1a43 100644 --- a/src/components/RichText/RichText.stories.tsx +++ b/src/components/RichText/RichText.stories.tsx @@ -65,8 +65,7 @@ Default.args = { export const CustomHeading = Template.bind({}); CustomHeading.args = { - content: - `# Heading 1 + content: `# Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 @@ -78,8 +77,7 @@ Text with *italic* and **bold** text. export const CustomText = Template.bind({}); CustomText.args = { - content: - `# Heading 1 + content: `# Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 @@ -91,8 +89,7 @@ Text with *italic* and **bold** text. export const CustomUnorderedList = Template.bind({}); CustomUnorderedList.args = { - content: - `## Unordered list + content: `## Unordered list * List item 1 * List item 2 @@ -103,8 +100,7 @@ CustomUnorderedList.args = { export const CustomOrderedList = Template.bind({}); CustomOrderedList.args = { - content: - `## Ordered list + content: `## Ordered list 1. First item 2. Second item diff --git a/src/components/RichText/RichText.tsx b/src/components/RichText/RichText.tsx index 5093fdb2..e0d418b1 100644 --- a/src/components/RichText/RichText.tsx +++ b/src/components/RichText/RichText.tsx @@ -12,15 +12,9 @@ let languagesRegistered = false; const registerLanguages = async () => { if (languagesRegistered) return; - + try { - const [ - js, - bash, - python, - yaml, - xml, - ] = await Promise.all([ + const [js, bash, python, yaml, xml] = await Promise.all([ import('react-syntax-highlighter/dist/cjs/languages/hljs/javascript.js'), import('react-syntax-highlighter/dist/cjs/languages/hljs/bash.js'), import('react-syntax-highlighter/dist/cjs/languages/hljs/python.js'), @@ -28,12 +22,24 @@ const registerLanguages = async () => { import('react-syntax-highlighter/dist/cjs/languages/hljs/xml.js'), ]); - SyntaxHighlighter.registerLanguage('javascript', js.default); - SyntaxHighlighter.registerLanguage('bash', bash.default); - SyntaxHighlighter.registerLanguage('python', python.default); - SyntaxHighlighter.registerLanguage('yaml', yaml.default); - SyntaxHighlighter.registerLanguage('xml', xml.default); - + // Temporarily suppress console.error to prevent highlight.js from logging + // when a language is already registered (common in test environments) + const originalError = console.error; + console.error = () => {}; + + try { + SyntaxHighlighter.registerLanguage('javascript', js.default); + SyntaxHighlighter.registerLanguage('bash', bash.default); + SyntaxHighlighter.registerLanguage('python', python.default); + SyntaxHighlighter.registerLanguage('yaml', yaml.default); + SyntaxHighlighter.registerLanguage('xml', xml.default); + } catch { + // Silently ignore if languages are already registered + } finally { + // Restore console.error + console.error = originalError; + } + languagesRegistered = true; } catch (error) { console.warn('Failed to register syntax highlighter languages:', error); diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index ea55ddf4..cd9933df 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -20,7 +20,8 @@ interface Option { disabled?: boolean; } -export interface BoemlySelectProps { +export interface BoemlySelectProps + extends Omit, 'onChange' | 'color'> { borderColor?: string; backgroundColor?: string; color?: string; @@ -67,6 +68,7 @@ export const BoemlySelect: React.FC = ({ onChange, onClose, options, + ...rest }) => { const [isOpen, setIsOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); @@ -232,6 +234,7 @@ export const BoemlySelect: React.FC = ({ alignItems="center" justifyContent="space-between" _focusVisible={{ outline: 'none', boxShadow: 'none' }} + {...rest} >