feat: Promote Page Loader out of experimental components after it is …

…implemented in: Angular, React, and Vue (#17)

Co-authored-by: athena.chen <athena.chen@gov.ab.ca>

libs/angular-components/src/experimental/components.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { GoABadgeComponent } from './badge/badge.component';
 import { GoAAppVersionHeaderComponent } from './app-version-header/app-version-header.component';
-import { GoAPageLoadIndicatorComponent } from './page-load-indicator/page-load-indicator.component';
 import { GoAElementLoadIndicatorComponent } from './element-load-indicator/element-load-indicator.component';
 import { GoASkeletonImageContentComponent } from './skeleton/skeleton-image-content.component';
 import { GoASkeletonElementComponent } from './skeleton/skeleton-element.component';
@@ -12,15 +11,13 @@ import { GoASkeletonElementComponent } from './skeleton/skeleton-element.compone
   exports: [
     GoABadgeComponent,
     GoAAppVersionHeaderComponent,
-    GoAPageLoadIndicatorComponent,
     GoAElementLoadIndicatorComponent,
     GoASkeletonImageContentComponent,
     GoASkeletonElementComponent,
   ],
   declarations: [
     GoABadgeComponent,
     GoAAppVersionHeaderComponent,
-    GoAPageLoadIndicatorComponent,
     GoAElementLoadIndicatorComponent,
     GoASkeletonImageContentComponent,
     GoASkeletonElementComponent,

libs/angular-components/src/experimental/index.ts

@@ -1,6 +1,5 @@
 export * from './badge/badge.component';
 export * from './app-version-header/app-version-header.component';
-export * from './page-load-indicator/page-load-indicator.component';
 export * from './element-load-indicator/element-load-indicator.component';
 export * from './skeleton/skeleton-image-content.component';
 export * from './skeleton/skeleton-element.component';

libs/angular-components/src/index.ts

@@ -17,5 +17,6 @@ export * from './lib/radio/radio.component';
 export * from './lib/radio/radio-change';
 export * from './lib/radio/radio.service';
 export * from './lib/radio-group/radio-group.component';
+export * from './lib/page-load-indicator/page-load-indicator.component';
 
 export * from './experimental';

libs/angular-components/src/lib/angular-components.module.ts

@@ -29,6 +29,7 @@ import {
   GoAHeroBannerContentComponent,
   GoAHeroBannerLinkComponent,
 } from './hero-banner/hero-banner.component';
+import { GoAPageLoadIndicatorComponent } from './page-load-indicator/page-load-indicator.component';
 
 @NgModule({
   imports: [CommonModule, OverlayModule],
@@ -57,6 +58,7 @@ import {
     GoAHeroBannerComponent,
     GoAHeroBannerContentComponent,
     GoAHeroBannerLinkComponent,
+    GoAPageLoadIndicatorComponent,
   ],
   declarations: [
     GoAButtonComponent,
@@ -80,7 +82,8 @@ import {
     GoAHeroBannerComponent,
     GoAHeroBannerContentComponent,
     GoAHeroBannerLinkComponent,
+    GoAPageLoadIndicatorComponent,
   ],
   providers: [GoARadioService],
 })
-export class AngularComponentsModule {}
+export class AngularComponentsModule { }

libs/angular-components/src/experimental/page-load-indicator/page-load-indicator.stories.mdx → libs/angular-components/src/lib/page-load-indicator/page-load-indicator.stories.mdx

@@ -12,7 +12,7 @@ import { moduleMetadata } from '@storybook/angular';
 import { action } from '@storybook/addon-actions';
 
 <Meta
-  title="Experimental/Components/PageLoader"
+  title="Angular/Components/PageLoader"
   component={GoAPageLoadIndicatorComponent}
   argTypes={{
     visible: {
@@ -51,7 +51,7 @@ The Page Load Indicator was designed to show users that something is happening.
       visible: true,
       message: 'Loading message...',
       type: 'infinite',
-      displayType: 'large'
+      displayType: 'large',
     }}
     parameters={{
       design: {},
@@ -69,7 +69,11 @@ The Page Load Indicator was designed to show users that something is happening.
 </Canvas>
 
 ```html
-<goa-page-load-indicator visible="true" type="'infinite' || 'progress'" displayType="'large' || 'small'">
+<goa-page-load-indicator
+  visible="true"
+  type="'infinite' || 'progress'"
+  displayType="'large' || 'small'"
+>
   Loading...
 </goa-page-load-indicator>
 ```

libs/react-components/src/experimental/index.ts

@@ -3,7 +3,6 @@ import { GoAElementLoader } from './element-loader/element-loader';
 import { GoAFormItem, GoAFormButton, GoAFormContainer, GoAForm } from './form/form.component';
 import { GoAInput } from './input/input.component';
 import { GoAModal, GoAModalActions, GoAModalContent, GoAModalTitle } from './modal/modal.component';
-import { GoAPageLoader } from './page-loader/page-loader';
 import { GoAScrollable } from './scrollable/scrollable.component';
 import { GoASkeletonContent } from './skeleton/skeleton-titled-content';
 import { GoASkeletonGridColumnContent } from './skeleton/skeleton-grid-column';
@@ -21,7 +20,6 @@ export {
   GoAModalActions,
   GoAModalContent,
   GoAModalTitle,
-  GoAPageLoader,
   GoAScrollable,
   GoASkeletonContent,
   GoASkeletonGridColumnContent,

libs/react-components/src/index.ts

@@ -16,10 +16,9 @@ import {
   GoAOptionGroup,
 } from './lib/dropdown/dropdown.component';
 import GoACheckbox from './lib/checkbox/checkbox';
-
+import GoAPageLoader from './lib/page-loader/page-loader'
 import {
   GoABadge,
-  GoAPageLoader,
   GoAElementLoader,
   GoASkeletonContent,
   GoASkeletonGridColumnContent,

libs/react-components/src/experimental/page-loader/page-loader.stories.mdx → libs/react-components/src/lib/page-loader/page-loader.stories.mdx

@@ -11,7 +11,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 
 <Meta
-  title="Experimental/Components/PageLoader"
+  title="React/Components/PageLoader"
   component={GoAPageLoader}
   argTypes={{
     type: {
@@ -57,7 +57,7 @@ export const Template = (args) => (
       message: 'Loading...',
       type: 'infinite',
       pagelock: false,
-      displayType: 'large'
+      displayType: 'large',
     }}
   >
     {Template.bind({})}
@@ -67,7 +67,11 @@ export const Template = (args) => (
 ## Examples
 
 ```html
-<GoAPageLoader visible="{true}" type="'infinite' || 'progress'" displayType="'large' || 'small'">
+<GoAPageLoader
+  visible="{true}"
+  type="'infinite' || 'progress'"
+  displayType="'large' || 'small'"
+>
   Loading...
 </GoAPageLoader>
 ```

libs/vue-components/src/index.ts

@@ -11,6 +11,7 @@ import GoANotificationBanner from './lib/notification-banner/notification-banner
 import GoADropdown from './lib/dropdown/dropdown.vue'
 import GoADropdownOption from './lib/dropdown/option/option.vue'
 import { GoABadge } from './experimental'
+import GoAPageLoadIndicatorComponent from './lib/page-load-indicator/page-load-indicator.vue';
 
 export {
   GoAMicrositeLogo,
@@ -25,5 +26,6 @@ export {
   GoANotificationBanner,
   GoADropdown,
   GoADropdownOption,
-  GoABadge
+  GoABadge,
+  GoAPageLoadIndicatorComponent,
 };

libs/vue-components/src/experimental/page-load-indicator/page-load-indicator.stories.mdx → libs/vue-components/src/lib/page-load-indicator/page-load-indicator.stories.mdx

@@ -11,7 +11,7 @@ import { action } from '@storybook/addon-actions';
 import { DoDont } from '@abgov/shared/storybook-common';
 
 <Meta
-  title="Experimental/Components/PageLoader"
+  title="Vue/Components/PageLoader"
   component={GoAPageLoadIndicatorComponent}
   argTypes={{
     type: {
@@ -30,36 +30,46 @@ import { DoDont } from '@abgov/shared/storybook-common';
         type: 'select',
         options: ['large', 'small'],
       },
-    }
+    },
   }}
 />
 
 #### Page Load Indicator
 
 <Canvas>
-  <Story name="PageLoader" height={500}
+  <Story
+    name="PageLoader"
+    height={500}
     args={{
       message: 'Loading...',
       type: 'infinite',
       visible: true,
       pagelock: false,
-      displayType: 'large'
+      displayType: 'large',
     }}
   >
     {(args, argTypes) => {
       return {
         render: function (createElement) {
-          return createElement(GoAPageLoadIndicatorComponent, {props: { ...args}}, null)
-        }
-      }
+          return createElement(
+            GoAPageLoadIndicatorComponent,
+            { props: { ...args } },
+            null
+          );
+        },
+      };
     }}
   </Story>
 </Canvas>
 
 ## Examples
 
 ```html
-<GoAPageLoadIndicatorComponent visible="true" type="'infinite' || 'progress'" loaderType="'large || 'small'">
+<GoAPageLoadIndicatorComponent
+  visible="true"
+  type="'infinite' || 'progress'"
+  loaderType="'large || 'small'"
+>
   Loading...
 </GoAPageLoadIndicatorComponent>
 ```