@abgov/react-components 3.4.0-alpha.1 → 3.4.0-alpha.5

package/lib/modal/modal.d.ts

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+interface WCProps {
+    ref: React.RefObject<HTMLElement>;
+    title: string;
+    closable: boolean;
+    scrollable: boolean;
+    open?: boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-modal': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    title: string;
+    closable: boolean;
+    open?: boolean;
+    onClose?: () => void;
+}
+export declare const GoAModal: FC<Props>;
+export default GoAModal;

package/lib/notification/notification.d.ts

@@ -1,38 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import '../../../../core-css/src/lib/styles/notification/notification.scss';
-import '../../../../core-css/src/lib/styles/notification-banner/notification-banner.scss';
-declare type notificationType = "important" | 'information' | 'event' | 'emergency';
-export interface NotificationProps {
-    /**
-      * The type of the notification, changes stylings and icons.
-    */
-    type?: notificationType;
-    /**
-     * Notification message
-    */
-    message?: string;
-    /**
-     * Hidden title message
-    */
-    title?: string;
-    /**
-     * Optional link for notification, if no link is provided notification will not contain anchor.
-    */
-    notificationUrl?: string;
-    /**
-     * Boolean: can this notification be closed?
-    */
-    isDismissable?: boolean;
+declare type NotificationType = "important" | 'information' | 'event' | 'emergency';
+interface WCProps {
+    type: NotificationType;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-notification': WCProps & React.HTMLAttributes<HTMLButtonElement>;
+        }
+    }
+}
+export interface Props {
+    type?: NotificationType;
     children?: React.ReactNode;
-    onDismiss?: () => void;
 }
-export declare const GoANotification: {
-    ({ title, type, message, notificationUrl, isDismissable, children, onDismiss, ...props }: NotificationProps): JSX.Element;
-    propTypes: {
-        title: PropTypes.Requireable<string>;
-        type: PropTypes.Validator<string>;
-        content: PropTypes.Requireable<string>;
-    };
-};
+export declare const GoANotification: ({ type, children }: Props) => JSX.Element;
 export default GoANotification;

package/lib/page-loader/page-loader.d.ts

