@daffodil/design 0.89.0 → 0.91.0

package/radio/README.md

@@ -0,0 +1,52 @@
+# Radio
+Radio is used to select a single value from a selection of values.
+
+## Overview
+It can be hooked into Angular's `FormControl` to accomodate custom functionality. The `DaffRadioSetComponent` serves as a wrapper around a logical group of radios to provide styling.
+
+<design-land-example-viewer-container example="basic-radio"></design-land-example-viewer-container>
+
+## Usage
+
+### Within a standalone component
+To use radio in a standalone component, import `DAFF_RADIO_COMPONENTS` directly into your custom component:
+
+```ts
+import { DAFF_RADIO_COMPONENTS } from '@daffodil/design/radio';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DAFF_RADIO_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use radio in a module, import `DaffRadioModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+import { DaffRadioModule } from '@daffodil/design/radio';
+import { CustomComponent } from './custom.component';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffRadioModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> Deprecation notice: This method is deprecated. It's recommended to update all custom components to standalone.
+
+## Accessibility
+Radio uses native `<input>` HTML elements to ensure an accesible experience by default. It supports inputs to customize the experience for accessibility by allowing native input for `aria-label` and `aria-labelledby`.

package/radio/index.d.ts

@@ -0,0 +1,160 @@
+import * as i0 from '@angular/core';
+import { OnInit, EventEmitter } from '@angular/core';
+import * as i1 from '@angular/common';
+import { NgControl, ControlValueAccessor } from '@angular/forms';
+
+declare class DaffRadioSetComponent {
+    name: string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioSetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRadioSetComponent, "daff-radio-set", never, { "name": { "alias": "name"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class DaffRadioComponent implements OnInit {
+    private radioset;
+    /**
+     * @docs-private
+     */
+    _checked: boolean;
+    /**
+     * Output event of selection being changed
+     */
+    selectionChange: EventEmitter<boolean>;
+    /**
+     * The checked property of the radio
+     */
+    get checked(): boolean;
+    set checked(value: boolean);
+    /**
+     * The value of the radio
+     */
+    value: any;
+    /**
+     * The id of the radio. It is uniquely generated but can be overwritten by the user. Must be unique.
+     */
+    id: string;
+    /**
+     * Name of the Radio
+     */
+    name: string;
+    /**
+     * Used for aria-label. Default to name if user does not input a label.
+     */
+    label: string;
+    /**
+     * Used for aria-labelledby.
+     */
+    labelledby: string;
+    disabled: boolean;
+    focused: boolean;
+    constructor(radioset: DaffRadioSetComponent);
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
+    /**
+     * updates Focus styling
+     */
+    onFocus(): void;
+    /**
+     * updates Blur styling
+     */
+    onBlur(): void;
+    /**
+     * toggles checked attribute on
+     */
+    select(): void;
+    /**
+     * toggles checked attribute off
+     */
+    deselect(): void;
+    onChange(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioComponent, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRadioComponent, "daff-radio", never, { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "aria-label"; "required": false; }; "labelledby": { "alias": "aria-labelledby"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
+}
+
+declare class DaffRadioRegistry {
+    private _accessors;
+    /**
+     * @description
+     * Adds a control to the internal registry.
+     */
+    add(control: NgControl, accessor: DaffRadioControlValueAccessorDirective): void;
+    /**
+     * @description
+     * Removes a control from the internal registry.
+     */
+    remove(accessor: DaffRadioControlValueAccessorDirective): void;
+    /**
+     * @description
+     * Selects a radio button.
+     */
+    select(accessor: DaffRadioControlValueAccessorDirective): void;
+    private _isSameGroup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DaffRadioRegistry>;
+}
+
+/**
+ * ControlValueAccessor functionality for the DaffRadio
+ */
+declare class DaffRadioControlValueAccessorDirective implements OnInit, ControlValueAccessor {
+    _control: NgControl;
+    private _registry;
+    private _radio;
+    _onChange: () => void;
+    _onTouched: () => void;
+    /**
+     * The value of the ControlValueAccessor
+     */
+    value: any;
+    /**
+     * The name of the ControlValueAccessor
+     */
+    name: string;
+    constructor(_control: NgControl, _registry: DaffRadioRegistry, _radio: DaffRadioComponent);
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
+    /**
+     *
+     * writeValue function from the CVA interface
+     */
+    writeValue(value: any): void;
+    /**
+     * registerOnChange implemented from the CVA interface
+     */
+    registerOnChange(fn: any): void;
+    /**
+     * registerOnTouch implemented from the CVA interface
+     */
+    registerOnTouched(fn: any): void;
+    /**
+     * sets the disabled state.
+     */
+    setDisabledState?(isDisabled: boolean): void;
+    /**
+      calls select function for the radio
+     */
+    fireSelect(): void;
+    /**
+      calls deselect function for the radio
+     */
+    fireDeselect(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioControlValueAccessorDirective, [{ optional: true; self: true; }, null, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffRadioControlValueAccessorDirective, "daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]", never, { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class DaffRadioModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffRadioModule, never, [typeof i1.CommonModule, typeof DaffRadioComponent, typeof DaffRadioSetComponent, typeof DaffRadioControlValueAccessorDirective], [typeof DaffRadioComponent, typeof DaffRadioSetComponent, typeof DaffRadioControlValueAccessorDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffRadioModule>;
+}
+
+/**
+ * @docs-private
+ */
+declare const DAFF_RADIO_COMPONENTS: readonly [typeof DaffRadioComponent, typeof DaffRadioSetComponent, typeof DaffRadioControlValueAccessorDirective];
+
+export { DAFF_RADIO_COMPONENTS, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent };

package/scss/core/error/error-to-string.scss

@@ -1,13 +1,13 @@
 $use-string: false !default;
 
 @function error-to-string($message, $override: $use-string) {
-  @if $override {
-    @return $message;
-  } @else {
-    @error $message;
-  }
+	@if $override {
+		@return $message;
+	} @else {
+		@error $message;
+	}
 }
 
 @mixin set-use-string($state: true) {
-  $use-string: $state !global;
+	$use-string: $state !global;
 }

package/scss/core/map/map-get/map-get.scss

@@ -13,9 +13,9 @@
 // @throws error
 @function daff-map-get($map, $keys...) {
 	@each $key in $keys {
-    @if not map.has-key($map, $key) {
-      @return error-to-string.error-to-string("The map doesn't contain the $key: `#{$key}`'");
-    }
+		@if not map.has-key($map, $key) {
+			@return error-to-string.error-to-string("The map doesn't contain the $key: `#{$key}`'");
+		}
 		$map: map.get($map, $key);
 	}
 

package/scss/layout/_breakpoint.scss

@@ -20,7 +20,7 @@
 ///
 @mixin breakpoint($point) {
 	@if not map.has-key($map: v.$breakpoints, $key: $point) {
-		@warn 'breakpoint(): "#{$key}" is not defined in your $breakpoints setting.';
+		@warn 'breakpoint(): "#{$point}" is not defined in the $breakpoints map.';
 	}
 
 	@media (min-width: map.get(v.$breakpoints, $point)) {

package/scss/theme.scss

@@ -26,15 +26,15 @@
 @use '../button/src/button/stroked/stroked-theme' as stroked-button;
 @use '../button/src/button/underline/underline-theme' as underline-button;
 @use '../article/src/article-theme' as article;
-@use '../form-field/src/error-message/error-message-theme' as error-message;
-@use '../form-field/src/hint/hint-theme' as hint;
+@use '../tag/src/tag-theme' as tag;
+@use '../form/src/error-message/error-message-theme' as error-message;
+@use '../form/src/hint/hint-theme' as hint;
 @use '../form-field/src/form-field-theme' as form-field;
 @use '../native-select/src/native-select-theme' as native-select;
 @use '../loading-icon/src/loading-icon-theme' as loading-icon;
 @use '../accordion/src/accordion-theme' as accordion;
 @use '../callout/src/callout-theme' as callout;
 @use '../card/src/card-base-theme' as card-base;
-@use '../card/src/card/raised/raised-theme' as raised-card;
 @use '../card/src/card/stroked/stroked-theme' as stroked-card;
 @use '../hero/src/hero-theme' as hero;
 @use '../list/src/list-theme' as list;
@@ -71,6 +71,7 @@
 
 	@include accordion.daff-accordion-theme($theme);
 	@include article.daff-article-theme($theme);
+	@include tag.daff-tag-theme($theme);
 	@include breadcrumb.daff-breadcrumb-theme($theme);
 
 	@include button.daff-button-theme($theme);
@@ -82,7 +83,6 @@
 
 	@include callout.daff-callout-theme($theme);
 	@include card-base.daff-card-base-theme($theme);
-	@include raised-card.daff-raised-card-theme($theme);
 	@include stroked-card.daff-stroked-card-theme($theme);
 
 	@include form-field.daff-form-field-theme($theme);

package/scss/theming/_color-palettes.scss

@@ -1,10 +1,17 @@
+////
+/// @group color-palettes
+////
+
 // Base colors
-$daff-white: #ffffff;
+/// @access private
+$white: #ffffff;
+/// @access private
+$black: #070707;
+// need to deprecate
+/// @access private
 $error: #dd0000;
 
-// 60 apart passes AAA level for any size text (except for 10/70)
-// 50 apart passes AA level for any size text (except for 10/60)
-
+/// @access private
 $daff-blue: (
 	10: #ebf1ff,
 	20: #c4d8ff,
@@ -18,8 +25,10 @@ $daff-blue: (
 	100: #000033
 );
 
+/// @access private
 $daff-primary: $daff-blue;
 
+/// @access private
 $daff-purple: (
 	10: #ebebff,
 	20: #d4d3ff,
@@ -33,8 +42,10 @@ $daff-purple: (
 	100: #110033
 );
 
+/// @access private
 $daff-accent: $daff-purple;
 
+/// @access private
 $daff-turquoise: (
 	10: #d6fcea,
 	20: #9dfbd3,
@@ -48,6 +59,7 @@ $daff-turquoise: (
 	100: #082218
 );
 
+/// @access private
 $daff-yellow: (
 	10: #fffaeb,
 	20: #fff1c2,
@@ -61,6 +73,7 @@ $daff-yellow: (
 	100: #7a5e00
 );
 
+/// @access private
 $daff-red: (
 	10: #fcf1f1,
 	20: #fae0e0,
@@ -74,6 +87,7 @@ $daff-red: (
 	100: #3f0809,
 );
 
+/// @access private
 $daff-bronze: (
 	10: #fcf2eb,
 	20: #f7dac6,
@@ -87,6 +101,7 @@ $daff-bronze: (
 	100: #1a0f00,
 );
 
+/// @access private
 $daff-green: (
 	10: #d1fbd6,
 	20: #97f8a5,
@@ -100,8 +115,8 @@ $daff-green: (
 	100: #07230d,
 );
 
+/// @access private
 $daff-neutral: (
-	0: #ffffff,
 	10: #fafafa,
 	20: #e8e8e8,
 	30: #d3d3d3,
@@ -111,6 +126,5 @@ $daff-neutral: (
 	70: #5e5e5e,
 	80: #474747,
 	90: #323232,
-	100: #1a1a1a,
-	110: #070707
+	100: #1a1a1a
 );

package/scss/theming/_configure-theme.scss

@@ -5,21 +5,21 @@
 
 $daff-light-theme: (
 	'mode': 'light',
-	'font-color': get-color.daff-color(palette.$daff-neutral, 110),
-	'base': get-color.daff-color(palette.$daff-neutral, 0),
-	'base-contrast': get-color.daff-color(palette.$daff-neutral, 110),
-	'white': get-color.daff-color(palette.$daff-neutral, 0),
-	'black': get-color.daff-color(palette.$daff-neutral, 110),
+	'font-color': palette.$black,
+	'base': palette.$white,
+	'base-contrast': palette.$black,
+	'white': palette.$white,
+	'black': palette.$black,
 	'neutral': configure-palette.daff-configure-palette(palette.$daff-neutral, 60),
 );
 
 $daff-dark-theme: (
 	'mode': 'dark',
-	'font-color': get-color.daff-color(palette.$daff-neutral, 0),
-	'base': get-color.daff-color(palette.$daff-neutral, 100),
-	'base-contrast': get-color.daff-color(palette.$daff-neutral, 0),
-	'white': get-color.daff-color(palette.$daff-neutral, 0),
-	'black': get-color.daff-color(palette.$daff-neutral, 110),
+	'font-color': palette.$white,
+	'base': palette.$black,
+	'base-contrast': palette.$white,
+	'white': palette.$white,
+	'black': palette.$black,
 	'neutral': configure-palette.daff-configure-palette(palette.$daff-neutral, 50),
 );
 
@@ -28,6 +28,7 @@ $supported-theme-modes: (
 	'dark': $daff-dark-theme
 );
 
+/// @deprecated Use `daff-create-theme` instead.
 /// Create a theme object given some initial settings.
 ///
 /// Sets light and dark mode defaults for `$info`, `$warn`, `$critical`, and `$success`

package/scss/theming/_daff-theme.scss

@@ -1,5 +1,5 @@
 @use 'configure-palette';
-@use 'configure-theme';
+@use './create-theme/create-theme';
 @use 'color-palettes' as palette;
 @use '../core';
 
@@ -7,23 +7,14 @@ $primary: configure-palette.daff-configure-palette(palette.$daff-blue, 60);
 $secondary: configure-palette.daff-configure-palette(palette.$daff-purple, 60);
 $tertiary: configure-palette.daff-configure-palette(palette.$daff-turquoise, 60);
 
-$theme: configure-theme.daff-configure-theme(
-	$primary,
-	$secondary,
-	$tertiary,
-	'light'
+$theme: create-theme.daff-create-theme(
+	('primary': $primary, 'secondary': $secondary, 'tertiary': $tertiary, 'mode': 'light')
 );
 
 $primary-dark: configure-palette.daff-configure-palette(palette.$daff-blue, 50);
 $secondary-dark: configure-palette.daff-configure-palette(palette.$daff-purple, 50);
 $tertiary-dark: configure-palette.daff-configure-palette(palette.$daff-turquoise, 50);
 
-$theme-dark: configure-theme.daff-configure-theme(
-	$primary-dark,
-	$secondary-dark,
-	$tertiary-dark,
-	'dark'
+$theme-dark: create-theme.daff-create-theme(
+	('primary': $primary-dark, 'secondary': $secondary-dark, 'tertiary': $tertiary-dark, 'mode': 'dark')
 );
-
-$black: core.daff-map-get($theme, 'core', 'black');
-$white: core.daff-map-get($theme, 'core', 'white');

package/scss/theming/_get-base-color.scss

@@ -3,13 +3,13 @@
 /// Retrieves a core base color from a configured theme.
 ///
 /// If you are not using Daffodil's default theme, a theme **must** be
-/// created with `daff-configure-theme` before this function can be used.
+/// created with `daff-create-theme` before this function can be used.
 /// See the [customize your own theme](daff.io/docs/design/theming/customize-your-own-theme)
 /// guide for more information.
 ///
 /// @group Theming
 ///
-/// @param {Map} $theme — A theme map created with the `daff-configure-theme` function.
+/// @param {Map} $theme — A theme map created with the `daff-create-theme` function.
 /// @param {String} $color — The core color to retrieve. Supported colors: `white`, `black`, `base`, or `base-contrast`.
 ///
 /// @throws Will throw an error if `$color` is not supported as part of Daffodil's core colors.

package/scss/theming/_get-palette.scss

@@ -3,13 +3,13 @@
 /// Retrieves a specific color palette from a configured theme.
 ///
 /// If you are not using Daffodil's default theme, a theme **must** be
-/// created with `daff-configure-theme` before this function can be used.
+/// created with `daff-create-theme` before this function can be used.
 /// See the [customize your own theme](daff.io/docs/design/theming/customize-your-own-theme)
 /// guide for more information.
 ///
 /// @group Theming
 ///
-/// @param {Map} $theme — A theme map created with with `daff-configure-theme` function.
+/// @param {Map} $theme — A theme map created with with `daff-create-theme` function.
 /// @param {Map} $palette — The palette being retrieved.
 /// Supported values: `primary`, `secondary`, `tertiary`, `informational`, `warn`, `critical`, `success`, or `neutral`.
 ///

package/scss/theming/_get-theme-mode.scss

@@ -1,17 +1,17 @@
 @use '../core/map/map-get/map-get';
 
-/// Retrieves the mode (`light` or `dark`) from a configured theme created with `daff-configure-theme`.
+/// Retrieves the mode (`light` or `dark`) from a configured theme created with `daff-create-theme`.
 /// It should only be used if your app supports **both light and dark themes**.
 ///
 /// If you are not using Daffodil's default theme, a theme **must** be
-/// created with `daff-configure-theme` before this function can be used.
+/// created with `daff-create-theme` before this function can be used.
 ///
 /// See the [customize your own theme](daff.io/docs/design/theming/customize-your-own-theme)
 /// guide for more information.
 ///
 /// @group Theming
 ///
-/// @param {Map} $theme — A theme map created with the `daff-configure-theme` function.
+/// @param {Map} $theme — A theme map created with the `daff-create-theme` function.
 ///
 /// @example scss
 /// 	@use '@daffodil/design/scss/theme' as daff-theme;

package/scss/theming/_index.scss

@@ -3,9 +3,10 @@
 @forward 'contrast';
 @forward 'illuminate/illuminate';
 @forward 'configure-palette';
-@forward 'configure-theme';
+@forward 'create-theme/create-theme';
 @forward 'light-dark';
 @forward 'daff-theme';
 @forward 'get-palette';
 @forward 'get-base-color';
 @forward 'get-theme-mode';
+@forward 'configure-theme' show daff-configure-theme;

package/scss/theming/contrast/_index.scss

@@ -2,4 +2,5 @@
 
 @forward 'luminance/luminance';
 @forward 'contrast-ratio/contrast-ratio';
+@forward 'max-contrast/max-contrast';
 @forward 'text-contrast/text-contrast';

package/scss/theming/contrast/max-contrast/max-contrast.scss

@@ -0,0 +1,47 @@
+@use 'sass:list';
+@use '../contrast-ratio/contrast-ratio' as cr;
+@use '../../../core/error/error-to-string';
+
+/// Returns the color from a list of colors that has the highest contrast ratio with a reference color.
+/// If the list is empty, an error is thrown. If the list has one color, that color is returned.
+///
+/// @group Theming
+///
+/// @param {Color} $reference-color
+/// @param {List} $colors — A list of colors to compare against the reference color
+/// @return {Color} The color with the highest contrast ratio between the reference color and the color list
+///
+/// @example scss
+/// 	.card {
+/// 		background: daff-color($primary, 30);
+/// 		border-color: daff-max-contrast(daff-color($primary, 30), (daff-color($secondary, 70), daff-color($accent, 50)));
+/// 	}
+///
+@function daff-max-contrast(
+	$reference-color,
+	$colors: ()
+) {
+	@if(list.length($colors) == 0) {
+		@return error-to-string.error-to-string(
+			'Cannot calculate max contrast for `' + $reference-color + '`Provide at least one color to compare against.'
+		);
+	}
+	@else if(list.length($colors) == 1) {
+		@return list.nth($colors, 1);
+	}
+	@else {
+		$max-contrast: -1;
+		$max-contrast-color: null;
+
+		@each $color in $colors {
+			$current-contrast: cr.daff-contrast-ratio($reference-color, $color);
+
+			@if($current-contrast > $max-contrast) {
+				$max-contrast: $current-contrast;
+				$max-contrast-color: $color;
+			}
+		}
+
+		@return $max-contrast-color;
+	}
+}

package/scss/theming/contrast/max-contrast/max-contrast.spec.scss

@@ -0,0 +1,57 @@
+@use 'true' as *;
+@use './max-contrast' as *;
+@use '../../../core/error/error-to-string';
+
+@include describe('daff-max-contrast') {
+	$white: #ffffff;
+	$black: #000000;
+	$red: #ff0000;
+	$blue: #0000ff;
+	$gray: #808080;
+	$light-gray: #cccccc;
+	$dark-gray: #333333;
+
+	$single-color-list: ($white);
+	$two-color-list: ($white, $black);
+	$multiple-color-list: ($red, $blue, $gray, $light-gray, $dark-gray);
+	$empty-list: ();
+
+	@include error-to-string.set-use-string(true);
+
+	@include it('returns the contrast ratio for single color') {
+		@include assert-equal(daff-max-contrast($black, $single-color-list), white);
+	}
+
+	@include it('returns the highest contrast ratio from two colors') {
+		@include assert-equal(daff-max-contrast($black, $two-color-list), white);
+		@include assert-equal(daff-max-contrast($white, $two-color-list), black);
+	}
+
+	@include it('returns the highest contrast ratio from multiple colors') {
+		@include assert-equal(daff-max-contrast($black, $multiple-color-list), $light-gray);
+
+		@include assert-equal(daff-max-contrast($white, $multiple-color-list), $dark-gray);
+	}
+
+	@include it('returns consistent results regardless of list order') {
+		$reordered-list: ($dark-gray, $light-gray, $gray, $blue, $red);
+		@include assert-equal(
+			daff-max-contrast($black, $multiple-color-list),
+			daff-max-contrast($black, $reordered-list)
+		);
+	}
+
+	@include it('works with different reference colors') {
+		@include assert-equal(daff-max-contrast($red, ($white, $black, $blue)), black);
+		@include assert-equal(daff-max-contrast($blue, ($white, $black, $red)), white);
+	}
+
+	@include it('errors when given an empty color list') {
+		@include assert-equal(
+			daff-max-contrast($black, $empty-list),
+			'Cannot calculate max contrast for `' + $black + '`Provide at least one color to compare against.'
+		);
+	}
+
+	@include error-to-string.set-use-string(false);
+}