memorial-ui-component-library 1.0.9 → 1.0.10-beta.0-dev.2813

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memorial-ui-component-library",
-  "version": "1.0.9",
+  "version": "1.0.10-beta.0-dev.2813",
   "private": false,
   "description": "Memorial Health System Vue UI library.",
   "author": "Solutions Development",
@@ -8,6 +8,7 @@
     "serve": "vue-cli-service serve",
     "build": "node build.js",
     "test:unit": "vue-cli-service test:unit",
+    "test:playwright": "start /B npm run serve & wait-on http://10.8.121.111:8080/ && npx playwright test ./tests/playwright/*",
     "lint": "vue-cli-service lint",
     "build:lib": "vue-cli-service build --target lib --name memorial-ui-component-library --entry ./src/index.ts"
   },
@@ -33,6 +34,8 @@
     "vue-spinner": "^1.0.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.51.1",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/vue": "^5.9.0",
     "@types/jest": "^27.0.1",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
@@ -54,6 +57,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
     "jest": "^27.0.5",
+    "playwright": "^1.51.1",
     "prettier": "^2.4.1",
     "sass": "^1.81",
     "sass-loader": "^10",
@@ -62,7 +66,8 @@
     "typescript": "~4.5.5",
     "vue-cli-plugin-style-resources-loader": "^0.1.2",
     "vue-cli-plugin-webpack-bundle-analyzer": "^1.4.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14",
