From ff2f4e77802d6806df86bf355e2d746fda94fd79 Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Mon, 17 Jan 2022 13:51:42 +0100
Subject: [PATCH] Inline Message (#180)

* Add InlineMessage

* Fix issues with dot notation colors

* Bump version
---
 package.json                            |  2 +-
 src/atoms/Icon.tsx                      |  3 ++-
 src/atoms/Spinner.tsx                   |  4 +--
 src/molecules/InlineMessage.stories.mdx | 28 +++++++++++++++++++++
 src/molecules/InlineMessage.test.tsx    |  8 ++++++
 src/molecules/InlineMessage.tsx         | 33 +++++++++++++++++++++++++
 src/theme.ts                            | 20 ++++++++++-----
 7 files changed, 88 insertions(+), 10 deletions(-)
 create mode 100644 src/molecules/InlineMessage.stories.mdx
 create mode 100644 src/molecules/InlineMessage.test.tsx
 create mode 100644 src/molecules/InlineMessage.tsx

diff --git a/package.json b/package.json
index 09c46c77..20143dc6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mycrypto/ui",
-  "version": "1.9.8",
+  "version": "1.10.0",
   "description": "The shared UI component library used across all MyCrypto products.",
   "repository": "MyCryptoHQ/ui",
   "keywords": [
diff --git a/src/atoms/Icon.tsx b/src/atoms/Icon.tsx
index 453dc92a..d2dc4fd2 100644
--- a/src/atoms/Icon.tsx
+++ b/src/atoms/Icon.tsx
@@ -1,6 +1,7 @@
 import type { FunctionComponent } from 'react';
 import InlineSVG from 'react-inlinesvg';
 import { useTheme } from 'styled-components';
+import { get } from 'styled-system';
 import type { Theme } from 'theme';
 
 import type { BoxProps } from '.';
@@ -96,7 +97,7 @@ export const Icon: FunctionComponent<IconProps & BoxProps> = ({
         as={InlineSVG}
         src={icons[type]}
         width={width}
-        fill={(theme.colors[fill as keyof Theme['colors']] as string) || fill}
+        fill={get(theme.colors, (fill as keyof Theme['colors']) as string) || fill}
         {...props}
       />
     );
diff --git a/src/atoms/Spinner.tsx b/src/atoms/Spinner.tsx
index 66082f52..ed34ee26 100644
--- a/src/atoms/Spinner.tsx
+++ b/src/atoms/Spinner.tsx
@@ -1,7 +1,7 @@
 import type { FunctionComponent } from 'react';
 import styled, { keyframes, useTheme } from 'styled-components';
 import type { SpaceProps } from 'styled-system';
-import { space } from 'styled-system';
+import { space, get } from 'styled-system';
 
 import type { Theme } from '../theme';
 
@@ -42,7 +42,7 @@ export const Spinner: FunctionComponent<SpinnerProps> = ({
         cy="25"
         r="20"
         fill="none"
-        stroke={(theme.colors[color as keyof Theme['colors']] as string) || color}
+        stroke={get(theme.colors, (color as keyof Theme['colors']) as string) || color}
         strokeWidth="5"
         strokeDasharray="90, 150"
         strokeDashoffset={0}
diff --git a/src/molecules/InlineMessage.stories.mdx b/src/molecules/InlineMessage.stories.mdx
new file mode 100644
index 00000000..a76a03f5
--- /dev/null
+++ b/src/molecules/InlineMessage.stories.mdx
@@ -0,0 +1,28 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+import { fAddress } from '../../.jest/__fixtures__';
+import { InlineMessage } from './InlineMessage';
+
+<Meta
+  title="molecules/InlineMessage"
+  component={InlineMessage}
+  parameters={{ actions: { argTypesRegex: '^on.*' } }}
+  argTypes={{
+    type: {
+      control: {
+        type: 'select',
+        options: ['success', 'info', 'action', 'warning', 'error']
+      }
+    }
+  }}
+/>
+
+# InlineMessage
+
+InlineMessage!
+
+<Canvas>
+  <Story name="Default" args={{ type: 'success', children: 'Default' }}>
+    {(props) => <InlineMessage {...props} />}
+  </Story>
+</Canvas>
diff --git a/src/molecules/InlineMessage.test.tsx b/src/molecules/InlineMessage.test.tsx
new file mode 100644
index 00000000..5519c2a8
--- /dev/null
+++ b/src/molecules/InlineMessage.test.tsx
@@ -0,0 +1,8 @@
+import { simpleRender } from '../../.jest/test-utils';
+import { InlineMessage } from './InlineMessage';
+
+describe('InlineMessage', () => {
+  it('renders correctly', () => {
+    expect(() => simpleRender(<InlineMessage type="error">Foo</InlineMessage>)).not.toThrow();
+  });
+});
diff --git a/src/molecules/InlineMessage.tsx b/src/molecules/InlineMessage.tsx
new file mode 100644
index 00000000..ebc564d9
--- /dev/null
+++ b/src/molecules/InlineMessage.tsx
@@ -0,0 +1,33 @@
+import type { FunctionComponent } from 'react';
+import type { DefaultTheme } from 'styled-components';
+import type { SpaceProps } from 'styled-system';
+
+import type { IconType } from '../atoms';
+import { Body, Flex, Icon } from '../atoms';
+
+export type InlineMessageType = keyof DefaultTheme['colors']['banner'];
+
+export interface InlineMessageProps extends SpaceProps {
+  type: InlineMessageType;
+}
+
+const icons: { [key in InlineMessageType]: IconType } = {
+  success: 'checkmark',
+  info: 'info',
+  action: 'waiting',
+  warning: 'info',
+  error: 'alert'
+};
+
+export const InlineMessage: FunctionComponent<InlineMessageProps> = ({
+  type,
+  children,
+  ...props
+}) => (
+  <Flex display="inline-flex" {...props}>
+    <Icon type={icons[type]} fill={`banner.${type}`} mr="1" />
+    <Body color={`banner.${type}`} as="span" verticalAlign="middle" {...props}>
+      {children}
+    </Body>
+  </Flex>
+);
diff --git a/src/theme.ts b/src/theme.ts
index 2883f95b..996e0866 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -125,6 +125,14 @@ export const theme = {
     tooltip: {
       background: 'white',
       border: COLORS.GREY_SECONDARY
+    },
+
+    banner: {
+      success: '#b4dd88',
+      info: '#b6c0c8',
+      action: '#a682ff',
+      warning: '#fa873f',
+      error: '#ef4747'
     }
   },
   fontSizes: ['0.625rem', '0.75rem', '1rem', '1.125rem', '1.25rem', '2.5rem'],
@@ -327,27 +335,27 @@ export const theme = {
     banner: {
       success: {
         background: '#f4faed',
-        color: '#b4dd88'
+        color: 'banner.success'
       },
       info: {
         background: '#f4f6f7',
-        color: '#b6c0c8'
+        color: 'banner.info'
       },
       action: {
         background: '#f2ecff',
-        color: '#a682ff'
+        color: 'banner.action'
       },
       warning: {
         background: '#feede2',
-        color: '#fa873f'
+        color: 'banner.warning'
       },
       error: {
         background: '#fde4e4',
-        color: '#ef4747'
+        color: 'banner.error'
       },
       clear: {
         background: 'none',
-        color: '#a682ff'
+        color: 'banner.action'
       }
     },
     panel: {