ecabs-components 2.0.0-alpha.8 → 2.0.0-alpha.9

package/src/assets/styles/scss/modules/_badge.scss

@@ -3,12 +3,14 @@
 @use "../utilities/variables";
 
 .badge {
+  --badge-gap: 0.25rem;
+
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--badge-gap);
 
   max-width: var(--badge-max-width, 100%);
-  border: 1px solid transparent;
+  border: 1px solid var(--badge-border-color, transparent);
   border-radius: variables.$border-radius-base;
   font-weight: fonts.$font-weight-medium;
   line-height: 1;
@@ -23,7 +25,6 @@
     font-size: var(--badge-icon-size);
     line-height: var(--badge-icon-size);
 
-
     @include mixins.m(slot) {
       display: inline-flex;
       align-items: center;
@@ -93,23 +94,39 @@
 
   @include mixins.m(bordered) {
     &.badge--default {
-      border-color: var(--color-default-border);
+      --badge-border-color: var(--color-default-border);
     }
 
     &.badge--success {
-      border-color: var(--color-success-border);
+      --badge-border-color: var(--color-success-border);
     }
 
     &.badge--warning {
-      border-color: var(--color-warning-border);
+      --badge-border-color: var(--color-warning-border);
     }
 
     &.badge--danger {
-      border-color: var(--color-error-border);
+      --badge-border-color: var(--color-error-border);
     }
 
     &.badge--info {
-      border-color: var(--color-info-border);
+      --badge-border-color: var(--color-info-border);
+    }
+  }
+
+  /* #Interactive */
+  // A badge that can be clicked: a status label that opens a menu
+  @include mixins.m(interactive) {
+    cursor: pointer;
+
+    // Inset, so the ring is drawn inside the badge's own border box. An outset
+    // ring needs 4px of clear space on every side and gets shaved by any
+    // ancestor that clips, which in a table cell is routine: the badge sits
+    // flush against the cell's padding edge. Negative offset makes it immune to
+    // that everywhere instead of per container.
+    &:focus-visible {
+      outline: 2px solid var(--color-info);
+      outline-offset: -2px;
     }
   }
 }

package/src/assets/styles/scss/modules/_button.scss

