Add 'errored' props in Container and ExpandableContainers

the-deep · Mar 26, 2024 · 17f7f7e · 17f7f7e
1 parent 4734b06
commit 17f7f7e
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
+};