@mgdis/mg-components 5.4.0 → 5.6.0

package/dist/mg-components/styles/a11y.scss

@@ -0,0 +1,32 @@
+/**
+ * A11Y
+ */
+
+// Make content available only for screen reader
+// https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
+.sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+// Remove outline for non-keyboard :focus
+// https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}

package/dist/mg-components/styles/components.scss

@@ -0,0 +1,3 @@
+[hide] {
+  display: none;
+}

package/dist/mg-components/styles/fonts.scss

@@ -0,0 +1,21 @@
+/**
+ * Open Sans
+ * https://fonts.google.com/specimen/Open+Sans
+ */
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 600;
+  src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 700;
+  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
+}

package/dist/mg-components/styles/form.scss

@@ -0,0 +1,3 @@
+.is-asterisk {
+  color: hsl(var(--color-danger));
+}

package/dist/mg-components/styles/global.scss

@@ -0,0 +1,87 @@
+/**
+ * Here we building the CSS for the component library
+ */
+
+// Normalize CSS : https://necolas.github.io/normalize.css/
+@import '~normalize.css/normalize.css';
+
+// Fonts
+@import './fonts.scss';
+
+// Variables
+@import './variables.css';
+
+// Main style
+@import './main.scss';
+
+// Typography style
+@import './typography.scss';
+
+// Accessibility
+@import './a11y.scss';
+
+// Form
+// already included by mg-form
+// @import './form.scss';
+
+// Layout
+@import './layout.scss';
+
+// Utilities
+@import './utilities.scss';
+
+/**
+ * Components style
+ * molecules
+ */
+
+@import './components.scss';
+
+/* Atoms */
+
+// <mg-badge>
+@import '../components/atoms/mg-badge/mg-badge.scss';
+
+// <mg-button>
+@import '../components/atoms/mg-button/mg-button.scss';
+
+// <mg-character-left>
+@import '../components/atoms/mg-character-left/mg-character-left.scss';
+
+// <mg-icon>
+@import '../components/atoms/mg-icon/mg-icon.scss';
+
+// <mg-input-title>
+//! For now input style will not be included
+// @import '../components/atoms/mg-input-title/mg-input-title.scss';
+
+// <mg-tag>
+@import '../components/atoms/mg-tag/mg-tag.scss';
+
+// <mg-tooltip>
+@import '../components/atoms/mg-tooltip/mg-tooltip.scss';
+
+/* Molecules */
+
+// <mg-input-...>
+//! For now input style will not be included
+// @import '../components/molecules/inputs/styles/mg-input.scss';
+// @import '../components/molecules/inputs/styles/mg-input-box.scss';
+// @import '../components/molecules/inputs/styles/mg-input-charleft.scss';
+// @import '../components/molecules/inputs/styles/mg-input-fieldset.scss';
+// @import '../components/molecules/inputs/styles/mg-input-width.scss';
+
+// <mg-form>
+@import '../components/molecules/mg-form/mg-form.scss';
+
+// <mg-message>
+@import '../components/molecules/mg-message/mg-message.scss';
+
+// <mg-pagination>
+@import '../components/molecules/mg-pagination/mg-pagination.scss';
+
+// <mg-popover>
+@import '../components/molecules/mg-popover/mg-popover.scss';
+
+// <mg-tabs>
+@import '../components/molecules/mg-tabs/mg-tabs.scss';

package/dist/mg-components/styles/layout.scss

@@ -0,0 +1,29 @@
+@use 'sass:math';
+
+// Number of column
+$grid-columns: 12;
+
+// Calculate width
+@function round-width($i) {
+  $width: math.div(100 * $i, $grid-columns);
+  @return #{$width}#{'%'};
+}
+
+.mg-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+// Those columns will equaly share space
+.mg-grid__col {
+  flex: 1 0 0;
+  padding: 0 var(--mg-grid-spacing);
+
+  // Building columns
+  @for $i from 1 through $grid-columns {
+    &.mg-grid__col-#{$i} {
+      flex: 0 0 auto;
+      width: round-width($i);
+    }
+  }
+}

package/dist/mg-components/styles/main.scss

@@ -0,0 +1,23 @@
+// Make all element use the border box model
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/**
+ * We set html font size to 62.5% to get 10px in most of the case.
+ * This is a common use for an easiest calculation : 1rem = 10px
+ * Default font size will be defined in body element.
+ */
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  line-height: var(--line-height);
+  -webkit-font-smoothing: antialiased;
+}

package/dist/mg-components/styles/navigation-button.scss

