From ef7849167bccb3a6eacf11f82ed3ac753a2642c6 Mon Sep 17 00:00:00 2001 From: I531348 Date: Thu, 30 Oct 2025 11:54:41 +0100 Subject: [PATCH 1/5] initial description list --- .../DescriptionDefinition.component.tsx | 19 ++++++ .../DescriptionDefinition.stories.tsx | 43 +++++++++++++ .../components/DescriptionDefinition/index.ts | 6 ++ .../DescriptionList.component.tsx | 24 ++++++++ .../DescriptionList.stories.tsx | 52 ++++++++++++++++ .../src/components/DescriptionList/index.ts | 6 ++ .../DescriptionTerm.component.tsx | 23 +++++++ .../DescriptionTerm.stories.tsx | 61 +++++++++++++++++++ .../src/components/DescriptionTerm/index.ts | 6 ++ 9 files changed, 240 insertions(+) create mode 100644 packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx create mode 100644 packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx create mode 100644 packages/ui-components/src/components/DescriptionDefinition/index.ts create mode 100644 packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx create mode 100644 packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx create mode 100644 packages/ui-components/src/components/DescriptionList/index.ts create mode 100644 packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx create mode 100644 packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx create mode 100644 packages/ui-components/src/components/DescriptionTerm/index.ts diff --git a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx new file mode 100644 index 0000000000..062f427916 --- /dev/null +++ b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx @@ -0,0 +1,19 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { ReactElement, ReactNode } from "react" + +const descDefStyles = ` + jn:space-y-[0.25rem] +` + +export interface DescriptionDefinitionProps { + children?: ReactElement | ReactElement[] + className?: string +} + +export const DescriptionDefinition: React.FC = ({ children }) => { + return
{children}
+} diff --git a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx new file mode 100644 index 0000000000..8b5dcf464d --- /dev/null +++ b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx @@ -0,0 +1,43 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" +import type { Meta, StoryObj } from "@storybook/react-vite" +import { DescriptionDefinition } from "./DescriptionDefinition.component" + +const meta: Meta = { + title: "Navigation/SideNavigation/SideNavigationList", + component: DescriptionDefinition, + decorators: [ + (Story) => ( + + + + ), + ], + parameters: { + docs: { + description: { + component: + "The SideNavigationList component organizes SideNavigationItems in a structured list format, supporting hierarchical navigation capabilities.", + }, + }, + }, +} + +export default meta +type Story = StoryObj + +export const NestedNavigationExample: Story = { + render: () => , + parameters: { + docs: { + description: { + story: + "Illustrates a nested navigation structure using SideNavigationItems and SideNavigationGroups, enabling complex hierarchies and visual organization within side navigation menus.", + }, + }, + }, +} diff --git a/packages/ui-components/src/components/DescriptionDefinition/index.ts b/packages/ui-components/src/components/DescriptionDefinition/index.ts new file mode 100644 index 0000000000..b419dbeb63 --- /dev/null +++ b/packages/ui-components/src/components/DescriptionDefinition/index.ts @@ -0,0 +1,6 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export { DescriptionDefinition, type DescriptionDefinitionProps } from "./DescriptionDefinition.component" diff --git a/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx b/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx new file mode 100644 index 0000000000..9e4f7dc30d --- /dev/null +++ b/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx @@ -0,0 +1,24 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { ReactElement } from "react" +import { DescriptionTermProps } from "../DescriptionTerm/DescriptionTerm.component" +import { DescriptionDefinitionProps } from "../DescriptionDefinition/DescriptionDefinition.component" + +const descListStyles = ` + jn:space-y-[0.25rem] +` + +export interface DescriptionListProps { + children: + | ReactElement + | ReactElement[] + | ReactElement + | ReactElement[] +} + +export const DescriptionList: React.FC = ({ children }) => { + return
{children}
+} diff --git a/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx b/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx new file mode 100644 index 0000000000..20b81cf050 --- /dev/null +++ b/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx @@ -0,0 +1,52 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" +import type { Meta, StoryObj } from "@storybook/react-vite" +import { DescriptionList } from "./DescriptionList.component" +import { DescriptionTerm } from "../DescriptionTerm/DescriptionTerm.component" + +const meta: Meta = { + title: "Navigation/SideNavigation/SideNavigationList", + component: DescriptionList, + decorators: [ + (Story) => ( + + + + ), + ], + parameters: { + docs: { + description: { + component: + "The SideNavigationList component organizes SideNavigationItems in a structured list format, supporting hierarchical navigation capabilities.", + }, + }, + }, +} + +export default meta +type Story = StoryObj + +export const NestedNavigationExample: Story = { + render: () => ( + + + + + + + + ), + parameters: { + docs: { + description: { + story: + "Illustrates a nested navigation structure using SideNavigationItems and SideNavigationGroups, enabling complex hierarchies and visual organization within side navigation menus.", + }, + }, + }, +} diff --git a/packages/ui-components/src/components/DescriptionList/index.ts b/packages/ui-components/src/components/DescriptionList/index.ts new file mode 100644 index 0000000000..d8d66b9ab9 --- /dev/null +++ b/packages/ui-components/src/components/DescriptionList/index.ts @@ -0,0 +1,6 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export { DescriptionList, type DescriptionListProps } from "./DescriptionList.component" diff --git a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx new file mode 100644 index 0000000000..b56d9cc452 --- /dev/null +++ b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx @@ -0,0 +1,23 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { ReactElement } from "react" +import { DescriptionDefinitionProps } from "../DescriptionDefinition" + +const descTermStyles = ` + jn:space-y-[0.25rem] +` + +export interface DescriptionTermProps { + children: + | ReactElement + | ReactElement[] + | ReactElement + | ReactElement[] +} + +export const DescriptionTerm: React.FC = ({ children }) => { + return
{children}
+} diff --git a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx new file mode 100644 index 0000000000..f73fb767b2 --- /dev/null +++ b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx @@ -0,0 +1,61 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" +import type { Meta, StoryObj } from "@storybook/react-vite" +import { SideNavigationList } from "./DescriptionTerm.component" +import { SideNavigationItem } from "../SideNavigationItem" +import { SideNavigationGroup } from "../SideNavigationGroup" +import { SideNavigation } from "../SideNavigation" + +const meta: Meta = { + title: "Navigation/SideNavigation/SideNavigationList", + component: SideNavigationList, + decorators: [ + (Story) => ( + + + + ), + ], + parameters: { + docs: { + description: { + component: + "The SideNavigationList component organizes SideNavigationItems in a structured list format, supporting hierarchical navigation capabilities.", + }, + }, + }, +} + +export default meta +type Story = StoryObj + +export const NestedNavigationExample: Story = { + render: () => ( + + + + + + + + + + + + + + + ), + parameters: { + docs: { + description: { + story: + "Illustrates a nested navigation structure using SideNavigationItems and SideNavigationGroups, enabling complex hierarchies and visual organization within side navigation menus.", + }, + }, + }, +} diff --git a/packages/ui-components/src/components/DescriptionTerm/index.ts b/packages/ui-components/src/components/DescriptionTerm/index.ts new file mode 100644 index 0000000000..99c3cb2656 --- /dev/null +++ b/packages/ui-components/src/components/DescriptionTerm/index.ts @@ -0,0 +1,6 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export { DescriptionTerm, type DescriptionTermProps } from "./DescriptionTerm.component" From abba480a0b39d9599acc279fe1a234d1fa92f8ce Mon Sep 17 00:00:00 2001 From: I531348 Date: Mon, 17 Nov 2025 09:11:41 +0100 Subject: [PATCH 2/5] description --- .../DescriptionDefinition.component.tsx | 29 +++++--- .../DescriptionDefinition.stories.tsx | 59 +++++++++------- .../DescriptionDefinition.test.tsx | 39 +++++++++++ .../description-definition.css | 18 +++++ .../DescriptionList.component.tsx | 46 ++++++++---- .../DescriptionList.stories.tsx | 67 ++++++++---------- .../DescriptionList/DescriptionList.test.tsx | 70 +++++++++++++++++++ .../DescriptionList/description-list.css | 11 +++ .../DescriptionTerm.component.tsx | 35 ++++++---- .../DescriptionTerm.stories.tsx | 67 ++++++------------ .../DescriptionTerm/DescriptionTerm.test.tsx | 39 +++++++++++ .../DescriptionTerm/description-term.css | 19 +++++ .../src/components/Modal/Modal.stories.tsx | 58 +++++++-------- packages/ui-components/src/global.css | 15 ++++ packages/ui-components/src/theme.css | 12 ++++ 15 files changed, 412 insertions(+), 172 deletions(-) create mode 100644 packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.test.tsx create mode 100644 packages/ui-components/src/components/DescriptionDefinition/description-definition.css create mode 100644 packages/ui-components/src/components/DescriptionList/DescriptionList.test.tsx create mode 100644 packages/ui-components/src/components/DescriptionList/description-list.css create mode 100644 packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.test.tsx create mode 100644 packages/ui-components/src/components/DescriptionTerm/description-term.css diff --git a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx index 062f427916..cf15a63fa6 100644 --- a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx +++ b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx @@ -3,17 +3,28 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { ReactElement, ReactNode } from "react" - -const descDefStyles = ` - jn:space-y-[0.25rem] -` +import React, { ReactNode } from "react" +import "./description-definition.css" export interface DescriptionDefinitionProps { - children?: ReactElement | ReactElement[] + /** + * Content to be displayed as the description, accommodating text or more complex nodes to explain or define the associated term. + */ + children: ReactNode + /** + * Additional class names for applying custom styles or overriding default styles on the
element. + */ className?: string } -export const DescriptionDefinition: React.FC = ({ children }) => { - return
{children}
-} +/** + * Represents the definition or description in a description list, rendering as an HTML
element. + * Pairs with DescriptionTerm to complete the term-description association, offering flexible content styling. + */ +export const DescriptionDefinition: React.FC = ({ children, className = "" }) => ( +
+
{children}
+ +) + +export const DD = DescriptionDefinition diff --git a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx index 8b5dcf464d..5e620991f5 100644 --- a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx +++ b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx @@ -5,39 +5,46 @@ import React from "react" import type { Meta, StoryObj } from "@storybook/react-vite" -import { DescriptionDefinition } from "./DescriptionDefinition.component" +import { DescriptionDefinition, DD } from "./DescriptionDefinition.component" const meta: Meta = { - title: "Navigation/SideNavigation/SideNavigationList", - component: DescriptionDefinition, - decorators: [ - (Story) => ( - - - - ), - ], - parameters: { - docs: { - description: { - component: - "The SideNavigationList component organizes SideNavigationItems in a structured list format, supporting hierarchical navigation capabilities.", - }, + title: "Components/Description/DescriptionDefinition", + component: DD, + argTypes: { + children: { + control: { type: "text" }, + defaultValue: "This is a description text.", + description: "Content to display as the definition in the description list.", + }, + className: { + control: { type: "text" }, + description: "Additional custom class names for styling the component.", }, }, } export default meta -type Story = StoryObj +type Story = StoryObj -export const NestedNavigationExample: Story = { - render: () => , - parameters: { - docs: { - description: { - story: - "Illustrates a nested navigation structure using SideNavigationItems and SideNavigationGroups, enabling complex hierarchies and visual organization within side navigation menus.", - }, - }, +export const Default: Story = { + render: (args) =>
, + args: { + children: "This is a default description.", }, } + +export const CustomClassExample: Story = { + render: (args) =>
, + args: { + children: "This description has custom styling.", + className: "bg-blue-100 text-blue-800 p-4", + }, +} + +export const RichContentExample: Story = { + render: (args) => ( +
+ This is bold text. This is italic text. +
+ ), +} diff --git a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.test.tsx b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.test.tsx new file mode 100644 index 0000000000..b6e305f76e --- /dev/null +++ b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.test.tsx @@ -0,0 +1,39 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" +import { render, screen } from "@testing-library/react" +import { describe, it, expect } from "vitest" +import { DescriptionDefinition } from "../DescriptionDefinition" + +describe("DescriptionDefinition", () => { + it("renders the children correctly", () => { + render(Test Description) + expect(screen.getByText("Test Description")).toBeInTheDocument() + }) + + it("applies custom className", () => { + const customClass = "custom-class" + render(Test Description) + const ddElement = screen.getByText("Test Description") + expect(ddElement).toHaveClass(customClass) + }) + + it("renders within a
element", () => { + render(Test Description) + const ddElement = screen.getByText("Test Description") + expect(ddElement.tagName).toBe("DD") + }) + + it("can render complex children", () => { + render( + + Complex Content + + ) + expect(screen.getByText("Complex")).toBeInTheDocument() + expect(screen.getByText("Content")).toBeInTheDocument() + }) +}) diff --git a/packages/ui-components/src/components/DescriptionDefinition/description-definition.css b/packages/ui-components/src/components/DescriptionDefinition/description-definition.css new file mode 100644 index 0000000000..0a79370cd0 --- /dev/null +++ b/packages/ui-components/src/components/DescriptionDefinition/description-definition.css @@ -0,0 +1,18 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +.dd-container { + align-items: center; + gap: 0.25rem; +} + +.dd { + align-items: center; + background-color: var(--color-dd-background); + color: var(--color-dd-text); + display: flex; + height: 2rem; + padding: 0.5rem; +} diff --git a/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx b/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx index 9e4f7dc30d..cb2fdb7f8a 100644 --- a/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx +++ b/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx @@ -4,21 +4,41 @@ */ import React, { ReactElement } from "react" -import { DescriptionTermProps } from "../DescriptionTerm/DescriptionTerm.component" -import { DescriptionDefinitionProps } from "../DescriptionDefinition/DescriptionDefinition.component" - -const descListStyles = ` - jn:space-y-[0.25rem] -` +import { DescriptionTermProps } from "../DescriptionTerm" +import { DescriptionDefinitionProps } from "../DescriptionDefinition" +import "./description-list.css" export interface DescriptionListProps { + /** + * Child components must be either DescriptionTerm or DescriptionDefinition to maintain semantic structure. + * Supports multiple instances to create a detailed list of terms and definitions. + */ children: - | ReactElement - | ReactElement[] - | ReactElement - | ReactElement[] + | ReactElement + | Array> + /** + * Determines the alignment of terms within the list. Align terms to the left or right based on preference for display style. + */ + alignTerms?: "left" | "right" + /** + * Additional custom class names to apply styles to the
element or to extend styling from the design system. + */ + className?: string } -export const DescriptionList: React.FC = ({ children }) => { - return
{children}
-} +/** + * A wrapper component that semantically represents a list of terms and their corresponding descriptions using HTML
elements. + * This component enforces structure by expecting child elements of DescriptionTerm or DescriptionDefinition, + * aligning them according to the specified terms alignment. + */ +export const DescriptionList: React.FC = ({ children, alignTerms = "right", className = "" }) => ( +
+ {children} +
+) + +export const DL = DescriptionList diff --git a/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx b/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx index 20b81cf050..7d2fa2a226 100644 --- a/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx @@ -5,48 +5,43 @@ import React from "react" import type { Meta, StoryObj } from "@storybook/react-vite" -import { DescriptionList } from "./DescriptionList.component" -import { DescriptionTerm } from "../DescriptionTerm/DescriptionTerm.component" +import { DL } from "./DescriptionList.component" +import { DT } from "../DescriptionTerm/DescriptionTerm.component" +import { DD } from "../DescriptionDefinition/DescriptionDefinition.component" -const meta: Meta = { - title: "Navigation/SideNavigation/SideNavigationList", - component: DescriptionList, - decorators: [ - (Story) => ( - - - - ), - ], - parameters: { - docs: { - description: { - component: - "The SideNavigationList component organizes SideNavigationItems in a structured list format, supporting hierarchical navigation capabilities.", - }, +const meta: Meta = { + title: "Components/Description/DescriptionList", + component: DL, + argTypes: { + children: { + control: false, + description: "Elements containing DescriptionTerm and DescriptionDefinition components.", }, }, } export default meta -type Story = StoryObj +type Story = StoryObj -export const NestedNavigationExample: Story = { - render: () => ( - - - - - - - +export const Default: Story = { + render: (args) => ( +
+
Term 1
+
Description for term 1.
+
Term 2
+
Description for term 2.
+
+ ), +} + +export const MultipleDefinitions: Story = { + render: (args) => ( +
+
Term 1
+
First description for term 1.
+
Second description for term 1.
+
Term 2
+
Only description for term 2.
+
), - parameters: { - docs: { - description: { - story: - "Illustrates a nested navigation structure using SideNavigationItems and SideNavigationGroups, enabling complex hierarchies and visual organization within side navigation menus.", - }, - }, - }, } diff --git a/packages/ui-components/src/components/DescriptionList/DescriptionList.test.tsx b/packages/ui-components/src/components/DescriptionList/DescriptionList.test.tsx new file mode 100644 index 0000000000..c4226e85d3 --- /dev/null +++ b/packages/ui-components/src/components/DescriptionList/DescriptionList.test.tsx @@ -0,0 +1,70 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" +import { render, screen } from "@testing-library/react" +import { describe, it, expect } from "vitest" +import { DescriptionList } from "./DescriptionList.component" +import { DescriptionTerm } from "../DescriptionTerm" +import { DescriptionDefinition } from "../DescriptionDefinition" + +describe("DescriptionList", () => { + it("renders child DescriptionTerm and DescriptionDefinition components correctly", () => { + render( + + Term 1 + Definition 1 + + ) + expect(screen.getByText("Term 1")).toBeInTheDocument() + expect(screen.getByText("Definition 1")).toBeInTheDocument() + }) + + it("applies custom className to the
element", () => { + const customClass = "custom-class" + render( + + Term 2 + Definition 2 + + ) + + const dlElement = screen.getByTestId("description-list") + expect(dlElement).toHaveClass(customClass) + }) + + it("aligns terms to the right by default", () => { + render( + + Term 3 + Definition 3 + + ) + }) + + it("aligns terms to the left when specified", () => { + render( + + Left Term + Definition for Left Term + + ) + }) + + it("renders multiple terms and definitions in a single list", () => { + render( + + Term 4 + Definition 4 + Term 5 + Definition 5 + + ) + expect(screen.getByText("Term 4")).toBeInTheDocument() + expect(screen.getByText("Definition 4")).toBeInTheDocument() + expect(screen.getByText("Term 5")).toBeInTheDocument() + expect(screen.getByText("Definition 5")).toBeInTheDocument() + }) +}) diff --git a/packages/ui-components/src/components/DescriptionList/description-list.css b/packages/ui-components/src/components/DescriptionList/description-list.css new file mode 100644 index 0000000000..71af28932e --- /dev/null +++ b/packages/ui-components/src/components/DescriptionList/description-list.css @@ -0,0 +1,11 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +.dl { + border-bottom: 1px solid var(--color-dd-dt-border); + display: flex; + flex-direction: row; + gap: 0.25rem; +} diff --git a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx index b56d9cc452..8c267b001d 100644 --- a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx +++ b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx @@ -3,21 +3,28 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { ReactElement } from "react" -import { DescriptionDefinitionProps } from "../DescriptionDefinition" - -const descTermStyles = ` - jn:space-y-[0.25rem] -` +import React, { ReactNode } from "react" +import "./description-term.css" export interface DescriptionTermProps { - children: - | ReactElement - | ReactElement[] - | ReactElement - | ReactElement[] + /** + * Content to be displayed as the term, which could be simple text or any ReactNode, providing semantic meaning to the associated description. + */ + children: ReactNode + /** + * Custom class names to apply additional styling to the
element, useful for overrides or custom styles. + */ + className?: string } -export const DescriptionTerm: React.FC = ({ children }) => { - return
{children}
-} +/** + * Represents a term in a description list, rendering an HTML
element. + * Used to denote terms, headers, or keys in a semantic way, allowing for flexible styling. + */ +export const DescriptionTerm: React.FC = ({ children, className = "" }) => ( +
+
{children}
+ +) + +export const DT = DescriptionTerm diff --git a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx index f73fb767b2..0e883cf1f2 100644 --- a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx +++ b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx @@ -5,57 +5,34 @@ import React from "react" import type { Meta, StoryObj } from "@storybook/react-vite" -import { SideNavigationList } from "./DescriptionTerm.component" -import { SideNavigationItem } from "../SideNavigationItem" -import { SideNavigationGroup } from "../SideNavigationGroup" -import { SideNavigation } from "../SideNavigation" +import { DescriptionTerm, DT } from "./DescriptionTerm.component" -const meta: Meta = { - title: "Navigation/SideNavigation/SideNavigationList", - component: SideNavigationList, - decorators: [ - (Story) => ( - - - - ), - ], - parameters: { - docs: { - description: { - component: - "The SideNavigationList component organizes SideNavigationItems in a structured list format, supporting hierarchical navigation capabilities.", - }, +const meta: Meta = { + title: "Components/Description/DescriptionTerm", + component: DT, + argTypes: { + children: { + control: { type: "text" }, + defaultValue: "Default Term", + description: "The term to be displayed in the description list.", }, }, } export default meta -type Story = StoryObj +type Story = StoryObj -export const NestedNavigationExample: Story = { - render: () => ( - - - - - - - - - - - - - - - ), - parameters: { - docs: { - description: { - story: - "Illustrates a nested navigation structure using SideNavigationItems and SideNavigationGroups, enabling complex hierarchies and visual organization within side navigation menus.", - }, - }, +export const Default: Story = { + render: (args) =>
, + args: { + children: "Default Term", + }, +} + +export const CustomTerm: Story = { + render: (args) =>
, + args: { + children: "Custom Term", + className: "font-bold text-lg", }, } diff --git a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.test.tsx b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.test.tsx new file mode 100644 index 0000000000..a20e775f8f --- /dev/null +++ b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.test.tsx @@ -0,0 +1,39 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" +import { render, screen } from "@testing-library/react" +import { describe, it, expect } from "vitest" +import { DescriptionTerm } from "./DescriptionTerm.component" + +describe("DescriptionTerm", () => { + it("renders the children properly", () => { + render(Test Term) + expect(screen.getByText("Test Term")).toBeInTheDocument() + }) + + it("applies custom className to the
element", () => { + const customClass = "custom-class" + render(Styled Term) + const dtElement = screen.getByText("Styled Term") + expect(dtElement).toHaveClass(customClass) + }) + + it("renders within a
element", () => { + render(Term Element) + const dtElement = screen.getByText("Term Element") + expect(dtElement.tagName.toLowerCase()).toBe("dt") + }) + + it("can render complex children", () => { + render( + + Complex Term Content + + ) + expect(screen.getByText("Complex Term")).toBeInTheDocument() + expect(screen.getByText("Content")).toBeInTheDocument() + }) +}) diff --git a/packages/ui-components/src/components/DescriptionTerm/description-term.css b/packages/ui-components/src/components/DescriptionTerm/description-term.css new file mode 100644 index 0000000000..cd92e1d18e --- /dev/null +++ b/packages/ui-components/src/components/DescriptionTerm/description-term.css @@ -0,0 +1,19 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +.dt-container { + gap: 0.25rem; +} + +.dt { + align-items: center; + background-color: var(--color-dt-background); + font-weight: bold; + color: var(--color-dt-text); + display: flex; + height: 2rem; + padding: 0.5rem; + white-space: nowrap; +} diff --git a/packages/ui-components/src/components/Modal/Modal.stories.tsx b/packages/ui-components/src/components/Modal/Modal.stories.tsx index 5e78781455..a3d97f1fb5 100644 --- a/packages/ui-components/src/components/Modal/Modal.stories.tsx +++ b/packages/ui-components/src/components/Modal/Modal.stories.tsx @@ -115,6 +115,35 @@ export const SimpleConfirmDialogWithDisabledButtons: Story = { }, } +export const DisabledCloseButton: Story = { + render: Template, + args: { + title: "Disabled Close Button Modal", + children:

This Modal has a disabled top-right close button.

, + disableCloseButton: true, + cancelButtonLabel: "Cancel", + }, +} + +export const NonCloseable: Story = { + render: Template, + args: { + title: "Non-Closeable Modal", + children: + "Use only if all else fails. If you need to inform users about something, in 99.9% of cases is the better choice.", + closeable: false, + }, +} + +export const CloseOnBackdropClick: Story = { + render: Template, + args: { + title: "Close on Backdrop Click", + children:

This Modal closes when clicking the backdrop.

, + closeOnBackdropClick: true, + }, +} + export const AutoFocusDialog: Story = { render: Template, args: { @@ -209,35 +238,6 @@ export const XXLWithForm: Story = { }, } -export const NonCloseable: Story = { - render: Template, - args: { - title: "Non-Closeable Modal", - children: - "Use only if all else fails. If you need to inform users about something, in 99.9% of cases is the better choice.", - closeable: false, - }, -} - -export const CloseOnBackdropClick: Story = { - render: Template, - args: { - title: "Close on Backdrop Click", - children:

This Modal closes when clicking the backdrop.

, - closeOnBackdropClick: true, - }, -} - -export const DisabledCloseButton: Story = { - render: Template, - args: { - title: "Disabled Close Button Modal", - children:

This Modal has a disabled top-right close button.

, - disableCloseButton: true, - cancelButtonLabel: "Cancel", - }, -} - export const Login: Story = { render: Template, args: { diff --git a/packages/ui-components/src/global.css b/packages/ui-components/src/global.css index d69109ca05..396f2bce0a 100644 --- a/packages/ui-components/src/global.css +++ b/packages/ui-components/src/global.css @@ -14,6 +14,9 @@ @import "./components/ThemeToggle/themeToggle.css" layer(utilities); @import "./components/DataGridRow/data-grid-row.css" layer(utilities); @import "./components/SideNavigationItem/sidenavigationitem.css" layer(utilities); +@import "./components/DescriptionList/description-list.css" layer(utilities); +@import "./components/DescriptionTerm/description-term.css" layer(utilities); +@import "./components/DescriptionDefinition/description-definition.css" layer(utilities); :root, :host { @@ -720,6 +723,12 @@ /* LT Box Shadow */ --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3); --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.3)), 0 2px 8px 0 rgba(0, 0, 0, 0.3); + /* LT Description - DescriptionList, DescriptionTerm, DescriptionDefinition */ + --color-dt-background: var(--color-background-lvl-1); + --color-dt-text: var(--color-text-high); + --color-dd-background: var(--color-transparent); + --color-dd-text: var(--color-text-high); + --color-dd-dt-border: var(--color-border-default); } /* JUNO THEME: DARK MODE */ @@ -957,6 +966,12 @@ /* DT Box Shadow */ --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3); --box-shadow-hover: 0 1px 2px 0 rgba(34, 54, 73, 0.3); + /* DT Description - DescriptionList, DescriptionTerm, DescriptionDefinition */ + --color-dt-background: var(--color-background-lvl-0); + --color-dt-text: var(--color-text-high); + --color-dd-background: var(--color-transparent); + --color-dd-text: var(--color-text-high); + --color-dd-dt-border: var(--color-border-default); } /* diff --git a/packages/ui-components/src/theme.css b/packages/ui-components/src/theme.css index 6e4f48cae8..586183c4cb 100644 --- a/packages/ui-components/src/theme.css +++ b/packages/ui-components/src/theme.css @@ -713,6 +713,12 @@ /* LT Box Shadow */ --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3); --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.3)), 0 2px 8px 0 rgba(0, 0, 0, 0.3); + /* LT Description - DescriptionList, DescriptionTerm, DescriptionDefinition */ + --color-dt-background: var(--color-background-lvl-1); + --color-dt-text: var(--color-text-high); + --color-dd-background: var(--color-transparent); + --color-dd-text: var(--color-text-high); + --color-dd-dt-border: var(--color-border-default); } /* JUNO THEME: DARK MODE */ @@ -950,6 +956,12 @@ /* DT Box Shadow */ --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3); --box-shadow-hover: 0 1px 2px 0 rgba(34, 54, 73, 0.3); + /* DT Description - DescriptionList, DescriptionTerm, DescriptionDefinition */ + --color-dt-background: var(--color-background-lvl-1); + --color-dt-text: var(--color-text-high); + --color-dd-background: var(--color-transparent); + --color-dd-text: var(--color-text-high); + --color-dd-dt-border: var(--color-border-default); } /* From 92b2d7fab380e4619bd19f15b3579ffa0586ae0e Mon Sep 17 00:00:00 2001 From: I531348 Date: Tue, 25 Nov 2025 11:37:16 +0100 Subject: [PATCH 3/5] fix stories, logic, styling --- .../DescriptionDefinition.component.tsx | 4 +- .../DescriptionDefinition.stories.tsx | 50 -------------- .../description-definition.css | 9 +-- .../DescriptionList.component.tsx | 2 +- .../DescriptionList.stories.tsx | 67 ++++++++++++++++--- .../DescriptionList/description-list.css | 1 - .../DescriptionTerm.stories.tsx | 38 ----------- .../DescriptionTerm/description-term.css | 8 +-- packages/ui-components/src/global.css | 4 +- packages/ui-components/src/theme.css | 4 +- 10 files changed, 70 insertions(+), 117 deletions(-) delete mode 100644 packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx delete mode 100644 packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx diff --git a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx index cf15a63fa6..9b66fb0bd2 100644 --- a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx +++ b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx @@ -22,9 +22,7 @@ export interface DescriptionDefinitionProps { * Pairs with DescriptionTerm to complete the term-description association, offering flexible content styling. */ export const DescriptionDefinition: React.FC = ({ children, className = "" }) => ( -
-
{children}
- +
{children}
) export const DD = DescriptionDefinition diff --git a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx deleted file mode 100644 index 5e620991f5..0000000000 --- a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.stories.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from "react" -import type { Meta, StoryObj } from "@storybook/react-vite" -import { DescriptionDefinition, DD } from "./DescriptionDefinition.component" - -const meta: Meta = { - title: "Components/Description/DescriptionDefinition", - component: DD, - argTypes: { - children: { - control: { type: "text" }, - defaultValue: "This is a description text.", - description: "Content to display as the definition in the description list.", - }, - className: { - control: { type: "text" }, - description: "Additional custom class names for styling the component.", - }, - }, -} - -export default meta -type Story = StoryObj - -export const Default: Story = { - render: (args) =>
, - args: { - children: "This is a default description.", - }, -} - -export const CustomClassExample: Story = { - render: (args) =>
, - args: { - children: "This description has custom styling.", - className: "bg-blue-100 text-blue-800 p-4", - }, -} - -export const RichContentExample: Story = { - render: (args) => ( -
- This is bold text. This is italic text. -
- ), -} diff --git a/packages/ui-components/src/components/DescriptionDefinition/description-definition.css b/packages/ui-components/src/components/DescriptionDefinition/description-definition.css index 0a79370cd0..2743c2666d 100644 --- a/packages/ui-components/src/components/DescriptionDefinition/description-definition.css +++ b/packages/ui-components/src/components/DescriptionDefinition/description-definition.css @@ -3,16 +3,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -.dd-container { - align-items: center; - gap: 0.25rem; -} - .dd { - align-items: center; background-color: var(--color-dd-background); + border-bottom: 1px solid var(--color-dd-dt-border); color: var(--color-dd-text); display: flex; + align-items: center; height: 2rem; padding: 0.5rem; + gap: 0.25rem; } diff --git a/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx b/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx index cb2fdb7f8a..539e65b7e4 100644 --- a/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx +++ b/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx @@ -35,7 +35,7 @@ export const DescriptionList: React.FC = ({ children, alig
{children}
diff --git a/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx b/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx index 7d2fa2a226..abcf929f0f 100644 --- a/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx @@ -10,12 +10,11 @@ import { DT } from "../DescriptionTerm/DescriptionTerm.component" import { DD } from "../DescriptionDefinition/DescriptionDefinition.component" const meta: Meta = { - title: "Components/Description/DescriptionList", + title: "Components/DescriptionList", component: DL, argTypes: { children: { control: false, - description: "Elements containing DescriptionTerm and DescriptionDefinition components.", }, }, } @@ -26,22 +25,68 @@ type Story = StoryObj export const Default: Story = { render: (args) => (
-
Term 1
-
Description for term 1.
-
Term 2
-
Description for term 2.
+
Warranty
+
2 years limited warranty with options for extension.
), } +/** + * You can use many definitions per term. + */ export const MultipleDefinitions: Story = { render: (args) => (
-
Term 1
-
First description for term 1.
-
Second description for term 1.
-
Term 2
-
Only description for term 2.
+
Shipping
+
Standard shipping: 5-7 business days.
+
Express shipping: 2-3 business days.
+
Payment Options
+
Credit/Debit cards, PayPal, and bank transfer.
+
+ ), +} + +export const GroupedDefinitions: Story = { + render: (args) => ( +
+
+
Privacy Policy
+
We value your privacy and ensure data protection.
+
Your information will not be shared without consent.
+
Regular audits are conducted for security assurance.
+
+
+
Terms of Service
+
By using our services, you agree to our terms.
+
+
+ ), +} + +/** + * You can wrap a term with multiple definitions in a
for grouping. + */ +export const UserProfileDetails: Story = { + render: (args) => ( +
+
+
Full Name
+
John Doe
+
+
+
Email
+
johndoe@example.com
+
+
+
Membership
+
Platinum Member
+
Joined: January 2020
+
+
+
Preferences
+
Language: English
+
Theme: Dark
+
), } diff --git a/packages/ui-components/src/components/DescriptionList/description-list.css b/packages/ui-components/src/components/DescriptionList/description-list.css index 71af28932e..75ed0a8728 100644 --- a/packages/ui-components/src/components/DescriptionList/description-list.css +++ b/packages/ui-components/src/components/DescriptionList/description-list.css @@ -4,7 +4,6 @@ */ .dl { - border-bottom: 1px solid var(--color-dd-dt-border); display: flex; flex-direction: row; gap: 0.25rem; diff --git a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx deleted file mode 100644 index 0e883cf1f2..0000000000 --- a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import React from "react" -import type { Meta, StoryObj } from "@storybook/react-vite" -import { DescriptionTerm, DT } from "./DescriptionTerm.component" - -const meta: Meta = { - title: "Components/Description/DescriptionTerm", - component: DT, - argTypes: { - children: { - control: { type: "text" }, - defaultValue: "Default Term", - description: "The term to be displayed in the description list.", - }, - }, -} - -export default meta -type Story = StoryObj - -export const Default: Story = { - render: (args) =>
, - args: { - children: "Default Term", - }, -} - -export const CustomTerm: Story = { - render: (args) =>
, - args: { - children: "Custom Term", - className: "font-bold text-lg", - }, -} diff --git a/packages/ui-components/src/components/DescriptionTerm/description-term.css b/packages/ui-components/src/components/DescriptionTerm/description-term.css index cd92e1d18e..0cbd322783 100644 --- a/packages/ui-components/src/components/DescriptionTerm/description-term.css +++ b/packages/ui-components/src/components/DescriptionTerm/description-term.css @@ -3,17 +3,15 @@ * SPDX-License-Identifier: Apache-2.0 */ -.dt-container { - gap: 0.25rem; -} - .dt { - align-items: center; background-color: var(--color-dt-background); + border-bottom: 1px solid var(--color-dd-dt-border); font-weight: bold; color: var(--color-dt-text); display: flex; + align-items: center; height: 2rem; padding: 0.5rem; white-space: nowrap; + gap: 0.25rem; } diff --git a/packages/ui-components/src/global.css b/packages/ui-components/src/global.css index 960b6474f3..ba80e6ef58 100644 --- a/packages/ui-components/src/global.css +++ b/packages/ui-components/src/global.css @@ -409,7 +409,7 @@ --text-color-theme-sidenavigation-item-active: var(--color-sidenavigation-item-active); /* Component Border Colors: */ - --border-color-theme-default: var(--color-default-border); + --border-color-theme-default: var(--color-dd-dt-border); --border-color-theme-box-default: var(--color-box-border); @@ -731,6 +731,7 @@ --color-dd-background: var(--color-transparent); --color-dd-text: var(--color-text-high); --color-dd-dt-border: var(--color-border-default); + --color-border-default: var(--color-juno-grey-blue-3); } /* JUNO THEME: DARK MODE */ @@ -975,6 +976,7 @@ --color-dd-background: var(--color-transparent); --color-dd-text: var(--color-text-high); --color-dd-dt-border: var(--color-border-default); + --color-border-default: var(--color-juno-grey-light-7); } /* diff --git a/packages/ui-components/src/theme.css b/packages/ui-components/src/theme.css index d9033715d1..98e1a9c0ce 100644 --- a/packages/ui-components/src/theme.css +++ b/packages/ui-components/src/theme.css @@ -398,7 +398,7 @@ --text-color-theme-sidenavigation-item-active: var(--color-sidenavigation-item-active); /* Component Border Colors: */ - --border-color-theme-default: var(--color-default-border); + --border-color-theme-default: var(--color-dd-dt-border); --border-color-theme-box-default: var(--color-box-border); @@ -721,6 +721,7 @@ --color-dd-background: var(--color-transparent); --color-dd-text: var(--color-text-high); --color-dd-dt-border: var(--color-border-default); + --color-border-default: var(--color-juno-grey-blue-3); } /* JUNO THEME: DARK MODE */ @@ -965,6 +966,7 @@ --color-dd-background: var(--color-transparent); --color-dd-text: var(--color-text-high); --color-dd-dt-border: var(--color-border-default); + --color-border-default: var(--color-juno-grey-light-7); } /* From 24a86fc9f5630d5fae9cc38da65c984e738ac663 Mon Sep 17 00:00:00 2001 From: I531348 Date: Fri, 5 Dec 2025 10:54:18 +0100 Subject: [PATCH 4/5] border and other fixes --- .../DescriptionDefinition.component.tsx | 2 +- .../description-definition.css | 1 - .../DescriptionList.component.tsx | 1 + .../DescriptionList.stories.tsx | 24 +++++++++---------- .../DescriptionTerm.component.tsx | 4 +--- .../DescriptionTerm/description-term.css | 1 - packages/ui-components/src/theme.css | 2 +- 7 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx index 9b66fb0bd2..967adb3daa 100644 --- a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx +++ b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx @@ -22,7 +22,7 @@ export interface DescriptionDefinitionProps { * Pairs with DescriptionTerm to complete the term-description association, offering flexible content styling. */ export const DescriptionDefinition: React.FC = ({ children, className = "" }) => ( -
{children}
+
{children}
) export const DD = DescriptionDefinition diff --git a/packages/ui-components/src/components/DescriptionDefinition/description-definition.css b/packages/ui-components/src/components/DescriptionDefinition/description-definition.css index 2743c2666d..7f3d04f886 100644 --- a/packages/ui-components/src/components/DescriptionDefinition/description-definition.css +++ b/packages/ui-components/src/components/DescriptionDefinition/description-definition.css @@ -5,7 +5,6 @@ .dd { background-color: var(--color-dd-background); - border-bottom: 1px solid var(--color-dd-dt-border); color: var(--color-dd-text); display: flex; align-items: center; diff --git a/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx b/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx index 539e65b7e4..c3844a5458 100644 --- a/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx +++ b/packages/ui-components/src/components/DescriptionList/DescriptionList.component.tsx @@ -16,6 +16,7 @@ export interface DescriptionListProps { children: | ReactElement | Array> + | ReactElement<"div"> /** * Determines the alignment of terms within the list. Align terms to the left or right based on preference for display style. */ diff --git a/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx b/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx index abcf929f0f..faf278da3b 100644 --- a/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx @@ -5,13 +5,13 @@ import React from "react" import type { Meta, StoryObj } from "@storybook/react-vite" -import { DL } from "./DescriptionList.component" +import { DescriptionList } from "./DescriptionList.component" import { DT } from "../DescriptionTerm/DescriptionTerm.component" import { DD } from "../DescriptionDefinition/DescriptionDefinition.component" -const meta: Meta = { +const meta: Meta = { title: "Components/DescriptionList", - component: DL, + component: DescriptionList, argTypes: { children: { control: false, @@ -20,14 +20,14 @@ const meta: Meta = { } export default meta -type Story = StoryObj +type Story = StoryObj export const Default: Story = { render: (args) => ( -
+
Warranty
2 years limited warranty with options for extension.
-
+ ), } @@ -36,19 +36,19 @@ export const Default: Story = { */ export const MultipleDefinitions: Story = { render: (args) => ( -
+
Shipping
Standard shipping: 5-7 business days.
Express shipping: 2-3 business days.
Payment Options
Credit/Debit cards, PayPal, and bank transfer.
-
+ ), } export const GroupedDefinitions: Story = { render: (args) => ( -
+
Privacy Policy
We value your privacy and ensure data protection.
@@ -59,7 +59,7 @@ export const GroupedDefinitions: Story = {
Terms of Service
By using our services, you agree to our terms.
-
+ ), } @@ -68,7 +68,7 @@ export const GroupedDefinitions: Story = { */ export const UserProfileDetails: Story = { render: (args) => ( -
+
Full Name
John Doe
@@ -87,6 +87,6 @@ export const UserProfileDetails: Story = {
Language: English
Theme: Dark
-
+ ), } diff --git a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx index 8c267b001d..842ec47434 100644 --- a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx +++ b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx @@ -22,9 +22,7 @@ export interface DescriptionTermProps { * Used to denote terms, headers, or keys in a semantic way, allowing for flexible styling. */ export const DescriptionTerm: React.FC = ({ children, className = "" }) => ( -
-
{children}
-
+
{children}
) export const DT = DescriptionTerm diff --git a/packages/ui-components/src/components/DescriptionTerm/description-term.css b/packages/ui-components/src/components/DescriptionTerm/description-term.css index 0cbd322783..8b2c76f4ed 100644 --- a/packages/ui-components/src/components/DescriptionTerm/description-term.css +++ b/packages/ui-components/src/components/DescriptionTerm/description-term.css @@ -5,7 +5,6 @@ .dt { background-color: var(--color-dt-background); - border-bottom: 1px solid var(--color-dd-dt-border); font-weight: bold; color: var(--color-dt-text); display: flex; diff --git a/packages/ui-components/src/theme.css b/packages/ui-components/src/theme.css index 98e1a9c0ce..8a5e520934 100644 --- a/packages/ui-components/src/theme.css +++ b/packages/ui-components/src/theme.css @@ -961,7 +961,7 @@ --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3); --box-shadow-hover: 0 1px 2px 0 rgba(34, 54, 73, 0.3); /* DT Description - DescriptionList, DescriptionTerm, DescriptionDefinition */ - --color-dt-background: var(--color-background-lvl-1); + --color-dt-background: var(--color-background-lvl-0); --color-dt-text: var(--color-text-high); --color-dd-background: var(--color-transparent); --color-dd-text: var(--color-text-high); From 868b4ddab738c5ce976e9959644987f0347e4749 Mon Sep 17 00:00:00 2001 From: I531348 Date: Wed, 17 Dec 2025 14:09:17 +0100 Subject: [PATCH 5/5] update design --- .../DescriptionDefinition.component.tsx | 2 +- .../description-definition.css | 9 ++-- .../DescriptionList.stories.tsx | 48 ++----------------- .../DescriptionList/description-list.css | 18 +++++-- .../DescriptionTerm.component.tsx | 2 +- .../DescriptionTerm/description-term.css | 11 +++-- packages/ui-components/src/global.css | 4 +- packages/ui-components/src/theme.css | 4 +- 8 files changed, 35 insertions(+), 63 deletions(-) diff --git a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx index 967adb3daa..9b66fb0bd2 100644 --- a/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx +++ b/packages/ui-components/src/components/DescriptionDefinition/DescriptionDefinition.component.tsx @@ -22,7 +22,7 @@ export interface DescriptionDefinitionProps { * Pairs with DescriptionTerm to complete the term-description association, offering flexible content styling. */ export const DescriptionDefinition: React.FC = ({ children, className = "" }) => ( -
{children}
+
{children}
) export const DD = DescriptionDefinition diff --git a/packages/ui-components/src/components/DescriptionDefinition/description-definition.css b/packages/ui-components/src/components/DescriptionDefinition/description-definition.css index 7f3d04f886..8b835c1c72 100644 --- a/packages/ui-components/src/components/DescriptionDefinition/description-definition.css +++ b/packages/ui-components/src/components/DescriptionDefinition/description-definition.css @@ -4,11 +4,12 @@ */ .dd { + display: grid; + align-items: center; + border-bottom: 1px solid var(--color-dd-dt-border); background-color: var(--color-dd-background); color: var(--color-dd-text); - display: flex; - align-items: center; - height: 2rem; - padding: 0.5rem; gap: 0.25rem; + grid-column: 2; + height: 2rem; } diff --git a/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx b/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx index faf278da3b..f2dd4d296f 100644 --- a/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/packages/ui-components/src/components/DescriptionList/DescriptionList.stories.tsx @@ -39,53 +39,11 @@ export const MultipleDefinitions: Story = {
Shipping
Standard shipping: 5-7 business days.
-
Express shipping: 2-3 business days.
Payment Options
Credit/Debit cards, PayPal, and bank transfer.
- - ), -} - -export const GroupedDefinitions: Story = { - render: (args) => ( - -
-
Privacy Policy
-
We value your privacy and ensure data protection.
-
Your information will not be shared without consent.
-
Regular audits are conducted for security assurance.
-
-
-
Terms of Service
-
By using our services, you agree to our terms.
-
- - ), -} - -/** - * You can wrap a term with multiple definitions in a
for grouping. - */ -export const UserProfileDetails: Story = { - render: (args) => ( - -
-
Full Name
-
John Doe
-
-
-
Email
-
johndoe@example.com
-
-
-
Membership
-
Platinum Member
-
Joined: January 2020
-
-
-
Preferences
-
Language: English
-
Theme: Dark
+
+
Delivery Time
+
1 day, 2 days, 3 days.
), diff --git a/packages/ui-components/src/components/DescriptionList/description-list.css b/packages/ui-components/src/components/DescriptionList/description-list.css index 75ed0a8728..ad1f8526b9 100644 --- a/packages/ui-components/src/components/DescriptionList/description-list.css +++ b/packages/ui-components/src/components/DescriptionList/description-list.css @@ -4,7 +4,19 @@ */ .dl { - display: flex; - flex-direction: row; - gap: 0.25rem; + display: grid; + grid-template-columns: 1fr 2fr; + padding: 0.5rem; +} + +.dl > div { + display: contents; +} + +.dl > div > .dt { + grid-column: 1; +} + +.dl > div > .dd { + grid-column: 2; } diff --git a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx index 842ec47434..f9c5dea1d1 100644 --- a/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx +++ b/packages/ui-components/src/components/DescriptionTerm/DescriptionTerm.component.tsx @@ -22,7 +22,7 @@ export interface DescriptionTermProps { * Used to denote terms, headers, or keys in a semantic way, allowing for flexible styling. */ export const DescriptionTerm: React.FC = ({ children, className = "" }) => ( -
{children}
+
{children}
) export const DT = DescriptionTerm diff --git a/packages/ui-components/src/components/DescriptionTerm/description-term.css b/packages/ui-components/src/components/DescriptionTerm/description-term.css index 8b2c76f4ed..8c0cdf0245 100644 --- a/packages/ui-components/src/components/DescriptionTerm/description-term.css +++ b/packages/ui-components/src/components/DescriptionTerm/description-term.css @@ -4,13 +4,14 @@ */ .dt { + display: grid; + align-items: center; + border-bottom: 1px solid var(--color-dd-dt-border); background-color: var(--color-dt-background); - font-weight: bold; color: var(--color-dt-text); - display: flex; - align-items: center; + font-weight: bold; + gap: 0.25rem; + grid-column: 1; height: 2rem; - padding: 0.5rem; white-space: nowrap; - gap: 0.25rem; } diff --git a/packages/ui-components/src/global.css b/packages/ui-components/src/global.css index ba80e6ef58..095e7035c9 100644 --- a/packages/ui-components/src/global.css +++ b/packages/ui-components/src/global.css @@ -731,7 +731,7 @@ --color-dd-background: var(--color-transparent); --color-dd-text: var(--color-text-high); --color-dd-dt-border: var(--color-border-default); - --color-border-default: var(--color-juno-grey-blue-3); + --color-border-default: var(--color-juno-grey-light-7); } /* JUNO THEME: DARK MODE */ @@ -976,7 +976,7 @@ --color-dd-background: var(--color-transparent); --color-dd-text: var(--color-text-high); --color-dd-dt-border: var(--color-border-default); - --color-border-default: var(--color-juno-grey-light-7); + --color-border-default: var(--color-juno-grey-blue-3); } /* diff --git a/packages/ui-components/src/theme.css b/packages/ui-components/src/theme.css index 8a5e520934..03f5718531 100644 --- a/packages/ui-components/src/theme.css +++ b/packages/ui-components/src/theme.css @@ -721,7 +721,7 @@ --color-dd-background: var(--color-transparent); --color-dd-text: var(--color-text-high); --color-dd-dt-border: var(--color-border-default); - --color-border-default: var(--color-juno-grey-blue-3); + --color-border-default: var(--color-juno-grey-light-7); } /* JUNO THEME: DARK MODE */ @@ -966,7 +966,7 @@ --color-dd-background: var(--color-transparent); --color-dd-text: var(--color-text-high); --color-dd-dt-border: var(--color-border-default); - --color-border-default: var(--color-juno-grey-light-7); + --color-border-default: var(--color-juno-grey-blue-3); } /*