Merge pull request #175 from reapit/task/CLD-586-create-helper-component

[CLD-586] Create Helper component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "0.5.16",
+  "version": "0.5.17",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "main": "dist/index.js",
   "umd:main": "dist/elements.umd.production.js",

src/components/Helper/__tests__/__snapshots__/index.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Helper should default to variant info without close button 1`] = `
+<div
+  className="notification helper-wrap helper-info"
+/>
+`;
+
+exports[`Helper should match snapshot with button for variant info 1`] = `
+<div
+  className="notification helper-wrap helper-info"
+/>
+`;
+
+exports[`Helper should match snapshot with button for variant warning 1`] = `
+<div
+  className="notification helper-wrap helper-warning"
+/>
+`;
+
+exports[`Helper should match with/without closeButton 1`] = `
+<div
+  className="notification helper-wrap helper-info"
+>
+  <button
+    className="delete"
+  />
+</div>
+`;
+
+exports[`Helper should match with/without closeButton 2`] = `
+<div
+  className="notification helper-wrap helper-info"
+/>
+`;

src/components/Helper/__tests__/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { Helper, Variant } from '../index'
+
+const variants: Variant[] = ['info', 'warning']
+
+describe('Helper', () => {
+  it('should default to variant info without close button', () => {
+    expect(shallow(<Helper />)).toMatchSnapshot()
+  })
+  it('should match with/without closeButton', () => {
+    expect(shallow(<Helper closeButton={true} />)).toMatchSnapshot()
+    expect(shallow(<Helper closeButton={false} />)).toMatchSnapshot()
+  })
+  variants.forEach(variant => {
+    it('should match snapshot with button for variant ' + variant, () => {
+      expect(shallow(<Helper variant={variant} />)).toMatchSnapshot()
+    })
+  })
+})

src/components/Helper/helper.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Helper } from './index'
+
+storiesOf('Helper', module)
+  .add('Info', () => <Helper variant="info">Helper variant info</Helper>)
+  .add('Warning', () => <Helper variant="warning">Helper variant warning</Helper>)
+  .add('With close button', () => (
+    <Helper variant="info" closeButton={true} onCloseClick={() => console.log('clicked')}>
+      Helper with closeButton
+    </Helper>
+  ))

src/components/Helper/index.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+export type Variant = 'info' | 'warning'
+
+export interface HelperProps {
+  variant?: Variant
+  children?: React.ReactNode
+  closeButton?: boolean
+  onCloseClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+export const Helper: React.FC<HelperProps> = ({
+  variant = 'info',
+  children = '',
+  closeButton = false,
+  onCloseClick
+}) => {
+  const helperColor = variant === 'warning' ? 'helper-warning' : 'helper-info'
+  return (
+    <div className={`notification helper-wrap ${helperColor}`}>
+      {closeButton && <button className="delete" onClick={onCloseClick}></button>}
+      {children}
+    </div>
+  )
+}

src/index.tsx

@@ -39,6 +39,7 @@ export * from './components/HtmlRender'
 export * from './components/Form'
 export * from './components/ProgressBar'
 export * from './components/ToastMessage'
+export * from './components/Helper'
 
 // Utils
 export * from './utils/validators'

src/styles/components/helper.scss

@@ -0,0 +1,21 @@
+@import '../base/colors.scss';
+@import '../base/fonts.scss';
+
+.notification {
+  &.helper-wrap {
+    font-size: 1rem;
+    font-family: $family-sans-serif;
+    text-transform: lowercase;
+    margin-bottom: 1rem;
+  }
+
+  &.helper-info {
+    background-color: transparentize($reapit-mid-blue, 0.8);
+    color: $reapit-mid-blue;
+  }
+
+  &.helper-warning {
+    background-color: transparentize($reapit-red, 0.8);
+    color: $reapit-red;
+  }
+}

src/styles/index.scss

@@ -26,3 +26,4 @@
 @import './components/dynamic-link.scss';
 @import './components/pagination.scss';
 @import './components/input.scss';
+@import './components/helper.scss';