From cd43475eb15d5d4e44e0d5b81c12f260ce278764 Mon Sep 17 00:00:00 2001 From: LasseStaus Date: Wed, 29 May 2024 09:39:10 +0200 Subject: [PATCH 01/26] Add "Description" for materialgrid. This commit updates the design for material grid to support an optional description for the component. DDFFORM-520 --- .../material-grid/MaterialGrid.stories.tsx | 6 +++++ .../Library/material-grid/MaterialGrid.tsx | 16 +++++++++++- .../Library/material-grid/material-grid.scss | 25 ++++++++++++++++--- 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/src/stories/Library/material-grid/MaterialGrid.stories.tsx b/src/stories/Library/material-grid/MaterialGrid.stories.tsx index 1bc54aafd..9f2ab3b15 100644 --- a/src/stories/Library/material-grid/MaterialGrid.stories.tsx +++ b/src/stories/Library/material-grid/MaterialGrid.stories.tsx @@ -10,6 +10,10 @@ export default { control: "text", description: "Title of the recommendation", }, + description: { + control: "text", + description: "This is a description of the materials selected", + }, selectedAmountOfMaterialsForDisplay: { control: { type: "select", @@ -28,6 +32,8 @@ export default { }, args: { title: "Recommended materials", + description: + "This is a long description of the materials selected, or whatever else you want to put in here", selectedAmountOfMaterialsForDisplay: 4, materials: MaterialGridData, buttonText: "Show more", diff --git a/src/stories/Library/material-grid/MaterialGrid.tsx b/src/stories/Library/material-grid/MaterialGrid.tsx index 9809c1e8e..fecaf0705 100644 --- a/src/stories/Library/material-grid/MaterialGrid.tsx +++ b/src/stories/Library/material-grid/MaterialGrid.tsx @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import clsx from "clsx"; import { RecommendedMaterial, RecommendedMaterialProps, @@ -6,6 +7,7 @@ import { export type MaterialGridProps = { title: string; + description: string; selectedAmountOfMaterialsForDisplay: 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32; materials: RecommendedMaterialProps[]; buttonText: string; @@ -13,6 +15,7 @@ export type MaterialGridProps = { export const MaterialGrid: React.FC = ({ title, + description, selectedAmountOfMaterialsForDisplay, materials, buttonText, @@ -38,9 +41,20 @@ export const MaterialGrid: React.FC = ({ setCurrentMaterialsDisplayed(selectedAmountOfMaterialsForDisplay); } + const titleClasses = clsx("material-grid__title", { + "material-grid__title--no-description": !description, + }); + return (
-

{title}

+ {(title || description) && ( +
+ {title &&

{title}

} + {description && ( +

{description}

+ )} +
+ )}