Merge pull request #522 from contentful/feat/note-with-close-button

feat(note): close button
contentful · Aug 21, 2020 · e8b705f · e8b705f
2 parents 917017e + 9e052c7
commit e8b705f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/packages/forma-36-react-components/src/components/Note/Note.css b/packages/forma-36-react-components/src/components/Note/Note.css
@@ -20,6 +20,7 @@
   background-color: var(--color-blue-lightest);
   border: 1px solid var(--color-blue-light);
 }
+
 .Note--primary a {
   color: var(--color-blue-dark);
 }
@@ -28,6 +29,7 @@
   background-color: var(--color-red-lightest);
   border: 1px solid var(--color-red-light);
 }
+
 .Note--negative a {
   color: var(--color-red-dark);
 }
@@ -36,6 +38,7 @@
   background-color: var(--color-green-lightest);
   border: 1px solid var(--color-green-light);
 }
+
 .Note--positive a {
   color: var(--color-green-dark);
 }
@@ -49,12 +52,30 @@
   color: var(--color-orange-dark);
 }
 
+.Note--hasCloseButton {
+  padding-right: var(--spacing-s);
+}
+
 .Note__title {
   font-weight: var(--font-weight-demi-bold);
 }
 
+.Note--hasCloseButton .Note__info {
+  margin-right: var(--spacing-s);
+}
+
 .Note__icon {
   margin-right: var(--spacing-s);
   display: flex;
   margin-top: 1px;
 }
+
+.Note__dismiss {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  margin: 0 0 auto auto;
+  pointer-events: all;
+  display: flex;
+}
diff --git a/packages/forma-36-react-components/src/components/Note/Note.stories.tsx b/packages/forma-36-react-components/src/components/Note/Note.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { text, select } from '@storybook/addon-knobs';
+import { boolean, select, text } from '@storybook/addon-knobs';
 
 import notes from './Note.md';
 import Note from './Note';
@@ -19,6 +19,7 @@ storiesOf('Components|Note', module)
           Note.defaultProps.noteType,
         )}
         title={text('title', '')}
+        hasCloseButton={boolean('hasCloseButton', false)}
       >
         {text(
           'children',

diff --git a/packages/forma-36-react-components/src/components/Note/Note.tsx b/packages/forma-36-react-components/src/components/Note/Note.tsx
@@ -4,6 +4,7 @@ import Icon, { IconType } from '../Icon';
 import { iconName } from '../Icon/constants';
 
 import styles from './Note.css';
+import IconButton from '../IconButton';
 
 const Icons = {
   primary: iconName.InfoCircle,
@@ -19,6 +20,8 @@ export type NoteProps = {
   style?: CSSProperties;
   testId?: string;
   children: React.ReactNode;
+  hasCloseButton?: boolean;
+  onClose?: Function;
 } & typeof defaultProps;
 
 const defaultProps = {
@@ -45,6 +48,7 @@ export class Note extends Component<NoteProps> {
           [styles['Note--positive']]: this.props.noteType === 'positive',
           [styles['Note--negative']]: this.props.noteType === 'negative',
           [styles['Note--warning']]: this.props.noteType === 'warning',
+          [styles['Note--hasCloseButton']]: this.props.hasCloseButton,
         })}
         data-test-id={this.props.testId}
       >
@@ -57,6 +61,20 @@ export class Note extends Component<NoteProps> {
           )}
           <div>{this.props.children}</div>
         </div>
+        {this.props.hasCloseButton && (
+          <IconButton
+            buttonType="secondary"
+            iconProps={{ icon: 'Close' }}
+            onClick={() => {
+              if (this.props.onClose) {
+                this.props.onClose();
+              }
+            }}
+            testId="cf-ui-note-close"
+            label="Dismiss"
+            className={styles.Note__dismiss}
+          />
+        )}
       </div>
     );
   }