From 6eca80af79466fc9d50f33624c771905e86b0279 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Mon, 15 Jan 2024 14:18:32 +0100 Subject: [PATCH 01/28] add labeled value --- .pnp.cjs | 22 ++++++++++ packages/components/package.json | 1 + .../src/components/CopyButton/CopyButton.tsx | 31 ++++++++++++++ .../src/components/CopyButton/index.ts | 3 ++ .../CopyButton/locales/de-DE.locale.json | 3 ++ .../CopyButton/locales/en-EN.locale.json | 3 ++ .../CurrencyValue/CurrencyValue.tsx | 21 ++++++++++ .../src/components/CurrencyValue/index.ts | 3 ++ .../CurrencyValue/stories/Default.stories.tsx | 16 +++++++ .../src/components/DateValue/DateValue.tsx | 20 +++++++++ .../src/components/DateValue/index.ts | 3 ++ .../DateValue/stories/Default.stories.tsx | 16 +++++++ .../LabeledValue/LabeledValue.module.css | 17 ++++++++ .../components/LabeledValue/LabeledValue.tsx | 38 +++++++++++++++++ .../src/components/LabeledValue/index.ts | 3 ++ .../LabeledValue/stories/Default.stories.tsx | 37 ++++++++++++++++ .../src/components/StatusIcon/StatusIcon.tsx | 5 +-- .../extractStringFromReactNode.test.tsx | 42 +++++++++++++++++++ .../extractStringFromReactNode.ts | 14 +++++++ .../src/components/labeled-value.yml | 3 ++ yarn.lock | 17 ++++++++ 21 files changed, 315 insertions(+), 3 deletions(-) create mode 100644 packages/components/src/components/CopyButton/CopyButton.tsx create mode 100644 packages/components/src/components/CopyButton/index.ts create mode 100644 packages/components/src/components/CopyButton/locales/de-DE.locale.json create mode 100644 packages/components/src/components/CopyButton/locales/en-EN.locale.json create mode 100644 packages/components/src/components/CurrencyValue/CurrencyValue.tsx create mode 100644 packages/components/src/components/CurrencyValue/index.ts create mode 100644 packages/components/src/components/CurrencyValue/stories/Default.stories.tsx create mode 100644 packages/components/src/components/DateValue/DateValue.tsx create mode 100644 packages/components/src/components/DateValue/index.ts create mode 100644 packages/components/src/components/DateValue/stories/Default.stories.tsx create mode 100644 packages/components/src/components/LabeledValue/LabeledValue.module.css create mode 100644 packages/components/src/components/LabeledValue/LabeledValue.tsx create mode 100644 packages/components/src/components/LabeledValue/index.ts create mode 100644 packages/components/src/components/LabeledValue/stories/Default.stories.tsx create mode 100644 packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx create mode 100644 packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts create mode 100644 packages/design-tokens/src/components/labeled-value.yml diff --git a/.pnp.cjs b/.pnp.cjs index 68079a182..31f701cfc 100644 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -5980,6 +5980,7 @@ const RAW_RUNTIME_STATE = ["@types/react-dom", "npm:18.2.18"],\ ["@types/rollup", "npm:0.54.0"],\ ["clsx", "npm:2.1.0"],\ + ["copy-to-clipboard", "npm:3.3.3"],\ ["html-react-parser", "virtual:622b9e402248d41f9152416cdfd18d0c7d03f97b0a1c801dc2b1955020a2ad17c03e46994e7992cf637cc749d5ccffdfbc35353aa1956f9a84cff32487265744#npm:5.1.1"],\ ["jest", "virtual:622b9e402248d41f9152416cdfd18d0c7d03f97b0a1c801dc2b1955020a2ad17c03e46994e7992cf637cc749d5ccffdfbc35353aa1956f9a84cff32487265744#npm:29.7.0"],\ ["jest-environment-jsdom", "virtual:622b9e402248d41f9152416cdfd18d0c7d03f97b0a1c801dc2b1955020a2ad17c03e46994e7992cf637cc749d5ccffdfbc35353aa1956f9a84cff32487265744#npm:29.7.0"],\ @@ -6040,6 +6041,7 @@ const RAW_RUNTIME_STATE = ["@types/react-dom", "npm:18.2.18"],\ ["@types/rollup", "npm:0.54.0"],\ ["clsx", "npm:2.1.0"],\ + ["copy-to-clipboard", "npm:3.3.3"],\ ["html-react-parser", "virtual:622b9e402248d41f9152416cdfd18d0c7d03f97b0a1c801dc2b1955020a2ad17c03e46994e7992cf637cc749d5ccffdfbc35353aa1956f9a84cff32487265744#npm:5.1.1"],\ ["jest", "virtual:622b9e402248d41f9152416cdfd18d0c7d03f97b0a1c801dc2b1955020a2ad17c03e46994e7992cf637cc749d5ccffdfbc35353aa1956f9a84cff32487265744#npm:29.7.0"],\ ["jest-environment-jsdom", "virtual:622b9e402248d41f9152416cdfd18d0c7d03f97b0a1c801dc2b1955020a2ad17c03e46994e7992cf637cc749d5ccffdfbc35353aa1956f9a84cff32487265744#npm:29.7.0"],\ @@ -6094,6 +6096,7 @@ const RAW_RUNTIME_STATE = ["@types/react-dom", "npm:18.2.18"],\ ["@types/rollup", "npm:0.54.0"],\ ["clsx", "npm:2.1.0"],\ + ["copy-to-clipboard", "npm:3.3.3"],\ ["html-react-parser", "virtual:622b9e402248d41f9152416cdfd18d0c7d03f97b0a1c801dc2b1955020a2ad17c03e46994e7992cf637cc749d5ccffdfbc35353aa1956f9a84cff32487265744#npm:5.1.1"],\ ["jest", "virtual:622b9e402248d41f9152416cdfd18d0c7d03f97b0a1c801dc2b1955020a2ad17c03e46994e7992cf637cc749d5ccffdfbc35353aa1956f9a84cff32487265744#npm:29.7.0"],\ ["jest-environment-jsdom", "virtual:622b9e402248d41f9152416cdfd18d0c7d03f97b0a1c801dc2b1955020a2ad17c03e46994e7992cf637cc749d5ccffdfbc35353aa1956f9a84cff32487265744#npm:29.7.0"],\ @@ -17077,6 +17080,16 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["copy-to-clipboard", [\ + ["npm:3.3.3", {\ + "packageLocation": "./.yarn/cache/copy-to-clipboard-npm-3.3.3-6964e6cfad-3ebf5e8ee0.zip/node_modules/copy-to-clipboard/",\ + "packageDependencies": [\ + ["copy-to-clipboard", "npm:3.3.3"],\ + ["toggle-selection", "npm:1.0.6"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["core-js-compat", [\ ["npm:3.35.0", {\ "packageLocation": "./.yarn/cache/core-js-compat-npm-3.35.0-17feb82aca-8c4379240b.zip/node_modules/core-js-compat/",\ @@ -28632,6 +28645,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["toggle-selection", [\ + ["npm:1.0.6", {\ + "packageLocation": "./.yarn/cache/toggle-selection-npm-1.0.6-c506b73005-f2cf1f2c70.zip/node_modules/toggle-selection/",\ + "packageDependencies": [\ + ["toggle-selection", "npm:1.0.6"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["toidentifier", [\ ["npm:1.0.1", {\ "packageLocation": "./.yarn/cache/toidentifier-npm-1.0.1-f759712599-9393727993.zip/node_modules/toidentifier/",\ diff --git a/packages/components/package.json b/packages/components/package.json index a19942a9f..504c54b24 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -42,6 +42,7 @@ "@react-aria/utils": "^3.23.0", "@react-types/shared": "^3.22.0", "clsx": "^2.1.0", + "copy-to-clipboard": "^3.3.3", "html-react-parser": "^5.1.1", "react-aria": "^3.31.1", "react-aria-components": "^1.0.1", diff --git a/packages/components/src/components/CopyButton/CopyButton.tsx b/packages/components/src/components/CopyButton/CopyButton.tsx new file mode 100644 index 000000000..594af734a --- /dev/null +++ b/packages/components/src/components/CopyButton/CopyButton.tsx @@ -0,0 +1,31 @@ +import React, { FC, ReactNode } from "react"; +import { extractStringFromReactNode } from "@/lib/extractStringFromReactNode/extractStringFromReactNode"; +import copy from "copy-to-clipboard"; +import { Button } from "@/components/Button"; +import { Icon } from "@/components/Icon"; +import { faCopy } from "@fortawesome/free-regular-svg-icons/faCopy"; +import locales from "./locales/*.locale.json"; +import { useLocalizedStringFormatter } from "react-aria"; + +export interface CopyButtonProps { + value: ReactNode; +} + +export const CopyButton: FC = (props) => { + const { value } = props; + + const stringFormatter = useLocalizedStringFormatter(locales); + + const ariaLabel = stringFormatter.format("copyButton.copy"); + + return ( + + ); +}; + +export default CopyButton; diff --git a/packages/components/src/components/CopyButton/index.ts b/packages/components/src/components/CopyButton/index.ts new file mode 100644 index 000000000..92738b743 --- /dev/null +++ b/packages/components/src/components/CopyButton/index.ts @@ -0,0 +1,3 @@ +import { CopyButton } from "./CopyButton"; +export { type CopyButtonProps, CopyButton } from "./CopyButton"; +export default CopyButton; diff --git a/packages/components/src/components/CopyButton/locales/de-DE.locale.json b/packages/components/src/components/CopyButton/locales/de-DE.locale.json new file mode 100644 index 000000000..b1b6b4965 --- /dev/null +++ b/packages/components/src/components/CopyButton/locales/de-DE.locale.json @@ -0,0 +1,3 @@ +{ + "copyButton.copy": "Kopieren" +} diff --git a/packages/components/src/components/CopyButton/locales/en-EN.locale.json b/packages/components/src/components/CopyButton/locales/en-EN.locale.json new file mode 100644 index 000000000..d77bca104 --- /dev/null +++ b/packages/components/src/components/CopyButton/locales/en-EN.locale.json @@ -0,0 +1,3 @@ +{ + "copyButton.copy": "Copy" +} diff --git a/packages/components/src/components/CurrencyValue/CurrencyValue.tsx b/packages/components/src/components/CurrencyValue/CurrencyValue.tsx new file mode 100644 index 000000000..96c71f5f6 --- /dev/null +++ b/packages/components/src/components/CurrencyValue/CurrencyValue.tsx @@ -0,0 +1,21 @@ +import React, { FC } from "react"; +import { useNumberFormatter } from "react-aria"; + +export interface CurrencyValueProps { + currency?: string; + value: number; +} + +export const CurrencyValue: FC = (props) => { + const { value, currency = "EUR" } = props; + + const formatter = useNumberFormatter({ + style: "currency", + currency, + minimumFractionDigits: 2, + }); + + return <>{formatter.format(value)}; +}; + +export default CurrencyValue; diff --git a/packages/components/src/components/CurrencyValue/index.ts b/packages/components/src/components/CurrencyValue/index.ts new file mode 100644 index 000000000..22a00fe04 --- /dev/null +++ b/packages/components/src/components/CurrencyValue/index.ts @@ -0,0 +1,3 @@ +import { CurrencyValue } from "./CurrencyValue"; +export { type CurrencyValueProps, CurrencyValue } from "./CurrencyValue"; +export default CurrencyValue; diff --git a/packages/components/src/components/CurrencyValue/stories/Default.stories.tsx b/packages/components/src/components/CurrencyValue/stories/Default.stories.tsx new file mode 100644 index 000000000..f46d925c8 --- /dev/null +++ b/packages/components/src/components/CurrencyValue/stories/Default.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import CurrencyValue from "../CurrencyValue"; +import React from "react"; + +const meta: Meta = { + title: "Currency Value", + component: CurrencyValue, + render: (props) => , +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const CustomCurrency: Story = { args: { currency: "USD" } }; diff --git a/packages/components/src/components/DateValue/DateValue.tsx b/packages/components/src/components/DateValue/DateValue.tsx new file mode 100644 index 000000000..84e665854 --- /dev/null +++ b/packages/components/src/components/DateValue/DateValue.tsx @@ -0,0 +1,20 @@ +import React, { FC } from "react"; +import { useDateFormatter } from "react-aria"; + +export interface DateValueProps { + format?: "date" | "dateTime"; + value: Date; +} + +export const DateValue: FC = (props) => { + const { value, format = "date" } = props; + + const formatter = useDateFormatter({ + dateStyle: "short", + timeStyle: format === "dateTime" ? "short" : undefined, + }); + + return <>{formatter.format(value)}; +}; + +export default DateValue; diff --git a/packages/components/src/components/DateValue/index.ts b/packages/components/src/components/DateValue/index.ts new file mode 100644 index 000000000..350b13579 --- /dev/null +++ b/packages/components/src/components/DateValue/index.ts @@ -0,0 +1,3 @@ +import { DateValue } from "./DateValue"; +export { type DateValueProps, DateValue } from "./DateValue"; +export default DateValue; diff --git a/packages/components/src/components/DateValue/stories/Default.stories.tsx b/packages/components/src/components/DateValue/stories/Default.stories.tsx new file mode 100644 index 000000000..1c71240b8 --- /dev/null +++ b/packages/components/src/components/DateValue/stories/Default.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import DateValue from "../DateValue"; +import React from "react"; + +const meta: Meta = { + title: "Date Value", + component: DateValue, + render: (props) => , +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const WithTime: Story = { args: { format: "dateTime" } }; diff --git a/packages/components/src/components/LabeledValue/LabeledValue.module.css b/packages/components/src/components/LabeledValue/LabeledValue.module.css new file mode 100644 index 000000000..9ec86fe9e --- /dev/null +++ b/packages/components/src/components/LabeledValue/LabeledValue.module.css @@ -0,0 +1,17 @@ +@import "@/styles"; + +.root { + display: grid; + grid-template-areas: + "label" + "value"; + row-gap: var(--labeled-value--label-to-value-spacing); +} + +.label { + grid-area: label; +} + +.value { + grid-area: value; +} diff --git a/packages/components/src/components/LabeledValue/LabeledValue.tsx b/packages/components/src/components/LabeledValue/LabeledValue.tsx new file mode 100644 index 000000000..66a74e932 --- /dev/null +++ b/packages/components/src/components/LabeledValue/LabeledValue.tsx @@ -0,0 +1,38 @@ +import React, { FC, PropsWithChildren, ReactNode } from "react"; +import { PropsContext, PropsContextProvider } from "@/lib/propsContext"; +import styles from "./LabeledValue.module.css"; +import clsx from "clsx"; +import { Text } from "@/components/Text"; +import { CopyButton } from "@/components/CopyButton"; + +export interface LabeledValueProps extends PropsWithChildren { + className?: string; + value: ReactNode; + copiable?: boolean; +} + +export const LabeledValue: FC = (props) => { + const { children, value, className, copiable } = props; + + const rootClassName = clsx(className, styles.root); + + const propsContext: PropsContext = { + Label: { + className: styles.label, + }, + }; + + return ( +
+ + {children} + + {value} + {copiable && } + + +
+ ); +}; + +export default LabeledValue; diff --git a/packages/components/src/components/LabeledValue/index.ts b/packages/components/src/components/LabeledValue/index.ts new file mode 100644 index 000000000..668be3b3d --- /dev/null +++ b/packages/components/src/components/LabeledValue/index.ts @@ -0,0 +1,3 @@ +import { LabeledValue } from "./LabeledValue"; +export { type LabeledValueProps, LabeledValue } from "./LabeledValue"; +export default LabeledValue; diff --git a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx new file mode 100644 index 000000000..a76cd68e3 --- /dev/null +++ b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx @@ -0,0 +1,37 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import LabeledValue from "../LabeledValue"; +import React from "react"; +import { Label } from "@/components/Label"; +import { CurrencyValue } from "@/components/CurrencyValue"; +import { DateValue } from "@/components/DateValue"; + +const meta: Meta = { + title: "Labeled Value", + component: LabeledValue, + render: () => ( + + + + ), +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const WithCurrencyValue: Story = { + render: () => ( + }> + + + ), +}; + +export const WithDateValue: Story = { + render: () => ( + }> + + + ), +}; diff --git a/packages/components/src/components/StatusIcon/StatusIcon.tsx b/packages/components/src/components/StatusIcon/StatusIcon.tsx index 3893e45ac..2d8cc039d 100644 --- a/packages/components/src/components/StatusIcon/StatusIcon.tsx +++ b/packages/components/src/components/StatusIcon/StatusIcon.tsx @@ -16,12 +16,11 @@ export interface StatusIconProps { export const StatusIcon: FC = (props) => { const { variant = "info", className } = props; + const stringFormatter = useLocalizedStringFormatter(locales); const rootClassName = clsx(className, styles.root); - const ariaLabel = useLocalizedStringFormatter(locales).format( - `statusIcon.${variant}`, - ); + const ariaLabel = stringFormatter.format(`statusIcon.${variant}`); const icon = variant === "info" diff --git a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx new file mode 100644 index 000000000..45bbce924 --- /dev/null +++ b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx @@ -0,0 +1,42 @@ +import { extractStringFromReactNode } from "./extractStringFromReactNode"; +import React from "react"; + +describe("extractStringFromReactNode function results are strings", () => { + test("input of type string", () => { + expect(extractStringFromReactNode("foo")).toMatchInlineSnapshot('"foo"'); + }); + test("input of type number", () => { + expect(extractStringFromReactNode(100)).toMatchInlineSnapshot('"100"'); + }); + test("input of type boolean", () => { + expect(extractStringFromReactNode(true)).toMatchInlineSnapshot('"true"'); + }); + test("input of type jsx element", () => { + expect(extractStringFromReactNode(
foo
)).toMatchInlineSnapshot( + '"foo"', + ); + }); + test("input of type nested jsx element", () => { + expect( + extractStringFromReactNode( +
+
foo
+
, + ), + ).toMatchInlineSnapshot('"foo"'); + }); + test("input of type jsx element without text results in empty string", () => { + expect(extractStringFromReactNode(
)).toMatchInlineSnapshot('""'); + }); + test("input of type jsx element with multiple texts results in empty string", () => { + expect( + extractStringFromReactNode( +
+ foo +
foo
+
foo
+
, + ), + ).toMatchInlineSnapshot('""'); + }); +}); diff --git a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts new file mode 100644 index 000000000..06ebb1fe2 --- /dev/null +++ b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts @@ -0,0 +1,14 @@ +import React from "react"; + +export const extractStringFromReactNode = (node: React.ReactNode): string => { + if (typeof node === "string") { + return node; + } else if (typeof node === "number") { + return node.toString(); + } else if (typeof node === "boolean") { + return node ? "true" : "false"; + } else if (typeof node === "object" && node && "props" in node) { + return extractStringFromReactNode(node.props.children); + } + return ""; +}; diff --git a/packages/design-tokens/src/components/labeled-value.yml b/packages/design-tokens/src/components/labeled-value.yml new file mode 100644 index 000000000..f0a095fa5 --- /dev/null +++ b/packages/design-tokens/src/components/labeled-value.yml @@ -0,0 +1,3 @@ +labeled-value: + label-to-value-spacing: + value: "{size-rem.xs}" diff --git a/yarn.lock b/yarn.lock index 75bdf73b1..939c399ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3144,6 +3144,7 @@ __metadata: "@types/react-dom": "npm:^18.2.18" "@types/rollup": "npm:^0.54.0" clsx: "npm:^2.1.0" + copy-to-clipboard: "npm:^3.3.3" html-react-parser: "npm:^5.1.1" jest: "npm:^29.7.0" jest-environment-jsdom: "npm:^29.7.0" @@ -10747,6 +10748,15 @@ __metadata: languageName: node linkType: hard +"copy-to-clipboard@npm:^3.3.3": + version: 3.3.3 + resolution: "copy-to-clipboard@npm:3.3.3" + dependencies: + toggle-selection: "npm:^1.0.6" + checksum: 3ebf5e8ee00601f8c440b83ec08d838e8eabb068c1fae94a9cda6b42f288f7e1b552f3463635f419af44bf7675afc8d0390d30876cf5c2d5d35f86d9c56a3e5f + languageName: node + linkType: hard + "core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.33.1": version: 3.35.0 resolution: "core-js-compat@npm:3.35.0" @@ -20808,6 +20818,13 @@ __metadata: languageName: node linkType: hard +"toggle-selection@npm:^1.0.6": + version: 1.0.6 + resolution: "toggle-selection@npm:1.0.6" + checksum: f2cf1f2c70f374fd87b0cdc8007453ba9e981c4305a8bf4eac10a30e62ecdfd28bca7d18f8f15b15a506bf8a7bfb20dbe3539f0fcf2a2c8396c1a78d53e1f179 + languageName: node + linkType: hard + "toidentifier@npm:1.0.1": version: 1.0.1 resolution: "toidentifier@npm:1.0.1" From e0a5000507cdf35550912facaf9e65a5cd5ed523 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 16 Jan 2024 06:28:39 +0100 Subject: [PATCH 02/28] add copy button --- .../src/components/CopyButton/CopyButton.tsx | 4 +++- .../CopyButton/stories/Default.stories.tsx | 14 ++++++++++++++ .../src/components/LabeledValue/LabeledValue.tsx | 6 +++--- .../LabeledValue/stories/Default.stories.tsx | 8 ++++++++ 4 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 packages/components/src/components/CopyButton/stories/Default.stories.tsx diff --git a/packages/components/src/components/CopyButton/CopyButton.tsx b/packages/components/src/components/CopyButton/CopyButton.tsx index 594af734a..5afed47b2 100644 --- a/packages/components/src/components/CopyButton/CopyButton.tsx +++ b/packages/components/src/components/CopyButton/CopyButton.tsx @@ -20,7 +20,9 @@ export const CopyButton: FC = (props) => { return (
diff --git a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx index a76cd68e3..7e2f8d48f 100644 --- a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx +++ b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx @@ -35,3 +35,11 @@ export const WithDateValue: Story = { ), }; + +export const Copyable: Story = { + render: () => ( + } copyable> + + + ), +}; From e11055de2624d59064f8280c41668c5ad25bb627 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 16 Jan 2024 07:06:51 +0100 Subject: [PATCH 03/28] add transparent button --- .../src/components/Button/Button.module.css | 19 ++++++++++++++++ .../src/components/Button/Button.tsx | 2 +- .../Button/stories/Variants.stories.tsx | 6 +++++ .../CopyButton/CopyButton.module.css | 4 ++++ .../src/components/CopyButton/CopyButton.tsx | 9 +++++++- .../LabeledValue/LabeledValue.module.css | 14 ++++++++++++ .../components/LabeledValue/LabeledValue.tsx | 6 ++--- .../LabeledValue/stories/Default.stories.tsx | 10 +++------ .../stories/EdgeCases.stories.tsx | 22 +++++++++++++++++++ .../extractStringFromReactNode.ts | 5 +++-- .../design-tokens/src/components/button.yml | 20 +++++++++++++++++ .../src/components/labeled-value.yml | 2 ++ 12 files changed, 104 insertions(+), 15 deletions(-) create mode 100644 packages/components/src/components/CopyButton/CopyButton.module.css create mode 100644 packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx diff --git a/packages/components/src/components/Button/Button.module.css b/packages/components/src/components/Button/Button.module.css index d9b612b11..32aeca29c 100644 --- a/packages/components/src/components/Button/Button.module.css +++ b/packages/components/src/components/Button/Button.module.css @@ -67,9 +67,28 @@ } } +.transparent { + background-color: var(--button--transparent-background-color--default); + color: var(--button--transparent-color--default); + + &:hover { + background-color: var(--button--transparent-background-color--hover); + color: var(--button--transparent-color--hover); + } + + &[data-pressed] { + background-color: var(--button--transparent-background-color--pressed); + color: var(--button--transparent-color--pressed); + } +} + .root[disabled] { background-color: var(--button--disabled-background-color); color: var(--button--disabled-color); + &.transparent { + background-color: var(--button--transparent-background-color--disabled); + color: var(--button--transparent-color--disabled); + } } .icon { diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx index e09279ddc..9175e26d3 100644 --- a/packages/components/src/components/Button/Button.tsx +++ b/packages/components/src/components/Button/Button.tsx @@ -10,7 +10,7 @@ import { export interface ButtonProps extends PropsWithChildren { /** @default "primary" */ - variant?: "primary" | "accent" | "secondary" | "negative"; + variant?: "primary" | "accent" | "secondary" | "negative" | "transparent"; } export const Button: FC = (props) => { diff --git a/packages/components/src/components/Button/stories/Variants.stories.tsx b/packages/components/src/components/Button/stories/Variants.stories.tsx index 2a4697c4a..d501b8404 100644 --- a/packages/components/src/components/Button/stories/Variants.stories.tsx +++ b/packages/components/src/components/Button/stories/Variants.stories.tsx @@ -34,3 +34,9 @@ export const Negative: Story = { variant: "negative", }, }; + +export const Transparent: Story = { + args: { + variant: "transparent", + }, +}; diff --git a/packages/components/src/components/CopyButton/CopyButton.module.css b/packages/components/src/components/CopyButton/CopyButton.module.css new file mode 100644 index 000000000..696149055 --- /dev/null +++ b/packages/components/src/components/CopyButton/CopyButton.module.css @@ -0,0 +1,4 @@ +@import "@/styles"; + +.root { +} diff --git a/packages/components/src/components/CopyButton/CopyButton.tsx b/packages/components/src/components/CopyButton/CopyButton.tsx index 5afed47b2..8fcea9a19 100644 --- a/packages/components/src/components/CopyButton/CopyButton.tsx +++ b/packages/components/src/components/CopyButton/CopyButton.tsx @@ -6,24 +6,31 @@ import { Icon } from "@/components/Icon"; import { faCopy } from "@fortawesome/free-regular-svg-icons/faCopy"; import locales from "./locales/*.locale.json"; import { useLocalizedStringFormatter } from "react-aria"; +import styles from "./CopyButton.module.css"; +import clsx from "clsx"; export interface CopyButtonProps { value: ReactNode; + className?: string; } export const CopyButton: FC = (props) => { - const { value } = props; + const { value, className } = props; const stringFormatter = useLocalizedStringFormatter(locales); + const rootClassName = clsx(className, styles.root); + const ariaLabel = stringFormatter.format("copyButton.copy"); return ( diff --git a/packages/components/src/components/LabeledValue/LabeledValue.module.css b/packages/components/src/components/LabeledValue/LabeledValue.module.css index 9ec86fe9e..cc56ae476 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.module.css +++ b/packages/components/src/components/LabeledValue/LabeledValue.module.css @@ -6,6 +6,14 @@ "label" "value"; row-gap: var(--labeled-value--label-to-value-spacing); + column-gap: var(--labeled-value--value-to-copy-button-spacing); + width: fit-content; + + &:has(.copyButton) { + grid-template-areas: + "label label" + "value copyButton"; + } } .label { @@ -15,3 +23,9 @@ .value { grid-area: value; } + +.copyButton { + grid-area: copyButton; + margin-top: calc(var(--labeled-value--label-to-value-spacing) * -1); + align-self: start; +} diff --git a/packages/components/src/components/LabeledValue/LabeledValue.tsx b/packages/components/src/components/LabeledValue/LabeledValue.tsx index 521f7270a..475ea591e 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.tsx +++ b/packages/components/src/components/LabeledValue/LabeledValue.tsx @@ -26,10 +26,8 @@ export const LabeledValue: FC = (props) => {
{children} - - {value} - {copyable && } - + {value} + {copyable && }
); diff --git a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx index 7e2f8d48f..de5d35bfc 100644 --- a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx +++ b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx @@ -8,8 +8,8 @@ import { DateValue } from "@/components/DateValue"; const meta: Meta = { title: "Labeled Value", component: LabeledValue, - render: () => ( - + render: (props) => ( + ), @@ -37,9 +37,5 @@ export const WithDateValue: Story = { }; export const Copyable: Story = { - render: () => ( - } copyable> - - - ), + args: { copyable: true }, }; diff --git a/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx b/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx new file mode 100644 index 000000000..22d2a4c4c --- /dev/null +++ b/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import LabeledValue from "../LabeledValue"; +import defaultMeta from "./Default.stories"; +import { dummyText } from "@/lib/dev/dummyText"; +import { Label } from "@/components/Label"; +import React from "react"; + +const meta: Meta = { + title: "Labeled Value / Edge Cases", + ...defaultMeta, +}; +export default meta; + +type Story = StoryObj; + +export const LongTexts: Story = { + render: (props) => ( + + + + ), +}; diff --git a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts index 06ebb1fe2..d3c7a3d66 100644 --- a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts +++ b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts @@ -1,6 +1,7 @@ -import React from "react"; +import { ReactNode } from "react"; -export const extractStringFromReactNode = (node: React.ReactNode): string => { +export const extractStringFromReactNode = (node: ReactNode): string => { + console.log(node); if (typeof node === "string") { return node; } else if (typeof node === "number") { diff --git a/packages/design-tokens/src/components/button.yml b/packages/design-tokens/src/components/button.yml index 3a2f94c11..5c4bedba6 100644 --- a/packages/design-tokens/src/components/button.yml +++ b/packages/design-tokens/src/components/button.yml @@ -57,6 +57,26 @@ button: negative-color: value: "{color.white}" + # Transparent + transparent-background-color: + default: + value: "{color.transparent}" + hover: + value: "{informative.color.200}" + pressed: + value: "{informative.color.300}" + disabled: + value: "{color.transparent}" + transparent-color: + default: + value: "{informative.color.700}" + hover: + value: "{informative.color.900}" + pressed: + value: "{informative.color.1000}" + disabled: + value: "{neutral.color.600}" + # Disabled disabled-background-color: value: "{neutral.color.400}" diff --git a/packages/design-tokens/src/components/labeled-value.yml b/packages/design-tokens/src/components/labeled-value.yml index f0a095fa5..a34c28830 100644 --- a/packages/design-tokens/src/components/labeled-value.yml +++ b/packages/design-tokens/src/components/labeled-value.yml @@ -1,3 +1,5 @@ labeled-value: label-to-value-spacing: value: "{size-rem.xs}" + value-to-copy-button-spacing: + value: "{size-rem.xs}" From f0a51a99371e405c6004d93e5c838c5e3a21230b Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 16 Jan 2024 07:11:51 +0100 Subject: [PATCH 04/28] add test --- .../extractStringFromReactNode.test.tsx | 3 +++ .../extractStringFromReactNode/extractStringFromReactNode.ts | 1 - 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx index 45bbce924..4cd5a06ec 100644 --- a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx +++ b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx @@ -39,4 +39,7 @@ describe("extractStringFromReactNode function results are strings", () => { ), ).toMatchInlineSnapshot('""'); }); + test("null input results in empty string", () => { + expect(extractStringFromReactNode(null)).toMatchInlineSnapshot('""'); + }); }); diff --git a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts index d3c7a3d66..11d13626d 100644 --- a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts +++ b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts @@ -1,7 +1,6 @@ import { ReactNode } from "react"; export const extractStringFromReactNode = (node: ReactNode): string => { - console.log(node); if (typeof node === "string") { return node; } else if (typeof node === "number") { From 55864dbe19fd116461d608bf58b9aaa03bd78552 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 16 Jan 2024 07:17:55 +0100 Subject: [PATCH 05/28] add test --- .../extractStringFromReactNode.test.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx index 4cd5a06ec..4baad5858 100644 --- a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx +++ b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx @@ -42,4 +42,10 @@ describe("extractStringFromReactNode function results are strings", () => { test("null input results in empty string", () => { expect(extractStringFromReactNode(null)).toMatchInlineSnapshot('""'); }); + test("undefined input results in empty string", () => { + expect(extractStringFromReactNode(undefined)).toMatchInlineSnapshot('""'); + }); + test("jsx input without text results in empty string", () => { + expect(extractStringFromReactNode(
)).toMatchInlineSnapshot('""'); + }); }); From 48e219e998a43a4d9410564febcaa0d08084d2c1 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 16 Jan 2024 07:34:39 +0100 Subject: [PATCH 06/28] add test --- .../extractStringFromReactNode.test.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx index 4baad5858..92c7750b5 100644 --- a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx +++ b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx @@ -8,9 +8,12 @@ describe("extractStringFromReactNode function results are strings", () => { test("input of type number", () => { expect(extractStringFromReactNode(100)).toMatchInlineSnapshot('"100"'); }); - test("input of type boolean", () => { + test("input of type boolean (true)", () => { expect(extractStringFromReactNode(true)).toMatchInlineSnapshot('"true"'); }); + test("input of type boolean (false)", () => { + expect(extractStringFromReactNode(false)).toMatchInlineSnapshot('"false"'); + }); test("input of type jsx element", () => { expect(extractStringFromReactNode(
foo
)).toMatchInlineSnapshot( '"foo"', @@ -42,10 +45,4 @@ describe("extractStringFromReactNode function results are strings", () => { test("null input results in empty string", () => { expect(extractStringFromReactNode(null)).toMatchInlineSnapshot('""'); }); - test("undefined input results in empty string", () => { - expect(extractStringFromReactNode(undefined)).toMatchInlineSnapshot('""'); - }); - test("jsx input without text results in empty string", () => { - expect(extractStringFromReactNode(
)).toMatchInlineSnapshot('""'); - }); }); From dcb1861bb55150e027592035144b330581232531 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 16 Jan 2024 08:33:45 +0100 Subject: [PATCH 07/28] clean up stories --- .../CopyButton/stories/Default.stories.tsx | 5 ++++- .../CurrencyValue/stories/Default.stories.tsx | 10 ++++++++++ .../src/components/DateValue/DateValue.tsx | 7 ++++--- .../DateValue/stories/Default.stories.tsx | 13 ++++++++++++- .../LabeledValue/stories/Default.stories.tsx | 3 +++ 5 files changed, 33 insertions(+), 5 deletions(-) diff --git a/packages/components/src/components/CopyButton/stories/Default.stories.tsx b/packages/components/src/components/CopyButton/stories/Default.stories.tsx index e7104538e..268facbfe 100644 --- a/packages/components/src/components/CopyButton/stories/Default.stories.tsx +++ b/packages/components/src/components/CopyButton/stories/Default.stories.tsx @@ -5,7 +5,10 @@ import { CopyButton } from "../CopyButton"; const meta: Meta = { title: "CopyButton", component: CopyButton, - render: () => , + render: (props) => , + parameters: { + controls: { exclude: ["value", "className"] }, + }, }; export default meta; diff --git a/packages/components/src/components/CurrencyValue/stories/Default.stories.tsx b/packages/components/src/components/CurrencyValue/stories/Default.stories.tsx index f46d925c8..cd4197708 100644 --- a/packages/components/src/components/CurrencyValue/stories/Default.stories.tsx +++ b/packages/components/src/components/CurrencyValue/stories/Default.stories.tsx @@ -6,6 +6,16 @@ const meta: Meta = { title: "Currency Value", component: CurrencyValue, render: (props) => , + argTypes: { + currency: { + control: "inline-radio", + options: ["EUR", "USD", "GBP", "THB"], + defaultValue: "EUR", + }, + }, + parameters: { + controls: { exclude: ["value"] }, + }, }; export default meta; diff --git a/packages/components/src/components/DateValue/DateValue.tsx b/packages/components/src/components/DateValue/DateValue.tsx index 84e665854..6139c8721 100644 --- a/packages/components/src/components/DateValue/DateValue.tsx +++ b/packages/components/src/components/DateValue/DateValue.tsx @@ -2,7 +2,8 @@ import React, { FC } from "react"; import { useDateFormatter } from "react-aria"; export interface DateValueProps { - format?: "date" | "dateTime"; + /** @default "date" */ + format?: "date" | "dateTime" | "time"; value: Date; } @@ -10,8 +11,8 @@ export const DateValue: FC = (props) => { const { value, format = "date" } = props; const formatter = useDateFormatter({ - dateStyle: "short", - timeStyle: format === "dateTime" ? "short" : undefined, + dateStyle: format !== "time" ? "short" : undefined, + timeStyle: format !== "date" ? "short" : undefined, }); return <>{formatter.format(value)}; diff --git a/packages/components/src/components/DateValue/stories/Default.stories.tsx b/packages/components/src/components/DateValue/stories/Default.stories.tsx index 1c71240b8..8f6e0ce91 100644 --- a/packages/components/src/components/DateValue/stories/Default.stories.tsx +++ b/packages/components/src/components/DateValue/stories/Default.stories.tsx @@ -6,6 +6,15 @@ const meta: Meta = { title: "Date Value", component: DateValue, render: (props) => , + argTypes: { + format: { + control: "inline-radio", + defaultValue: "date", + }, + }, + parameters: { + controls: { exclude: ["value"] }, + }, }; export default meta; @@ -13,4 +22,6 @@ type Story = StoryObj; export const Default: Story = {}; -export const WithTime: Story = { args: { format: "dateTime" } }; +export const DateAndTime: Story = { args: { format: "dateTime" } }; + +export const Time: Story = { args: { format: "time" } }; diff --git a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx index de5d35bfc..ef128fe6b 100644 --- a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx +++ b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx @@ -8,6 +8,9 @@ import { DateValue } from "@/components/DateValue"; const meta: Meta = { title: "Labeled Value", component: LabeledValue, + parameters: { + controls: { exclude: ["value", "className", "copyable"] }, + }, render: (props) => ( From b7891535a345798af402217a594ec3bff387a63b Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 16 Jan 2024 08:39:18 +0100 Subject: [PATCH 08/28] rename transparent to plain --- .../src/components/Button/Button.module.css | 20 +++++++++---------- .../src/components/Button/Button.tsx | 2 +- .../Button/stories/Variants.stories.tsx | 4 ++-- .../design-tokens/src/components/button.yml | 10 +++------- 4 files changed, 16 insertions(+), 20 deletions(-) diff --git a/packages/components/src/components/Button/Button.module.css b/packages/components/src/components/Button/Button.module.css index 32aeca29c..8371386dd 100644 --- a/packages/components/src/components/Button/Button.module.css +++ b/packages/components/src/components/Button/Button.module.css @@ -67,27 +67,27 @@ } } -.transparent { - background-color: var(--button--transparent-background-color--default); - color: var(--button--transparent-color--default); +.plain { + background-color: var(--color--transparent); + color: var(--button--plain-color--default); &:hover { - background-color: var(--button--transparent-background-color--hover); - color: var(--button--transparent-color--hover); + background-color: var(--button--plain-background-color--hover); + color: var(--button--plain-color--hover); } &[data-pressed] { - background-color: var(--button--transparent-background-color--pressed); - color: var(--button--transparent-color--pressed); + background-color: var(--button--plain-background-color--pressed); + color: var(--button--plain-color--pressed); } } .root[disabled] { background-color: var(--button--disabled-background-color); color: var(--button--disabled-color); - &.transparent { - background-color: var(--button--transparent-background-color--disabled); - color: var(--button--transparent-color--disabled); + &.plain { + background-color: var(--color--transparent); + color: var(--button--plain-color--disabled); } } diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx index 9175e26d3..45907d402 100644 --- a/packages/components/src/components/Button/Button.tsx +++ b/packages/components/src/components/Button/Button.tsx @@ -10,7 +10,7 @@ import { export interface ButtonProps extends PropsWithChildren { /** @default "primary" */ - variant?: "primary" | "accent" | "secondary" | "negative" | "transparent"; + variant?: "primary" | "accent" | "secondary" | "negative" | "plain"; } export const Button: FC = (props) => { diff --git a/packages/components/src/components/Button/stories/Variants.stories.tsx b/packages/components/src/components/Button/stories/Variants.stories.tsx index d501b8404..3e1a96867 100644 --- a/packages/components/src/components/Button/stories/Variants.stories.tsx +++ b/packages/components/src/components/Button/stories/Variants.stories.tsx @@ -35,8 +35,8 @@ export const Negative: Story = { }, }; -export const Transparent: Story = { +export const Plain: Story = { args: { - variant: "transparent", + variant: "plain", }, }; diff --git a/packages/design-tokens/src/components/button.yml b/packages/design-tokens/src/components/button.yml index 5c4bedba6..c1f1eb6f2 100644 --- a/packages/design-tokens/src/components/button.yml +++ b/packages/design-tokens/src/components/button.yml @@ -57,17 +57,13 @@ button: negative-color: value: "{color.white}" - # Transparent - transparent-background-color: - default: - value: "{color.transparent}" + # Plain + plain-background-color: hover: value: "{informative.color.200}" pressed: value: "{informative.color.300}" - disabled: - value: "{color.transparent}" - transparent-color: + plain-color: default: value: "{informative.color.700}" hover: From df2f638b08a9280d75261628f4aba72c5d787445 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 16 Jan 2024 08:42:13 +0100 Subject: [PATCH 09/28] rename transparent to plain --- .../src/components/CopyButton/CopyButton.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/CopyButton/CopyButton.tsx b/packages/components/src/components/CopyButton/CopyButton.tsx index 8fcea9a19..354141c8f 100644 --- a/packages/components/src/components/CopyButton/CopyButton.tsx +++ b/packages/components/src/components/CopyButton/CopyButton.tsx @@ -23,14 +23,16 @@ export const CopyButton: FC = (props) => { const ariaLabel = stringFormatter.format("copyButton.copy"); + const copyValue = () => { + copy(extractStringFromReactNode(value)); + }; + return ( From 59c53d01a3d64881f7587a8af1d684d2b6876735 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Fri, 19 Jan 2024 07:41:18 +0100 Subject: [PATCH 10/28] reduce unnecessary classnames --- .../CopyButton/CopyButton.module.css | 4 --- .../src/components/CopyButton/CopyButton.tsx | 3 +-- .../LabeledValue/LabeledValue.module.css | 26 +++++++++---------- .../components/LabeledValue/LabeledValue.tsx | 15 +++-------- 4 files changed, 17 insertions(+), 31 deletions(-) delete mode 100644 packages/components/src/components/CopyButton/CopyButton.module.css diff --git a/packages/components/src/components/CopyButton/CopyButton.module.css b/packages/components/src/components/CopyButton/CopyButton.module.css deleted file mode 100644 index 696149055..000000000 --- a/packages/components/src/components/CopyButton/CopyButton.module.css +++ /dev/null @@ -1,4 +0,0 @@ -@import "@/styles"; - -.root { -} diff --git a/packages/components/src/components/CopyButton/CopyButton.tsx b/packages/components/src/components/CopyButton/CopyButton.tsx index 354141c8f..a8ceb7424 100644 --- a/packages/components/src/components/CopyButton/CopyButton.tsx +++ b/packages/components/src/components/CopyButton/CopyButton.tsx @@ -6,7 +6,6 @@ import { Icon } from "@/components/Icon"; import { faCopy } from "@fortawesome/free-regular-svg-icons/faCopy"; import locales from "./locales/*.locale.json"; import { useLocalizedStringFormatter } from "react-aria"; -import styles from "./CopyButton.module.css"; import clsx from "clsx"; export interface CopyButtonProps { @@ -19,7 +18,7 @@ export const CopyButton: FC = (props) => { const stringFormatter = useLocalizedStringFormatter(locales); - const rootClassName = clsx(className, styles.root); + const rootClassName = clsx(className); const ariaLabel = stringFormatter.format("copyButton.copy"); diff --git a/packages/components/src/components/LabeledValue/LabeledValue.module.css b/packages/components/src/components/LabeledValue/LabeledValue.module.css index cc56ae476..55511f034 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.module.css +++ b/packages/components/src/components/LabeledValue/LabeledValue.module.css @@ -9,23 +9,23 @@ column-gap: var(--labeled-value--value-to-copy-button-spacing); width: fit-content; - &:has(.copyButton) { + &:has(> :global(.flow-button)) { grid-template-areas: "label label" - "value copyButton"; + "value button"; } -} -.label { - grid-area: label; -} + :global(.flow-label) { + grid-area: label; + } -.value { - grid-area: value; -} + :global(.flow-text) { + grid-area: value; + } -.copyButton { - grid-area: copyButton; - margin-top: calc(var(--labeled-value--label-to-value-spacing) * -1); - align-self: start; + & > :global(.flow-button) { + grid-area: button; + margin-top: calc(var(--labeled-value--label-to-value-spacing) * -1); + align-self: start; + } } diff --git a/packages/components/src/components/LabeledValue/LabeledValue.tsx b/packages/components/src/components/LabeledValue/LabeledValue.tsx index 475ea591e..3016946c7 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.tsx +++ b/packages/components/src/components/LabeledValue/LabeledValue.tsx @@ -1,5 +1,4 @@ import React, { FC, PropsWithChildren, ReactNode } from "react"; -import { PropsContext, PropsContextProvider } from "@/lib/propsContext"; import styles from "./LabeledValue.module.css"; import clsx from "clsx"; import { Text } from "@/components/Text"; @@ -16,19 +15,11 @@ export const LabeledValue: FC = (props) => { const rootClassName = clsx(className, styles.root); - const propsContext: PropsContext = { - Label: { - className: styles.label, - }, - }; - return (
- - {children} - {value} - {copyable && } - + {children} + {value} + {copyable && }
); }; From 6b5acb95022b3534a470dfc4c45e32fa515f1f87 Mon Sep 17 00:00:00 2001 From: Marco Falkenberg Date: Tue, 23 Jan 2024 11:44:21 +0100 Subject: [PATCH 11/28] v0.1.1 --- lerna.json | 2 +- packages/components/package.json | 2 +- packages/design-tokens/package.json | 2 +- packages/stylesheet/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lerna.json b/lerna.json index 104e92223..1887c268e 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0" + "version": "0.1.1" } diff --git a/packages/components/package.json b/packages/components/package.json index 5739b0001..6ac697696 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-next-components", - "version": "0.1.0", + "version": "0.1.1", "type": "module", "exports": { "./Button": "./dist/Button.js", diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index b96591da2..d02ab9cf3 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-next-design-tokens", - "version": "0.1.0", + "version": "0.1.1", "type": "module", "exports": { ".": "./dist/variables.css" diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index e5068cb17..2ece2f33b 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-next-stylesheet", - "version": "0.1.0", + "version": "0.1.1", "type": "module", "exports": { ".": "./dist/style.css" From 5d05551361d15191f727caa68c59794b75075376 Mon Sep 17 00:00:00 2001 From: Marco Falkenberg Date: Tue, 23 Jan 2024 11:46:17 +0100 Subject: [PATCH 12/28] Revert "v0.1.1" This reverts commit 6b5acb95022b3534a470dfc4c45e32fa515f1f87. --- lerna.json | 2 +- packages/components/package.json | 2 +- packages/design-tokens/package.json | 2 +- packages/stylesheet/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lerna.json b/lerna.json index 1887c268e..104e92223 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.1" + "version": "0.1.0" } diff --git a/packages/components/package.json b/packages/components/package.json index 6ac697696..5739b0001 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-next-components", - "version": "0.1.1", + "version": "0.1.0", "type": "module", "exports": { "./Button": "./dist/Button.js", diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index d02ab9cf3..b96591da2 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-next-design-tokens", - "version": "0.1.1", + "version": "0.1.0", "type": "module", "exports": { ".": "./dist/variables.css" diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index 2ece2f33b..e5068cb17 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-next-stylesheet", - "version": "0.1.1", + "version": "0.1.0", "type": "module", "exports": { ".": "./dist/style.css" From 964eaefe0cee84a4d372dcdbe1c6b1e1bd7ff84b Mon Sep 17 00:00:00 2001 From: Marco Falkenberg Date: Tue, 23 Jan 2024 11:47:31 +0100 Subject: [PATCH 13/28] v1.0.0-alpha.0 --- lerna.json | 2 +- packages/components/package.json | 2 +- packages/design-tokens/package.json | 2 +- packages/stylesheet/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lerna.json b/lerna.json index 104e92223..d1a283e96 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "npmClient": "yarn", "packages": ["packages/*"], - "version": "0.1.0" + "version": "1.0.0-alpha.0" } diff --git a/packages/components/package.json b/packages/components/package.json index 5739b0001..62821142a 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-next-components", - "version": "0.1.0", + "version": "1.0.0-alpha.0", "type": "module", "exports": { "./Button": "./dist/Button.js", diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index b96591da2..1c7f474c2 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-next-design-tokens", - "version": "0.1.0", + "version": "1.0.0-alpha.0", "type": "module", "exports": { ".": "./dist/variables.css" diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json index e5068cb17..fbf44ad78 100644 --- a/packages/stylesheet/package.json +++ b/packages/stylesheet/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-next-stylesheet", - "version": "0.1.0", + "version": "1.0.0-alpha.0", "type": "module", "exports": { ".": "./dist/style.css" From a8f9d2d2634820e0c4ee636f36f0db437ae5dc50 Mon Sep 17 00:00:00 2001 From: Lisa Meyer <84317589+Lisa18289@users.noreply.github.com> Date: Tue, 23 Jan 2024 11:52:23 +0100 Subject: [PATCH 14/28] Add parent categories to stories (#119) --- .../src/components/Avatar/stories/Default.stories.tsx | 2 +- .../src/components/Avatar/stories/Variants.stories.tsx | 2 +- .../components/src/components/Badge/stories/Default.stories.tsx | 2 +- .../src/components/Badge/stories/EdgeCases.stories.tsx | 2 +- .../src/components/Badge/stories/Variants.stories.tsx | 2 +- .../src/components/Button/stories/Default.stories.tsx | 2 +- .../src/components/Button/stories/EdgeCases.stories.tsx | 2 +- .../src/components/Button/stories/Variants.stories.tsx | 2 +- .../src/components/Checkbox/stories/Default.stories.tsx | 2 +- .../src/components/Checkbox/stories/EdgeCases.stories.tsx | 2 +- .../src/components/Content/stories/Default.stories.tsx | 2 +- .../src/components/Heading/stories/Default.stories.tsx | 2 +- .../src/components/Heading/stories/Levels.stories.tsx | 2 +- .../components/src/components/Icon/stories/Default.stories.tsx | 2 +- .../components/src/components/Image/stories/Default.stories.tsx | 2 +- .../src/components/Initials/stories/Default.stories.tsx | 2 +- .../src/components/Initials/stories/Variants.stories.tsx | 2 +- .../components/src/components/Label/stories/Default.stories.tsx | 2 +- .../components/src/components/Link/stories/Default.stories.tsx | 2 +- .../src/components/Navigation/stories/Default.stories.tsx | 2 +- .../components/src/components/Note/stories/Default.stories.tsx | 2 +- .../src/components/Note/stories/EdgeCases.stories.tsx | 2 +- .../components/src/components/Note/stories/Variants.stories.tsx | 2 +- .../src/components/RadioGroup/stories/Default.stories.tsx | 2 +- .../src/components/RadioGroup/stories/EdgeCases.stories.tsx | 2 +- .../src/components/StatusIcon/stories/Default.stories.tsx | 2 +- .../src/components/Switch/stories/Default.stories.tsx | 2 +- .../src/components/Switch/stories/EdgeCases.stories.tsx | 2 +- .../src/components/Switch/stories/Variants.stories.tsx | 2 +- .../components/src/components/Text/stories/Default.stories.tsx | 2 +- .../src/components/TextField/stories/Default.stories.tsx | 2 +- 31 files changed, 31 insertions(+), 31 deletions(-) diff --git a/packages/components/src/components/Avatar/stories/Default.stories.tsx b/packages/components/src/components/Avatar/stories/Default.stories.tsx index fafe5b188..63a43ce15 100644 --- a/packages/components/src/components/Avatar/stories/Default.stories.tsx +++ b/packages/components/src/components/Avatar/stories/Default.stories.tsx @@ -6,7 +6,7 @@ import { Image } from "@/components/Image"; import { dummyText } from "@/lib/dev/dummyText"; const meta: Meta = { - title: "Avatar", + title: "Content/Avatar", component: Avatar, render: (props) => ( diff --git a/packages/components/src/components/Avatar/stories/Variants.stories.tsx b/packages/components/src/components/Avatar/stories/Variants.stories.tsx index b225757e1..21125ed67 100644 --- a/packages/components/src/components/Avatar/stories/Variants.stories.tsx +++ b/packages/components/src/components/Avatar/stories/Variants.stories.tsx @@ -4,7 +4,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Avatar/Variants", + title: "Content/Avatar/Variants", }; export default meta; diff --git a/packages/components/src/components/Badge/stories/Default.stories.tsx b/packages/components/src/components/Badge/stories/Default.stories.tsx index 2d3d1c01c..72b0ab2d5 100644 --- a/packages/components/src/components/Badge/stories/Default.stories.tsx +++ b/packages/components/src/components/Badge/stories/Default.stories.tsx @@ -6,7 +6,7 @@ import { Icon } from "@/components/Icon"; import { Text } from "@/components/Text"; const meta: Meta = { - title: "Badge", + title: "Status/Badge", component: Badge, argTypes: { variant: { diff --git a/packages/components/src/components/Badge/stories/EdgeCases.stories.tsx b/packages/components/src/components/Badge/stories/EdgeCases.stories.tsx index 6a79769eb..7473a4fef 100644 --- a/packages/components/src/components/Badge/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/Badge/stories/EdgeCases.stories.tsx @@ -6,7 +6,7 @@ import { dummyText } from "@/lib/dev/dummyText"; const meta: Meta = { ...defaultMeta, - title: "Badge/EdgeCases", + title: "Status/Badge/EdgeCases", }; export default meta; diff --git a/packages/components/src/components/Badge/stories/Variants.stories.tsx b/packages/components/src/components/Badge/stories/Variants.stories.tsx index 6f039b457..8e3258558 100644 --- a/packages/components/src/components/Badge/stories/Variants.stories.tsx +++ b/packages/components/src/components/Badge/stories/Variants.stories.tsx @@ -5,7 +5,7 @@ import React from "react"; const meta: Meta = { ...defaultMeta, - title: "Badge/Variants", + title: "Status/Badge/Variants", }; export default meta; diff --git a/packages/components/src/components/Button/stories/Default.stories.tsx b/packages/components/src/components/Button/stories/Default.stories.tsx index e62126cae..21e20e30d 100644 --- a/packages/components/src/components/Button/stories/Default.stories.tsx +++ b/packages/components/src/components/Button/stories/Default.stories.tsx @@ -7,7 +7,7 @@ import { Text } from "@/components/Text"; import { action } from "@storybook/addon-actions"; const meta: Meta = { - title: "Button", + title: "Buttons/Button", component: Button, args: { onPress: action("onPress"), diff --git a/packages/components/src/components/Button/stories/EdgeCases.stories.tsx b/packages/components/src/components/Button/stories/EdgeCases.stories.tsx index 401e2aefb..de6752c6f 100644 --- a/packages/components/src/components/Button/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/Button/stories/EdgeCases.stories.tsx @@ -9,7 +9,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Button/Edge Cases", + title: "Buttons/Button/Edge Cases", }; export default meta; diff --git a/packages/components/src/components/Button/stories/Variants.stories.tsx b/packages/components/src/components/Button/stories/Variants.stories.tsx index 2a4697c4a..2aed9d733 100644 --- a/packages/components/src/components/Button/stories/Variants.stories.tsx +++ b/packages/components/src/components/Button/stories/Variants.stories.tsx @@ -4,7 +4,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Button/Variants", + title: "Buttons/Button/Variants", }; export default meta; diff --git a/packages/components/src/components/Checkbox/stories/Default.stories.tsx b/packages/components/src/components/Checkbox/stories/Default.stories.tsx index 49b6decc1..f167a2ccf 100644 --- a/packages/components/src/components/Checkbox/stories/Default.stories.tsx +++ b/packages/components/src/components/Checkbox/stories/Default.stories.tsx @@ -4,7 +4,7 @@ import React from "react"; import { action } from "@storybook/addon-actions"; const meta: Meta = { - title: "Checkbox", + title: "Forms/Checkbox", component: Checkbox, args: { onChange: action("onChange"), diff --git a/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx b/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx index f4008f979..795e6c31e 100644 --- a/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx @@ -5,7 +5,7 @@ import defaultMeta from "./Default.stories"; import { dummyText } from "@/lib/dev/dummyText"; const meta: Meta = { - title: "Checkbox/EdgeCases", + title: "Forms/Checkbox/EdgeCases", ...defaultMeta, }; diff --git a/packages/components/src/components/Content/stories/Default.stories.tsx b/packages/components/src/components/Content/stories/Default.stories.tsx index b85bb8399..9266ac9d5 100644 --- a/packages/components/src/components/Content/stories/Default.stories.tsx +++ b/packages/components/src/components/Content/stories/Default.stories.tsx @@ -3,7 +3,7 @@ import Content from "../Content"; import React from "react"; const meta: Meta = { - title: "Content", + title: "Content/Content", component: Content, argTypes: { elementType: { diff --git a/packages/components/src/components/Heading/stories/Default.stories.tsx b/packages/components/src/components/Heading/stories/Default.stories.tsx index 7e3d73940..5fbc341ad 100644 --- a/packages/components/src/components/Heading/stories/Default.stories.tsx +++ b/packages/components/src/components/Heading/stories/Default.stories.tsx @@ -3,7 +3,7 @@ import Heading from "../Heading"; import React from "react"; const meta: Meta = { - title: "Heading", + title: "Content/Heading", component: Heading, argTypes: { level: { diff --git a/packages/components/src/components/Heading/stories/Levels.stories.tsx b/packages/components/src/components/Heading/stories/Levels.stories.tsx index 781389383..af0a6ad3a 100644 --- a/packages/components/src/components/Heading/stories/Levels.stories.tsx +++ b/packages/components/src/components/Heading/stories/Levels.stories.tsx @@ -4,7 +4,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Heading/Levels", + title: "Content/Heading/Levels", component: Heading, }; export default meta; diff --git a/packages/components/src/components/Icon/stories/Default.stories.tsx b/packages/components/src/components/Icon/stories/Default.stories.tsx index 9e677b96a..96de08a49 100644 --- a/packages/components/src/components/Icon/stories/Default.stories.tsx +++ b/packages/components/src/components/Icon/stories/Default.stories.tsx @@ -4,7 +4,7 @@ import { faStar } from "@fortawesome/free-regular-svg-icons/faStar"; import React from "react"; const meta: Meta = { - title: "Icon", + title: "Content/Icon", component: Icon, args: { fontSize: 32, diff --git a/packages/components/src/components/Image/stories/Default.stories.tsx b/packages/components/src/components/Image/stories/Default.stories.tsx index f831fcdda..8418a6fb7 100644 --- a/packages/components/src/components/Image/stories/Default.stories.tsx +++ b/packages/components/src/components/Image/stories/Default.stories.tsx @@ -4,7 +4,7 @@ import React from "react"; import { dummyText } from "@/lib/dev/dummyText"; const meta: Meta = { - title: "Image", + title: "Content/Image", component: Image, render: (props) => Gopher, }; diff --git a/packages/components/src/components/Initials/stories/Default.stories.tsx b/packages/components/src/components/Initials/stories/Default.stories.tsx index 118bf671a..bb7d1de15 100644 --- a/packages/components/src/components/Initials/stories/Default.stories.tsx +++ b/packages/components/src/components/Initials/stories/Default.stories.tsx @@ -3,7 +3,7 @@ import Initials from "../Initials"; import React from "react"; const meta: Meta = { - title: "Initials", + title: "Content/Initials", component: Initials, render: (props) => Max Mustermann, parameters: { diff --git a/packages/components/src/components/Initials/stories/Variants.stories.tsx b/packages/components/src/components/Initials/stories/Variants.stories.tsx index acf656a09..2dc481038 100644 --- a/packages/components/src/components/Initials/stories/Variants.stories.tsx +++ b/packages/components/src/components/Initials/stories/Variants.stories.tsx @@ -5,7 +5,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Initials/Variants", + title: "Content/Initials/Variants", }; export default meta; diff --git a/packages/components/src/components/Label/stories/Default.stories.tsx b/packages/components/src/components/Label/stories/Default.stories.tsx index b095da996..b1a8f676c 100644 --- a/packages/components/src/components/Label/stories/Default.stories.tsx +++ b/packages/components/src/components/Label/stories/Default.stories.tsx @@ -3,7 +3,7 @@ import Label from "../Label"; import React from "react"; const meta: Meta = { - title: "Label", + title: "Content/Label", component: Label, render: (props) => , }; diff --git a/packages/components/src/components/Link/stories/Default.stories.tsx b/packages/components/src/components/Link/stories/Default.stories.tsx index ca5415962..36a9f5134 100644 --- a/packages/components/src/components/Link/stories/Default.stories.tsx +++ b/packages/components/src/components/Link/stories/Default.stories.tsx @@ -4,7 +4,7 @@ import { action } from "@storybook/addon-actions"; import React from "react"; const meta: Meta = { - title: "Link", + title: "Navigation/Link", component: Link, args: { onPress: action("onPress"), diff --git a/packages/components/src/components/Navigation/stories/Default.stories.tsx b/packages/components/src/components/Navigation/stories/Default.stories.tsx index 8f67702b0..1a1b0be3e 100644 --- a/packages/components/src/components/Navigation/stories/Default.stories.tsx +++ b/packages/components/src/components/Navigation/stories/Default.stories.tsx @@ -8,7 +8,7 @@ import { Text } from "@/components/Text"; import { Navigation, NavigationItem } from "@/components/Navigation"; const meta: Meta = { - title: "Navigation", + title: "Navigation/Navigation", component: Navigation, parameters: { controls: { exclude: ["className"] }, diff --git a/packages/components/src/components/Note/stories/Default.stories.tsx b/packages/components/src/components/Note/stories/Default.stories.tsx index fcbdaa6d1..a865f5099 100644 --- a/packages/components/src/components/Note/stories/Default.stories.tsx +++ b/packages/components/src/components/Note/stories/Default.stories.tsx @@ -7,7 +7,7 @@ import { Icon } from "@/components/Icon"; import { faEnvelope } from "@fortawesome/free-regular-svg-icons"; const meta: Meta = { - title: "Note", + title: "Status/Note", component: Note, argTypes: { variant: { diff --git a/packages/components/src/components/Note/stories/EdgeCases.stories.tsx b/packages/components/src/components/Note/stories/EdgeCases.stories.tsx index bc2f17285..14f70fffb 100644 --- a/packages/components/src/components/Note/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/Note/stories/EdgeCases.stories.tsx @@ -8,7 +8,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Note/Edge Cases", + title: "Status/Note/Edge Cases", }; export default meta; diff --git a/packages/components/src/components/Note/stories/Variants.stories.tsx b/packages/components/src/components/Note/stories/Variants.stories.tsx index d4ca90191..694a47ee9 100644 --- a/packages/components/src/components/Note/stories/Variants.stories.tsx +++ b/packages/components/src/components/Note/stories/Variants.stories.tsx @@ -7,7 +7,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Note/Variants", + title: "Status/Note/Variants", }; export default meta; diff --git a/packages/components/src/components/RadioGroup/stories/Default.stories.tsx b/packages/components/src/components/RadioGroup/stories/Default.stories.tsx index 518b614c0..a0a29a2fa 100644 --- a/packages/components/src/components/RadioGroup/stories/Default.stories.tsx +++ b/packages/components/src/components/RadioGroup/stories/Default.stories.tsx @@ -10,7 +10,7 @@ import { action } from "@storybook/addon-actions"; import { FieldError } from "@/components/FieldError"; const meta: Meta = { - title: "RadioGroup", + title: "Forms/RadioGroup", component: RadioGroup, args: { onChange: action("onChange"), diff --git a/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx b/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx index 500ccada9..ee31c17ce 100644 --- a/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx @@ -9,7 +9,7 @@ import { dummyText } from "@/lib/dev/dummyText"; import defaultMeta from "./Default.stories"; const meta: Meta = { - title: "RadioGroup/EdgeCases", + title: "Forms/RadioGroup/EdgeCases", ...defaultMeta, }; diff --git a/packages/components/src/components/StatusIcon/stories/Default.stories.tsx b/packages/components/src/components/StatusIcon/stories/Default.stories.tsx index 2af659126..fb20c6531 100644 --- a/packages/components/src/components/StatusIcon/stories/Default.stories.tsx +++ b/packages/components/src/components/StatusIcon/stories/Default.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import StatusIcon from "../StatusIcon"; const meta: Meta = { - title: "StatusIcon", + title: "Status/StatusIcon", component: StatusIcon, argTypes: { variant: { diff --git a/packages/components/src/components/Switch/stories/Default.stories.tsx b/packages/components/src/components/Switch/stories/Default.stories.tsx index 45db62295..49888f6d4 100644 --- a/packages/components/src/components/Switch/stories/Default.stories.tsx +++ b/packages/components/src/components/Switch/stories/Default.stories.tsx @@ -4,7 +4,7 @@ import React from "react"; import { action } from "@storybook/addon-actions"; const meta: Meta = { - title: "Switch", + title: "Forms/Switch", component: Switch, args: { onChange: action("onChange"), diff --git a/packages/components/src/components/Switch/stories/EdgeCases.stories.tsx b/packages/components/src/components/Switch/stories/EdgeCases.stories.tsx index 0e8f198f0..a0855c2c6 100644 --- a/packages/components/src/components/Switch/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/Switch/stories/EdgeCases.stories.tsx @@ -6,7 +6,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Switch/Edge Cases", + title: "Forms/Switch/Edge Cases", }; export default meta; diff --git a/packages/components/src/components/Switch/stories/Variants.stories.tsx b/packages/components/src/components/Switch/stories/Variants.stories.tsx index 6307b16b2..6bdb7553f 100644 --- a/packages/components/src/components/Switch/stories/Variants.stories.tsx +++ b/packages/components/src/components/Switch/stories/Variants.stories.tsx @@ -4,7 +4,7 @@ import defaultMeta from "./Default.stories"; const meta: Meta = { ...defaultMeta, - title: "Switch/Variants", + title: "Forms/Switch/Variants", args: { defaultSelected: true }, }; diff --git a/packages/components/src/components/Text/stories/Default.stories.tsx b/packages/components/src/components/Text/stories/Default.stories.tsx index e3ea88aba..c3b35fa92 100644 --- a/packages/components/src/components/Text/stories/Default.stories.tsx +++ b/packages/components/src/components/Text/stories/Default.stories.tsx @@ -3,7 +3,7 @@ import Text from "../Text"; import React from "react"; const meta: Meta = { - title: "Text", + title: "Content/Text", component: Text, argTypes: { elementType: { diff --git a/packages/components/src/components/TextField/stories/Default.stories.tsx b/packages/components/src/components/TextField/stories/Default.stories.tsx index 1e4fef6e1..446fbc09d 100644 --- a/packages/components/src/components/TextField/stories/Default.stories.tsx +++ b/packages/components/src/components/TextField/stories/Default.stories.tsx @@ -9,7 +9,7 @@ import { Button } from "@/components/Button"; import { FieldError } from "@/components/FieldError"; const meta: Meta = { - title: "TextField", + title: "Forms/TextField", component: TextField, render: (props) => ( From 59f6c7d5ed3756237bc581d9d8ba119d8207f7eb Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 23 Jan 2024 13:32:56 +0100 Subject: [PATCH 15/28] add plain button --- .../src/components/Button/Button.module.css | 0 .../src/components/Button/Button.module.scss | 5 +++- .../design-tokens/src/components/button.yml | 25 +++++++++++++++---- 3 files changed, 24 insertions(+), 6 deletions(-) delete mode 100644 packages/components/src/components/Button/Button.module.css diff --git a/packages/components/src/components/Button/Button.module.css b/packages/components/src/components/Button/Button.module.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/components/src/components/Button/Button.module.scss b/packages/components/src/components/Button/Button.module.scss index b54e88a80..fe3017462 100644 --- a/packages/components/src/components/Button/Button.module.scss +++ b/packages/components/src/components/Button/Button.module.scss @@ -42,14 +42,16 @@ @mixin variant($variant) { .#{$variant} { background-color: var(--button--#{$variant}-background-color--default); - color: var(--button--#{$variant}-color); + color: var(--button--#{$variant}-color--default); &:hover { background-color: var(--button--#{$variant}-background-color--hover); + color: var(--button--#{$variant}-color--hover); } &[data-pressed] { background-color: var(--button--#{$variant}-background-color--pressed); + color: var(--button--#{$variant}-color--pressed); } } } @@ -58,3 +60,4 @@ @include variant(accent); @include variant(negative); @include variant(secondary); +@include variant(plain); diff --git a/packages/design-tokens/src/components/button.yml b/packages/design-tokens/src/components/button.yml index c1f1eb6f2..deafe3bc5 100644 --- a/packages/design-tokens/src/components/button.yml +++ b/packages/design-tokens/src/components/button.yml @@ -17,7 +17,12 @@ button: pressed: value: "{accent.color.900}" accent-color: - value: "{color.white}" + default: + value: "{color.white}" + hover: + value: "{color.white}" + pressed: + value: "{color.white}" # Primary primary-background-color: @@ -28,7 +33,12 @@ button: pressed: value: "{informative.color.900}" primary-color: - value: "{color.white}" + default: + value: "{color.white}" + hover: + value: "{color.white}" + pressed: + value: "{color.white}" # Secondary secondary-background-color: @@ -55,10 +65,17 @@ button: pressed: value: "{negative.color.900}" negative-color: - value: "{color.white}" + default: + value: "{color.white}" + hover: + value: "{color.white}" + pressed: + value: "{color.white}" # Plain plain-background-color: + default: + value: "{color.transparent}" hover: value: "{informative.color.200}" pressed: @@ -70,8 +87,6 @@ button: value: "{informative.color.900}" pressed: value: "{informative.color.1000}" - disabled: - value: "{neutral.color.600}" # Disabled disabled-background-color: From 1eb02bf1946516f6fce036b15ddcb0c2ab3a2c51 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 23 Jan 2024 14:48:33 +0100 Subject: [PATCH 16/28] update stories --- packages/components/package.json | 2 + .../src/components/CopyButton/CopyButton.tsx | 30 ++++++------ .../CopyButton/stories/Default.stories.tsx | 2 +- .../CurrencyValue/CurrencyValue.tsx | 21 -------- .../src/components/CurrencyValue/index.ts | 3 -- .../CurrencyValue/stories/Default.stories.tsx | 26 ---------- .../src/components/DateValue/DateValue.tsx | 21 -------- .../src/components/DateValue/index.ts | 3 -- .../DateValue/stories/Default.stories.tsx | 27 ----------- ...ue.module.css => LabeledValue.module.scss} | 26 +++++----- .../components/LabeledValue/LabeledValue.tsx | 29 +++++++---- .../LabeledValue/stories/Default.stories.tsx | 30 +++--------- .../stories/EdgeCases.stories.tsx | 6 ++- .../Tooltip/stories/Default.stories.tsx | 8 ++-- .../Tooltip/stories/EdgeCases.stories.tsx | 6 +-- .../extractStringFromReactNode.test.tsx | 48 ------------------- .../extractStringFromReactNode.ts | 14 ------ packages/components/vite.build.config.ts | 2 + 18 files changed, 70 insertions(+), 234 deletions(-) delete mode 100644 packages/components/src/components/CurrencyValue/CurrencyValue.tsx delete mode 100644 packages/components/src/components/CurrencyValue/index.ts delete mode 100644 packages/components/src/components/CurrencyValue/stories/Default.stories.tsx delete mode 100644 packages/components/src/components/DateValue/DateValue.tsx delete mode 100644 packages/components/src/components/DateValue/index.ts delete mode 100644 packages/components/src/components/DateValue/stories/Default.stories.tsx rename packages/components/src/components/LabeledValue/{LabeledValue.module.css => LabeledValue.module.scss} (50%) delete mode 100644 packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx delete mode 100644 packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts diff --git a/packages/components/package.json b/packages/components/package.json index 72241275f..784714b41 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -8,6 +8,7 @@ "./Button": "./dist/Button.js", "./Checkbox": "./dist/Checkbox.js", "./Content": "./dist/Content.js", + "./CopyButton": "./dist/CopyButton.js", "./FieldDescription": "./dist/FieldDescription.js", "./FieldError": "./dist/FieldError.js", "./Heading": "./dist/Heading.js", @@ -15,6 +16,7 @@ "./Image": "./dist/Image.js", "./Initials": "./dist/Initials.js", "./Label": "./dist/Label.js", + "./LabeledValue": "./dist/LabeledValue.js", "./Link": "./dist/Link.js", "./Navigation": "./dist/Navigation.js", "./Note": "./dist/Note.js", diff --git a/packages/components/src/components/CopyButton/CopyButton.tsx b/packages/components/src/components/CopyButton/CopyButton.tsx index a8ceb7424..b76dc6f71 100644 --- a/packages/components/src/components/CopyButton/CopyButton.tsx +++ b/packages/components/src/components/CopyButton/CopyButton.tsx @@ -1,15 +1,14 @@ -import React, { FC, ReactNode } from "react"; -import { extractStringFromReactNode } from "@/lib/extractStringFromReactNode/extractStringFromReactNode"; +import React, { FC } from "react"; import copy from "copy-to-clipboard"; import { Button } from "@/components/Button"; import { Icon } from "@/components/Icon"; import { faCopy } from "@fortawesome/free-regular-svg-icons/faCopy"; import locales from "./locales/*.locale.json"; import { useLocalizedStringFormatter } from "react-aria"; -import clsx from "clsx"; +import { Tooltip, TooltipTrigger } from "@/components/Tooltip"; export interface CopyButtonProps { - value: ReactNode; + value: string; className?: string; } @@ -18,23 +17,24 @@ export const CopyButton: FC = (props) => { const stringFormatter = useLocalizedStringFormatter(locales); - const rootClassName = clsx(className); - const ariaLabel = stringFormatter.format("copyButton.copy"); const copyValue = () => { - copy(extractStringFromReactNode(value)); + copy(value); }; return ( - + + + {ariaLabel} + ); }; diff --git a/packages/components/src/components/CopyButton/stories/Default.stories.tsx b/packages/components/src/components/CopyButton/stories/Default.stories.tsx index 268facbfe..4791a668b 100644 --- a/packages/components/src/components/CopyButton/stories/Default.stories.tsx +++ b/packages/components/src/components/CopyButton/stories/Default.stories.tsx @@ -3,7 +3,7 @@ import React from "react"; import { CopyButton } from "../CopyButton"; const meta: Meta = { - title: "CopyButton", + title: "Buttons/CopyButton", component: CopyButton, render: (props) => , parameters: { diff --git a/packages/components/src/components/CurrencyValue/CurrencyValue.tsx b/packages/components/src/components/CurrencyValue/CurrencyValue.tsx deleted file mode 100644 index 96c71f5f6..000000000 --- a/packages/components/src/components/CurrencyValue/CurrencyValue.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { FC } from "react"; -import { useNumberFormatter } from "react-aria"; - -export interface CurrencyValueProps { - currency?: string; - value: number; -} - -export const CurrencyValue: FC = (props) => { - const { value, currency = "EUR" } = props; - - const formatter = useNumberFormatter({ - style: "currency", - currency, - minimumFractionDigits: 2, - }); - - return <>{formatter.format(value)}; -}; - -export default CurrencyValue; diff --git a/packages/components/src/components/CurrencyValue/index.ts b/packages/components/src/components/CurrencyValue/index.ts deleted file mode 100644 index 22a00fe04..000000000 --- a/packages/components/src/components/CurrencyValue/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { CurrencyValue } from "./CurrencyValue"; -export { type CurrencyValueProps, CurrencyValue } from "./CurrencyValue"; -export default CurrencyValue; diff --git a/packages/components/src/components/CurrencyValue/stories/Default.stories.tsx b/packages/components/src/components/CurrencyValue/stories/Default.stories.tsx deleted file mode 100644 index cd4197708..000000000 --- a/packages/components/src/components/CurrencyValue/stories/Default.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import CurrencyValue from "../CurrencyValue"; -import React from "react"; - -const meta: Meta = { - title: "Currency Value", - component: CurrencyValue, - render: (props) => , - argTypes: { - currency: { - control: "inline-radio", - options: ["EUR", "USD", "GBP", "THB"], - defaultValue: "EUR", - }, - }, - parameters: { - controls: { exclude: ["value"] }, - }, -}; -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; - -export const CustomCurrency: Story = { args: { currency: "USD" } }; diff --git a/packages/components/src/components/DateValue/DateValue.tsx b/packages/components/src/components/DateValue/DateValue.tsx deleted file mode 100644 index 6139c8721..000000000 --- a/packages/components/src/components/DateValue/DateValue.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { FC } from "react"; -import { useDateFormatter } from "react-aria"; - -export interface DateValueProps { - /** @default "date" */ - format?: "date" | "dateTime" | "time"; - value: Date; -} - -export const DateValue: FC = (props) => { - const { value, format = "date" } = props; - - const formatter = useDateFormatter({ - dateStyle: format !== "time" ? "short" : undefined, - timeStyle: format !== "date" ? "short" : undefined, - }); - - return <>{formatter.format(value)}; -}; - -export default DateValue; diff --git a/packages/components/src/components/DateValue/index.ts b/packages/components/src/components/DateValue/index.ts deleted file mode 100644 index 350b13579..000000000 --- a/packages/components/src/components/DateValue/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DateValue } from "./DateValue"; -export { type DateValueProps, DateValue } from "./DateValue"; -export default DateValue; diff --git a/packages/components/src/components/DateValue/stories/Default.stories.tsx b/packages/components/src/components/DateValue/stories/Default.stories.tsx deleted file mode 100644 index 8f6e0ce91..000000000 --- a/packages/components/src/components/DateValue/stories/Default.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import DateValue from "../DateValue"; -import React from "react"; - -const meta: Meta = { - title: "Date Value", - component: DateValue, - render: (props) => , - argTypes: { - format: { - control: "inline-radio", - defaultValue: "date", - }, - }, - parameters: { - controls: { exclude: ["value"] }, - }, -}; -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; - -export const DateAndTime: Story = { args: { format: "dateTime" } }; - -export const Time: Story = { args: { format: "time" } }; diff --git a/packages/components/src/components/LabeledValue/LabeledValue.module.css b/packages/components/src/components/LabeledValue/LabeledValue.module.scss similarity index 50% rename from packages/components/src/components/LabeledValue/LabeledValue.module.css rename to packages/components/src/components/LabeledValue/LabeledValue.module.scss index 55511f034..6d0ea6563 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.module.css +++ b/packages/components/src/components/LabeledValue/LabeledValue.module.scss @@ -1,6 +1,6 @@ @import "@/styles"; -.root { +.labeledValue { display: grid; grid-template-areas: "label" @@ -9,23 +9,23 @@ column-gap: var(--labeled-value--value-to-copy-button-spacing); width: fit-content; - &:has(> :global(.flow-button)) { + &:has(.copy) { grid-template-areas: "label label" "value button"; } +} - :global(.flow-label) { - grid-area: label; - } +.label { + grid-area: label; +} - :global(.flow-text) { - grid-area: value; - } +.content { + grid-area: value; +} - & > :global(.flow-button) { - grid-area: button; - margin-top: calc(var(--labeled-value--label-to-value-spacing) * -1); - align-self: start; - } +.copy { + grid-area: button; + margin-top: calc(var(--labeled-value--label-to-value-spacing) * -1); + align-self: start; } diff --git a/packages/components/src/components/LabeledValue/LabeledValue.tsx b/packages/components/src/components/LabeledValue/LabeledValue.tsx index 3016946c7..d7dbfbda2 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.tsx +++ b/packages/components/src/components/LabeledValue/LabeledValue.tsx @@ -1,25 +1,34 @@ -import React, { FC, PropsWithChildren, ReactNode } from "react"; -import styles from "./LabeledValue.module.css"; +import React, { FC, PropsWithChildren } from "react"; +import styles from "./LabeledValue.module.scss"; import clsx from "clsx"; -import { Text } from "@/components/Text"; import { CopyButton } from "@/components/CopyButton"; +import { PropsContext, PropsContextProvider } from "@/lib/propsContext"; export interface LabeledValueProps extends PropsWithChildren { className?: string; - value: ReactNode; - copyable?: boolean; + copyValue?: string; } export const LabeledValue: FC = (props) => { - const { children, value, className, copyable } = props; + const { children, className, copyValue } = props; - const rootClassName = clsx(className, styles.root); + const rootClassName = clsx(styles.labeledValue, className); + + const propsContext: PropsContext = { + Label: { + className: styles.label, + }, + Content: { + className: styles.content, + }, + }; return (
- {children} - {value} - {copyable && } + + {children} + + {copyValue && }
); }; diff --git a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx index ef128fe6b..451d2c798 100644 --- a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx +++ b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx @@ -2,18 +2,18 @@ import type { Meta, StoryObj } from "@storybook/react"; import LabeledValue from "../LabeledValue"; import React from "react"; import { Label } from "@/components/Label"; -import { CurrencyValue } from "@/components/CurrencyValue"; -import { DateValue } from "@/components/DateValue"; +import { Content } from "@/components/Content"; const meta: Meta = { - title: "Labeled Value", + title: "Content/Labeled Value", component: LabeledValue, parameters: { - controls: { exclude: ["value", "className", "copyable"] }, + controls: { exclude: ["className", "copyValue"] }, }, render: (props) => ( - + + My proSpace ), }; @@ -23,22 +23,6 @@ type Story = StoryObj; export const Default: Story = {}; -export const WithCurrencyValue: Story = { - render: () => ( - }> - - - ), -}; - -export const WithDateValue: Story = { - render: () => ( - }> - - - ), -}; - -export const Copyable: Story = { - args: { copyable: true }, +export const WithCopyValue: Story = { + args: { copyValue: "My proSpace" }, }; diff --git a/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx b/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx index 22d2a4c4c..e579c59ec 100644 --- a/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx @@ -3,10 +3,11 @@ import LabeledValue from "../LabeledValue"; import defaultMeta from "./Default.stories"; import { dummyText } from "@/lib/dev/dummyText"; import { Label } from "@/components/Label"; +import { Content } from "@/components/Content"; import React from "react"; const meta: Meta = { - title: "Labeled Value / Edge Cases", + title: "Content/Labeled Value/Edge Cases", ...defaultMeta, }; export default meta; @@ -15,8 +16,9 @@ type Story = StoryObj; export const LongTexts: Story = { render: (props) => ( - + + {dummyText.long} ), }; diff --git a/packages/components/src/components/Tooltip/stories/Default.stories.tsx b/packages/components/src/components/Tooltip/stories/Default.stories.tsx index bad41a996..0632e65a5 100644 --- a/packages/components/src/components/Tooltip/stories/Default.stories.tsx +++ b/packages/components/src/components/Tooltip/stories/Default.stories.tsx @@ -4,17 +4,17 @@ import React from "react"; import { Text } from "@/components/Text"; import { Button } from "@/components/Button"; import { Icon } from "@/components/Icon"; -import { faCopy } from "@fortawesome/free-regular-svg-icons/faCopy"; +import { faSave } from "@fortawesome/free-regular-svg-icons/faSave"; const meta: Meta = { title: "Overlays/Tooltip", component: Tooltip, render: () => ( - - Copy + Save ), }; diff --git a/packages/components/src/components/Tooltip/stories/EdgeCases.stories.tsx b/packages/components/src/components/Tooltip/stories/EdgeCases.stories.tsx index c441aa892..633b92f24 100644 --- a/packages/components/src/components/Tooltip/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/Tooltip/stories/EdgeCases.stories.tsx @@ -4,17 +4,17 @@ import React from "react"; import { Text } from "@/components/Text"; import { Button } from "@/components/Button"; import { Icon } from "@/components/Icon"; -import { faCopy } from "@fortawesome/free-regular-svg-icons/faCopy"; import defaultMeta from "./Default.stories"; import { dummyText } from "@/lib/dev/dummyText"; +import { faSave } from "@fortawesome/free-regular-svg-icons/faSave"; const meta: Meta = { ...defaultMeta, title: "Overlays/Tooltip/Edge Cases", render: () => ( - {dummyText.medium} diff --git a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx deleted file mode 100644 index 92c7750b5..000000000 --- a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.test.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { extractStringFromReactNode } from "./extractStringFromReactNode"; -import React from "react"; - -describe("extractStringFromReactNode function results are strings", () => { - test("input of type string", () => { - expect(extractStringFromReactNode("foo")).toMatchInlineSnapshot('"foo"'); - }); - test("input of type number", () => { - expect(extractStringFromReactNode(100)).toMatchInlineSnapshot('"100"'); - }); - test("input of type boolean (true)", () => { - expect(extractStringFromReactNode(true)).toMatchInlineSnapshot('"true"'); - }); - test("input of type boolean (false)", () => { - expect(extractStringFromReactNode(false)).toMatchInlineSnapshot('"false"'); - }); - test("input of type jsx element", () => { - expect(extractStringFromReactNode(
foo
)).toMatchInlineSnapshot( - '"foo"', - ); - }); - test("input of type nested jsx element", () => { - expect( - extractStringFromReactNode( -
-
foo
-
, - ), - ).toMatchInlineSnapshot('"foo"'); - }); - test("input of type jsx element without text results in empty string", () => { - expect(extractStringFromReactNode(
)).toMatchInlineSnapshot('""'); - }); - test("input of type jsx element with multiple texts results in empty string", () => { - expect( - extractStringFromReactNode( -
- foo -
foo
-
foo
-
, - ), - ).toMatchInlineSnapshot('""'); - }); - test("null input results in empty string", () => { - expect(extractStringFromReactNode(null)).toMatchInlineSnapshot('""'); - }); -}); diff --git a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts b/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts deleted file mode 100644 index 11d13626d..000000000 --- a/packages/components/src/lib/extractStringFromReactNode/extractStringFromReactNode.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { ReactNode } from "react"; - -export const extractStringFromReactNode = (node: ReactNode): string => { - if (typeof node === "string") { - return node; - } else if (typeof node === "number") { - return node.toString(); - } else if (typeof node === "boolean") { - return node ? "true" : "false"; - } else if (typeof node === "object" && node && "props" in node) { - return extractStringFromReactNode(node.props.children); - } - return ""; -}; diff --git a/packages/components/vite.build.config.ts b/packages/components/vite.build.config.ts index 69bdf7769..54662413b 100644 --- a/packages/components/vite.build.config.ts +++ b/packages/components/vite.build.config.ts @@ -13,6 +13,7 @@ export default defineConfig( Button: "./src/components/Button/index.ts", Checkbox: "./src/components/Checkbox/index.ts", Content: "./src/components/Content/index.ts", + CopyButton: "./src/components/CopyButton/index.ts", FieldDescription: "./src/components/FieldDescription/index.ts", FieldError: "./src/components/FieldError/index.ts", Heading: "./src/components/Heading/index.ts", @@ -20,6 +21,7 @@ export default defineConfig( Image: "./src/components/Image/index.ts", Initials: "./src/components/Initials/index.ts", Label: "./src/components/Label/index.ts", + LabeledValue: "./src/components/LabeledValue/index.ts", Link: "./src/components/Link/index.ts", Navigation: "./src/components/Navigation/index.ts", NavigationItem: From 5c844bdcf5f0a6b08a79a16854c7056d0c9b05e0 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 23 Jan 2024 14:49:41 +0100 Subject: [PATCH 17/28] update stories --- .../components/src/components/CopyButton/CopyButton.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/CopyButton/CopyButton.tsx b/packages/components/src/components/CopyButton/CopyButton.tsx index b76dc6f71..4ead5244a 100644 --- a/packages/components/src/components/CopyButton/CopyButton.tsx +++ b/packages/components/src/components/CopyButton/CopyButton.tsx @@ -17,7 +17,7 @@ export const CopyButton: FC = (props) => { const stringFormatter = useLocalizedStringFormatter(locales); - const ariaLabel = stringFormatter.format("copyButton.copy"); + const tooltip = stringFormatter.format("copyButton.copy"); const copyValue = () => { copy(value); @@ -28,12 +28,12 @@ export const CopyButton: FC = (props) => { - {ariaLabel} + {tooltip} ); }; From 3bd90b772b8775af9f0fe97d57b2f4b27a8f3aed Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 23 Jan 2024 14:52:36 +0100 Subject: [PATCH 18/28] fix prettier --- .../src/components/CopyButton/stories/Default.stories.tsx | 2 +- packages/components/src/components/StatusIcon/StatusIcon.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/CopyButton/stories/Default.stories.tsx b/packages/components/src/components/CopyButton/stories/Default.stories.tsx index 4791a668b..df56fdde3 100644 --- a/packages/components/src/components/CopyButton/stories/Default.stories.tsx +++ b/packages/components/src/components/CopyButton/stories/Default.stories.tsx @@ -5,7 +5,7 @@ import { CopyButton } from "../CopyButton"; const meta: Meta = { title: "Buttons/CopyButton", component: CopyButton, - render: (props) => , + render: (props) => , parameters: { controls: { exclude: ["value", "className"] }, }, diff --git a/packages/components/src/components/StatusIcon/StatusIcon.tsx b/packages/components/src/components/StatusIcon/StatusIcon.tsx index 7de0a4ecd..768904f7c 100644 --- a/packages/components/src/components/StatusIcon/StatusIcon.tsx +++ b/packages/components/src/components/StatusIcon/StatusIcon.tsx @@ -16,9 +16,7 @@ export const StatusIcon: FC = (props) => { const stringFormatter = useLocalizedStringFormatter(locales); - const ariaLabel = stringFormatter.format( - `statusIcon.${variant}`, - ); + const ariaLabel = stringFormatter.format(`statusIcon.${variant}`); const icon = variant === "info" From 6a3008d14eb2631027ee2f0eb0063eaf0a725ef9 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 23 Jan 2024 14:56:58 +0100 Subject: [PATCH 19/28] replace copyValue prop --- .../LabeledValue/LabeledValue.module.scss | 4 ++-- .../src/components/LabeledValue/LabeledValue.tsx | 7 ++++--- .../LabeledValue/stories/Default.stories.tsx | 13 ++++++++++--- .../LabeledValue/stories/EdgeCases.stories.tsx | 4 +++- 4 files changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/components/src/components/LabeledValue/LabeledValue.module.scss b/packages/components/src/components/LabeledValue/LabeledValue.module.scss index 6d0ea6563..992dd7e3f 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.module.scss +++ b/packages/components/src/components/LabeledValue/LabeledValue.module.scss @@ -9,7 +9,7 @@ column-gap: var(--labeled-value--value-to-copy-button-spacing); width: fit-content; - &:has(.copy) { + &:has(.button) { grid-template-areas: "label label" "value button"; @@ -24,7 +24,7 @@ grid-area: value; } -.copy { +.button { grid-area: button; margin-top: calc(var(--labeled-value--label-to-value-spacing) * -1); align-self: start; diff --git a/packages/components/src/components/LabeledValue/LabeledValue.tsx b/packages/components/src/components/LabeledValue/LabeledValue.tsx index d7dbfbda2..95cc9dc4a 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.tsx +++ b/packages/components/src/components/LabeledValue/LabeledValue.tsx @@ -1,7 +1,6 @@ import React, { FC, PropsWithChildren } from "react"; import styles from "./LabeledValue.module.scss"; import clsx from "clsx"; -import { CopyButton } from "@/components/CopyButton"; import { PropsContext, PropsContextProvider } from "@/lib/propsContext"; export interface LabeledValueProps extends PropsWithChildren { @@ -10,7 +9,7 @@ export interface LabeledValueProps extends PropsWithChildren { } export const LabeledValue: FC = (props) => { - const { children, className, copyValue } = props; + const { children, className } = props; const rootClassName = clsx(styles.labeledValue, className); @@ -21,6 +20,9 @@ export const LabeledValue: FC = (props) => { Content: { className: styles.content, }, + Button: { + className: styles.button, + }, }; return ( @@ -28,7 +30,6 @@ export const LabeledValue: FC = (props) => { {children} - {copyValue && }
); }; diff --git a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx index 451d2c798..9c2146ef9 100644 --- a/packages/components/src/components/LabeledValue/stories/Default.stories.tsx +++ b/packages/components/src/components/LabeledValue/stories/Default.stories.tsx @@ -3,12 +3,13 @@ import LabeledValue from "../LabeledValue"; import React from "react"; import { Label } from "@/components/Label"; import { Content } from "@/components/Content"; +import { CopyButton } from "@/components/CopyButton"; const meta: Meta = { title: "Content/Labeled Value", component: LabeledValue, parameters: { - controls: { exclude: ["className", "copyValue"] }, + controls: { exclude: ["className"] }, }, render: (props) => ( @@ -23,6 +24,12 @@ type Story = StoryObj; export const Default: Story = {}; -export const WithCopyValue: Story = { - args: { copyValue: "My proSpace" }, +export const WithCopyButton: Story = { + render: (props) => ( + + + My proSpace + + + ), }; diff --git a/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx b/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx index e579c59ec..ee4084970 100644 --- a/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx @@ -5,6 +5,7 @@ import { dummyText } from "@/lib/dev/dummyText"; import { Label } from "@/components/Label"; import { Content } from "@/components/Content"; import React from "react"; +import { CopyButton } from "@/components/CopyButton"; const meta: Meta = { title: "Content/Labeled Value/Edge Cases", @@ -16,9 +17,10 @@ type Story = StoryObj; export const LongTexts: Story = { render: (props) => ( - + {dummyText.long} + ), }; From 895ef8c34c2767605006a29c1e4c4fc8e8522e9d Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 23 Jan 2024 14:58:39 +0100 Subject: [PATCH 20/28] clean up --- packages/components/src/components/LabeledValue/LabeledValue.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/LabeledValue/LabeledValue.tsx b/packages/components/src/components/LabeledValue/LabeledValue.tsx index 95cc9dc4a..aea79cab6 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.tsx +++ b/packages/components/src/components/LabeledValue/LabeledValue.tsx @@ -5,7 +5,6 @@ import { PropsContext, PropsContextProvider } from "@/lib/propsContext"; export interface LabeledValueProps extends PropsWithChildren { className?: string; - copyValue?: string; } export const LabeledValue: FC = (props) => { From 9b000f010e144fee6bb17ce5394c4fc705763efc Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 23 Jan 2024 15:06:18 +0100 Subject: [PATCH 21/28] clean up --- .../src/components/LabeledValue/LabeledValue.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/LabeledValue/LabeledValue.module.scss b/packages/components/src/components/LabeledValue/LabeledValue.module.scss index 992dd7e3f..5dc1aa139 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.module.scss +++ b/packages/components/src/components/LabeledValue/LabeledValue.module.scss @@ -26,6 +26,6 @@ .button { grid-area: button; - margin-top: calc(var(--labeled-value--label-to-value-spacing) * -1); + margin-top: calc(var(--size-px--xs) * -1); align-self: start; } From 4971e7700d411310ddf378dec51cedb291aa4e06 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Thu, 25 Jan 2024 09:42:09 +0100 Subject: [PATCH 22/28] merge master --- .../src/components/Button/stories/Variants.stories.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/components/src/components/Button/stories/Variants.stories.tsx b/packages/components/src/components/Button/stories/Variants.stories.tsx index e526492a9..10dc299a0 100644 --- a/packages/components/src/components/Button/stories/Variants.stories.tsx +++ b/packages/components/src/components/Button/stories/Variants.stories.tsx @@ -40,9 +40,3 @@ export const Plain: Story = { variant: "plain", }, }; - -export const Plain: Story = { - args: { - variant: "plain", - }, -}; From 9595c4c3ab43a5976b4dd070c31d5d7087be207d Mon Sep 17 00:00:00 2001 From: lmeyer Date: Thu, 25 Jan 2024 09:44:29 +0100 Subject: [PATCH 23/28] merge master --- .../src/components/LabeledValue/LabeledValue.module.scss | 2 +- packages/design-tokens/src/components/labeled-value.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/LabeledValue/LabeledValue.module.scss b/packages/components/src/components/LabeledValue/LabeledValue.module.scss index 5dc1aa139..037ef491b 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.module.scss +++ b/packages/components/src/components/LabeledValue/LabeledValue.module.scss @@ -6,7 +6,7 @@ "label" "value"; row-gap: var(--labeled-value--label-to-value-spacing); - column-gap: var(--labeled-value--value-to-copy-button-spacing); + column-gap: var(--labeled-value--value-to-button-spacing); width: fit-content; &:has(.button) { diff --git a/packages/design-tokens/src/components/labeled-value.yml b/packages/design-tokens/src/components/labeled-value.yml index a34c28830..963df2e91 100644 --- a/packages/design-tokens/src/components/labeled-value.yml +++ b/packages/design-tokens/src/components/labeled-value.yml @@ -1,5 +1,5 @@ labeled-value: label-to-value-spacing: value: "{size-rem.xs}" - value-to-copy-button-spacing: + value-to-button-spacing: value: "{size-rem.xs}" From f9d92ac34e75398a9475b218871d50be8b100ad8 Mon Sep 17 00:00:00 2001 From: Marco Falkenberg Date: Mon, 29 Jan 2024 13:41:23 +0100 Subject: [PATCH 24/28] fix(storybook): add flow class to body --- packages/components/.storybook/preview.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/components/.storybook/preview.tsx b/packages/components/.storybook/preview.tsx index e8ffd89db..744740059 100644 --- a/packages/components/.storybook/preview.tsx +++ b/packages/components/.storybook/preview.tsx @@ -3,11 +3,10 @@ import React from "react"; const preview: Preview = { decorators: [ - (Story) => ( -
- -
- ), + (Story) => { + document.body.classList.add("flow"); + return ; + }, ], globalTypes: { rtlDirection: {}, From 85a499b5b0665aaed9cf8515e8f0fb83f7cbdb69 Mon Sep 17 00:00:00 2001 From: Marco Falkenberg Date: Mon, 29 Jan 2024 13:42:07 +0100 Subject: [PATCH 25/28] feat: show tooltip default opened in Storybook --- .../src/components/Tooltip/stories/Default.stories.tsx | 7 +++++-- .../src/components/Tooltip/stories/EdgeCases.stories.tsx | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/Tooltip/stories/Default.stories.tsx b/packages/components/src/components/Tooltip/stories/Default.stories.tsx index 0632e65a5..6ed6d552a 100644 --- a/packages/components/src/components/Tooltip/stories/Default.stories.tsx +++ b/packages/components/src/components/Tooltip/stories/Default.stories.tsx @@ -9,8 +9,11 @@ import { faSave } from "@fortawesome/free-regular-svg-icons/faSave"; const meta: Meta = { title: "Overlays/Tooltip", component: Tooltip, - render: () => ( - + args: { + defaultOpen: true, + }, + render: (props) => ( + diff --git a/packages/components/src/components/Tooltip/stories/EdgeCases.stories.tsx b/packages/components/src/components/Tooltip/stories/EdgeCases.stories.tsx index 633b92f24..70aff0c2c 100644 --- a/packages/components/src/components/Tooltip/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/Tooltip/stories/EdgeCases.stories.tsx @@ -11,8 +11,11 @@ import { faSave } from "@fortawesome/free-regular-svg-icons/faSave"; const meta: Meta = { ...defaultMeta, title: "Overlays/Tooltip/Edge Cases", - render: () => ( - + args: { + defaultOpen: true, + }, + render: (props) => ( + From dbd866ebfbe1cb7eb5366e11ab4793a2a7278a19 Mon Sep 17 00:00:00 2001 From: Marco Falkenberg Date: Mon, 29 Jan 2024 13:54:31 +0100 Subject: [PATCH 26/28] fix: copy button should not stretch --- .../components/LabeledValue/LabeledValue.module.scss | 4 ++-- .../LabeledValue/stories/EdgeCases.stories.tsx | 11 ++++++++++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/LabeledValue/LabeledValue.module.scss b/packages/components/src/components/LabeledValue/LabeledValue.module.scss index 037ef491b..adc045fc3 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.module.scss +++ b/packages/components/src/components/LabeledValue/LabeledValue.module.scss @@ -7,7 +7,7 @@ "value"; row-gap: var(--labeled-value--label-to-value-spacing); column-gap: var(--labeled-value--value-to-button-spacing); - width: fit-content; + grid-template-columns: auto 1fr; &:has(.button) { grid-template-areas: @@ -27,5 +27,5 @@ .button { grid-area: button; margin-top: calc(var(--size-px--xs) * -1); - align-self: start; + justify-self: start; } diff --git a/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx b/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx index ee4084970..1d4f7dfd0 100644 --- a/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx +++ b/packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx @@ -15,7 +15,16 @@ export default meta; type Story = StoryObj; -export const LongTexts: Story = { +export const LongLabel: Story = { + render: (props) => ( + + + {dummyText.short} + + + ), +}; +export const LongContent: Story = { render: (props) => ( From 0cb9d671497efb6dea2e7303da2c6b6cc657cc69 Mon Sep 17 00:00:00 2001 From: Marco Falkenberg Date: Mon, 29 Jan 2024 14:29:36 +0100 Subject: [PATCH 27/28] fix(LabeledValue): remove hacky button magin --- .../src/components/LabeledValue/LabeledValue.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/LabeledValue/LabeledValue.module.scss b/packages/components/src/components/LabeledValue/LabeledValue.module.scss index adc045fc3..17db89cfa 100644 --- a/packages/components/src/components/LabeledValue/LabeledValue.module.scss +++ b/packages/components/src/components/LabeledValue/LabeledValue.module.scss @@ -26,6 +26,5 @@ .button { grid-area: button; - margin-top: calc(var(--size-px--xs) * -1); justify-self: start; } From e57c1f411a25d47bb436b776849f1f3b7773138b Mon Sep 17 00:00:00 2001 From: Marco Falkenberg Date: Tue, 30 Jan 2024 16:08:32 +0100 Subject: [PATCH 28/28] style(CopyButton): use small size --- packages/components/src/components/CopyButton/CopyButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/components/CopyButton/CopyButton.tsx b/packages/components/src/components/CopyButton/CopyButton.tsx index 4ead5244a..3136f2dba 100644 --- a/packages/components/src/components/CopyButton/CopyButton.tsx +++ b/packages/components/src/components/CopyButton/CopyButton.tsx @@ -30,6 +30,7 @@ export const CopyButton: FC = (props) => { onPress={copyValue} aria-label={tooltip} variant="plain" + small >