Edit In Place component

playwright/components/Form/Controls/EditInPlace.test.ts

@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { expect, test } from "@playwright/test";
+
+test.describe("EditInPlace", () => {
+ test("should render save & cancel buttons correctly", async ({ page }) => {
+ await page.goto(
+ `iframe.html?viewMode=story&id=form-controls-editinplace--empty`,
+ {
+ waitUntil: "networkidle",
+ },
+ );
+
+ await page.getByLabel("Label").focus();
+
+ await expect(page).toHaveScreenshot({ fullPage: true });
+ });
+});

src/components/Form/Controls/EditInPlace/EditInPlace.module.css

@@ -0,0 +1,130 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.container {
+ min-block-size: 110px;
+}
+
+.label {
+ font-size: 15px;
+ font-weight: 500;
+ margin-block-end: 4px;
+}
+
+.controls {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ gap: 15px;
+}
+
+.button-group {
+ display: none;
+ position: relative;
+ inset-block-start: 5px;
+ grid-template-columns: 1fr 1fr;
+ gap: 7px;
+}
+
+.button {
+ display: flex;
+ inline-size: 36px;
+ block-size: 36px;
+ border: 1px solid var(--cpd-color-border-interactive-secondary);
+ border-radius: 20px;
+ background-color: transparent;
+ text-align: center;
+ cursor: pointer;
+}
+
+.primary-button {
+ background-color: var(--cpd-color-bg-action-primary-rest);
+ border-color: var(--cpd-color-bg-action-primary-rest);
+
+ svg {
+ color: var(--cpd-color-icon-on-solid-primary);
+ }
+}
+
+.primary-button-disabled {
+ background-color: var(--cpd-color-bg-subtle-primary);
+ border-color: var(--cpd-color-bg-subtle-primary);
+
+ svg {
+ color: var(--cpd-color-icon-disabled);
+ }
+}
+
+.button svg {
+ inline-size: 24px;
+ block-size: 24px;
+ margin: auto;
+}
+
+.control {
+ inline-size: 100%;
+}
+
+.container:focus-within .button-group {
+ display: inline-grid;
+}
+
+.container-error .control {
+ border-color: var(--cpd-color-border-critical-primary);
+}
+
+.container-error .label {
+ color: var(--cpd-color-text-critical-primary);
+}
+
+.caption-line {
+ margin-block-start: var(--cpd-space-2x);
+}
+
+.caption-icon {
+ display: inline-block;
+ vertical-align: middle;
+ inline-size: 20px;
+ block-size: 20px;
+ margin-inline-end: var(--cpd-space-2x);
+}
+
+.caption-icon-error {
+ color: var(--cpd-color-icon-critical-primary);
+}
+
+.caption-icon-saved {
+ background-color: var(--cpd-color-icon-success-primary);
+ border-radius: 20px;
+ text-align: center;
+ margin-inline-end: var(--cpd-space-2x);
+
+ svg {
+ color: var(--cpd-color-icon-on-solid-primary);
+ }
+}
+
+.caption-text {
+ vertical-align: middle;
+ font-size: 13px;
+}
+
+.caption-text-error {
+ color: var(--cpd-color-text-critical-primary);
+}
+
+.caption-text-saved {
+ color: var(--cpd-color-text-success-primary);
+}

src/components/Form/Controls/EditInPlace/EditInPlace.stories.tsx

@@ -0,0 +1,109 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { EditInPlace } from "./";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Props = { invalid?: boolean } & React.ComponentProps<typeof EditInPlace>;
+
+export default {
+ title: "Form/Controls/EditInPlace",
+ component: EditInPlace,
+ tags: ["autodocs"],
+ parameters: {
+ controls: {
+ include: [
+ "onChange",
+ "onSave",
+ "onCancel",
+ "value",
+ "initialValue",
+ "error",
+ "savedLabel",
+ "saveButtonLabel",
+ "cancelButtonLabel",
+ ],
+ },
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=4335-2016&mode=design&t=BvxRca0YDRaq20IR-0",
+ },
+ },
+ argTypes: {
+ label: {
+ type: "string",
+ },
+ value: {
+ type: "string",
+ },
+ disableSaveButton: {
+ type: "string",
+ },
+ onChange: {
+ action: "changed",
+ },
+ onSave: {
+ action: "saved",
+ },
+ onCancel: {
+ action: "cancelled",
+ },
+ error: {
+ type: "string",
+ },
+ savedLabel: {
+ type: "string",
+ },
+ saveButtonLabel: {
+ type: "string",
+ },
+ cancelButtonLabel: {
+ type: "string",
+ },
+ },
+ render: ({ ...restArgs }) => <EditInPlace {...restArgs} />,
+ args: {
+ label: "Label",
+ value: "",
+ saveButtonLabel: "Save",
+ cancelButtonLabel: "Cancel",
+ },
+} satisfies Meta<Props>;
+
+type Story = StoryObj<Props>;
+
+export const Empty: Story = {};
+
+export const WithText: Story = {
+ args: {
+ value: "Hello, Computer",
+ },
+};
+
+export const SaveDisabled: Story = {
+ args: {
+ value: "Hello, World",
+ disableSaveButton: true,
+ },
+};
+
+export const WithError: Story = {
+ args: {
+ error: "I am a teapot",
+ },
+};