@pareto-engineering/design-system 5.2.0 → 5.2.1

package/src/ui/a/HamburgerButton/styles.scss

@@ -1,6 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
+@use "sass:math";
+@use "sass:list";
 
 /*
 $hamburger-padding-x           : 15px !default;
@@ -22,17 +24,157 @@ $hamburger-hover-filter       : opacity(50%) !default;
 $hamburger-active-hover-filter: $hamburger-hover-filter !default;
 */
 
-$hamburgers-types:(
-  squeeze
-);
-$hamburger-layer-color         : var(--x);
-$hamburger-padding-x           : .5em;
-$hamburger-padding-y           : .5em;
+// Define the variables to be used with the hamburgers library
+$hamburger-types: (squeeze);
+$hamburger-layer-color: var(--x);
+$hamburger-padding-x: .5em;
+$hamburger-padding-y: .5em;
 
-// Open the following file for the template
+// Additional hamburger variables with defaults
+$hamburger-layer-width: 40px !default;
+$hamburger-layer-height: 4px !default;
+$hamburger-layer-spacing: 6px !default;
+$hamburger-layer-border-radius: 4px !default;
+$hamburger-hover-opacity: .7 !default;
+$hamburger-hover-use-filter: false !default;
+$hamburger-hover-filter: opacity(50%) !default;
+$hamburger-active-layer-color: $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+$hamburger-active-hover-filter: $hamburger-hover-filter !default;
+
+// Base Hamburger Styles
+// ==================================================
+.hamburger {
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-block;
+
+  // Normalize (<button>)
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: $hamburger-padding-y $hamburger-padding-x;
+  text-transform: none;
+  transition-duration: .15s;
+
+  transition-property: opacity, filter;
+  transition-timing-function: linear;
+
+  &:hover {
+    @if $hamburger-hover-use-filter == true {
+      filter: $hamburger-hover-filter;
+    }
+    @else {
+      opacity: $hamburger-hover-opacity;
+    }
+  }
+
+  &.is-active {
+    &:hover {
+      @if $hamburger-hover-use-filter == true {
+        filter: $hamburger-active-hover-filter;
+      }
+      @else {
+        opacity: $hamburger-active-hover-opacity;
+      }
+    }
+
+    .hamburger-inner,
+    .hamburger-inner::before,
+    .hamburger-inner::after {
+      background-color: $hamburger-active-layer-color;
+    }
+  }
+}
+
+.hamburger-box {
+  display: inline-block;
+  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+  position: relative;
+  width: $hamburger-layer-width;
+}
+
+.hamburger-inner {
+  display: block;
+  margin-top: math.div($hamburger-layer-height, -2);
+  top: 50%;
+
+  &,
+  &::before,
+  &::after {
+    background-color: $hamburger-layer-color;
+    border-radius: $hamburger-layer-border-radius;
+    height: $hamburger-layer-height;
+    position: absolute;
+    transition-duration: .15s;
+    transition-property: transform;
+    transition-timing-function: ease;
+    width: $hamburger-layer-width;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+  }
+
+  &::before {
+    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+
+  &::after {
+    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+}
+
+// Squeeze Type
+// ==================================================
+
+@if list.index($hamburger-types, squeeze) {
+  /*
+    * Squeeze
+    */
+  .hamburger-squeeze {
+    .hamburger-inner {
+      transition-duration: .1s;
+      transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+
+      &::before {
+        transition: top .1s .12s ease,
+          opacity .1s ease;
+      }
+
+      &::after {
+        transition: bottom .1s .12s ease,
+          transform .1s cubic-bezier(.55, .055, .675, .19);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        transform: rotate(45deg);
+        transition-delay: .12s;
+        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+
+        &::before {
+          opacity: 0;
+          top: 0;
+          transition: top .1s ease,
+            opacity .1s .12s ease;
+        }
 
-@import "hamburgers/_sass/hamburgers/hamburgers";
-@import "hamburgers/_sass/hamburgers/types/squeeze";
+        &::after {
+          bottom: 0;
+          transform: rotate(-90deg);
+          transition: bottom .1s ease,
+            transform .1s .12s cubic-bezier(.215, .61, .355, 1);
+        }
+      }
+    }
+  }
+}
 
 /*
 .#{bem.$base}.hamburger-button{

package/src/ui/a/XMLEditor/XMLEditor.jsx

@@ -5,7 +5,7 @@ import { useEffect, useRef } from 'react'
 
 import PropTypes from 'prop-types'
 
-import { EditorState } from '@codemirror/state'
+import { EditorState, Prec } from '@codemirror/state'
 
 import {
   EditorView,
@@ -25,6 +25,7 @@ import {
   indentWithTab,
   history,
   historyKeymap,
+  insertNewlineAndIndent,
 } from '@codemirror/commands'
 
 import {
@@ -67,7 +68,19 @@ const XMLEditor = ({
     const startState = EditorState.create({
       doc       :config,
       extensions:[
-        keymap.of([defaultKeymap, indentWithTab, ...historyKeymap]),
+        Prec.highest(
+          keymap.of([
+            {
+              key:'Enter',
+              run:(view) => insertNewlineAndIndent(view),
+            },
+          ]),
+        ),
+        keymap.of([
+          defaultKeymap,
+          indentWithTab,
+          ...historyKeymap,
+        ]),
         indentOnInput(),
         lineNumbers(),
         bracketMatching(),