Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(date picker): add date picker component (#601)
* feat(date-picker): add date picker * refactor(date picker): updates to submitted datepicker component code Chnages to submitted code to use gov.uk styles where possible. Updates component to being fixed width by default, allowing users to either provide an alternative width class or remove it to have a fluid input. * refactor(date picker): update styles to match design system design Amends the styles of the submitted datepicker to match the tweaked design for inclusion in the Design System. Renames some classes to be slightly more consistent with BEM style. Reformat css file to remove nesting to conform to GDS recommended style. * refactor(date picker): add calendar button via JS for pregressive enhancement This PR moves the calendar popup toggle from in the template to within the JS, as the button shouldn't show up unless JS is available to toggle the popup dialog. Improvements were made to the accessible labelling of the table headers and the individual day buttons to aid screenreader users. * refactor(date picker): remove unnecessary data-button attributes * docs(date picker component): adding guidance for date picker component * docs(date picker component): updating hint text on component example * feat(date picker): add support for disabling dates and days Allow for disabling of arbitrary dates using the data-disableddays param. Also disable specific days of the week using the data-disableddays param. e.g. disable all weekends with `data-disableddays="saturday sunday"` * docs(date picker component): change to input field and example height * docs(documentation change): updating guidance for date picker component * docs(update to component documentation): adding examples to date picker component guidance * feat(date picker): updates to styling, and WIP changes to how disabled dates are handles * feat(date picker): update disabled and hover styles to match figma designs * feat(date picker): add leadingzeros config parameter Add config option for whether or not the date inserted into the field on selection has leadingzeros for days and months * feat(date picker): add config option for week start day Allows a weekStartDay option to be passed to the component to configure whether weeks start on a monday or sunday * feat(date picker): allow passing date ranges to disabledDates In order to make it easier to disabled a block of dates it is now possible to pass date ranges in the format "19/7/2024-26/7/24" in the disabledDates parameter * feat(date picker): add examples to date picker guidance page * ci(dockerfile): remove asset copy directive from the dockerfile Copying the assets directory is no longer needed as the assets are now within the docs directory * feat(date picker): add horizontal and vertical pairs example * refactor(date picker): refactor date picker template to be cleaner The previous template resulted in nested moj-form-group elements causing issues with error states. The template has now been refactored to more fully utilise the govuk-input macro and use the govuk-attributes macro too to impriove and simplify the external api to the component. * docs(date picker): remove from-to stacked examples * refactor(date picker): refactor date picker JS Extract some js into functions for slightly improved readability * fix(date picker): fix min-max date params in template * docs(date picker component): updating component guidance after content design review * docs(date picker component): changing example image on date picker guidance * docs(date picker component): updating example image for filtering with the date picker * docs(date picker component): update Changes to content * docs(date picker component): update content Refine content ready for release. * feat(date picker): code formatting and updates following accessibility review * add aria-expanded attribute onto calendar toggle button * add "excluded date" assisteive text to excluded dates * update excluded dates example to show both individual dates and days * reformat code to follow convention of element variables having a $ prefix * docs(date picker component): update content * feat(date picker): allow component to be configured via JS as well as via data-attributes This change updates the component to allow for component properties such as minDate, maxDate and excludedDates/Days to be passed in via the JS config object. This follows the GDS convention where component defaults are overridden by the JS config, which is overridden by data attributes. The code to do this is largely borrowed from GOV.UK frontend. Also added in this commit are JSDoc comments for all functions with arguments. * feat(date picker): update hover cover remove second excluded dates example * docs(date picker component): update content * feat(date picker): update diasbled dates with strikethrough and hover colors to darker grey Ensure metting WCAG color contrast rules by amending hover color, and add strikethrough for clarity of meaning on excluded dates * feat(date picker): fix example open in new window link styling * refactor(date picker): small final tidying tweaks to datepicker * fix(examples): adds example title to example tabs links to prevent many redundant links on the page This was raised in an accessibility review by Ben Proctor-Rogers. Each of the example links on the page has the same label, which is not a good experience for screen reader users. This change adds the example title to the link as visually hidden text. * docs(date picker): add figma link to first example * Revert "refactor(date picker): small final tidying tweaks to datepicker" This reverts commit a004155. * refactor(date picker): small formatting nits * docs(date picker): update date-picker component README within package * feat(date picker): fixes following code review Adjustments in response to code review * docs(date picker): change url in date picker readme * docs(date picker component): update content Updated content on accessibility for excluded dates. * docs(date picker component): update content Content tweaks * docs(date picker component): update content Correcting typo * docs(date picker component): update content Remove greyed out content which is a comment. * refactor(date picker): update sass to follow GOV.UK BEM conventions Updates the CSS classes to have only one block root per component. Also updates to follw GOV.UK recomended convention of preferring sass variables instead of colour functions where available. * docs(date picker): add date picker to what's new section on homepage * refactor(date picker): remove need for duplicate date regex The regex for a date was duplicated in the code. It wasn't necessary to wrap getting the date in the input in a conditional due to the fact that fomattedDateFromString falls back to todays date meaning if there is no date in the input or the input contains an invalid date, it will fall back to setting the currentDate for the calendar to today, which is what is required. * fix(date picker): move escape key event listener to dialog element The 'esc' keydown event listener was attached to the calendarDayButton instance(s) meaning that escape would only close the modal if one of the calendar days was focused. Escape should clode the dialog wherever you are focused within it. Moving the listener onto the parent element fixes this bug. * refactor(date picker): refactor event.keycode to event.key * fix(date picker): fixes and changes based on code review * docs(date picker component): update content New content about server side validation for text inputs. * refactor(date picker): remove unused css class on the dialog * docs(date picker): add figma link to all examples * fix(date picker): fix mindate and maxdate functionality * docs(date picker): update excluded dates example to also include min and max date --------- Co-authored-by: Greg Tyler <[email protected]> Co-authored-by: Rob McCarthy <[email protected]> Co-authored-by: helennickols <[email protected]> Co-authored-by: helennickols <[email protected]>
- Loading branch information
5 people
authored
Jul 31, 2024
1 parent
51053d4
commit 0f52877
