@pautena/react-design-system 0.6.1 → 0.7.0

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

@@ -2,38 +2,40 @@ import React from "react";
 import { ValueBoolean } from "../value-boolean/value-boolean";
 import { ValueRating } from "../value-rating";
 import { ValueText } from "../value-text";
-import { GroupValueCard, GroupValueCardProps, GroupValueItem } from "./group-value-card";
+import { GroupValueCard, GroupValueCardProps } from "./group-value-card";
+import { ValueItem } from "../value-item";
 
-export const GroupValueCardDummy = (props: GroupValueCardProps) => {
+export const GroupValueCardDummy = ({ dense, ...rest }: GroupValueCardProps) => {
   return (
-    <GroupValueCard {...props}>
-      <GroupValueItem xs={12} sm={6} md={4}>
-        <ValueText label="Hello world" value="Lorem ipsum sit amet" />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={2}>
-        <ValueBoolean label="Enabled" value />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={3}>
-        <ValueText label="Quantity" value="1200" />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={3}>
-        <ValueText label="Currency" value="EUR" />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={6}>
+    <GroupValueCard {...rest} dense={dense}>
+      <ValueItem xs={12} sm={6} md={4}>
+        <ValueText dense={dense} label="Hello world" value="Lorem ipsum sit amet" />
+      </ValueItem>
+      <ValueItem xs={12} sm={6} md={2}>
+        <ValueBoolean dense={dense} label="Enabled" value />
+      </ValueItem>
+      <ValueItem xs={12} sm={6} md={3}>
+        <ValueText dense={dense} label="Quantity" value="1200" />
+      </ValueItem>
+      <ValueItem xs={12} sm={6} md={3}>
+        <ValueText dense={dense} label="Currency" value="EUR" />
+      </ValueItem>
+      <ValueItem xs={12} sm={6} md={6}>
         <ValueText
+          dense={dense}
           label="I am Batman"
           value=" Does it come in black? It's ends here. Hero can be anyone"
         />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={3}>
-        <ValueText label="Status" value="Open" />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={3}>
-        <ValueText label="Level" value="2144" />
-      </GroupValueItem>
-      <GroupValueItem xs={12} sm={6} md={3}>
-        <ValueRating label="Rating" value={3} />
-      </GroupValueItem>
+      </ValueItem>
+      <ValueItem xs={12} sm={6} md={3}>
+        <ValueText dense={dense} label="Status" value="Open" />
+      </ValueItem>
+      <ValueItem xs={12} sm={6} md={3}>
+        <ValueText dense={dense} label="Level" value="2144" />
+      </ValueItem>
+      <ValueItem xs={12} sm={6} md={3}>
+        <ValueRating dense={dense} label="Rating" value={3} />
+      </ValueItem>
     </GroupValueCard>
   );
 };

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { GroupValueCard, GroupValueItem } from "./group-value-card";
+import { GroupValueCard } from "./group-value-card";
 import { withPadding } from "../../../storybook";
 import { GroupValueCardDummy } from "./group-value-card.mock";
 import { ValueImage } from "../value-image";
@@ -7,6 +7,7 @@ import workInProgressImg from "../../../stories/assets/work-in-progress.jpg";
 import React from "react";
 import { ValueContent } from "../value-content";
 import { DatatablePlaceholder } from "~/tests/datatable-placeholder";
+import { ValueItem } from "../value-item";
 
 export default {
   title: "Components/Value displays/GroupValueCard",
@@ -25,6 +26,14 @@ export const Default: Story = {
   },
 };
 
+export const Dense: Story = {
+  args: {
+    title: "Hello world",
+    subtitle: "Lorem ipsum sit amet",
+    dense: true,
+  },
+};
+
 export const WihtoutSubtitle: Story = {
   args: {
     title: "Hello world",
@@ -33,18 +42,18 @@ export const WihtoutSubtitle: Story = {
 
 export const WithImage = () => (
   <GroupValueCard centered title="Hello world" subtitle="Lorem ipsum sit amet">
-    <GroupValueItem xs={12} bordered={false}>
+    <ValueItem xs={12} bordered={false}>
       <ValueImage label="Lorem ipsum" value={workInProgressImg} />
-    </GroupValueItem>
+    </ValueItem>
   </GroupValueCard>
 );
 
 export const WithDataTable = () => (
   <GroupValueCard title="Hello world" subtitle="Lorem ipsum sit amet">
-    <GroupValueItem xs={12} bordered={false}>
+    <ValueItem xs={12} bordered={false}>
       <ValueContent label="lorem ipsum">
         <DatatablePlaceholder />
       </ValueContent>
-    </GroupValueItem>
+    </ValueItem>
   </GroupValueCard>
 );

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

@@ -1,60 +1,48 @@
-import { Grid, Paper, GridProps, Box, Typography } from "@mui/material";
-import React, { FunctionComponent, PropsWithChildren, ReactElement } from "react";
+import { Grid, Paper, Box, Typography, useTheme } from "@mui/material";
+import React from "react";
 import { useGetDefaultThemeColor } from "../../../utils/theme";
-
-export type GroupValueItemProps = PropsWithChildren<
-  Omit<GridProps, "item" | "container"> & { bordered?: boolean }
->;
-export type GroupValueItemComponent = FunctionComponent<GroupValueItemProps>;
-export type GroupValueItemElement = ReactElement<GroupValueItemProps, GroupValueItemComponent>;
-
-export const groupValueItemClasses = {
-  root: "RdsGroupValueItem-root",
-};
-
-export const GroupValueItem: GroupValueItemComponent = ({
-  children,
-  bordered = true,
-  ...rest
-}: GroupValueItemProps) => {
-  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
-
-  return (
-    <Grid item className={groupValueItemClasses.root} {...rest}>
-      <Box
-        px={1}
-        sx={{
-          borderLeft: bordered ? `solid ${defaultColor} 1px` : "none",
-        }}
-      >
-        {children}
-      </Box>
-    </Grid>
-  );
-};
+import { ValueItemElement } from "../value-item/value-item";
 
 export interface GroupValueCardProps {
   title: string;
   subtitle?: string;
   centered?: boolean;
-  children: GroupValueItemElement | GroupValueItemElement[];
+  children: ValueItemElement | ValueItemElement[];
+  dense?: boolean;
 }
 
-export const GroupValueCard = ({ title, subtitle, centered, children }: GroupValueCardProps) => {
+export const GroupValueCard = ({
+  title,
+  subtitle,
+  centered,
+  children,
+  dense,
+}: GroupValueCardProps) => {
+  const { typography } = useTheme();
   const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
 
   return (
     <Paper
       sx={{
-        paddingBottom: 1,
+        paddingBottom: dense ? 0 : 1,
       }}
     >
-      <Box bgcolor={defaultColor} px={2} py={1}>
-        <Typography variant="h6" role="heading" aria-level={1}>
+      <Box
+        bgcolor={defaultColor}
+        px={dense ? 1 : 2}
+        py={dense ? 0.5 : 1}
+        lineHeight={dense ? 0 : undefined}
+      >
+        <Typography variant={dense ? "body1" : "h6"} role="heading" aria-level={1}>
           {title}
         </Typography>
         {subtitle && (
-          <Typography variant="body2" role="heading" aria-level={2}>
+          <Typography
+            variant={dense ? "caption" : "body2"}
+            role="heading"
+            aria-level={2}
+            lineHeight={dense ? typography.pxToRem(15) : undefined}
+          >
             {subtitle}
           </Typography>
         )}
@@ -62,7 +50,7 @@ export const GroupValueCard = ({ title, subtitle, centered, children }: GroupVal
       <Grid
         container
         padding={1}
-        rowSpacing={2}
+        rowSpacing={dense ? 1 : 2}
         justifyContent={centered ? "center" : "flex-start"}
       >
         {children}

package/src/components/value-displays/index.ts

@@ -6,3 +6,4 @@ export * from "./group-value-card";
 export * from "./value-base/value-displays.types";
 export * from "./value-rating";
 export * from "./value-base";
+export * from "./value-item";

package/src/components/value-displays/value-base/value-displays.types.ts

@@ -13,6 +13,12 @@ export interface BaseValueProps<T> {
    * String rendered if value is undefined
    */
   placeholder?: string;
+
+  /**
+   * The value has to be displayed as compact or not.
+   * False by default
+   */
+  dense?: boolean;
 }
 
 export interface EditableValueProps<T> {

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

@@ -30,3 +30,11 @@ export const Editable: Story = {
     editable: true,
   },
 };
+
+export const Dense: Story = {
+  args: {
+    label: "Lorem ipsum",
+    value: true,
+    dense: true,
+  },
+};

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

@@ -22,16 +22,17 @@ export const ValueBoolean = ({
   value,
   placeholder = DefaultPlaceholder,
   editable,
+  dense,
   onEdit = () => null,
 }: ValueBooleanProps) => {
   const { typography } = useTheme();
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
     useEditableValueDisplay(value, onEdit);
 
-  const iconSx = { fontSize: typography.h5.fontSize };
+  const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };
 
   return (
-    <ValueContent label={label}>
+    <ValueContent label={label} dense={dense}>
       {isEditing ? (
         <Box display="flex" alignItems="center">
           <Switch checked={editValue} onChange={(e) => setEditValue(e.target.checked)} />

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

@@ -11,8 +11,8 @@ export default {
   parameters: {
     layout: "centered",
   },
-  render: () => (
-    <ValueContent label="lorem ipsum">
+  render: (args) => (
+    <ValueContent {...args} label="lorem ipsum">
       <Typography>Demo content</Typography>
     </ValueContent>
   ),
@@ -20,3 +20,8 @@ export default {
 type Story = StoryObj<typeof ValueContent>;
 
 export const Default: Story = {};
+export const Dense: Story = {
+  args: {
+    dense: true,
+  },
+};

package/src/components/value-displays/value-content/value-content.tsx

@@ -1,4 +1,4 @@
-import { Box, Tooltip, Typography } from "@mui/material";
+import { Box, Tooltip, Typography, useTheme } from "@mui/material";
 import React from "react";
 
 export const getValueContentLabelId = (label: string): string =>
@@ -24,6 +24,12 @@ export interface ValueContentProps {
    * Component that's going to be renderd under the label
    */
   children: React.ReactElement<any, any>;
+
+  /**
+   * The value has to be displayed as compact or not.
+   * False by default
+   */
+  dense?: boolean;
 }
 
 /**
@@ -34,12 +40,19 @@ export const ValueContent = ({
   tooltip,
   tooltipEnterDelay = 2000,
   children,
+  dense,
 }: ValueContentProps) => {
+  const { typography } = useTheme();
   const id = getValueContentLabelId(label);
 
   return (
-    <Box width={1}>
-      <Typography variant="subtitle2" role="label" id={id}>
+    <Box width={1} lineHeight={dense ? 0 : undefined}>
+      <Typography
+        variant={dense ? "caption" : "subtitle2"}
+        role="label"
+        id={id}
+        lineHeight={dense ? typography.pxToRem(15) : undefined}
+      >
         {label}
       </Typography>
       {tooltip ? (

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

@@ -20,6 +20,15 @@ export const Default: Story = {
   },
 };
 
+export const Dense: Story = {
+  args: {
+    label: "Lorem",
+    value: new Date(2022, 8, 22),
+    format: "yyyy/MM/dd",
+    dense: true,
+  },
+};
+
 export const Placeholder: Story = {
   args: {
     label: "Lorem",

package/src/components/value-displays/value-datetime/value-datetime.tsx

@@ -35,6 +35,7 @@ export const ValueDatetime = ({
   placeholder = DefaultPlaceholder,
   editable,
   editInputType = "datetime",
+  dense,
   onEdit = () => null,
 }: ValueDatetimeProps) => {
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
@@ -50,7 +51,7 @@ export const ValueDatetime = ({
       : DatePicker;
 
   return (
-    <ValueContent label={label} tooltip={value}>
+    <ValueContent label={label} tooltip={value} dense={dense}>
       {isEditing ? (
         <EditPickerComponent
           value={editValue}
@@ -79,7 +80,7 @@ export const ValueDatetime = ({
         />
       ) : (
         <Box display="flex" alignItems="center">
-          <Typography variant="h5" noWrap aria-labelledby={id}>
+          <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
             {value}
           </Typography>
           {editable && (

package/src/components/value-displays/value-displays.stories.mdx

@@ -14,4 +14,5 @@ import LinkTo from '@storybook/addon-links/react';
   <li><LinkTo kind="Components/Value displays/ValueImage">ValueImage</LinkTo></li>
   <li><LinkTo kind="Components/Value displays/ValueText">ValueText</LinkTo></li>
   <li><LinkTo kind="Components/Value displays/ValueRating">ValueRating</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueItem">ValueItem</LinkTo></li>
 </ul>

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

@@ -20,6 +20,14 @@ export const Default: Story = {
   },
 };
 
+export const Dense: Story = {
+  args: {
+    label: "Lorem",
+    value: workInProgressImg,
+    dense: true,
+  },
+};
+
 export const CustomSize: Story = {
   args: {
     label: "Lorem",

package/src/components/value-displays/value-image/value-image.tsx

@@ -11,13 +11,15 @@ export interface ValueImageProps extends BaseValueProps<string> {
 }
 
 const DefaultSize = 100;
+const DefaultDenseSize = 50;
 
 /**
  * Displays a image value with a label
  */
-export const ValueImage = ({ label, value, size = DefaultSize }: ValueImageProps) => {
+export const ValueImage = ({ label, value, size: sizeArg, dense }: ValueImageProps) => {
+  const size = sizeArg || (dense ? DefaultDenseSize : DefaultSize);
   return (
-    <ValueContent label={label}>
+    <ValueContent label={label} dense={dense}>
       <Box component="img" src={value} alt={label} sx={{ width: size, height: size }} />
     </ValueContent>
   );

package/src/components/value-displays/value-item/index.ts

@@ -0,0 +1 @@
+export * from "./value-item";

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

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ValueItem } from "./value-item";
+import { ValueText } from "../value-text";
+import React from "react";
+
+export default {
+  title: "Components/Value displays/ValueItem",
+  component: ValueItem,
+  parameters: {
+    layout: "centered",
+  },
+  render: (args) => (
+    <ValueItem {...args}>
+      <ValueText label="Hello world" value="Lorem ipsum sit amet" />
+    </ValueItem>
+  ),
+} satisfies Meta<typeof ValueItem>;
+type Story = StoryObj<typeof ValueItem>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Borderless: Story = {
+  args: {
+    bordered: false,
+  },
+};
+
+export const BreakpointsBorder: Story = {
+  args: {
+    bordered: {
+      xs: false,
+      sm: true,
+      md: false,
+      lg: true,
+    },
+  },
+};
+
+export const BreakpointsArrayBorder: Story = {
+  args: {
+    bordered: [false, true, false, true],
+  },
+};

package/src/components/value-displays/value-item/value-item.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from "~/tests/testing-library";
+import { ValueItem } from "./value-item";
+import React from "react";
+import { Typography } from "@mui/material";
+
+describe("ValueItem", () => {
+  const renderComponent = () => {
+    render(
+      <ValueItem>
+        <Typography>test content</Typography>
+      </ValueItem>,
+    );
+  };
+
+  it("should render the children", () => {
+    renderComponent();
+
+    expect(screen.getByText(/test content/i)).toBeVisible();
+  });
+});

package/src/components/value-displays/value-item/value-item.tsx

@@ -0,0 +1,54 @@
+import { GridProps, Grid, Box } from "@mui/material";
+import { ResponsiveStyleValue } from "@mui/system";
+import React, { PropsWithChildren, FunctionComponent, ReactElement } from "react";
+import { useGetDefaultThemeColor } from "~/utils";
+
+export type ValueItemProps = PropsWithChildren<
+  Omit<GridProps, "item" | "container"> & { bordered?: ResponsiveStyleValue<boolean> }
+>;
+export type ValueItemComponent = FunctionComponent<ValueItemProps>;
+export type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;
+
+export const valueItemClasses = {
+  root: "RdsValueItem-root",
+  content: "RdsValueItem-content",
+};
+
+const resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {
+  const borderStyle = `solid ${color} 1px`;
+  const noBorder = "none";
+
+  if (!bordered) {
+    return undefined;
+  }
+
+  if (Array.isArray(bordered)) {
+    return bordered.map((b) => (b ? borderStyle : noBorder));
+  }
+
+  if (typeof bordered === "object") {
+    const style: Record<string, string | undefined> = {};
+    Object.entries(bordered).forEach(([key, value]) => {
+      style[key] = value ? borderStyle : noBorder;
+    });
+    return style;
+  }
+
+  return borderStyle;
+};
+
+export const ValueItem: ValueItemComponent = ({
+  children,
+  bordered = true,
+  ...rest
+}: ValueItemProps) => {
+  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
+  const borderLeft = resolveBorderStyle(bordered, defaultColor);
+  return (
+    <Grid item className={valueItemClasses.root} {...rest}>
+      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>
+        {children}
+      </Box>
+    </Grid>
+  );
+};

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

@@ -19,6 +19,14 @@ export const Default: Story = {
   },
 };
 
+export const Dense: Story = {
+  args: {
+    label: "Lorem",
+    value: 3,
+    dense: true,
+  },
+};
+
 export const Max: Story = {
   args: {
     label: "Lorem",

package/src/components/value-displays/value-rating/value-rating.tsx

@@ -17,6 +17,7 @@ export const ValueRating = ({
   value = 0,
   maxRating = 5,
   editable,
+  dense,
   onEdit = () => null,
 }: ValueRatingProps) => {
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
@@ -24,14 +25,15 @@ export const ValueRating = ({
   const id = getValueContentLabelId(label);
 
   return (
-    <ValueContent label={label} tooltip={value.toString()}>
+    <ValueContent label={label} tooltip={value.toString()} dense={dense}>
       <Box display="flex" alignItems="center">
         <Rating
           aria-labelledby={id}
           readOnly={!isEditing}
           max={maxRating}
+          size={dense ? "small" : "medium"}
           value={isEditing ? editValue : value}
-          onChange={(_, newValue) => setEditValue(newValue!)}
+          onChange={(_, newValue) => newValue && setEditValue(newValue)}
         />
         {editable && !isEditing && (
           <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>

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

@@ -19,6 +19,14 @@ export const Default: Story = {
   },
 };
 
+export const Dense: Story = {
+  args: {
+    label: "Lorem",
+    value: "ipsum sit",
+    dense: true,
+  },
+};
+
 export const NumberAsValue: Story = {
   args: {
     label: "Lorem",

package/src/components/value-displays/value-text/value-text.tsx

@@ -20,6 +20,7 @@ export const ValueText = ({
   value: valueProp,
   placeholder = DefaultPlaceholder,
   editable,
+  dense,
   onEdit = () => null,
 }: ValueTextProps) => {
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
@@ -28,7 +29,7 @@ export const ValueText = ({
   const value = valueProp?.toString() || placeholder;
 
   return (
-    <ValueContent label={label} tooltip={value}>
+    <ValueContent label={label} tooltip={value} dense={dense}>
       {isEditing ? (
         <TextField
           value={editValue}
@@ -39,7 +40,7 @@ export const ValueText = ({
           }}
         />
       ) : (
-        <Typography variant="h5" noWrap aria-labelledby={id}>
+        <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
           {value}
           {editable && (
             <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>