@ambita/design-system 3.0.26 → 3.0.27-101.0

package/dist/css/colors-css-variables.css

@@ -0,0 +1,51 @@
+/* Do not use if you need IE11 support */
+:root {
+  /* Purple */
+  --aux-purple: #8237DC;
+  --aux-purple-1: #E6D7F8;
+  --aux-purple-2: #CDAFF1;
+  --aux-purple-3: #B487EA;
+  --aux-purple-4: #9B5FE3;
+  --aux-purple-5: #682CB0;
+  --aux-purple-6: #4E2184;
+  --aux-purple-7: #341658;
+  --aux-purple-8: #1A0B2C;
+  /* Dark Purple */
+  --aux-dark-purple: #360076;
+  --aux-dark-purple-1: #D8CDE6;
+  --aux-dark-purple-2: #B098C6;
+  --aux-dark-purple-3: #8666AC;
+  --aux-dark-purple-4: #5F3591;
+  --aux-dark-purple-5: #2D1C5B;
+  --aux-dark-purple-6: #200E47;
+  --aux-dark-purple-7: #1A0F2E;
+  --aux-dark-purple-8: #110B18;
+  /* Mint green */
+  --aux-mint: #34D9C3;
+  --aux-mint-1: #D8EFEE;
+  --aux-mint-2: #B5E1DD;
+  --aux-mint-3: #93D4D0;
+  --aux-mint-4: #72CAC3;
+  --aux-mint-5: #26AE9B;
+  --aux-mint-6: #218376;
+  --aux-mint-7: #14584E;
+  --aux-mint-8: #0A2B26;
+  /* Grey */
+  --aux-grey-1: #E1E1E1;
+  --aux-grey-2: #D2D2D2;
+  --aux-grey-3: #BEBEBE;
+  --aux-grey-4: #AFAFAF;
+  --aux-grey-5: #555555;
+  --aux-grey-6: #333333;
+  /* Supports */
+  --aux-red: #C10000;
+  --aux-blue: #0067A3;
+  --aux-yellow: #ECD025;
+  --aux-green: #5CB85C;
+  --aux-white: #FFF;
+  --aux-black: #000;
+  --aux-focus: #003eff;
+  /* Borders */
+  --aux-border-1-grey-1: 1px solid #E1E1E1;
+  --aux-border-2-grey-1: 2px solid #E1E1E1;
+}

package/dist/css/colors-css-variables.scss

@@ -1,54 +1,59 @@
 @import './colors-scss-variables';