@@ -1,43 +1,26 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
-import './page-loader.scss';
-declare type indicatorType = 'infinite' | 'progress';
-declare type displayTypeIndicator = 'large' | 'small';
+import React from 'react';
+declare type PageLoaderType = 'infinite' | 'progress';
+declare type PageLoaderVariant = "fullscreen" | "inline";
+interface WCProps {
+    type?: PageLoaderType;
+    variant?: PageLoaderVariant;
+    message?: string;
+    visible?: boolean;
+    progress?: number;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-page-loader': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
 export interface PageLoaderProps {
-    /**
-     * The type of page loader, deterministic and indeterministic.
-     */
-    type?: indicatorType;
-    /**
-     * The message to display while loading.
-     */
+    type?: PageLoaderType;
+    variant?: PageLoaderVariant;
     message?: string;
-    /**
-     * Sets the page loader visibility state.
-     */
     visible?: boolean;
-    /**
-     * Sets the percentage value of the page loader while set to progress type, 0 - 100 percent.
-     */
-    value?: number;
-    /**
-     * Sets the page to locked and does not accept user input. When not set the component can be used as a child element without blocking user input.
-     */
-    pagelock?: boolean;
-    /**
-     * Sets the progress indicator display type size.
-     */
-    displayType?: displayTypeIndicator;
+    progress?: number;
 }
-export declare const GoAPageLoader: {
-    ({ type, visible, message, value, pagelock, displayType }: PageLoaderProps): JSX.Element;
-    propTypes: {
-        visible: PropTypes.Requireable<boolean>;
-        message: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<number>;
-        type: PropTypes.Requireable<string>;
-        pagelock: PropTypes.Requireable<boolean>;
-        displayType: PropTypes.Requireable<string>;
-    };
-};
+export declare const GoAPageLoader: ({ type, visible, message, progress, variant }: PageLoaderProps) => JSX.Element;
 export default GoAPageLoader;

package/lib/radio-group/radio-group.d.ts

@@ -1,25 +1,24 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 export * from './radio';
+interface RadioGroupProps {
+    ref: React.RefObject<HTMLElement>;
+    name: string;
+    value?: string;
+    orientation: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-radio-group': RadioGroupProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
 interface Props {
-    /**
-     * Name of the form value
-     */
     name: string;
-    /**
-     * Initial data value
-     */
     value?: string;
-    /**
-     * Disable radio buttons
-     */
     disabled?: boolean;
-    /**
-     * Orientation of the radio buttons
-     */
     orientation?: 'horizontal' | 'vertical';
-    /**
-     * Callback function containing the newly selected value
-     */
+    testId?: string;
     onChange: (name: string, value: string) => void;
 }
 export declare const GoARadioGroup: FC<Props>;

package/lib/radio-group/radio.d.ts

@@ -1,13 +1,27 @@
-import { FC } from 'react';
-import './radio.scss';
-import { TestProps } from '../../experimental/common';
+import React, { FC } from 'react';
+interface RadioItemProps {
+    name: string;
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    error?: boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-radio-item': RadioItemProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
 interface Props {
     value: string;
     label?: string;
-    name?: string;
+    name: string;
     disabled?: boolean;
     checked?: boolean;
-    onChange?: (value: string) => void;
+    error?: boolean;
+    testId?: string;
 }
-export declare const GoARadio: FC<Props & TestProps>;
+export declare const GoARadio: FC<Props>;
 export default GoARadio;

package/lib/service-level-header/service-level-header.d.ts

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-service-level-header': WebComponentProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export declare type ServiceLevel = 'alpha' | 'beta' | 'live';
+interface WebComponentProps {
+    level: ServiceLevel;
+}
+export interface HeaderProps {
+    level: ServiceLevel;
+}
+export declare const GoAServiceLevelHeader: FC<HeaderProps>;
+export default GoAServiceLevelHeader;

package/lib/skeleton/skeleton.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+declare type SkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile";
+interface WCProps {
+    size: number;
+    type: SkeletonType;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-skeleton': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface SkeletonProps {
+    type: SkeletonType;
+    size?: number;
+}
+export declare const GoASkeleton: ({ type, size }: SkeletonProps) => JSX.Element;
+export default GoASkeleton;

package/lib/spinner/spinner.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+declare type SpinnerType = "infinite" | "progress";
+declare type SpinnerSize = "small" | "medium" | "large" | "xlarge";
+interface WCProps {
+    size: SpinnerSize;
+    type: SpinnerType;
+    invert: boolean;
+    progress: number;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-spinner': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface SpinnerProps {
+    type: SpinnerType;
+    size?: SpinnerSize;
+    invert: boolean;
+    progress: number;
+}
+export declare const GoASpinner: ({ type, size, progress, invert }: SpinnerProps) => JSX.Element;
+export default GoASpinner;

package/lib/textarea/textarea.d.ts

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+interface WCProps {
+    ref: React.Ref<HTMLTextAreaElement>;
+    name: string;
+    value: string;
+    placeholder?: string;
+    rows: number;
+    disabled: boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-textarea': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    name: string;
+    value: string;
+    id?: string;
+    placeholder?: string;
+    rows: number;
+    disabled: boolean;
+    onChange: (name: string, value: string) => void;
+}
+export declare const GoATextArea: FC<Props>;
+export default GoATextArea;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "3.4.0-alpha.1",
+  "version": "3.4.0-alpha.5",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"
@@ -17,7 +17,7 @@
     "directory": "libs/react-components"
   },
   "dependencies": {
-    "classnames": "^2.3.1"
+    "@abgov/web-components": "^0.0.1"
   },
   "peerDependencies": {
     "react": "^17.0.2",