@eturnity/eturnity_reusable_components 8.16.2--EPDM-14330.5 → 8.16.2--EPDM-14330.7

package/src/components/barchart/styles/chartControls.js

@@ -0,0 +1,59 @@
+import styled from 'vue3-styled-components'
+
+export const Container = styled.div`
+  width: 100%;
+`
+
+export const LegendAndControlsWrapper = styled('div', { leftMargin: String })`
+  margin-left: ${(props) => props.leftMargin};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+export const LeftSection = styled.div`
+  flex: 1;
+`
+
+export const SplitButtonsContainer = styled('div', { position: String })`
+  align-self: ${(props) =>
+    props.position === 'top' ? 'flex-end' : 'flex-start'};
+`
+
+export const LegendGroups = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const LegendRow = styled('div', { rowIndex: Number })`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: ${(props) =>
+    props.rowIndex === 0 ? 'flex-start' : 'flex-end'};
+`
+
+export const LegendItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`
+
+export const LegendColor = styled('div', {
+  gradientFrom: String,
+  gradientTo: String,
+})`
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background: ${(props) =>
+    `linear-gradient(180deg, ${props.gradientFrom} 0%, ${props.gradientTo} 100%)`};
+`
+
+export const LegendText = styled.span`
+  font-size: 12px;
+  font-weight: 400;
+  color: ${(props) => props.theme.semanticColors.teal[800]};
+  white-space: nowrap;
+`

package/src/components/buttons/buttonIcon/index.vue

@@ -21,6 +21,7 @@
             iconColor ||
             theme.mainButton[appTheme][type][variant].default.textColor
           "
+          :disable-hover="disableIconHover"
           :fill-type="fillType"
           :hovered-color="
             iconColor ||
@@ -33,6 +34,9 @@
       <ButtonContainer :button-size="buttonSize">
         {{ text }}
       </ButtonContainer>
+      <NumberContainer v-if="numberCount">
+        <NumberText>{{ numberCount }}</NumberText>
+      </NumberContainer>
     </ButtonWrapper>
   </PageContainer>
 </template>
@@ -67,7 +71,7 @@
   }
   const ButtonWrapper = styled('div', ButtonAttrs)`
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: auto 1fr auto;
     font-size: ${(props) =>
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
     color: ${(props) => {
@@ -158,6 +162,25 @@
     }};
   `
 
