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=460) 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,56 @@
+.jhlite-chip {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ margin-bottom: 5px;
+ border: 1px solid $jhlite-global-color-fill-primary-dark;
+ border-radius: 6px;
+ text-align: center;
+
+ &--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({compacted: false})
++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/_colors.scss

@@ -29,3 +29,43 @@ $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: valid-highlight-animation 2s infinite;
+$jhlite-invalid-highlight-animation: 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;
+
+@keyframes 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 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/_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/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>

src/main/webapp/app/module/primary/landscape/Landscape.vue

@@ -152,6 +152,7 @@ $jhipster-landscape-padding: 20px;
 
 .jhipster-landscape-element {
  list-style-type: none;
+ background: #fff;
 
  &.-compacted {
  margin-bottom: 5px;