Merge pull request #4089 from nassimerrahoui/tikui-migration/atom/chip

Add chip atom

src/main/style/atom/_atom.scss

@@ -1,4 +1,5 @@
 @import 'button/button';
+@import 'chip/chip';
 @import 'icon/icon';
 @import 'input/input';
 @import 'label/label';

src/main/style/atom/atom.pug

@@ -14,6 +14,8 @@ block content
       include /documentation/atomic-design/quote/atom
     .tikui-vertical-spacing--line
       include:componentDoc(height=100) button/button.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=480) chip/chip.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=70) icon/icon.md
     .tikui-vertical-spacing--line

src/main/style/atom/chip/_chip.scss

@@ -0,0 +1,58 @@
+.jhlite-chip {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 5px;
+  border: 1px solid $jhlite-global-color-fill-primary-dark;
+  border-radius: 6px;
+  background: rgba($color: $jhlite-global-color-fill-light, $alpha: 70%);
+  text-align: center;
+  color: $jhlite-global-color-text-dark;
+
+  &--title {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    text-align: center;
+
+    &.-applied::before {
+      float: left;
+      margin: 2px 0 0 3px;
+      color: $jhlite-global-color-success;
+      font-family: $jhlite-global-font-family;
+      content: '\e807';
+    }
+  }
+
+  &--description {
+    border-top: 1px dotted $jhlite-global-color-fill-primary-dark;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    font-size: 0.8em;
+
+    &.-compacted {
+      display: none;
+    }
+  }
+
+  &.-selectable-highlighted {
+    cursor: pointer;
+    animation: $jhlite-valid-highlight-animation;
+  }
+
+  &.-not-selectable-highlighted {
+    border-style: dotted;
+    background-color: $jhlite-global-color-fill-disabled-light;
+    cursor: not-allowed;
+    animation: $jhlite-invalid-highlight-animation;
+  }
+
+  &.-selected {
+    background-color: $jhlite-global-color-fill-primary-darker;
+    cursor: pointer;
+    color: $jhlite-global-color-text-light;
+  }
+
+  &.-extended {
+    margin-bottom: 15px;
+  }
+}

src/main/style/atom/chip/chip.code.pug

@@ -0,0 +1,10 @@
+include chip.mixin.pug
+
++jhlite-chip({compacted: true})
++jhlite-chip({selectableHighlighted: true, compacted: true})
++jhlite-chip({notSelectableHighlighted: true, compacted: true})
++jhlite-chip({selected: true, applied:true, compacted: true})
++jhlite-chip({extended: true})
++jhlite-chip({selectableHighlighted: true, extended: true})
++jhlite-chip({notSelectableHighlighted: true, extended: true})
++jhlite-chip({selected: true, applied:true, extended: true})

src/main/style/atom/chip/chip.md

@@ -0,0 +1 @@
+## Chip

src/main/style/atom/chip/chip.mixin.pug

@@ -0,0 +1,11 @@
+mixin jhlite-chip(options)
+  -const { selectableHighlighted: isSelectableHighlighted, notSelectableHighlighted: isNotSelectableHighlighted, compacted: isCompacted, extended: isExtended, selected: isSelected, applied: isApplied } = options || {};
+  -const selectabledHighlightedClass = isSelectableHighlighted ? '-selectable-highlighted' : null;
+  -const notSelectableHighlightedClass = isNotSelectableHighlighted ? '-not-selectable-highlighted' : null;
+  -const compactedClass = isCompacted ? '-compacted' : null;
+  -const extendedClass = isExtended ? '-extended' : null;
+  -const appliedClass = isApplied ? '-applied' : null;
+  -const selectedClass = isSelected ? '-selected' : null;
+  .jhlite-chip(class=[selectabledHighlightedClass, notSelectableHighlightedClass, selectedClass, extendedClass])
+    .jhlite-chip--title(class=appliedClass) Chip title
+    .jhlite-chip--description(class=compactedClass) Chip description

src/main/style/atom/chip/chip.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include chip.code.pug

src/main/style/token/_animation.scss

@@ -0,0 +1,33 @@
+@keyframes jhlite-valid-highlight-animation {
+  0% {
+    background-color: $jhlite-valid-highlight-start-color;
+    stroke: $jhlite-valid-highlight-start-color;
+  }
+
+  50% {
+    background-color: $jhlite-valid-highlight-end-color;
+    stroke: $jhlite-valid-highlight-end-color;
+  }
+
+  100% {
+    background-color: $jhlite-valid-highlight-start-color;
+    stroke: $jhlite-valid-highlight-start-color;
+  }
+}
+
+@keyframes jhlite-invalid-highlight-animation {
+  0% {
+    background-color: $jhlite-invalid-highlight-start-color;
+    stroke: $jhlite-invalid-highlight-start-color;
+  }
+
+  50% {
+    background-color: $jhlite-invalid-highlight-end-color;
+    stroke: $jhlite-invalid-highlight-end-color;
+  }
+
+  100% {
+    background-color: $jhlite-invalid-highlight-start-color;
+    stroke: $jhlite-invalid-highlight-start-color;
+  }
+}

