Merge branch 'develop' into master (#90)

* feat (FormikSelectInput): SelectInput formik adapter (#69)

* wip SelectInput Formik adapter

* not sure about this

* update formik story

* Update Formik.stories.jsx

* user defined onChange doesn't work with Formik without higher order function like FormikSelectInput

* fix tests

* Update FormikCheckboxInput.jsx

* custom onChange examples with formik

* comment

* match input error prop name to other components and display validation message

* with SelectInput, setFieldValue set to onChange 😢

* Update Formik.stories.jsx

* fix validation error example

* feat: simulate event for consistent api

* fix isMulti example

Co-authored-by: Juan Fabrega <[email protected]>

* feat: adding maxlength prop on TextINput

* chore: refactor checkbox input API and corresponding components

* docs (Button): document Button, FormLabel using mdx and organize stories into categories (#85)

* docs (Button): document using mdx format

* show a simple code sample in docs

* organize stories

* organize stories

* document FormLabel fixes #26

* convert InputValidationMessage stories to mdx

* test (SelectInput): add tests (#83)

* Begin adding tests to SelectInput.

* Finish adding tests.

* get onChange test to work

need to set our id prop to react-select's inputId prop to target the input

* Fix failing tests.

* Add onChange to each

* Fix failing tests.

* Remove react-select specific tests.

* Additional formatting and cleanup.

* Remove package.json update.

Co-authored-by: Jesse Carmine <[email protected]>
Co-authored-by: Nathan Young <[email protected]>

* add codecov (#86)

* feat: codecov WIP

* feat: codecov github action

* fix: remove bad yml key

* fix: let codecov search repo

* fix: adding codecov command to test

* codecov in test job

* typo in variable

* with step inside test job

* update codecov action

* change target coverage file

* testing under codecov threshold

* testing coverage threshold

* reverting test changes

* feat: make label required, add aria-labelledby attribute, add hideLabel option (#84)

* Begin adding tests to SelectInput.

* Finish adding tests.

* get onChange test to work

need to set our id prop to react-select's inputId prop to target the input

* Fix failing tests.

* feat: make label required, add aria-labelledby attribute, add hideLabel option

* update label prop description

Co-authored-by: Jesse Carmine <[email protected]>
Co-authored-by: juanfabrega <[email protected]>

* chore: bumping package version 0.1.7

Co-authored-by: juanfabrega <[email protected]>
Co-authored-by: Jesse Carmine <[email protected]>
Co-authored-by: Jesse Carmine <[email protected]>

.babelrc

@@ -4,6 +4,10 @@
       "presets": [
         ["@babel/preset-env", { "modules": "cjs" }],
         "@babel/preset-react"
+      ],
+      "plugins": [
+        "@babel/plugin-transform-regenerator",
+        "@babel/plugin-transform-runtime"
       ]
     },
     "build": {

.github/workflows/pull-request.yml

@@ -43,6 +43,15 @@ jobs:
       - name: unit test
         run: |
           yarn test
+      - name: Upload coverage to Codecov  
+        uses: codecov/[email protected]
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          file: ./coverage/clover.xml
+          flags: unittests
+          name: codecov-umbrella
+          yml: ./codecov.yml 
+          fail_ci_if_error: true
   visual-tests:
     name: visual regression tests
     runs-on: ubuntu-latest

.gitignore

@@ -9,6 +9,7 @@
 /coverage
 
 # production
+/coverage
 /dist
 /build
 /storybook-static

.storybook/main.js

@@ -21,15 +21,13 @@ const scssRules = {
 
 const fileLoaderRules = {
   test: /\.(png|jpe?g|gif)$/i,
-  use: [
-    {
-      loader: 'file-loader',
-    },
-  ],
+  use: [{
+    loader: 'file-loader',
+  }, ],
 };
 
 module.exports = {
-  stories: ['../src/**/*.stories.[tj]sx'],
+  stories: ['../src/**/*.stories.([tj]sx|mdx)'],
   addons: [
     '@storybook/addon-actions/register',
     '@storybook/addon-a11y/register',
@@ -40,7 +38,9 @@ module.exports = {
   webpackFinal: (config) => {
     config.module.rules.push(scssRules);
     config.module.rules.push(fileLoaderRules);
-    const assetRule = config.module.rules.find(({ test }) => test.test(".svg"));
+    const assetRule = config.module.rules.find(({
+      test
+    }) => test.test(".svg"));
 
     const assetLoader = {
       loader: assetRule.loader,

codecov.yml

@@ -0,0 +1,20 @@
+codecov:
+  require_ci_to_pass: yes
+
+coverage:
+  precision: 2
+  round: down
+  range: "80...100"
+
+parsers:
+  gcov:
+    branch_detection:
+      conditional: yes
+      loop: yes
+      method: no
+      macro: no
+
+comment:
+  layout: "reach,diff,flags,tree"
+  behavior: default
+  require_changes: no

jest.config.js

@@ -11,4 +11,6 @@ module.exports = {
       'identity-obj-proxy',
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
+  coverageDirectory: './coverage/',
+  collectCoverage: true,
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@palmetto/palmetto-components",
   "author": "@palmetto",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -45,6 +45,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
+    "@babel/plugin-transform-regenerator": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.4",
     "@babel/polyfill": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@rollup/plugin-babel": "^5.0.4",
@@ -68,6 +70,7 @@
     "chromatic": "^4.0.3",
     "classnames": "^2.2.6",
     "cleave.js": "^1.6.0",
+    "codecov": "^3.7.0",
     "css-loader": "^3.6.0",
     "eslint": "^7.3.1",
     "eslint-config-airbnb": "^18.2.0",
@@ -81,12 +84,14 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "mini-css-extract-plugin": "^0.9.0",
+    "mutationobserver-shim": "^0.3.7",
     "node-sass": "^4.14.1",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",
+    "react-select-event": "^4.1.4",
     "rollup": "^1.27.4",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-copy": "^3.3.0",

src/components/Button/Button.jsx

@@ -94,10 +94,7 @@ Button.propTypes = {
   /**
    * Contents of the button
    */
-  children: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.node,
-  ]).isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * Disables the button, making it inoperable
    */
@@ -107,7 +104,7 @@ Button.propTypes = {
    */
   isLoading: PropTypes.bool,
   /**
-   * Callback when button receives focus
+   * Allow the button to grow to its container's full width
    */
   fullWidth: PropTypes.bool,
   /**

src/components/Button/Button.stories.mdx

@@ -0,0 +1,113 @@
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+import { withA11y } from '@storybook/addon-a11y';
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+
+
+<Meta
+  title="Components/Button"
+  component={Button}
+  decorators={[withA11y]}
+/>
+
+# Button
+
+Buttons are used as triggers for actions.
+They are used in forms, toolbars, modal dialogs and as stand-alone action triggers.
+Actions almost always occur on the same page.
+
+<Preview isExpanded>
+  <Button onClick={() => alert('clicked')}>
+    Button
+  </Button>
+</Preview>
+
+## Props
+<Props of={Button} />
+
+## Appearance
+
+<Preview>
+  <Story name="Button">
+     <Button>
+      Button
+    </Button>
+  </Story>
+</Preview>
+
+## Full Width
+
+Use the `fullWidth` prop to allow the button to grow to its container's full width.
+
+<Preview>
+  <Story name="Full Width">
+    <Button fullWidth>
+      Full Width
+    </Button>
+  </Story>
+</Preview>
+
+## Loading
+
+Setting the `isLoading` prop to true will replace the button text with loading indicator and disable the button to prevent unintended submissions.
+The width of the button will remain consistent to prevent content from shifting.
+
+<Preview>
+  <Story name="Loading">
+    <>
+    <div style={{ marginBottom: '1rem' }}>
+        <Button isLoading>
+          Log  In
+        </Button>
+      </div>
+      <div style={{ marginBottom: '1rem' }}>
+        <Button isLoading>
+          Button with a really long name. Width will not decrease when loading indicator is rendered.
+        </Button>
+      </div>
+      <div style={{ marginBottom: '1rem' }}>
+        <Button fullWidth isLoading>
+          Full Width Loading Button
+        </Button>
+      </div>
+    </>
+  </Story>
+</Preview>
+
+## Disabled
+
+Use for actions that aren’t currently available, such as immediately after a form submission.
+The interface should make it clear why the button is disabled and what needs to be done to enable it.
+
+<Preview>
+  <Story name="Disabled">
+    <>
+    <div style={{ marginBottom: '1rem' }}>
+      <Button isDisabled>
+        Disabled Button
+      </Button>
+    </div>
+    <div style={{ marginBottom: '1rem' }}>
+      <Button fullWidth isDisabled>
+        Disabled Full Width Button
+      </Button>
+    </div>
+    </>
+  </Story>
+</Preview>
+
+## Event Callbacks
+
+Callback functions can be passed to `onClick`, `onBlur`, and `onFocus` events.
+
+<Preview>
+  <Story name="Event Callbacks">
+    <Button
+      onBlur={action('blur')}
+      onClick={action('click')}
+      onFocus={action('focus')}
+    >
+      click, focus, blur events
+    </Button>
+  </Story>
+</Preview>