Merge pull request #55 from kodiak-packages/54-alert

Alert component

package.json

@@ -11,7 +11,7 @@
   ],
   "main": "dist/index.js",
   "scripts": {
-    "start": "docz dev",
+    "start": "rm -rf .docz && docz dev",
     "build": "rm -rf dist && tsc --project tsconfig-build.json && yarn copy:assets",
     "test": "jest --detectOpenHandles --watchAll",
     "document": "docz build",

src/components/Alert/Alert.mdx

@@ -0,0 +1,24 @@
+---
+name: Alert
+menu: Components
+route: /alert
+---
+
+import { Playground, Props } from 'docz';
+import { Alert } from '../..';
+
+# Alert
+
+Alerts allow you to display error messages relevant to an entire form or application.
+
+## Examples
+
+### Basic usage
+
+<Playground>
+  <Alert intent='error' message='Something went wrong.' />
+</Playground>
+
+## API
+
+<Props of={Alert} />

src/components/Alert/Alert.module.css

@@ -0,0 +1,18 @@
+.alert {
+  padding: 10px 18px;
+  background-color: var(--color-error-light);
+  display: flex;
+  align-items: center;
+  border-radius: var(--border-radius-small);
+}
+
+.message {
+  display: inline-block;
+}
+
+svg.icon {
+  margin-right: 10px;
+  color: var(--color-error);
+  height: 16px;
+  width: 16px;
+}

src/components/Alert/Alert.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Alert from './Alert';
+
+describe('Input', () => {
+  const defaultProps = {
+    message: 'Something went wrong.',
+  };
+
+  test('default snapshot', () => {
+    const { asFragment } = render(<Alert {...defaultProps} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('the message should be rendered', () => {
+    const { queryByText } = render(<Alert {...defaultProps} />);
+    const alertElement = queryByText(/Something went wrong./);
+    expect(alertElement).not.toBe(null);
+  });
+
+  test('className prop', () => {
+    const className = 'center';
+    const { getByText } = render(<Alert {...defaultProps} className={className} />);
+    const alertElement = getByText(/Something went wrong./).parentElement!;
+
+    const renderedClassNames = alertElement.className.split(' ');
+    expect(renderedClassNames).toContain(className);
+    // className in prop should be the last in the row
+    expect(renderedClassNames.indexOf(className)).toBe(renderedClassNames.length - 1);
+  });
+});

src/components/Alert/Alert.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { AlertCircle } from 'react-feather';
+import classNames from 'classnames';
+
+import cssReset from '../../css-reset.module.css';
+import styles from './Alert.module.css';
+
+interface Props {
+  intent?: 'error';
+  message: string;
+  className?: string;
+}
+
+const Alert: React.FC<Props> = ({ intent = 'error', message, className }: Props) => {
+  const mergedClassNames = classNames(cssReset.ventura, styles.alert, className);
+
+  return (
+    <div className={mergedClassNames}>
+      {intent === 'error' && <AlertCircle className={styles.icon} />}
+      <span className={styles.message}>{message}</span>
+    </div>
+  );
+};
+
+export default Alert;

src/components/Alert/__snapshots__/Alert.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input default snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="ventura alert"
+  >
+    <svg
+      class="icon"
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+      />
+      <line
+        x1="12"
+        x2="12"
+        y1="8"
+        y2="12"
+      />
+      <line
+        x1="12"
+        x2="12.01"
+        y1="16"
+        y2="16"
+      />
+    </svg>
+    <span
+      class="message"
+    >
+      Something went wrong.
+    </span>
+  </div>
+</DocumentFragment>
+`;

src/components/Input/Input.mdx

@@ -4,7 +4,6 @@ menu: Components
 route: /input
 ---
 
-import { useState } from 'react';
 import { Playground, Props } from 'docz';
 import { Input } from '../../index.ts'
 import styles from './docAssets/docs.module.css';
@@ -66,7 +65,7 @@ A Input can be used to let the user insert text using key strokes. A crucial for
 
 <Playground>
   {() => {
-    const [serialCode, setSerialCode] = useState('AAAA-BBBB-CCCC-DDDD');
+    const [serialCode, setSerialCode] = React.useState('AAAA-BBBB-CCCC-DDDD');
     const formattedSerialCode = (
       serialCode
         .split('-')

src/index.css

@@ -1,6 +1,9 @@
 @import './theme.css';
 
-svg[viewBox='0 0 24 24'][stroke-linejoin='round'][stroke-linecap='round'] {
+/* Multiple issues open to set the default svg size */
+/* https://github.com/feathericons/react-feather/pull/62 */
+/* Remove this when a better solution is available */
+svg[viewBox='0 0 24 24'] {
   width: var(--font-size);
   height: var(--font-size);
 }

src/index.ts

@@ -1,5 +1,6 @@
 import './index.css';
 
+export { default as Alert } from './components/Alert/Alert';
 export { default as Button } from './components/Button/Button';
 export { default as Input } from './components/Input/Input';
 export { default as Radio } from './components/Radio/Radio';