add components (#15)

package.json

@@ -12,9 +12,11 @@
     "build": "storybook build -o dist/"
   },
   "dependencies": {
-    "@dafcoe/vue-collapsible-panel": "^0.2.0",
+    "@swoga/vue-collapsible-panel": "^0.3.0",
     "@vue/compiler-core": "^3.4.19",
+    "@vueuse/core": "^10.9.0",
     "sass": "^1.71.1",
+    "swiper": "^11.1.1",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.19",
     "vue-select": "^4.0.0-beta.6"

src/components/BaseAccordion/BaseAccordion.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import {
   VueCollapsiblePanelGroup,
-} from '@dafcoe/vue-collapsible-panel';
+} from '@swoga/vue-collapsible-panel';
 
 // IMPORTANT: before using this component you need to install library
-// type in the terminal: yarn add @dafcoe/vue-collapsible-panel
+// type in the terminal: yarn add @swoga/vue-collapsible-panel
 
 </script>
 

src/components/BaseAccordion/BaseAccordionItem.vue

@@ -2,10 +2,10 @@
 import { withDefaults } from 'vue';
 import {
   VueCollapsiblePanel,
-} from '@dafcoe/vue-collapsible-panel';
+} from '@swoga/vue-collapsible-panel';
 
 // IMPORTANT: before using this component you need to install library
