ulaval · simardo · Feb 14, 2018 · Feb 2, 2018 · Feb 2, 2018 · Feb 6, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulaval/modul-components",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "description": "Component library",
   "author": "Martin Simard <martin.simard@dti.ulaval.ca>",
   "private": false,

diff --git a/src/assets/icons/.DS_Store b/src/assets/icons/.DS_Store
diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
@@ -3,8 +3,8 @@ $m-accordion--icon-l-width: 12px;
 $m-accordion--icon-width: 10px;
 $m-accordion--icon-l-height: 2px;
 $m-accordion--icon-height: 1px;
-$m-accordion--border-size: 2px;
-$m-accordion--border-color: $m-color--grey-light;
+$m-accordion--border-size: $m-border-width;
+$m-accordion--border-color: $m-color--border;
 $m-accordion--color: $m-color--accent;
 
 .m-accordion {

diff --git a/src/components/datepicker/datepicker.scss b/src/components/datepicker/datepicker.scss
@@ -62,7 +62,7 @@ $m-datepicker--item-dimension: $m-touch-size !default;
 
         &:hover,
         &:focus {
-            color: $m-color--black-grey-lighter;
+            color: $m-color--grey-darker;
         }
     }
 

diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
@@ -146,7 +146,7 @@ $m-dialog--max-width--s: 420px !default;
 
     &__header {
         position: relative;
-        background: $m-color--black-grey;
+        background-color: var(--m-color--header-dark);
         color: $m-color--white;
         display: flex;
         align-items: center;

diff --git a/src/components/dropdown-group/dropdown-group.scss b/src/components/dropdown-group/dropdown-group.scss
@@ -1,9 +1,4 @@
 @import 'abstracts/variables';
-$m-dropdown--color-hover: $m-color--grey-lightest !default;
-$m-dropdown--color-select: $m-color--grey-lighter !default;
-$m-dropdown--color-focus: $m-color--interactive-lightest !default;
-$m-dropdown--color-active: $m-color--interactive-lightest !default;
-$m-dropdown--margin: $m-padding--xs !default;
 
 .m-dropdown-group {
     .m-dropdown-group__header {

diff --git a/src/components/dropdown/dropdown.html b/src/components/dropdown/dropdown.html
@@ -1,6 +1,6 @@
 <div class="m-dropdown"
      :class="{ 'm--is-open': open, 'm--is-disabled': disabled, 'm--is-waiting': waiting, 'm--is-filterable': filterable }"
-     :style="{ width: width, 'max-width': maxWidth }"
+     :style="{ width: inputWidth, maxWidth: inputMaxWidth }"
      ref="mDropdown">
     <m-input-style ref="mInputStyle"
                    :label="label"
@@ -10,7 +10,7 @@
                    :empty="isEmpty"
                    :error="hasError"
                    :valid="isValid"
-                   :width="width"
+                   width="100%"
                    :icon-name="iconName"
                    @mousedown="inputOnMousedown"
                    @mouseup="inputOnMouseup"
@@ -55,6 +55,7 @@
              :leave="transitionLeave"
              :padding-header="false"
              :padding-body="false"
+             :padding="false"
              :focus-management="isMqMaxS"
              :close-on-backdrop="true">
         <template slot="header" v-if="isMqMaxS && (hasLabel || filterable)">

diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
@@ -9,6 +9,7 @@ import DropdownItemPlugin, { MDropdownInterface, MDropdownItem, BaseDropdown, Ba
 import { MDropdownGroup } from '../dropdown-group/dropdown-group';
 import { InputState, InputStateMixin } from '../../mixins/input-state/input-state';
 import { InputPopup } from '../../mixins/input-popup/input-popup';
+import { InputWidth, InputMaxWidth } from '../../mixins/input-width/input-width';
 import { MediaQueries, MediaQueriesMixin } from '../../mixins/media-queries/media-queries';
 import MediaQueriesPlugin from '../../utils/media-queries/media-queries';
 import i18nPlugin from '../../utils/i18n/i18n';
@@ -26,7 +27,8 @@ const DROPDOWN_STYLE_TRANSITION: string = 'max-height 0.3s ease';
     mixins: [
         InputState,
         InputPopup,
-        MediaQueries
+        MediaQueries,
+        InputWidth
     ]
 })
 export class MDropdown extends BaseDropdown implements MDropdownInterface {
@@ -41,8 +43,6 @@ export class MDropdown extends BaseDropdown implements MDropdownInterface {
     public iconName: string;
     @Prop()
     public filterable: boolean;
-    @Prop({ default: DROPDOWN_MAX_WIDTH })
-    public width: string;
     @Prop()
     public textNoData: string;
     @Prop()

diff --git a/src/components/edit-window/edit-window.scss b/src/components/edit-window/edit-window.scss
@@ -87,7 +87,7 @@
         justify-content: space-between;
         width: 100%;
         color: $m-color--white;
-        background: $m-color--black-grey;
+        background-color: var(--m-color--header-dark);
 
         h1,
         h2,

diff --git a/src/components/icon-button/icon-button.scss b/src/components/icon-button/icon-button.scss
@@ -53,7 +53,7 @@
             }
 
             &::before {
-                background: $m-color--black-grey-light;
+                background: $m-color--grey-dark;
             }
         }
 

diff --git a/src/components/input-style/input-style.scss b/src/components/input-style/input-style.scss
@@ -209,7 +209,7 @@ $m-input-style--padding: 6px !default;
         margin-bottom: 4px; // Magic number
         font-size: $m-font-size;
         font-weight: $m-font-weight;
-        color: $m-color--black-grey-lighter;
+        color: $m-color--grey-darker;
         cursor: pointer;
 
         .m-icon {

diff --git a/src/components/limit-text/limit-text.ts b/src/components/limit-text/limit-text.ts
@@ -30,23 +30,23 @@ export class MLimitText extends ModulVue {
     private maxHeight: number = 0;
     private overflow: boolean = false;
 
-    protected mounted() {
+    protected mounted(): void {
         Vue.nextTick(() => {
             this.computeHeight();
         });
     }
 
-    protected updated() {
+    protected updated(): void {
         this.computeHeight();
     }
 
-    private computeHeight() {
+    private computeHeight(): void {
         this.contentHeight = (this.$refs.container as HTMLElement).scrollHeight;
         this.maxHeight = (this.$refs.test as HTMLElement).clientHeight * this.lines;
         this.overflow = this.contentHeight > this.maxHeight;
     }
 
-    private get maxHeightStyle() {
+    private get maxHeightStyle(): string | undefined {
         if (this.overflow) {
             return this.propOpen ? this.contentHeight + 'px' : this.maxHeight + 'px';
         }

diff --git a/src/components/link/link.html b/src/components/link/link.html
@@ -3,6 +3,7 @@
                  :class="{ 'm--is-unvisited': isUnvisited,
                            'm--is-disabled': disabled,
                            'm--no-underline': !underline,
+                           'm--is-skin-light': isSkinLight,
                            'm--has-right-icon' : isIconPositionRight,
                            'm--has-left-icon' : !isIconPositionRight }"
                  :to="routerLinkUrl"
@@ -19,6 +20,8 @@
                  'm--is-disabled': disabled,
                  'm--no-underline': !underline,
                  'm--is-button': isButton,
+                 'm--is-text-link': isTextLink,
+                 'm--is-skin-light': isSkinLight,
                  'm--has-right-icon' : isIconPositionRight,
                  'm--has-left-icon' : !isIconPositionRight }"
        :href="propUrl"

diff --git a/src/components/link/link.scss b/src/components/link/link.scss
@@ -23,51 +23,51 @@
         }
     }
 
-    &:not(.m--is-disabled) {
+    &:not(.m--is-disabled):not(.m--is-text-link) {
         &:not(.m--no-underline) {
             .m-link__text {
                 transition: box-shadow $m-transition-duration--s ease;
-                box-shadow: 0 0 rgba($m-color--interactive, 0);
+                box-shadow: 0 0 rgba($m-color--interactive, 0); // rgba doesn't seem to work with css variables in hex value... but in this case it doesn't matter though.
             }
 
             &:not(.m--is-unvisited):visited {
-                color: $m-color--interactive-darker;
+                color: var(--m-color--interactive-darker);
             }
 
             &:hover,
             &:focus {
                 .m-link__text {
-                    box-shadow: 0 1px $m-color--interactive-light;
+                    box-shadow: 0 1px var(--m-color--interactive-light);
                 }
             }
 
             &:active {
                 .m-link__text {
-                    box-shadow: 0 1px $m-color--interactive-dark;
+                    box-shadow: 0 1px var(--m-color--interactive-dark);
                 }
             }
         }
 
         &:not(.m--is-unvisited):visited {
-            color: $m-color--interactive-darker;
+            color: var(--m-color--interactive-darker);
 
             &:hover,
             &:focus {
-                color: $m-color--interactive-light;
+                color: var(--m-color--interactive-light);
             }
 
             &:active {
-                color: $m-color--interactive-dark;
+                color: var(--m-color--interactive-dark);
             }
         }
 
         &:hover,
         &:focus {
-            color: $m-color--interactive-light;
+            color: var(--m-color--interactive-light);
         }
 
         &:active {
-            color: $m-color--interactive-dark;
+            color: var(--m-color--interactive-dark);
         }
     }
 
@@ -76,6 +76,21 @@
         cursor: default;
     }
 
+    &.m--is-text-link {
+        color: $m-color--text;
+    }
+
+    &.m--is-skin-light {
+        --m-color--interactive-darker: $m-color--white;
+        --m-color--interactive-dark: $m-color--white;
+        --m-color--interactive: $m-color--white;
+        --m-color--interactive-light: $m-color--white;
+        --m-color--interactive-lighter: $m-color--white;
+        --m-color--interactive-lightest: $m-color--white;
+
+        color: $m-color--white;
+    }
+
     &:focus {
         outline: none;
     }

diff --git a/src/components/link/link.ts b/src/components/link/link.ts
@@ -10,6 +10,7 @@ import I18nPlugin from '../i18n/i18n';
 export enum MLinkMode {
     RouterLink = 'router-link',
     Link = 'link',
+    Text = 'text',
     Button = 'button'
 }
 
@@ -18,6 +19,10 @@ export enum MLinkIconPosition {
     Right = 'right'
 }
 
+export enum MLinkSkin {
+    light = 'light'
+}
+
 const ICON_NAME_DEFAULT: string = 'chevron';
 
 @WithRender
@@ -31,6 +36,7 @@ export class MLink extends ModulVue {
         validator: value =>
             value == MLinkMode.RouterLink ||
             value == MLinkMode.Link ||
+            value == MLinkMode.Text ||
             value == MLinkMode.Button
     })
     public mode: MLinkMode;
@@ -43,6 +49,11 @@ export class MLink extends ModulVue {
 
     @Prop({ default: true })
     public underline: boolean;
+    @Prop({
+        validator: value =>
+            value == MLinkSkin.light
+    })
+    public skin: MLinkSkin;
 
     @Prop()
     public target: string;
@@ -82,6 +93,14 @@ export class MLink extends ModulVue {
         return this.mode == MLinkMode.Button;
     }
 
+    private get isTextLink(): boolean {
+        return this.mode == MLinkMode.Text;
+    }
+
+    private get isSkinLight(): boolean {
+        return this.skin == MLinkSkin.light;
+    }
+
     private get isUnvisited(): boolean {
         return this.isButton ? true : this.unvisited;
     }

diff --git a/src/components/list-item/list-item.html b/src/components/list-item/list-item.html
@@ -6,7 +6,8 @@
               'm--has-border-top': borderTop,
               'm--has-border-bottom': borderBottom,
               'm--has-menu': $slots['menu'],
-              'm--is-full-width': fullWidth }">
+              'm--is-full-width': fullWidth,
+              'm--is-full-height': fullHeight }">
     <div class="m-list-item__content">
         <slot></slot>
     </div>

diff --git a/src/components/list-item/list-item.scss b/src/components/list-item/list-item.scss
@@ -7,7 +7,7 @@
     padding-right: 0;
     padding-left: 0;
 
-    @media (min-width: $m-mq--min--s) {
+    @media (min-width: $m-mq--min--s + 1) {
         padding-right: $m-spacing;
         padding-left: $m-spacing;
     }
@@ -46,6 +46,11 @@
         padding-right: 0;
     }
 
+    &.m--is-full-height {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
     &.m--has-icon,
     &.m--has-menu,
     &.m--is-waiting {

diff --git a/src/components/list-item/list-item.ts b/src/components/list-item/list-item.ts
@@ -19,9 +19,11 @@ export class MListItem extends Vue {
     public disabled: boolean;
     @Prop()
     public waiting: boolean;
-    @Prop()
+    @Prop({ default: false })
     public fullWidth: boolean;
     @Prop({ default: false })
+    public fullHeight: boolean;
+    @Prop({ default: false })
     public borderTop: boolean;
     @Prop({ default: false })
     public borderBottom: boolean;

diff --git a/src/components/menu-item/menu-item.scss b/src/components/menu-item/menu-item.scss
@@ -48,7 +48,7 @@ $m-menu-item--color-active: $m-color--grey-lightest !default;
 
             .m-menu-item {
                 &__icon {
-                    color: $m-color--black-grey;
+                    color: $m-color--grey-darker;
                 }
             }
         }

diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
@@ -20,7 +20,7 @@ export enum MOptionsMenuSkin {
 export class MMenu extends BaseMenu implements MMenuInterface {
 
     @Prop({
-        default: MPopperPlacement.BottomStart,
+        default: MPopperPlacement.Bottom,
         validator: value =>
             value == MPopperPlacement.Bottom ||
             value == MPopperPlacement.BottomEnd ||

diff --git a/src/components/navbar-item/navbar-item.scss b/src/components/navbar-item/navbar-item.scss
@@ -90,7 +90,7 @@ a {
             a,
             button {
                 color: $m-color--white;
-                background: $m-color--black-grey-light;
+                background: $m-color--grey-dark;
             }
         }
     }

diff --git a/src/components/panel/panel.scss b/src/components/panel/panel.scss
@@ -20,7 +20,7 @@ $m-panel--screen--min: 640px;
     }
 
     &.m--is-skin-darker {
-        background: $m-color--black-grey;
+        background: $m-color--grey-darker;
         color: $m-color--white;
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,7 +53,7 @@ @@
                 }
                 &::before {
-                    background: $m-color--black-grey-light;
+                    background: $m-color--grey-dark;
                 }
             }
@@ Expand Down @@