@instawork/design-system/CHANGELOG.md

The design system for Instawork's web apps

# CHANGELOG: @instawork/design-system

## 4.9.0 - 08/07/2024
- Applied background color on html to ensure entire page has the same base background color

## 4.7.0 - 03/18/2024
- Synced latest published changes from Figma to design-system [PR](https://github.com/Instawork/design-system/pull/193). 
- Import IWDS colors into theme

## 4.7.0 - 02/23/2024
- Synced latest published changes from Figma to design-system [PR](https://github.com/Instawork/design-system/pull/193)

## 4.6.1 - 02/05/2024
- fix border color for invalid unchecked pills
- fix `.bg-primary-dark` for marketing theme

## 4.6.0 - 08/30/2023
- `.full-bleed` modifier for cards
- Add support for left, up and right opening dropdowns-dots
- Semantic dark colors for bg

## 4.5.1 - 06/22/2023
- `.font-serif` for applying serif font face
- Add support for `disabled` state in form-tag
- Banner updates to support all theme colors
- Marketing theme based on the new brand guidelines
- More semantic components
- MVP version of `.slide` component
- Update swatches to use the new design-system colors
- Separate out primary and accent color terminology
- Update color vars to use consistent names
- Update demo to use new semantic classes
- Add header font sizes to the demo
- Fix broken fonts on the [design site](design.instawork.com)

## 4.4.2 - 04/05/2023
- Upgraded luxon and made updates to handle breaking changes due to this package upgrade

## 4.3.3 - 02/01/2023
- Fix entry point with new directory structure

## 4.3.2 - 02/01/2023
- Fix packaging and move css into subdirectory so fonts are referenced correctly

## 4.3.1 - 02/01/2023
- Fix to prevent path resolution for url() references in css

## 4.3.0 - 01/10/2023
- Add semantic "light" variants for `.bg`, `.highlight`, and `.badge` components
- Fix `.floating-label` for `.custom-select`
- Add microinteraction to links with a `.link-hover` modifier
- Added new `.banner` component with semantic variants for all theme colors and "light" variants

## 4.2.1 - 10/31/2022
- Fix CTA colors in the marketing theme
- Improve alert-collapsible handling

## 4.2.0 - 10/14/2022
Lay the foundation for css-theming.

- Use css vars for theming the design system components
- Align components to the new color scheme
- Introduce scss wrappers for css vars
- Override "primary" themes for bg, button, and other components

## 4.1.0 - 10/06/2022
- Streamline supported colors
  - Fix up colors, and bring naming in sync with the design system
  - Reduce the text options to make it easier to move to semantic names
- Add focus borders on buttons & links using `:focus-visible` to improve a11y
- Add `.custom-tag-control-sm` modifier for small form tags
- Add `.form-control-xl` modifier for extra-large input boxes
- Handle collapsible alerts in a better way

## 4.0.0 - 09/19/2022
Revamp styles to implement the new design language

- Define new color scheme in `_colors.scss`
  - Only partially mapped to the old colors (❗️ breaking change)
- Add shadows to `.cards` (and a `.flat` class to remove the shadow)
- Add `.interactive` modifier to `.cards` which enables form validation states
- Add focus, error and success shadows to standard inputs
- Add focus, error and success shadows to custom controls (radio, checkbox, tag, etc)
- Update button sizes across all variants
- Add `.chip` component
- Add `.form-floating` modifier to enable floating labels for select & input elements
- Use scss variables extensively in custom styles
- Use rem instead of px

## 3.21.0 - 08/19/2022
- Moved component styles to individual files in scss/components/

## 3.20.0 - 7/7/2022
- Added default `:focus-visible` pseudo-class selector to buttons for tab selection highlighting. 

## 3.19.0 - 7/1/2022
- Added `:focus-visible` pseudo-class selector to buttons for tab selection highlighting. 

## 3.18.0 - 6/29/2022
- Added missing icon classes (manually generated for now). 

## 3.17.0 - 6/23/2022
- Add new highlights design (for use as nudges).

## 3.16.0 - 6/15/2022
- Add new alert classes in css (primary,secondary,dark,light).

## 3.15.0 - 2/10/2022
- Add support for avatar pro-level rings for avatars (for new shift list design).

## 3.14.0 - 2/7/2022
- No changes, published due to versioning mistake

## 3.9.0 - 1/31/2022
- Add support for a new Pie Fill component that can be filled based on the given percentage.


## 3.8.0 - 1/31/2022
- Add support for all IW colors as text colors.
- Add `gray` badge styles


## 3.7.0 - 8/13/2021
- Add `bronze`, `silver` and `platinum` pro level badges styles


## 3.6.0 - 7/20/2021
- Add `max` attribute option to `TimeRangeComponent` to prevent incorrectly incrementing dates of start or end values
  past a valid time
- Bump Luxon to 1.28.0

## 3.5.0 - 5/13/2021
- Add `avatar-xxxxl` size to support Falcon using the `user_avatar` template tag

## 3.4.0 - 4/19/2021

### NestedInputComponent
- add `show-disabled-value` attribute, which allows the value to continue being shown when the component is disabled

### TimeInputComponent
- update hour part styling to not align left when disabled and `show-disabled-value` is set

## 3.3.0 - 4/16/2021
- Add `SelectAllComponent` - "indeterminate"- enabled checkbox component that controls the checked state of
  matched checkbox inputs

## 3.2.0
*skipped due to NPM publishing issues*

### TimeInputComponent
- Improve empty state support
- add support for multi-part placeholders
- remove error thrown when incrementing a part value from no value - allows using arrow keys to increment/decrement an empty part

## 3.1.0 - 3/22/2021
- `TimeRangeComponent`: add `auto-adjust` attribute to allow disabling the functionality
  that automatically increments or decrements the date of the time component when
  times are selected that would put the end before the start

## 3.0.0 - 3/18/2021
### Components
- Refactor source code to TypeScript
- Package name is now `@instawork/design-system`
- Add `@instawork/testing` sub-project and package to expose `DomTesting` and related utilities
- Add configuration and scripting to support publishing to the npm registry
- First versions published to the npm registry

- Add `initComponents` helper to assist in loading and initializing component plugins in the required order

**Breaking Changes**
- Plugin initialization: to prevent side effects on component modules, jQuery plugins must be registered within the static `loadPlugin` function
  instead of extending the `$.fn` object within the base module
- `CustomInputComponent` - lifecycle hooks have changed, what was previously done in `initDom` may need to be moved to `initDomRefs`
- `TimeInputComponent` - it is now possible for `luxonValue` to have an invalid value given invalid input - `undefined` is now reserved
                         for completely empty input

### `CustomComponent`
- Automatically initialize the component's template if specified via `TEMPLATE` static property
- Add helper methods for creating attribute validation errors

### `CustomInputComponent`
- Add `hasFocus` and `required` properties

### `NestedInputComponent`
- Updated and added lifecycle hooks
- Add passthrough accessors for HTML validation API members

### `TemporalComponent`
- Base class containing shared logic for time-based components
- Use HTML validation API to report validation errors

### `TimeInputComponent`
- Refactor to subclass `TemporalComponent`
- Improve handling of invalid values and partial or missing input

### `TimeSelectorComponent`
- Initial implementation
- Similar to `TimeInputComponent`, but based on a `<select>` element instead of textual input

### `TimeRangeComponent`
- Update to support using any implementation of `TemporalComponent` as start/end sources
- Fix missing change event when removing value due to invalid upstream values

### Packaging and Publishing
- Add `next_semver` utility for calculating and updating package versions
- Add scripts for processing PUG and SCSS templates referenced from TypeScript files to assist in providing
  ES modules for package releases
- Add `dist_tag` script to automatically add distribution tags to releases based on the branch
- Add configuration to support publishing side-effect free modules

### Testing
- Add `ComponentDomHarness`, an implementation of `DomHarness` with some added utility for testing components
- Swap out `karma-coverage` for `karma-coverage-istanbul-reporter`, as it is more frequently updated, uses a more
  recently updated version of the `nyc` API, and claims better support for source maps and TypeScript

## 2.2.1 - 3/4/2021
- Fix color used for `custom-checkbox:indeterminate`

## 2.2.0 - 2/24/2021

### TimeRangeComponent
- add `add-minutes` and `subtract-minutes` optional attributes to support augmenting time range durations with
  extra inputs (e.g. break length)
  
### NestedInputComponent
- add `isModified` property, which returns true if the current value is different from the original value

### DateUtil
- Move `DateUtil` from the `time-input` component directory to `common`
- Move date / duration formatting methods out of `TimeRangeDisplayComponent` and into `DateUtil`

### isPlural
- Correctly handle numeric string values (e.g. `isPlural('0')` should return `true`)

### Packaging
- Add `lib` bundle output that is configured to support being imported as a module by a consumer app
- Add `bootstrap` to externals to prevent its JS from being included in the bundles
- Correctly mark `bootstrap` as a `peerDependency`

## 2.1.1 - 2/19/2021
- Implement dots for carousel indicators.

## 2.1.0 - 2/16/2021
### Common
- Add `pluralize` utility function to help with formatting UI text

### TimeRangeComponent
- Add `info` property to value object with `crossesMidnight` and `offsetChange` flags to provide additional information
  about the range value

### TimeRangeDisplayComponent
- Add new `iw-time-range-display` component, which provides a UI representation of the value of a `iw-time-range`
  component

### Testing
- Update `domHarness` to accept an optional jQuery selector that is used to select the host element of the component
  from the DOM fragment for tests that require a more complex UI
- Add `TIME` fixture with predefined time-related values
- Add `popoverFixture` for stubbing Bootstrap's popover jQuery plugin
- Extract reusable `initTimeInputsOptions` function for working with `domHarness` and `iw-time-input` components

## 2.0.0 - 2/15/2021
### TimeRangeComponent
- Add new `iw-time-range` component, which provides a controller for bounding two `iw-time-input` components
  to act as a max 24 hour time range
  
### CustomInputComponent
- Extract functionality not specific to forms / inputs to new `CustomComponent` base class

### TimeInputComponent
- **BREAKING**: Remove `previous-day-after` and `next-day-before` attributes and related functionality. Use
                `iw-time-range` instead.
  
### Testing
- Add `domHarness` test helper

## 1.20.0 - 2/2/2021
- Add `xxl` breakpoint

## 1.19.3 - 12/22/2020
### NestedInputComponent
- Synchronize validation attributes set on wrapper element to nested input value element

## 1.19.2 - 12/15/2020
### TimeInputComponent
- Use "aware" format when syncing value to the DOM 
- DateUtil: fix "python aware" format using incorrect timezone offset format

## 1.19.1 - 12/14/2020
### TimeInputComponent
- Fix bad/confusing parsing logic that did correctly convert input like "12:00 PM" to a valid DateTime
- Use DateTime.fromFormat to allow Luxon to do this work instead of replicating it

## 1.19.0 - 12/08/2020
### Components
- Add `iwOtherField` jQuery plugin to support showing and hiding text fields for "other" selections

## 1.18.1 - 11/23/2020
### Components
Improve IE compatibility
- Update webpack / Babel configurations so that Luxon is transpiled / polyfilled
- Add KeyboardInput compatibility utility (IE uses non-standard key names for arrow keys)
- Add `DateUtil.TIME_ZONE_SUPPORT` flag to detect whether the browser supports using time
  zones with Luxon's DateTime

## 1.18.0 - 11/20/2020
### Components
- Add `iwDesignSystem` global object to host design system public utilities and
  other functionality 

### `DateUtil`
- Extract generic date parsing functionality from `TimeInputComponent` to make it
  more easily and generally accessible
  
### `TimeInputComponent`
- Minor refactor to use extract `DateUtil` for date/time parsing
- prevent onInputKeyUp handler from executing on ArrowUp/ArrowDown keys: this was
  causing it to incorrectly move focus to the next part
- add workarounds for maintaining selection state

## 1.17.0 - 11/19/2020
- `NestedInputComponent` - add previous-day-after attribute to support decrementing the generated
  date when the selected time is after the specified value

## 1.16.0 - 11/18/2020
### `NestedInputComponent`
- extract/add shared functionality from `TimeInputComponent`
- automatically set "originalValue" from initial value element
- automatically track "currentValue" from value property changes
- optional "disabled placeholder" sets a disabled-state-specific placeholder and hides value and
  non-input content when input component is disabled, restores previously set value when re-enabled

### `TimeInputComponent`
- use timezone when constructing DateTime from part values
- use shared functionality from nested-input component

## 1.15.0 - 11/17/2020
- Extract common functionality from `TimeInputComponent` to `NestedInputComponent` and
  `CustomInputComponent` classes
- add component implementation for nested inputs (`NestedInputComponent`)
- update `TimeInputComponent` to subclass `NestedInputComponent`
- use `text-align: left` on "sized" numeric inputs that are disabled so that the placeholder
  lines up correctly

### `NestedInputComponent`
- fix "disabled" state styling for "nested" inputs
- fix components that are disabled being able to be focused (tabindex can be artificially added
  to make it tabbable, as is the case for time inputs - the fix removes the tabindex attribute
  and restores it when disabled state is removed)
- clicking inside the component (but not on the actual input) focuses the input

### `TimeInputComponent`
- allow entering a leading 0 for hours
- do not autocomplete value when entering a single character
- add validation state properties and CSS class

### Dev Server
- add CORS headers to allow fonts to be loaded when using build output from another app
- share common devServer configuration between normal dev server and components dev server

## 1.14.0 - 11/13/2020
- Add `.form-control-nested` styling to support using `.form-control`-like border / focus / 
  disabled state styling on inputs with additional content
- Add `form-control-sized` styling to facilitate sizing inputs based on the number of supported
  characters, as defined by the "size" attribute
- Add `form-control-no-spinner` to hide the native "spinner" controls rendered on number inputs

## 1.13.0 - 11/11/2020
- Add support for "aware" python datetime format
- Fix missing def check after attempting to use "next day before" value

## 1.12.0 - 11/09/2020
- Add `iw-time-input` component / `iwTimeInput` jQuery plugin
- Add Babel to Webpack build to transpile component JavaScript
- Add unit testing stack (karma / mocha / chai / istanbul)

## 1.11.0 - 10/15/2020
- Add bottom rounding to marketing css
- Add top rounding to marketing css

## 1.10.0 - 10/15/2020
- Add "right" icon
- Add "sm" (small) variants for directional icons
- Make icons autogenerate from SVG files

## 1.9.0 - 06/25/2020
- Add hover state for custom-tag-label.

## 1.8.0 - 06/24/2020
- Add responsive border utilities

## 1.7.0 - 06/11/2020
- Added CSS file for select2 styling.

## 1.6.1 - 05/28/2020
- Update progress bar styles

## 1.6.0 - 05/14/2020
- Add colors tab to design site

## 1.5.0 - 04/23/2020
- Add `form-control-currency` and `form-control-currency-usd`

## 1.4.2 - 04/16/2020
- Update color of blue2 to match the design system specs
- Use a 1px bottom border for tab navigation instead of 2x

## 1.4.1 - 04/03/2020
- Active tabs in nav tabs and navbar now overlap with the bottom border

## 1.4.0 - 03/19/2020
- Remove opacity on modal close icon

## 1.3.0 - 03/04/2020
- Add `up` icon

## 1.2.0 - 02/24/2020
- Add `btn-indicator` class for submit buttons with loading states

## 1.1.0 - 02/24/2020
- Remove redundant `package-lock.json` (project is set up with Yarn)
- Add `.nvmrc`
- Move `http-server` to `devDependencies`
- Lock dependencies to their current `minor` versions
- Regenerate `yarn.lock` for Node 12.x (required to allow `node-sass` to work with Node 12.x)
- Rebuild CSS with updated extended dependencies