Adds Theme Overview content block - #363
Conversation
| const parseThemes = (raw: Theme[]): PickerItem[] => { | ||
| return raw.map( | ||
| (theme: Theme): PickerItem => ({ | ||
| label: theme.nameNl, |
There was a problem hiding this comment.
Dit lijkt me niet echt te kloppen want je label komt dan ook in het nederlands te staan, ook al gebruik je de applicatie in het engels 🤔
| try { | ||
| // The themes endpoint doesn't support filtering by ids, so we fetch a large page and filter client-side. | ||
| // Themes are a bounded editorial taxonomy, so this is expected to stay small. | ||
| const response = await ThemesService.fetchThemes(null, 0, 1000); |
There was a problem hiding this comment.
Waarom niet gewoon die endpoint voorzien dat deze gefiltert kan worden?
| const handleFieldDelete = (index: any) => { | ||
| const newState = [...stateCopy]; | ||
|
|
||
| newState.splice(index, 1); |
There was a problem hiding this comment.
De delete gaat hier fout om de een of andere reden. In plaats van dat deze de index verwijderd, wordt steeds het laatste thema verwijderd 🤔
| } | ||
|
|
||
| .c-content-block-preview { | ||
| overflow-x: hidden; |
There was a problem hiding this comment.
Is er een reden waarom deze werd toegevoegd? Gaat dit niet plots verwacht gedrag breken?
| // The group band breaks out to a fixed 5000px width for full-bleed coverage; it must stay | ||
| // visible here so it isn't clipped by this element's own bounds. | ||
| overflow-x: visible; | ||
| font-family: SofiaPro, sans-serif; |
There was a problem hiding this comment.
We gaan deze styling best in een mixin gaan gieten gezien dit op meerdere plekken begint te bestaan
| font-size: 1.8rem; | ||
| font-style: normal; | ||
| font-weight: 800; | ||
| line-height: 2.4rem; | ||
| display: -webkit-box; | ||
| -webkit-box-orient: vertical; | ||
| -webkit-line-clamp: 2; | ||
| line-clamp: 2; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; |
There was a problem hiding this comment.
Hier lijkt ook heel veel repetief van styling zoals bij veel van de nieuwe componenten
| [elements] | ||
| ); | ||
| const { data: themes } = useGetThemesByIds(themeIds); | ||
| const themesById = useMemo(() => keyBy(themes || [], (theme) => theme.id), [themes]); |
There was a problem hiding this comment.
Is het niet beter deze logica naar die useQuery te verhuizen zodat die data terug geeft zoals je het nodig hebt?
| const renderGroupShapes = (groupIndex: number) => { | ||
| const rectangleStyles: CSSProperties = { width: '6cqw' }; | ||
| const circleStyles: CSSProperties = { borderRadius: '50%' }; | ||
| const shapeStyles: [CSSProperties, CSSProperties][] = [ | ||
| [circleStyles, rectangleStyles], | ||
| [rectangleStyles, circleStyles], | ||
| [rectangleStyles, rectangleStyles], | ||
| ]; | ||
| const positionStyles: [CSSProperties, CSSProperties][] = [ | ||
| [ | ||
| // Circle | ||
| { right: '5%', top: '6rem' }, | ||
| // Rectangle | ||
| { right: '25%', top: '3rem', transform: 'rotate(35deg)' }, | ||
| ], | ||
| [ | ||
| // Rectangle | ||
| { right: '0%', top: '5rem', transform: 'rotate(-45deg)' }, | ||
| // Circle | ||
| { right: '25%', top: '6rem' }, | ||
| ], | ||
| [ | ||
| // Rectangle | ||
| { right: '30%', top: '1rem', transform: 'rotate(85deg)' }, | ||
| // Rectangle | ||
| { right: '45%', top: '-4rem', transform: 'rotate(20deg)' }, | ||
| ], | ||
| ]; | ||
| return ( | ||
| <> | ||
| <div | ||
| className="c-block-overview-themes__group-shape" | ||
| style={{ ...shapeStyles[groupIndex % 3][0], ...positionStyles[groupIndex % 3][0] }} | ||
| ></div> | ||
| <div | ||
| className="c-block-overview-themes__group-shape" | ||
| style={{ ...shapeStyles[groupIndex % 3][1], ...positionStyles[groupIndex % 3][1] }} | ||
| ></div> | ||
| </> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Als ik dit responsief bekijk, dan ziet dit er behoorlijk vreemd uit op diverse schermbreedtes. Misschien dat we dit toch vast klikken op 1 iets specifieks en dat laten schalen. Anders lijkt enorm af te wijken van de designs
| // Rendered as the semantic titleType tag directly (not via BlockHeading) so the | ||
| // heading level only affects HTML semantics, never the visual style. | ||
| React.createElement( | ||
| group.titleType || 'h2', | ||
| { className: 'c-block-overview-themes__group-title' }, | ||
| group.title | ||
| )} |
There was a problem hiding this comment.
Ik denk dat we hier gaan moeten beslissen hoe we titels die puur semantisch moeten als h1/h2 etc weergegeven worden gaan renderen. Want voor de carousel gebruik ik wel de blockheading en overschrijf uiteindelijk de styling gewoon.
Puur voor consistentie gaan we dit denk ik moeten bekijken
| * are rendered in the order returned here, each one lands in the correct cell on its own — | ||
| * no explicit grid-column/grid-row line numbers are needed. | ||
| */ | ||
| export const getThemeTileSpans = (count: number): ThemeTileSpan[] => { |
There was a problem hiding this comment.
Voor deze zou ik eventueel nog een unit test schrijven, just in case 🙈
2 participants
https://meemoo.atlassian.net/browse/ARC-3814
Introduces a new content block for displaying themes in a structured and visually engaging way. This enables content managers to create curated theme overviews on content pages, enhancing the user experience for discovering related content.
The new block:
Further changes include:
ThemesServiceand associated hooks for fetching theme data.@viaa/avo2-types,@meemoo/react-components, and@viaa/avo2-components.Relates to ARC-3814