@pautena/react-design-system 0.7.2 → 0.7.3

package/dist/esm/types/components/alerts/expandable-alert/expandable-alert.d.ts

@@ -1,4 +1,5 @@
-import { AlertColor } from "@mui/material";
+import { AlertColor, SxProps, Theme } from "@mui/material";
+import { ReactElement } from "react";
 import React from "react";
 export interface ExpandableAlertProps {
     severity: AlertColor;
@@ -6,6 +7,8 @@ export interface ExpandableAlertProps {
     title?: string;
     message: string;
     metadata?: string | string[];
+    metadataComponent?: ReactElement;
     onClose: () => void;
+    sx?: SxProps<Theme>;
 }
 export declare const ExpandableAlert: React.ForwardRefExoticComponent<ExpandableAlertProps & React.RefAttributes<any>>;

package/dist/esm/types/components/data-display/board/board.d.ts

@@ -4,7 +4,6 @@ export type BoardProps = PropsWithChildren<{
     markdown?: string;
     content?: string | string[];
     spacing?: 0 | 1 | 2 | 3 | 4 | 5;
-    timeoutCopyText?: number;
     sx?: SxProps<Theme>;
 }>;
-export declare const Board: ({ markdown: markdownProps, content: contentProp, spacing, timeoutCopyText, children, sx, }: BoardProps) => JSX.Element;
+export declare const Board: ({ markdown: markdownProps, content: contentProp, spacing, children, sx, }: BoardProps) => JSX.Element;

package/dist/esm/types/components/feedback/query-container/query-container.d.ts

@@ -21,9 +21,13 @@ 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;
+    /**
+     * There is a query in progress and we don't have available data
+     */
+    loading: boolean;
     /**
      * The query has returned an error
      */
@@ -36,4 +40,4 @@ export type QueryContainerProps = PropsWithChildren<{
 /**
  * Component to show different indicators based on the usual api query statuses
  */
-export declare function QueryContainer({ isFetching, error, success, children }: QueryContainerProps): JSX.Element;
+export declare function QueryContainer({ fetching, loading, error, success, children, }: QueryContainerProps): JSX.Element;

package/dist/esm/types/components/inputs/index.d.ts

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

package/dist/esm/types/components/value-displays/group-value-card/group-value-card.mock.d.ts

@@ -1,2 +1,4 @@
 import { GroupValueCardProps } from "./group-value-card";
-export declare const GroupValueCardDummy: ({ dense, ...rest }: GroupValueCardProps) => JSX.Element;
+export declare const GroupValueCardDummy: ({ dense, editable, ...rest }: GroupValueCardProps & {
+    editable?: boolean | undefined;
+}) => JSX.Element;

package/dist/esm/types/components/value-displays/value-base/value-edit.d.ts

@@ -2,10 +2,10 @@ import React from "react";
 import { SxProps, Theme } from "@mui/material";
 export interface ValueEditButtonsProps {
     onClickCancel: () => void;
-    onSubmitEdit: () => void;
+    onClickSubmit: () => void;
     sx?: SxProps<Theme>;
 }
-export declare const ValueEditButtons: ({ onClickCancel, onSubmitEdit, sx }: ValueEditButtonsProps) => JSX.Element;
+export declare const ValueEditButtons: ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => JSX.Element;
 /**
  * Hook to manage the editing behaviour
  */
@@ -17,3 +17,8 @@ export declare const useEditableValueDisplay: <T>(initialValue: T | undefined, o
     startEdit: () => void;
     submitEdit: () => void;
 };
+export interface ValueEditButtonProps {
+    dense?: boolean;
+    onClick: () => void;
+}
+export declare const ValueEditButton: ({ dense, onClick }: ValueEditButtonProps) => JSX.Element;

package/dist/esm/types/components/value-displays/value-content/value-content.d.ts

@@ -1,3 +1,4 @@
+import { SxProps, Theme } from "@mui/material";
 import React from "react";
 export declare const getValueContentLabelId: (label: string) => string;
 export interface ValueContentProps {
@@ -5,6 +6,10 @@ export interface ValueContentProps {
      * Name of the displayed value
      */
     label: string;
+    /**
+     * If true, the label will not be shown
+     */
+    hideLabel?: boolean;
     /**
      * If defined, a tooltip is going to be added arround the children;
      */
@@ -22,8 +27,12 @@ export interface ValueContentProps {
      * False by default
      */
     dense?: boolean;
+    /**
+     * Custom styles for the root component
+     */
+    sx?: SxProps<Theme>;
 }
 /**
  * Displays a string value with a label
  */
-export declare const ValueContent: ({ label, tooltip, tooltipEnterDelay, children, dense, }: ValueContentProps) => JSX.Element;
+export declare const ValueContent: ({ label, hideLabel, tooltip, tooltipEnterDelay, children, dense, sx, }: ValueContentProps) => JSX.Element;

package/dist/index.d.ts

@@ -2,7 +2,7 @@
 import * as React$1 from 'react';
 import React__default, { PropsWithChildren, FunctionComponent, ReactElement, ReactNode, FormEvent, Dispatch, SetStateAction } from 'react';
 import * as _mui_material from '@mui/material';
-import { SxProps, Theme, GridProps, PropTypes, AppBarProps, DrawerProps as DrawerProps$1, ListSubheaderProps, ChipTypeMap, AutocompleteProps as AutocompleteProps$1, AlertColor, Color } from '@mui/material';
+import { SxProps, Theme, GridProps, PropTypes, AppBarProps, DrawerProps as DrawerProps$1, ListSubheaderProps, ChipTypeMap, AutocompleteProps as AutocompleteProps$1, TextFieldProps as TextFieldProps$1, AlertColor, Color } from '@mui/material';
 import * as _mui_system from '@mui/system';
 import { ResponsiveStyleValue } from '@mui/system';
 import { MarkdownToJSX } from 'markdown-to-jsx';
@@ -15,10 +15,10 @@ import { LoremUnit } from 'lorem-ipsum/types/src/constants/units';
 
 interface ValueEditButtonsProps {
     onClickCancel: () => void;
-    onSubmitEdit: () => void;
+    onClickSubmit: () => void;
     sx?: SxProps<Theme>;
 }
-declare const ValueEditButtons: ({ onClickCancel, onSubmitEdit, sx }: ValueEditButtonsProps) => JSX.Element;
+declare const ValueEditButtons: ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => JSX.Element;
 /**
  * Hook to manage the editing behaviour
  */
@@ -30,6 +30,11 @@ declare const useEditableValueDisplay: <T>(initialValue: T | undefined, onEdit:
     startEdit: () => void;
     submitEdit: () => void;
 };
+interface ValueEditButtonProps {
+    dense?: boolean;
+    onClick: () => void;
+}
+declare const ValueEditButton: ({ dense, onClick }: ValueEditButtonProps) => JSX.Element;
 
 interface BaseValueProps<T> {
     /**
@@ -151,9 +156,13 @@ interface QueryContainerSuccess {
 }
 type QueryContainerProps = PropsWithChildren<{
     /**
-     * There is a query in progress
+     * There is a query in progress and we have available data
      */
-    isFetching: boolean;
+    fetching: boolean;
+    /**
+     * There is a query in progress and we don't have available data
+     */
+    loading: boolean;
     /**
      * The query has returned an error
      */
@@ -166,7 +175,7 @@ type QueryContainerProps = PropsWithChildren<{
 /**
  * Component to show different indicators based on the usual api query statuses
  */
-declare function QueryContainer({ isFetching, error, success, children }: QueryContainerProps): JSX.Element;
+declare function QueryContainer({ fetching, loading, error, success, children, }: QueryContainerProps): JSX.Element;
 
 type BulletVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
 declare const bulletClasses: {
@@ -300,10 +309,9 @@ type BoardProps = PropsWithChildren<{
     markdown?: string;
     content?: string | string[];
     spacing?: 0 | 1 | 2 | 3 | 4 | 5;
-    timeoutCopyText?: number;
     sx?: SxProps<Theme>;
 }>;
-declare const Board: ({ markdown: markdownProps, content: contentProp, spacing, timeoutCopyText, children, sx, }: BoardProps) => JSX.Element;
+declare const Board: ({ markdown: markdownProps, content: contentProp, spacing, children, sx, }: BoardProps) => JSX.Element;
 
 interface MarkdownProps {
     content: string;
@@ -496,6 +504,13 @@ interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClea
 }
 declare const Autocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React__default.ElementType<any> = "div">(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;
 
+type TextFieldProps = TextFieldProps$1 & {
+    fetching?: boolean;
+    loading?: boolean;
+    hexColor?: string;
+};
+declare const TextField: ({ id: overrideId, label, InputLabelProps, InputProps, fetching, loading, helperText, hexColor, size, fullWidth, sx, ...rest }: TextFieldProps) => JSX.Element;
+
 interface TabPanelProps {
     children?: React__default.ReactNode;
     index: number | number[];
@@ -601,7 +616,9 @@ interface ExpandableAlertProps {
     title?: string;
     message: string;
     metadata?: string | string[];
+    metadataComponent?: ReactElement;
     onClose: () => void;
+    sx?: SxProps<Theme>;
 }
 declare const ExpandableAlert: React__default.ForwardRefExoticComponent<ExpandableAlertProps & React__default.RefAttributes<any>>;
 
@@ -984,4 +1001,4 @@ type TabProviderProps = PropsWithChildren<{
 }>;
 declare const TabProvider: ({ children, initialValue }: TabProviderProps) => JSX.Element;
 
-export { ArrayFieldType, ArrayGroupField, ArrayInstanceType, Autocomplete, AutocompleteProps, BaseFieldType, BaseValueProps, BasicModelInstance, Board, BoardProps, BootstrapDialog, BootstrapDialogDialogProps, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, ConfirmDialog, ConfirmDialogProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DefaultPlaceholder, DialogAction, Drawer, DrawerAppBar, DrawerAppBarComponent, DrawerAppBarElement, DrawerAppBarProps, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerHeader, DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerLayout, DrawerLayoutProps, DrawerMain, DrawerMainProps, DrawerNavigation, DrawerNavigationItem, DrawerNavigationItemCollapsable, DrawerNavigationItemLink, DrawerNavigationSection, DrawerProps, DrawerProvider, DrawerProviderProps, DrawerSection, DrawerSectionProps, DrawerSize, DrawerState, DrawerSubheader, DrawerSubheaderProps, DrawerVariant, EditInputType, EditableValueProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedTable, EnhancedTableHead, ExpandableAlert, ExpandableAlertProps, FieldType, FormDialog, FormDialogProps, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutError, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, Markdown, MarkdownProps, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIcon, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, Select, SelectProps, SelectSize, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardProps, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButtons, ValueEditButtonsProps, ValueItem, ValueItemComponent, ValueItemElement, ValueItemProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getDrawerItemColors, getFormData, getRandomItem, labelClasses, markdownDefaultOptions, newArrayWithSize, newBreakpointsCounter, newInstanceFromValuesOrZeroValue, useDialog, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab, valueItemClasses };
+export { ArrayFieldType, ArrayGroupField, ArrayInstanceType, Autocomplete, AutocompleteProps, BaseFieldType, BaseValueProps, BasicModelInstance, Board, BoardProps, BootstrapDialog, BootstrapDialogDialogProps, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, ConfirmDialog, ConfirmDialogProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DefaultPlaceholder, DialogAction, Drawer, DrawerAppBar, DrawerAppBarComponent, DrawerAppBarElement, DrawerAppBarProps, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerHeader, DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerLayout, DrawerLayoutProps, DrawerMain, DrawerMainProps, DrawerNavigation, DrawerNavigationItem, DrawerNavigationItemCollapsable, DrawerNavigationItemLink, DrawerNavigationSection, DrawerProps, DrawerProvider, DrawerProviderProps, DrawerSection, DrawerSectionProps, DrawerSize, DrawerState, DrawerSubheader, DrawerSubheaderProps, DrawerVariant, EditInputType, EditableValueProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedTable, EnhancedTableHead, ExpandableAlert, ExpandableAlertProps, FieldType, FormDialog, FormDialogProps, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutError, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, Markdown, MarkdownProps, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIcon, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, Select, SelectProps, SelectSize, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardProps, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, TextField, TextFieldProps, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButton, ValueEditButtonProps, ValueEditButtons, ValueEditButtonsProps, ValueItem, ValueItemComponent, ValueItemElement, ValueItemProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getDrawerItemColors, getFormData, getRandomItem, labelClasses, markdownDefaultOptions, newArrayWithSize, newBreakpointsCounter, newInstanceFromValuesOrZeroValue, useDialog, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab, valueItemClasses };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -69,6 +69,7 @@
     "@storybook/testing-react": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/ramda": "^0.28.23",
     "@types/react": "^18.0.31",
     "@typescript-eslint/eslint-plugin": "^5.57.0",

package/src/components/alerts/expandable-alert/expandable-alert.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { ExpandableAlert } from "./expandable-alert";
 import { withContainer } from "~/storybook";
-import { Box, Button, Snackbar } from "@mui/material";
+import { Box, Button, Snackbar, Typography } from "@mui/material";
 
 export default {
   title: "Components/Alerts/ExpandableAlert",
@@ -52,6 +52,28 @@ export const WihtoutMetadata: Story = {
   },
 };
 
+export const MetadataCustomComponent = () => (
+  <ExpandableAlert
+    severity="info"
+    onClose={() => null}
+    title="Lorem ipsum"
+    message="Lorem ipsum dolor sit amet"
+    metadata={["lorem: ipsum", "foo: bar", "header: this", "host: localhost"]}
+    metadataComponent={
+      <>
+        <Typography variant="h6">lorem: ipsum</Typography>
+        <Typography variant="caption">foo: bar</Typography>
+        <Typography variant="body2" sx={{ textDecoration: "line-through" }}>
+          header: this
+        </Typography>
+        <Typography variant="body2" fontWeight={700}>
+          host: localhost
+        </Typography>
+      </>
+    }
+  />
+);
+
 export const SnackbarAlert = () => {
   const [open, setOpen] = useState(false);
 

package/src/components/alerts/expandable-alert/expandable-alert.tsx

@@ -6,11 +6,13 @@ import {
   Box,
   Collapse,
   IconButton,
+  SxProps,
+  Theme,
 } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import CloseIcon from "@mui/icons-material/Close";
-import { forwardRef, useState } from "react";
+import { forwardRef, ReactElement, useState } from "react";
 import React from "react";
 import { Board } from "~/components/data-display";
 
@@ -20,7 +22,9 @@ export interface ExpandableAlertProps {
   title?: string;
   message: string;
   metadata?: string | string[];
+  metadataComponent?: ReactElement;
   onClose: () => void;
+  sx?: SxProps<Theme>;
 }
 
 const alertSx = {
@@ -30,7 +34,10 @@ const alertSx = {
 };
 
 export const ExpandableAlert = forwardRef<any, ExpandableAlertProps>(
-  ({ severity, iconMapping, title, message, metadata, onClose }, ref) => {
+  (
+    { severity, iconMapping, title, message, metadata, metadataComponent, onClose, sx = {} },
+    ref,
+  ) => {
     const [expanded, setExpanded] = useState(false);
     return (
       <Alert
@@ -54,14 +61,14 @@ export const ExpandableAlert = forwardRef<any, ExpandableAlertProps>(
             )}
           </Box>
         }
-        sx={alertSx}
+        sx={{ ...alertSx, ...sx }}
       >
         <Box sx={{ w: 1 }}>
           {title && <AlertTitle>{title}</AlertTitle>}
           {message}
           {metadata && (
             <Collapse in={expanded} sx={{ mt: 2 }}>
-              <Board content={metadata} />
+              <Board content={metadata}>{metadataComponent}</Board>
             </Collapse>
           )}
         </Box>

package/src/components/data-display/board/board.test.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { render, screen, waitFor } from "~/tests/testing-library";
+import { render, screen } from "~/tests/testing-library";
 import { Board } from "./board";
 import { mockMarkdownContent } from "~/tests/mocks/markdown.mock";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
+import { Typography } from "@mui/material";
 
 const content = "This is the content";
 
@@ -12,6 +13,16 @@ const content2 = "This is the content 2";
 const content3 = "This is the content 3";
 const arrayContent = [content1, content2, content3];
 
+const mockCopy = () => {
+  const copy = vi.fn();
+  Object.assign(navigator, {
+    clipboard: {
+      writeText: copy,
+    },
+  });
+  return { copy };
+};
+
 describe("Board", () => {
   const renderComponent = ({
     markdown,
@@ -20,13 +31,8 @@ describe("Board", () => {
     markdown?: string;
     content?: string | string[];
   }) => {
-    const copy = vi.fn();
-    Object.assign(navigator, {
-      clipboard: {
-        writeText: copy,
-      },
-    });
-    render(<Board markdown={markdown} content={content} timeoutCopyText={100} />);
+    const { copy } = mockCopy();
+    render(<Board markdown={markdown} content={content} />);
 
     return { copy };
   };
@@ -53,49 +59,60 @@ describe("Board", () => {
     ).toBeVisible();
   });
 
-  it("should copy the string content to the clipboard if the copy button is clicked", async () => {
-    const { copy } = renderComponent({ content });
-
-    await userEvent.click(screen.getByRole("button"));
-
-    expect(copy).toHaveBeenCalledTimes(1);
-    expect(copy).toHaveBeenCalledWith(content);
-  });
-
-  it("should copy the string array content to the clipboard if the copy button is clicked", async () => {
-    const expectedCopy = arrayContent.join("\n");
-    const { copy } = renderComponent({ content: arrayContent });
-
-    await userEvent.click(screen.getByRole("button"));
-
-    expect(copy).toHaveBeenCalledTimes(1);
-    expect(copy).toHaveBeenCalledWith(expectedCopy);
-  });
+  describe("copy", () => {
+    it("should copy the string content to the clipboard if the copy button is clicked", async () => {
+      const { copy } = renderComponent({ content });
 
-  it.skip("should copy the markdown content to the clipboard if the copy button is clicked", async () => {
-    const { copy } = renderComponent({ markdown: mockMarkdownContent });
+      await userEvent.click(screen.getByRole("button"));
 
-    await userEvent.click(screen.getByRole("button"));
+      expect(copy).toHaveBeenCalledTimes(1);
+      expect(copy).toHaveBeenCalledWith(content);
+    });
 
-    expect(copy).toHaveBeenCalledTimes(1);
-    expect(copy).toHaveBeenCalledWith(mockMarkdownContent);
-  });
+    it("should copy the string array content to the clipboard if the copy button is clicked", async () => {
+      const expectedCopy = arrayContent.join("\n");
+      const { copy } = renderComponent({ content: arrayContent });
 
-  it("should change the copy button text when is clicked", async () => {
-    renderComponent({ content });
+      await userEvent.click(screen.getByRole("button"));
 
-    await userEvent.click(screen.getByRole("button"));
-
-    expect(screen.getByRole("button", { name: /copied/i })).toBeVisible();
-  });
+      expect(copy).toHaveBeenCalledTimes(1);
+      expect(copy).toHaveBeenCalledWith(expectedCopy);
+    });
 
-  it("should return to the original button text after a delay", async () => {
-    renderComponent({ content });
+    it.skip("should copy the markdown content to the clipboard if the copy button is clicked", async () => {
+      const { copy } = renderComponent({ markdown: mockMarkdownContent });
 
-    await userEvent.click(screen.getByRole("button"));
+      await userEvent.click(screen.getByRole("button"));
 
-    expect(screen.getByRole("button", { name: /copied/i })).toBeVisible();
+      expect(copy).toHaveBeenCalledTimes(1);
+      expect(copy).toHaveBeenCalledWith(mockMarkdownContent);
+    });
 
-    await waitFor(() => expect(screen.getByRole("button", { name: /copy/i })).toBeVisible());
+    it("should render the children and copy the string content if it has a custom children", async () => {
+      const content = "lorem: ipsum";
+      const { copy } = mockCopy();
+      render(
+        <Board content={content}>
+          <Typography variant="h6">row 1</Typography>
+          <Typography variant="caption"> row 2</Typography>
+          <Typography variant="body2" sx={{ textDecoration: "line-through" }}>
+            row 3
+          </Typography>
+          <Typography variant="body2" fontWeight={700}>
+            row 4
+          </Typography>
+        </Board>,
+      );
+
+      expect(screen.getByText(/row 1/i)).toBeVisible();
+      expect(screen.getByText(/row 2/i)).toBeVisible();
+      expect(screen.getByText(/row 3/i)).toBeVisible();
+      expect(screen.getByText(/row 4/i)).toBeVisible();
+
+      await userEvent.click(screen.getByRole("button"));
+
+      expect(copy).toHaveBeenCalledTimes(1);
+      expect(copy).toHaveBeenCalledWith(content);
+    });
   });
 });

package/src/components/data-display/board/board.tsx

@@ -1,13 +1,13 @@
-import { Box, Button, Paper, SxProps, Theme, Typography } from "@mui/material";
+import { Box, IconButton, Paper, SxProps, Theme, Tooltip, Typography } from "@mui/material";
 import { blueGrey } from "@mui/material/colors";
-import React, { PropsWithChildren, ReactNode, useState } from "react";
+import React, { PropsWithChildren, ReactNode } from "react";
 import { Markdown } from "../markdown";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 
 export type BoardProps = PropsWithChildren<{
   markdown?: string;
   content?: string | string[];
   spacing?: 0 | 1 | 2 | 3 | 4 | 5;
-  timeoutCopyText?: number;
   sx?: SxProps<Theme>;
 }>;
 
@@ -15,11 +15,9 @@ export const Board = ({
   markdown: markdownProps,
   content: contentProp,
   spacing = 0,
-  timeoutCopyText = 2000,
   children,
   sx,
 }: BoardProps) => {
-  const [copyText, setCopyText] = useState("Copy");
   let copyContent: string;
   let content: ReactNode;
 
@@ -39,22 +37,21 @@ export const Board = ({
 
   const markdown = markdownProps && <Markdown content={markdownProps} />;
 
-  const handleCopy = () => {
-    navigator.clipboard.writeText(copyContent);
-    setCopyText("Copied!");
-
-    setTimeout(() => setCopyText("Copy"), timeoutCopyText);
-  };
-
   return (
     <Paper sx={{ p: 2, backgroundColor: blueGrey[800], color: "white", ...sx }}>
       <Box display="flex" flexDirection="row">
         <Box width={1}>{children || markdown || content}</Box>
-        <Box width={100} sx={{ ml: 1 }}>
+        <Box sx={{ ml: 1 }}>
           {copyContent && (
-            <Button fullWidth color="inherit" size="small" variant="outlined" onClick={handleCopy}>
-              {copyText}
-            </Button>
+            <IconButton
+              aria-label="copy board content"
+              color="inherit"
+              onClick={() => navigator.clipboard.writeText(copyContent)}
+            >
+              <Tooltip title="Copy">
+                <ContentCopyIcon />
+              </Tooltip>
+            </IconButton>
           )}
         </Box>
       </Box>

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

@@ -25,13 +25,26 @@ type Story = StoryObj<typeof QueryContainer>;
 
 export const Fetching: Story = {
   args: {
-    isFetching: true,
+    fetching: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const FetchingAndLoading: Story = {
+  args: {
+    loading: true,
+    fetching: true,
   },
 };
 
 export const Error: Story = {
   args: {
-    isFetching: false,
+    fetching: false,
     error: {
       name: "Sign in error",
       message: "User and password doesn't match",
@@ -41,7 +54,7 @@ export const Error: Story = {
 
 export const ErrorWithOnlyMessage: Story = {
   args: {
-    isFetching: false,
+    fetching: false,
     error: {
       message: "Internal error",
     },
@@ -50,7 +63,7 @@ export const ErrorWithOnlyMessage: Story = {
 
 export const Success: Story = {
   args: {
-    isFetching: false,
+    fetching: false,
     success: {
       name: "Item added",
       message: "The new item has been created with id 1",
@@ -60,7 +73,7 @@ export const Success: Story = {
 
 export const SuccessWithOnlyMessage: Story = {
   args: {
-    isFetching: false,
+    fetching: false,
     success: {
       message: "The new item has been created with id 1",
     },
@@ -69,6 +82,6 @@ export const SuccessWithOnlyMessage: Story = {
 
 export const Content: Story = {
   args: {
-    isFetching: false,
+    fetching: false,
   },
 };