+  const NumberContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+  `
+
+  const NumberText = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 400;
+    color: ${(props) => props.theme.semanticColors.purple[500]};
+    padding: 3px 8px;
+    border-radius: 8px;
+    background-color: ${(props) => props.theme.semanticColors.purple[50]};
+  `
+
   export default {
     name: 'ButtonIcon',
     components: {
@@ -166,6 +189,8 @@
       ButtonWrapper,
       IconContainer,
       Icon,
+      NumberContainer,
+      NumberText,
     },
     props: {
       type: {
@@ -236,6 +261,15 @@
         default: 'fill',
         type: String,
       },
+      disableIconHover: {
+        type: Boolean,
+        default: false,
+      },
+      numberCount: {
+        type: Number,
+        required: false,
+        default: null,
+      },
     },
     data() {
       return {

package/src/components/buttons/splitButtons/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <Container>
+    <SplitButton
+      v-for="(option, index) in options"
+      :data-id-key="`${dataIdKey}_${option.value}`"
+      :key="index"
+      :length="options.length"
+      :position="getButtonPosition(index)"
+      :selected="modelValue === option.value"
+      @click.stop="handleSelect(option.value)"
+    >
+      {{ option.label }}
+    </SplitButton>
+  </Container>
+</template>
+
+<script setup>
+  import styled from 'vue3-styled-components'
+  import { computed } from 'vue'
+
+  const Container = styled.div`
+    display: flex;
+    width: fit-content;
+  `
+  const SplitButton = styled('button', {
+    selected: Boolean,
+    position: String,
+    length: Number,
+  })`
+    padding: 8px 16px;
+    border: 1px solid ${(props) => props.theme.semanticColors.teal[100]};
+    ${(props) =>
+      props.position === 'middle'
+        ? `
+      border-left: none;
+      border-right: none;
+    `
+        : props.length === 2 && props.position === 'first'
+        ? 'border-right: none;'
+        : ''}
+    border-radius: ${(props) =>
+      props.position === 'first'
+        ? '4px 0 0 4px'
+        : props.position === 'last'
+        ? '0 4px 4px 0'
+        : '0'};
+    font-family: ${(props) => props.theme.fonts.mainFont};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 100%;
+    cursor: pointer;
+    background: ${(props) =>
+      props.selected ? props.theme.semanticColors.purple[50] : 'transparent'};
+    color: ${(props) => props.theme.semanticColors.purple[500]};
+  `
+
+  const props = defineProps({
+    options: {
+      type: Array,
+      required: true,
+      // expects array of {label: string, value: string}
+    },
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    dataIdKey: {
+      type: String,
+      default: '',
+    },
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const getButtonPosition = computed(() => (index) => {
+    if (index === 0) return 'first'
+    if (index === props.options.length - 1) return 'last'
+
+    return 'middle'
+  })
+
+  const handleSelect = (value) => {
+    emit('update:modelValue', value)
+    emit('click', value)
+  }
+</script>

package/src/components/collapsableInfoText/index.vue

@@ -33,7 +33,7 @@
   const Text = styled('p', TextAttrs)`
     display: block;
     display: -webkit-box;
-    line-height: 1.3em;
+    line-height: 1.5;
     -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
     -webkit-box-orient: vertical;
     overflow: hidden;
@@ -49,7 +49,7 @@
   const ToggleButton = styled('p', TextAttrs)`
     font-size: ${(props) => props.fontSize}px;
     cursor: pointer;
-    color: ${(props) => props.theme.colors.blue};
+    color: ${(props) => props.theme.semanticColors.purple[500]};
   `
 
   export default {

package/src/components/errorMessage/errorMessage.spec.js

@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import ErrorMessage from '@/components/errorMessage'
+import theme from '@/assets/theme'
+
+/* eslint-disable */
+
+describe('ErrorMessage Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(ErrorMessage, {
+      props: {},
+      slots: {
+        default: '<div data-test-id="fake-msg">testing</div>',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  test('renders ErrorMessage component with default props', () => {
+    expect(wrapper.findAll('[data-test-id="fake-msg"]').length).toBe(1)
+  })
+
+  test('applies the correct CSS class for styling', async () => {
+    wrapper.setProps({ marginTop: '20px' })
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.props().marginTop).toBe('20px')
+  })
+})

package/src/components/errorMessage/errorMessage.stories.js

@@ -0,0 +1,35 @@
+import ErrorMessage from './index.vue'
+
+export default {
+  title: 'ErrorMessage',
+  component: ErrorMessage,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
+//
+//To use:
+// <error-message>
+//     <span>
+//         testing error message
+//     </span>
+// </error-message>
+
+const Template = (args, { argTypes }) => ({
+  components: { ErrorMessage },
+  props: Object.keys(argTypes),
+  template: `
+  <ErrorMessage v-bind="$props">
+    <span>
+        testing error message
+    </span>
+  </ErrorMessage>`,
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  marginTop: '13px',
+}

package/src/components/filter/filterSettings.vue

@@ -100,6 +100,7 @@
               :min-option-length="1"
               select-height="36px"
               select-width="100%"
+              :should-use-teleport="false"
             >
               <template #selector>
                 <OptionTitle> {{ filter.selectedText }} </OptionTitle>
@@ -255,6 +256,7 @@
               :label="filter.label"
               select-height="36px"
               select-width="100%"
+              :should-use-teleport="false"
             >
               <template #selector="{ selectedValue }">
                 <OptionTitle>