@eturnity/eturnity_reusable_components 8.16.8-EPDM-EPDM-14492.0 → 8.16.9-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/index.vue

@@ -1,255 +1,255 @@
-<template>
-  <PageContainer>
-    <ButtonWrapper
-      :app-theme="appTheme"
-      :button-size="buttonSize"
-      :custom-color="customColor"
-      :is-active="isActive"
-      :is-disabled="isDisabled"
-      :min-width="minWidth"
-      :type="type"
-      :variant="variant"
-    >
-      <IconContainer
-        :app-theme="appTheme"
-        :button-size="buttonSize"
-        :type="type"
-        :variant="variant"
-      >
-        <Icon
-          :color="
-            iconColor ||
-            theme.mainButton[appTheme][type][variant].default.textColor
-          "
-          :disable-hover="disableIconHover"
-          :hovered-color="
-            iconColor ||
-            theme.mainButton[appTheme][type][variant].default.textColor
-          "
-          :name="iconName"
-          size="14px"
-        />
-      </IconContainer>
-      <ButtonContainer :button-size="buttonSize">
-        {{ text }}
-      </ButtonContainer>
-    </ButtonWrapper>
-  </PageContainer>
-</template>
-
-<script>
-  // import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
-  // <button-icon
-  //   :isDisabled="true"
-  //   text="Click Me"
-  //   minWidth="300px"
-  //   customColor="#000"
-  //   iconName="external_icon"
-  //   fontColor="white"
-  //   fontSize="12px"
-  // />
-
-  import Icon from '../../icon'
-  import styled from 'vue3-styled-components'
-  import Theme from '@/assets/theme'
-
-  const PageContainer = styled.div``
-
-  const ButtonAttrs = {
-    type: String,
-    isDisabled: Boolean,
-    minWidth: String,
-    customColor: String,
-    buttonSize: String,
-    variant: String,
-    appTheme: String,
-    isActive: Boolean,
-  }
-  const ButtonWrapper = styled('div', ButtonAttrs)`
-    display: grid;
-    grid-template-columns: auto 1fr;
-    font-size: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
-    color: ${(props) =>
-      props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.textColor
-        : props.customColor
-        ? props.theme.colors.white
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.textColor};
-    background-color: ${(props) =>
-      props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.backgroundColor
-        : props.customColor
-        ? props.customColor
-        : props.isActive
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .active.backgroundColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.backgroundColor};
-    border: ${(props) => {
-      const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .disabled.borderColor
-        : props.customColor
-        ? props.customColor
-        : props.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    user-select: none;
-    border-radius: 4px;
-    overflow: hidden;
-    min-width: ${(props) => props.minWidth || 'initial'};
-
-    &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.customColor
-          ? props.customColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover.backgroundColor};
-    }
-
-    &:active {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .active.backgroundColor};
-    }
-  `
-
-  const ButtonContainerAttrs = {
-    buttonSize: String,
-  }
-  const ButtonContainer = styled('div', ButtonContainerAttrs)`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
-    white-space: nowrap;
-  `
-
-  const IconContainerAttrs = {
-    buttonSize: String,
-    appTheme: String,
-    type: String,
-    variant: String,
-  }
-  const IconContainer = styled('div', IconContainerAttrs)`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    width: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
-    background: rgba(255, 255, 255, 0.1);
-    border-right: ${(props) => {
-      const borderColor =
-        props.theme.mainButton[props.appTheme][props.type][props.variant]
-          .default.borderColor
-      return borderColor ? `1px solid ${borderColor}` : 'none'
-    }};
-  `
-
-  export default {
-    name: 'ButtonIcon',
-    components: {
-      PageContainer,
-      ButtonContainer,
-      ButtonWrapper,
-      IconContainer,
-      Icon,
-    },
-    props: {
-      type: {
-        required: false,
-        default: 'primary',
-        type: String,
-      },
-      variant: {
-        required: false,
-        default: 'main',
-        type: String,
-      },
-      themeType: {
-        type: String,
-        default: 'light',
-        required: false,
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
-      isDisabled: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      text: {
-        required: true,
-        type: String,
-      },
-      minWidth: {
-        required: false,
-        default: null,
-        type: String,
-      },
-      customColor: {
-        required: false,
-        default: null,
-        type: String,
-      },
-      iconName: {
-        required: true,
-        type: String,
-      },
-      iconColor: {
-        required: false,
-        default: null,
-        type: String,
-      },
-      fontSize: {
-        required: false,
-        default: '14px',
-        type: String,
-      },
-      appTheme: {
-        required: false,
-        default: 'light',
-        type: String,
-      },
-      isActive: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      disableIconHover: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    data() {
-      return {
-        theme: Theme,
-      }
-    },
-    // computed: {
-    //   getIconColor() {
-    //     console.log(this.theme[this.themeType][this.type][this.variant])
-    //     return (
-    //       this.iconColor ||
-    //       this.theme[this.themeType][this.type][this.variant].textColor
-    //     )
-    //   },
-    // },
-  }
-</script>
+<template>
+  <PageContainer>
+    <ButtonWrapper
+      :app-theme="appTheme"
+      :button-size="buttonSize"
+      :custom-color="customColor"
+      :is-active="isActive"
+      :is-disabled="isDisabled"
+      :min-width="minWidth"
+      :type="type"
+      :variant="variant"
+    >
+      <IconContainer
+        :app-theme="appTheme"
+        :button-size="buttonSize"
+        :type="type"
+        :variant="variant"
+      >
+        <Icon
+          :color="
+            iconColor ||
+            theme.mainButton[appTheme][type][variant].default.textColor
+          "
+          :disable-hover="disableIconHover"
+          :hovered-color="
+            iconColor ||
+            theme.mainButton[appTheme][type][variant].default.textColor
+          "
+          :name="iconName"
+          size="14px"
+        />
+      </IconContainer>
+      <ButtonContainer :button-size="buttonSize">
+        {{ text }}
+      </ButtonContainer>
+    </ButtonWrapper>
+  </PageContainer>
+</template>
+
+<script>
+  // import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
+  // <button-icon
+  //   :isDisabled="true"
+  //   text="Click Me"
+  //   minWidth="300px"
+  //   customColor="#000"
+  //   iconName="external_icon"
+  //   fontColor="white"
+  //   fontSize="12px"
+  // />
+
+  import Icon from '../../icon'
+  import styled from 'vue3-styled-components'
+  import Theme from '@/assets/theme'
+
+  const PageContainer = styled.div``
+
+  const ButtonAttrs = {
+    type: String,
+    isDisabled: Boolean,
+    minWidth: String,
+    customColor: String,
+    buttonSize: String,
+    variant: String,
+    appTheme: String,
+    isActive: Boolean,
+  }
+  const ButtonWrapper = styled('div', ButtonAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    font-size: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
+    color: ${(props) =>
+      props.isDisabled
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .disabled.textColor
+        : props.customColor
+        ? props.theme.colors.white
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .default.textColor};
+    background-color: ${(props) =>
+      props.isDisabled
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .disabled.backgroundColor
+        : props.customColor
+        ? props.customColor
+        : props.isActive
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .active.backgroundColor
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .default.backgroundColor};
+    border: ${(props) => {
+      const borderValue = props.isDisabled
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .disabled.borderColor
+        : props.customColor
+        ? props.customColor
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
+            .default.borderColor
+      return borderValue ? '1px solid ' + borderValue : 'none'
+    }};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    user-select: none;
+    border-radius: 4px;
+    overflow: hidden;
+    min-width: ${(props) => props.minWidth || 'initial'};
+
+    &:hover {
+      background-color: ${(props) =>
+        props.isDisabled
+          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+              .disabled.backgroundColor
+          : props.customColor
+          ? props.customColor
+          : props.theme.mainButton[props.appTheme][props.type][props.variant]
+              .hover.backgroundColor};
+    }
+
+    &:active {
+      background-color: ${(props) =>
+        props.isDisabled
+          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+              .disabled.backgroundColor
+          : props.theme.mainButton[props.appTheme][props.type][props.variant]
+              .active.backgroundColor};
+    }
+  `
+
+  const ButtonContainerAttrs = {
+    buttonSize: String,
+  }
+  const ButtonContainer = styled('div', ButtonContainerAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    white-space: nowrap;
+  `
+
+  const IconContainerAttrs = {
+    buttonSize: String,
+    appTheme: String,
+    type: String,
+    variant: String,
+  }
+  const IconContainer = styled('div', IconContainerAttrs)`
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    width: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.iconWidth};
+    background: rgba(255, 255, 255, 0.1);
+    border-right: ${(props) => {
+      const borderColor =
+        props.theme.mainButton[props.appTheme][props.type][props.variant]
+          .default.borderColor
+      return borderColor ? `1px solid ${borderColor}` : 'none'
+    }};
+  `
+
+  export default {
+    name: 'ButtonIcon',
+    components: {
+      PageContainer,
+      ButtonContainer,
+      ButtonWrapper,
+      IconContainer,
+      Icon,
+    },
+    props: {
+      type: {
+        required: false,
+        default: 'primary',
+        type: String,
+      },
+      variant: {
+        required: false,
+        default: 'main',
+        type: String,
+      },
+      themeType: {
+        type: String,
+        default: 'light',
+        required: false,
+      },
+      buttonSize: {
+        type: String,
+        default: 'medium',
+        required: false,
+      },
+      isDisabled: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      text: {
+        required: true,
+        type: String,
+      },
+      minWidth: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      customColor: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      iconName: {
+        required: true,
+        type: String,
+      },
+      iconColor: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      fontSize: {
+        required: false,
+        default: '14px',
+        type: String,
+      },
+      appTheme: {
+        required: false,
+        default: 'light',
+        type: String,
+      },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      disableIconHover: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        theme: Theme,
+      }
+    },
+    // computed: {
+    //   getIconColor() {
+    //     console.log(this.theme[this.themeType][this.type][this.variant])
+    //     return (
+    //       this.iconColor ||
+    //       this.theme[this.themeType][this.type][this.variant].textColor
+    //     )
+    //   },
+    // },
+  }
+</script>

package/src/components/buttons/closeButton/CloseButton.stories.js

@@ -1,25 +1,25 @@
-import CloseButton from './index.vue'
-
-export default {
-  title: 'CloseButton',
-  component: CloseButton,
-  tags: ['autodocs'],
-}
-
-// To use:
-// import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
-// <close-button
-//   color="#fff"
-// />
-
-export const Default = {
-  args: {
-    color: 'red',
-  },
-}
-
-export const ColorButton = {
-  args: {
-    color: 'blue',
-  },
-}
+import CloseButton from './index.vue'
+
+export default {
+  title: 'CloseButton',
+  component: CloseButton,
+  tags: ['autodocs'],
+}
+
+// To use:
+// import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
+// <close-button
+//   color="#fff"
+// />
+
+export const Default = {
+  args: {
+    color: 'red',
+  },
+}
+
+export const ColorButton = {
+  args: {
+    color: 'blue',
+  },
+}