# Changelog All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). ## [3.1.6] - 2021-08-30 ### Updated - Storybook documentation ## [3.1.5] - 2021-08-30 ### Updated - removed font types to allow clients to use their own font type ## [3.1.4] - 2021-08-30 ### Updated - security vulnerability fixes ## [3.1.3] - 2021-08-26 ### Added - `fontsource` as a peer dep ## [3.1.2] - 2021-08-23 ### Updated - `url` to `asset-url` for importing new font type ## [3.1.1] - 2021-08-19 ### Changed - existing documentation to better explain the changes made in v3 ## [3.1.0] - 2021-08-16 ### Changed - typography to use predefined weight "Open sans" - `_config.scss` to `_legacy.scss` - moved button mixin to mixin folder - colour variables to use american spelling - `h1`, `h2`, `h3` & `h4` styling - body `font-size` to `100%` instead of `62.5%` ### Added - design tokens in `_design-tokens.scss` ## [3.0] - 2021-08-05 ### Updated - defined colour design tokens - used design tokens for button components ## [2.11] - 2020-04-21 ### Updated - defined colours from new colour system - updated buttons with new colours ## [2.10.1] - 2020-02-19 ### Updated - various outdated dependencies - README documentation around NPM and Storybook ## [2.10] - 2020-12-24 - (accidental publish - same as v2.9) ## [2.9] - 2020-12-23 ### Updated - changed the pf-accordion summary to single inheritance ## [2.8.6] - 2020-12-17 ### Updated - all documentation for CSS removed from Legacy UIF docs, preferring Storybook instead. - addition of a global notice that tells site visitors where the docs have gone. - deprecated `accordion` JS component. Will remove entirely in V3.0 - fixed `btn-group` (radio toggle switch) to not have button radius. ## [2.8.5] - 2020-12-15 ### Updated - added border-radius 20px to all buttons ## [2.8.4] - 2020-11-03 ### Updated - `pf-select` added boxsizing to fix a bug with the width of the select input. ## [2.8.3] - 2020-07-06 ### Updated - [Storybook JS](https://storybook.js.org/)-style documentation ## [2.8.2] - 2020-06-25 ### Updated - `datepicker` documentation to remove deprecated API, and to highlight that non-JS datepickers are an option. - sub categorised Grid and `pf-media` as layout components in documentation. ## [2.8.1] - 2020-04-21 ### Updated - build tasks - `npm run develop` allows `.scss` files to be edited and for a development browser to reload automatically. - `pf-select` - styled to look similar to enhanced (and hopefully soon deprecated) select JS component - deprecated the boxed Enhanced Select, as this has indentical functionality with the CSS-only implementation of `.pf-select` without the JavaScript dependency. - updated `pf-table--invisible` modifier hook with additional styling - extended `pf-table` component with `pf-table--budget-summary` modifier hook - specifically designed for budget overviews - extended `pf-accordion` component with `pf-accordion--card` modifier hook - themed to look like the upcoming cards component. ## [2.8.0] - 2020-04-07 ### Added - `bg--grey-xlight` documentation for body class that adds a dark grey background. - `pf-icon-link`, and `pf-icon-link--primary` - links that use the SVG icons - `pf-media`, and `pf-media--centre` - simple layout component for image/text ### Updated - extended `input-text` component with `input-text--no-border` modifier hook. - extended `pf-table-overflow` component with `pf-table-overflow--white` modifier hook - useful when the background is not already white, say. - extended `pf-table` component with `pf-table--invisible` modifier hook - removes all borders, allows width to be defined automatically, resets text transform. - extended `pf-accordion-menu` component with `pf-accordion-menu--no-top` modifier hook - white removes the top margin. - extended `row-spacer` component with `row-spacer--center` modifier hook - to align the element (not text) in the center of a container. - extended `pf-table` component with `pf-table__cell-align-right` element to allow control of text direction on a cell-level. - extended `pf-accordion-menu` component with `pf-accordion-menu__item` element to allow multi-line submenu items - updated the toggle icons of the `pf-accordion-menu` to be more consistent with other icons. ## [2.7.1] - 2020-03-17 ### Updated - `modal` component with `[data-js="modal-close-continue"]` hook - closes a modal without preventing default behaviour of the element clicked ## [2.7.0] - 2020-03-09 ### Added - `pf-tabs` component ## [2.6.0] - 2020-03-02 ### Added - `pf-table--stripe` allows `pf-table` components to be themed with stripes. - `pill--larger` larger version of pill - `pill--box` boxes the pill with the same colour as the pill text - `pill--status` pills for student application status on search page ### Updated - changed all input components to inherit font sizes - documentation navigation - set `pf-accordion`, `pf-accordion-menu` to ready ## [2.5.6] - 2020-02-05 ### Updated - `pf-accordion-menu` small UI tweaks - remove top border, add breathing room to accordion chevrons ## [2.5.5] - 2020-01-09 ### Updated - `sprites.svg` now updates for both Gem and NPM package - `pf-accordion-menu` small UI tweaks - remove bold highlight, reverse colour hover states ## [2.5.4] - 2020-01-08 ### Added - `banking` SVG icon - `dashboard` SVG icon - `disbursement` SVG icon - `home` SVG icon - `search` SVG icon ### Updated - `pf-accordion-menu` reversed chevron direction based upon state - `pf-accordion-menu` tweaked hover state of chevrons - `pf-accordion-menu` documentation, examples, and upgraded to beta - `play-circle` SVG icon - `lock` SVG icon - `envelope` SVG icon ## [2.5.3] - 2019-12-20 ### Update - updated documentation for `pf-accordion-menu` - added open/closed chevrons to `pf-accordion-menu` - updated docs for `pf-loading` and `pf-logo` ## [2.5.2] - 2019-11-27 ### Added - Added alpha version of `pf-accordion-menu` component ### Update - security vulnerability fixes ## [2.5.1] - 2019-10-25 ### Update - Fix bug in `pf-accordion` ## [2.5.0] - 2019-10-23 ### Added - Add `mark` and `:focus` styles ### Update - Show existing `btn--danger` in docs ## [2.4.3] - 2019-10-10 ### Update - Notify Slack #frontend-support of master build status ## [2.4.2] - 2019-10-10 ### Update - auto deploy npm package to Prodigy private NPM server ## [2.4.1] - 2019-10-10 ### Update - `pf-accordion` fix to work across Chrome/Safari/Firefox/Edge ## [2.4.0] - 2019-10-09 ### Added - new `pf-accordion` component ## [2.3.2] - 2019-10-08 ### Updated - standalone CSS build tasks to standardise around `sass` package - icon library - all sprites are now hardcoded and usable until their removal in `v3.0.0` of UIF. - small copy changes to documentation ### Removed - grunticon and svgo from the build - new icons can no longer be added to the legacy sprite system automatically via the build steps; to add new icons use the SVG Sprites build step instead. ## [2.3.1] - 2019-09-26 ### Updated - `pf-select` improved default styling, e.g., border colours, added hover & focus states ## [2.3.0] - 2019-09-23 ### Updated - (build time) migrated SCSS and PostCSS compilation from Grunt to NPM task - migrated "copy file" tasks from Grunt to NPM task ### Removed - colours page from documentation - it was becoming laughably out of date and non-beneficial. - browsersync and watch Grunt tasks for development ### Added - `pf-select` component ## [2.2.3] - 2019-07-12 ### Updated - (dev) - update docker image ## [2.2.2] - 2019-07-12 ### Added - add `envelope` icon. ### Updated - updated `lock` icon. ## [2.2.1] - 2019-07-12 ### Removed - removed references to `jquery.pfFormStep.js` - the file didn't exist in the repo. - removed `_form-step.scss` - found no references to this ## [2.2.0] - 2019-07-10 ### Changed - changed `pfVideo` behaviour: enabled native YT controls - changed `pfVideo` behaviour: removed "close" functionality, hid close for any existing instances that include a close element. updated documents to no longer reference a close button. - changed `pfVideo` behaviour: onComplete of video, video is paused and returned to first frame. ## [2.1.5] - 2019-05-27 ### Changed - refined `dropdown-menu` code to improve it's ease-of-integration into other apps. ## [2.1.4] - 2019-05-23 ### Changed - extracted SVG-to-PNG process of old sprite files away from Grunt ## [2.1.3] - 2019-05-21 ### Changed - extracted SVG optimisation process for old sprite files away from Grunt ## [2.1.1] - 2019-05-20 ### Changed - Node version upgraded from `8.9.4` to `10.15.3` - extracted JS tests from Grunt - part of the eventual plan to remove Grunt entirely. - upgraded from deprecated Istanbul code coverage tool to NYC - Default Prettier updates to JS modules - no changes in functionality ## [2.1.0] - 2019-05-16 ### Added - `dropdown-menu` component - Grid helper - `row--align-justify` to evenly spread items horizontally inside a `row` ## [2.0.1] - 2019-05-03 ### Changed - `help-circle` icon has been updated to align with our other circled icons ## [2.0.0] - 2019-03-05 ### Removed - removed jQuery from the bundled JS - NOTE: jQuery is still a core dependency but should be included externally. - removed deprecated buttons ('light', 'large', 'small', 'xsmall') - removed date-range, and multiple date datepicker - removed icon-badge component - removed icon-text component - removed loading spinner component - removed pagination component - removed progress component - remove js implementation of styled checkboxes ### Changed - deprecated filterable select lists - take file upload component out of beta ## [1.7.9] - 2019-03-05 ### Changed - deprecation of old icon system deferred to v3 ## [1.7.8] - 2019-02-22 ### Added - added 4 new icons: - `hide` - `important-circle` - `ok-circle` - `show` ## [1.7.7] - 2019-01-11 ### Changed - reduced the gap between the tooltip and its target, when the tooltip appears below its target. ## [1.7.6] - 2018-11-19 ### Added - added the single-colour Prodigy logo ## [1.7.5] - 2018-11-05 ### Added - added animated SVG logo loading spinners ### Changed - escape HTML returned by `pfSelect` ## [1.7.4] - 2018-11-01 ### Changed - version of `jQuery` bumped from 1.9.1 to 1.12.0 to fix security vulnerabilities. ## [1.7.3] - 2018-10-01 ### Changed - `file-input` component now has a no-JS fallback, and has been moved out of beta. - Documentation for `file-input` component. ## [1.7.2] - 2018-09-13 ### Added - Step bar component - Visibility helpers - `.block-visible-small` show as a block on devices larger than mobile (hidden on mobile) - `.block-hidden-small` hide content on devices larger than mobile (show as block on mobile) ## [1.7.1] - 2018-08-29 ### Changed - File upload prototype (NOTE: still in beta) ## [1.7.0] - 2018-08-29 ### Added - SVG icon sprites. The days of creating new icons just for a different colour variant are over! ### Changed - Marked the old icon solution for deprecation ## [1.6.3] - 2018-08-28 ### Added - Added left chevron blue icon (`.icon--left-blue`) ## [1.6.2] - 2018-08-23 ### Changed - Fix: FlyOuts close to the right of the page would misbehave and place its contents off-screen. ## [1.6.1] - 2018-08-21 ### Added - Added cloud download icon (`.icon--cloud-download-blue`) - Added right chevron icon (`.icon--right-blue`) - Added info circle icon (`.icon--info-circle-blue`) - Added white hamburger icon (`.icon--hamburger-white`) ## [1.6.0] - 2018-08-13 ### Removed - Removed notices with a drop shadow (`.notice--shadow`) ## [1.5.5] - 2018-08-06 ### Added - Added file upload prototype (NOTE: currently in beta only, and will be subject to change) ## [1.5.4] - 2018-07-30 - Added status flag for each major component using new layout ## [1.5.3] - 2018-06-22 ### Changed - Fix: grey lock icon classname ## [1.5.2] - 2018-06-21 ### Added - Added grey lock icon ### Changed - Update docs for `pf-table`, `pill`, `progress`, `progressive-image`, `table`, `tooltip`, `video`, `panel`, `pagination`, `list-ordered`, `navigation`, `modal`, `loading`, `list-unordered`, `icon`, `icon-text`, `icon-badge`, `definition-list`, `fly-out`, `button`, `grid`, `accordion`, `datepicker`, and `notice` to use a more standardised layout. ## [1.5.1] - 2018-06-14 ### Changed - Process of publishing Gem to Gem Server - Fix standard notices so that they are dismissable (https://github.com/prodigyfinance/ui-core/issues/189) - Add `.rebind` function for tooltip component (https://github.com/prodigyfinance/ui-core/issues) ## [1.5.0] - 2018-04-30 ### Added - new `pf-table` component - new `pf-table-overflow` component - Added more documentation to Table and PF-Table components ### Removed - removed the highlight table theme (the blue table) ### Changed - Hover state of table rows to only trigger within the `tbody` - Updated table documentation to remove uneeded sort icons - there is no implementation in production that uses that approach. - Removed jQuery dependency and added new namespace on `$.pfNotice` -> `pf.notice` - Deprecated `pf.InputCheckbox` js component in favour of CSS-only approach ## [1.4.12] - 2018-02-09 ### Added - added focus state to checkboxes - updated background image of checkbox ### Changed - `form-field__msg` is no longer uppercase by default ## [1.4.10] - 2017-12-28 ### Added - added admin layout components cookbook page ## [1.4.8] - 2017-11-17 ### Added - added the `.circleci/config.yml` so that we are using Circle CI 2.0 to push the documentation, Gem, and NPM package. ### Removed - removed the `circle.yml` ## [1.4.7] - 2017-11-17 ### Changed - updated the `circle.yml` so that we automatically push the latest version of the documentation to S3. - updated the `circle.yml` so that we automatically push the latest version of UIF the npm repository. ## [1.4.3] - 2017-11-16 ### Changed - override Chrome's user agent styles that caused rounded borders on our buttons ## [1.4.2] - 2017-10-30 ### Changed - builds documentation to a minor version directory, instead of patch. (this means that there is only one place to see `v1.4.1`/`v1.4.2`/`v1.4.n` documentation - `/v1.4/`) ### Changed - Changed pfAutocomplete to no longer have dependency on pfLoading ## [1.4.0] - 2017-10-22 ### Changed - enhanced select now reflects `disabled` and `readonly` states of the original select. - updated documentation to show how to create boxed enhanced select components. - expanded the documentation around input text fields - input text fields now more consistently reflect `disabled` and `readonly` - checkbox input now reflects `disabled` and `readonly` states of the original input. - radio input now reflects `disabled` and `readonly` states of the original input. - expanded the documentation around radio input fields - de-deprecated circleular buttons and built a better example in the docs ### Added - "disabled checkbox" icon - "textarea" component ## [1.3.7] - 2017-10-10 ### Added - added a new layout helper class that visually hides HTML, but ensures it's still accessible for screen readers. ### Removed - removed invalid documentation for inline radio buttons. The data-js attribute is not required to use radios. ## [1.3.6] - 2017-10-04 ### Changed - the directory structure of the documentation from "Base, Components, Pages/Sections" to "Base, Components, _Form Elements_, Pages/Sections". - Added `jQuery.pfModal.show([element])`, and `jQuery.pfModal.closeAll()` functions to programatically open and close modals. ## [1.3.5] - 2017-10-03 ### Added - added new class for input-checkbox that hides a label ### Changed - the event that triggers a change between the select-all-checkbox and all affected child checkboxes is namespaced `change.pfUIFcheckbox` so that it is possible to more easily hook onto the native change event outside of UIF without collisions. ## [1.3.4] - 2017-10-03 ### Fixed - fly-out nav changed to expand to width of content by default, which fixes the problem of inner content getting cut off ## [1.3.3] - 2017-09-26 ### Fixed - filtered select was permanently stuck open. Caused by CSS being too order-dependant. This issue would have affected any release after v1.2.0 ## [1.3.2] - 2017-09-24 ### Fixed - broken documentation link from index page to our development approach page ### Removed - prototype registration pages section - prototype applications page - prototype sign-in page - various unused fixture images ### Changed - re-organised directory structure of remaining sections ## [1.3.1] - 2017-09-23 ### Fixed - Layout bug in Safari caused by clearfix fallback - Link to developing CSS & JS documentation - Some incorrect headings in documentation ### Added - Accessibility documentation ### Changed - Clarifying use of heading in typography documentation - Clarifying testing & linting documentation ## [1.3.0] - 2017-09-19 ### Added - Added the Progressive Image Loading module: - Added `_progressive-image.scss` module styles - Added `pfProgressiveImageLoading.js` module scripts ### Changed - deprecated several types of unused button classes (Light, Circle, Large, Default, Small, and Extra Small) that do not match with our design guidelines - to be removed in v2.0.0 - deprecated datepicker ranges and multiple date selector - to be removed in v2.0.0 - deprecated the 'Icon Text' and 'Icon Badge' components - to be removed in v2.0.0 - deprecated the 'Loading' component - to be removed in v2.0.0 - deprecated the vertical progress bars - to be removed in v2.0.0 ## [1.2.9] - 2017-09-18 ### Added - Added `_deprecated.scss` mixin - Added deprecation notice to the Pagination pages (the next major version will remove all the present implementations). ### Deprecated - the Pagination pages (the next major version will remove all the present implementations). ## [1.2.8] - 2017-14-08 ### Changed - Changed background colours of documentation from grey to white ## [1.2.7] - 2017-08-01 ### Fix - styling bug that was introduced as part of the `flatpickr.js` upgrade ## [1.2.6] - 2017-07-20 ### Changed - upgrade `flatpickr.js` from v2.3.5 -> v3.0.6 - updated documentation to include tag version on gem ## [1.2.5] - 2017-07-12 ### Changed - allow textfields that use the datepicker to also be editable by keyboard (duplicated tag from below) ## [1.2.4] - 2017-07-12 ### Changed - allow textfields that use the datepicker to also be editable by keyboard ## [1.2.3] - 2017-07-12 ### Changed - allow single datepickers to be bound to individual textfields via the `bindTo` function ## [1.2.2] - 2017-07-10 ### Removed - removed various MCST prototypes from the documentation; bulk class duplication prototype, class edit prototype, and class index protoype. ### Added - a blank layout for documentation purposes. The global footer page was using a layout designed for the MSCT prototypes - it is now using a more generic layout. ## [1.2.1] - 2017-07-06 ### Changed - upgraded `grunt-sass` v.1.2.0 -> v1.1.0 ### Added - an example of the global footer used across the several PF applications. ## [1.2.0] - 2017-06-26 ### Changed - extended carousel with optional configuration to provide navigational dots and to prevent infinite scrolling - updated carousel documentation - alphabetised SCSS partials ## [1.1.0] - 2017-04-13 ### Added - modals can now be triggered via the keyboard - depending upon the element being used as a trigger, will now be enter and/or spacebar ### Removed - removed an unused and undocumented blockquote style - removed unused handlebar templates ### Changed - typographical font size bump from 14px -> 16px - converted SASS typographic scale variable list into a more manageable map structure - restructured arrangement of documentation from `Base`, `Element`, and `Blocks` to just `Base` and `Components` ## [1.0.8] - 2017-04-07 ### Changed - showroom navigation bar submenus should be a standard width and links should turn blue on hover - added showroom navigation to documentation. Not sure if it should be here, as it's not a component we wish to propagate around the applications. - added documentation around how to increase the version of UIF after working on it. ## [1.0.7] - 2017-03-29 ### Fixed - Bumpversion integration ## [1.0.6] - 2017-03-28 ### Added - Bumpversion gem to assist with versioning ## [1.0.5] - 2017-02-23 ### Changed - UIF now runs through CircleCI - Added Istanbul code coverage Grunt task - Increased test coverage around JS components - Changed default font size inside input text fields to prevent the "screen zoom" effect when using mobile devices ### Added - more documentation around modal functionality that had been previously missed - `Object.assign` polyfill for Internet Explorer - and `pfInputFormatter` JS component to format date fields to either `YYYY-mm-dd` or `YY-mm`.