Add NoteCard component

src/index.ts

@@ -8,3 +8,6 @@ export { default as Checkbox } from './atoms/checkbox';
 export { default as Icon } from './atoms/icon';
 export { default as Spinner } from './atoms/spinner';
 export { default as Tag } from './atoms/tag';
+
+// Molecules
+export { default as NoteCard } from './molecules/note-card';

src/molecules/note-card/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { NoteColor } from './types';
+import * as Styles from './styles';
+
+interface NoteCardProps {
+  color?: NoteColor;
+  value: any;
+  buttonValue?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+const NoteCard = (props: NoteCardProps) => {
+  const { color = 'info', value = '', buttonValue = '', onClick } = props;
+
+  return (
+    <Styles.Wrapper color={color} buttonValue={buttonValue}>
+      <div>
+        <p>{value}</p>
+      </div>
+      {buttonValue && onClick && (
+        <div>
+          <button onClick={onClick}>{buttonValue}</button>
+        </div>
+      )}
+    </Styles.Wrapper>
+  );
+};
+
+export default NoteCard;

src/molecules/note-card/styles.tsx

@@ -0,0 +1,92 @@
+import styled, { css } from 'styled-components';
+import { NoteColor } from './types';
+import { rem, lighten, darken } from 'polished';
+import { device } from '../../ions/breakpoints';
+
+interface NoteCardProps {
+  color?: NoteColor;
+  buttonValue?: string;
+}
+
+export const Wrapper = styled.div<NoteCardProps>`
+  --default: hsl(0, 0%, 48%);
+  --light: ${lighten(0.4, 'hsl(0, 0%, 48%)')};
+  --dark: ${darken(0.1, 'hsl(0, 0%, 48%)')};
+
+  ${(props) =>
+    props.color === 'info' &&
+    css`
+      --default: hsl(0, 0%, 48%);
+      --light: ${lighten(0.4, 'hsl(0, 0%, 48%)')};
+      --dark: ${darken(0.1, 'hsl(0, 0%, 48%)')};
+    `}
+
+  ${(props) =>
+    props.color === 'primary' &&
+    css`
+      --default: hsl(186, 62%, 59%);
+      --light: ${lighten(0.3, 'hsl(186, 62%, 59%)')};
+      --dark: ${darken(0.15, 'hsl(186, 62%, 59%)')};
+    `}
+
+  ${(props) =>
+    props.color === 'danger' &&
+    css`
+      --default: hsl(354, 83%, 64%);
+      --light: ${lighten(0.25, 'hsl(354, 83%, 64%)')};
+      --dark: ${darken(0.19, 'hsl(354, 83%, 64%)')};
+    `}
+
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--default);
+  border-radius: 6px;
+  background-color: var(--light);
+  padding: ${rem('15px')};
+
+  div {
+    &:first-child {
+      flex: 1;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  ${(props) =>
+    props.buttonValue &&
+    css`
+      button {
+        margin: ${rem('30px')} 0 0 0;
+        border: 0;
+        border-radius: ${rem('6px')};
+        background-color: var(--default);
+        height: ${rem('36px')};
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: ${rem('20px')};
+        font-size: 0.75rem;
+        font-weight: bold;
+        text-transform: uppercase;
+        color: hsl(0, 0%, 100%);
+        white-space: nowrap;
+        transition-duration: 0.3s;
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--dark);
+        }
+      }
+
+      @media ${device.s} {
+        display: flex;
+        align-items: center;
+
+        button {
+          margin: 0 0 0 ${rem('30px')};
+        }
+      }
+    `}
+`;

src/molecules/note-card/types.ts

@@ -0,0 +1 @@
+export type NoteColor = 'info' | 'primary' | 'danger';

stories/molecules/note-card.stories.tsx

@@ -4,15 +4,30 @@ import { NoteCard } from '../../src';
 export default {
   title: 'Design System/Molecules/Note Card',
   component: NoteCard,
-  // argTypes: {
-  //   value: "sadasd",
-  // },
+  argTypes: {
+    color: {
+      control: {
+        type: 'select',
+        options: ['info', 'primary', 'danger'],
+      },
+    },
+    onClick: { action: 'clicked' },
+  },
 };
 
-export const NoteCardComponent = (args) => <NoteCard {...args} />;
+export const NoteCardText = (args) => <NoteCard {...args} />;
 
-NoteCardComponent.storyName = 'Note Card';
+NoteCardText.storyName = 'Text Only';
+NoteCardText.args = {
+  color: 'info',
+  value:
+    'Adaptogen humblebrag letterpress, plaid franzen authentic four loko street art vice succulents health goth art party offal 3 wolf moon. Synth lyft hoodie mustache blog narwhal small batch hot chicken enamel pin venmo vaporware subway tile health goth.',
+};
+
+export const NoteCardAction = NoteCardText.bind({});
 
-NoteCardComponent.args = {
-  value: 'Dummie',
+NoteCardAction.storyName = 'With Action';
+NoteCardAction.args = {
+  ...NoteCardText.args,
+  buttonValue: 'Awesome Button',
 };