@mgdis/mg-components 3.1.0

package/dist/mg-components/variables.scss

@@ -0,0 +1,177 @@
+:root {
+  /*
+    Fonts
+  */
+
+  --font-size: 1.3rem;
+  --line-height: 1.4;
+
+  /* Open Sans is used for the body (mostly all texts) */
+  --font-family: 'Open Sans', sans-serif;
+
+  /* Poppins is used for the headings (h1 to h6) */
+  --font-family-heading: 'Poppins', sans-serif;
+
+  /* Font colors */
+  --color-font-light: var(--color-light);
+  --color-font-dark: var(--color-dark);
+  /*
+    Colors
+    https://jira.mgdis.fr/browse/PDA9-690
+   */
+
+  /* Neutral */
+  /* #fefefe; */
+  /* rgb(254, 254, 254); */
+  --color-neutral-h: 0;
+  --color-neutral-s: 0%;
+  --color-neutral-l: 99.6%;
+  --color-neutral: var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l);
+
+  /* Warning */
+  /* #ffc33e */
+  /* rgb(255, 195, 62); */
+  --color-warning-h: 41;
+  --color-warning-s: 100%;
+  --color-warning-l: 62.2%;
+  --color-warning: var(--color-warning-h), var(--color-warning-s), var(--color-warning-l);
+
+  /* Success */
+  /* #32d59c */
+  /* rgb(50, 213, 156); */
+  --color-success-h: 159;
+  --color-success-s: 66%;
+  --color-success-l: 51.6%;
+  --color-success: var(--color-success-h), var(--color-success-s), var(--color-success-l);
+
+  /* Info */
+  /* #005e9c; */
+  /* rgb(0, 94, 156); */
+  --color-info-h: 204;
+  --color-info-s: 100%;
+  --color-info-l: 30.6%;
+  --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
+
+  /* Danger */
+  /* #df242c; */
+  /* rgb(223, 36, 44); */
+  --color-danger-h: 357;
+  --color-danger-s: 74.5%;
+  --color-danger-l: 50.8%;
+  --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
+
+  /* Dark */
+  /* #15282e; */
+  /* rgb(21, 40, 46); */
+  --color-dark-h: 194;
+  --color-dark-s: 37.3%;
+  --color-dark-l: 13.1%;
+  --color-dark: var(--color-dark-h), var(--color-dark-s), var(--color-dark-l);
+
+  /* Light */
+  /* white; (#ffffff) */
+  /* rgb(255, 255, 255); */
+  --color-light-h: 0;
+  --color-light-s: 0%;
+  --color-light-l: 100%;
+  --color-light: var(--color-light-h), var(--color-light-s), var(--color-light-l);
+
+  /*
+    Global
+   */
+  --default-size: 3.5rem;
+
+  /*
+    <mg-icon>
+   */
+  --mg-icon-regular-size: 1.6rem;
+  --mg-icon-large-size: 2.4rem;
+  --mg-icon-extra-large-size: 3.6rem;
+
+  /*
+    <mg-button>
+   */
+
+  --mg-button-border-radius: 0.3rem;
+  --mg-button-icon-border-radius: var(--default-size);
+  --mg-button-disabled-opacity: 0.6;
+
+  /* Primary */
+  --mg-button-primary-color-h: var(--color-dark-h);
+  --mg-button-primary-color-s: var(--color-dark-s);
+  --mg-button-primary-color-l: var(--color-dark-l);
+  --mg-button-primary-font-color: var(--color-neutral);
+
+  /* Secondary */
+  --mg-button-secondary-color-h: var(--color-neutral-h);
+  --mg-button-secondary-color-s: var(--color-neutral-s);
+  --mg-button-secondary-color-l: var(--color-neutral-l);
+  --mg-button-secondary-font-color: var(--color-dark);
+
+  /*
+    <mg-tag>
+   */
+  --mg-tag-height: 2.3rem;
+  --mg-tag-border-radius: 0.5rem;
+  --mg-tag-font-size: 1.2rem;
+
+  /*
+  <mg-badge>
+  */
+  --mg-badge-size: 1.6rem;
+  --mg-badge-font-size: 1.1rem;
+
+  /*
+    <mg-tooltip>
+   */
+  --mg-tooltip-border-radius: 0.5rem;
+  --mg-tooltip-background-color: var(--color-dark);
+  --mg-tooltip-font-color: var(--color-font-light);
+
+  /*
+    <mg-popover>
+   */
+  --mg-popover-background-color: var(--color-light);
+  --mg-popover-font-color: var(--color-font-dark);
+  --mg-popover-title-font-size: 1.4rem;
+
+  /*
+    <mg-message>
+   */
+  --mg-message-border-radius: 0.3rem;
+
+  /*
+    Layout
+   */
+  --mg-grid-spacing: 1rem;
+
+  /*
+    Forms
+   */
+  --mg-form-group-vertical-space: 1.5rem;
+
+  /*
+    <mg-input-...>
+   */
+  --mg-inputs-border-width: 0.1rem;
+  --mg-inputs-border-radius: 0.3rem;
+  --mg-inputs-color: #b5c2c9;
+  --mg-inputs-spacer: 1rem;
+
+  /* Input focus shadow */
+  /* #b5c2c9 */
+  /* rgb(0, 221, 255); */
+  /* hsl(188, 100%, 50%); */
+  --mg-inputs-color-shadow-focus-hsl: 188, 100%, 50%;
+
+  /*
+    <mg-input-toggle>
+  */
+  --mg-input-toggle-border-radius-ratio: 2;
+
+  /*
+    <mg-input-checkbox>
+    <mg-input-radio>
+   */
+  --mg-input-check-size: 1.3rem;
+}

