From 4bea9711aa4df875a068eac10e774c1053375d3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Mar=C3=ADn=20S=C3=A1nchez?=
 <46426271+fermarinsanchez@users.noreply.github.com>
Date: Tue, 5 Nov 2024 10:42:05 +0100
Subject: [PATCH] feat(components): add `clean` prop to Kanban

it removes the external padding and background color
Ticket: issue/Transversal-319
Reviewed-by: @MIGUELez11
Refs: #203
---
 packages/components/src/informative/Kanban/Kanban.js        | 5 ++++-
 packages/components/src/informative/Kanban/Kanban.styles.js | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/informative/Kanban/Kanban.js b/packages/components/src/informative/Kanban/Kanban.js
index 981812fb..8a511970 100644
--- a/packages/components/src/informative/Kanban/Kanban.js
+++ b/packages/components/src/informative/Kanban/Kanban.js
@@ -11,6 +11,7 @@ export const KANBAN_DEFAULT_PROPS = {
   itemRender: ({ value }) => <>{value.title}</>,
   showNewOnFirstColumn: true,
   newItemLabel: 'Add new item',
+  clean: false,
 };
 export const KANBAN_PROP_TYPES = {
   value: PropTypes.shape({
@@ -29,6 +30,7 @@ export const KANBAN_PROP_TYPES = {
   itemRender: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   showNewOnFirstColumn: PropTypes.bool,
   newItemLabel: PropTypes.string,
+  clean: PropTypes.bool,
 };
 
 const Kanban = ({
@@ -39,8 +41,9 @@ const Kanban = ({
   showNewOnFirstColumn,
   onNew,
   newItemLabel,
+  clean,
 }) => {
-  const { classes } = KanbanStyles({});
+  const { classes } = KanbanStyles({ clean }, { name: 'Kanban' });
 
   const onDragEnd = (result) => {
     // dropped nowhere
diff --git a/packages/components/src/informative/Kanban/Kanban.styles.js b/packages/components/src/informative/Kanban/Kanban.styles.js
index 3874bde7..4cba0678 100644
--- a/packages/components/src/informative/Kanban/Kanban.styles.js
+++ b/packages/components/src/informative/Kanban/Kanban.styles.js
@@ -1,6 +1,6 @@
 import { createStyles } from '@mantine/styles';
 
-const KanbanStyles = createStyles((theme) => ({
+const KanbanStyles = createStyles((theme, { clean }) => ({
   root: {
     display: 'flex',
     overflow: 'auto',
@@ -9,8 +9,8 @@ const KanbanStyles = createStyles((theme) => ({
     maxHeight: '100%',
     gap: theme.spacing[2],
     alignItems: 'stretch',
-    padding: theme.spacing[2],
-    backgroundColor: '#F8F9FB',
+    padding: clean ? 0 : theme.spacing[2],
+    backgroundColor: clean ? 'transparent' : '#F8F9FB',
   },
   column: {
     display: 'inline-flex',