@pautena/react-design-system 0.7.2 → 0.7.4

package/src/components/feedback/query-container/query-container.test.tsx

@@ -6,47 +6,95 @@ import { expectProgressIndicator } from "~/tests/assertions";
 
 describe("QueryContainer", () => {
   const renderComponent = ({
-    isFetching = false,
+    fetching = false,
+    loading = false,
     error = undefined,
     success = undefined,
   }: {
-    isFetching?: boolean;
+    fetching?: boolean | boolean[];
+    loading?: boolean | boolean[];
     error?: QueryContainerError;
     success?: QueryContainerSuccess;
   } = {}) => {
     return render(
-      <QueryContainer isFetching={isFetching} error={error} success={success}>
+      <QueryContainer fetching={fetching} loading={loading} error={error} success={success}>
         <Typography>children content</Typography>
       </QueryContainer>,
     );
   };
 
-  it("would render a loading indicator if isFetching is true", () => {
-    renderComponent({ isFetching: true });
+  describe("fetching", () => {
+    it("should render a loading indicator if fetching=true", () => {
+      renderComponent({ fetching: true });
 
-    expectProgressIndicator();
+      expectProgressIndicator();
+    });
+
+    it("should render a loading indicator if fetching is an array with a true value", () => {
+      renderComponent({ fetching: [false, false, true, false, false] });
+
+      expectProgressIndicator();
+    });
+
+    it("should render the children if fetching=true", () => {
+      renderComponent({ fetching: true });
+
+      expect(screen.getByText(/children content/i)).toBeVisible();
+    });
+
+    it("should render the children if fetching is an array with a true value", () => {
+      renderComponent({ fetching: [false, false, true, false, false] });
+
+      expect(screen.getByText(/children content/i)).toBeVisible();
+    });
+  });
+
+  describe("loading", () => {
+    it("should render a loading indicator if loading=true", () => {
+      renderComponent({ loading: true });
+
+      expectProgressIndicator();
+    });
+
+    it("should render a loading indicator if loading is an array with a true value", () => {
+      renderComponent({ loading: [false, false, true, false, false] });
+
+      expectProgressIndicator();
+    });
+
+    it("shouldn't render the children", () => {
+      renderComponent({ loading: true });
+
+      expect(screen.queryByText(/children content/i)).not.toBeInTheDocument();
+    });
+
+    it("shouldn't render the children if fetching is an array with a true value", () => {
+      renderComponent({ loading: [false, false, true, false, false] });
+
+      expect(screen.queryByText(/children content/i)).not.toBeInTheDocument();
+    });
   });
 
   describe("error", () => {
-    it("would render an error alert", () => {
+    it("should render an error alert", () => {
       renderComponent({ error: { message: "Internal error" } });
 
       expect(screen.getByRole("alert")).toHaveAttribute("aria-describedby", "error");
     });
 
-    it("would render the error message if error is defined", () => {
+    it("should render the error message if error is defined", () => {
       renderComponent({ error: { message: "Internal error" } });
 
       expect(screen.getByText(/internal error/i)).toBeInTheDocument();
     });
 
-    it("would render the error title if error.name is defined", () => {
+    it("should render the error title if error.name is defined", () => {
       renderComponent({ error: { name: "Internal error", message: "There was an error" } });
 
       expect(screen.getByRole("heading", { name: /internal error/i })).toBeInTheDocument();
     });
 
-    it("wouldn't render the error title if error is defined but the error.name not", () => {
+    it("shouldn't render the error title if error is defined but the error.name not", () => {
       renderComponent({ error: { message: "Internal error" } });
 
       expect(screen.queryByRole("heading")).not.toBeInTheDocument();
@@ -54,19 +102,19 @@ describe("QueryContainer", () => {
   });
 
   describe("success", () => {
-    it("would render a success alert", () => {
+    it("should render a success alert", () => {
       renderComponent({ success: { message: "Item added" } });
 
       expect(screen.getByRole("alert")).toHaveAttribute("aria-describedby", "success");
     });
 
-    it("would render the success message if success is defined", () => {
+    it("should render the success message if success is defined", () => {
       renderComponent({ success: { message: "Item added" } });
 
       expect(screen.getByText(/item added/i)).toBeInTheDocument();
     });
 
-    it("would render the success title if success.name is defined", () => {
+    it("should render the success title if success.name is defined", () => {
       renderComponent({
         success: { name: "Item added", message: "The item has been added successfully" },
       });
@@ -74,22 +122,22 @@ describe("QueryContainer", () => {
       expect(screen.getByRole("heading", { name: /item added/i })).toBeInTheDocument();
     });
 
-    it("wouldn't render the error title if success is defined but the success.name not", () => {
+    it("shouldn't render the error title if success is defined but the success.name not", () => {
       renderComponent({ success: { message: "Item added" } });
 
       expect(screen.queryByRole("heading")).not.toBeInTheDocument();
     });
     //TODO validate the severity of the alert
 
-    it("would render the content", () => {
+    it("should render the content", () => {
       renderComponent({ success: { message: "Item added" } });
 
       expect(screen.getByText(/children content/i)).toBeInTheDocument();
     });
   });
 
-  it("would render the children if isFetching is false and there is no defined error", () => {
-    renderComponent({ isFetching: false, error: undefined });
+  it("should render the children if isFetching is false and there is no defined error", () => {
+    renderComponent({ fetching: false, error: undefined });
 
     expect(screen.getByText(/children content/i)).toBeInTheDocument();
   });

package/src/components/feedback/query-container/query-container.tsx

@@ -1,4 +1,4 @@
-import { Alert, AlertTitle, Box } from "@mui/material";
+import { Alert, AlertTitle, Box, LinearProgress } from "@mui/material";
 import React from "react";
 import { PropsWithChildren } from "react";
 import { LoadingArea } from "../loading-area";
@@ -27,9 +27,14 @@ export interface QueryContainerSuccess {
 
 export type QueryContainerProps = PropsWithChildren<{
   /**
-   * There is a query in progress
+   * There is a query in progress and we have available data
    */
-  isFetching: boolean;
+  fetching?: boolean | boolean[];
+
+  /**
+   * There is a query in progress and we don't have available data
+   */
+  loading?: boolean | boolean[];
   /**
    * The query has returned an error
    */
@@ -43,8 +48,17 @@ export type QueryContainerProps = PropsWithChildren<{
 /**
  * Component to show different indicators based on the usual api query statuses
  */
-export function QueryContainer({ isFetching, error, success, children }: QueryContainerProps) {
-  if (isFetching) {
+export function QueryContainer({
+  fetching: fetchingProp = false,
+  loading: loadingProp = false,
+  error,
+  success,
+  children,
+}: QueryContainerProps) {
+  const fetching = Array.isArray(fetchingProp) ? fetchingProp.some((f) => f) : fetchingProp;
+  const loading = Array.isArray(loadingProp) ? loadingProp.some((f) => f) : loadingProp;
+
+  if (loading) {
     return <LoadingArea />;
   }
 
@@ -65,6 +79,7 @@ export function QueryContainer({ isFetching, error, success, children }: QueryCo
           {success.message}
         </Alert>
       )}
+      {fetching && <LinearProgress sx={{ width: 1, mb: 1 }} />}
       {children}
     </Box>
   );

package/src/components/inputs/autocomplete/autocomplete.stories.tsx

@@ -53,6 +53,14 @@ export const Fetching: Story = {
   },
 };
 
+export const LoadingAndFetching: Story = {
+  args: {
+    ...Default.args,
+    loading: true,
+    fetching: true,
+  },
+};
+
 export const SizeSmall: Story = {
   args: {
     ...Default.args,

package/src/components/inputs/index.ts

@@ -1,3 +1,4 @@
 export * from "./select";
 export * from "./sign-in";
 export * from "./autocomplete";
+export * from "./text-field";

package/src/components/inputs/text-field/text-field.stories.tsx

@@ -53,6 +53,14 @@ export const Fetching: Story = {
   },
 };
 
+export const LoadingAndFetching: Story = {
+  args: {
+    ...Default.args,
+    fetching: true,
+    loading: true,
+  },
+};
+
 export const FetchingWithEndAdornment: Story = {
   args: {
     ...Default.args,

package/src/components/inputs/text-field/text-field.tsx

@@ -83,13 +83,13 @@ export const TextField = ({
         endAdornment={
           <InputAdornment position="end">
             {InputProps?.endAdornment}
-            {fetching ? <CircularProgress color="inherit" size={20} sx={{ ml: 1 }} /> : null}
+            {loading ? <CircularProgress color="inherit" size={20} sx={{ ml: 1 }} /> : null}
           </InputAdornment>
         }
         sx={sx}
         {...(rest as any)}
       />
-      {loading && (
+      {fetching && !loading && (
         <LinearProgress
           color="inherit"
           sx={{ position: "absolute", left: 0, right: 0, bottom: 0 }}

package/src/components/value-displays/group-value-card/group-value-card.mock.tsx

@@ -4,37 +4,57 @@ import { ValueRating } from "../value-rating";
 import { ValueText } from "../value-text";
 import { GroupValueCard, GroupValueCardProps } from "./group-value-card";
 import { ValueItem } from "../value-item";
+import { ValueDatetime } from "../value-datetime";
 
-export const GroupValueCardDummy = ({ dense, ...rest }: GroupValueCardProps) => {
+export const GroupValueCardDummy = ({
+  dense,
+  editable,
+  ...rest
+}: GroupValueCardProps & { editable?: boolean }) => {
   return (
     <GroupValueCard {...rest} dense={dense}>
       <ValueItem xs={12} sm={6} md={4}>
-        <ValueText dense={dense} label="Hello world" value="Lorem ipsum sit amet" />
+        <ValueText
+          editable={editable}
+          dense={dense}
+          label="Hello world"
+          value="Lorem ipsum sit amet"
+        />
       </ValueItem>
       <ValueItem xs={12} sm={6} md={2}>
-        <ValueBoolean dense={dense} label="Enabled" value />
+        <ValueBoolean editable={editable} dense={dense} label="Enabled" value />
       </ValueItem>
       <ValueItem xs={12} sm={6} md={3}>
-        <ValueText dense={dense} label="Quantity" value="1200" />
+        <ValueText editable={editable} dense={dense} label="Quantity" value="1200" />
       </ValueItem>
       <ValueItem xs={12} sm={6} md={3}>
-        <ValueText dense={dense} label="Currency" value="EUR" />
+        <ValueText editable={editable} dense={dense} label="Currency" value="EUR" />
       </ValueItem>
       <ValueItem xs={12} sm={6} md={6}>
         <ValueText
+          editable={editable}
           dense={dense}
           label="I am Batman"
           value=" Does it come in black? It's ends here. Hero can be anyone"
         />
       </ValueItem>
       <ValueItem xs={12} sm={6} md={3}>
-        <ValueText dense={dense} label="Status" value="Open" />
+        <ValueText editable={editable} dense={dense} label="Status" value="Open" />
       </ValueItem>
       <ValueItem xs={12} sm={6} md={3}>
-        <ValueText dense={dense} label="Level" value="2144" />
+        <ValueText editable={editable} dense={dense} label="Level" value="2144" />
       </ValueItem>
       <ValueItem xs={12} sm={6} md={3}>
-        <ValueRating dense={dense} label="Rating" value={3} />
+        <ValueRating editable={editable} dense={dense} label="Rating" value={3} />
+      </ValueItem>
+      <ValueItem xs={12} sm={6} md={3}>
+        <ValueDatetime
+          editable={editable}
+          dense={dense}
+          label="Created at"
+          value={new Date(2022, 5, 1)}
+          format="yyyy-MM-dd"
+        />
       </ValueItem>
     </GroupValueCard>
   );

package/src/components/value-displays/group-value-card/group-value-card.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { GroupValueCard } from "./group-value-card";
-import { withPadding } from "../../../storybook";
+import { withPadding, withLocalizationProvider } from "../../../storybook";
 import { GroupValueCardDummy } from "./group-value-card.mock";
 import { ValueImage } from "../value-image";
 import workInProgressImg from "../../../stories/assets/work-in-progress.jpg";
@@ -12,7 +12,7 @@ import { ValueItem } from "../value-item";
 export default {
   title: "Components/Value displays/GroupValueCard",
   component: GroupValueCardDummy,
-  decorators: [withPadding(2)],
+  decorators: [withPadding(2), withLocalizationProvider],
   parameters: {
     layout: "fullscreen",
   },
@@ -34,6 +34,23 @@ export const Dense: Story = {
   },
 };
 
+export const EditableDense: Story = {
+  args: {
+    title: "Hello world",
+    subtitle: "Lorem ipsum sit amet",
+    dense: true,
+    editable: true,
+  },
+};
+
+export const Editable: Story = {
+  args: {
+    title: "Hello world",
+    subtitle: "Lorem ipsum sit amet",
+    editable: true,
+  },
+};
+
 export const WihtoutSubtitle: Story = {
   args: {
     title: "Hello world",

package/src/components/value-displays/group-value-card/group-value-card.test.tsx

@@ -17,7 +17,7 @@ describe("GroupValueCard", () => {
   it("would render a title", () => {
     renderComponent({ title: "Hello world" });
 
-    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 1 })).toBeVisible();
   });
 
   describe("subtitle", () => {
@@ -30,34 +30,32 @@ describe("GroupValueCard", () => {
     it("would render a subtitle if it's provided", () => {
       renderComponent({ subtitle: "Hi. I am batman" });
 
-      expect(
-        screen.getByRole("heading", { level: 2, name: /hi. i am batman/i }),
-      ).toBeInTheDocument();
+      expect(screen.getByRole("heading", { level: 2, name: /hi. i am batman/i })).toBeVisible();
     });
   });
 
   it("would render all values", () => {
     renderComponent();
 
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
-    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
+    expect(screen.getByRole("label", { name: /hello world/i })).toBeVisible();
+    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeVisible();
 
-    expect(screen.getByRole("label", { name: /enabled/i })).toBeInTheDocument();
-    expect(screen.getByTestId("CheckIcon")).toBeInTheDocument();
+    expect(screen.getByRole("label", { name: /enabled/i })).toBeVisible();
+    expect(screen.getByLabelText(/enabled/i)).toBeChecked();
 
-    expect(screen.getByRole("label", { name: /quantity/i })).toBeInTheDocument();
-    expect(screen.getByText(/1200/i)).toBeInTheDocument();
+    expect(screen.getByRole("label", { name: /quantity/i })).toBeVisible();
+    expect(screen.getByText(/1200/i)).toBeVisible();
 
-    expect(screen.getByRole("label", { name: /currency/i })).toBeInTheDocument();
-    expect(screen.getByText(/eur/i)).toBeInTheDocument();
+    expect(screen.getByRole("label", { name: /currency/i })).toBeVisible();
+    expect(screen.getByText(/eur/i)).toBeVisible();
 
-    expect(screen.getByRole("label", { name: /i am batman/i })).toBeInTheDocument();
-    expect(screen.getByText(/does it come in black/i)).toBeInTheDocument();
+    expect(screen.getByRole("label", { name: /i am batman/i })).toBeVisible();
+    expect(screen.getByText(/does it come in black/i)).toBeVisible();
 
-    expect(screen.getByRole("label", { name: /status/i })).toBeInTheDocument();
-    expect(screen.getByText(/open/i)).toBeInTheDocument();
+    expect(screen.getByRole("label", { name: /status/i })).toBeVisible();
+    expect(screen.getByText(/open/i)).toBeVisible();
 
-    expect(screen.getByRole("label", { name: /level/i })).toBeInTheDocument();
-    expect(screen.getByText(/2144/i)).toBeInTheDocument();
+    expect(screen.getByRole("label", { name: /level/i })).toBeVisible();
+    expect(screen.getByText(/2144/i)).toBeVisible();
   });
 });

package/src/components/value-displays/value-base/value-edit.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "~/tests/testing-library";
+import { ValueEditButton, ValueEditButtons } from "./value-edit";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
+
+describe("ValueEditButton", () => {
+  const renderComponent = () => {
+    const onClick = vi.fn();
+    render(<ValueEditButton onClick={onClick} />);
+
+    return { onClick };
+  };
+
+  it("should render a edit icon", () => {
+    renderComponent();
+
+    expect(screen.getByTestId("EditIcon")).toBeVisible();
+  });
+
+  it("should be accessible", () => {
+    renderComponent();
+
+    expect(screen.getByRole("button", { name: /edit button/i })).toBeVisible();
+  });
+
+  it("should call onClick when the button is clicked", async () => {
+    const { onClick } = renderComponent();
+
+    await userEvent.click(screen.getByRole("button", { name: /edit button/i }));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("ValueEditButtons", () => {
+  const renderComponent = () => {
+    const onClickCancel = vi.fn();
+    const onClickSubmit = vi.fn();
+    render(<ValueEditButtons onClickCancel={onClickCancel} onClickSubmit={onClickSubmit} />);
+
+    return { onClickCancel, onClickSubmit };
+  };
+
+  describe("cancel button", () => {
+    it("should render  a cancel icon", () => {
+      renderComponent();
+
+      expect(screen.getByTestId("ClearIcon")).toBeVisible();
+    });
+
+    it("should be accessible", () => {
+      renderComponent();
+
+      expect(screen.getByRole("button", { name: /cancel button/i })).toBeVisible();
+    });
+
+    it("should call onClickCancel when the button is clicked", async () => {
+      const { onClickCancel } = renderComponent();
+
+      await userEvent.click(screen.getByRole("button", { name: /cancel button/i }));
+
+      expect(onClickCancel).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("submit button", () => {
+    it("should render  a submit icon", () => {
+      renderComponent();
+
+      expect(screen.getByTestId("CheckIcon")).toBeVisible();
+    });
+
+    it("should be accessible", () => {
+      renderComponent();
+
+      expect(screen.getByRole("button", { name: /submit button/i })).toBeVisible();
+    });
+
+    it("should call onClickCancel when the button is clicked", async () => {
+      const { onClickSubmit } = renderComponent();
+
+      await userEvent.click(screen.getByRole("button", { name: /submit button/i }));
+
+      expect(onClickSubmit).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/components/value-displays/value-base/value-edit.tsx

@@ -1,22 +1,24 @@
 import React, { useState } from "react";
 import CheckIcon from "@mui/icons-material/Check";
 import ClearIcon from "@mui/icons-material/Clear";
-import { Button, InputAdornment, SxProps, Theme } from "@mui/material";
+import { Button, IconButton, InputAdornment, SxProps, Theme, useTheme } from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
 
 export interface ValueEditButtonsProps {
   onClickCancel: () => void;
-  onSubmitEdit: () => void;
+  onClickSubmit: () => void;
   sx?: SxProps<Theme>;
 }
 
-export const ValueEditButtons = ({ onClickCancel, onSubmitEdit, sx }: ValueEditButtonsProps) => {
+export const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {
   return (
     <InputAdornment position="end" sx={sx}>
       <Button
         variant="contained"
         size="small"
         color="error"
-        startIcon={<ClearIcon />}
+        aria-label="cancel button"
+        startIcon={<ClearIcon sx={{ fontSize: 12 }} />}
         onClick={onClickCancel}
         sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}
       />
@@ -24,8 +26,9 @@ export const ValueEditButtons = ({ onClickCancel, onSubmitEdit, sx }: ValueEditB
         variant="contained"
         size="small"
         color="primary"
-        startIcon={<CheckIcon />}
-        onClick={onSubmitEdit}
+        aria-label="submit button"
+        startIcon={<CheckIcon sx={{ fontSize: 12 }} />}
+        onClick={onClickSubmit}
         sx={{ paddingRight: 0, minWidth: 0 }}
       />
     </InputAdornment>
@@ -57,3 +60,22 @@ export const useEditableValueDisplay = <T,>(
 
   return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };
 };
+
+export interface ValueEditButtonProps {
+  dense?: boolean;
+  onClick: () => void;
+}
+
+export const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {
+  const { typography } = useTheme();
+  return (
+    <IconButton
+      size="small"
+      onClick={onClick}
+      sx={{ ml: dense ? 0.5 : 1 }}
+      aria-label="edit button"
+    >
+      <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />
+    </IconButton>
+  );
+};

package/src/components/value-displays/value-boolean/value-boolean.stories.tsx

@@ -31,6 +31,15 @@ export const Editable: Story = {
   },
 };
 
+export const DenseEditable: Story = {
+  args: {
+    label: "Lorem ipsum",
+    value: false,
+    dense: true,
+    editable: true,
+  },
+};
+
 export const Dense: Story = {
   args: {
     label: "Lorem ipsum",