Merge pull request #155 from maykinmedia/issue/#498-attributetable

🎨 - refactor: refactored the attributetable
maykinmedia · Dec 5, 2024 · 9c9f2df · 9c9f2df
2 parents 43a7b51 + 4c86fe0
commit 9c9f2df
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 22 deletions.
diff --git a/src/components/data/attributetable/attributetable.scss b/src/components/data/attributetable/attributetable.scss
@@ -1,10 +1,55 @@
 .mykn-attributetable {
   display: table;
+  background-color: var(--typogrpahy-color-background);
+  width: 100%;
+
+  &--compact {
+    width: unset;
+
+    & .mykn-attributetable__body {
+      grid-template-columns: 1fr;
+      row-gap: 0;
+    }
+
+    & .mykn-attributetable__row {
+      border: none;
+      padding-block-end: 0;
+      padding-block-start: 0;
+
+      &:last-of-type {
+        border: none;
+        padding-block-end: 0;
+        padding-block-start: 0;
+      }
+    }
+
+    // Cell key bold
+    & .mykn-attributetable__cell--key {
+      font-weight: var(--typography-font-weight-bold);
+    }
+  }
 
   &__body {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: 1fr;
     column-gap: var(--spacing-h);
+    row-gap: 0;
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    column-gap: var(--spacing-h);
+    align-items: center;
+
+    border-block-start: 1px solid var(--typography-color-border);
+    padding-block-end: var(--spacing-v);
+    padding-block-start: var(--spacing-v);
+
+    &:last-of-type {
+      border-block-end: 1px solid var(--typography-color-border);
+      padding-block-end: var(--spacing-v);
+    }
   }
 
   &__cell {
@@ -15,20 +60,25 @@
     font-weight: var(--typography-font-weight-normal);
     line-height: var(--typography-line-height-body-s);
     margin: 0;
-  }
 
-  &--valign-start &__cell {
-    align-items: flex-start;
-  }
+    &--key {
+      grid-column: 1;
 
-  &__cell--key {
-    font-weight: var(--typography-font-weight-bold);
-  }
-  &__cell--key > .mykn-icon:last-child {
-    margin-inline-start: var(--spacing-h);
+      > .mykn-icon:last-child {
+        margin-inline-start: var(--spacing-h);
+      }
+    }
+
+    &--value {
+      grid-column: 2;
+    }
+
+    > .mykn-icon {
+      margin-inline-end: var(--spacing-h);
+    }
   }
 
-  &__cell > .mykn-icon {
-    margin-inline-end: var(--spacing-h);
+  &--valign-start &__cell {
+    align-items: flex-start;
   }
 }
diff --git a/src/components/data/attributetable/attributetable.stories.tsx b/src/components/data/attributetable/attributetable.stories.tsx
@@ -29,6 +29,22 @@ export const AttributeTableComponent: Story = {
   },
 };
 
+export const AttributeTableComponentCompact: Story = {
+  args: {
+    object: {
+      url: "https://www.example.com",
+      omschrijving: "Afvalpas vervangen",
+      zaaktype: "https://www.example.com",
+      versie: 2,
+      opmerkingen: null,
+      actief: false,
+      toekomstig: false,
+      concept: true,
+    },
+    compact: true,
+  },
+};
+
 export const LabeledAttributeTableComponent: Story = {
   args: {
     labeledObject: {

diff --git a/src/components/data/attributetable/attributetable.tsx b/src/components/data/attributetable/attributetable.tsx
@@ -24,8 +24,8 @@ export type AttributeTableProps = {
   labelCancel?: string;
   labelEdit?: string;
   valign?: "middle" | "start";
+  compact?: boolean;
 };
-
 export const AttributeTable: React.FC<AttributeTableProps> = ({
   object = {},
   labeledObject = {},
@@ -35,6 +35,7 @@ export const AttributeTable: React.FC<AttributeTableProps> = ({
   labelCancel,
   labelEdit,
   valign = "middle",
+  compact = false,
   ...props
 }) => {
   const intl = useIntl();
@@ -66,7 +67,13 @@ export const AttributeTable: React.FC<AttributeTableProps> = ({
         {renderRows()}
       </Form>
     ) : (
-      <div className="mykn-attributetable__body">{renderRows()}</div>
+      <div
+        className={clsx("mykn-attributetable__body", {
+          "mykn-attributetable--compact": compact,
+        })}
+      >
+        {renderRows()}
+      </div>
     );
   };
 
@@ -80,6 +87,7 @@ export const AttributeTable: React.FC<AttributeTableProps> = ({
         object={object}
         labeledObject={labeledObject}
         labelEdit={labelEdit}
+        compact={compact}
         onClick={() => setIsFormOpenState(true)}
       />
     ));
@@ -89,6 +97,7 @@ export const AttributeTable: React.FC<AttributeTableProps> = ({
       className={clsx(
         "mykn-attributetable",
         `mykn-attributetable--valign-${valign}`,
+        { "mykn-attributetable--compact": compact },
       )}
       {...props}
     >
@@ -105,15 +114,16 @@ export type AttributeTableRowProps = {
   isFormOpen: boolean;
   labelEdit?: string;
   onClick: React.MouseEventHandler;
+  compact?: boolean;
 };
-
 export const AttributeTableRow: React.FC<AttributeTableRowProps> = ({
   editable = false,
   field,
   isFormOpen,
   object = {},
   labeledObject = {},
   labelEdit,
+  compact = false,
   onClick,
 }) => {
   const id = useId();
@@ -143,9 +153,6 @@ export const AttributeTableRow: React.FC<AttributeTableRowProps> = ({
         { ...field, label: label || field.name },
       );
 
-  /**
-   * Renders the value (if not already a React.ReactNode).
-   */
   const renderValue = () => {
     return editable ? (
       <Button
@@ -183,14 +190,30 @@ export const AttributeTableRow: React.FC<AttributeTableRowProps> = ({
   };
 
   return (
-    <>
-      <div className="mykn-attributetable__cell mykn-attributetable__cell--key">
+    <div
+      className={clsx("mykn-attributetable__row", {
+        "mykn-attributetable--compact": compact,
+      })}
+    >
+      <div
+        className={clsx(
+          "mykn-attributetable__cell",
+          "mykn-attributetable__cell--key",
+          { "mykn-attributetable--compact": compact },
+        )}
+      >
         {isEditing ? <label htmlFor={`${id}_input`}>{label}</label> : label}
       </div>
-      <div className="mykn-attributetable__cell mykn-attributetable__cell--value">
+      <div
+        className={clsx(
+          "mykn-attributetable__cell",
+          "mykn-attributetable__cell--value",
+          { "mykn-attributetable--compact": compact },
+        )}
+      >
         {(!editable || !isEditing) && renderValue()}
         {editable && renderInput()}
       </div>
-    </>
+    </div>
   );
 };