@mgdis/mg-components 5.5.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/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-button/mg-button.conf.d.ts

@@ -5,7 +5,7 @@ export declare const variants: readonly ["primary", "secondary", "danger", "dang
 /**
  * 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-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/mg-tag.conf.d.ts

@@ -5,4 +5,4 @@ export declare const variants: readonly ["primary", "secondary", "success", "war
 /**
  * TagVariantType type from tag variants
  */
-export declare type TagVariantType = typeof variants[number];
+export type TagVariantType = (typeof variants)[number];

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;

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

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

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

@@ -2,7 +2,7 @@
  * type RadioOption
  * use to match radio attributes
  */
-export declare type RadioOption = {
+export type RadioOption = {
   title: string;
   value: unknown;
   disabled?: boolean;

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

@@ -2,7 +2,7 @@
  * type SelectOption
  * use to match select>option attributes
  */
-export declare type SelectOption = {
+export type SelectOption = {
   title: string;
   value: unknown;
   disabled?: boolean;
@@ -12,7 +12,7 @@ export declare type SelectOption = {
  * type OptGroup
  * use to match select>optgroup attributes
  */
-export declare type OptGroup = {
+export type OptGroup = {
   group: string;
   options: SelectOption[];
 };

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

@@ -2,7 +2,7 @@
  * type ToggleValue
  * use to match toggle input attributes
  */
-export declare type ToggleValue = {
+export type ToggleValue = {
   title: string;
   value: unknown;
 };

package/dist/types/components/molecules/menu/mg-menu/doc/mg-menu.stories.d.ts

@@ -9,6 +9,11 @@ declare const _default: {
         type: string;
       };
     };
+    moreitem: {
+      control: {
+        type: string;
+      };
+    };
   };
 };
 export default _default;

package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts

@@ -1,3 +1,5 @@
+import { MgIcon } from '../../../atoms/mg-icon/mg-icon';
+import { MgMenu } from './mg-menu';
 /**
  * Menu direction type
  */
@@ -5,3 +7,38 @@ export declare enum Direction {
   VERTICAL = "vertical",
   HORIZONTAL = "horizontal"
 }
+/**
+ * message type
+ */
+export type MessageType = {
+  moreLabel: string;
+  badgeLabel: string;
+};
+/**
+ * more item type
+ */
+export type MoreItemType = {
+  mgIcon?: {
+    icon: MgIcon['icon'];
+  };
+  slotLabel?: {
+    label?: string;
+    display?: boolean;
+  };
+  size?: MgMenu['size'];
+};
+/**
+ * More item type guard
+ *
+ * @param {unknown} element element to control
+ * @returns {boolean} truthy if element is more-item
+ */
+export declare const isMoreItem: (element: unknown) => element is MoreItemType;
+/**
+ * List of all possibles sizes
+ */
+export declare const sizes: readonly ["regular", "medium", "large"];
+/**
+ * item Size from sizes
+ */
+export type MenuSizeType = (typeof sizes)[number];