@eturnity/eturnity_reusable_components 8.19.8-EPDM-12618.6 → 8.19.8-EPDM-13618.0

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

@@ -1,59 +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;
-`
+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/ButtonIcon.stories.js

@@ -1,167 +1,167 @@
-import ButtonIcon from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'Components/Buttons/ButtonIcon',
-  component: ButtonIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary'],
-      description: 'Button type',
-    },
-    variant: {
-      control: 'select',
-      options: ['main', 'cancel', 'danger'],
-      description: 'Button variant',
-    },
-    appTheme: {
-      control: 'select',
-      options: ['light', 'dark'],
-      description: 'Application theme',
-    },
-    buttonSize: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-      description: 'Button size',
-    },
-    isDisabled: {
-      control: 'boolean',
-      description: 'Whether the button is disabled',
-    },
-    text: {
-      control: 'text',
-      description: 'Button text',
-    },
-    minWidth: {
-      control: 'text',
-      description: 'Minimum width of the button',
-    },
-    customColor: {
-      control: 'color',
-      description: 'Custom background color',
-    },
-    iconName: {
-      control: 'text',
-      description: 'Name of the icon to display',
-    },
-    iconColor: {
-      control: 'color',
-      description: 'Custom color for the icon',
-    },
-    fontSize: {
-      control: 'text',
-      description: 'Font size of the button text',
-    },
-    isActive: {
-      control: 'boolean',
-      description: 'Whether the button is in active state',
-    },
-    fillType: {
-      control: 'select',
-      options: ['fill', 'stroke'],
-      description: 'How to fill the icon',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { ButtonIcon },
-  setup() {
-    return { args }
-  },
-  template: '<ButtonIcon v-bind="args" />',
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  type: 'primary',
-  variant: 'main',
-  appTheme: 'light',
-  buttonSize: 'medium',
-  isDisabled: false,
-  text: 'Click Me',
-  minWidth: '200px',
-  customColor: null,
-  iconName: 'settings',
-  iconColor: null,
-  fontSize: '14px',
-  isActive: false,
-  fillType: 'fill',
-}
-
-export const Secondary = Template.bind({})
-Secondary.args = {
-  ...Default.args,
-  type: 'secondary',
-}
-
-export const Tertiary = Template.bind({})
-Tertiary.args = {
-  ...Default.args,
-  type: 'tertiary',
-}
-
-export const Cancel = Template.bind({})
-Cancel.args = {
-  ...Default.args,
-  variant: 'cancel',
-}
-
-export const Danger = Template.bind({})
-Danger.args = {
-  ...Default.args,
-  variant: 'danger',
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  ...Default.args,
-  isDisabled: true,
-}
-
-export const Active = Template.bind({})
-Active.args = {
-  ...Default.args,
-  isActive: true,
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  ...Default.args,
-  buttonSize: 'small',
-}
-
-export const Large = Template.bind({})
-Large.args = {
-  ...Default.args,
-  buttonSize: 'large',
-}
-
-export const CustomColor = Template.bind({})
-CustomColor.args = {
-  ...Default.args,
-  customColor: '#FF5733',
-}
-
-export const CustomIconColor = Template.bind({})
-CustomIconColor.args = {
-  ...Default.args,
-  iconColor: '#FFFFFF',
-}
-
-export const DarkTheme = Template.bind({})
-DarkTheme.args = {
-  ...Default.args,
-  appTheme: 'dark',
-}
-
-export const StrokeIcon = Template.bind({})
-StrokeIcon.args = {
-  ...Default.args,
-  fillType: 'stroke',
-}
+import ButtonIcon from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Buttons/ButtonIcon',
+  component: ButtonIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+      description: 'Button type',
+    },
+    variant: {
+      control: 'select',
+      options: ['main', 'cancel', 'danger'],
+      description: 'Button variant',
+    },
+    appTheme: {
+      control: 'select',
+      options: ['light', 'dark'],
+      description: 'Application theme',
+    },
+    buttonSize: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Button size',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    text: {
+      control: 'text',
+      description: 'Button text',
+    },
+    minWidth: {
+      control: 'text',
+      description: 'Minimum width of the button',
+    },
+    customColor: {
+      control: 'color',
+      description: 'Custom background color',
+    },
+    iconName: {
+      control: 'text',
+      description: 'Name of the icon to display',
+    },
+    iconColor: {
+      control: 'color',
+      description: 'Custom color for the icon',
+    },
+    fontSize: {
+      control: 'text',
+      description: 'Font size of the button text',
+    },
+    isActive: {
+      control: 'boolean',
+      description: 'Whether the button is in active state',
+    },
+    fillType: {
+      control: 'select',
+      options: ['fill', 'stroke'],
+      description: 'How to fill the icon',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { ButtonIcon },
+  setup() {
+    return { args }
+  },
+  template: '<ButtonIcon v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  type: 'primary',
+  variant: 'main',
+  appTheme: 'light',
+  buttonSize: 'medium',
+  isDisabled: false,
+  text: 'Click Me',
+  minWidth: '200px',
+  customColor: null,
+  iconName: 'settings',
+  iconColor: null,
+  fontSize: '14px',
+  isActive: false,
+  fillType: 'fill',
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  ...Default.args,
+  type: 'secondary',
+}
+
+export const Tertiary = Template.bind({})
+Tertiary.args = {
+  ...Default.args,
+  type: 'tertiary',
+}
+
+export const Cancel = Template.bind({})
+Cancel.args = {
+  ...Default.args,
+  variant: 'cancel',
+}
+
+export const Danger = Template.bind({})
+Danger.args = {
+  ...Default.args,
+  variant: 'danger',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Default.args,
+  isDisabled: true,
+}
+
+export const Active = Template.bind({})
+Active.args = {
+  ...Default.args,
+  isActive: true,
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  ...Default.args,
+  buttonSize: 'small',
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  ...Default.args,
+  buttonSize: 'large',
+}
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  ...Default.args,
+  customColor: '#FF5733',
+}
+
+export const CustomIconColor = Template.bind({})
+CustomIconColor.args = {
+  ...Default.args,
+  iconColor: '#FFFFFF',
+}
+
+export const DarkTheme = Template.bind({})
+DarkTheme.args = {
+  ...Default.args,
+  appTheme: 'dark',
+}
+
+export const StrokeIcon = Template.bind({})
+StrokeIcon.args = {
+  ...Default.args,
+  fillType: 'stroke',
+}