@@ -7,6 +7,7 @@
 .btn {
   @include mixins.fontSize(fonts.$font-size-base);
 
+  position: relative;
   border: 0;
   min-width: functions.calc-rem(111px);
   min-height: functions.calc-rem(42px);

package/src/assets/styles/scss/modules/_divider.scss

@@ -1,4 +1,4 @@
-.divider {
-  border-top-color: var(--color-gray-100);
-  color: var(--color-gray-100);
-}
+.divider {
+  border-top-color: var(--color-gray-100);
+  color: var(--color-gray-100);
+}

package/src/assets/styles/scss/modules/_img.scss

@@ -1,32 +1,32 @@
-.aspect-ratio {
-  position: relative;
-  display: inline-block;
-  background-color: inherit;
-  line-height: 1;
-  overflow: hidden;
-
-  // ***************************
-  // #Content
-  // ***************************/
-  &__content { //** Fallback
-    position: absolute;
-    top: 50%;
-    right: 0;
-    bottom: 0;
-    left: 50%;
-    max-width: 100%;
-    width: 100%;
-    transform: translate(-50%, -50%);
-
-    @supports (object-fit: cover) {
-      &--cover { // cover
-        position: static;
-        width: 100%;
-        height: 100%;
-        padding: 0;
-        object-fit: cover;
-        transform: none;
-      }
-    }
-  }
-}
+.aspect-ratio {
+  position: relative;
+  display: inline-block;
+  background-color: inherit;
+  line-height: 1;
+  overflow: hidden;
+
+  // ***************************
+  // #Content
+  // ***************************/
+  &__content { //** Fallback
+    position: absolute;
+    top: 50%;
+    right: 0;
+    bottom: 0;
+    left: 50%;
+    max-width: 100%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+
+    @supports (object-fit: cover) {
+      &--cover { // cover
+        position: static;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        object-fit: cover;
+        transform: none;
+      }
+    }
+  }
+}

package/src/assets/styles/scss/modules/_menu.scss

@@ -0,0 +1,52 @@
+@use "../utilities/fonts";
+@use "../utilities/functions";
+@use "../utilities/mixins";
+
+.action-menu {
+  @include mixins.e(trigger) {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  @include mixins.e(trigger-icon) {
+    --action-menu-trigger-icon-size: #{functions.calc-rem(16px)};
+    --action-menu-trigger-icon-color: var(--color-gray-400);
+    --action-menu-trigger-icon-color-hover: var(--color-brand-dark);
+
+    width: var(--action-menu-trigger-icon-size);
+    height: var(--action-menu-trigger-icon-size);
+    font-size: var(--action-menu-trigger-icon-size);
+    line-height: var(--action-menu-trigger-icon-size);
+    color: var(--action-menu-trigger-icon-color);
+  }
+}
+
+.action-menu-item {
+  --action-menu-item-color: var(--color-gray-700);
+  --action-menu-item-icon-size: #{functions.calc-rem(16px)};
+  --action-menu-item-icon-gap: #{functions.calc-rem(8px)};
+
+  display: flex;
+  align-items: center;
+  color: var(--action-menu-item-color);
+
+  @include mixins.m(destructive) {
+    --action-menu-item-color: var(--color-error);
+  }
+
+  @include mixins.e(icon) {
+    flex: none;
+
+    margin-right: var(--action-menu-item-icon-gap);
+    width: var(--action-menu-item-icon-size);
+    height: var(--action-menu-item-icon-size);
+    font-size: var(--action-menu-item-icon-size);
+    line-height: var(--action-menu-item-icon-size);
+    color: inherit;
+  }
+
+  @include mixins.e(label) {
+    @include mixins.fontSize(fonts.$font-size-md);
+  }
+}

package/src/assets/styles/scss/modules/_percentage.scss

@@ -1,41 +1,41 @@
-.percentage {
-  &__over-87 {
-    background-color: #25BD3D;
-    border-color: #25BD3D;
-  }
-
-  &__over-75 {
-    background-color: #87C337;
-    border-color: #87C337;
-  }
-
-  &__over-62 {
-    background-color: #BAC61C;
-    border-color: #BAC61C;
-  }
-
-  &__over-50 {
-    background-color: #ECC902;
-    border-color: #ECC902;
-  }
-
-  &__over-37 {
-    background-color: #EBA70D;
-    border-color: #EBA70D;
-  }
-
-  &__over-25 {
-    background-color: #E7831B;
-    border-color: #E7831B;
-  }
-
-  &__over-12 {
-    background-color: #E35E2A;
-    border-color: #E35E2A;
-  }
-
-  &__default {
-    background-color: #DF3838;
-    border-color: #DF3838;
-  }
-}
+.percentage {
+  &__over-87 {
+    background-color: #25BD3D;
+    border-color: #25BD3D;
+  }
+
+  &__over-75 {
+    background-color: #87C337;
+    border-color: #87C337;
+  }
+
+  &__over-62 {
+    background-color: #BAC61C;
+    border-color: #BAC61C;
+  }
+
+  &__over-50 {
+    background-color: #ECC902;
+    border-color: #ECC902;
+  }
+
+  &__over-37 {
+    background-color: #EBA70D;
+    border-color: #EBA70D;
+  }
+
+  &__over-25 {
+    background-color: #E7831B;
+    border-color: #E7831B;
+  }
+
+  &__over-12 {
+    background-color: #E35E2A;
+    border-color: #E35E2A;
+  }
+
+  &__default {
+    background-color: #DF3838;
+    border-color: #DF3838;
+  }
+}

package/src/assets/styles/scss/modules/_phone.scss

@@ -9,6 +9,7 @@
 
     .ecabs-tel-input-input {
       padding: functions.calc-rem(8px 8px 8px 105px) !important;
+      color: var(--color-black);
     }
 
     .country-selector {
@@ -28,8 +29,4 @@
       border: 1px solid var(--color-error);
     }
   }
-
-  .disabled-field {
-    background-color: var(--color-white-opacity-05) !important;
-  }
 }

