From 0647e08d29d64f88ea777daabfea244d9590218f Mon Sep 17 00:00:00 2001 From: I531348 Date: Wed, 6 Nov 2024 22:03:55 +0100 Subject: [PATCH 1/5] chore(ui): convert Grid, GridColumn and GridRow to Typescript --- .changeset/bright-adults-applaud.md | 5 + .../src/components/Grid/Grid.component.tsx | 44 +++++ .../src/components/Grid/Grid.stories.tsx | 154 ++++++++++++++++++ .../src/components/Grid/Grid.test.tsx | 37 +++++ .../components/Grid/{index.js => index.ts} | 0 .../GridColumn/GridColumn.component.tsx | 97 +++++++++++ .../GridColumn/GridColumn.stories.tsx | 51 ++++++ .../components/GridColumn/GridColumn.test.tsx | 44 +++++ .../GridColumn/{index.js => index.ts} | 0 .../components/GridRow/GridRow.component.tsx | 36 ++++ .../components/GridRow/GridRow.stories.tsx | 49 ++++++ .../src/components/GridRow/GridRow.test.tsx | 22 +++ .../components/GridRow/{index.js => index.ts} | 0 .../Grid/Grid.component.js | 0 .../Grid/Grid.stories.js | 0 .../Grid/Grid.test.js | 0 .../src/deprecated_js/Grid/index.js | 6 + .../GridColumn/GridColumn.component.js | 0 .../GridColumn/GridColumn.stories.js | 0 .../GridColumn/GridColumn.test.js | 0 .../src/deprecated_js/GridColumn/index.js | 6 + .../GridRow/GridRow.component.js | 0 .../GridRow/GridRow.stories.js | 0 .../GridRow/GridRow.test.js | 0 .../src/deprecated_js/GridRow/index.js | 6 + 25 files changed, 557 insertions(+) create mode 100644 .changeset/bright-adults-applaud.md create mode 100644 packages/ui-components/src/components/Grid/Grid.component.tsx create mode 100644 packages/ui-components/src/components/Grid/Grid.stories.tsx create mode 100644 packages/ui-components/src/components/Grid/Grid.test.tsx rename packages/ui-components/src/components/Grid/{index.js => index.ts} (100%) create mode 100644 packages/ui-components/src/components/GridColumn/GridColumn.component.tsx create mode 100644 packages/ui-components/src/components/GridColumn/GridColumn.stories.tsx create mode 100644 packages/ui-components/src/components/GridColumn/GridColumn.test.tsx rename packages/ui-components/src/components/GridColumn/{index.js => index.ts} (100%) create mode 100644 packages/ui-components/src/components/GridRow/GridRow.component.tsx create mode 100644 packages/ui-components/src/components/GridRow/GridRow.stories.tsx create mode 100644 packages/ui-components/src/components/GridRow/GridRow.test.tsx rename packages/ui-components/src/components/GridRow/{index.js => index.ts} (100%) rename packages/ui-components/src/{components => deprecated_js}/Grid/Grid.component.js (100%) rename packages/ui-components/src/{components => deprecated_js}/Grid/Grid.stories.js (100%) rename packages/ui-components/src/{components => deprecated_js}/Grid/Grid.test.js (100%) create mode 100644 packages/ui-components/src/deprecated_js/Grid/index.js rename packages/ui-components/src/{components => deprecated_js}/GridColumn/GridColumn.component.js (100%) rename packages/ui-components/src/{components => deprecated_js}/GridColumn/GridColumn.stories.js (100%) rename packages/ui-components/src/{components => deprecated_js}/GridColumn/GridColumn.test.js (100%) create mode 100644 packages/ui-components/src/deprecated_js/GridColumn/index.js rename packages/ui-components/src/{components => deprecated_js}/GridRow/GridRow.component.js (100%) rename packages/ui-components/src/{components => deprecated_js}/GridRow/GridRow.stories.js (100%) rename packages/ui-components/src/{components => deprecated_js}/GridRow/GridRow.test.js (100%) create mode 100644 packages/ui-components/src/deprecated_js/GridRow/index.js diff --git a/.changeset/bright-adults-applaud.md b/.changeset/bright-adults-applaud.md new file mode 100644 index 000000000..40083c1bd --- /dev/null +++ b/.changeset/bright-adults-applaud.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-ui-components": minor +--- + +Migrate Grid, GridColumn and GridRow components to TypeScript diff --git a/packages/ui-components/src/components/Grid/Grid.component.tsx b/packages/ui-components/src/components/Grid/Grid.component.tsx new file mode 100644 index 000000000..72991b975 --- /dev/null +++ b/packages/ui-components/src/components/Grid/Grid.component.tsx @@ -0,0 +1,44 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" + +// Styles to apply when the 'auto' prop is true, overriding default grid column properties +const autoStyles = { + "--grid-column-flex-grow": "1", + "--grid-column-flex-shrink": "0", + "--grid-column-flex-basis": "0", + "--grid-column-default-width": "auto", +} + +export interface GridProps extends React.HTMLAttributes { + /** + * Controls whether columns should auto-size. + * If true, this will override the default 12-column grid layout. + */ + auto?: boolean + /** + * Elements to be rendered within the grid. + */ + children?: React.ReactNode + /** + * Additional CSS classes to apply to the grid for custom styling. + */ + className?: string +} + +/** + * A general-use grid component. + * Used in conjunction with GridColumn and GridRow components to create a flexible grid layout. + */ +export const Grid: React.FC = ({ auto = false, children = null, className = "", ...props }) => { + const gridStyles = auto ? autoStyles : {} + + return ( +
+ {children} +
+ ) +} diff --git a/packages/ui-components/src/components/Grid/Grid.stories.tsx b/packages/ui-components/src/components/Grid/Grid.stories.tsx new file mode 100644 index 000000000..82908cc0f --- /dev/null +++ b/packages/ui-components/src/components/Grid/Grid.stories.tsx @@ -0,0 +1,154 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" +import { StoryFn, Meta } from "@storybook/react" +import { Grid } from "./Grid.component" +import { GridRow } from "../GridRow/GridRow.component" +import { GridColumn } from "../GridColumn/GridColumn.component" + +export default { + title: "Layout/Grid/Grid", + component: Grid, + argTypes: { + children: { control: false }, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} as Meta + +const Template: StoryFn = (args) => + +export const Default = { + render: Template, + parameters: { + docs: { + description: { + story: + "By default, Juno uses a 12-column fluid grid. Columns can be made to span multiple columns by passing `cols={n}`.", + }, + }, + }, + args: { + children: [ + + Column + Column + Column + Column + Column + Column + Column + Column + Column + Column + Column + Column + , + + Column + Column cols-3 + Column cols-5 + Column cols-2 + , + ], + }, +} + +export const Auto = { + render: Template, + parameters: { + docs: { + description: { + story: + "By passing `auto` to the grid, all of its contained columns will automatically size to share available space equally. Columns with `cols={n}` will switch their behaviour to auto-size.", + }, + }, + }, + args: { + auto: true, + children: [ + + Column + Column + Column + Column + Column + , + + Column + Column + Column + , + + Column + Column + Column + Column + Column + Column + Column + Column + , + ], + }, +} + +export const MixedGrid = { + render: Template, + args: { + children: ( + + Column + Auto Column + Column 10% + Column cols-3 + + ), + }, +} + +export const MixedAutoGrid = { + render: Template, + args: { + auto: true, + children: ( + + Column + Auto Column + Column 10% + Column cols-3 + + ), + }, +} + +export const NestedGrid = { + render: Template, + args: { + children: ( + + Column cols-3 + + + + + Nested Column 33.333333% + + + Nested Column 66.666666% + + + + + + ), + }, +} diff --git a/packages/ui-components/src/components/Grid/Grid.test.tsx b/packages/ui-components/src/components/Grid/Grid.test.tsx new file mode 100644 index 000000000..6f772ab23 --- /dev/null +++ b/packages/ui-components/src/components/Grid/Grid.test.tsx @@ -0,0 +1,37 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import * as React from "react" +import { render, screen } from "@testing-library/react" +import { describe, expect, test } from "vitest" + +import { Grid } from "./Grid.component" + +describe("Grid", () => { + test("renders a Grid container", () => { + render() + expect(screen.getByTestId("my-grid")).toBeInTheDocument() + }) + + test("renders a custom className", () => { + render() + expect(screen.getByTestId("my-grid")).toHaveClass("my-grid-class") + }) + + test("has modified CSS variables in a style tag for auto grids", () => { + render() + const gridElement = screen.getByTestId("my-auto-grid") + + // Ensure element is in the document before accessing style + expect(gridElement).toBeInTheDocument() + + // Cast elem style as CSSStyleDeclaration to ensure type safety + const style = gridElement.style + + expect(style.getPropertyValue("--grid-column-flex-grow")).toBe("1") + expect(style.getPropertyValue("--grid-column-flex-shrink")).toBe("0") + expect(style.getPropertyValue("--grid-column-flex-basis")).toBe("0") + }) +}) diff --git a/packages/ui-components/src/components/Grid/index.js b/packages/ui-components/src/components/Grid/index.ts similarity index 100% rename from packages/ui-components/src/components/Grid/index.js rename to packages/ui-components/src/components/Grid/index.ts diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.component.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.component.tsx new file mode 100644 index 000000000..4c9593cb9 --- /dev/null +++ b/packages/ui-components/src/components/GridColumn/GridColumn.component.tsx @@ -0,0 +1,97 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" + +const baseColumnStyles = ` + jn-flex-grid-column + jn-p-grid-column +` + +const columnWidthStyles: { [key: number]: string } = { + 0: "jn-w-grid-column-default", + 1: "jn-w-grid-col-1", + 2: "jn-w-grid-col-2", + 3: "jn-w-grid-col-3", + 4: "jn-w-grid-col-4", + 5: "jn-w-grid-col-5", + 6: "jn-w-grid-col-6", + 7: "jn-w-grid-col-7", + 8: "jn-w-grid-col-8", + 9: "jn-w-grid-col-9", + 10: "jn-w-grid-col-10", + 11: "jn-w-grid-col-11", + 12: "jn-w-grid-col-12", +} + +const autoColumnStyles: React.CSSProperties = { + flexGrow: 1, + flexShrink: 0, + flexBasis: "0%", +} + +// Get column class based on `cols` prop value +const getColumnWidthStyles = (cols: number | null): string => { + if (!cols || cols < 1 || cols > 12) return columnWidthStyles[0] + return columnWidthStyles[cols] +} + +export interface GridColumnProps extends React.HTMLAttributes { + /** + * The number of columns to span the column over. + */ + cols?: number + /** + * The width in percent. + * If a width is given, it will override the 'cols' prop. + */ + width?: number + /** + * Determines whether the column should set an auto width. + */ + auto?: boolean + /** + * Additional CSS classes to apply to the grid column for custom styling. + */ + className?: string + /** + * Content to be rendered inside the column. + */ + children?: React.ReactNode +} + +/** + * A flexible grid column component used within a Grid. + */ +export const GridColumn: React.FC = ({ + width = null, + cols = null, + auto = false, + className = "", + children = null, + ...props +}) => { + const widthBasedStyles: React.CSSProperties = width + ? { + width: `${width}%`, + flexGrow: 0, + flexShrink: 0, + flexBasis: `${width}%`, + } + : {} + + // Determine final styles based on width or auto props + const finalColumnStyles: React.CSSProperties = width ? widthBasedStyles : auto ? autoColumnStyles : {} + + return ( +
+ {children} +
+ ) +} diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.stories.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.stories.tsx new file mode 100644 index 000000000..fb8012974 --- /dev/null +++ b/packages/ui-components/src/components/GridColumn/GridColumn.stories.tsx @@ -0,0 +1,51 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" +import { StoryFn, Meta } from "@storybook/react" + +import { GridColumn, GridColumnProps } from "./GridColumn.component" // Ensure the type is imported correctly + +export default { + title: "Layout/Grid/GridColumn", + component: GridColumn, + argTypes: { + children: { + control: false, + }, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} as Meta + +const Template: StoryFn = (args) => + +export const Default = { + render: Template, + args: { + children: "Column", + }, +} + +export const AutoColumn = { + render: Template, + args: { + auto: true, + children: "Auto Column", + }, +} + +export const WidthColumn = { + render: Template, + args: { + width: 50, + children: "Column 50%", + }, +} diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx new file mode 100644 index 000000000..b95d91efe --- /dev/null +++ b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx @@ -0,0 +1,44 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import * as React from "react" +import { render, screen } from "@testing-library/react" +import { describe, expect, test } from "vitest" + +import { GridColumn } from "./GridColumn.component" + +describe("GridColumn", () => { + test("renders a Grid row", () => { + render() + expect(screen.getByTestId("my-grid-column")).toBeInTheDocument() + }) + + test("renders a custom className", () => { + render() + expect(screen.getByTestId("my-grid-column")).toHaveClass("my-grid-column-class") + }) + + test("renders modified 'auto' styles when passed", () => { + render() + const autoColumn = screen.getByTestId("my-auto-column") + const styles = window.getComputedStyle(autoColumn) + + expect(autoColumn).toHaveAttribute("style") + expect(styles.flexGrow).toBe("1") + expect(styles.flexShrink).toBe("0") + expect(styles.flexBasis).toBe("0px") + }) + + test("renders width-related styles in a style tag when passed", () => { + render() + const widthColumn = screen.getByTestId("my-width-column") + const styles = window.getComputedStyle(widthColumn) + + expect(widthColumn).toHaveAttribute("style") + expect(styles.width).toBe("73%") + expect(styles.flexShrink).toBe("0") + expect(styles.flexBasis).toBe("73%") + }) +}) diff --git a/packages/ui-components/src/components/GridColumn/index.js b/packages/ui-components/src/components/GridColumn/index.ts similarity index 100% rename from packages/ui-components/src/components/GridColumn/index.js rename to packages/ui-components/src/components/GridColumn/index.ts diff --git a/packages/ui-components/src/components/GridRow/GridRow.component.tsx b/packages/ui-components/src/components/GridRow/GridRow.component.tsx new file mode 100644 index 000000000..766b2357d --- /dev/null +++ b/packages/ui-components/src/components/GridRow/GridRow.component.tsx @@ -0,0 +1,36 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" + +const baseRowStyles = ` + jn-flex + jn-flex-wrap + jn-m-grid-row +` + +export interface GridRowProps extends React.HTMLAttributes { + /** + * Elements to be rendered within the grid row. + * Typically, these would be GridColumn components. + */ + children?: React.ReactNode + /** + * Additional CSS classes to apply to the grid row for custom styling. + */ + className?: string +} + +/** + * A grid row container to hold GridColumn elements inside a Grid. + * This component ensures that its children are wrapped correctly in a flexbox layout. + */ +export const GridRow: React.FC = ({ children = null, className = "", ...props }) => { + return ( +
+ {children} +
+ ) +} diff --git a/packages/ui-components/src/components/GridRow/GridRow.stories.tsx b/packages/ui-components/src/components/GridRow/GridRow.stories.tsx new file mode 100644 index 000000000..baaa4444b --- /dev/null +++ b/packages/ui-components/src/components/GridRow/GridRow.stories.tsx @@ -0,0 +1,49 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from "react" +import { StoryFn, Meta } from "@storybook/react" + +import { GridRow } from "./GridRow.component" +import { GridColumn } from "../GridColumn/GridColumn.component" + +export default { + title: "Layout/Grid/GridRow", + component: GridRow, + argTypes: { + children: { + control: false, + }, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} as Meta + +const Template: StoryFn = (args) => + +export const Default = { + render: Template, + args: { + children: [ + Column, + Column, + Column, + Column, + Column, + Column, + Column, + Column, + Column, + Column, + Column, + Column, + ], + }, +} as Meta diff --git a/packages/ui-components/src/components/GridRow/GridRow.test.tsx b/packages/ui-components/src/components/GridRow/GridRow.test.tsx new file mode 100644 index 000000000..394de26bd --- /dev/null +++ b/packages/ui-components/src/components/GridRow/GridRow.test.tsx @@ -0,0 +1,22 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import * as React from "react" +import { render, screen } from "@testing-library/react" +import { describe, expect, test } from "vitest" + +import { GridRow } from "./GridRow.component" + +describe("GridRow", () => { + test("renders a Grid row", () => { + render() + expect(screen.getByTestId("my-grid-row")).toBeInTheDocument() + }) + + test("renders a custom className", () => { + render() + expect(screen.getByTestId("my-grid-row")).toHaveClass("my-grid-row-class") + }) +}) diff --git a/packages/ui-components/src/components/GridRow/index.js b/packages/ui-components/src/components/GridRow/index.ts similarity index 100% rename from packages/ui-components/src/components/GridRow/index.js rename to packages/ui-components/src/components/GridRow/index.ts diff --git a/packages/ui-components/src/components/Grid/Grid.component.js b/packages/ui-components/src/deprecated_js/Grid/Grid.component.js similarity index 100% rename from packages/ui-components/src/components/Grid/Grid.component.js rename to packages/ui-components/src/deprecated_js/Grid/Grid.component.js diff --git a/packages/ui-components/src/components/Grid/Grid.stories.js b/packages/ui-components/src/deprecated_js/Grid/Grid.stories.js similarity index 100% rename from packages/ui-components/src/components/Grid/Grid.stories.js rename to packages/ui-components/src/deprecated_js/Grid/Grid.stories.js diff --git a/packages/ui-components/src/components/Grid/Grid.test.js b/packages/ui-components/src/deprecated_js/Grid/Grid.test.js similarity index 100% rename from packages/ui-components/src/components/Grid/Grid.test.js rename to packages/ui-components/src/deprecated_js/Grid/Grid.test.js diff --git a/packages/ui-components/src/deprecated_js/Grid/index.js b/packages/ui-components/src/deprecated_js/Grid/index.js new file mode 100644 index 000000000..41f871d50 --- /dev/null +++ b/packages/ui-components/src/deprecated_js/Grid/index.js @@ -0,0 +1,6 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export { Grid } from "./Grid.component" diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.component.js b/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.component.js similarity index 100% rename from packages/ui-components/src/components/GridColumn/GridColumn.component.js rename to packages/ui-components/src/deprecated_js/GridColumn/GridColumn.component.js diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.stories.js b/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.stories.js similarity index 100% rename from packages/ui-components/src/components/GridColumn/GridColumn.stories.js rename to packages/ui-components/src/deprecated_js/GridColumn/GridColumn.stories.js diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.test.js b/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.test.js similarity index 100% rename from packages/ui-components/src/components/GridColumn/GridColumn.test.js rename to packages/ui-components/src/deprecated_js/GridColumn/GridColumn.test.js diff --git a/packages/ui-components/src/deprecated_js/GridColumn/index.js b/packages/ui-components/src/deprecated_js/GridColumn/index.js new file mode 100644 index 000000000..dd7d8750d --- /dev/null +++ b/packages/ui-components/src/deprecated_js/GridColumn/index.js @@ -0,0 +1,6 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export { GridColumn } from "./GridColumn.component" diff --git a/packages/ui-components/src/components/GridRow/GridRow.component.js b/packages/ui-components/src/deprecated_js/GridRow/GridRow.component.js similarity index 100% rename from packages/ui-components/src/components/GridRow/GridRow.component.js rename to packages/ui-components/src/deprecated_js/GridRow/GridRow.component.js diff --git a/packages/ui-components/src/components/GridRow/GridRow.stories.js b/packages/ui-components/src/deprecated_js/GridRow/GridRow.stories.js similarity index 100% rename from packages/ui-components/src/components/GridRow/GridRow.stories.js rename to packages/ui-components/src/deprecated_js/GridRow/GridRow.stories.js diff --git a/packages/ui-components/src/components/GridRow/GridRow.test.js b/packages/ui-components/src/deprecated_js/GridRow/GridRow.test.js similarity index 100% rename from packages/ui-components/src/components/GridRow/GridRow.test.js rename to packages/ui-components/src/deprecated_js/GridRow/GridRow.test.js diff --git a/packages/ui-components/src/deprecated_js/GridRow/index.js b/packages/ui-components/src/deprecated_js/GridRow/index.js new file mode 100644 index 000000000..732e40bee --- /dev/null +++ b/packages/ui-components/src/deprecated_js/GridRow/index.js @@ -0,0 +1,6 @@ +/* + * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export { GridRow } from "./GridRow.component" From 25471146a32efd8662cfbdf92365d71d06cb1410 Mon Sep 17 00:00:00 2001 From: I531348 Date: Wed, 6 Nov 2024 22:22:40 +0100 Subject: [PATCH 2/5] chore(ui): fix failing tests --- .../components/GridColumn/GridColumn.component.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.component.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.component.tsx index 4c9593cb9..9228ed170 100644 --- a/packages/ui-components/src/components/GridColumn/GridColumn.component.tsx +++ b/packages/ui-components/src/components/GridColumn/GridColumn.component.tsx @@ -6,8 +6,8 @@ import React from "react" const baseColumnStyles = ` - jn-flex-grid-column - jn-p-grid-column + jn-flex-grid-column + jn-p-grid-column ` const columnWidthStyles: { [key: number]: string } = { @@ -27,9 +27,9 @@ const columnWidthStyles: { [key: number]: string } = { } const autoColumnStyles: React.CSSProperties = { - flexGrow: 1, - flexShrink: 0, - flexBasis: "0%", + flexGrow: "1", + flexShrink: "0", + flexBasis: "0", } // Get column class based on `cols` prop value @@ -76,8 +76,8 @@ export const GridColumn: React.FC = ({ const widthBasedStyles: React.CSSProperties = width ? { width: `${width}%`, - flexGrow: 0, - flexShrink: 0, + flexGrow: "0", + flexShrink: "0", flexBasis: `${width}%`, } : {} From 6f4ca88e31ac1dea80b9869efe4e55dd7ee1e086 Mon Sep 17 00:00:00 2001 From: I531348 Date: Wed, 6 Nov 2024 22:59:07 +0100 Subject: [PATCH 3/5] chore(ui): group tests --- .../src/components/Grid/Grid.test.tsx | 40 +++++++------ .../components/GridColumn/GridColumn.test.tsx | 58 ++++++++++--------- .../src/components/GridRow/GridRow.test.tsx | 16 +++-- 3 files changed, 65 insertions(+), 49 deletions(-) diff --git a/packages/ui-components/src/components/Grid/Grid.test.tsx b/packages/ui-components/src/components/Grid/Grid.test.tsx index 6f772ab23..43d218ebd 100644 --- a/packages/ui-components/src/components/Grid/Grid.test.tsx +++ b/packages/ui-components/src/components/Grid/Grid.test.tsx @@ -9,29 +9,35 @@ import { describe, expect, test } from "vitest" import { Grid } from "./Grid.component" -describe("Grid", () => { - test("renders a Grid container", () => { - render() - expect(screen.getByTestId("my-grid")).toBeInTheDocument() +describe("Grid Component", () => { + describe("Basic Rendering", () => { + test("renders a Grid container", () => { + render() + expect(screen.getByTestId("my-grid")).toBeInTheDocument() + }) }) - test("renders a custom className", () => { - render() - expect(screen.getByTestId("my-grid")).toHaveClass("my-grid-class") + describe("Class Names", () => { + test("renders a custom className", () => { + render() + expect(screen.getByTestId("my-grid")).toHaveClass("my-grid-class") + }) }) - test("has modified CSS variables in a style tag for auto grids", () => { - render() - const gridElement = screen.getByTestId("my-auto-grid") + describe("Inline Styles and Auto Prop", () => { + test("has modified CSS variables in a style tag for auto grids", () => { + render() + const gridElement = screen.getByTestId("my-auto-grid") - // Ensure element is in the document before accessing style - expect(gridElement).toBeInTheDocument() + // Ensure element is in the document before accessing style + expect(gridElement).toBeInTheDocument() - // Cast elem style as CSSStyleDeclaration to ensure type safety - const style = gridElement.style + // Cast elem style as CSSStyleDeclaration to ensure type safety + const style = gridElement.style - expect(style.getPropertyValue("--grid-column-flex-grow")).toBe("1") - expect(style.getPropertyValue("--grid-column-flex-shrink")).toBe("0") - expect(style.getPropertyValue("--grid-column-flex-basis")).toBe("0") + expect(style.getPropertyValue("--grid-column-flex-grow")).toBe("1") + expect(style.getPropertyValue("--grid-column-flex-shrink")).toBe("0") + expect(style.getPropertyValue("--grid-column-flex-basis")).toBe("0") + }) }) }) diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx index b95d91efe..d13e9859c 100644 --- a/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx +++ b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx @@ -10,35 +10,41 @@ import { describe, expect, test } from "vitest" import { GridColumn } from "./GridColumn.component" describe("GridColumn", () => { - test("renders a Grid row", () => { - render() - expect(screen.getByTestId("my-grid-column")).toBeInTheDocument() + describe("Basic Rendering", () => { + test("renders a Grid row", () => { + render() + expect(screen.getByTestId("my-grid-column")).toBeInTheDocument() + }) }) - test("renders a custom className", () => { - render() - expect(screen.getByTestId("my-grid-column")).toHaveClass("my-grid-column-class") + describe("Class Names", () => { + test("renders a custom className", () => { + render() + expect(screen.getByTestId("my-grid-column")).toHaveClass("my-grid-column-class") + }) }) - test("renders modified 'auto' styles when passed", () => { - render() - const autoColumn = screen.getByTestId("my-auto-column") - const styles = window.getComputedStyle(autoColumn) - - expect(autoColumn).toHaveAttribute("style") - expect(styles.flexGrow).toBe("1") - expect(styles.flexShrink).toBe("0") - expect(styles.flexBasis).toBe("0px") - }) - - test("renders width-related styles in a style tag when passed", () => { - render() - const widthColumn = screen.getByTestId("my-width-column") - const styles = window.getComputedStyle(widthColumn) - - expect(widthColumn).toHaveAttribute("style") - expect(styles.width).toBe("73%") - expect(styles.flexShrink).toBe("0") - expect(styles.flexBasis).toBe("73%") + describe("Inline Styles and Auto Prop", () => { + test("renders modified 'auto' styles when passed", () => { + render() + const autoColumn = screen.getByTestId("my-auto-column") + const styles = window.getComputedStyle(autoColumn) + + expect(autoColumn).toHaveAttribute("style") + expect(styles.flexGrow).toBe("1") + expect(styles.flexShrink).toBe("0") + expect(styles.flexBasis).toBe("0px") + }) + + test("renders width-related styles in a style tag when passed", () => { + render() + const widthColumn = screen.getByTestId("my-width-column") + const styles = window.getComputedStyle(widthColumn) + + expect(widthColumn).toHaveAttribute("style") + expect(styles.width).toBe("73%") + expect(styles.flexShrink).toBe("0") + expect(styles.flexBasis).toBe("73%") + }) }) }) diff --git a/packages/ui-components/src/components/GridRow/GridRow.test.tsx b/packages/ui-components/src/components/GridRow/GridRow.test.tsx index 394de26bd..f24c4425d 100644 --- a/packages/ui-components/src/components/GridRow/GridRow.test.tsx +++ b/packages/ui-components/src/components/GridRow/GridRow.test.tsx @@ -10,13 +10,17 @@ import { describe, expect, test } from "vitest" import { GridRow } from "./GridRow.component" describe("GridRow", () => { - test("renders a Grid row", () => { - render() - expect(screen.getByTestId("my-grid-row")).toBeInTheDocument() + describe("Basic Rendering", () => { + test("renders a Grid row", () => { + render() + expect(screen.getByTestId("my-grid-row")).toBeInTheDocument() + }) }) - test("renders a custom className", () => { - render() - expect(screen.getByTestId("my-grid-row")).toHaveClass("my-grid-row-class") + describe("Class Names", () => { + test("renders a custom className", () => { + render() + expect(screen.getByTestId("my-grid-row")).toHaveClass("my-grid-row-class") + }) }) }) From 28dc6becae5fdd702d22b7ded014648d9bcfda7d Mon Sep 17 00:00:00 2001 From: I531348 Date: Wed, 6 Nov 2024 23:09:30 +0100 Subject: [PATCH 4/5] chore(ui): add edge case tests --- .../src/components/Grid/Grid.test.tsx | 49 ++++++++++++++++++- .../components/GridColumn/GridColumn.test.tsx | 38 ++++++++++++++ .../src/components/GridRow/GridRow.test.tsx | 17 +++++++ 3 files changed, 103 insertions(+), 1 deletion(-) diff --git a/packages/ui-components/src/components/Grid/Grid.test.tsx b/packages/ui-components/src/components/Grid/Grid.test.tsx index 43d218ebd..fca8a03a9 100644 --- a/packages/ui-components/src/components/Grid/Grid.test.tsx +++ b/packages/ui-components/src/components/Grid/Grid.test.tsx @@ -15,6 +15,18 @@ describe("Grid Component", () => { render() expect(screen.getByTestId("my-grid")).toBeInTheDocument() }) + + test("renders children elements correctly", () => { + render( + +
Child 1
+
Child 2
+ + ) + + expect(screen.getByTestId("child1")).toBeInTheDocument() + expect(screen.getByTestId("child2")).toBeInTheDocument() + }) }) describe("Class Names", () => { @@ -22,6 +34,11 @@ describe("Grid Component", () => { render() expect(screen.getByTestId("my-grid")).toHaveClass("my-grid-class") }) + + test("applies default className when no custom className is provided", () => { + render() + expect(screen.getByTestId("my-default-grid")).toHaveClass("juno-grid") + }) }) describe("Inline Styles and Auto Prop", () => { @@ -32,12 +49,42 @@ describe("Grid Component", () => { // Ensure element is in the document before accessing style expect(gridElement).toBeInTheDocument() - // Cast elem style as CSSStyleDeclaration to ensure type safety + // Cast element style as CSSStyleDeclaration to ensure type safety const style = gridElement.style expect(style.getPropertyValue("--grid-column-flex-grow")).toBe("1") expect(style.getPropertyValue("--grid-column-flex-shrink")).toBe("0") expect(style.getPropertyValue("--grid-column-flex-basis")).toBe("0") }) + + test("does not apply auto styles when 'auto' prop is false", () => { + render() + const gridElement = screen.getByTestId("my-standard-grid") + + const style = gridElement.style + + // Ensure auto grid styles are not applied + expect(style.getPropertyValue("--grid-column-flex-grow")).toBe("") + expect(style.getPropertyValue("--grid-column-flex-shrink")).toBe("") + expect(style.getPropertyValue("--grid-column-flex-basis")).toBe("") + }) + + test("applies custom styles", () => { + render() + const gridElement = screen.getByTestId("my-grid") + const style = gridElement.style + + expect(style.backgroundColor).toBe("red") + }) + + test("applies no styles when neither auto nor style prop is provided", () => { + render() + const gridElement = screen.getByTestId("my-no-styles-grid") + const style = gridElement.style + + expect(style.flexGrow).toBe("") + expect(style.flexShrink).toBe("") + expect(style.flexBasis).toBe("") + }) }) }) diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx index d13e9859c..f3519dad9 100644 --- a/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx +++ b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx @@ -15,6 +15,23 @@ describe("GridColumn", () => { render() expect(screen.getByTestId("my-grid-column")).toBeInTheDocument() }) + + test("renders children elements correctly", () => { + render( + +
Child 1
+
Child 2
+ + ) + + expect(screen.getByTestId("child1")).toBeInTheDocument() + expect(screen.getByTestId("child2")).toBeInTheDocument() + }) + + test("applies default className when no custom className is provided", () => { + render() + expect(screen.getByTestId("my-default-grid-column")).toHaveClass("juno-grid-column") + }) }) describe("Class Names", () => { @@ -22,6 +39,16 @@ describe("GridColumn", () => { render() expect(screen.getByTestId("my-grid-column")).toHaveClass("my-grid-column-class") }) + + test("applies column width class based on 'cols' prop", () => { + render() + expect(screen.getByTestId("my-grid-column")).toHaveClass("jn-w-grid-col-6") + }) + + test("handles invalid 'cols' values gracefully", () => { + render() + expect(screen.getByTestId("my-invalid-cols-grid-column")).toHaveClass("jn-w-grid-column-default") + }) }) describe("Inline Styles and Auto Prop", () => { @@ -46,5 +73,16 @@ describe("GridColumn", () => { expect(styles.flexShrink).toBe("0") expect(styles.flexBasis).toBe("73%") }) + + test("renders no additional styles when neither 'width' nor 'auto' props are provided", () => { + render() + const defaultColumn = screen.getByTestId("my-default-styles-grid-column") + const styles = window.getComputedStyle(defaultColumn) + + expect(styles.flexGrow).toBe("") + expect(styles.flexShrink).toBe("") + expect(styles.flexBasis).toBe("") + expect(styles.width).toBe("") + }) }) }) diff --git a/packages/ui-components/src/components/GridRow/GridRow.test.tsx b/packages/ui-components/src/components/GridRow/GridRow.test.tsx index f24c4425d..a734ac2e9 100644 --- a/packages/ui-components/src/components/GridRow/GridRow.test.tsx +++ b/packages/ui-components/src/components/GridRow/GridRow.test.tsx @@ -15,6 +15,18 @@ describe("GridRow", () => { render() expect(screen.getByTestId("my-grid-row")).toBeInTheDocument() }) + + test("renders children elements correctly", () => { + render( + +
Child 1
+
Child 2
+ + ) + + expect(screen.getByTestId("child1")).toBeInTheDocument() + expect(screen.getByTestId("child2")).toBeInTheDocument() + }) }) describe("Class Names", () => { @@ -22,5 +34,10 @@ describe("GridRow", () => { render() expect(screen.getByTestId("my-grid-row")).toHaveClass("my-grid-row-class") }) + + test("applies default className when no custom className is provided", () => { + render() + expect(screen.getByTestId("my-default-grid-row")).toHaveClass("juno-grid-row") + }) }) }) From 740d2b6d92083060d13005bfc090ecf606126603 Mon Sep 17 00:00:00 2001 From: I531348 Date: Wed, 6 Nov 2024 23:13:59 +0100 Subject: [PATCH 5/5] chore(ui): remove depricated code --- .../src/deprecated_js/Grid/Grid.component.js | 37 ---- .../src/deprecated_js/Grid/Grid.stories.js | 159 ------------------ .../src/deprecated_js/Grid/Grid.test.js | 28 --- .../src/deprecated_js/Grid/index.js | 6 - .../GridColumn/GridColumn.component.js | 147 ---------------- .../GridColumn/GridColumn.stories.js | 48 ------ .../GridColumn/GridColumn.test.js | 36 ---- .../src/deprecated_js/GridColumn/index.js | 6 - .../GridRow/GridRow.component.js | 30 ---- .../deprecated_js/GridRow/GridRow.stories.js | 49 ------ .../src/deprecated_js/GridRow/GridRow.test.js | 20 --- .../src/deprecated_js/GridRow/index.js | 6 - packages/ui-components/src/index.js | 6 +- 13 files changed, 3 insertions(+), 575 deletions(-) delete mode 100644 packages/ui-components/src/deprecated_js/Grid/Grid.component.js delete mode 100644 packages/ui-components/src/deprecated_js/Grid/Grid.stories.js delete mode 100644 packages/ui-components/src/deprecated_js/Grid/Grid.test.js delete mode 100644 packages/ui-components/src/deprecated_js/Grid/index.js delete mode 100644 packages/ui-components/src/deprecated_js/GridColumn/GridColumn.component.js delete mode 100644 packages/ui-components/src/deprecated_js/GridColumn/GridColumn.stories.js delete mode 100644 packages/ui-components/src/deprecated_js/GridColumn/GridColumn.test.js delete mode 100644 packages/ui-components/src/deprecated_js/GridColumn/index.js delete mode 100644 packages/ui-components/src/deprecated_js/GridRow/GridRow.component.js delete mode 100644 packages/ui-components/src/deprecated_js/GridRow/GridRow.stories.js delete mode 100644 packages/ui-components/src/deprecated_js/GridRow/GridRow.test.js delete mode 100644 packages/ui-components/src/deprecated_js/GridRow/index.js diff --git a/packages/ui-components/src/deprecated_js/Grid/Grid.component.js b/packages/ui-components/src/deprecated_js/Grid/Grid.component.js deleted file mode 100644 index b8e768d66..000000000 --- a/packages/ui-components/src/deprecated_js/Grid/Grid.component.js +++ /dev/null @@ -1,37 +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 PropTypes from "prop-types" - -/** -A general-use grid. Use in conjunction with GridColumn and GridRow. -*/ - -export const Grid = ({ auto = false, children = null, className = "", ...props }) => { - // auto grid overrides for columns: - const autoStyles = { - "--grid-column-flex-grow": "1", - "--grid-column-flex-shrink": "0", - "--grid-column-flex-basis": "0", - "--grid-column-default-width": "auto", - } - // Override column vars in case 'auto' was passed: - const gridStyles = auto ? autoStyles : {} - return ( -
- {children} -
- ) -} - -Grid.propTypes = { - /** Whether columns should auto-size or not, default is false. This effectively overrides the 12-columns default grid */ - auto: PropTypes.bool, - /** The children to render in the grid */ - children: PropTypes.node, - /** Add a class to the grid container */ - className: PropTypes.string, -} diff --git a/packages/ui-components/src/deprecated_js/Grid/Grid.stories.js b/packages/ui-components/src/deprecated_js/Grid/Grid.stories.js deleted file mode 100644 index bb21a71f9..000000000 --- a/packages/ui-components/src/deprecated_js/Grid/Grid.stories.js +++ /dev/null @@ -1,159 +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 { Grid } from "./index.js" -import { GridRow } from "../GridRow/GridRow.component.js" -import { GridColumn } from "../GridColumn/GridColumn.component.js" - -export default { - title: "Layout/Grid/Grid", - component: Grid, - argTypes: { - children: { - control: false, - }, - }, - decorators: [(Story) => ], -} - -// for the decorator to work like this (passing props to the story) we have to access the passed props from the decorator -// from the context. This might be storybook 6.x-specific. Double check when we upgrade to storybook 7.x -const Template = (args, context) => - -export const Default = { - render: Template, - - parameters: { - docs: { - description: { - story: - "By default, Juno uses a 12-column fluid grid. Columns can be made to span multiple columns by passing `cols={n}`.", - }, - }, - }, - - args: { - children: [ - - Column - Column - Column - Column - Column - Column - Column - Column - Column - Column - Column - Column - , - - Column - Column cols-3 - Column cols-6 - Column cols-2 - , - ], - }, -} - -export const Auto = { - render: Template, - - parameters: { - docs: { - description: { - story: - "By passing `auto` to the grid, all of its contained columns will automatically size to share available space equally. Columns with `cols={n}` will switch their behaviour to auto-size.", - }, - }, - }, - - args: { - auto: true, - children: [ - - Column - Column - Column - Column - Column - , - - Column - Column - Column - , - - Column - Column - Column - Column - Column - Column - Column - Column - Column - , - ], - }, -} - -export const MixedGrid = { - render: Template, - - args: { - children: ( - - Column - Auto Column - Column 10% - Column cols-3 - - ), - }, -} - -export const MixedAutoGrid = { - render: Template, - - args: { - auto: true, - children: ( - - Column - Auto Column - Column 10% - Column cols-3 - - ), - }, -} - -export const NestedGrid = { - render: Template, - - args: { - children: ( - - Column cols-3 - - - - - Nested Column 33.333333% - - - Nested Column 66.666666% - - - - - - ), - }, -} diff --git a/packages/ui-components/src/deprecated_js/Grid/Grid.test.js b/packages/ui-components/src/deprecated_js/Grid/Grid.test.js deleted file mode 100644 index a28dd9e4d..000000000 --- a/packages/ui-components/src/deprecated_js/Grid/Grid.test.js +++ /dev/null @@ -1,28 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import * as React from "react" -import { render, screen } from "@testing-library/react" -import { Grid } from "./index" - -describe("Grid", () => { - test("renders a Grid container", async () => { - render() - expect(screen.getByTestId("my-grid")).toBeInTheDocument() - }) - - test("renders a custom className", async () => { - render() - expect(screen.getByTestId("my-grid")).toHaveClass("my-grid-class") - }) - - test("has modified CSS variables in a style tag for auto grids", async () => { - render() - expect(screen.getByTestId("my-auto-grid")).toHaveAttribute("style") - expect(document.querySelector(".juno-grid").style.getPropertyValue("--grid-column-flex-grow")).toBe("1") - expect(document.querySelector(".juno-grid").style.getPropertyValue("--grid-column-flex-shrink")).toBe("0") - expect(document.querySelector(".juno-grid").style.getPropertyValue("--grid-column-flex-basis")).toBe("0") - }) -}) diff --git a/packages/ui-components/src/deprecated_js/Grid/index.js b/packages/ui-components/src/deprecated_js/Grid/index.js deleted file mode 100644 index 41f871d50..000000000 --- a/packages/ui-components/src/deprecated_js/Grid/index.js +++ /dev/null @@ -1,6 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -export { Grid } from "./Grid.component" diff --git a/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.component.js b/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.component.js deleted file mode 100644 index a066af86c..000000000 --- a/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.component.js +++ /dev/null @@ -1,147 +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 PropTypes from "prop-types" - -// const autoColumnStyles = ` -// jn-grow -// jn-shrink-0 -// jn-flex-basis-0 -// ` -// const widthColumnStyles = ` -// jn-grow-0 -// jn-shrink-1 -// jn-flex-basis-auto -// ` - -const columnBaseStyles = ` - jn-flex-grid-column - jn-p-grid-column -` - -const cols_1 = ` - jn-w-grid-col-1 -` - -const cols_2 = ` - jn-w-grid-col-2 -` - -const cols_3 = ` - jn-w-grid-col-3 -` - -const cols_4 = ` - jn-w-grid-col-4 -` - -const cols_5 = ` - jn-w-grid-col-6 -` - -const cols_6 = ` - jn-w-grid-col-6 -` - -const cols_7 = ` - jn-w-grid-col-7 -` - -const cols_8 = ` - jn-w-grid-col-8 -` - -const cols_9 = ` - jn-w-grid-col-9 -` - -const cols_10 = ` - jn-w-grid-col-10 -` - -const cols_11 = ` - jn-w-grid-col-11 -` - -const cols_12 = ` - jn-w-grid-col-12 -` - -const colsClass = (cols) => { - switch (cols) { - case 1: - return cols_1 - case 2: - return cols_2 - case 3: - return cols_3 - case 4: - return cols_4 - case 5: - return cols_5 - case 6: - return cols_6 - case 7: - return cols_7 - case 8: - return cols_8 - case 9: - return cols_9 - case 10: - return cols_10 - case 11: - return cols_11 - case 12: - return cols_12 - default: - return "jn-w-grid-column-default" - } -} - -/** -A grid column to be used inside a Grid. -*/ -export const GridColumn = ({ width = null, cols = null, auto = false, className = "", children, ...props }) => { - // auto column: - const autoStyles = { - flexGrow: "1", - flexShrink: "0", - flexBasis: "0", - } - // width column: - const widthStyles = width - ? { - width: width + "%", - flexGrow: "0", - flexShrink: "0", - flexBasis: width + "%", - } - : {} - // width overrides auto: - const columnStyles = width ? widthStyles : auto ? autoStyles : {} - return ( -
- {children} -
- ) -} - -GridColumn.propTypes = { - /** The number of columns to span the column over. */ - cols: PropTypes.number, - /** The width in percent as a number without "%" for auto-layout grids TODO: or "auto". If a width is given, it will override the "cols" prop. */ - width: PropTypes.number, - /** Whether the colum should set an auto width */ - auto: PropTypes.bool, - /** Add a class to a grid column */ - className: PropTypes.string, - /** Children to be rendered in the column element */ - children: PropTypes.node, -} diff --git a/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.stories.js b/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.stories.js deleted file mode 100644 index dbf10a6b2..000000000 --- a/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.stories.js +++ /dev/null @@ -1,48 +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 { GridColumn } from "./index.js" - -export default { - title: "Layout/Grid/GridColumn", - component: GridColumn, - argTypes: { - children: { - control: false, - }, - }, - decorators: [(Story) => ], -} - -// for the decorator to work like this (passing props to the story) we have to access the passed props from the decorator -// from the context. This might be storybook 6.x-specific. Double check when we upgrade to storybook 7.x -const Template = (args, context) => - -export const Default = { - render: Template, - - args: { - children: "Column", - }, -} - -export const AutoColumn = { - render: Template, - - args: { - auto: true, - children: "Auto Column", - }, -} - -export const WidthColumn = { - render: Template, - - args: { - width: 50, - children: "Column 50%", - }, -} diff --git a/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.test.js b/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.test.js deleted file mode 100644 index 5fd25db81..000000000 --- a/packages/ui-components/src/deprecated_js/GridColumn/GridColumn.test.js +++ /dev/null @@ -1,36 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import * as React from "react" -import { render, screen } from "@testing-library/react" -import { GridColumn } from "./index" - -describe("GridColumn", () => { - test("renders a Grid row", async () => { - render() - expect(screen.getByTestId("my-grid-column")).toBeInTheDocument() - }) - - test("renders a custom className", async () => { - render() - expect(screen.getByTestId("my-grid-column")).toHaveClass("my-grid-column-class") - }) - - test("renders modified 'auto' styles when passed", async () => { - render() - expect(screen.getByTestId("my-auto-column")).toHaveAttribute("style") - expect(document.querySelector(".juno-grid-column").style.getPropertyValue("flex-grow")).toBe("1") - expect(document.querySelector(".juno-grid-column").style.getPropertyValue("flex-shrink")).toBe("0") - expect(document.querySelector(".juno-grid-column").style.getPropertyValue("flex-basis")).toBe("0px") - }) - - test("renders width-related styles in a style tag when passed", async () => { - render() - expect(screen.getByTestId("my-width-column")).toHaveAttribute("style") - expect(document.querySelector(".juno-grid-column").style.getPropertyValue("width")).toBe("73%") - expect(document.querySelector(".juno-grid-column").style.getPropertyValue("flex-shrink")).toBe("0") - expect(document.querySelector(".juno-grid-column").style.getPropertyValue("flex-basis")).toBe("73%") - }) -}) diff --git a/packages/ui-components/src/deprecated_js/GridColumn/index.js b/packages/ui-components/src/deprecated_js/GridColumn/index.js deleted file mode 100644 index dd7d8750d..000000000 --- a/packages/ui-components/src/deprecated_js/GridColumn/index.js +++ /dev/null @@ -1,6 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -export { GridColumn } from "./GridColumn.component" diff --git a/packages/ui-components/src/deprecated_js/GridRow/GridRow.component.js b/packages/ui-components/src/deprecated_js/GridRow/GridRow.component.js deleted file mode 100644 index ef3ad1a7b..000000000 --- a/packages/ui-components/src/deprecated_js/GridRow/GridRow.component.js +++ /dev/null @@ -1,30 +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 PropTypes from "prop-types" - -const gridRowBaseStyles = ` - jn-flex - jn-flex-wrap - jn-m-grid-row -` -/** -A grid row to hold GridColumn elements inside a Grid. -*/ -export const GridRow = ({ children = null, className = "", ...props }) => { - return ( -
- {children} -
- ) -} - -GridRow.propTypes = { - /** The children to render in the grid row */ - children: PropTypes.node, - /** Add a class to the grid row */ - className: PropTypes.string, -} diff --git a/packages/ui-components/src/deprecated_js/GridRow/GridRow.stories.js b/packages/ui-components/src/deprecated_js/GridRow/GridRow.stories.js deleted file mode 100644 index f0cbb1407..000000000 --- a/packages/ui-components/src/deprecated_js/GridRow/GridRow.stories.js +++ /dev/null @@ -1,49 +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 PropTypes from "prop-types" -import { GridRow } from "./index.js" -import { GridColumn } from "../GridColumn/GridColumn.component.js" - -export default { - title: "Layout/Grid/GridRow", - component: GridRow, - argTypes: { - children: { - control: false, - }, - }, - decorators: [(Story) => ], -} - -// for the decorator to work like this (passing props to the story) we have to access the passed props from the decorator -// from the context. This might be storybook 6.x-specific. Double check when we upgrade to storybook 7.x -const Template = ({ /*columns,*/ ...args }, context) => - -Template.propTypes = { - columns: PropTypes.number, -} - -export const Default = { - render: Template, - - args: { - children: [ - Column, - Column, - Column, - Column, - Column, - Column, - Column, - Column, - Column, - Column, - Column, - Column, - ], - }, -} diff --git a/packages/ui-components/src/deprecated_js/GridRow/GridRow.test.js b/packages/ui-components/src/deprecated_js/GridRow/GridRow.test.js deleted file mode 100644 index a1f1449e0..000000000 --- a/packages/ui-components/src/deprecated_js/GridRow/GridRow.test.js +++ /dev/null @@ -1,20 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -import * as React from "react" -import { render, screen } from "@testing-library/react" -import { GridRow } from "./index" - -describe("GridRow", () => { - test("renders a Grid row", async () => { - render() - expect(screen.getByTestId("my-grid-row")).toBeInTheDocument() - }) - - test("renders a custom className", async () => { - render() - expect(screen.getByTestId("my-grid-row")).toHaveClass("my-grid-row-class") - }) -}) diff --git a/packages/ui-components/src/deprecated_js/GridRow/index.js b/packages/ui-components/src/deprecated_js/GridRow/index.js deleted file mode 100644 index 732e40bee..000000000 --- a/packages/ui-components/src/deprecated_js/GridRow/index.js +++ /dev/null @@ -1,6 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -export { GridRow } from "./GridRow.component" diff --git a/packages/ui-components/src/index.js b/packages/ui-components/src/index.js index 4b18cf042..4feaa16db 100644 --- a/packages/ui-components/src/index.js +++ b/packages/ui-components/src/index.js @@ -45,9 +45,9 @@ export { Form } from "./components/Form/index.js" export { FormattedText } from "./components/FormattedText/" export { FormRow } from "./components/FormRow/index.js" export { FormSection } from "./components/FormSection/index.js" -export { Grid } from "./components/Grid" -export { GridRow } from "./components/GridRow" -export { GridColumn } from "./components/GridColumn" +export { Grid } from "./components/Grid/Grid.component" +export { GridRow } from "./components/GridRow/GridRow.component" +export { GridColumn } from "./components/GridColumn/GridColumn.component" export { Icon } from "./components/Icon/index" export { InputGroup } from "./components/InputGroup/index" export { IntroBox } from "./components/IntroBox/index.js"