@abgov/react-components 4.0.0-alpha.13 → 4.0.0-alpha.16

package/lib/button/button.d.ts

@@ -2,8 +2,8 @@ import React, { FC, ReactNode } from 'react';
 import './button.css';
 import { GoAIconType } from '../icons';
 export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'start';
-export declare type ButtonSize = 'compact' | 'normal';
-export declare type ButtonVariant = 'default' | 'danger';
+export declare type ButtonSize = 'compact' | '';
+export declare type ButtonVariant = '' | 'danger';
 interface WCProps {
     type?: ButtonType;
     size?: ButtonSize;

package/lib/dropdown/dropdown.d.ts

@@ -4,14 +4,16 @@ export * from './dropdown-option';
 interface WCProps {
     ref: React.MutableRefObject<HTMLElement | null>;
     name: string;
-    values: string;
+    value: string;
     leadingicon?: string;
-    maxheight?: number;
+    maxheight?: string;
     placeholder?: string;
     filterable?: boolean;
     disabled?: boolean;
     error?: boolean;
     multiselect?: boolean;
+    width?: string;
+    testid?: string;
 }
 declare global {
     namespace JSX {
@@ -22,16 +24,17 @@ declare global {
 }
 interface Props {
     name: string;
-    values: string[];
-    onChange: (name: string, values: string[]) => void;
+    value: string[] | string;
+    onChange: (name: string, values: string[] | string) => void;
     disabled?: boolean;
     filterable?: boolean;
     leadingIcon?: GoAIconType;
-    maxHeight?: number;
+    maxHeight?: string;
     error?: boolean;
     multiselect?: boolean;
     placeholder?: string;
     testId?: string;
+    width?: string;
 }
 export declare const GoADropdown: FC<Props>;
 export default GoADropdown;

package/lib/icons/icon.d.ts

@@ -19,7 +19,7 @@ declare global {
         }
     }
 }
-export declare type GoAIconType = 'accessibility' | 'add-circle' | 'add' | 'airplane' | 'alarm' | 'albums' | 'alert-circle' | 'alert' | 'american-football' | 'analytics' | 'aperture' | 'apps' | 'archive' | 'arrow-back-circle' | 'arrow-back' | 'arrow-down-circle' | 'arrow-down' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-redo-circle' | 'arrow-redo' | 'arrow-undo-circle' | 'arrow-undo' | 'arrow-up-circle' | 'arrow-up' | 'at-circle' | 'at' | 'attach' | 'backspace' | 'bag-add' | 'bag-check' | 'bag-handle' | 'bag' | 'bag-remove' | 'balloon' | 'ban' | 'bandage' | 'bar-chart' | 'barbell' | 'barcode' | 'baseball' | 'basket' | 'basketball' | 'battery-charging' | 'battery-dead' | 'battery-full' | 'battery-half' | 'beaker' | 'bed' | 'beer' | 'bicycle' | 'bluetooth' | 'boat' | 'body' | 'bonfire' | 'book' | 'bookmark' | 'bookmarks' | 'bowling-ball' | 'briefcase' | 'browsers' | 'brush' | 'bug' | 'build' | 'bulb' | 'bus' | 'business' | 'cafe' | 'calculator' | 'calendar-clear' | 'calendar-number' | 'calendar' | 'call' | 'camera' | 'camera-reverse' | 'car' | 'car-sport' | 'card' | 'caret-back-circle' | 'caret-back' | 'caret-down-circle' | 'caret-down' | 'caret-forward-circle' | 'caret-forward' | 'caret-up-circle' | 'caret-up' | 'cart' | 'cash' | 'cellular' | 'chatbox-ellipses' | 'chatbox' | 'chatbubble-ellipses' | 'chatbubble' | 'chatbubbles' | 'checkbox' | 'checkmark-circle' | 'checkmark-done-circle' | 'checkmark-done' | 'checkmark' | 'chevron-back-circle' | 'chevron-back' | 'chevron-down-circle' | 'chevron-down' | 'chevron-forward-circle' | 'chevron-forward' | 'chevron-up-circle' | 'chevron-up' | 'clipboard' | 'close-circle' | 'close' | 'cloud-circle' | 'cloud-done' | 'cloud-download' | 'cloud-offline' | 'cloud' | 'cloud-upload' | 'cloudy-night' | 'cloudy' | 'code-download' | 'code' | 'code-slash' | 'code-working' | 'cog' | 'color-fill' | 'color-filter' | 'color-palette' | 'color-wand' | 'compass' | 'construct' | 'contract' | 'contrast' | 'copy' | 'create' | 'crop' | 'cube' | 'cut' | 'desktop' | 'diamond' | 'dice' | 'disc' | 'document-attach' | 'document-lock' | 'document' | 'document-text' | 'documents' | 'download' | 'duplicate' | 'ear' | 'earth' | 'easel' | 'egg' | 'ellipse' | 'ellipsis-horizontal-circle' | 'ellipsis-horizontal' | 'ellipsis-vertical-circle' | 'ellipsis-vertical' | 'enter' | 'exit' | 'expand' | 'extension-puzzle' | 'eye-off' | 'eye' | 'eyedrop' | 'fast-food' | 'female' | 'file-tray-full' | 'file-tray' | 'file-tray-stacked' | 'filenames.ps1' | 'film' | 'filter-circle' | 'filter' | 'finger-print' | 'fish' | 'fitness' | 'flag' | 'flame' | 'flash-off' | 'flash' | 'flashlight' | 'flask' | 'flower' | 'folder-open' | 'folder' | 'football' | 'footsteps' | 'funnel' | 'game-controller' | 'gift' | 'git-branch' | 'git-commit' | 'git-compare' | 'git-merge' | 'git-network' | 'git-pull-request' | 'glasses' | 'globe' | 'golf' | 'grid' | 'hammer' | 'hand-left' | 'hand-right' | 'happy' | 'hardware-chip' | 'headset' | 'heart-circle' | 'heart-dislike-circle' | 'heart-dislike' | 'heart-half' | 'heart' | 'help-buoy' | 'help-circle' | 'help' | 'home' | 'hourglass' | 'ice-cream' | 'id-card' | 'image' | 'images' | 'infinite' | 'information-circle' | 'information' | 'invert-mode' | 'journal' | 'key' | 'keypad' | 'language' | 'laptop' | 'layers' | 'leaf' | 'library' | 'link' | 'list-circle' | 'list' | 'locate' | 'location' | 'lock-closed' | 'lock-open' | 'log-in' | 'log-out' | 'magnet' | 'mail-open' | 'mail' | 'mail-unread' | 'male-female' | 'male' | 'man' | 'map' | 'medal' | 'medical' | 'medkit' | 'megaphone' | 'menu' | 'mic-circle' | 'mic-off-circle' | 'mic-off' | 'mic' | 'moon' | 'move' | 'musical-note' | 'musical-notes' | 'navigate-circle' | 'navigate' | 'newspaper' | 'notifications-circle' | 'notifications-off-circle' | 'notifications-off' | 'notifications' | 'nuclear' | 'nutrition' | 'open' | 'options' | 'paper-plane' | 'partly-sunny' | 'pause-circle' | 'pause' | 'paw' | 'pencil' | 'people-circle' | 'people' | 'person-add' | 'person-circle' | 'person' | 'person-remove' | 'phone-landscape' | 'phone-portrait' | 'pie-chart' | 'pin' | 'pint' | 'pizza' | 'planet' | 'play-back-circle' | 'play-back' | 'play-circle' | 'play-forward-circle' | 'play-forward' | 'play' | 'play-skip-back-circle' | 'play-skip-back' | 'play-skip-forward-circle' | 'play-skip-forward' | 'podium' | 'power' | 'pricetag' | 'pricetags' | 'print' | 'prism' | 'pulse' | 'push' | 'qr-code' | 'radio-button-off' | 'radio-button-on' | 'radio' | 'rainy' | 'reader' | 'receipt' | 'recording' | 'refresh-circle' | 'refresh' | 'reload-circle' | 'reload' | 'remove-circle' | 'remove' | 'reorder-four' | 'reorder-three' | 'reorder-two' | 'repeat' | 'resize' | 'restaurant' | 'return-down-back' | 'return-down-forward' | 'return-up-back' | 'return-up-forward' | 'ribbon' | 'rocket' | 'rose' | 'sad' | 'save' | 'scale' | 'scan-circle' | 'scan' | 'school' | 'search-circle' | 'search' | 'send' | 'server' | 'settings' | 'shapes' | 'share' | 'share-social' | 'shield-checkmark' | 'shield-half' | 'shield' | 'shirt' | 'shuffle' | 'skull' | 'snow' | 'sparkles' | 'speedometer' | 'square' | 'star-half' | 'star' | 'stats-chart' | 'stop-circle' | 'stop' | 'stopwatch' | 'storefront' | 'subway' | 'sunny' | 'swap-horizontal' | 'swap-vertical' | 'sync-circle' | 'sync' | 'tablet-landscape' | 'tablet-portrait' | 'telescope' | 'tennisball' | 'terminal' | 'text' | 'thermometer' | 'thumbs-down' | 'thumbs-up' | 'thunderstorm' | 'ticket' | 'time' | 'timer' | 'today' | 'toggle' | 'trail-sign' | 'train' | 'transgender' | 'trash-bin' | 'trash' | 'trending-down' | 'trending-up' | 'triangle' | 'trophy' | 'tv' | 'umbrella' | 'unlink' | 'videocam-off' | 'videocam' | 'volume-high' | 'volume-low' | 'volume-medium' | 'volume-mute' | 'volume-off' | 'walk' | 'wallet' | 'warning' | 'watch' | 'water' | 'wifi' | 'wine' | 'woman';
+export declare type GoAIconType = 'accessibility' | 'add-circle' | 'add' | 'airplane' | 'alarm' | 'albums' | 'alert-circle' | 'alert' | 'american-football' | 'analytics' | 'aperture' | 'apps' | 'archive' | 'arrow-back-circle' | 'arrow-back' | 'arrow-down-circle' | 'arrow-down' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-redo-circle' | 'arrow-redo' | 'arrow-undo-circle' | 'arrow-undo' | 'arrow-up-circle' | 'arrow-up' | 'at-circle' | 'at' | 'attach' | 'backspace' | 'bag-add' | 'bag-check' | 'bag-handle' | 'bag' | 'bag-remove' | 'balloon' | 'ban' | 'bandage' | 'bar-chart' | 'barbell' | 'barcode' | 'baseball' | 'basket' | 'basketball' | 'battery-charging' | 'battery-dead' | 'battery-full' | 'battery-half' | 'beaker' | 'bed' | 'beer' | 'bicycle' | 'bluetooth' | 'boat' | 'body' | 'bonfire' | 'book' | 'bookmark' | 'bookmarks' | 'bowling-ball' | 'briefcase' | 'browsers' | 'brush' | 'bug' | 'build' | 'bulb' | 'bus' | 'business' | 'cafe' | 'calculator' | 'calendar-clear' | 'calendar-number' | 'calendar' | 'call' | 'camera' | 'camera-reverse' | 'car' | 'car-sport' | 'card' | 'caret-back-circle' | 'caret-back' | 'caret-down-circle' | 'caret-down' | 'caret-forward-circle' | 'caret-forward' | 'caret-up-circle' | 'caret-up' | 'cart' | 'cash' | 'cellular' | 'chatbox-ellipses' | 'chatbox' | 'chatbubble-ellipses' | 'chatbubble' | 'chatbubbles' | 'checkbox' | 'checkmark-circle' | 'checkmark-done-circle' | 'checkmark-done' | 'checkmark' | 'chevron-back-circle' | 'chevron-back' | 'chevron-down-circle' | 'chevron-down' | 'chevron-forward-circle' | 'chevron-forward' | 'chevron-up-circle' | 'chevron-up' | 'clipboard' | 'close-circle' | 'close' | 'cloud-circle' | 'cloud-done' | 'cloud-download' | 'cloud-offline' | 'cloud' | 'cloud-upload' | 'cloudy-night' | 'cloudy' | 'code-download' | 'code' | 'code-slash' | 'code-working' | 'cog' | 'color-fill' | 'color-filter' | 'color-palette' | 'color-wand' | 'compass' | 'construct' | 'contract' | 'contrast' | 'copy' | 'create' | 'crop' | 'cube' | 'cut' | 'desktop' | 'diamond' | 'dice' | 'disc' | 'document-attach' | 'document-lock' | 'document' | 'document-text' | 'documents' | 'download' | 'duplicate' | 'ear' | 'earth' | 'easel' | 'egg' | 'ellipse' | 'ellipsis-horizontal-circle' | 'ellipsis-horizontal' | 'ellipsis-vertical-circle' | 'ellipsis-vertical' | 'enter' | 'exit' | 'expand' | 'extension-puzzle' | 'eye-off' | 'eye' | 'eyedrop' | 'fast-food' | 'female' | 'file-tray-full' | 'file-tray' | 'file-tray-stacked' | 'filenames.ps1' | 'film' | 'filter-circle' | 'filter' | 'finger-print' | 'fish' | 'fitness' | 'flag' | 'flame' | 'flash-off' | 'flash' | 'flashlight' | 'flask' | 'flower' | 'folder-open' | 'folder' | 'football' | 'footsteps' | 'funnel' | 'game-controller' | 'gift' | 'git-branch' | 'git-commit' | 'git-compare' | 'git-merge' | 'git-network' | 'git-pull-request' | 'glasses' | 'globe' | 'golf' | 'grid' | 'hammer' | 'hand-left' | 'hand-right' | 'happy' | 'hardware-chip' | 'headset' | 'heart-circle' | 'heart-dislike-circle' | 'heart-dislike' | 'heart-half' | 'heart' | 'help-buoy' | 'help-circle' | 'help' | 'home' | 'hourglass' | 'ice-cream' | 'id-card' | 'image' | 'images' | 'infinite' | 'information-circle' | 'information' | 'invert-mode' | 'journal' | 'key' | 'keypad' | 'language' | 'laptop' | 'layers' | 'leaf' | 'library' | 'link' | 'list-circle' | 'list' | 'locate' | 'location' | 'lock-closed' | 'lock-open' | 'log-in' | 'log-out' | 'magnet' | 'mail-open' | 'mail' | 'mail-unread' | 'male-female' | 'male' | 'man' | 'map' | 'medal' | 'medical' | 'medkit' | 'megaphone' | 'menu' | 'mic-circle' | 'mic-off-circle' | 'mic-off' | 'mic' | 'moon' | 'move' | 'musical-note' | 'musical-notes' | 'navigate-circle' | 'navigate' | 'newspaper' | 'notifications-circle' | 'notifications-off-circle' | 'notifications-off' | 'notifications' | 'nuclear' | 'nutrition' | 'open' | 'options' | 'paper-plane' | 'partly-sunny' | 'pause-circle' | 'pause' | 'paw' | 'pencil' | 'people-circle' | 'people' | 'person-add' | 'person-circle' | 'person' | 'person-remove' | 'phone-landscape' | 'phone-portrait' | 'pie-chart' | 'pin' | 'pint' | 'pizza' | 'planet' | 'play-back-circle' | 'play-back' | 'play-circle' | 'play-forward-circle' | 'play-forward' | 'play' | 'play-skip-back-circle' | 'play-skip-back' | 'play-skip-forward-circle' | 'play-skip-forward' | 'podium' | 'power' | 'pricetag' | 'pricetags' | 'print' | 'prism' | 'pulse' | 'push' | 'qr-code' | 'radio-button-off' | 'radio-button-on' | 'radio' | 'rainy' | 'reader' | 'receipt' | 'recording' | 'refresh-circle' | 'refresh' | 'reload-circle' | 'reload' | 'remove-circle' | 'remove' | 'reorder-four' | 'reorder-three' | 'reorder-two' | 'repeat' | 'resize' | 'restaurant' | 'return-down-back' | 'return-down-forward' | 'return-up-back' | 'return-up-forward' | 'ribbon' | 'rocket' | 'rose' | 'sad' | 'save' | 'scale' | 'scan-circle' | 'scan' | 'school' | 'search-circle' | 'search' | 'send' | 'server' | 'settings' | 'shapes' | 'share' | 'share-social' | 'shield-checkmark' | 'shield-half' | 'shield' | 'shirt' | 'shuffle' | 'skull' | 'snow' | 'sparkles' | 'speedometer' | 'square' | 'star-half' | 'star' | 'stats-chart' | 'stop-circle' | 'stop' | 'stopwatch' | 'storefront' | 'subway' | 'sunny' | 'swap-horizontal' | 'swap-vertical' | 'sync-circle' | 'sync' | 'tablet-landscape' | 'tablet-portrait' | 'telescope' | 'tennisball' | 'terminal' | 'text' | 'thermometer' | 'thumbs-down' | 'thumbs-up' | 'thunderstorm' | 'ticket' | 'time' | 'timer' | 'today' | 'toggle' | 'trail-sign' | 'train' | 'transgender' | 'trash-bin' | 'trash' | 'trending-down' | 'trending-up' | 'triangle' | 'trophy' | 'tv' | 'umbrella' | 'unlink' | 'videocam-off' | 'videocam' | 'volume-high' | 'volume-low' | 'volume-medium' | 'volume-mute' | 'volume-off' | 'walk' | 'wallet' | 'warning' | 'watch' | 'water' | 'wifi' | 'wine' | 'woman' | "logo-alipay" | "logo-amazon" | "logo-amplify" | "logo-android" | "logo-angular" | "logo-apple" | "logo-apple-appstore" | "logo-apple-ar" | "logo-behance" | "logo-bitbucket" | "logo-bitcoin" | "logo-buffer" | "logo-capacitor" | "logo-chrome" | "logo-closed-captioning" | "logo-codepen" | "logo-css3" | "logo-designernews" | "logo-deviantart" | "logo-discord" | "logo-docker" | "logo-dribbble" | "logo-dropbox" | "logo-edge" | "logo-electron" | "logo-euro" | "logo-facebook" | "logo-figma" | "logo-firebase" | "logo-firefox" | "logo-flickr" | "logo-foursquare" | "logo-github" | "logo-gitlab" | "logo-google" | "logo-google-playstore" | "logo-hackernews" | "logo-html5" | "logo-instagram" | "logo-ionic" | "logo-ionitron" | "logo-javascript" | "logo-laravel" | "logo-linkedin" | "logo-markdown" | "logo-mastodon" | "logo-medium" | "logo-microsoft" | "logo-no-smoking" | "logo-nodejs" | "logo-npm" | "logo-octocat" | "logo-paypal" | "logo-pinterest" | "logo-playstation" | "logo-pwa" | "logo-python" | "logo-react" | "logo-reddit" | "logo-rss" | "logo-sass" | "logo-skype" | "logo-slack" | "logo-snapchat" | "logo-soundcloud" | "logo-stackoverflow" | "logo-steam" | "logo-stencil" | "logo-tableau" | "logo-tiktok" | "logo-tumblr" | "logo-tux" | "logo-twitch" | "logo-twitter" | "logo-usd" | "logo-venmo" | "logo-vercel" | "logo-vimeo" | "logo-vk" | "logo-vue" | "logo-web-component" | "logo-wechat" | "logo-whatsapp" | "logo-windows" | "logo-wordpress" | "logo-xbox" | "logo-xing" | "logo-yahoo" | "logo-yen" | "logo-youtube";
 export declare type IconSize = 'small' | 'medium' | 'large' | 'xlarge';
 export declare type IconVariant = 'primary' | 'secondary' | 'tertiary';
 export declare type IconTheme = 'outline' | 'filled' | 'sharp';

package/lib/textarea/textarea.d.ts

@@ -9,6 +9,7 @@ interface WCProps {
     disabled?: boolean;
     showcounter?: boolean;
     maxcharcount?: number;
+    width?: string;
 }
 declare global {
     namespace JSX {
@@ -27,6 +28,7 @@ interface Props {
     disabled?: boolean;
     showCounter?: boolean;
     maxCharCount?: number;
+    width?: string;
     testId?: string;
     onChange: (name: string, value: string) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.13",
+  "version": "4.0.0-alpha.16",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -160,8 +160,8 @@ const GoAButton = ({
   title,
   disabled: _disabled = false,
   type: _type = 'primary',
-  size: _size = 'normal',
-  variant: _variant = 'default',
+  size: _size = '',
+  variant: _variant = '',
   leadingIcon,
   trailingIcon,
   children,
@@ -365,9 +365,10 @@ const GoADropdown = props => {
     const handler = state => {
       const {
         name,
-        value
+        value,
+        values
       } = state.detail;
-      props.onChange(name, value);
+      props.onChange(name, props.multiselect ? values : value);
     };
 
     current.addEventListener('_change', handler);
@@ -378,7 +379,7 @@ const GoADropdown = props => {
   return jsx("goa-dropdown", Object.assign({
     ref: el,
     name: props.name,
-    values: JSON.stringify(props.values),
+    value: JSON.stringify(props.value),
     leadingicon: props.leadingIcon,
     maxheight: props.maxHeight,
     placeholder: props.placeholder,
@@ -386,7 +387,8 @@ const GoADropdown = props => {
     disabled: props.disabled,
     multiselect: props.multiselect,
     error: props.error,
-    "data-testid": props.testId
+    testid: props.testId,
+    width: props.width
   }, {
     children: props.children
   }), void 0);
@@ -838,6 +840,7 @@ const GoATextArea = ({
   disabled,
   showCounter,
   maxCharCount,
+  width,
   testId,
   error,
   onChange
@@ -872,6 +875,7 @@ const GoATextArea = ({
     disabled: disabled,
     showcounter: showCounter,
     maxcharcount: maxCharCount,
+    width: width,
     error: error,
     "data-testid": testId
   }, void 0);

package/react-components.umd.js

@@ -194,9 +194,9 @@
           _c = _a.type,
           type = _c === void 0 ? 'primary' : _c,
           _d = _a.size,
-          size = _d === void 0 ? 'normal' : _d,
+          size = _d === void 0 ? '' : _d,
           _e = _a.variant,
-          variant = _e === void 0 ? 'default' : _e,
+          variant = _e === void 0 ? '' : _e,
           leadingIcon = _a.leadingIcon,
           trailingIcon = _a.trailingIcon,
           children = _a.children,
@@ -398,8 +398,9 @@
         var handler = function handler(state) {
           var _a = state.detail,
               name = _a.name,
-              value = _a.value;
-          props.onChange(name, value);
+              value = _a.value,
+              values = _a.values;
+          props.onChange(name, props.multiselect ? values : value);
         };
 
         current.addEventListener('_change', handler);
@@ -410,7 +411,7 @@
       return jsxRuntime.jsx("goa-dropdown", __assign({
         ref: el,
         name: props.name,
-        values: JSON.stringify(props.values),
+        value: JSON.stringify(props.value),
         leadingicon: props.leadingIcon,
         maxheight: props.maxHeight,
         placeholder: props.placeholder,
@@ -418,7 +419,8 @@
         disabled: props.disabled,
         multiselect: props.multiselect,
         error: props.error,
-        "data-testid": props.testId
+        testid: props.testId,
+        width: props.width
       }, {
         children: props.children
       }), void 0);
@@ -840,6 +842,7 @@
           disabled = _a.disabled,
           showCounter = _a.showCounter,
           maxCharCount = _a.maxCharCount,
+          width = _a.width,
           testId = _a.testId,
           error = _a.error,
           onChange = _a.onChange;
@@ -872,6 +875,7 @@
         disabled: disabled,
         showcounter: showCounter,
         maxcharcount: maxCharCount,
+        width: width,
         error: error,
         "data-testid": testId
       }, void 0);