feat(LabeledValue): Introduce component

packages/components/.storybook/preview.tsx

@@ -3,11 +3,10 @@ import React from "react";
 
 const preview: Preview = {
   decorators: [
-    (Story) => (
-      <div className="flow">
-        <Story />
-      </div>
-    ),
+    (Story) => {
+      document.body.classList.add("flow");
+      return <Story />;
+    },
   ],
   globalTypes: {
     rtlDirection: {},

packages/components/package.json

@@ -8,13 +8,15 @@
     "./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",
     "./Icon": "./dist/Icon.js",
     "./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",
@@ -48,6 +50,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",

packages/components/src/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,42 @@
+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 { Tooltip, TooltipTrigger } from "@/components/Tooltip";
+
+export interface CopyButtonProps {
+  value: string;
+  className?: string;
+}
+
+export const CopyButton: FC<CopyButtonProps> = (props) => {
+  const { value, className } = props;
+
+  const stringFormatter = useLocalizedStringFormatter(locales);
+
+  const tooltip = stringFormatter.format("copyButton.copy");
+
+  const copyValue = () => {
+    copy(value);
+  };
+
+  return (
+    <TooltipTrigger>
+      <Button
+        className={className}
+        onPress={copyValue}
+        aria-label={tooltip}
+        variant="plain"
+        small
+      >
+        <Icon faIcon={faCopy} />
+      </Button>
+      <Tooltip>{tooltip}</Tooltip>
+    </TooltipTrigger>
+  );
+};
+
+export default CopyButton;

packages/components/src/components/CopyButton/index.ts

@@ -0,0 +1,3 @@
+import { CopyButton } from "./CopyButton";
+export { type CopyButtonProps, CopyButton } from "./CopyButton";
+export default CopyButton;

packages/components/src/components/CopyButton/locales/de-DE.locale.json

@@ -0,0 +1,3 @@
+{
+  "copyButton.copy": "Kopieren"
+}

packages/components/src/components/CopyButton/locales/en-EN.locale.json

@@ -0,0 +1,3 @@
+{
+  "copyButton.copy": "Copy"
+}

packages/components/src/components/CopyButton/stories/Default.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { CopyButton } from "../CopyButton";
+
+const meta: Meta<typeof CopyButton> = {
+  title: "Buttons/CopyButton",
+  component: CopyButton,
+  render: (props) => <CopyButton {...props} value="Copied content" />,
+  parameters: {
+    controls: { exclude: ["value", "className"] },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof CopyButton>;
+
+export const Default: Story = {};

packages/components/src/components/LabeledValue/LabeledValue.module.scss

@@ -0,0 +1,30 @@
+@import "@/styles";
+
+.labeledValue {
+  display: grid;
+  grid-template-areas:
+    "label"
+    "value";
+  row-gap: var(--labeled-value--label-to-value-spacing);
+  column-gap: var(--labeled-value--value-to-button-spacing);
+  grid-template-columns: auto 1fr;
+
+  &:has(.button) {
+    grid-template-areas:
+      "label label"
+      "value button";
+  }
+}
+
+.label {
+  grid-area: label;
+}
+
+.content {
+  grid-area: value;
+}
+
+.button {
+  grid-area: button;
+  justify-self: start;
+}

packages/components/src/components/LabeledValue/LabeledValue.tsx

@@ -0,0 +1,36 @@
+import React, { FC, PropsWithChildren } from "react";
+import styles from "./LabeledValue.module.scss";
+import clsx from "clsx";
+import { PropsContext, PropsContextProvider } from "@/lib/propsContext";
+
+export interface LabeledValueProps extends PropsWithChildren {
+  className?: string;
+}
+
+export const LabeledValue: FC<LabeledValueProps> = (props) => {
+  const { children, className } = props;
+
+  const rootClassName = clsx(styles.labeledValue, className);
+
+  const propsContext: PropsContext = {
+    Label: {
+      className: styles.label,
+    },
+    Content: {
+      className: styles.content,
+    },
+    Button: {
+      className: styles.button,
+    },
+  };
+
+  return (
+    <div className={rootClassName}>
+      <PropsContextProvider props={propsContext}>
+        {children}
+      </PropsContextProvider>
+    </div>
+  );
+};
+
+export default LabeledValue;

packages/components/src/components/LabeledValue/index.ts

@@ -0,0 +1,3 @@
+import { LabeledValue } from "./LabeledValue";
+export { type LabeledValueProps, LabeledValue } from "./LabeledValue";
+export default LabeledValue;

packages/components/src/components/LabeledValue/stories/Default.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+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<typeof LabeledValue> = {
+  title: "Content/Labeled Value",
+  component: LabeledValue,
+  parameters: {
+    controls: { exclude: ["className"] },
+  },
+  render: (props) => (
+    <LabeledValue {...props}>
+      <Label>Project</Label>
+      <Content>My proSpace</Content>
+    </LabeledValue>
+  ),
+};
+export default meta;
+
+type Story = StoryObj<typeof LabeledValue>;
+
+export const Default: Story = {};
+
+export const WithCopyButton: Story = {
+  render: (props) => (
+    <LabeledValue {...props}>
+      <Label>Project</Label>
+      <Content>My proSpace</Content>
+      <CopyButton value="My proSpace" />
+    </LabeledValue>
+  ),
+};

packages/components/src/components/LabeledValue/stories/EdgeCases.stories.tsx

@@ -0,0 +1,35 @@
+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 { Content } from "@/components/Content";
+import React from "react";
+import { CopyButton } from "@/components/CopyButton";
+
+const meta: Meta<typeof LabeledValue> = {
+  title: "Content/Labeled Value/Edge Cases",
+  ...defaultMeta,
+};
+export default meta;
+
+type Story = StoryObj<typeof LabeledValue>;
+
+export const LongLabel: Story = {
+  render: (props) => (
+    <LabeledValue {...props}>
+      <Label>{dummyText.medium}</Label>
+      <Content>{dummyText.short}</Content>
+      <CopyButton value={dummyText.short} />
+    </LabeledValue>
+  ),
+};
+export const LongContent: Story = {
+  render: (props) => (
+    <LabeledValue {...props}>
+      <Label>{dummyText.medium}</Label>
+      <Content>{dummyText.long}</Content>
+      <CopyButton value={dummyText.long} />
+    </LabeledValue>
+  ),
+};

packages/components/src/components/StatusIcon/StatusIcon.tsx

@@ -14,9 +14,9 @@ export interface StatusIconProps extends StatusVariantProps {
 export const StatusIcon: FC<StatusIconProps> = (props) => {
   const { variant = "info", ...rest } = props;
 
-  const ariaLabel = useLocalizedStringFormatter(locales).format(
-    `statusIcon.${variant}`,
-  );
+  const stringFormatter = useLocalizedStringFormatter(locales);
+
+  const ariaLabel = stringFormatter.format(`statusIcon.${variant}`);
 
   const icon =
     variant === "info"

packages/components/src/components/Tooltip/stories/Default.stories.tsx

@@ -4,17 +4,20 @@ 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<typeof Tooltip> = {
   title: "Overlays/Tooltip",
   component: Tooltip,
-  render: () => (
-    <TooltipTrigger>
-      <Button aria-label="copy">
-        <Icon faIcon={faCopy} />
+  args: {
+    defaultOpen: true,
+  },
+  render: (props) => (
+    <TooltipTrigger {...props}>
+      <Button aria-label="save">
+        <Icon faIcon={faSave} />
       </Button>
-      <Tooltip>Copy</Tooltip>
+      <Tooltip>Save</Tooltip>
     </TooltipTrigger>
   ),
 };

packages/components/src/components/Tooltip/stories/EdgeCases.stories.tsx

@@ -4,17 +4,20 @@ 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<typeof Tooltip> = {
   ...defaultMeta,
   title: "Overlays/Tooltip/Edge Cases",
-  render: () => (
-    <TooltipTrigger>
-      <Button aria-label="copy">
-        <Icon faIcon={faCopy} />
+  args: {
+    defaultOpen: true,
+  },
+  render: (props) => (
+    <TooltipTrigger {...props}>
+      <Button aria-label="save">
+        <Icon faIcon={faSave} />
       </Button>
       <Tooltip>{dummyText.medium}</Tooltip>
     </TooltipTrigger>

packages/components/vite.build.config.ts

@@ -19,13 +19,15 @@ 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",
           Icon: "./src/components/Icon/index.ts",
           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",
           Note: "./src/components/Note/index.ts",