@webitel/ui-sdk 3.2.112 → 3.2.113

package/package.json

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

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-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);
-}
+}