package/src/assets/styles/scss/modules/_statuses.scss

@@ -1,36 +1,36 @@
-.pending {
-  background-color: var(--color-gray-300);
-  color: var(--color-gray-400);
-}
-
-.reserved {
-  background-color: var(--color-warning-opacity);
-  color: var(--color-warning);
-}
-
-.scheduled, .ended {
-  background-color: var(--color-gray-50);
-  color: var(--color-gray-500);
-}
-
-.dispatched, .cab_arrived_at_pickup, .trip_started, .dropped_off, .started,
-.cab_arrived_at_intermediary_waypoint, .trip_ongoing, .in_progress, .published {
-  background-color: rgba(var(--color-info-rgb), .05);
-  color: var(--color-info);
-}
-
-.cab_arrived_at_dropoff, .trip_ended, .completed, .accepted, .cashed_in, .done {
-  background-color: var(--color-success--opacity);
-  color: var(--color-success);
-}
-
-.cancelled, .rejected, .suspended, .sick, .no_show, .unable_to_complete, .unavailable, .failed {
-  background-color: var(--color-error-opacity);
-  color: var(--color-error);
-}
-
-
-.archived {
-  background-color: var(--color-gray-100);
-  color: var(--color-gray-600);
-}
+.pending {
+  background-color: var(--color-gray-300);
+  color: var(--color-gray-400);
+}
+
+.reserved {
+  background-color: var(--color-warning-opacity);
+  color: var(--color-warning);
+}
+
+.scheduled, .ended {
+  background-color: var(--color-gray-50);
+  color: var(--color-gray-500);
+}
+
+.dispatched, .cab_arrived_at_pickup, .trip_started, .dropped_off, .started,
+.cab_arrived_at_intermediary_waypoint, .trip_ongoing, .in_progress, .published {
+  background-color: rgba(var(--color-info-rgb), .05);
+  color: var(--color-info);
+}
+
+.cab_arrived_at_dropoff, .trip_ended, .completed, .accepted, .cashed_in, .done {
+  background-color: var(--color-success--opacity);
+  color: var(--color-success);
+}
+
+.cancelled, .rejected, .suspended, .sick, .no_show, .unable_to_complete, .unavailable, .failed {
+  background-color: var(--color-error-opacity);
+  color: var(--color-error);
+}
+
+
+.archived {
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-600);
+}

package/src/assets/styles/scss/modules/_toaster.scss