@@ -0,0 +1,76 @@
+@use 'sass:map';
+
+$border-bottom-size: 0.3rem;
+$font-size-large: calc(var(--font-size) + 0.2rem);
+$navigation-button-column-gap: 1rem;
+
+@mixin navigation-button($element, $button-sizes) {
+  @each $name, $size in $button-sizes {
+    .#{$element}.#{$element}--size-#{$name} .#{$element}__navigation-button,
+    .#{$element}__navigation-button.#{$element}__navigation-button--size-#{$name} {
+      padding: #{map.get($size, 'vertical')} #{map.get($size, 'horizontal')};
+      height: calc(#{map.get($size, 'height')});
+      &,
+      ::slotted([slot='label']),
+      ::slotted([slot='metadata']) {
+        @if $name == 'regular' {
+          font-size: var(--font-size);
+        } @else {
+          font-size: $font-size-large;
+        }
+      }
+      &.#{$element}__navigation-button--horizontal {
+        padding-bottom: calc(#{map.get($size, 'vertical')} - #{$border-bottom-size});
+      }
+      &.#{$element}__navigation-button--vertical {
+        padding-left: calc(#{map.get($size, 'horizontal')} - #{$border-bottom-size});
+      }
+    }
+  }
+
+  .#{$element}__navigation-button {
+    display: flex;
+    align-items: center;
+    column-gap: var(--#{$element}-navigation-button-column-gap, $navigation-button-column-gap);
+    background-color: unset;
+    border: none;
+    font-family: var(--font-family);
+    color: hsl(var(--#{$element}-color-hsl, var(--color-dark)));
+    line-height: var(--line-height);
+    text-decoration: none;
+    white-space: nowrap;
+    box-sizing: border-box;
+    cursor: pointer;
+    &:disabled,
+    &--disabled {
+      cursor: default;
+      opacity: 0.3;
+    }
+    &:focus-visible {
+      z-index: 10;
+    }
+    &:hover:not(.#{$element}__navigation-button--disabled),
+    &:focus-visible:not(.#{$element}__navigation-button--disabled) {
+      background-color: hsl(var(--#{$element}-focused-background-color-hsl), 0.1);
+    }
+    &.#{$element}__navigation-button--active {
+      color: hsl(var(--#{$element}-color-active-hsl));
+      font-weight: 600;
+      &.#{$element}__navigation-button--horizontal {
+        border-bottom-color: hsl(var(--#{$element}-border-color-active-hsl));
+      }
+      &.#{$element}__navigation-button--vertical {
+        border-left-color: hsl(var(--#{$element}-border-color-active-hsl));
+      }
+    }
+    &.#{$element}__navigation-button--hidden {
+      display: none;
+    }
+    &.#{$element}__navigation-button--horizontal {
+      border-bottom: $border-bottom-size solid transparent;
+    }
+    &.#{$element}__navigation-button--vertical {
+      border-left: $border-bottom-size solid transparent;
+    }
+  }
+}

package/dist/mg-components/styles/reset-mg-card-slotted-variables.scss

@@ -0,0 +1,9 @@
+@mixin reset-slot-card-variables() {
+  ::slotted(*) {
+    --mg-card-border: var(--mg-card-border-default);
+    --mg-card-padding: var(--mg-card-padding-default);
+    --mg-card-border-radius: var(--mg-card-border-radius-default);
+    --mg-card-background: var(--mg-card-background-default);
+    --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  }
+}

package/dist/mg-components/styles/typography.scss

@@ -0,0 +1,75 @@
+/**
+ * Paragraph
+ */
+
+p {
+  margin: 0;
+  & + p {
+    margin-top: 1rem;
+  }
+}
+
+/**
+ * Headings
+ *
+ * Classes can also be used on element to match attending, for exemples :
+ * <h4 class="h3">blu</h4>
+ * <div role="heading" aria-level="4" class="h4">blu</div>
+ */
+
+@for $i from 1 through 6 {
+  h#{$i},
+  .h#{$i} {
+    font-family: var(--font-family-heading);
+  }
+}
+
+//h1
+h1,
+.h1 {
+  font-size: calc(var(--font-size) * 1.85);
+}
+
+//h2
+h2,
+.h2 {
+  font-size: calc(var(--font-size) * 1.65);
+}
+
+//h3
+h3,
+.h3 {
+  font-size: calc(var(--font-size) * 1.35);
+}
+
+//h4
+h4,
+.h4 {
+  font-size: calc(var(--font-size) * 1.2);
+}
+
+//h5
+h5,
+.h5 {
+  font-size: calc(var(--font-size) * 1.1);
+}
+
+//h6
+h6,
+.h6 {
+  font-size: calc(var(--font-size) * 0.8);
+}
+
+/**
+ * Links
+ */
+a {
+  color: hsl(var(--color-primary));
+  text-decoration: underline;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+}

package/dist/mg-components/styles/utilities.scss

@@ -0,0 +1,21 @@
+// Helper to manage space between elements
+.mg-group-elements {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  // remove default margin
+  & > * {
+    margin: 0 !important; // I would say important is allowed in utility classes ?
+  }
+
+  // Align button on right side
+  &.mg-group-elements--align-right {
+    justify-content: flex-end;
+  }
+}
+
+.no-padding {
+  padding: 0;
+}

package/dist/mg-components/variables.css

@@ -96,7 +96,7 @@
   --color-secondary: hsl(var(--color-neutral));
 
   /* Shadow */
-  --box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);
+  --box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark), 0.15);
 
   /*
     Global
@@ -180,7 +180,7 @@
   --mg-panel-box-shadow: var(--box-shadow);
   --mg-panel-content-padding: 1.5rem;
 
-   /*
+  /*
     <mg-illustrated-message>
    */
 
@@ -189,16 +189,16 @@
   /*
     <mg-card>
    */
-  --mg-card-padding: 1.6rem;
-  --mg-card-border-radius: 0.5rem;
-  --mg-card-background: hsl(var(--color-light));
-  --mg-card-border: 0.1rem solid hsla(var(--color-dark), 5%);
-  --mg-card-box-shadow: var(--box-shadow);
+  --mg-card-padding-default: 1.6rem;
+  --mg-card-border-radius-default: 0.5rem;
+  --mg-card-background-default: hsl(var(--color-light));
+  --mg-card-border-default: 0.1rem solid hsl(var(--color-dark), 0.05);
+  --mg-card-box-shadow-default: var(--box-shadow);
 
   /*
     <mg-divider>
   */
-  --mg-divider-background-color: hsla(var(--color-dark), 15%);
+  --mg-divider-background-color: hsl(var(--color-dark), 0.15);
   --mg-divider-thickness: 0.1rem;
   --mg-divider-vertical-spacing: 4rem;
 
@@ -245,7 +245,7 @@
   --mg-menu-item-focused-background-color-hsl: var(--mg-color-app-hsl);
   --mg-menu-item-border-color-active-hsl: var(--mg-color-app-hsl);
   --mg-menu-item-color-active-hsl: var(--mg-color-app-hsl);
-  
+
   /*
   <mg-tabs>
   */

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

@@ -2,17 +2,6 @@ declare const _default: {
   component: string;
   title: string;
   argTypes: {
-    variant: {
-      options: readonly ["info", "primary", "secondary", "success", "warning", "danger"];
-      control: {
-        type: string;
-      };
-      table: {
-        defaultValue: {
-          summary: "info";
-        };
-      };
-    };
     value: {
       control: {
         type: string;

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

@@ -1,8 +1,8 @@
 /**
  * List of all possibles variants
  */
-export declare const variants: readonly ["info", "primary", "secondary", "success", "warning", "danger"];
+export declare const variants: readonly ["info", "primary", "secondary", "success", "warning", "danger", "text-color"];
 /**
  * Variant type from variants
  */
-export declare type BadgeVariantType = typeof variants[number];
+export type BadgeVariantType = (typeof variants)[number];

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

@@ -4,7 +4,7 @@ export declare class MgBadge {
   /************
    * Internal *
    ************/
-  private classOutline;
+  private readonly classOutline;
   /**************
    * Decorators *
    **************/

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

@@ -2,17 +2,6 @@ declare const _default: {
   component: string;
   title: string;
   argTypes: {
-    variant: {
-      options: readonly ["primary", "secondary", "danger", "danger-alt", "info", "flat", "success"];
-      control: {
-        type: string;
-      };
-      table: {
-        defaultValue: {
-          summary: "primary";
-        };
-      };
-    };
     type: {
       options: ("button" | "submit" | "reset")[];
       control: {

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

@@ -1,11 +1,11 @@
 /**
  * List of all possibles variants
  */
-export declare const variants: readonly ["primary", "secondary", "danger", "danger-alt", "info", "flat", "success"];
+export declare const variants: readonly ["primary", "secondary", "danger", "danger-alt", "info", "flat", "success", "link"];
 /**
- * ButtonType type from buttonTypes
+ * VariantType type from button variants
  */
-export declare type VariantType = typeof variants[number];
+export type VariantType = (typeof variants)[number];
 /**
  * List of all possibles button types
  */
@@ -13,4 +13,4 @@ export declare const buttonTypes: readonly ["button", "submit", "reset"];
 /**
  * ButtonType type from buttonTypes
  */
-export declare type ButtonType = typeof buttonTypes[number];
+export type ButtonType = (typeof buttonTypes)[number];

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

@@ -5,9 +5,9 @@ export declare class MgButton {
    * Internal *
    ************/
   private onClickElementFn;
-  private classDisabled;
-  private classLoading;
-  private classFullWidth;
+  private readonly classDisabled;
+  private readonly classLoading;
+  private readonly classFullWidth;
   /**************
    * Decorators *
    **************/
@@ -37,7 +37,7 @@ export declare class MgButton {
    * Set button to full-width
    */
   fullWidth: boolean;
-  validateFullWidth(newValue: any): void;
+  validateFullWidth(newValue: MgButton['fullWidth']): void;
   /**
    * Define form id to attach button with.
    * If this attribute is not set, the <button> is associated with its ancestor <form> element.
@@ -47,7 +47,7 @@ export declare class MgButton {
    * Disable button
    */
   disabled: boolean;
-  disabledHandler(isDisabled: boolean): void;
+  disabledHandler(isDisabled: MgButton['disabled']): void;
   /**
    * Define if button is round.
    * Used for icon button.
@@ -64,7 +64,7 @@ export declare class MgButton {
    * 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;
+  loadingHandler(newValue: MgButton['loading']): void;
   /**
    * Component classes
    */

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

@@ -9,7 +9,7 @@ export declare const sizes: readonly ["small", "regular", "large", "extra-large"
 /**
  * Icon Size from sizes
  */
-export declare type IconSizeType = typeof sizes[number];
+export type IconSizeType = (typeof sizes)[number];
 /**
  * List of all possibles variants
  */
@@ -17,4 +17,4 @@ export declare const variants: readonly ["success", "warning", "danger", "info"]
 /**
  * Variant type from variants
  */
-export declare type IconVariantType = typeof variants[number];
+export type IconVariantType = (typeof variants)[number];

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

@@ -1,19 +1,6 @@
 declare const _default: {
   component: string;
   title: string;
-  argTypes: {
-    variant: {
-      options: string[];
-      control: {
-        type: string;
-      };
-      table: {
-        defaultValue: {
-          summary: string;
-        };
-      };
-    };
-  };
 };
 export default _default;
 export declare const MgTag: any;

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

@@ -1,4 +1,8 @@
 /**
  * List of all possibles variants
  */
-export declare const variants: string[];
+export declare const variants: readonly ["primary", "secondary", "success", "warning", "danger", "info"];
+/**
+ * TagVariantType type from tag variants
+ */
+export type TagVariantType = (typeof variants)[number];

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

@@ -1,26 +1,47 @@
+import { TagVariantType } from './mg-tag.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgTag {
   /************
    * Internal *
    ************/
-  private classOutline;
+  private readonly classOutline;
+  private readonly classSoft;
   /**************
    * Decorators *
    **************/
   /**
-   * Define button variant
+   * Get component DOM element
    */
-  variant: string;
-  validateVariant(newValue: string, oldValue?: string): void;
+  element: HTMLMgTagElement;
   /**
-   * Define if button is using outline style
+   * Define tag variant
+   */
+  variant: TagVariantType;
+  validateVariant(newValue: MgTag['variant'], oldValue?: MgTag['variant']): void;
+  /**
+   * Define if tag is using outline style
    */
   outline: boolean;
-  validateOutline(newValue: boolean): void;
+  validateOutline(newValue: MgTag['outline']): void;
+  /**
+   * Define if tag is using soft style
+   */
+  soft: boolean;
+  validateSoft(newValue: MgTag['soft']): void;
   /**
    * Component classes
    */
   classList: ClassList;
+  /*************
+   * Methods *
+   *************/
+  /**
+   * Validate the given textContent
+   *
+   * @param {string} textContent html element textContent property
+   * @returns {void}
+   */
+  private validateTextContent;
   /*************
    * Lifecycle *
    *************/

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

@@ -1,11 +1,11 @@
 /**
  * Possible input width
  */
-export declare type Width = 2 | 4 | 16 | 'full';
+export type Width = 2 | 4 | 16 | 'full';
 /**
  * Possible Input types
  */
-export declare type HTMLMgInputsElement = HTMLMgInputCheckboxElement | HTMLMgInputDateElement | HTMLMgInputNumericElement | HTMLMgInputPasswordElement | HTMLMgInputRadioElement | HTMLMgInputSelectElement | HTMLMgInputTextElement | HTMLMgInputTextareaElement | (HTMLMgInputToggleElement & {
+export type HTMLMgInputsElement = HTMLMgInputCheckboxElement | HTMLMgInputDateElement | HTMLMgInputNumericElement | HTMLMgInputPasswordElement | HTMLMgInputRadioElement | HTMLMgInputSelectElement | HTMLMgInputTextElement | HTMLMgInputTextareaElement | (HTMLMgInputToggleElement & {
   required: true;
   invalid: false;
   displayError: () => void;