{this.props.children}
diff --git a/src/components/UValidatorComponent/UValidatorComponent.md b/src/components/UValidatorComponent/UValidatorComponent.md
index ff638c33e..9b36e5382 100644
--- a/src/components/UValidatorComponent/UValidatorComponent.md
+++ b/src/components/UValidatorComponent/UValidatorComponent.md
@@ -61,26 +61,31 @@ export default function CheckBoxValidator() {
```jsx
import React, { useState, useEffect, useRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Button, Box, Checkbox, MenuItem, Radio, FormGroup, FormControl, FormLabel, FormControlLabel, RadioGroup, FormHelperText } from '@material-ui/core';
-import UValidatorForm from '../UValidatorForm'
+import { styled } from '@mui/material/styles';
+import { Button, Box, Checkbox, MenuItem, Radio, FormGroup, FormControl, FormLabel, FormControlLabel, RadioGroup, FormHelperText } from '@mui/material';
+import UValidatorForm from '../UValidatorForm';
+
+const PREFIX = 'UValidator';
+
+const classes = {
+ formControl: `${PREFIX}-formControl`,
+ menu: `${PREFIX}-menu`,
+}
-const useStyles = makeStyles(theme => ({
- formControl: {
+const StyledBox = styled(Box)(({ theme }) => ({
+ [`& .${classes.formControl}`]: {
margin: theme.spacing(3),
},
- margin: {
+ [`& .${classes.menu}`]: {
marginTop: theme.spacing(1),
marginLeft: theme.spacing(1),
},
-}));
+}))
// export default function CheckBoxValidator() {
const form = useRef('form');
- const classes = useStyles();
-
const [values, setValues] = useState(
{
react: false,
@@ -113,6 +118,7 @@ const useStyles = makeStyles(theme => ({
// debounceTime={1000}
instantValidate={true}
>
+
({
-
+
+
// )
// }
```
@@ -179,26 +186,31 @@ const useStyles = makeStyles(theme => ({
``` jsx
import React, { useState, useEffect, useRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Button, Box, Checkbox, MenuItem, Radio, FormGroup, FormControl, FormLabel, FormControlLabel, RadioGroup, FormHelperText } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+import { Button, Box, Checkbox, MenuItem, Radio, FormGroup, FormControl, FormLabel, FormControlLabel, RadioGroup, FormHelperText } from '@mui/material';
import UValidatorForm from '../UValidatorForm'
-const useStyles = makeStyles(theme => ({
- formControl: {
+const PREFIX = 'UValidator'
+
+const classes = {
+ formControl: `${PREFIX}-formControl`,
+ menu: `${PREFIX}-menu`,
+}
+
+const StyledBox = styled(Box)(({ theme }) => ({
+ [`& .${classes.formControl}`]: {
margin: theme.spacing(3),
},
- margin: {
+ [`& .${classes.menu}`]: {
marginTop: theme.spacing(1),
marginLeft: theme.spacing(1),
},
-}));
+}))
// export default function ChoiceButtonValidator() {
const form = useRef('form');
- const classes = useStyles();
-
const [value, setValue] = React.useState(null);
function handleChange(event) {
@@ -225,38 +237,40 @@ const useStyles = makeStyles(theme => ({
// debounceTime={1000}
instantValidate={true}
>
-
-
- Gender
-
- }
- label="Windows"
- labelPlacement="end"
- />
- }
- label="Mac"
- labelPlacement="end"
- />
- }
- label="Other"
- labelPlacement="end"
- />
-
-
-
-
+
+
+
+ Gender
+
+ }
+ label="Windows"
+ labelPlacement="end"
+ />
+ }
+ label="Mac"
+ labelPlacement="end"
+ />
+ }
+ label="Other"
+ labelPlacement="end"
+ />
+
+
+
+
+
// )
// }
diff --git a/src/components/UValidatorForm/UValidatorForm.js b/src/components/UValidatorForm/UValidatorForm.js
index 2950584c8..d54076db1 100644
--- a/src/components/UValidatorForm/UValidatorForm.js
+++ b/src/components/UValidatorForm/UValidatorForm.js
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useEffect } from 'react'
import { ValidatorForm } from 'react-form-validator-core'
import PropTypes from 'prop-types'
import {
@@ -18,55 +18,70 @@ import {
*/
function ForwardRefForm(props, ref) {
- UValidatorForm.addValidationRule = (name, callback) => {
- ValidatorForm.addValidationRule(name, callback)
- }
- UValidatorForm.removeValidationRule = name => {
- ValidatorForm.removeValidationRule(name)
- }
+ useEffect(() => {
+ ValidatorForm.addValidationRule('isUrl', value => {
+ return isUrlText(value)
+ })
- ValidatorForm.addValidationRule('isUrl', value => {
- return isUrlText(value)
- })
+ ValidatorForm.addValidationRule('isLatitude', value => {
+ if (value > 90 || value < -90) {
+ return false
+ }
+ return true
+ })
- ValidatorForm.addValidationRule('isLatitude', value => {
- if (value > 90 || value < -90) {
- return false
- }
- return true
- })
- ValidatorForm.addValidationRule('isLongitude', value => {
- if (value > 180 || value < -180) {
- return false
- }
- return true
- })
+ ValidatorForm.addValidationRule('isLongitude', value => {
+ if (value > 180 || value < -180) {
+ return false
+ }
+ return true
+ })
- ValidatorForm.addValidationRule('isPhone', value => {
- return isPhoneNumberText(value)
- })
+ ValidatorForm.addValidationRule('isPhone', value => {
+ return isPhoneNumberText(value)
+ })
- ValidatorForm.addValidationRule('isSafeText', value => {
- return isSafeText(value)
- })
+ ValidatorForm.addValidationRule('isSafeText', value => {
+ return isSafeText(value)
+ })
- ValidatorForm.addValidationRule('isAlphanumeric', value => {
- return isAlphanumericText(value)
- })
+ ValidatorForm.addValidationRule('isAlphanumeric', value => {
+ return isAlphanumericText(value)
+ })
- ValidatorForm.addValidationRule(
- 'matchRegexpCaseInSensitive',
- (value, regexStr) => {
- return isRegexCaseInSensitive(value, regexStr)
+ ValidatorForm.addValidationRule(
+ 'matchRegexpCaseInSensitive',
+ (value, regexStr) => {
+ return isRegexCaseInSensitive(value, regexStr)
+ }
+ )
+
+ // Cleanup function to remove validation rules when unmounted
+ return () => {
+ ValidatorForm.removeValidationRule('isUrl')
+ ValidatorForm.removeValidationRule('isLatitude')
+ ValidatorForm.removeValidationRule('isLongitude')
+ ValidatorForm.removeValidationRule('isPhone')
+ ValidatorForm.removeValidationRule('isSafeText')
+ ValidatorForm.removeValidationRule('isAlphanumeric')
+ ValidatorForm.removeValidationRule('matchRegexpCaseInSensitive')
}
- )
+ }, [])
return
}
/* Forward the ref */
-const UValidatorForm = React.forwardRef(ForwardRefForm)
+const UValidatorForm = forwardRef(ForwardRefForm)
+
+UValidatorForm.addValidationRule = (name, callback) => {
+ ValidatorForm.addValidationRule(name, callback)
+}
+
+UValidatorForm.removeValidationRule = name => {
+ ValidatorForm.removeValidationRule(name)
+}
UValidatorForm.propTypes = {
/** Callback for form that fires when all validations are passed */
@@ -77,10 +92,13 @@ UValidatorForm.propTypes = {
onError: PropTypes.func,
/** Debounce time for validation i.e.your validation will run after debounceTime ms when you stop changing your input. */
debounceTime: PropTypes.number,
+ /** To prevent the browser's default validation or not */
+ noValidate: PropTypes.bool,
}
UValidatorForm.defaultProps = {
instantValidate: true,
+ noValidate: true,
debounceTime: 0,
onSubmit: () => {},
}
diff --git a/src/components/UValidatorForm/UValidatorForm.md b/src/components/UValidatorForm/UValidatorForm.md
index cc58aee5b..0328bda11 100644
--- a/src/components/UValidatorForm/UValidatorForm.md
+++ b/src/components/UValidatorForm/UValidatorForm.md
@@ -1,32 +1,35 @@
```jsx
import React, { useState, useEffect, useRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Button, Box, MenuItem } from '@material-ui/core';
+import { Button, Box, MenuItem } from '@mui/material';
+import { styled } from '@mui/material/styles';
import UTextField from '../UTextField';
-
-const useStyles = makeStyles(theme => ({
- container: {
- display: 'flex',
- flexWrap: 'wrap',
- },
- textField: {
+const PREFIX = 'UValidatorForm'
+const classes = {
+ textField: `${PREFIX}-textField`,
+ formControl: `${PREFIX}-formControl`,
+ dense: `${PREFIX}-dense`,
+ margin: `${PREFIX}-margin`,
+ menu: `${PREFIX}-menu`,
+ font: `${PREFIX}-font`,
+}
+const StyledBox = styled(Box)(({ theme }) => ({
+ [`& .${classes.textField}`]: {
margin: theme.spacing(1),
minWidth: 195,
},
- formControl: {
+ [`& .${classes.formControl}`]: {
margin: theme.spacing(3),
},
- dense: {
+ [`& .${classes.dense}`]: {
marginTop: theme.spacing(2),
},
- margin: {
- marginTop: theme.spacing(1),
+ [`& .${classes.margin}`]: {
marginLeft: theme.spacing(1),
},
- menu: {
+ [`& .${classes.menu}`]: {
minWidth: 191,
},
-}));
+}))
const currencies = [
{
@@ -55,13 +58,11 @@ const currencies = [
const form = useRef('form');
- const classes = useStyles();
-
const [values, setValues] = useState(
{
email: '',
password: '',
- currecy: '',
+ currency: '',
}
);
@@ -90,7 +91,7 @@ const currencies = [
debounceTime={1000}
// instantValidate={true}
>
-
+
-
+
// )
// }
diff --git a/src/components/ValidatorComponent/ValidatorComponent.js b/src/components/ValidatorComponent/ValidatorComponent.js
index 4f74759a7..79d35fc65 100644
--- a/src/components/ValidatorComponent/ValidatorComponent.js
+++ b/src/components/ValidatorComponent/ValidatorComponent.js
@@ -1,72 +1,12 @@
/* eslint-disable */
import React from 'react'
import PropTypes from 'prop-types'
-import Promise from 'promise-polyfill'
-/* eslint-enable */
-import { polyfill } from 'react-lifecycles-compat'
-import { ValidatorForm } from 'react-form-validator-core'
-import { debounce } from '../../utils'
-
-/**
- * ValidatorComponent
- * Using component locally in order to override the error messages
- * TODO - write the code to newer version
- */
-export default class ValidatorComponent extends React.Component {
- static getDerivedStateFromProps(nextProps, prevState) {
- if (
- nextProps.validators &&
- nextProps.customErrorMessages &&
- nextProps.withRequiredValidator &&
- (prevState.validators !== nextProps.validators ||
- prevState.customErrorMessages !== nextProps.customErrorMessages)
- ) {
- return {
- value: nextProps.value,
- validators: nextProps.validators,
- customErrorMessages: nextProps.customErrorMessages,
- withRequiredValidator: nextProps.withRequiredValidator,
- }
- }
-
- return {
- value: nextProps.value,
- }
- }
-
- state = {
- isValid: true,
- value: this.props.value,
- customErrorMessages: this.props.customErrorMessages,
- validators:
- this.props.validators !== undefined ? this.props.validators : [],
- withRequiredValidator:
- this.props.withRequiredValidator !== undefined
- ? this.props.withRequiredValidator
- : true,
- }
-
- componentDidMount() {
- this.configure()
- }
-
- shouldComponentUpdate(nextProps, nextState) {
- return this.state !== nextState || this.props !== nextProps
- }
-
- componentDidUpdate(prevProps, prevState) {
- if (this.instantValidate && this.props.value !== prevState.value) {
- this.validateDebounced(this.props.value, this.state.withRequiredValidator)
- }
- }
-
- componentWillUnmount() {
- this.context.form.detachFromForm(this)
- this.validateDebounced.cancel()
- }
+import { ValidatorComponent } from 'react-form-validator-core'
+class ValidatorComponentNew extends ValidatorComponent {
getErrorMessage = () => {
- const { validators, customErrorMessages } = this.state
+ const { validators } = this.state
+ const { customErrorMessages } = this.props
const type = typeof validators
if (type === 'string') {
return customErrorMessages
@@ -88,57 +28,9 @@ export default class ValidatorComponent extends React.Component {
console.log('unknown errorMessages type', validators)
return true
}
-
- instantValidate = true
- invalid = []
-
- configure = () => {
- this.context.form.attachToForm(this)
- this.instantValidate = this.context.form.instantValidate
- this.debounceTime = this.context.form.debounceTime
- this.validateDebounced = debounce(this.validate, this.debounceTime)
- }
-
- validate = (value, includeRequired = false, dryRun = false) => {
- const validations = Promise.all(
- this.state.validators.map(validator =>
- ValidatorForm.getValidator(validator, value, includeRequired)
- )
- )
-
- validations.then(results => {
- this.invalid = []
- let valid = true
- results.forEach((result, key) => {
- if (!result) {
- valid = false
- this.invalid.push(key)
- }
- })
- if (!dryRun) {
- this.setState({ isValid: valid }, () => {
- this.props.validatorListener(this.state.isValid)
- })
- }
- })
- }
-
- isValid = () => this.state.isValid
-
- makeInvalid = () => {
- this.setState({ isValid: false })
- }
-
- makeValid = () => {
- this.setState({ isValid: true })
- }
-}
-
-ValidatorComponent.contextTypes = {
- form: PropTypes.object,
}
-ValidatorComponent.propTypes = {
+ValidatorComponentNew.propTypes = {
/** Custom error messages to override default error messages */
customErrorMessages: PropTypes.oneOfType([
PropTypes.object,
@@ -151,16 +43,17 @@ ValidatorComponent.propTypes = {
validatorListener: PropTypes.func,
/** Allow to use required validator in any validation trigger, not only form submit. */
withRequiredValidator: PropTypes.bool,
+ containerProps: PropTypes.object,
}
-ValidatorComponent.defaultProps = {
+ValidatorComponentNew.defaultProps = {
customErrorMessages: 'error',
validators: [],
validatorListener: () => {},
withRequiredValidator: true,
}
-polyfill(ValidatorComponent)
+export default ValidatorComponentNew
// default error messages to return
const defaultErrorMessages = {
diff --git a/src/index.js b/src/index.js
index 5dee40d51..af0f543bb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,11 +13,16 @@ import USelectPicker from './components/USelectPicker'
import UPeoplePicker from './components/UPeoplePicker'
import UIconPicker from './components/UIconPicker'
import UDatePicker from './components/UDatePicker'
+import UDesktopDatePicker from './components/UDesktopDatePicker'
+import UMobileDatePicker from './components/UMobileDatePicker'
+
import UTimePicker from './components/UTimePicker'
-import UKeyboardDatePicker from './components/UKeyboardDatePicker'
-import UKeyboardTimePicker from './components/UKeyboardTimePicker'
+import UDesktopTimePicker from './components/UDesktopTimePicker'
+import UMobileTimePicker from './components/UMobileTimePicker'
+
import UDateTimePicker from './components/UDateTimePicker'
-import UKeyboardDateTimePicker from './components/UKeyboardDateTimePicker'
+import UDesktopDateTimePicker from './components/UDesktopDateTimePicker'
+import UMobileDateTimePicker from './components/UMobileDateTimePicker'
import UTextField from './components/UTextField'
import UValidatorComponent from './components/UValidatorComponent'
import UValidatorForm from './components/UValidatorForm'
@@ -40,12 +45,18 @@ import UGraphPeoplePicker from './components/UGraphPeoplePicker'
import ActiveFormCoordinateField from './components/ActiveFormCoordinateField'
import UCoordinateField from './components/UCoordinateField'
import USearchBox from './components/USearchBox'
-import ActiveKeyboardDatePicker from './components/ActiveKeyboardDatePicker'
import ActiveDatePicker from './components/ActiveDatePicker'
import ActiveTimePicker from './components/ActiveTimePicker'
-import ActiveKeyboardTimePicker from './components/ActiveKeyboardTimePicker'
+import ActiveDateTimePicker from './components/ActiveDateTimePicker'
+import ActiveDesktopDatePicker from './components/ActiveDesktopDatePicker'
+import ActiveDesktopDateTimePicker from './components/ActiveDesktopDateTimePicker'
+import ActiveDesktopTimePicker from './components/ActiveDesktopTimePicker'
+import ActiveMobileTimePicker from './components/ActiveMobileTimePicker'
+import ActiveMobileDatePicker from './components/ActiveMobileDatePicker'
+import ActiveMobileDateTimePicker from './components/ActiveMobileDateTimePicker'
import ActiveAutoComplete from './components/ActiveAutoComplete'
-import ActiveKeyboardDateTimePicker from './components/ActiveKeyboardDateTimePicker'
+import UAriaLive from './components/UAriaLive'
+import UAriaHiddenText from './components/UAriaHiddenText'
export {
theme,
@@ -65,11 +76,14 @@ export {
UPeoplePicker,
UIconPicker,
UDatePicker,
+ UMobileDatePicker,
+ UDesktopDatePicker,
UTimePicker,
- UKeyboardDatePicker,
- UKeyboardTimePicker,
+ UDesktopTimePicker,
+ UMobileTimePicker,
UDateTimePicker,
- UKeyboardDateTimePicker,
+ UDesktopDateTimePicker,
+ UMobileDateTimePicker,
UTextField,
UValidatorForm,
UValidatorComponent,
@@ -90,10 +104,16 @@ export {
ActiveFormCoordinateField,
UCoordinateField,
USearchBox,
- ActiveKeyboardDatePicker,
ActiveDatePicker,
ActiveTimePicker,
- ActiveKeyboardTimePicker,
+ ActiveDateTimePicker,
+ ActiveDesktopDatePicker,
+ ActiveDesktopDateTimePicker,
+ ActiveDesktopTimePicker,
+ ActiveMobileTimePicker,
+ ActiveMobileDatePicker,
+ ActiveMobileDateTimePicker,
ActiveAutoComplete,
- ActiveKeyboardDateTimePicker
+ UAriaLive,
+ UAriaHiddenText,
}
diff --git a/src/theme/theme.js b/src/theme/theme.js
index d0a275b2c..1a3ef9815 100644
--- a/src/theme/theme.js
+++ b/src/theme/theme.js
@@ -1,4 +1,4 @@
-import { createMuiTheme } from '@material-ui/core/styles'
+import { createTheme } from '@mui/material/styles'
const unicef = {
blue: '#1CABE2',
@@ -12,9 +12,7 @@ const unicef = {
darkGreen: '#00833D',
}
-const zIndexDrawer = 1200
-
-const theme = createMuiTheme({
+const theme = createTheme({
typography: {
useNextVariants: true,
fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(','),
@@ -31,44 +29,50 @@ const theme = createMuiTheme({
main: unicef.red,
},
unicef: unicef,
- unicefBlue: '#1CABE2',
+ unicefBlue: unicef.blue,
},
- unicefBlue: '#1CABE2',
+ unicefBlue: unicef.blue,
mixins: {
toolbar: {},
},
shape: {
borderRadius: 4,
},
- zIndex: {
- drawer: zIndexDrawer,
- },
- // customize with mui classes
- overrides: {
- MuiAppBar: {
- root: {
- zIndex: zIndexDrawer + 1,
+ components: {
+ // Name of the component
+ MuiButtonBase: {
+ defaultProps: {
+ // The props to change the default for.
+ disableRipple: true, // No more ripple, on the whole application 💣!
},
},
- MuiInputBase: {
- root: {
- backgroundColor: 'white',
+ MuiDrawer: {
+ styleOverrides: {
+ paper: {
+ minWidth: 256,
+ },
},
},
- MuiDrawer: {
- paper: {
- minWidth: 256,
+ MuiInputBase: {
+ styleOverrides: {
+ root: {
+ backgroundColor: 'white',
+ },
},
- paperAnchorDockedLeft: {
- borderRight: 'none',
+ },
+ MuiTab: {
+ styleOverrides: {
+ root: {
+ minWidth: 160,
+ },
},
},
- },
- props: {
- // Name of the component
- MuiButtonBase: {
- // The default props to change
- disableRipple: true, // No more ripple
+ MuiAppBar: {
+ styleOverrides: {
+ root: {
+ zIndex: 1200,
+ },
+ },
},
},
})
diff --git a/src/theme/theme.md b/src/theme/theme.md
index b1e734b01..75f48617c 100644
--- a/src/theme/theme.md
+++ b/src/theme/theme.md
@@ -1,16 +1,16 @@
### Adding UNICEF theme to your app
This is customized version of theme for whole application.
-To use UNICEF theme add `MuiThemeProvider` at the top level of your app, it will set the custom styles of unicef down to the component tree.
+To use UNICEF theme add `ThemeProvider` at the top level of your app, it will set the custom styles of unicef down to the component tree.
-More info:
Material-ui theming
+More info:
Material-ui theming
```jsx static
import React from 'react'
-import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
+import { ThemeProvider } from '@mui/material/styles'
import { theme } from 'unicef-material-ui'
export default function App() {
diff --git a/styleguide.config.js b/styleguide.config.js
index a4e61b403..84cb8af14 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -73,6 +73,11 @@ module.exports = {
'UInfiniteScroll.js'
),
path.resolve(__dirname, 'src/components/USearchBox', 'USearchBox.js'),
+ path.resolve(
+ __dirname,
+ 'src/components/UBreadcrumbs',
+ 'UBreadcrumbs.js'
+ ),
],
usageMode: 'expand',
},
@@ -82,11 +87,6 @@ module.exports = {
path.resolve(__dirname, 'src/components/ULayout', 'ULayout.js'),
path.resolve(__dirname, 'src/components/USideBar', 'USideBar.js'),
path.resolve(__dirname, 'src/components/UContent', 'UContent.js'),
- path.resolve(
- __dirname,
- 'src/components/UBreadcrumbs',
- 'UBreadcrumbs.js'
- ),
],
usageMode: 'expand',
},
@@ -140,14 +140,24 @@ module.exports = {
path.resolve(__dirname, 'src/components/UDatePicker', 'UDatePicker.js'),
path.resolve(
__dirname,
- 'src/components/UKeyboardDatePicker',
- 'UKeyboardDatePicker.js'
+ 'src/components/UDesktopDatePicker',
+ 'UDesktopDatePicker.js'
+ ),
+ path.resolve(
+ __dirname,
+ 'src/components/UMobileDatePicker',
+ 'UMobileDatePicker.js'
),
path.resolve(__dirname, 'src/components/UTimePicker', 'UTimePicker.js'),
path.resolve(
__dirname,
- 'src/components/UKeyboardTimePicker',
- 'UKeyboardTimePicker.js'
+ 'src/components/UDesktopTimePicker',
+ 'UDesktopTimePicker.js'
+ ),
+ path.resolve(
+ __dirname,
+ 'src/components/UMobileTimePicker',
+ 'UMobileTimePicker.js'
),
path.resolve(
__dirname,
@@ -156,8 +166,13 @@ module.exports = {
),
path.resolve(
__dirname,
- 'src/components/UKeyboardDateTimePicker',
- 'UKeyboardDateTimePicker.js'
+ 'src/components/UDesktopDateTimePicker',
+ 'UDesktopDateTimePicker.js'
+ ),
+ path.resolve(
+ __dirname,
+ 'src/components/UMobileDateTimePicker',
+ 'UMobileDateTimePicker.js'
),
path.resolve(
__dirname,
@@ -202,12 +217,6 @@ module.exports = {
'UCoordinateField.js'
),
],
- // sections: [
- // {
- // name: 'ValidatorForm',
- // content: 'src/readme.md',
- // }
- // ],
usageMode: 'expand',
},
{
@@ -245,18 +254,33 @@ module.exports = {
),
path.resolve(
__dirname,
- 'src/components/ActiveKeyboardDatePicker',
- 'ActiveKeyboardDatePicker.js'
+ 'src/components/ActiveDatePicker',
+ 'ActiveDatePicker.js'
),
path.resolve(
__dirname,
- 'src/components/ActiveDatePicker',
- 'ActiveDatePicker.js'
+ 'src/components/ActiveDesktopDatePicker',
+ 'ActiveDesktopDatePicker.js'
+ ),
+ path.resolve(
+ __dirname,
+ 'src/components/ActiveMobileDatePicker',
+ 'ActiveMobileDatePicker.js'
),
path.resolve(
__dirname,
- 'src/components/ActiveKeyboardTimePicker',
- 'ActiveKeyboardTimePicker.js'
+ 'src/components/ActiveDateTimePicker',
+ 'ActiveDateTimePicker.js'
+ ),
+ path.resolve(
+ __dirname,
+ 'src/components/ActiveDesktopDateTimePicker',
+ 'ActiveDesktopDateTimePicker.js'
+ ),
+ path.resolve(
+ __dirname,
+ 'src/components/ActiveMobileDateTimePicker',
+ 'ActiveMobileDateTimePicker.js'
),
path.resolve(
__dirname,
@@ -265,19 +289,30 @@ module.exports = {
),
path.resolve(
__dirname,
- 'src/components/ActiveKeyboardDateTimePicker',
- 'ActiveKeyboardDateTimePicker.js'
+ 'src/components/ActiveDesktopTimePicker',
+ 'ActiveDesktopTimePicker.js'
+ ),
+ path.resolve(
+ __dirname,
+ 'src/components/ActiveMobileTimePicker',
+ 'ActiveMobileTimePicker.js'
+ ),
+ ],
+ usageMode: 'expand',
+ },
+ {
+ name: 'Accessibility',
+ components: () => [
+ path.resolve(__dirname, 'src/components/UAriaLive', 'UAriaLive.js'),
+ path.resolve(
+ __dirname,
+ 'src/components/UAriaHiddenText',
+ 'UAriaHiddenText.js'
),
],
- // sections: [
- // {
- // name: 'ValidatorForm',
- // content: 'src/readme.md',
- // }
- // ],
usageMode: 'expand',
},
- // For future refence to use in sections
+ // For future reference to use in sections
// {
// name: 'UI Components',
// // content: 'src/components/USelect/USelect.md',