src/main/style/token/_colors.scss

@@ -29,3 +29,9 @@ $jhlite-global-color-link-light: $jhlite-global-color-light !default;
 $jhlite-global-color-link-light-hover: $jhlite-global-color-primary !default;
 $jhlite-global-color-success: #480 !default;
 $jhlite-global-color-error: #902 !default;
+$jhlite-valid-highlight-animation: jhlite-valid-highlight-animation 2s infinite;
+$jhlite-invalid-highlight-animation: jhlite-invalid-highlight-animation 2s infinite;
+$jhlite-valid-highlight-start-color: #3ebf5a;
+$jhlite-valid-highlight-end-color: $jhlite-global-color-success;
+$jhlite-invalid-highlight-start-color: #bf3e3e;
+$jhlite-invalid-highlight-end-color: $jhlite-global-color-error;

src/main/style/token/_fonts.scss

@@ -1,3 +1,4 @@
 $jhlite-global-font-primary-family: sans-serif;
 $jhlite-global-font-text-size: 2.5vw;
 $jhlite-global-font-text-desktop-size: 16px;
+$jhlite-global-font-family: jhlite-icons;

src/main/style/token/_token.scss

@@ -2,3 +2,4 @@
 @import 'size';
 @import 'colors';
 @import 'breakpoint';
+@import 'animation';

src/main/webapp/app/module/primary/landscape-module/LandscapeModule.html

@@ -1,12 +1,12 @@
 <div
-  class="jhipster-landscape-module"
+  class="jhlite-chip"
   :class="moduleClass()"
   :ref="el => landscapeElements.set(module.slugString(), el)"
   :data-selector="`${module.slugString()}-module`"
   @mouseover="emphasisizeModule()"
   @mouseleave="deEmphasisizeModule()"
   @click="clickedModule()"
 >
-  <div class="jhipster-landscape-module--slug" :class="moduleClass()">{{ module.slugString() }}</div>
-  <div class="jhipster-landscape-module--operation" :class="moduleClass()">{{ module.operation() }}</div>
+  <div class="jhlite-chip--title" :class="moduleClass()">{{ module.slugString() }}</div>
+  <div class="jhlite-chip--description" :class="moduleClass()">{{ module.operation() }}</div>
 </div>

src/main/webapp/app/module/primary/landscape-module/LandscapeModule.vue

@@ -1,78 +1,3 @@
 <template src="./LandscapeModule.html"></template>
 
 <script lang="ts" src="./LandscapeModule.component.ts"></script>
-
-<style lang="scss">
-.jhipster-landscape-module {
-  border-radius: $jhipster-lite-box-radius;
-  background: rgba($color: $jhipster-lite-color-fill-light, $alpha: 0.7);
-  color: $jhipster-lite-color-text-dark;
-  border: 1px solid $jhipster-lite-line-color;
-
-  &--slug {
-    text-align: center;
-
-    &.-extended {
-      padding: 5px 10px;
-      font-weight: bold;
-    }
-
-    &.-compacted {
-      padding: 2px 3px;
-    }
-  }
-
-  &--operation {
-    border-top: 1px dotted $jhipster-lite-line-color;
-    padding: 5px 10px;
-    font-size: 0.8em;
-
-    &.-compacted {
-      display: none;
-    }
-  }
-
-  &.-compacted {
-    margin-bottom: 5px;
-  }
-
-  &.-extended {
-    margin-bottom: 15px;
-  }
-
-  &.-selectable-highlighted {
-    animation: $jhipster-lite-selectable-highlight-animation;
-    color: $jhipster-lite-color-text-light;
-  }
-
-  &.-not-selectable-highlighted,
-  &.-highlighted-unselection {
-    animation: $jhipster-lite-not-selectable-highlight-animation;
-    color: $jhipster-lite-color-text-light;
-  }
-
-  &.-selectable {
-    cursor: pointer;
-  }
-
-  &.-not-selectable {
-    cursor: not-allowed;
-    border-style: dotted;
-    background-color: rgba($color: $jhipster-lite-disabled-color, $alpha: 0.5);
-  }
-
-  &.-selected {
-    cursor: pointer;
-    background-color: $jhipster-lite-primary-color;
-    color: $jhipster-lite-color-text-light;
-  }
-
-  &.-applied::before {
-    margin: 2px 0 0 3px;
-    float: left;
-    color: #4aaa2d;
-    font-family: 'jhlite-icons';
-    content: '\e807';
-  }
-}
-</style>