@abgov/react-components 3.4.0-beta.42 → 3.4.0-beta.46

package/README.md

@@ -1,112 +1,17 @@
-# react-components
+# React UI Components
 
 This library contains react components from the Government of Alberta.
 
 ## Installation
 
-1. Add @abgov/react-components
-   `npm add --save @abgov/react-components`
-2. OPTIONAL: in package.json specify the allowed versions for installation
-3. Add peer dependencies
-
-## Documentation
-
-Documentation is being worked on and will be provided soon.
-
-## Usage
-
+```bash
+npm add --save @abgov/react-components
 ```
-import { GoACallout } from '@abgov/react-components';
-import { GoAButton } from '@abgov/react-components';
-import { GoACheckbox } from '@abgov/react-components';
-import { GoANotification } from '@abgov/react-components';
-import { GoACard } from '@abgov/react-components';
-import { GoACardGroup } from '@abgov/react-components';
-import { GoABadge } from '@abgov/react-components';
-import { GoAElementLoader } from '@abgov/react-components';
-import { GoAPageLoader } from '@abgov/react-components';
-import { GoADropdown, GoAOption } from '@abgov/react-components';
-import { GoAHeader } from '@abgov/react-components';
-import { GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink} from '@abgov/react-components';
-import { GoARadioGroup } from '@abgov/react-components';
-
-function App() {
-    return (
-        <div>
-          <GoACallout type="emergency" title="Covid 19 Emergency" content="please be advised that in-center services are closed" />
-          <GoAButton
-            buttonType="primary"
-            buttonSize="normal"
-            toolTip="Hovering"
-            onClick={()=> alert("You have clicked the button")}
-          >Click Me!</GoAButton>
-          <GoAButton
-            buttonType="primary"
-            buttonSize="normal"
-            toolTip="Hovering"
-            onClick={()=> alert("You have clicked the button")}
-          >
-            <div>Or click me instead</div>
-          </GoAButton>
-          <GoACheckbox checked={true}>Checkbox 1</GoACheckbox>
-          <GoACard
-            title = 'Energy Diversification Act',
-            description = 'We're encouraging companies to turn out oil ad gas resources into more valuable products-creating good jobs for Albertans.',
-            cardImageUrl = 'working-in-cold-hero-3_rdax_75.jpg',
-            cardSize = 'auto',
-            titleUrl = 'http://www.google.ca'
-          />
-          <GoANotification
-            type="'important || 'information' || 'event' || 'emergency'",
-            title='Notification Title',
-            message="Information to the user goes in the message"
-            isDismissable: true,
-            notificationUrl: 'www.google.com',
-            title: 'Hidden Title',
-          </>
-          <GoACardGroup title={'Dashboard'} layout='basic' >
-            <GoACard  title="Energy Diversification Act 1"
-                          description="We are encouraging companies to turn out oil ad gas resources into more valuable products-creating good jobs for Albertans."
-                            titleUrl="http://www.google.ca"
-                        cardWidth={400}
-                        cardImageUrl="working-in-cold-hero-3_rdax_75.jpg"
-              />
-          </GoACardGroup>
-          <GoABadge
-                type='information'
-                content='text content'
-                icon={ icon variable}
-              />
-          <GoAElementLoader
-                visible={true}
-                size={25}
-                baseColour='#c8eef9',
-                spinnerColour='#0070c4'
-            />
-          <GoAPageLoader visible={true} type='infinite'>
-              Loading...
-          </GoAPageLoader>
-          <GoADropdown  label="Fruits"  description="Choose you favorite fruit!"  multiple="false"  typeAheadMode="none">
-            {
-              items.map((i) => <GoAOption key={i.id} value={i.id} label={i.label} />)
-            }
-          </GoADropdown>
-          <GoAHeader serviceName="Sample service" serviceHome="/" serviceLevel="Live" />
-          <GoAHeroBanner title="Upgrading our bitumen" backgroundUrl='...'}>
-            <GoAHeroBannerContent content='Resources are available to help ...'/>
-            <GoAHeroBannerLink linkText='Learn more' linkUrl='...'/>
-          </GoAHeroBanner>
-          <GoARadioGroup
-            name="fileSecurityOptions"
-            items={getFileTypesValues()}
-            onChange={(e) => {
-              setUploadFileType(e);
-            }}
-        />
-        </div>
 
+## Usage
 
-    )
-}
+Insert the following into your base index.html file's `<head>` section:
 
+```html
+<script src="https://unpkg.com/ionicons@5.5.3/dist/ionicons.js"></script>
 ```

package/experimental/experimental/icons/icon.component.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
-import { TestProps } from '../common';
 import './icons.scss';