-// Do not use if you need IE11 support
-::root{
-  // Purple
-  --aux-purple: $aux-purple;
-  --aux-purple-1: $aux-purple-1;
-  --aux-purple-2: $aux-purple-2;
-  --aux-purple-3: $aux-purple-3;
-  --aux-purple-4: $aux-purple-4;
-  --aux-purple-5: $aux-purple-5;
-  --aux-purple-6: $aux-purple-6;
-  --aux-purple-7: $aux-purple-7;
-  --aux-purple-8: $aux-purple-8;
-  
-  // Dark Purple
-  --aux-dark-purple: $aux-dark-purple;
-  --aux-dark-purple-1: $aux-dark-purple-1;
-  --aux-dark-purple-2: $aux-dark-purple-2;
-  --aux-dark-purple-3: $aux-dark-purple-3;
-  --aux-dark-purple-4: $aux-dark-purple-4;
-  --aux-dark-purple-5: $aux-dark-purple-5;
-  --aux-dark-purple-6: $aux-dark-purple-6;
-  --aux-dark-purple-7: $aux-dark-purple-7;
-  --aux-dark-purple-8: $aux-dark-purple-8;
-  
-  // Mint green
-  --aux-mint: $aux-mint;
-  --aux-mint-1: $aux-mint-1;
-  --aux-mint-2: $aux-mint-2;
-  --aux-mint-3: $aux-mint-3;
-  --aux-mint-4: $aux-mint-4;
-  --aux-mint-5: $aux-mint-5;
-  --aux-mint-6: $aux-mint-6;
-  --aux-mint-7: $aux-mint-7;
-  --aux-mint-8: $aux-mint-8;
-  
-  // Grey
-  --aux-grey-1: $aux-grey-1;
-  --aux-grey-2: $aux-grey-2;
-  --aux-grey-3: $aux-grey-3;
-  --aux-grey-4: $aux-grey-4;
-  --aux-grey-5: $aux-grey-5;
-  --aux-grey-6: $aux-grey-6;
-  
-  // Supports
-  --aux-red: $aux-red;
-  --aux-blue: $aux-blue;
-  --aux-yellow: $aux-yellow;
-  --aux-green: $aux-green;
 
-  --aux-white: $aux-white;
-  --aux-black: $aux-black;
-  --aux-focus: $aux-focus;
+/* Do not use if you need IE11 support */
+:root {
+  /* Purple */
+  --aux-purple: #{$aux-purple};
+  --aux-purple-1: #{$aux-purple-1};
+  --aux-purple-2: #{$aux-purple-2};
+  --aux-purple-3: #{$aux-purple-3};
+  --aux-purple-4: #{$aux-purple-4};
+  --aux-purple-5: #{$aux-purple-5};
+  --aux-purple-6: #{$aux-purple-6};
+  --aux-purple-7: #{$aux-purple-7};
+  --aux-purple-8: #{$aux-purple-8};
+
+  /* Dark Purple */
+  --aux-dark-purple: #{$aux-dark-purple};
+  --aux-dark-purple-1: #{$aux-dark-purple-1};
+  --aux-dark-purple-2: #{$aux-dark-purple-2};
+  --aux-dark-purple-3: #{$aux-dark-purple-3};
+  --aux-dark-purple-4: #{$aux-dark-purple-4};
+  --aux-dark-purple-5: #{$aux-dark-purple-5};
+  --aux-dark-purple-6: #{$aux-dark-purple-6};
+  --aux-dark-purple-7: #{$aux-dark-purple-7};
+  --aux-dark-purple-8: #{$aux-dark-purple-8};
+
+  /* Mint green */
+  --aux-mint: #{$aux-mint};
+  --aux-mint-1: #{$aux-mint-1};
+  --aux-mint-2: #{$aux-mint-2};
+  --aux-mint-3: #{$aux-mint-3};
+  --aux-mint-4: #{$aux-mint-4};
+  --aux-mint-5: #{$aux-mint-5};
+  --aux-mint-6: #{$aux-mint-6};
+  --aux-mint-7: #{$aux-mint-7};
+  --aux-mint-8: #{$aux-mint-8};
+
+  /* Grey */
+  --aux-grey-1: #{$aux-grey-1};
+  --aux-grey-2: #{$aux-grey-2};
+  --aux-grey-3: #{$aux-grey-3};
+  --aux-grey-4: #{$aux-grey-4};
+  --aux-grey-5: #{$aux-grey-5};
+  --aux-grey-6: #{$aux-grey-6};
+
+  /* Supports */
+  --aux-red: #{$aux-red};
+  --aux-blue: #{$aux-blue};
+  --aux-yellow: #{$aux-yellow};
+  --aux-green: #{$aux-green};
+
+  --aux-white: #{$aux-white};
+  --aux-black: #{$aux-black};
+  --aux-focus: #{$aux-focus};
+
+  /* Borders */
+  --aux-border-1-grey-1: 1px solid #{$aux-grey-1};
+  --aux-border-2-grey-1: 2px solid #{$aux-grey-1};
 }

package/dist/types/components/Checkbox/Checkbox.vue.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("vue").DefineComponent<{
     value: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
     };
     disabled: {
         type: BooleanConstructor;

package/dist/types/components/Modal/Modal.vue.d.ts

@@ -30,6 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     propagateEvent: (eventPayLoad: string) => void;
     emit: (event: string, ...args: any[]) => void;
+    closeButton: import("vue").Ref<HTMLInputElement | null>;
     getTestId: (testid: string) => string | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     actions?: unknown;
@@ -39,8 +40,8 @@ declare const _default: import("vue").DefineComponent<{
     dataTestid?: unknown;
 } & {
     size: string;
-    id: string;
     actions: Action[];
+    id: string;
 } & {
     dataTestid?: string | undefined;
     title?: string | undefined;
@@ -48,7 +49,7 @@ declare const _default: import("vue").DefineComponent<{
     [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
 }, {
     size: string;
-    id: string;
     actions: Action[];
+    id: string;
 }>;
 export default _default;

package/dist/types/components/Notification/Notification.vue.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: PropType<"success" | "info" | "warning" | "error">;
+        required: true;
+    };
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    classes: import("vue").ComputedRef<{
+        [x: string]: boolean | "success" | "info" | "warning" | "error";
+        'aux-notification': boolean;
+        'aux-notification-show': boolean;
+    }>;
+    icon: import("vue").ComputedRef<import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}> & {
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }, {}>>;
+    removeNotification: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove-notification"[], "remove-notification", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    type?: unknown;
+    id?: unknown;
+} & {
+    type: "success" | "info" | "warning" | "error";
+    id: string;
+} & {}> & {
+    "onRemove-notification"?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;

package/dist/types/components/Notification/Notifications.vue.d.ts

@@ -0,0 +1,19 @@
+import { PropType } from 'vue';
+import { NotificationType } from './Notification.d';
+declare const _default: import("vue").DefineComponent<{
+    notifications: {
+        type: PropType<NotificationType[]>;
+        default: () => never[];
+    };
+}, {
+    removeNotification: (event: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove-notification"[], "remove-notification", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    notifications?: unknown;
+} & {
+    notifications: NotificationType[];
+} & {}> & {
+    "onRemove-notification"?: ((...args: any[]) => any) | undefined;
+}, {
+    notifications: NotificationType[];
+}>;
+export default _default;

package/dist/types/components/Select/Select.vue.d.ts

@@ -33,10 +33,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
     };
     value: {
-        type: (StringConstructor | NumberConstructor | ArrayConstructor)[];
+        type: (ArrayConstructor | StringConstructor | NumberConstructor)[];
     };
     modelValue: {
-        type: (StringConstructor | NumberConstructor | ArrayConstructor)[];
+        type: (ArrayConstructor | StringConstructor | NumberConstructor)[];
     };
 }, {
     state: {

package/dist/types/components/StatusBanner/StatusBanner.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (topics: string[]) => void;
+export default _default;

package/dist/types/components/Upload/File/File.vue.d.ts

@@ -39,9 +39,9 @@ declare const _default: import("vue").DefineComponent<{
     uuid?: unknown;
     failed?: unknown;
 } & {
-    filename: string;
     time: string;
     uuid: string;
+    filename: string;
     failed: boolean;
 } & {
     file?: File | undefined;

package/dist/types/helpers/{formatting.d.ts → formatters/formatDateAndTime/index.d.ts}

@@ -1,2 +1,2 @@
-export declare type FormatTypes = 'dateAndTime' | 'dateAndTimeWithSeconds' | 'date' | 'dateFull' | 'time' | 'timeWithSeconds';
+export declare type FormatTypes = 'dateAndTime' | 'dateAndTimeWithSeconds' | 'date' | 'dateFull' | 'dateWithWeekDay' | 'time' | 'timeWithSeconds';
 export declare function formatDate(date: Date, format?: FormatTypes): string;

package/dist/types/helpers/formatters/formatDateAndTime/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/helpers/formatters/formatQuantity/formatAmount.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/helpers/formatters/formatQuantity/formatNumber.d.ts

@@ -0,0 +1,11 @@
+export declare type FormatNumberTypes = 'rounded' | 'decimals';
+export interface FormatNumberOptions {
+    type: FormatNumberTypes;
+    decimals?: number;
+}
+/**
+ * Returns formatted number using Intl.NumberFormat
+ * @param num
+ * @param options
+ */
+export declare const formatNumber: (num: number, options?: FormatNumberOptions) => string;

package/dist/types/helpers/formatters/formatQuantity/formatNumber.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -17,5 +17,8 @@ export { default as AuxToggle } from './components/Toggle/Toggle.vue';
 export { default as AuxPagination } from './components/Pagination/Pagination.vue';
 export { default as AuxDirectionalArrow } from './components/DirectionalArrow/DirectionalArrow.vue';
 export { default as AuxAriaAnnouncer } from './components/AuxAriaAnnouncer/AuxAriaAnnouncer.vue';
-export { formatDate } from '@/helpers/formatting';
-export { formatPrice } from '@/helpers/formatAmount';
+export { default as AuxNotifications } from './components/Notification/Notifications.vue';
+export { default as AuxStatusBanner } from './components/StatusBanner/StatusBanner';
+export { formatDate } from '@/helpers/formatters/formatDateAndTime/';
+export { formatPrice } from '@/helpers/formatters/formatQuantity/formatAmount';
+export { formatNumber } from '@/helpers/formatters/formatQuantity/formatNumber';

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@ambita/design-system",
-  "version": "3.0.26",
+  "version": "3.0.27-101.0",
   "scripts": {
     "start": "npm run storybook",
     "serve": "vue-cli-service serve",
-    "build": "npm run storybook:build",
-    "build-package": "vue-cli-service build --target lib --name aux ./src/index.ts",
+    "build:storybook": "npm run storybook:build",
+    "build:package": "vue-cli-service build --target lib --name aux ./src/index.ts",
     "deploy-package": "npm run build-package && npm publish --tag beta",
+    "sass-compile": "sass ./src/css/colors-css-variables.scss ./dist/css/colors-css-variables.css --no-source-map",
     "test:unit": "vue-cli-service test:unit",
+    "test-watch:unit": "vue-cli-service test:unit --watch",
     "lint": "vue-cli-service lint",
     "lint-fix": "vue-cli-service lint --fix",
     "storybook": "start-storybook -p 6006 -s ./public",
@@ -15,6 +17,8 @@
     "phosphor:update": "node scripts/phosphorUpdate.js"
   },
   "dependencies": {
+    "@types/aws-iot-device-sdk": "^2.2.4",
+    "aws-iot-device-sdk": "^1.0.13",
     "core-js": "^3.6.5",
     "sanitize.css": "12.0.1",
     "uuid": "^3.4.0",
@@ -51,7 +55,7 @@
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
-    "simple-git": "^2.45.1",
+    "simple-git": "^3.14.1",
     "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typescript": "~4.5.5",
     "vue-jest": "^5.0.0-0",