Add InputError component

libs/ui-toolkit/src/components/callout/callout.module.scss

@@ -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;
-  }
-}

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();
+  });
+});

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',
+};

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;