+    "wait-on": "^8.0.3"
   },
   "peerDependencies": {
     "vue": "^2.6.10"

package/src/assets/scss/_variables.module.scss

@@ -8,9 +8,9 @@ $--padding-base: 10px;
 $--color-white: #ffffff;
 $--color-black: #000000;
 $--color-primary: #00284f;
-$--color-secondary: #6EAFCC;
+$--color-secondary: #27779c;
 $--color-red-primary: #DE2414;
-$--color-green-primary:#2cc197;
+$--color-green-primary:#1E8366;
 $--color-yellow-primary: #ffdd9a;
 $--color-grey-primary: #e7e7e7;
 $--color-grey-secondary: #9fa7b3;
@@ -23,7 +23,7 @@ $--color-grey-focus: mix($--color-black, $--color-grey-primary, 10%);
 $color--grey-primary: #f4f3f3;
 $color--grey-light-1: #e7e7e8;
 $color--grey-light-2: #d8d8d8;
-$color--grey-light-3: #9fa7b3;
+$color--grey-light-3: #676d74;
 $color--grey-dark-1: #485563;
 $color--grey-dark-2: #4a5562;
 $color--grey-dark-3: #2c353f;

package/src/assets/scss/main.scss

@@ -1,7 +1,56 @@
 // @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
 
-* {
-  font-family: 'Montserrat';
+// Font family variables
+$font-family-headings: 'Montserrat', sans-serif;
+$font-family-body: 'Open Sans', sans-serif;
+
+// Global font settings
+html, body {
+  font-family: $font-family-body;
+}
+
+// Headings and landmarks - Montserrat
+h1, h2, h3, h4, h5, h6,
+.sd-card__header,
+.sd-dialog__title,
+.sd-tabs__item,
+.sd-form-item__label,
+.sd-button,
+header, nav, footer, aside,
+.sd-popout-menu__trigger,
+legend {
+  font-family: $font-family-headings;
+}
+
+// Body text - Open Sans
+p, span, div, input, textarea, select,
+.sd-input,
+.sd-select,
+.sd-radio__label,
+.sd-checkbox__label,
+.sd-form-item__content,
+.sd-form-item__description,
+.sd-autocomplete__suggestion,
+.sd-select-option,
+.sd-form-item__error {
+  font-family: $font-family-body;
+}
+
+// Font weight utilities
+.font-regular {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
 }
 
 .aria-instructions-hidden {

package/types/autocomplete.d.ts

@@ -88,6 +88,38 @@ export declare class SdAutoComplete extends MemorialUIFormPluginComponent {
     a: SdAutoCompleteSuggestionEntry,
     b: SdAutoCompleteSuggestionEntry
   ) => -1 | 0 | 1;
+
+  /**
+   * Optional label text for the autocomplete field
+   */
+  label?: string;
+
+  /**
+   * Custom ID for the input element
+   * @default auto-generated
+   */
+  inputId?: string;
+
+  /**
+   * ID for the label element (for accessibility)
+   */
+  labelId?: string;
+
+  /**
+   * Computed value that returns a valid label ID, either from props or generated
+   */
+  readonly computedLabelId: string;
+
+  /**
+   * Clear the input value
+   */
+  clear(): void;
+
+  /**
+   * Close the suggestions dropdown
+   * @param emit - Whether to emit blur event
+   */
+  close(emit: boolean): void;
 }
 
 declare const plugin: SdAutoComplete;

package/types/button.d.ts

@@ -63,9 +63,20 @@ export declare class SdButton extends MemorialUIPluginComponent {
   /** The CSS class name of the **fontawesome** icon to use for this component. */
   icon?: string | string[] | SdButtonIconConfiguration;
 
+  /**
+   * Text label for the button (used for aria-label when no content)
+   * @default ''
+   */
+  label: string;
+
   /** Whether the button has a label provided. */
   hasLabel: boolean;
 
+  /**
+   * Computed button type attribute (submit, reset, or button)
+   */
+  readonly buttonType: string;
+
   /** Triggers a click action. */
   click(): void;
 }

package/types/checkbox.d.ts

@@ -9,14 +9,32 @@ export declare class SdCheckbox extends MemorialUIFormPluginComponent {
   /** The current state value of the component. This value changes in response to what the component is bound to (v-model). */
   state: any;
 
-  /** The value the radio component represents. */
+  /** The value the checkbox component represents. */
   value: any;
 
-  /** Whether the radio component is disabled. */
+  /** Whether the checkbox component is disabled. */
   disabled: boolean;
 
-  /** Whether the radio is checked. */
+  /** Whether the checkbox is checked. */
   checked: boolean;
+
+  /** Custom ID for the checkbox input element. */
+  inputId?: string;
+
+  /** ID for the associated label element (for accessibility). */
+  labelId?: string;
+
+  /** Computed input ID - returns inputId if provided or generates one. */
+  readonly computedInputId: string;
+
+  /** Computed label ID - returns labelId if provided or generates one. */
+  readonly computedLabelId: string;
+
+  /** Computed tabindex based on disabled state. */
+  readonly tabIndex: number;
+
+  /** Internal v-model state. */
+  readonly internalState: any;
 }
 
 declare const plugin: SdCheckbox;

package/types/form.d.ts

@@ -2,7 +2,7 @@ import { MemorialUIComponent, MemorialUIPluginComponent } from './component';
 import {
   ValidationResult,
   SchemaDescriptor,
-  RuleProperty
+  RuleProperty,
 } from './async-validator';
 
 export type SdValidationTriggerType = 'blur' | 'change' | 'input';
@@ -49,6 +49,12 @@ export declare abstract class SdFormWidget extends MemorialUIComponent {
 
 /** Form component */
 export declare class SdForm extends MemorialUIPluginComponent {
+  /** Form ID */
+  id?: string;
+
+  /** Computed form ID that uses either the provided ID or a generated one */
+  readonly computedFormId: string;
+
   /** Object model to bind the form to. */
   model?: { [field: string]: any };
 
@@ -67,6 +73,12 @@ export declare class SdForm extends MemorialUIPluginComponent {
   /** Whether the form is currently being reset. */
   resetting: boolean;
 
+  /** Submit button reference */
+  submitButton: any | null;
+
+  /** Reset button reference */
+  resetButton: any | null;
+
   /** Reset the form model to its original value and clear all validation errors/messages. */
   reset(): void;
 
@@ -116,6 +128,27 @@ export declare class SdFormItem extends MemorialUIComponent {
 
   /** The value of the form items field within the model bound to the form. */
   fieldValue: any;
+
+  /** Custom ID for the label element. */
+  labelId?: string;
+
+  /** Computed ID for the field element. */
+  readonly fieldId: string;
+
+  /** Computed ID for the description element. */
+  readonly descriptionId: string;
+
+  /** Determines if the form item has a description. */
+  readonly hasDescription: boolean;
+
+  /** Determines if the form item is required based on rules or the required prop. */
+  readonly isRequired: boolean;
+
+  /**
+   * Get all validation rules defined for this form item.
+   * @returns Array of validation rules
+   */
+  getOwnRules(): RuleProperty[];
 }
 
 declare const plugin: SdForm;

package/types/input.d.ts

@@ -24,7 +24,7 @@ export type SdInputType =
 /** Input component */
 export declare class SdInput extends MemorialUIFormPluginComponent {
   /** The inputs value. */
-  value?: any;
+  value?: string | number | Date | boolean;
 
   /**
    * The type of the input.
@@ -32,6 +32,9 @@ export declare class SdInput extends MemorialUIFormPluginComponent {
    */
   type: SdInputType;
 
+  /** Whether the input is disabled. */
+  disabled: boolean;
+
   /**
    * Whether to display a clear button that will reset the components value.
    * @default false
@@ -45,6 +48,17 @@ export declare class SdInput extends MemorialUIFormPluginComponent {
    */
   disableSpinkit: boolean;
 
+  /**
+   * Custom ID for the input element
+   * @default auto-generated
+   */
+  id: string;
+
+  /**
+   * ID for the associated label element (for accessibility)
+   */
+  labelId?: string;
+
   /** Resets the components value. */
   clear(): void;
 }

package/types/popout-menu.d.ts

@@ -6,9 +6,18 @@ export declare class SdPopoutMenu extends MemorialUIPluginComponent {
    */
   open: boolean;
 
+  /**
+   * Accessible label for the menu
+   * @default 'Menu'
+   */
+  ariaLabel?: string;
+
   /**
    * Sets the visibility state of the menu, being either *open* or *closed*.
    * @param state The visibility state of the menu
    */
   setState(state: 'open' | 'closed'): void;
 }
+
+declare const plugin: SdPopoutMenu;
+export default plugin;

package/types/radio.d.ts

@@ -21,6 +21,12 @@ export declare class SdRadio extends MemorialUIFormPluginComponent {
 
   /** Whether the radio is checked. */
   checked: boolean;
+
+  /** Custom ID for the radio element */
+  id?: string;
+
+  /** Computed ID for the label element */
+  readonly labelId: string;
 }
 
 /** Radio Group component */
@@ -39,6 +45,16 @@ export declare class SdRadioGroup extends SdFormWidget {
    * @default 'column'
    */
   direction: SdRadioGroupDirection;
+
+  /**
+   * Label text for the radio group
+   */
+  legend: string;
+
+  /**
+   * Generated ID for the legend element
+   */
+  readonly legendId: string;
 }
 
 declare const plugin: SdRadio;

package/types/select.d.ts

@@ -1,13 +1,15 @@
 import Vue from 'vue';
 import {
   MemorialUIComponent,
-  MemorialUIFormPluginComponent
+  MemorialUIFormPluginComponent,
 } from './component';
 
 /** Select component */
 export declare class SdSelect extends MemorialUIFormPluginComponent {
   $refs: Vue['$refs'] & {
     select: HTMLSelectElement;
+    input: HTMLInputElement;
+    clear?: HTMLElement;
   };
 
   /** The value of the selected option. */
@@ -28,6 +30,18 @@ export declare class SdSelect extends MemorialUIFormPluginComponent {
   /** Whether the select menu is open. */
   open: boolean;
 
+  /** Custom ID for the select element */
+  id: string;
+
+  /** Label text for the select */
+  label: string;
+
+  /** Generated ID for the label element */
+  readonly labelId: string;
+
+  /** Generated ID for the listbox element */
+  readonly listboxId: string;
+
   /** Resets the components value. */
   clear(): void;
 
@@ -51,7 +65,7 @@ export declare class SdSelect extends MemorialUIFormPluginComponent {
 /** Select option component */
 export declare class SdSelectOption extends MemorialUIComponent {
   /** The options value. */
-  value: any;
+  value: string | number | Date | boolean;
 
   /** The label to display in the select box when this item has been selected. If this is not assigned the string representation of {@link value} is used.*/
   label?: string;
@@ -59,6 +73,9 @@ export declare class SdSelectOption extends MemorialUIComponent {
   /** Whether the option is disabled. */
   disabled: boolean;
 
+  /** Whether the option is currently selected */
+  readonly isSelected: boolean;
+
   /** Toggles the open state of the select menu. */
   toggleMenu(): void;
 

package/types/tabs.d.ts

@@ -1,19 +1,30 @@
-import {  MemorialUIComponent } from './component';
+import { MemorialUIComponent } from './component';
 
+/** Tab information interface */
 export interface SdTabsType {
+  /** Unique identifier for the tab */
+  key: string;
 
-    key: string,
-    label: string,
-    content: any
+  /** Display label for the tab */
+  label: string;
+
+  /** Component to render as tab content */
+  content: any;
 }
 
 /** Tabs component */
-export declare class SdTabs extends MemorialUIComponent{
+export declare class SdTabs extends MemorialUIComponent {
   /**
-   * The tabsInfo to bind the tabs to.
+   * Array of tab information to render
+   * @required
    */
   tabsInfo: SdTabsType[];
 
+  /**
+   * Position of the tabs
+   * @default 'left'
+   */
+  tabPosition?: 'left' | 'right' | 'top' | 'bottom';
 }
 
 declare const plugin: SdTabs;