-// type in the terminal: yarn add @dafcoe/vue-collapsible-panel
+// type in the terminal: yarn add @swoga/vue-collapsible-panel
 
 withDefaults(defineProps<{
   /**
@@ -93,6 +93,12 @@ withDefaults(defineProps<{
         +mt(.2s)
     :deep(.vcp__body)
       height: 0
+      background-color: $accordion-item-active-content-background
+    :deep(.vcp__header)
+      background-color: $accordion-item-active-header-background
+      box-shadow: $accordion-item-active-header-box-shadow
+      z-index: 1
+      position: relative
   &__title-text
     padding: 12px 16px
     margin-bottom: 0

src/components/BaseAccordion/index.sass

@@ -1,5 +1,6 @@
 @import 'UiKit/styles/_colors.sass'
 @import 'UiKit/styles/_mixins.sass'
+@import 'UiKit/styles/_global.sass'
 
 $border-color: $gray-30
 $border-color-white: $gray-10
@@ -8,3 +9,6 @@ $white-link-color: $gray-10
 $link-color: $primary
 
 $open-close-icon-fill: $black
+$accordion-item-active-header-background: $white
+$accordion-item-active-header-box-shadow: $box-shadow-small
+$accordion-item-active-content-background: $gray-10

src/components/BaseBreadcrumbs/BaseBreadcrumbs.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+export interface IBreadcrumb {
+  name: string;
+  routeName?: string;
+}
+
+defineProps({
+  data: {
+    type: Array as PropType<IBreadcrumb[]>,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <section class="BaseBreadcrumbs base-breadcrumbs">
+    <div class="base-breadcrumbs__container">
+      <div
+        v-for="item in data"
+        :key="item.routeName"
+        class="base-breadcrumbs__item-wrap"
+      >
+        <component
+          :is="item.routeName ? 'router-link' : 'span'"
+          :to="{ name: item.routeName }"
+          class="base-breadcrumbs__item"
+        >
+          <span class="is--h6__title">
+            {{ item.name }}
+          </span>
+        </component>
+        <span class="base-breadcrumbs__divider">
+          /
+        </span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-breadcrumbs
+  $root: &
+
+  &__container
+    gap: 8px
+    display: flex
+    flex-wrap: wrap
+
+  &__item
+    color: $black
+
+  &__divider
+    color: $gray-50
+
+  &__item-wrap
+    gap: 8px
+    display: flex
+
+    &:last-of-type
+      #{$root}__item
+        color: $gray-50
+
+      #{$root}__divider
+        display: none
+</style>

src/components/BaseBreadcrumbs/index.sass

@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_global.sass'

src/components/BaseButton/BaseButton.vue

@@ -147,7 +147,7 @@
 		&:hover
 			background-color: $base-button-danger-hover-color
 	&.is--variant-outlined
-		background-color: transparent
+		background-color: $white
 		border-style: solid
 		border-width: $base-button-border-width
 		&.is--color-primary
@@ -190,7 +190,7 @@
 			&:hover
 				background-color: rgba($base-button-secondary-color, 0.1)
 		&.is--color-success
-			color: $base-button-success-color
+			color: $base-button-success-text-color
 			&:hover
 				background-color: rgba($base-button-success-color, 0.1)
 		&.is--color-warning

src/components/BaseContentSwitcher/BaseContentSwitcher.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { withDefaults } from 'vue';
+import { Tab } from './types';
+
+const props = withDefaults(defineProps<{
+  tabs: Tab[];
+  modelValue?: string | number;
+  fullWidth?: boolean,
+}>(), {
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Tab['value']): void;
+  (e: 'itemClick', value: Tab): void;
+}>();
+
+function onItemClick(tab: Tab) {
+  emit('update:modelValue', tab.value);
+  emit('itemClick', tab);
+}
+</script>
+
+<template>
+  <div
+    class="BaseContentSwitcher base-content-switcher"
+  >
+    <div
+      v-for="tab in props.tabs"
+      :key="tab.value"
+      class="base-content-switcher__item"
+      :class="[{ 'is--active': modelValue === tab.value, 'is--full-width': fullWidth }]"
+      :style="{width: fullWidth ? `${100/(props.tabs.length)}%` : 'auto'}"
+      @click="onItemClick(tab)"
+    >
+      <slot
+        name="tab"
+        :tab="tab"
+      >
+        <span
+          class="base-content-switcher__item-label is--small-2"
+          :title="tab.label"
+        >
+          {{ tab.label }}
+        </span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-content-switcher
+  height: 32px
+  display: flex
+  flex-direction: row
+  align-items: center
+  gap: 4px
+  border-radius: 2px
+  background: $gray-20
+  padding: 4px
+
+  &.is--full-width
+    width: 100%
+
+  &__item
+    cursor: pointer
+    display: flex
+    padding: 3px 12px
+    align-items: center
+    gap: 4px
+    align-self: stretch
+    border-radius: 2px
+    color: $gray-60
+    +mt(.2s)
+    &.is--active
+      +mt(.2s)
+      background-color: $white
+      color: $black
+    &:hover
+      color: $black
+  &__item-label
+    flex-shrink: 0
+</style>

src/components/BaseContentSwitcher/index.sass

@@ -0,0 +1,2 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_mixins.sass'

src/components/BaseContentSwitcher/index.ts

@@ -0,0 +1,4 @@
+import BaseContentSwitcher from './BaseContentSwitcher.vue';
+
+export { BaseContentSwitcher };
+export * from './types';

src/components/BaseContentSwitcher/types.ts

@@ -0,0 +1,4 @@
+export type Tab = object & {
+  value: string | number;
+  label?: string;
+};

src/components/BaseDropdown/BaseDropdown.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import ArrowDown from './assets/chevron-down.svg';
+
+const isActive = ref(false);
+const target = ref(null);
+
+onClickOutside(target, () => {
+  isActive.value = false;
+})
+</script>
+
+
+<template>
+  <div
+    ref="target"
+    class="BaseDropdown base-dropdown"
+  >
+    <div
+      class="base-dropdown__selected"
+      :class="{ 'is-active': isActive }"
+      @click="isActive = !isActive"
+    >
+      <slot />
+
+      <img
+        v-svg-inline
+        :src="ArrowDown"
+        class="base-dropdown__selected-arrow"
+        alt="dropdown selected arrow"
+      >
+    </div>
+    <Transition name="fade" mode="out-in">
+      <div
+        v-show="isActive"
+        class="base-dropdown__items"
+      >
+          <slot name="listItem" />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-dropdown
+  $root: &
+
+  position: relative
+  width: fit-content
+
+  &__selected
+    position: relative
+    display: flex
+    align-items: center
+    cursor: pointer
+    width: fit-content
+
+    &.is-active
+      .base-dropdown
+        &__selected-arrow
+          transform: rotate(180deg)
+
+  &__selected-arrow
+    width: 14px
+    color: $gray-70
+    transition: all 0.3s
+    transform-origin: center
+
+  &__items
+    position: absolute
+    right: 0
+    top: calc(100% + 13px)
+    z-index: 1
+    display: flex
+    width: 100%
+    padding: 8px 0px
+    flex-direction: column
+    align-items: flex-start
+    border-radius: 2px
+    background: $white
+    box-shadow: $box-shadow-small
+</style>

src/components/BaseDropdown/index.sass

@@ -0,0 +1,3 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_mixins.sass'
+@import 'UiKit/styles/_global.sass'