From 17f7f7ec7362e1d381359ef1925d1b7051f9bc4d Mon Sep 17 00:00:00 2001
From: Subina <subina@togglecorp.com>
Date: Tue, 26 Mar 2024 14:28:55 +0545
Subject: [PATCH] Add 'errored' props in Container and ExpandableContainers

---
 src/components/Container/index.tsx                    |  3 +++
 src/components/Container/styles.css                   |  3 +++
 .../ControlledExpandableContainer/index.tsx           |  9 ++++++++-
 .../ControlledExpandableContainer/styles.css          | 11 +++++++++++
 .../stories/ControlledExpandableContainer.stories.tsx |  6 ++++++
 storybook/stories/ExpandableContainer.stories.tsx     |  7 +++++++
 6 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx
index 1506348e..69b1b545 100644
--- a/src/components/Container/index.tsx
+++ b/src/components/Container/index.tsx
@@ -61,6 +61,7 @@ export interface Props {
     ellipsizeHeading?: boolean;
     withoutExternalPadding?: boolean;
     visibleOverflow?: boolean;
+    errored?: boolean;
 }
 
 function Container(props: Props) {
@@ -103,6 +104,7 @@ function Container(props: Props) {
         withoutExternalPadding,
         visibleOverflow,
         headingDescriptionClassName,
+        errored,
     } = props;
 
     const internalRef = React.useRef<HTMLDivElement>(null);
@@ -126,6 +128,7 @@ function Container(props: Props) {
                 spacingToStyleMap[spacing],
                 withoutExternalPadding && styles.withoutExternalPadding,
                 visibleOverflow && styles.visibleOverflow,
+                errored && styles.errored,
                 className,
             )}
             ref={elementRef}
diff --git a/src/components/Container/styles.css b/src/components/Container/styles.css
index 18f54d76..8aab7d75 100644
--- a/src/components/Container/styles.css
+++ b/src/components/Container/styles.css
@@ -53,6 +53,9 @@
             overflow: visible;
         }
     }
+    &.errored {
+        border: var(--dui-width-separator-thin) solid var(--dui-color-danger);
+    }
 }
 
 @keyframes get-focus {
diff --git a/src/components/ControlledExpandableContainer/index.tsx b/src/components/ControlledExpandableContainer/index.tsx
index 058f8db9..3f94e420 100644
--- a/src/components/ControlledExpandableContainer/index.tsx
+++ b/src/components/ControlledExpandableContainer/index.tsx
@@ -56,6 +56,7 @@ function ControlledExpandableContainer<T>(props: Props<T>) {
         spacing = 'comfortable',
         withoutExternalPadding,
         withoutBorder,
+        errored,
         ...otherProps
     } = props;
 
@@ -78,6 +79,7 @@ function ControlledExpandableContainer<T>(props: Props<T>) {
                 withoutExternalPadding && styles.withoutExternalPadding,
                 !withoutBorder && styles.withBorder,
                 expanded && styles.expanded,
+                errored && styles.errored,
                 className,
             )}
             headerElementProps={
@@ -89,9 +91,14 @@ function ControlledExpandableContainer<T>(props: Props<T>) {
                 styles.header,
                 headerClassName,
                 expansionTriggerArea === 'header' && !disabled && styles.clickableHeader,
+                errored && styles.errored,
             )}
             headingContainerClassName={_cs(styles.headingContainer, headingContainerClassName)}
-            headingClassName={_cs(styles.heading, headingClassName)}
+            headingClassName={_cs(
+                styles.heading,
+                headingClassName,
+                errored && styles.errored,
+            )}
             heading={heading}
             headingSize={headingSize ?? 'small'}
             spacing={spacing}
diff --git a/src/components/ControlledExpandableContainer/styles.css b/src/components/ControlledExpandableContainer/styles.css
index c482c77b..6282d9c7 100644
--- a/src/components/ControlledExpandableContainer/styles.css
+++ b/src/components/ControlledExpandableContainer/styles.css
@@ -10,6 +10,10 @@
         .heading-container {
             .heading {
                 color: var(--dui-color-accent);
+
+                &.errored {
+                    color: var(--dui-color-danger);
+                }
             }
         }
 
@@ -21,6 +25,10 @@
         &.clickable-header {
             cursor: pointer;
         }
+
+        &.errored {
+            background-color: var(--dui-color-surface-negative);
+        }
     }
 
     &.expanded {
@@ -60,5 +68,8 @@
     &.loose-spacing {
         --spacing: var(--dui-spacing-large);
     }
+    &.errored {
+        border: var(--dui-width-separator-thin) solid var(--dui-color-danger);
+    }
 }
 
diff --git a/storybook/stories/ControlledExpandableContainer.stories.tsx b/storybook/stories/ControlledExpandableContainer.stories.tsx
index 50c4af64..3ab58eb8 100644
--- a/storybook/stories/ControlledExpandableContainer.stories.tsx
+++ b/storybook/stories/ControlledExpandableContainer.stories.tsx
@@ -58,3 +58,9 @@ export const Default = Template.bind({});
 Default.args = {
     children: 'A lof of ui elements',
 };
+
+export const Errored = Template.bind({});
+Errored.args = {
+    children: 'A lof of ui elements',
+    errored: true,
+};
diff --git a/storybook/stories/ExpandableContainer.stories.tsx b/storybook/stories/ExpandableContainer.stories.tsx
index bf804e67..79dd668e 100644
--- a/storybook/stories/ExpandableContainer.stories.tsx
+++ b/storybook/stories/ExpandableContainer.stories.tsx
@@ -44,3 +44,10 @@ DisabledExpandableContainer.args = {
     children: 'I should expand on arrow click and not the whole header.',
     disabled: true,
 };
+
+export const ErroredExpandableContainer = Template.bind({});
+ErroredExpandableContainer.args = {
+    heading: 'Extended Matrixes',
+    children: 'I should expand on arrow click and not the whole header.',
+    errored: true,
+};