Add Icon component, use Icon in InputError

libs/tailwindcss-config/src/theme.js

@@ -82,6 +82,7 @@ module.exports = {
     4: '0.25rem',
     8: '0.5rem',
     12: '0.75rem',
+    20: '1.25rem',
     28: '1.75rem',
     44: '2.75rem',
   },

libs/ui-toolkit/src/components/icon/icon.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Icon from './icon';
+
+describe('Icon', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Icon name="add" />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui-toolkit/src/components/icon/icon.stories.tsx

@@ -0,0 +1,22 @@
+import { Story, Meta } from '@storybook/react';
+import { Icon } from './icon';
+
+export default {
+  component: Icon,
+  title: 'Input',
+} as Meta;
+
+const Template: Story = (args) => <Icon {...args} name="warning-sign" />;
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  hasError: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};

libs/ui-toolkit/src/components/icon/icon.tsx

@@ -0,0 +1,32 @@
+import { IconSvgPaths20, IconSvgPaths16, IconName } from '@blueprintjs/icons';
+import classNames from 'classnames';
+
+interface IconProps {
+  hasError?: boolean;
+  disabled?: boolean;
+  name: IconName;
+  className?: string;
+  size?: 16 | 20 | 24 | 32 | 48 | 64;
+}
+
+export const Icon = ({ size = 20, name, className }: IconProps) => {
+  const effectiveClassName = classNames(
+    {
+      'w-20': size === 20,
+      'h-20': size === 20,
+    },
+    className
+  );
+  const viewbox = size <= 16 ? '0 0 16 16' : '0 0 20 20';
+  return (
+    <svg className={effectiveClassName} viewBox={viewbox}>
+      <g>
+        {(size <= 16 ? IconSvgPaths16 : IconSvgPaths20)[name].map((d) => (
+          <path fill-rule="evenodd" clip-rule="evenodd" d={d} />
+        ))}
+      </g>
+    </svg>
+  );
+};
+
+export default Icon;

libs/ui-toolkit/src/components/inputError/inputError.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import Icon from '../icon/icon';
 
 interface InputErrorProps {
   children?: React.ReactNode;
@@ -27,7 +28,16 @@ export const InputError = ({
     },
     className
   );
-  return <div className={effectiveClassName}>{children}</div>;
+  const iconClassName = classNames(['mx-8'], {
+    'fill-intent-danger': intent === 'danger',
+    'fill-intent-warning': intent === 'warning',
+  });
+  return (
+    <div className={effectiveClassName}>
+      <Icon name="warning-sign" className={iconClassName} />
+      {children}
+    </div>
+  );
 };
 
 export default InputError;