diff --git a/.storybook/main.js b/.storybook/main.js index 0e5065dfc..f77df59b0 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -79,7 +79,7 @@ module.exports = { path.resolve(__dirname, '../src/'), ], }) - config.resolve.alias['@marklogic/design-system/es'] = path.resolve(__dirname, '../src') + config.resolve.alias['@marklogic/design-system/es'] = path.resolve(__dirname, '../src') config.resolve.alias['@marklogic/design-system/src'] = path.resolve(__dirname, '../src') config.resolve.alias['@marklogic/design-system'] = path.resolve(__dirname, '../src') config.resolve.alias.antd = path.resolve(__dirname, '../node_modules/antd') diff --git a/__mocks__/moment.js b/__mocks__/moment.js new file mode 100644 index 000000000..06526e9fe --- /dev/null +++ b/__mocks__/moment.js @@ -0,0 +1,5 @@ +const moment = jest.requireActual('moment') + +Date.now = () => new Date('2019-04-07T10:20:30Z').getTime() + +module.exports = moment diff --git a/gulpfile.js/index.js b/gulpfile.js/index.js index 6e5c9d0ac..53b4c35ca 100644 --- a/gulpfile.js/index.js +++ b/gulpfile.js/index.js @@ -32,6 +32,7 @@ function compile(modules) { ['import', { libraryName: 'lodash-es', libraryDirectory: '', + camel2DashComponentName: false, }, 'lodash-es'], ['import', { libraryName: '@marklogic/design-system', @@ -133,4 +134,9 @@ gulp.task('compile-watch', () => { ], gulp.series(['compile-less'])) }) +gulp.task('compile-and-watch', gulp.series([ + 'compile-all', + 'compile-watch', +])) + gulp.task('fix-and-compile', gulp.series(['fix-uniformity', 'compile-all'])) diff --git a/package.json b/package.json index 40a5e6eae..a49f1fee9 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "scripts": { "build": "gulp compile-all", "watch": "gulp compile-watch", - "test": "cross-env CI=1 react-scripts test --env=jsdom", + "test": "cross-env CI=1 react-scripts test --colors --env=jsdom", "test:watch": "react-scripts test --env=jsdom", "predeploy": "cd playground && yarn && yarn run build", "prepublishOnly": "yarn run build", diff --git a/playground/src/App.js b/playground/src/App.js index 42d448e13..58e623ac1 100644 --- a/playground/src/App.js +++ b/playground/src/App.js @@ -47,6 +47,7 @@ import { MLTabs, MLTag, MLTimeline, + MLTimePicker, MLTooltip, MLTreeSelect, MLUpload, @@ -67,6 +68,7 @@ import { const configValues = { dateFormat: 'YYYY-MMM-DD', // Default for all dates, and DatePicker + timeFormat: 'hh:mm a', dateTimeFormat: 'YYYY-MMM-DD, HH:mm:ss', // default for all dates with times, and DatePicker with times monthFormat: 'YYYY-MM', // default for Month picker weekFormat: 'YYYY-wo', // default for Week picker @@ -168,6 +170,10 @@ export default class App extends Component { + {/* Use configProvider format */} + { return ( {/* Include Ant's normal config values as well, for Ant components to use */} { MLConfigProvider.defaultProps = { dateFormat: 'YYYY-MMM-DD', + timeFormat: 'HH:mm:ss', dateTimeFormat: 'YYYY-MMM-DD, HH:mm:ss', monthFormat: 'YYYY-MM', weekFormat: 'YYYY-wo', - yearFormat: 'YYYY', } MLConfigProvider.propTypes = { dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), + timeFormat: PropTypes.string, dateTimeFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), monthFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), weekFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), - yearFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), } export const MLConfigContext = React.createContext(MLConfigProvider.defaultProps) diff --git a/src/MLDatePicker/MLDatePicker.js b/src/MLDatePicker/MLDatePicker.js index 3c3cb71f4..1ccbb450d 100644 --- a/src/MLDatePicker/MLDatePicker.js +++ b/src/MLDatePicker/MLDatePicker.js @@ -1,31 +1,50 @@ -import React from 'react' +import React, { useState } from 'react' import PropTypes from 'prop-types' import { DatePicker } from 'antd' import { MLConfigContext } from '../MLConfigProvider' import MLSizeContext from '../MLConfigProvider/MLSizeContext' import { pickerPropsFromContext } from './utils' import classNames from 'classnames' +import uniqueId from 'lodash-es/uniqueId' + +const MLDatePicker = React.forwardRef(({ hourLabel, minuteLabel, secondLabel, ...props }, ref) => { + // Generate an unchanging unique ID to tie this to its specific style elements + const [componentId] = useState(uniqueId('ml-date-picker-')) -const MLDatePicker = React.forwardRef((props, ref) => { return ( {(pickerContext) => ( {(contextSize) => { const contextProps = pickerPropsFromContext('date', pickerContext, props) + + const unitPositions = [hourLabel, minuteLabel, secondLabel] + // Create the style tags to show the hr/min/sec labels in the relevant columns for just this component + const unitStyleTags = unitPositions.map((unitLabel, index) => ( + + )) + const size = contextSize || props.size return ( - - {props.children} - + <> + + {props.children} + + {contextProps.showTime ? unitStyleTags : null} + ) }} @@ -37,9 +56,17 @@ const MLDatePicker = React.forwardRef((props, ref) => { MLDatePicker.defaultProps = { bordered: true, size: 'small', + hourLabel: 'Hr', + minuteLabel: 'Min', + secondLabel: 'Sec', } MLDatePicker.propTypes = { + hourLabel: PropTypes.string, + minuteLabel: PropTypes.string, + secondLabel: PropTypes.string, + className: PropTypes.string, + dropdownClassName: PropTypes.string, bordered: PropTypes.bool, size: PropTypes.string, } diff --git a/src/MLDatePicker/MLMonthPicker.js b/src/MLDatePicker/MLMonthPicker.js index 0ef7b9827..0443bbe69 100644 --- a/src/MLDatePicker/MLMonthPicker.js +++ b/src/MLDatePicker/MLMonthPicker.js @@ -18,6 +18,7 @@ const MLMonthPicker = React.forwardRef((props, ref) => { {...props} showTime={contextProps.showTime} className={classNames('ml-date-picker-month-picker', props.className)} + dropdownClassName={classNames('ml-date-picker-month-picker-container', props.dropdownClassName)} > {props.children} diff --git a/src/MLDatePicker/MLRangePicker.js b/src/MLDatePicker/MLRangePicker.js index 8e5186245..19c2af4b6 100644 --- a/src/MLDatePicker/MLRangePicker.js +++ b/src/MLDatePicker/MLRangePicker.js @@ -1,28 +1,55 @@ -import React from 'react' +import React, { useState } from 'react' import PropTypes from 'prop-types' import { DatePicker } from 'antd' import { MLConfigContext } from '../MLConfigProvider' +import MLSizeContext from '../MLConfigProvider/MLSizeContext' import { pickerPropsFromContext } from './utils' import classNames from 'classnames' +import uniqueId from 'lodash-es/uniqueId' const { RangePicker } = DatePicker -const MLRangePicker = React.forwardRef((props, ref) => { +const MLRangePicker = React.forwardRef(({ hourLabel, minuteLabel, secondLabel, ...props }, ref) => { + // Generate an unchanging unique ID to tie this to its specific style elements + const [componentId] = useState(uniqueId('ml-date-picker-range-picker-')) + return ( - {(context) => { - const contextProps = pickerPropsFromContext('range', context, props) - return ( - - {props.children} - - ) - }} + {(pickerContext) => ( + + {(contextSize) => { + const contextProps = pickerPropsFromContext('range', pickerContext, props) + + const unitPositions = [hourLabel, minuteLabel, secondLabel] + // Create the style tags to show the hr/min/sec labels in the relevant columns for just this component + const unitStyleTags = unitPositions.map((unitLabel, index) => ( + + )) + + const size = contextSize || props.size + return ( + <> + + {props.children} + + {contextProps.showTime ? unitStyleTags : null} + + ) + }} + + )} ) }) @@ -34,6 +61,9 @@ MLRangePicker.defaultProps = { – // en-dash ), size: 'small', + hourLabel: 'Hr', + minuteLabel: 'Min', + secondLabel: 'Sec', } MLRangePicker.propTypes = { diff --git a/src/MLDatePicker/MLWeekPicker.js b/src/MLDatePicker/MLWeekPicker.js index ce0c24d1c..eacc175bb 100644 --- a/src/MLDatePicker/MLWeekPicker.js +++ b/src/MLDatePicker/MLWeekPicker.js @@ -18,6 +18,7 @@ const MLWeekPicker = React.forwardRef((props, ref) => { {...props} showTime={contextProps.showTime} className={classNames('ml-date-picker-week-picker', props.className)} + dropdownClassName={classNames('ml-date-picker-week-picker-container', props.dropdownClassName)} > {props.children} diff --git a/src/MLDatePicker/style/index.less b/src/MLDatePicker/style/index.less index 530cdf33a..f72854a22 100644 --- a/src/MLDatePicker/style/index.less +++ b/src/MLDatePicker/style/index.less @@ -1,5 +1,42 @@ -@import '../../styles.less'; +.ml-date-picker-container, .ml-date-picker-range-picker-container { + .ant-calendar-time .ant-calendar-time-picker-select { + ul { + // Fix scroll height + max-height: unset; -.ant-calendar-time-picker-select li:last-child::after { - height: 0; // So there isn't extra scroll space at the bottom + // Counter the translateY on the
  • s + margin-top: -24px; + + // Remove the extra blank space below the numbers + padding-bottom: 0; + + li { + // Adjust the position numbers scroll to after clicking on them + transform: translateY(24px) + } + + &::before { + // Make it stick to the top of the column + position: sticky; + top: 0; + background-color: #f5f5f5; + font-weight: bold; + + text-align: center; // Center in DatePicker/RangePicker (has wide columns) + + display: list-item; // Make it a fake
  • so it sizes right + + // Keep it sized properly, same as the other
  • s + line-height: 24px; + user-select: none; + + // Bring it in front of the
  • s + z-index: 1; + } + + li:last-child::after { + height: 0; + } + } + } } diff --git a/src/MLDatePicker/utils.js b/src/MLDatePicker/utils.js index be0b8b3c7..fb6eff52a 100644 --- a/src/MLDatePicker/utils.js +++ b/src/MLDatePicker/utils.js @@ -1,6 +1,6 @@ -import { get } from 'lodash-es' +import { get, isArray } from 'lodash-es' -export const pickerPropsFromContext = (picker, { dateFormat, dateTimeFormat, weekFormat, monthFormat, yearFormat }, props) => { +export const pickerPropsFromContext = (picker, { dateFormat, dateTimeFormat, weekFormat, monthFormat }, props) => { let format let { showTime } = props if (props.showTime && !['date', 'range'].includes(picker)) { @@ -14,9 +14,9 @@ export const pickerPropsFromContext = (picker, { dateFormat, dateTimeFormat, wee date: dateFormat, week: weekFormat, month: monthFormat, - year: yearFormat, // Nothing special for quarter or year pickers }, picker, dateFormat) } - return { format, showTime } + const primaryFormat = isArray(format) ? format[0] : format + return { primaryFormat, format, showTime } } diff --git a/src/MLTimePicker/MLTimePicker.js b/src/MLTimePicker/MLTimePicker.js new file mode 100644 index 000000000..0d08051f9 --- /dev/null +++ b/src/MLTimePicker/MLTimePicker.js @@ -0,0 +1,131 @@ +import React, { useState } from 'react' +import { TimePicker } from 'antd' +import PropTypes from 'prop-types' +import classNames from 'classnames' +import uniqueId from 'lodash-es/uniqueId' +import getOrderedTimeUnits from './util/getOrderedTimeUnits' +import { MLConfigContext } from '../MLConfigProvider' +import MLSizeContext from '../MLConfigProvider/MLSizeContext' + +const MLTimePicker = React.forwardRef(({ hourLabel, minuteLabel, secondLabel, ...props }, ref) => { + // Generate an unchanging unique ID to tie this to its specific style elements + const [componentId] = useState(uniqueId('ml-time-picker-')) + + return ( + + {(pickerContext) => ( + + {(contextSize) => { + // const contextProps = pickerPropsFromContext('date', pickerContext, props) + const format = props.format || pickerContext.timeFormat || 'HH:mm:ss' + const size = contextSize || props.size + + const unitPositions = getOrderedTimeUnits({ hourLabel, minuteLabel, secondLabel, format }) + + // Create the style tags to show the hr/min/sec labels in the relevant columns for just this component + const unitStyleTags = unitPositions.map((unitLabel, index) => ( + + )) + return ( + <> + + {props.children} + + {unitStyleTags} + + ) + }} + + )} + + ) +}) + +MLTimePicker.defaultProps = { + hourLabel: 'Hr', + minuteLabel: 'Min', + secondLabel: 'Sec', + placeholder: 'Select time', +} + +MLTimePicker.propTypes = { + /** The label to put in the hours columns */ + hourLabel: PropTypes.string, + /** The label to put in the minutes columns */ + minuteLabel: PropTypes.string, + /** The label to put in the seconds columns */ + secondLabel: PropTypes.string, + /** The size of the component */ + size: PropTypes.oneOf(['default', 'small', 'large']), + /** called from timepicker panel to render some addon to its bottom */ + addon: PropTypes.func, + /** allow clearing text */ + allowClear: PropTypes.bool, + /** get focus when component mounted */ + autoFocus: PropTypes.bool, + /** className of picker */ + className: PropTypes.string, + /** clear tooltip of icon */ + clearText: PropTypes.string, + /** default open panel value, used to set utcOffset,locale if value/defaultValue absent */ + defaultOpenValue: PropTypes.object, + /** to set default time */ + defaultValue: PropTypes.object, + /** determine whether the TimePicker is disabled */ + disabled: PropTypes.bool, + /** to specify the hours that cannot be selected */ + disabledHours: PropTypes.func, + /** to specify the minutes that cannot be selected */ + disabledMinutes: PropTypes.func, + /** to specify the seconds that cannot be selected */ + disabledSeconds: PropTypes.func, + /** to set the time format */ + format: PropTypes.string, + /** to set the container of the floating layer, while the default is to create a div element in body */ + getPopupContainer: PropTypes.func, + /** hide the options that can not be selected */ + hideDisabledOptions: PropTypes.bool, + /** interval between hours in picker */ + hourStep: PropTypes.number, + /** Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) */ + inputReadOnly: PropTypes.bool, + /** interval between minutes in picker */ + minuteStep: PropTypes.number, + /** whether to popup panel */ + open: PropTypes.bool, + /** display when there's no value */ + placeholder: PropTypes.string, + /** className of panel */ + popupClassName: PropTypes.string, + /** style of panel */ + popupStyle: PropTypes.object, + /** interval between seconds in picker */ + secondStep: PropTypes.number, + /** The custom suffix icon */ + suffixIcon: PropTypes.node, + /** The custom clear icon */ + clearIcon: PropTypes.node, + /** display as 12 hours format, with default format h:mm:ss a */ + use12Hours: PropTypes.bool, + /** to set time */ + value: PropTypes.object, + /** a callback function, can be executed when the selected time is changing */ + onChange: PropTypes.func, + /** a callback function which will be called while panel opening/closing */ + onOpenChange: PropTypes.func, +} + +MLTimePicker.displayName = 'MLTimePicker' + +export default MLTimePicker diff --git a/src/MLTimePicker/index.js b/src/MLTimePicker/index.js new file mode 100644 index 000000000..298eb1729 --- /dev/null +++ b/src/MLTimePicker/index.js @@ -0,0 +1,3 @@ +import MLTimePicker from './MLTimePicker' + +export default MLTimePicker diff --git a/src/MLTimePicker/style/index.js b/src/MLTimePicker/style/index.js new file mode 100644 index 000000000..07473008d --- /dev/null +++ b/src/MLTimePicker/style/index.js @@ -0,0 +1,2 @@ +import 'antd/es/time-picker/style' +import './index.less' diff --git a/src/MLTimePicker/style/index.less b/src/MLTimePicker/style/index.less new file mode 100644 index 000000000..437a6bd8e --- /dev/null +++ b/src/MLTimePicker/style/index.less @@ -0,0 +1,37 @@ +.ml-time-picker { +} + +.ml-time-picker-panel { + .ant-time-picker-panel-select { + ul { + // Counter the translateY on the
  • s + margin-top: -32px; + + // Remove the extra blank space below the numbers + padding-bottom: 0; + + li { + // Adjust the position numbers scroll to after clicking on them + transform: translateY(32px) + } + + &::before { + // Make it stick to the top of the column + position: sticky; + top: 0; + background-color: #f5f5f5; + font-weight: bold; + + display: list-item; // Make it a fake
  • so it sizes right + + // Keep it sized properly, same as the other
  • s + padding: 0 0 0 12px; + line-height: 32px; + user-select: none; + + // Bring it in front of the
  • s + z-index: 1; + } + } + } +} diff --git a/src/MLTimePicker/util/getOrderedTimeUnits.js b/src/MLTimePicker/util/getOrderedTimeUnits.js new file mode 100644 index 000000000..3e198fc9d --- /dev/null +++ b/src/MLTimePicker/util/getOrderedTimeUnits.js @@ -0,0 +1,19 @@ +// Sort an array of time unit labels based on a time format string (only hour, minute, second supported) +export default function getOrderedTimeUnits({ hourLabel, minuteLabel, secondLabel, format }) { + // Determine the order, and which are included, of hr/min/sec + const unitMatchers = [ + // Test for the various ways Moment supports hr/min/sec in the format + [hourLabel, /HH?|hh?|kk?/], + [minuteLabel, /mm?/], + [secondLabel, /ss?|S+/], + ] + return unitMatchers + .filter((pair) => ( + format.match(pair[1]) !== null + )) + .map((pair) => { + return [pair[0], format.match(pair[1]).index] + }) + .sort((a, b) => a[1] - b[1]) + .map((pair) => pair[0]) +} diff --git a/src/Storyshots.test.js b/src/Storyshots.test.js index 1b578b648..0d4a91990 100644 --- a/src/Storyshots.test.js +++ b/src/Storyshots.test.js @@ -9,6 +9,10 @@ addSerializer(createSerializer()) Enzyme.configure({ adapter: new Adapter() }) +beforeAll(() => { + global.Date.now = jest.fn(() => new Date('2019-04-07T10:20:30Z').getTime()) +}) + initStoryshots({ snapshotSerializers: [createSerializer()], test: multiSnapshotWithOptions({ diff --git a/src/__snapshots__/22-Statistic.stories.storyshot b/src/__snapshots__/22-Statistic.stories.storyshot index 648551a0a..22ffdbf13 100644 --- a/src/__snapshots__/22-Statistic.stories.storyshot +++ b/src/__snapshots__/22-Statistic.stories.storyshot @@ -90,7 +90,7 @@ exports[`Storyshots Data Display/MLStatistic Countdown 1`] = ` - 48:00:04 + 48:00:05 @@ -113,7 +113,7 @@ exports[`Storyshots Data Display/MLStatistic Countdown 1`] = ` - 48:00:04:997 + 48:00:05:000 @@ -136,7 +136,7 @@ exports[`Storyshots Data Display/MLStatistic Countdown 1`] = ` - 2 Days 0 Hours 0 Min 4 Sec + 2 Days 0 Hours 0 Min 5 Sec diff --git a/src/__snapshots__/36-Form.stories.storyshot b/src/__snapshots__/36-Form.stories.storyshot index c0697d8ec..34c921264 100644 --- a/src/__snapshots__/36-Form.stories.storyshot +++ b/src/__snapshots__/36-Form.stories.storyshot @@ -2347,7 +2347,7 @@ exports[`Storyshots Data Entry/MLForm Time Related Form 1`] = ` class="ant-form-item-children" >
    @@ -2406,7 +2406,7 @@ exports[`Storyshots Data Entry/MLForm Time Related Form 1`] = ` class="ant-form-item-children" > @@ -2525,7 +2525,7 @@ exports[`Storyshots Data Entry/MLForm Time Related Form 1`] = ` class="ant-form-item-children" > @@ -2606,7 +2606,7 @@ exports[`Storyshots Data Entry/MLForm Time Related Form 1`] = ` class="ant-form-item-children" > + + + + + + + , + null, + null, + null, +] +`; diff --git a/src/__snapshots__/67-ConfigProvider.stories.storyshot b/src/__snapshots__/67-ConfigProvider.stories.storyshot index 4291c6280..23a6c7fa9 100644 --- a/src/__snapshots__/67-ConfigProvider.stories.storyshot +++ b/src/__snapshots__/67-ConfigProvider.stories.storyshot @@ -2,19 +2,15 @@ exports[`Storyshots Other/MLConfigProvider Basic 1`] = `
    -
    - This component doesn't seem to allow updates in Storybook, so here are some static examples: -
    -
    - TODO: Consider using this for global settings that are spec'd in the tickets -

    Near the top of the tree of your application (such that all @marklogic/design-system components are descendants of this), you must provide a MLConfigProvider like so:
    +
    (application components go here) +
    +
    + +
    + + + + +
    +     +
    + + + + + + + – + + + + + + + + + +
    + + + + + + + – + + + + + + + + + +
    + + + + + + + + +
    + +
    + + + + +
    +     +
    + + + + + + + + +
    ...etc
    `; diff --git a/src/__snapshots__/73-DatePicker.stories.storyshot b/src/__snapshots__/73-DatePicker.stories.storyshot index c75d5189e..b12ef1f71 100644 --- a/src/__snapshots__/73-DatePicker.stories.storyshot +++ b/src/__snapshots__/73-DatePicker.stories.storyshot @@ -5,7 +5,7 @@ exports[`Storyshots Data Entry/MLDatePicker Date Picker 1`] = `
    date:
    diff --git a/src/__tests__/build-smoke.test.js b/src/__tests__/build-smoke.test.js new file mode 100644 index 000000000..4c6566b30 --- /dev/null +++ b/src/__tests__/build-smoke.test.js @@ -0,0 +1,7 @@ +import * as esComponents from '../../es/index.js' +import * as libComponents from '../../lib/index.js' + +test('importing the library works', () => { + expect(esComponents).toBeDefined() + expect(libComponents).toBeDefined() +}) diff --git a/src/index.js b/src/index.js index 969f1ac66..9b0b516d9 100644 --- a/src/index.js +++ b/src/index.js @@ -48,6 +48,7 @@ export { default as MLSwitch } from './MLSwitch' export { default as MLTable } from './MLTable' export { default as MLTabs } from './MLTabs' export { default as MLTag } from './MLTag' +export { default as MLTimePicker } from './MLTimePicker' export { default as MLTimeline } from './MLTimeline' export { default as MLTooltip } from './MLTooltip' export { default as MLTree } from './MLTree' diff --git a/stories/4-Typography.stories.jsx b/stories/4-Typography.stories.jsx index 4a74e3e7c..8525ac6a2 100644 --- a/stories/4-Typography.stories.jsx +++ b/stories/4-Typography.stories.jsx @@ -67,9 +67,7 @@ export const MLTitleComponent = () => ( h4. Ant Design
    ) -MLTitleComponent.story = { - name: 'MLTitle', -} +MLTitleComponent.storyName = 'MLTitle' export const MLTextComponent = () => (
    @@ -98,9 +96,7 @@ export const MLTextComponent = () => ( (Hovered link)
    ) -MLTextComponent.story = { - name: 'MLText', -} +MLTextComponent.storyName = 'MLText' export const editable = () => { const [state, setState] = useState({ str: 'This is an editable text.' }) diff --git a/stories/45-TimePicker.mdx b/stories/45-TimePicker.mdx new file mode 100644 index 000000000..7da9b3bbc --- /dev/null +++ b/stories/45-TimePicker.mdx @@ -0,0 +1,19 @@ +import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; +import PropsPanels from './PropsPanels'; +import MLTimePicker from '../src/MLTimePicker'; + +# MLTimePicker + +[Ant Documentation](https://3x.ant.design/components/time-picker) + +There's nothing here yet. + + +# MLTimePicker.MLRangePicker + +There's nothing here yet. + + diff --git a/stories/45-TimePicker.stories.jsx b/stories/45-TimePicker.stories.jsx new file mode 100644 index 000000000..6d5ffbd7d --- /dev/null +++ b/stories/45-TimePicker.stories.jsx @@ -0,0 +1,33 @@ +import React from 'react' +import { action } from '@storybook/addon-actions' +import { withKnobs, text } from '@storybook/addon-knobs' +import { MLTimePicker } from '@marklogic/design-system' +import mdx from './45-TimePicker.mdx' + +export default { + title: 'Data Entry/MLTimePicker', + decorators: [withKnobs], + parameters: { + fileName: '45-TimePicker.stories.jsx', + docs: { + page: mdx, + }, + info: { + text: 'Component description goes here', + }, + }, +} + +export const basic = () => { + const props = { + hourLabel: text('hourLabel', 'Hr'), + minuteLabel: text('minuteLabel', 'Min'), + secondLabel: text('secondLabel', 'Sec'), + format: text('format', 'HH:mm:ss'), + } + return ( + + ) +} diff --git a/stories/67-ConfigProvider.stories.jsx b/stories/67-ConfigProvider.stories.jsx index 55870beeb..5e1c96287 100644 --- a/stories/67-ConfigProvider.stories.jsx +++ b/stories/67-ConfigProvider.stories.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import { action } from '@storybook/addon-actions' -import { MLConfigProvider, MLDatePicker } from '@marklogic/design-system' -import { withKnobs } from '@storybook/addon-knobs' +import { MLConfigProvider, MLDatePicker, MLTimePicker } from '@marklogic/design-system' +import { withKnobs, array, text } from '@storybook/addon-knobs' import mdx from './67-ConfigProvider.mdx' export default { @@ -18,24 +18,29 @@ export default { }, } -const configValues = { - dateFormat: ['YYYY-MMM-DD', 'MM/DD/YYYY', 'M/D/YY'], // Default for all dates, and datePicker - timeFormat: ['HH:mm:ss'], - dateTimeFormat: ['YYYY-MMM-DD, HH:mm:ss', 'LT', 'LTS'], // default for all dates with times, and datePicker with times - monthFormat: 'YYYY-MM', // default for datePicker month mode - weekFormat: 'YYYY-wo', // default for datePicker week mode -} - export const basic = () => { + const configValues = { + dateFormat: array('dateFormat', ['YYYY-MMM-DD', 'MM/DD/YYYY', 'M/D/YY'], '|'), // Default for all dates, and datePicker + dateTimeFormat: array('dateTimeFormat', ['YYYY-MMM-DD, HH:mm', 'LT', 'LTS'], '|'), // default for all dates with times, and datePicker with times + weekFormat: text('weekFormat', 'YYYY-wo'), // default for datePicker week mode + monthFormat: text('monthFormat', 'YYYY-MM'), // default for datePicker month mode + timeFormat: text('timeFormat', 'HH:mm'), + } + return (
    -
    This component doesn't seem to allow updates in Storybook, so here are some static examples:
    -
    TODO: Consider using this for global settings that are spec'd in the tickets

    Near the top of the tree of your application (such that all @marklogic/design-system components are descendants of this), you must provide a MLConfigProvider like so:
    +
    - (application components go here) - + (application components go here)
    +
    +
    +
    +
    +
    +
    +
    ...etc
    diff --git a/stories/73-DatePicker.stories.jsx b/stories/73-DatePicker.stories.jsx index 31742c75d..7d9496f2c 100644 --- a/stories/73-DatePicker.stories.jsx +++ b/stories/73-DatePicker.stories.jsx @@ -23,7 +23,7 @@ const disableOddDates = (d) => d.date() % 2 === 0 const configValues = { dateFormat: ['YYYY-MMM-DD', 'MM/DD/YYYY', 'M/D/YY'], - timeFormat: ['HH:mm:ss'], + timeFormat: 'HH:mm:ss', dateTimeFormat: ['YYYY-MMM-DD, HH:mm:ss', 'YYYY-MMM-DD, HH:mm', 'LT', 'LTS'], monthFormat: 'YYYY-MM', weekFormat: 'YYYY-wo',