@trilogy-ds/styles 4.14.0-datepicker-native → 4.14.0-dropdown

package/framework/src/components/_autolayout.scss

@@ -29,6 +29,9 @@ body:not(.is-tight) {
   .stepper:not(.flex-box > .stepper):not(:last-child) {
     margin-bottom: 24px;
   }
+  .alert:not(.flex-box > .alert):not(:last-child) {
+    margin-bottom: 24px;
+  }
   .pagination:not(.flex-box > .pagination):not(:last-child) {
     margin-bottom: 24px;
   }
@@ -41,9 +44,6 @@ body:not(.is-tight) {
   .range:not(.flex-box > .range):not(:last-child) {
     margin-bottom: 24px;
   }
-  .stepper:not(.flex-box > .stepper):not(:last-child) {
-    margin-bottom: 24px;
-  }
   .price-container:not(.flex-box > .price-container):not(:last-child) {
     margin-bottom: 12px;
   }
@@ -195,6 +195,9 @@ body:not(.is-tight) {
   .stepper:not(.flex-box > .stepper):not(:last-child) {
       margin-bottom: 16px;
     }
+  .alert:not(.flex-box > .alert):not(:last-child) {
+      margin-bottom: 16px;
+    }
   .pagination:not(.flex-box > .pagination):not(:last-child) {
       margin-bottom: 16px;
     }
@@ -207,9 +210,6 @@ body:not(.is-tight) {
   .range:not(.flex-box > .range):not(:last-child) {
       margin-bottom: 16px;
     }
-  .stepper:not(.flex-box > .stepper):not(:last-child) {
-      margin-bottom: 16px;
-    }
   .price-container:not(.flex-box > .price-container):not(:last-child) {
       margin-bottom: 8px;
     }

package/framework/src/components/_divider.scss

@@ -1,14 +1,37 @@
-.divider {
+@mixin divider {
+  content:'';
+  flex: 1;
+  height: 1px;
   background-color: getColor('neutral');
+}
+
+.divider {
   height: 1px;
   display: flex;
   justify-content: center;
   align-items: center;
 
   p.divider-content {
-    white-space: nowrap;
-    padding: 0 $spacing-4;
-    background-color: invertColor('neutral');
+    flex-wrap: nowrap;
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    &::before {
+     @include divider
+    }
+    &::after {
+     @include divider
+    }
+
+    &:not(:empty) {
+      &::before {
+        margin-right: $spacing-4;
+      }
+      &::after {
+        margin-left: $spacing-4;
+      }
+    }
   }
 
   &:not(.is-marginless) {

package/framework/src/components/_dropdown.scss

@@ -0,0 +1,191 @@
+@use 'sass:math';
+@import "../utilities/spacing";
+
+$dropdown-border-radius: var(--radius-small);
+$dropdown-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+$dropdown-item-padding-vertical: 12px;
+$dropdown-item-padding-horizontal: 16px;
+
+.dropdown {
+  position: relative;
+  display: block;
+
+  &.is-active {
+    .dropdown-menu {
+      display: block;
+    }
+  }
+}
+
+.dropdown-manual {
+  .dropdown-menu {
+    top: 100%;
+    margin-top: 0px;
+    &[data-position="upward"] {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: 85px;
+    }
+  }
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  margin-top: 15px;
+  background-color: getColor('background');
+  border-radius: $dropdown-border-radius;
+  box-shadow: $dropdown-shadow;
+  overflow: hidden;
+  max-height: 300px;
+  overflow-y: auto;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+  width: max-content;
+  min-width: 200px;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+
+  &[data-position="upward"] {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: 15px;
+    transform: translateY(10px);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: getColor('main-fade');
+    border-radius: 3px;
+  }
+}
+
+.dropdown-content {
+  padding: 0;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal;
+  color: getColor('font');
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border: none;
+  border-radius: $dropdown-border-radius;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: 1.4;
+
+  .icon {
+    margin-right: 12px;
+    flex-shrink: 0;
+
+    &.is-smaller {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &:not(:disabled):not([aria-disabled="true"]) {
+    #{$hoverSelector},
+    &:focus {
+      background-color: getColor('main-fade');
+      outline: none;
+    }
+
+    &:active {
+      background-color: getColor('main-fade');
+    }
+  }
+
+  &.is-active {
+    background-color: getColor('main-fade');
+    font-weight: $weight-semibold;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    color: getColor('disabled');
+    cursor: not-allowed;
+    background-color: transparent;
+
+    .icon {
+      opacity: 0.5;
+    }
+  }
+}
+
+.dropdown-item:disabled, .dropdown-item[aria-disabled=true] {
+  background-color: transparent !important;
+}
+
+.dropdown-group {
+  &:not(:first-child) {
+    border-top: 2px solid getColor('neutral-fade');
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 0;
+  }
+
+  .dropdown-item {
+    &:first-child {
+      border-top: none;
+    }
+  }
+
+  &.is-no-separator {
+    border-top: none;
+  }
+}
+
+@include mobile {
+  .dropdown-menu {
+    left: 0;
+    max-height: 250px;
+    width: max-content;
+    min-width: 200px;
+  }
+}
+
+.dropdown.is-active .dropdown-menu {
+  opacity: 1;
+  transform: translateY(0);
+
+  &[data-position="upward"] {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dropdown-menu.is-visible {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+
+  &[data-position="upward"] {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/framework/src/components/_flex-box.scss

@@ -776,6 +776,7 @@
     }
 
     @include container-mobile {
+      &.has-gap-#{$i},
       &.has-gap-#{$i}-mobile {
         gap: $item;
 

package/framework/src/components/_index.scss

@@ -16,6 +16,7 @@
 @import 'container';
 @import 'countdown';
 @import 'date-picker';
+@import 'dropdown';
 @import 'divider';
 @import 'fab';
 @import 'flex-box';

package/framework/src/theming/buttons_partial.scss

@@ -9,8 +9,8 @@ Colors for buttons
 $button-colors: (
   'accent':['conversion', 'accent', 'background'],
   'primary': ['primary', 'main', 'background'],
-  'secondary': ['secondary', 'main-fade', 'main'],
-  'ghost': ['ghost', 'transparent', 'main']
+  'secondary': ['secondary', 'main-fade', 'font'],
+  'ghost': ['ghost', 'transparent', 'font']
 ) !default;
 
 %buttons-states {

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "4.14.0-datepicker-native",
+  "version": "4.14.0-dropdown",
   "author": "Bouygues Telecom",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BouyguesTelecom/trilogy",
+    "directory": "packages/styles"
+  },
   "license": "UNLICENSED",
   "files": [
     "framework/src",