@@ -1,53 +1,53 @@
-.toaster__body {
-  padding: 1.5rem 4rem 1.5rem 1.5rem;
-  border-radius: 4px;
-
-  &.success {
-    background-color: var(--color-success--opacity);
-    color: var(--color-success);
-
-    .close-button {
-      color: var(--color-success);
-    }
-  }
-
-  &.error {
-    background-color: var(--color-error-opacity);
-    color: var(--color-error);
-
-    .close-button {
-      color: var(--color-error);
-    }
-  }
-
-  &.warning {
-    background-color: var(--color-warning-opacity);
-    color: var(--color-warning);
-
-    .close-button {
-      color: var(--color-warning);
-    }
-  }
-
-  &.info {
-    background-color: rgba(var(--color-info-rgb), .05);
-    color: var(--color-info);
-
-    .close-button {
-      color: var(--color-info);
-    }
-  }
-
-  .close-button {
-    position: absolute;
-    right: 1.75rem;
-    top: calc(50% - 1rem);
-    font-family: 'Material Icons';
-    font-weight: 200;
-    font-size: 21px;
-
-    &::before {
-      content: 'close';
-    }
-  }
-}
+.toaster__body {
+  padding: 1.5rem 4rem 1.5rem 1.5rem;
+  border-radius: 4px;
+
+  &.success {
+    background-color: var(--color-success--opacity);
+    color: var(--color-success);
+
+    .close-button {
+      color: var(--color-success);
+    }
+  }
+
+  &.error {
+    background-color: var(--color-error-opacity);
+    color: var(--color-error);
+
+    .close-button {
+      color: var(--color-error);
+    }
+  }
+
+  &.warning {
+    background-color: var(--color-warning-opacity);
+    color: var(--color-warning);
+
+    .close-button {
+      color: var(--color-warning);
+    }
+  }
+
+  &.info {
+    background-color: rgba(var(--color-info-rgb), .05);
+    color: var(--color-info);
+
+    .close-button {
+      color: var(--color-info);
+    }
+  }
+
+  .close-button {
+    position: absolute;
+    right: 1.75rem;
+    top: calc(50% - 1rem);
+    font-family: 'Material Icons';
+    font-weight: 200;
+    font-size: 21px;
+
+    &::before {
+      content: 'close';
+    }
+  }
+}

package/src/assets/styles/scss/modules/index.scss

@@ -12,6 +12,7 @@
 @forward 'legend';
 @forward 'list';
 @forward 'map';
+@forward 'menu';
 @forward 'phone';
 @forward 'select';
 @forward 'statuses';

package/src/assets/styles/scss/utilities/_fonts.scss

@@ -1,31 +1,31 @@
-// #Family
-$font-family-primary: 'Segment', 'sans-serif';
-$font-family-fallback: 'Lato', sans-serif;
-
-// #Weights
-$font-weight-thin: 300;
-$font-weight-regular: 400;
-$font-weight-medium: 500;
-$font-weight-semibold: 600;
-$font-weight-bold: 700;
-$font-weight-extra-bold: 800;
-
-// #Sizes
-$font-size-xs: 12px;
-$font-size-sm: 13px;
-$font-size-md: 14px;
-$font-size-base: 16px;
-$font-size-lg: 18px;
-
-$font-heading-xs: 22px;
-$font-heading-sm: 28px;
-$font-heading-md: 32px;
-$font-heading-base: 34px;
-$font-heading-lg: 36px;
-
-// Height
-$base-line-height: 1.5;
-
-:root {
-  --mat-option-label-text-size: #{$font-size-sm};
-}
+// #Family
+$font-family-primary: 'Segment', 'sans-serif';
+$font-family-fallback: 'Lato', sans-serif;
+
+// #Weights
+$font-weight-thin: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extra-bold: 800;
+
+// #Sizes
+$font-size-xs: 12px;
+$font-size-sm: 13px;
+$font-size-md: 14px;
+$font-size-base: 16px;
+$font-size-lg: 18px;
+
+$font-heading-xs: 22px;
+$font-heading-sm: 28px;
+$font-heading-md: 32px;
+$font-heading-base: 34px;
+$font-heading-lg: 36px;
+
+// Height
+$base-line-height: 1.5;
+
+:root {
+  --mat-option-label-text-size: #{$font-size-sm};
+}

package/src/assets/styles/scss/utilities/_helpers.scss

@@ -1,14 +1,14 @@
-// For Pseudo Elements
-%pseudos {
-  position: absolute;
-  content: '';
-}
-
-%required {
-  @extend %pseudos;
-
-  content: '*' !important;
-  margin-left: 0.2rem;
-  margin-top: 2px;
-  color: var(--color-error);
-}
+// For Pseudo Elements
+%pseudos {
+  position: absolute;
+  content: '';
+}
+
+%required {
+  @extend %pseudos;
+
+  content: '*' !important;
+  margin-left: 0.2rem;
+  margin-top: 2px;
+  color: var(--color-error);
+}