Merge pull request #292 from digipolisantwerp/feature/react-18

Feature/react 18

Author: TriangleJuice

CHANGELOG.md

@@ -6,6 +6,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## v6.4.0 - 2022-xx-xx
+
+### Added
+- Added support for React 18
+- `Form` - Added placeholder option for datepicker
+- `Form` - Added description option for select
+- `Form` - Added error description option for select
+- `Form` - Added error description option for datepicker
+
+### Fixed
+- Made sure no extra space is created when flyout is closed
+
+
 ## v6.3.1 - 2022-01-24
 
 ### Fixed

package-lock.json

@@ -69,9 +69,9 @@
   "dependencies": {
     "@a-ui/core": "^5.0.0",
     "classnames": "~2.2.6",
-    "moment": "^2.29.1",
+    "moment": "^2.29.3",
     "react-input-mask": "^2.0.4",
-    "react-modal": "~3.5.1",
+    "react-modal": "~3.15.0",
     "rxjs": "^6.6.2"
   }
 }

package.json

@@ -4,6 +4,6 @@ import Button from '../button/src/Button';
 <Flyout trigger={
   <Button type="primary">Click me!</Button>
   } hasPadding>
-  this is the flyout
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu mauris arcu. In ut nulla metus. Cras ut commodo nunc. Nullam augue massa, semper eget pharetra quis, lacinia sit amet metus. Proin magna felis, dictum sed arcu non, maximus tempor massa. Sed id sem sed nisl fringilla volutpat sed eu elit. Donec nec mauris eu sem euismod porttitor eget et dui.
 </Flyout>
 ```

packages/flyout/Readme.md

@@ -1,8 +1,7 @@
-
-
 import resolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
 import pkg from './package.json';
+import sass from 'rollup-plugin-sass';
 
 export default {
 	input: 'src/index.js',
@@ -12,6 +11,7 @@ export default {
 	],
 	plugins: [
 		resolve(),
+    sass({ insert: true }),
 		babel({
       babelHelpers: 'bundled',
 			exclude: ['node_modules/**'],

packages/flyout/rollup.config.js

@@ -4,6 +4,8 @@ import ReactDOM from 'react-dom';
 
 import FlyoutContent from '../../flyout-button/src/FlyoutContent/FlyoutContent';
 
+import './Flyout.scss';
+
 const flyoutSizes = {
   small: 'sm',
   medium: 'md',

packages/flyout/src/Flyout.js

@@ -0,0 +1,10 @@
+@import '~@a-ui/core/src/styles/_quarks';
+
+.m-flyout .m-flyout__content {
+  max-height: 0;
+  transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out, transform .2s ease-in-out, max-height .2s ease-in-out;
+}
+
+.m-flyout.is-open .m-flyout__content {
+  max-height: 1000000px;
+}

packages/flyout/src/Flyout.scss

@@ -323,6 +323,7 @@ const optionsDistrict = [
 <div>
   <Select label="District"
     id={"select-1"}
+    description={"A brief description about districts"}
     label={"Districts"}
     name={"select-name"}
     value={"2030 Antwerpen"}
@@ -561,6 +562,7 @@ const Datepicker = require('./src').Datepicker;
     name={"datepicker-name"}
     label={"Datepicker with input mask"}
     format={"DD/MM/YYYY"}
+    placeholder={"dd/mm/yyyy"}
     mask={"99/99/9999"}
     required={true}
     onChange={(date, isValid) => console.log('date is ' + date + ', and is valid ' + isValid)}

packages/form/Readme.md

@@ -44,6 +44,8 @@ type
   disabled?: boolean,
   /** If it should be free text input or click only */
   readOnly?: boolean,
+  /** Set a placeholder. */
+  placeholder?: string,
   /** enable/disable the days during the weekend. */
   noWeekends?: boolean,
   /** Every date less than this date will be disabled. */
@@ -52,6 +54,8 @@ type
   state?: InputStates,
   /** Description to be shown under input. */
   description?: string,
+  /** Error description to be shown under input. */
+  errorDescription?: string,
   /** Every date greater than this date will be disabled. */
   maxDate?: string,
   /** Event for when the date changes. */
@@ -187,10 +191,12 @@ class Datepicker extends Component<Props> {
       id,
       state,
       description,
+      errorDescription,
       mask,
       required,
       disabled,
       readOnly,
+      placeholder,
       name,
       format,
       locale = 'nl',
@@ -235,6 +241,7 @@ class Datepicker extends Component<Props> {
           name={name}
           id={id || this.defaultId}
           value={input}
+          placeholder={placeholder}
           required={required}
           readOnly={readOnly}
           disabled={disabled}
@@ -260,6 +267,7 @@ class Datepicker extends Component<Props> {
         }
       </div>
       {description && <small>{description}</small>}
+      {errorDescription && <small className="u-text-danger">{errorDescription}</small>}
     </div>
     ;
   }

packages/form/src/Datepicker/Datepicker.js

@@ -31,6 +31,8 @@ type Props = {
   required?: boolean,
   loading?: boolean,
   placeholder?: string,
+  description?: string,
+  errorDescription?: string,
   options?: Array<SelectOption>,
   onChange?: (e: object) => void,
   value?: string,
@@ -51,6 +53,8 @@ class Select extends Component<Props> {
       id,
       label,
       name,
+      description,
+      errorDescription,
       inline,
       className,
       state,
@@ -103,6 +107,8 @@ class Select extends Component<Props> {
               </Option>
             ))}
           </select>
+          {description ? <small>{description}</small> : null}
+          {errorDescription && <small className="u-text-danger">{errorDescription}</small>}
           {loading ? <Spinner size="small" className="ai" /> : <Icon name="ai-arrow-down-1" />}
         </div>
       </div>