@webitel/ui-sdk 3.2.112 → 3.2.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.2.112",
+  "version": "3.2.114",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-context-menu/wt-context-menu.vue

@@ -21,6 +21,9 @@
         >
           <!--      <a> click.prevent prevents redirect to # -->
           <a
+            :class="[
+              { 'wt-context-menu__option--disabled': option.disabled },
+            ]"
             class="wt-context-menu__option"
             href="#"
             @click.prevent="handleOptionClick({ option, index, hide })"
@@ -40,7 +43,7 @@ const props = defineProps({
   options: {
     type: Array,
     required: true,
-    description: '[{ text }]',
+    description: '[{ text, disabled, ... anything you need }]',
   },
   visible: {
     type: Boolean,
@@ -100,16 +103,21 @@ function handleOptionClick({ option, index, hide }) {
   &:only-of-type {
     border-radius: var(--border-radius);
   }
-
-  &:hover {
-    background-color: var(--context-menu-option-color--hover);
-    transition: var(--transition);
-  }
 }
 
 .wt-context-menu__option {
   display: block;
   padding: var(--context-menu-option-padding);
   cursor: pointer;
+
+  &:hover {
+    background-color: var(--context-menu-option-color--hover);
+    transition: var(--transition);
+  }
+
+  &--disabled {
+    pointer-events: none;
+    color: var(--context-menu-option-color--disabled);
+  }
 }
 </style>

package/src/components/index.js

@@ -56,6 +56,8 @@ import WtTableColumnSelect from './organisms/wt-table-column-select/wt-table-col
 import WtIconAction from './atoms/wt-icon-action/wt-icon-action.vue';
 import WtPageHeader from './organisms/wt-page-header/wt-page-header.vue';
 import WtStepper from './organisms/wt-stepper/wt-stepper.vue';
+import WtExpansionPanel
+  from './organisms/wt-expansion-panel/wt-expansion-panel.vue';
 
 const Components = {
   WtAvatar,
@@ -113,6 +115,7 @@ const Components = {
   WtItemLink,
   WtDummy,
   WtStepper,
+  WtExpansionPanel,
 };
 
 export default Components;

package/src/components/organisms/wt-expansion-panel/__tests__/WtExpansionPanel.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtExpansionPanel from '../wt-expansion-panel.vue';
+
+describe('WtExpansionPanel', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtExpansionPanel);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/organisms/wt-expansion-panel/wt-expansion-panel.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    :class="[{'wt-expansion-panel--opened':open},
+    `wt-expansion-panel--${props.size}`]"
+    class="wt-expansion-panel"
+  >
+    <div
+      class="wt-expansion-panel-header"
+      tabindex="0"
+      @click="open = !open"
+      @keypress.enter="open = !open"
+    >
+      <slot name="title"></slot>
+      <wt-icon
+        icon="arrow-right"
+      ></wt-icon>
+    </div>
+    <wt-expand-transition>
+      <div v-show="open">
+        <slot></slot>
+      </div>
+    </wt-expand-transition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+  },
+});
+
+const open = ref(true);
+</script>
+
+<style lang="scss" scoped>
+.wt-expansion-panel {
+  .wt-expansion-panel-header {
+    @extend %typo-subtitle-1;
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-2xs) var(--spacing-xs);
+    cursor: pointer;
+    border-radius: var(--spacing-2xs);
+    background-color: var(--secondary-color-50);
+  }
+
+  .wt-icon {
+    margin-left: auto;
+  }
+
+  &--sm {
+    .wt-expansion-panel-header {
+      @extend %typo-subtitle-2;
+    }
+  }
+
+  &--opened {
+    .wt-icon {
+      transform: rotate(90deg);
+    }
+  }
+}
+</style>

package/src/css/components/atoms/wt-context-menu/_variables.scss

@@ -4,4 +4,6 @@
   --context-menu-background-color: var(--main-color);
 
   --context-menu-option-padding: var(--spacing-xs);
+
+  --context-menu-option-color--disabled: var(--text--disabled-color);
 }

package/src/css/components/atoms/wt-input-info/_variables.scss

@@ -1,7 +1,7 @@
 
 :root {
-  --input-info-min-height: 12px;
+  --input-info-min-height: var(--spacing-sm);
   --input-info-margin: 5px;
   --input-info-color: var(--form-label-color);
   --input-info--invalid-color: var(--false-color);
-}
+}