@flywheel-io/vision 2.0.0-beta.9 → 2.1.0-beta.0

package/src/components/changelog.mdx

@@ -0,0 +1,405 @@
+import {Meta} from '@storybook/addon-docs';
+
+<Meta title="Changelog"/>
+
+# Changelog
+
+## 2.1.0
+- [FwMultiSelect](/docs/form-controls-multi-select--docs)
+  - Fixes bug with select via keyboard movement being backwards
+  - Fix bug where custom menu items change focus from mouse hover events
+  - Custom menu items now get the selected state passed to them
+  - Custom menu items now support the useCheckbox prop
+- [FwTextInput](/docs/form-controls-text-input--docs)
+  - Replace the maxLength binding with an attribute binding on the input element. (null now disables the maxLength)
+
+## 2.0.0
+- new `randomColorSeed` prop for [`FwAvatar`](/docs/components-avatar--docs)
+- new `width` prop for [`FwTextInput`](/story/form-controls-text-input--docs)
+- Add options to have loading spinners inside [`FwChip`](/story/components-chip--spinner-chip);
+- Now uses storybook 8!
+- [`FwSelect`](/docs/form-controls-select--docs)
+    - now shrinks if parent container is too small
+    - uses offsetWidth to determine options width (this allows for dynamic widths to still be inherited by the options)
+- [`FwMultiSelect`](/docs/form-controls-multi-select--docs) major refactor, new features
+
+### Breaking changes
+- removed deprecated props `collapsed` and `variant` from [`FwMenu`](/docs/components-menu--docs)
+- remove `sticky` property from table elements
+- Upgrade to Angular@17
+- remove all dependency on `@angular/material`
+- removed all "legacy" components
+- `vision-light-theme` and `vision-dark-theme` classes now export no material theming
+- [`FwSelect`](/docs/form-controls-select--docs) no longer infers when to use the full option as its value. This behaviour can be enabled explicity with the new prop `useFullOptionAsValue`. Additionally it now accepts values written to it as options even if it can't find a matching option.
+
+## 1.19.1
+- Fix fw-paginator infinite rerender on set dynamic "pageIndex" input
+
+## 1.19.0
+- Added support to [`FwMultiSelect`](/docs/form-controls-multi-select--docs) for custom menus
+
+## 1.18.0
+- Icon update to v1.97
+- Added fwMenuRegister directive, which prevents multiple fw-menu components from being open simultaneously.
+
+## 1.17.0
+- Added [`FwNumberInput`](/docs/form-controls-number-input--docs)
+- Added [`FwButtonGroup`](/docs/form-controls-button-group--docs)
+- Modified [`FwButtonToggle`](/docs/form-controls-button-toggle--docs) to only support single selects and string value
+- Fixed [`FwCheckbox`](/docs/form-controls-checkbox--docs) click events and check state
+
+## 1.16.2
+- fix bug with [`FwContainedInput`](/docs/form-controls-contained-input--docs) not disabling properly
+
+## 1.16.1
+- update `cross-spawn` and `tar-fs` dependencies to address critical vulnerabilities
+
+## 1.16.0
+- Fix [FwSelect] filter logic for content projection.
+
+## 1.15.0
+- Remove "No Results Found" from [FwMenu] for content projection when it contains items.
+- Fix [FwPopover] close logic for the onmouseleave action.
+
+## 1.14.0
+- Add New Icons
+- Improve layout issues with Safari
+
+## 1.13.0
+- Add [`FwMenuItemGroup`](/story/components-menu--menu-item-group)
+
+## 1.12.5
+- padding fixes for radio [`FwMenuItem`](/story/components-menu--menu-item)
+
+## 1.12.4
+- Revert breaking [`FwSelect`](/docs/form-controls-select--docs) change
+
+## 1.12.3 (breaking - unpublished)
+- Remove vestigial `showTooltip` from `FwMenuItem`, fixes padding issues (This was unintentionally breaking, use 1.12.4)
+
+## 1.12.2
+- Disable Angular Material's theme duplication warnings
+
+## 1.12.1
+- Add missing 'size' prop to [`FwSelect`](/docs/form-controls-select--docs) and [`FwMultiSelect`](/story/form-controls-select--multi-select)
+- Fix some minor behavior problems in [`FwMultiSelect`](/story/form-controls-select--multi-select)
+
+## 1.12.0
+- Allow more colors in [`FwProgressBar`](/docs/components-progress-bar--docs)
+- Adjust colors in components using portal overlays
+- Add `vision.global-scrollbar` and `vision.scrollbar` scss mixins
+
+## 1.11.0
+- Moved helperText and errorText to the [`FwWrappedInput`](/docs/form-controls-wrapped-input--docs) component for a more consistent use.
+- Fixed tooltips on [`FwNavbar`](/docs/components-navbar--docs) Items and SubItems
+
+## 1.10.0
+- `FwTextArea` now has error highlighting when angular's invalid classes are applied
+- `FwButton` now forwards the 'type' prop to it's native button element
+- Add `notBeforeDate` and `notFutureDate` form validator functions
+- Add "No Results Found" to [`FwMenu`](/story/components-menu--menu-container-filter) and its derivatives
+- fix issue with [`FwSelect`](/docs/form-controls-select--docs) not updating title and values after options update
+- Enforced Vision Typography rules on all components regardless of ones use of global typography or not
+
+## 1.9.0
+- update icons to v1.94
+
+## 1.8.5
+- [`FwSelect`](/story/form-controls-select--select-empty-value) can now handle its `options` property changing after the component has mounted.
+
+## 1.8.4
+- Add emitter to change fw-select filter value.
+
+## 1.8.3
+- Add `staticIcon` propery to [`FwSelect`](/story/form-controls-select--select-static-icon)
+- fix issue with [`FwSelect`](/docs/form-controls-select--docs) erroring when not passed a change listener.
+- fix issue where [`FwSelect`](/docs/form-controls-select--docs) dropdown was still accessible when it was disabled.
+
+## 1.8.2
+- Removed `ngModel` from [`FwCheckbox`](/docs/form-controls-checkbox--docs) as it can cause runtime issues when it or other controls that rely on it are used inside of form groups particularly `NG01350`
+
+## 1.8.1
+- Icon update
+- [`FwSelect`](/story/form-controls-select--select-errored) now has an error state
+
+## 1.8.0
+- New [`FwTable`](/docs/components-table--docs) component
+- New [`FwCheckbox`](/docs/form-controls-checkbox--docs) component
+- New [`FwRadio`](/docs/form-controls-radio-button--docs) component
+- Change [`FwAlert`](/docs/components-alert--docs) to allow button without _showClose_
+- Add ReactiveForm support for [`FwContainedInput`](/docs/form-controls-contained-input--docs)
+- Improve value handling and docs on [`FwDateInput`](/docs/form-controls-date-input--docs)
+
+## 1.7.3
+- Add support to [`FwSelect`](/story/form-controls-select--select-empty-value) for ESC key press to reset value when closed and showReset is true
+- Fix a bug in [`FwSelect`](/story/form-controls-select--select-empty-value) where keyboard change gives different value type than mouse click change.
+- Fix a bug in [`FwMultiSelect`](/story/form-controls-select--multi-select) where it removes wrong chip
+- Improve keyboard support in [`FwMultiSelect`](/story/form-controls-select--multi-select)
+- Add missing exports for [`FwWrappedInput`](/docs/form-controls-wrapped-input--docs) component
+- Fix [`FwMenuItem`](/story/components-menu--menu-item) usage with angular's [RouterLink](https://angular.dev/api/router/RouterLink) directive.
+
+## 1.7.2
+- Fix a layout bug in [`FwAppIcon`](/docs/components-app-icon--docs) with chromium
+- Fix a bug in [`FwDateInput`](/docs/form-controls-date-input--docs) with change not firing on calendar change
+
+## 1.7.1
+- Updated [`FwAvatar`](/docs/components-avatar--docs) sizes to match design.
+- Updated [`FwLayoutPanel`](/docs/layout-panel--docs) to support *margin* and *padded*
+- Changed [`FwLayoutSidebar`](/docs/layout-sidebar--docs) width to be custom defined
+
+## 1.7.0
+- Reorganized Storybook to group Form Controls
+- New [`FwDateInput`](/docs/form-controls-date-input--docs) component
+- New [`FwWrappedInput`](/docs/form-controls-wrapped-input--docs) component
+- Update [`FwIcon`](/docs/components-icons--docs) adding 3 new ones
+- Add stronger typing to icon usage in components
+- Fix bug in [`FwPaginator`](/docs/components-paginator--docs) with arrow classes being wrong in dark mode.
+- Add Support for using [`FwTooltip`](/docs/components-tooltip--docs) with [`FwButtonToggleItem`](/docs/form-controls-button-toggle--docs)
+- Add ReactiveForm support for [`FwButtonToggle`](/docs/form-controls-button-toggle--docs)
+- Add keyboard support to [`FwSelect`](/story/form-controls-select--select-empty-value)
+
+## 1.6.1
+- Added `iconColor` property to [`FwCardHeader`](/docs/components-card--docs)
+
+## 1.6.0
+- Fix selected color switch for [`FwNavbar`](/docs/components-navbar--docs)
+- Fix FwNavbarSubItem toggle switch propagation bug
+- Fix FwNavbarSubItem sizing and UI issues
+- Add `muted` color option to FwIcons
+- Added showReset to [`FwSelect`](/story/form-controls-select--select-empty-value) to allow unsetting a select value
+- New [`FwProgressBar`](/docs/components-progress-bar--docs) component
+- New [`FwProgressSpinner`](/docs/components-progress-spinner--docs) component
+- Added progress variant to [`FwButton`](/docs/components-button--docs)
+
+## 1.5.1
+- Fix missing Exports for ContainedInput, FormHeading, Navbar
+- Fixed bug in [`FwMultiSelect`](/story/form-controls-select--multi-select-checked) when starting value is empty array
+- Fix bug in Dialog max-width sometimes being 5% less
+
+## 1.5.0
+- New [`FwContainedInput`](/docs/form-controls-contained-input--docs) component
+- New [`FwFormHeading`](/docs/form-controls-form-heading--docs) component
+- New [`FwNavbar`](/docs/components-navbar--docs) component split off from FwMenu
+- Added prefix feature to [`FwTextInput`](/story/form-controls-text-input--prefix)
+- Added selectedIcon feature to [`FwButtonToggle`](/docs/form-controls-button-toggle--docs)
+- Added selectedColor variants to [`FwButtonToggle`](/docs/form-controls-button-toggle--docs)
+- Updated [`Colors`](/docs/docs-colors--docs) for better visibility in dark mode
+- Updated overlay z-index for overlays to be 1100
+- Fixed flags not showing in [`FwPhoneInput`](/docs/form-controls-phone-input--docs)
+- Fixed bugs in [`FwSelect`](/docs/form-controls-select--docs) and [`FwMultiSelect`](/story/form-controls-select--multi-select-examples)
+
+## 1.4.1
+- Fix missing stylesheet for overlays
+- Fix missing Country Flag icons in [`FwPhoneInput`](/docs/form-controls-phone-input--docs)
+
+## 1.4.0
+- Added new [`FwTextAreaInput`](/docs/form-controls-textarea-input--docs) for multiple row text inputs with autoresizing capabilities.
+- Standardized and added vision.overlay to the [`Getting Started`](/docs/getting-started--docs)
+- Added link styles to the [`Typography`](/docs/docs-typography--mdx)
+- Added story example for a selectable [`FwCard`](/story/components-card--card-selectable)
+- Fix styling inconsistencies with [`FwDialog`](/docs/components-dialogs--docs)
+- Added standard inputs to [`FwDialogHeader`](/story/components-dialogs--dialog-easy-header) for icon and iconColor
+- Added support to [`FwSelect`](/story/form-controls-select--select-empty-value) to allow for empty value strings
+- Added [`FwLayoutPanel`](/docs/layout-panel--docs)
+- Added [`FwLayoutSidebar`](/docs/layout-sidebar--docs)
+- Added *dense* input to [`FwLayoutToolbar`](/docs/layout-toolbar--docs)
+- Added *padded* and *justify* inputs to [`FwLayoutGroup`](/docs/layout-group--docs)
+
+## 1.3.3
+- Fix [`FwSelect`](/docs/form-controls-select--docs) passing description to items from options, filter box closing, and docs.
+- Allow [`FwTextInput`](/docs/form-controls-text-input--docs) to pass through autofocus and autocomplete props to the input
+- Fix [`FwDialog`](/docs/components-dialogs--docs) documentation and examples for events
+- Add child placement in [`FwMenuHeader`](/story/components-menu--menu-complex) for a fw-badge and a fw-icon-button
+- Add child placement in [`FwMenuItem`](/story/components-menu--menu-complex) and `FwMenuSubItem` for a fw-badge and a fw-icon-button
+- Fix [`FwMenuItem`](/story/components-menu--menu-item) minor UI padding and overflow issues
+- Fix [`FwMenuSubItem`](/story/components-menu--menu-legacy-sidebar) not showing selected when value is set
+- Add color and size options to [`FwIcon`](/docs/components-icons--docs) as well as 2 new icons
+
+## 1.3.2
+- Fix scrollbar issue with [`FwMenu`](/docs/components-menu--docs) in windows
+- Fix data change events with [`FwSwitch`](/docs/components-switch--docs)
+
+## 1.3.1
+- Fix dependency bug with libphonenumber-js
+- Fix a width and title bug in [`FwDialog`](/docs/components-dialogs--docs)
+- Fix some [`FwChip`](/docs/components-chip--docs) design inconsistencies
+- Fix a border color in [`FwAppIcon`](/docs/components-app-icon--docs) dark mode
+
+## 1.3.0
+- Add [`FwPhoneInput`](/docs/form-controls-phone-input--docs) component
+- Add phone, email, url form validators in `FwValidators`
+- Fix bugs in [`FwMenu`](/docs/components-menu--docs) and [`FwSelect`](/docs/form-controls-select--docs)  with layout, searching and keypress when using filtering
+- Make [`FwBackButton`](/docs/components-section-heading--docs#back-button-only) a standalone component and added hover and active states to it
+- Fix a bug in [`FwLayoutContext`](/docs/layout-context--docs) with width not taking string as input for width
+- Fix layout for [`FwChip`](/story/components-chip--really-long-chips) with wrapping long titles in a constrained wrapper
+- New [`Legacy Sidebar`](/story/components-menu--menu-legacy-sidebar) Story
+- Collapsed [`FwMenu`](/story/components-menu--menu-legacy-sidebar) shows title in a tooltip on the icon
+- New fontColor option on [`FwAppIcon`](/docs/components-app-icon--docs)
+
+## 1.2.0
+- Adds a handful of new icons and updates a few others
+- Add the *fwMenuCloseTriggers* directive to  [`FwMenu`](/docs/components-menu--docs) to close a triggered menu on blur.
+- fix an issue with [`FwTextInput`](/docs/form-controls-text-input--docs) inheriting text-align
+
+
+## 1.1.3
+- Fix a bug in [`FwBadge`](/docs/components-badge--docs) when *hideZero* and *hideEmpty* used together.
+
+## 1.1.2
+- Add *hideZero* and *hideEmpty* to [`FwBadge`](/docs/components-badge--docs)
+
+## 1.1.1
+- Fix style breaking encapsulation problem between FwTextInput and FwIconButton
+- Fix [`FwSelect`](/docs/components-select--docs) not closing when clicking away from component.
+
+## 1.1.0
+- New [`FwSwitch`](/docs/components-switch--docs) Component a fancy boolean toggle switch.
+- New [`FwPaginator`](/docs/components-paginator--docs) Component for all your page selecting needs.
+- New [`FwButtonToggle`](/docs/components-button-toggle--docs) Component, used to group related options as buttons.
+- Better handling of [`FwSelect`](/docs/components-select--docs) of other value types.
+- Improved [`FwSelect`](/docs/components-select--docs) Angular Form support, docs and examples.
+- Fixed a bug where long non-breaking text breaks [`FwTooltip`](/docs/components-tooltip--docs)
+- Update [Getting Started](/docs/getting-started--docs#prerequisites) documentation prerequisites
+
+## 1.0.4
+- Fix an issue with certain events being not supported in Angular 17.
+
+## 1.0.3
+- [`FwMenu`](/docs/components-menu--docs) when useCheckbox=true and multiSelect=false will switch to a radiobutton
+- Provide working story of how to make a submenu
+- Add support for status on [`FwSectionHeading`](/docs/components-section-heading--docs) for [`FwChip`](/docs/components-chip--docs) to support status indication
+- Add bordered support to [`FwTabs`](/docs/components-tabs--docs)
+- Fix some edge case formatting issues in [`FwStepper`](/docs/components-stepper--docs)
+
+## 1.0.2
+- Switch mat-theme's accent to green
+- update some of the design links in storybook
+
+## 1.0.1
+- Fix a typing issue with the width property of [`FwDialog`](/docs/components-dialogs--docs)
+- Include global typography styles by default into [`FwCardContent`](/story/components-card--card-content)
+
+## 1.0.0
+1.0.0 makes a lot of changes to the way the library is organized. It also features a ton of docs additions, and some new components to boot.
+
+### New Stuff
+- Grid layout and a bunch of new docs talking about how page layouts are built with vision
+- Shadow CSS utils
+- Popover component
+- Badge component
+- Tooltip component
+
+### Breaking changes
+- All of the FwDialogs become FwLegacyDialog
+- Removal of all exported SCSS Colors
+- Change to the Angular Material theme Colors and Typography
+- Removal of all exported SCSS 'config'
+- Changes to the SCSS export structure and install process of the library
+- A lot of component property names have changed in an attempt to make naming more consistent
+
+### MR List
+- !114 Make Prop names more consistent
+- !109 Grid layout
+- !111 Add Branded App Icons
+- !113 Page Header Margin Fixes
+- !108 Add Shadows CSS Atoms
+- !107 Simplify Library Install
+- !97 Tooltip Component
+- !106 Organize Storybook Sidebar
+- !100 Badge Component
+- !105 Storybook font changes
+- !104 Simplify Material Typography Config
+- !93 VDS-23 Popover
+- !70 Move Dialog into FwLegacy
+- !86 Remove SCSS Config
+- !85 Organize and Consolidate SCSS
+- !84 Consolidate all color definitions
+- !83 Update Angular Material Theme
+- Many more bugfixes and doc updates
+
+## 0.16.1
+- !101 Dialog Header Size fix to h3 [VDS-78]
+- !102 Stepper Header Colors Fix [VDS-79]
+- !103 Text Label Fixes [VDS-80]
+
+## 0.16.0
+- !90 Snackbar [VDS-18]
+- !96 Menu Changes and Remove RouterLink [VDS-37]
+
+## 0.15.2
+- !95 App-Icon Margin issue
+
+## 0.15.1
+- !94 Add Exports for AppIcon
+
+## 0.14.0
+- !91 Update Icons to 1.7 [VDS-76]
+- !89 Menu Chip Color Fix [VDS-67]
+
+## 0.13.0
+- !79 [VDS-37] Menu
+- !87 [VDS-19] Chip
+- !82 [VSD-67] Select Menu
+
+## 0.12.0
+- !68 [FLYW-16367] Dialog Component
+- !69 Publish storybook as latest
+- !72 [FLYW-16366] Button Group
+- !74 Remove Elements
+- !73 Add Linting to Pipeline
+- !71 [FLYW-16343] Stepper Component
+- !75 [FLYW-20644] Card Component
+- !81 [VDS-66] Notification Container Bugfix
+- !77 [VDS-38] Breadcrumbs component and Page Layout
+- !78 [VDS-31] Context Layout
+
+## 0.11.3
+- !67 Text Input Adjustments
+
+## 0.11.2
+- !66 Border box fixes
+
+## 0.11.1
+- !65 Add new components to public api
+
+## 0.11.0
+- !64 Add Icon Button [FLYW-16346]
+- !63 Add Chip [FLYW-16355]
+- !62 Add Alert [FLYW-16364]
+- !61 Add Contributing guidelines [FLYW-21067]
+
+## 0.10.1
+- !60 Better Samples in Demo App [FLYW-21037]
+- !59 Add XL Avatar Variant [FLYW-21053]
+- !58 Add Linting rules [FLYW-20915]
+- !57 Text Input Followup fixes [FLYW-21022]
+
+## 0.10.0
+- !55 Text input component [FLYW-16429]
+- !54 Remove old code and hide unused components [FLYW-20840]
+
+## 0.9.3
+- !81 [VDS-66] Notification Container Buttons Bugfix
+
+## 0.9.2
+- !48 Add Figma links [FLYW-20616]
+- !51 Update Button component [FLYW-16365]
+- !52 Merge pipelines [FLYW-20826]
+- !53 Update .gitlab-ci.yml file [FLYW-20826]
+
+## 0.9.1
+- !50 Change Peer Deps for Angular 14.0 [FLYW-20740]
+
+## 0.9.0
+- !44 Upgrade Angular and Storybook FLYW-20579
+- !45 Add Color Library FLYW-16357
+- !46 Remove legacy peer deps from pipeline FLYW-20598
+- !47 Add Typography Styles FLYW-16733
+- !49 Update Icons to 1.6 FLYW-20705
+
+## 0.8.5
+- !43 Resolve peer deps issue FLYW-20549
+
+## 0.8.4
+- !42 Update icons to 1.5 FLYW-20461
+

package/src/components/checkbox/checkbox.component.html

@@ -0,0 +1,16 @@
+<div class="checkbox-wrapper" (click)="handleClick()" [ngClass]="disabled?'disabled':''">
+  <div [ngClass]="checkboxStyles">
+    <input
+      type="checkbox"
+      class="checkbox"
+      [checked]="checked"
+      [disabled]="disabled"
+      [name]="name"
+      (focusout)="focused=false"
+      (focusin)="focused=true"
+    />
+  </div>
+  <p class="vision-p2">{{ title }}
+    <ng-content></ng-content>
+  </p>
+</div>

package/src/components/checkbox/checkbox.component.scss

@@ -0,0 +1,189 @@
+@use "sass:map";
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  cursor: pointer;
+
+  p {
+    margin: 0 0 0 2px;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .compact {
+    width: 30px;
+    height: 30px;
+
+    .checkbox {
+      height: 15px;
+      width: 15px;
+    }
+  }
+
+  .medium {
+    width: 36px;
+    height: 36px;
+
+    .checkbox {
+      height: 18px;
+      width: 18px;
+    }
+
+    .checkbox::after {
+      font-size: 18px;
+    }
+  }
+
+  .fw-checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 21px;
+
+    .checkbox {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      appearance: none;
+      border: 2px solid var(--typography-light);
+      border-radius: 1.5px;
+      cursor: pointer;
+      margin: 0;
+    }
+
+    .checkbox::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      content: " ";
+      display: none;
+    }
+
+    .checkbox:checked::after {
+      background-image: url("data:image/svg+xml,%3Csvg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11L0 5.99996L1.41 4.58996L5 8.16996L12.59 0.579956L14 1.99996L5 11Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A");
+      display: block;
+    }
+
+    &.primary {
+      &:hover {
+        background: var(--primary-hover);
+      }
+
+      .checkbox:checked {
+        background-color: var(--primary-base);
+        border-color: var(--primary-base);
+      }
+
+      .checkbox:focus {
+        outline: none;
+        border: 2px solid var(--primary-base);
+      }
+
+      &.indeterminate {
+        .checkbox {
+          background-color: var(--primary-base);
+          border-color: var(--primary-base);
+        }
+      }
+
+      &.focused {
+        background: var(--primary-focus);
+
+        .checkbox {
+          border: 2px solid var(--primary-base);
+        }
+      }
+    }
+
+    &.secondary {
+      &:hover {
+        background: var(--secondary-hover);
+      }
+
+      .checkbox:checked {
+        background-color: var(--secondary-base);
+        border-color: var(--secondary-base);
+      }
+
+      .checkbox:focus {
+        outline: none;
+        border: 2px solid var(--secondary-base);
+      }
+
+      &.indeterminate {
+        .checkbox {
+          background-color: var(--secondary-base);
+          border-color: var(--secondary-base);
+        }
+      }
+
+      &.focused {
+        background: var(--secondary-focus);
+
+        .checkbox {
+          border: 2px solid var(--secondary-base);
+        }
+      }
+    }
+
+    &.indeterminate {
+      .checkbox::after {
+        background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' style='width: 1em; height: 1em;vertical-align: middle;fill: white;overflow: hidden;' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M984.615385 541.538462c0 15.753846-13.784615 29.538462-29.538462 29.538461h-886.153846c-15.753846 0-29.538462-13.784615-29.538462-29.538461v-59.076924c0-15.753846 13.784615-29.538462 29.538462-29.538461h886.153846c15.753846 0 29.538462 13.784615 29.538462 29.538461v59.076924z' /%3E%3C/svg%3E");
+        display: block;
+      }
+
+      .compact {
+        .checkbox::after {
+          font-size: 17px;
+        }
+      }
+
+      .medium {
+        .checkbox::after {
+          font-size: 22px;
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: .4;
+
+    .fw-checkbox {
+      &:hover {
+        background: none;
+      }
+
+      .checkbox {
+        border: 2px solid var(--typography-light);
+      }
+
+      .checkbox:checked {
+        background-color: var(--typography-light);
+        border: 2px solid var(--typography-light);
+      }
+
+      &.indeterminate {
+        .checkbox {
+          background-color: var(--typography-light);
+          border-color: var(--typography-light);
+        }
+      }
+    }
+
+    p {
+      color: var(--typography-light);
+    }
+  }
+}

package/src/components/checkbox/checkbox.component.ts

@@ -0,0 +1,68 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'fw-checkbox',
+  styleUrls: ['./checkbox.component.scss'],
+  templateUrl: './checkbox.component.html',
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: FwCheckboxComponent,
+    multi: true,
+  }],
+})
+export class FwCheckboxComponent implements ControlValueAccessor {
+  @Input() name?: string;
+  @Input() disabled: boolean = false;
+  @Input() size: 'medium' | 'compact' = 'medium';
+  @Input() color: 'primary' | 'secondary' = 'primary';
+  @Input() title: string;
+  @Input() focused: boolean = false;
+
+  get checkboxStyles(): string[] {
+    return [
+      'fw-checkbox',
+      this.color,
+      this.size,
+      this.focused ? 'focused' : '',
+      this.checked === undefined ? 'indeterminate' : '',
+      this.disabled ? 'disabled' : '',
+    ];
+  }
+
+  @Input() checked?: boolean;
+
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() change = new EventEmitter<boolean>();
+
+  onChange: (value: boolean) => void;
+  onTouched = (): void => {
+  };
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  writeValue(checked: boolean): void {
+    this.checked = checked;
+  }
+
+  handleClick(): void {
+    this.onTouched();
+    if (!this.disabled) {
+      this.checked = !this.checked;
+      if (this.onChange) {
+        this.onChange(this.checked);
+      }
+      this.change.emit(this.checked);
+    }
+  }
+}