-export declare type GoAIconType = 'close' | 'barChart' | 'build' | 'checkmarkCircle' | 'chevronDown' | 'closeCircle' | 'create' | 'download' | 'eyeOff' | 'eye' | 'file' | 'fitness' | 'helpCircle' | 'home' | 'hourGlass' | 'logout' | 'megaphone' | 'menu' | 'options' | 'pencil' | 'pauseCircle' | 'personCircle' | 'playCircle' | 'pulse' | 'receipt' | 'trash' | 'settings';
+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 IconSize = 'small' | 'medium' | 'large';
 export declare type IconVariant = 'round' | 'goa';
-interface Props extends TestProps {
+export declare type IconStyle = 'outline' | 'filled' | 'sharp';
+interface Props {
     type: GoAIconType;
     size?: IconSize;
+    style?: IconStyle;
 }
-export declare function GoAIcon({ type, size }: Props): JSX.Element;
+export declare function GoAIcon({ type, style, size }: Props): JSX.Element;
 export {};

package/experimental/experimental/index.d.ts

@@ -4,7 +4,7 @@ import { GoACard } from './card/card.component';
 import { GoAFlexRow } from './flex';
 import { GoAFormItem, GoAFormActions, GoAForm } from './form/form.component';
 import { GoAIcon, GoAIconButton } from './icons';
-import { GoAInput } from './input/input.component';
+import { GoAInput, GoAInputText, GoAInputPassword, GoAInputDate, GoAInputTime, GoAInputDateTime, GoAInputEmail, GoAInputSearch, GoAInputUrl, GoAInputTel, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputRange } from './input/input.component';
 import { GoAModal, GoAModalActions, GoAModalContent, GoAModalTitle } from './modal/modal.component';
 import { GoAScrollable } from './scrollable/scrollable.component';
 import { GoATextArea } from './textarea/textarea.component';
@@ -12,4 +12,4 @@ import { GoATransition, GoATransitionSequence } from './transitions';
 import type { GoAIconType } from './icons';
 import type { GoABadgeType } from './badge/badge.component';
 export type { GoAIconType, GoABadgeType };
-export { GoABadge, GoAAppVersionHeader, GoACard, GoAFlexRow, GoAForm, GoAFormActions, GoAFormItem, GoAIcon, GoAIconButton, GoAInput, GoAModal, GoAModalActions, GoAModalContent, GoAModalTitle, GoAScrollable, GoATextArea, GoATransition, GoATransitionSequence };
+export { GoABadge, GoAAppVersionHeader, GoACard, GoAFlexRow, GoAForm, GoAFormActions, GoAFormItem, GoAIcon, GoAIconButton, GoAInput, GoAInputText, GoAInputPassword, GoAInputDate, GoAInputTime, GoAInputDateTime, GoAInputEmail, GoAInputSearch, GoAInputUrl, GoAInputTel, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputRange, GoAModal, GoAModalActions, GoAModalContent, GoAModalTitle, GoAScrollable, GoATextArea, GoATransition, GoATransitionSequence };

package/experimental/experimental/input/input.component.d.ts

@@ -2,16 +2,43 @@ import { FC } from 'react';
 import { GoAIconType } from '../icons';
 import { OnChange } from '../../lib/_common/input';
 import './input.scss';
-declare type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local';
 interface Props {
     name: string;
     value: string;
-    type: InputType;
     id?: string;
     disabled?: boolean;
     placeholder?: string;
     leadingIcon?: GoAIconType;
     onChange: OnChange;
 }
-export declare const GoAInput: FC<Props>;
+export declare const GoAInput: FC<Props & {
+    type: string;
+}>;
+export declare const GoAInputText: FC<Props>;
+export declare const GoAInputPassword: FC<Props>;
+export declare const GoAInputDate: FC<Props & {
+    min: string;
+    max: string;
+}>;
+export declare const GoAInputTime: FC<Props>;
+export declare const GoAInputDateTime: FC<Props & {
+    min: string;
+    max: string;
+}>;
+export declare const GoAInputEmail: FC<Props>;
+export declare const GoAInputSearch: FC<Props>;
+export declare const GoAInputUrl: FC<Props>;
+export declare const GoAInputTel: FC<Props>;
+export declare const GoAInputFile: FC<Props>;
+export declare const GoAInputMonth: FC<Props>;
+export declare const GoAInputNumber: FC<Props & {
+    min: number;
+    max: number;
+    step: number;
+}>;
+export declare const GoAInputRange: FC<Props & {
+    min: number;
+    max: number;
+    step: number;
+}>;
 export default GoAInput;

package/experimental/experimental/modal/modal.component.d.ts

@@ -15,7 +15,7 @@ export declare const GoAModal: FC<ModalProps & ModalTestProps>;
 export default GoAModal;
 export declare const GoAModalActions: FC;
 export interface GoAModalContentProps {
-    scrollable?: boolean;
+    disableScroll?: boolean;
 }
 export declare const GoAModalContent: FC<GoAModalContentProps & TestProps>;
 export declare const GoAModalTitle: FC<TestProps>;