From e2f0f61817fd8e3cc94b3d3a89f67b425e2dca98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Tue, 1 Mar 2022 14:50:54 +0100
Subject: [PATCH] Add InputError component

---
 .../components/callout/callout.module.scss    | 58 -------------------
 .../components/inputError/inputError.spec.tsx | 10 ++++
 .../inputError/inputError.stories.tsx         | 20 +++++++
 .../src/components/inputError/inputError.tsx  | 33 +++++++++++
 4 files changed, 63 insertions(+), 58 deletions(-)
 delete mode 100644 libs/ui-toolkit/src/components/callout/callout.module.scss
 create mode 100644 libs/ui-toolkit/src/components/inputError/inputError.spec.tsx
 create mode 100644 libs/ui-toolkit/src/components/inputError/inputError.stories.tsx
 create mode 100644 libs/ui-toolkit/src/components/inputError/inputError.tsx

diff --git a/libs/ui-toolkit/src/components/callout/callout.module.scss b/libs/ui-toolkit/src/components/callout/callout.module.scss
deleted file mode 100644
index 4f76110c3..000000000
--- a/libs/ui-toolkit/src/components/callout/callout.module.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import '../../styles/colors';
-
-.callout {
-  display: flex;
-  padding: 14px;
-  border: 1px solid $white;
-  box-shadow: 3px 3px 0px $white;
-  margin: 12px 0;
-
-  p {
-    margin: 0 0 10px 0;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  // VARIATIONS
-  &--error {
-    box-shadow: 5px 5px 0px $vega-red3;
-  }
-
-  &--success {
-    box-shadow: 5px 5px 0px $vega-green3;
-  }
-
-  &--warn {
-    box-shadow: 5px 5px 0px $vega-orange3;
-  }
-
-  &--action {
-    box-shadow: 5px 5px 0px $vega-yellow3;
-  }
-
-  &__content {
-    width: 100%;
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__title,
-  h4,
-  h5,
-  h6 {
-    margin-bottom: 15px;
-  }
-
-  &__title {
-    margin-top: 0;
-  }
-
-  &__icon {
-    margin-right: 10px;
-    color: $white;
-  }
-}
diff --git a/libs/ui-toolkit/src/components/inputError/inputError.spec.tsx b/libs/ui-toolkit/src/components/inputError/inputError.spec.tsx
new file mode 100644
index 000000000..628e06cdf
--- /dev/null
+++ b/libs/ui-toolkit/src/components/inputError/inputError.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import InputError from './inputError';
+
+describe('InputError', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<InputError />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/libs/ui-toolkit/src/components/inputError/inputError.stories.tsx b/libs/ui-toolkit/src/components/inputError/inputError.stories.tsx
new file mode 100644
index 000000000..6303a9ad8
--- /dev/null
+++ b/libs/ui-toolkit/src/components/inputError/inputError.stories.tsx
@@ -0,0 +1,20 @@
+import { Story, Meta } from '@storybook/react';
+import { InputError } from './inputError';
+
+export default {
+  component: InputError,
+  title: 'InputError',
+} as Meta;
+
+const Template: Story = (args) => <InputError {...args} />;
+
+export const Danger = Template.bind({});
+Danger.args = {
+  children: 'An error that might have happened',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  intent: 'warning',
+  children: 'Something that might be an issue',
+};
diff --git a/libs/ui-toolkit/src/components/inputError/inputError.tsx b/libs/ui-toolkit/src/components/inputError/inputError.tsx
new file mode 100644
index 000000000..ea32598d9
--- /dev/null
+++ b/libs/ui-toolkit/src/components/inputError/inputError.tsx
@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+
+interface InputErrorProps {
+  children?: React.ReactNode;
+  className?: string;
+  intent?: 'danger' | 'warning';
+}
+
+export const InputError = ({
+  intent = 'danger',
+  className,
+  children,
+}: InputErrorProps) => {
+  const effectiveClassName = classNames(
+    [
+      'inline-flex',
+      'items-center',
+      'box-border',
+      'h-28',
+      'border-l-4',
+      'text-light-gray-50',
+      'text-ui',
+    ],
+    {
+      'border-intent-danger': intent === 'danger',
+      'border-intent-warning': intent === 'warning',
+    },
+    className
+  );
+  return <div className={effectiveClassName}>{children}</div>;
+};
+
+export default InputError;