package/dist/types/components/atoms/mg-badge/mg-badge.conf.d.ts

@@ -0,0 +1,8 @@
+/**
+ * List of all possibles variants
+ */
+export declare const variants: string[];
+export declare type BadgeType = {
+  value: string | number;
+  label: string;
+};

package/dist/types/components/atoms/mg-badge/mg-badge.d.ts

@@ -0,0 +1,36 @@
+import { BadgeType } from './mg-badge.conf';
+import { ClassList } from '../../../utils/components.utils';
+export declare class MgBadge {
+  /**
+   * Badge value
+   */
+  value: BadgeType['value'];
+  valideValue(newValue: any): void;
+  /**
+   * Badge label. Include short description.
+   * Required for accessibility
+   */
+  label: BadgeType['label'];
+  /**
+   * Define button variant
+   */
+  variant?: string;
+  validateVariant(newValue: string): void;
+  /**
+   * Define if button is using outline style
+   */
+  outline?: boolean;
+  validateOutline(newValue: boolean): void;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Check if props are well configured on init
+   */
+  componentWillLoad(): void;
+  /**
+   * Render
+   */
+  render(): any;
+}

package/dist/types/components/atoms/mg-badge/mg-badge.stories.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    variant: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    value: {
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgBadge: any;

package/dist/types/components/atoms/mg-button/mg-button.conf.d.ts

@@ -0,0 +1,4 @@
+/**
+ * List of all possibles variants
+ */
+export declare const variants: string[];

package/dist/types/components/atoms/mg-button/mg-button.d.ts

@@ -0,0 +1,67 @@
+import { ClassList } from '../../../utils/components.utils';
+export declare class MgButton {
+  /************
+   * Internal *
+   ************/
+  private onClickElementFn;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgButtonElement;
+  /**
+   * Define button variant
+   */
+  variant: string;
+  validateVariant(newValue: string): void;
+  /**
+   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+   * If not set, it will be created.
+   */
+  identifier?: string;
+  /**
+   * aria-label
+   * In case button text is not explicit enough
+   */
+  label: string;
+  /**
+   * Disable button
+   */
+  disabled: boolean;
+  disabledHandler(isDisabled: boolean): void;
+  /**
+   * Define if button is round.
+   * Used for icon button.
+   */
+  isIcon: boolean;
+  /**
+   * Option to set input disable on click, in order to prevent multi-click.
+   * Parent component have to remove the attribute 'disabled' when the process ends.
+   */
+  disableOnClick: boolean;
+  /**
+   * Define if button is loading, default to false.
+   * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
+   * It's required to reset to false when action/promise in parent is done to stop the loading state
+   */
+  loading: boolean;
+  loadingHandler(newValue: boolean): void;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Trigger actions onClick event
+   */
+  private handleClick;
+  /**
+   * Check if props are well configured on init
+   */
+  componentWillLoad(): void;
+  /**
+   * Render component
+   */
+  render(): any;
+}

package/dist/types/components/atoms/mg-button/mg-button.stories.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    variant: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgButton: any;
+export declare const IsIcon: any;
+export declare const DisableOnClick: any;

package/dist/types/components/atoms/mg-character-left/mg-character-left.d.ts

@@ -0,0 +1,39 @@
+export declare class MgCharacterLeft {
+  /************
+   * Internal *
+   ************/
+  private mustacheCounter;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Sets an `id` attribute.
+   * Needed by the input for accessibility `aria-decribedby`.
+   */
+  identifier: string;
+  /**
+   * Template to display remaining characters.
+   * Must have {counter} inside
+   */
+  template: string;
+  validateTemplate(newValue: string): void;
+  /**
+   * Sets the characters to count
+   */
+  characters: string;
+  /**
+   * Add maximum length
+   */
+  maxlength: number;
+  validateMaxlength(newValue: number): void;
+  /**
+   * Calculate number character left
+   * @returns {string}
+   */
+  private getMessage;
+  /*************
+   * Lifecycle *
+   *************/
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/atoms/mg-character-left/mg-character-left.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgCharacterLeft: any;
+export declare const CustomTemplate: any;

package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Icon SVG paths
+ */
+export declare const icons: Object;
+/**
+ * List of all possibles sizes
+ */
+export declare const sizes: string[];
+/**
+ * List of all possibles variants
+ */
+export declare const variants: string[];

package/dist/types/components/atoms/mg-icon/mg-icon.d.ts

@@ -0,0 +1,36 @@
+import { ClassList } from '../../../utils/components.utils';
+export declare class MgIcon {
+  /**
+   * Icon to display
+   */
+  icon: string;
+  validateIcon(newValue: string): void;
+  /**
+   * Define icon size
+   */
+  size: string;
+  validateSize(newValue: string): void;
+  /**
+   * Define icon variant
+   * Add a background to the icon based on variant color
+   */
+  variant: string;
+  validateVariant(newValue: string): void;
+  /**
+   * Make the icon spin
+   */
+  spin: boolean;
+  handleSpin(newValue: boolean): void;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Check if props are well configured on init
+   */
+  componentWillLoad(): void;
+  /**
+   * Render component
+   */
+  render(): any;
+}

package/dist/types/components/atoms/mg-icon/mg-icon.stories.d.ts

@@ -0,0 +1,26 @@
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    icon: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    size: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    variant: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgIcon: any;

package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts

@@ -0,0 +1,24 @@
+export declare class MgInputTitle {
+  /**
+   * Label input id
+   */
+  identifier: string;
+  /**
+   * If input is required an asterisk is added at the end of the label
+   */
+  required: boolean;
+  /**
+   * Switch from label to fieldset sementic
+   */
+  isLegend: boolean;
+  /**
+   * Component parent tagname
+   */
+  tagName: string;
+  private getTagName;
+  /*************
+   * Lifecycle *
+   *************/
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/atoms/mg-input-title/mg-input-title.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgInputTitle: any;

package/dist/types/components/atoms/mg-tag/mg-tag.conf.d.ts

@@ -0,0 +1,4 @@
+/**
+ * List of all possibles variants
+ */
+export declare const variants: string[];

package/dist/types/components/atoms/mg-tag/mg-tag.d.ts

@@ -0,0 +1,25 @@
+import { ClassList } from '../../../utils/components.utils';
+export declare class MgTag {
+  /**
+   * Define button variant
+   */
+  variant?: string;
+  validateVariant(newValue: string): void;
+  /**
+   * Define if button is using outline style
+   */
+  outline?: boolean;
+  validateOutline(newValue: boolean): void;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Check if props are well configured on init
+   */
+  componentWillLoad(): void;
+  /**
+   * Render
+   */
+  render(): any;
+}

package/dist/types/components/atoms/mg-tag/mg-tag.stories.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    variant: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgTag: any;

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts

@@ -0,0 +1,56 @@
+export declare class MgTooltip {
+  /************
+   * Internal *
+   ************/
+  private popper;
+  private tooltip;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgTooltipElement;
+  /**
+   * Sets an `id` attribute.
+   * Needed by the input for accessibility `aria-decribedby`.
+   */
+  identifier: string;
+  /**
+   * Displayed message in the tooltip
+   */
+  message: string;
+  /**
+   * Tooltip placement
+   */
+  placement: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+  /**
+   * Display tooltip
+   */
+  display: boolean;
+  handleDisplay(newVal: any): void;
+  /**
+   * Disable tooltip
+   */
+  disabled: boolean;
+  /**
+   * Show tooltip
+   * @returns {void}
+   */
+  private show;
+  /**
+   * Hide tooltip
+   * @returns {void}
+   */
+  private hide;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Get slotted element
+   * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
+   * We need to attach the focused element to the tooltip (aria-describedby)
+   */
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.stories.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    layout: string;
+  };
+};
+export default _default;
+export declare const MgTooltip: any;
+export declare const MgTooltipOnButton: any;
+export declare const MgTooltipOnSpan: any;

package/dist/types/components/molecules/inputs/MgInput.conf.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Possible input width
+ */
+export declare type Width = 2 | 4 | 16 | 'full';
+/**
+ * Possible input classes
+ */
+export declare enum InputClass {
+  ERROR = "is-not-valid"
+}

package/dist/types/components/molecules/inputs/MgInput.d.ts

@@ -0,0 +1,35 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+import { Width } from './MgInput.conf';
+import { ClassList } from '../../../utils/components.utils';
+/**
+ * MgInput Interface
+ */
+interface MgInputProps {
+  identifier: string;
+  classList: ClassList;
+  label: string;
+  labelOnTop: boolean;
+  labelHide: boolean;
+  isFieldset: boolean;
+  value: string;
+  readonlyValue: string;
+  required: boolean;
+  readonly: boolean;
+  width: Width;
+  disabled: boolean;
+  tooltip: string;
+  displayCharacterLeft: boolean;
+  characterLeftTemplate: string;
+  maxlength: number;
+  helpText: string;
+  errorMessage: string;
+}
+/**
+ * Get input template
+ * @param props MgInput Interface Props
+ * @param children Represent scoped elements
+ * @param utils Stencil.js utils
+ * @returns JSX template
+ */
+export declare const MgInput: FunctionalComponent<MgInputProps>;
+export {};

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts

@@ -0,0 +1,19 @@
+/**
+ * type CheckboxItem
+ * use to match checkbox attributes
+ */
+export declare type CheckboxItem = {
+  id: string;
+  title: string;
+  value: boolean | null;
+  disabled?: boolean;
+};
+/**
+ * type CheckboxValue
+ * use to match returned value
+ */
+export declare type CheckboxValue = {
+  title: string;
+  value: boolean | null;
+  disabled?: boolean;
+};