Merge pull request #64 from aws/dogusata/fix-stream-animation-flows-a…

…nd-card-orders

Dogusata/fix stream animation flows and card orders

.gitignore

@@ -1,6 +1,7 @@
 out
 dist
 **api-docs
+build
 node_modules
 *.bk
 *.zip

.npmignore

@@ -1,5 +1,5 @@
 out
-node_modules
+**/node_modules
 *.bk
 **/.DS_Store
 .idea
@@ -12,6 +12,8 @@ node_modules
 package-lock.json
 tsconfig.json
 webpack.config.js
-src
-docs
-example
+**/src
+api-docs
+**/__test__
+example
+example-react

example/src/samples/sample-data.ts

@@ -314,7 +314,7 @@ _To send the form, mandatory items should be filled._`,
         },
         {
             id: 'email',
-            type: 'textinput',
+            type: 'email',
             mandatory: true,
             title: `Email`,
             placeholder: 'email',

example/src/styles/variables.scss

@@ -1,4 +1,5 @@
 :root {
+    font-size: 15px!important;
     --mynah-font-family: system-ui;
     --skeleton-default: var(--mynah-color-text-weak);
     --skeleton-selected: var(--mynah-color-button);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aws/mynah-ui",
   "displayName": "AWS Mynah UI",
-  "version": "4.12.0",
+  "version": "4.13.0",
   "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
   "publisher": "Amazon Web Services",
   "license": "Apache License 2.0",
@@ -90,4 +90,4 @@
     "arrowParens": "avoid",
     "endOfLine": "lf"
   }
-}
+}

src/components/__test__/syntax-highlighter.spec.ts

@@ -24,10 +24,11 @@ describe('syntax-highlighter', () => {
       onInsertToCursorPosition: () => {},
       block: true,
     });
-
-    expect(testSyntaxHighlighter.render.querySelectorAll('button')?.length).toBe(2);
-    expect(testSyntaxHighlighter.render.querySelectorAll('button')?.[0]?.title).toBe('Insert at cursor');
-    expect(testSyntaxHighlighter.render.querySelectorAll('button')?.[1]?.title).toBe('Copy');
+    setTimeout(() => {
+      expect(testSyntaxHighlighter.render.querySelectorAll('button')?.length).toBe(2);
+      expect(testSyntaxHighlighter.render.querySelectorAll('button')?.[0]?.title).toBe('Insert at cursor');
+      expect(testSyntaxHighlighter.render.querySelectorAll('button')?.[1]?.title).toBe('Copy');
+    }, 100);
   });
 
   it('should NOT show related button if its event is not connected even when showCopyButtons true', () => {
@@ -39,8 +40,9 @@ describe('syntax-highlighter', () => {
       onCopiedToClipboard: () => {},
       block: true,
     });
-
-    expect(testSyntaxHighlighter.render.querySelectorAll('button')?.length).toBe(1);
-    expect(testSyntaxHighlighter.render.querySelectorAll('button')?.[0]?.title).toBe('Copy');
+    setTimeout(() => {
+      expect(testSyntaxHighlighter.render.querySelectorAll('button')?.length).toBe(1);
+      expect(testSyntaxHighlighter.render.querySelectorAll('button')?.[0]?.title).toBe('Copy');
+    }, 100);
   });
 });

src/components/button.ts

@@ -8,12 +8,14 @@ import { DomBuilder, ExtendedHTMLElement } from '../helper/dom';
 import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from './overlay';
 import { Card } from './card/card';
 import { CardBody } from './card/card-body';
+import { Config } from '../helper/config';
+import '../styles/components/_button.scss';
 
 const PREVIEW_DELAY = 350;
 export interface ButtonProps {
   classNames?: string[];
   attributes?: Record<string, string>;
-  icon?: HTMLElement | ExtendedHTMLElement | string;
+  icon?: HTMLElement | ExtendedHTMLElement;
   label?: HTMLElement | ExtendedHTMLElement | string;
   tooltip?: string;
   tooltipVerticalDirection?: OverlayVerticalDirection;
@@ -23,11 +25,21 @@ export interface ButtonProps {
   additionalEvents?: Record<string, (event?: any) => any>;
   onClick: (e: Event) => void;
 }
-export class Button {
+export abstract class ButtonAbstract {
+  render: ExtendedHTMLElement;
+  updateLabel = (label: HTMLElement | ExtendedHTMLElement | string): void => {
+  };
+
+  setEnabled = (enabled: boolean): void => {
+  };
+}
+
+class ButtonInternal extends ButtonAbstract {
   render: ExtendedHTMLElement;
   private buttonTooltip: Overlay | null;
   private buttonTooltipTimeout: ReturnType<typeof setTimeout>;
   constructor (props: ButtonProps) {
+    super();
     this.render = DomBuilder.getInstance().build({
       type: 'button',
       classNames: [
@@ -106,3 +118,18 @@ export class Button {
     }
   };
 }
+
+export class Button extends ButtonAbstract {
+  render: ExtendedHTMLElement;
+
+  constructor (props: ButtonProps) {
+    super();
+    return (new (Config.getInstance().config.componentClasses.Button ?? ButtonInternal)(props));
+  }
+
+  updateLabel = (label: HTMLElement | ExtendedHTMLElement | string): void => {
+  };
+
+  setEnabled = (enabled: boolean): void => {
+  };
+}