@eturnity/eturnity_reusable_components 8.16.8 → 8.16.9-EPDM-13618.0

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

@@ -1,62 +1,62 @@
-<template>
-  <Wrapper>
-    <Container>
-      <LeftLine :color="color" />
-      <RightLine :color="color" />
-    </Container>
-  </Wrapper>
-</template>
-
-<script>
-  // To use:
-  // import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
-  // <close-button
-  //   color="#fff"
-  // />
-  import styled from 'vue3-styled-components'
-
-  const Container = styled.div`
-    position: relative;
-    width: 26px;
-    height: 25px;
-  `
-
-  const Wrapper = styled.div`
-    display: inline-block;
-    cursor: pointer;
-  `
-
-  const lineAttrs = { color: String }
-  const Line = styled('div', lineAttrs)`
-    width: 20px;
-    height: 2px;
-    background-color: ${(props) =>
-      props.color ? props.color : props.theme.colors.red};
-    position: absolute;
-    top: 11px; //half of the height of the parent
-  `
-
-  const LeftLine = styled(Line)`
-    transform: rotate(135deg);
-  `
-
-  const RightLine = styled(Line)`
-    transform: rotate(45deg);
-  `
-
-  export default {
-    name: 'CloseButton',
-    components: {
-      Container,
-      Wrapper,
-      LeftLine,
-      RightLine,
-    },
-    props: {
-      color: {
-        required: false,
-        default: '',
-      },
-    },
-  }
-</script>
+<template>
+  <Wrapper>
+    <Container>
+      <LeftLine :color="color" />
+      <RightLine :color="color" />
+    </Container>
+  </Wrapper>
+</template>
+
+<script>
+  // To use:
+  // import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
+  // <close-button
+  //   color="#fff"
+  // />
+  import styled from 'vue3-styled-components'
+
+  const Container = styled.div`
+    position: relative;
+    width: 26px;
+    height: 25px;
+  `
+
+  const Wrapper = styled.div`
+    display: inline-block;
+    cursor: pointer;
+  `
+
+  const lineAttrs = { color: String }
+  const Line = styled('div', lineAttrs)`
+    width: 20px;
+    height: 2px;
+    background-color: ${(props) =>
+      props.color ? props.color : props.theme.colors.red};
+    position: absolute;
+    top: 11px; //half of the height of the parent
+  `
+
+  const LeftLine = styled(Line)`
+    transform: rotate(135deg);
+  `
+
+  const RightLine = styled(Line)`
+    transform: rotate(45deg);
+  `
+
+  export default {
+    name: 'CloseButton',
+    components: {
+      Container,
+      Wrapper,
+      LeftLine,
+      RightLine,
+    },
+    props: {
+      color: {
+        required: false,
+        default: '',
+      },
+    },
+  }
+</script>

package/src/components/buttons/mainButton/MainButton.stories.js

@@ -1,51 +1,51 @@
-import MainButton from './index.vue'
-
-export default {
-  title: 'MainButton',
-  component: MainButton,
-  tags: ['autodocs'],
-}
-
-export const DefaultButton = {
-  args: {
-    type: 'primary',
-    text: 'Click me',
-  },
-}
-
-export const SecondaryButton = {
-  args: {
-    type: 'secondary',
-    text: 'Click me',
-  },
-}
-
-export const CancelButton = {
-  args: {
-    type: 'cancel',
-    text: 'Click me',
-  },
-}
-
-export const DisabledButton = {
-  args: {
-    text: 'Click me',
-    isDisabled: true,
-  },
-}
-
-export const CustomColorButton = {
-  args: {
-    text: 'Click me',
-    customColor: '#0068DE',
-    fontColor: '#fdb813',
-  },
-}
-
-export const IconButton = {
-  args: {
-    text: 'Click me',
-    icon: 'bell',
-    customColor: '#fdb813',
-  },
-}
+import MainButton from './index.vue'
+
+export default {
+  title: 'MainButton',
+  component: MainButton,
+  tags: ['autodocs'],
+}
+
+export const DefaultButton = {
+  args: {
+    type: 'primary',
+    text: 'Click me',
+  },
+}
+
+export const SecondaryButton = {
+  args: {
+    type: 'secondary',
+    text: 'Click me',
+  },
+}
+
+export const CancelButton = {
+  args: {
+    type: 'cancel',
+    text: 'Click me',
+  },
+}
+
+export const DisabledButton = {
+  args: {
+    text: 'Click me',
+    isDisabled: true,
+  },
+}
+
+export const CustomColorButton = {
+  args: {
+    text: 'Click me',
+    customColor: '#0068DE',
+    fontColor: '#fdb813',
+  },
+}
+
+export const IconButton = {
+  args: {
+    text: 'Click me',
+    icon: 'bell',
+    customColor: '#fdb813',
+  },
+}

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

@@ -1,213 +1,221 @@
-<template>
-  <PageContainer>
-    <ButtonContainer
-      :id="id"
-      :app-theme="appTheme"
-      :button-size="buttonSize"
-      :data-id="dataId"
-      :data-qa-id="dataQaId"
-      :height="height"
-      :is-disabled="isDisabled"
-      :min-width="minWidth"
-      :no-wrap="noWrap"
-      :type="type"
-      :variant="variant"
-    >
-      <LabelComponent :has-icon="Boolean(icon)">
-        <Icon
-          v-if="icon"
-          :color="getIconColor"
-          :hovered-color="getIconColor"
-          :name="icon"
-          size="14px"
-        />
-        {{ text }}
-      </LabelComponent>
-    </ButtonContainer>
-  </PageContainer>
-</template>
-
-<script>
-  // To use:
-  // import RCMainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
-  // <RCMainButton
-  //   text="Click Me"
-  //   customColor="#ab5348"
-  //   type="secondary" // primary, secondary, cancel
-  //   icon="icon-name" // icon name from icon component
-  //   :isDisabled="true"
-  //   :minWidth="minWidth"
-  //   :data-id="test_data_id"
-  // />
-
-  import styled from 'vue3-styled-components'
-  import Icon from '../../icon'
-  import theme from '../../../assets/theme'
-
-  const PageContainer = styled.div``
-
-  const ButtonAttrs = {
-    type: String,
-    isDisabled: Boolean,
-    minWidth: String,
-    noWrap: Boolean,
-    height: String,
-    variant: String,
-    buttonSize: String,
-    appTheme: String,
-  }
-  const ButtonContainer = styled('div', ButtonAttrs)`
-    display: flex;
-    justify-content: center;
-    padding: ${(props) =>
-      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
-    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.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.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.theme.mainButton[props.appTheme][props.type][props.variant]
-            .default.borderColor
-      return borderValue ? '1px solid ' + borderValue : 'none'
-    }};
-    border-radius: 4px;
-    text-align: center;
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    user-select: none;
-    ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
-    ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
-    height: ${(props) => props.height};
-
-    &:hover {
-      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]
-              .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 LabelAttrs = {
-    hasIcon: Boolean,
-  }
-
-  const LabelComponent = styled('span', LabelAttrs)`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: ${(props) => (props.hasIcon ? '5px' : '0')};
-  `
-
-  export default {
-    name: 'MainButton',
-    components: {
-      Icon,
-      LabelComponent,
-      PageContainer,
-      ButtonContainer,
-    },
-    props: {
-      type: {
-        required: false,
-        default: 'primary', // primary, secondary, tertiary, ghost
-        type: String,
-      },
-      variant: {
-        required: false,
-        default: 'main', // main, cancel
-        type: String,
-      },
-      isDisabled: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      icon: {
-        required: false,
-        default: null,
-        type: String,
-      },
-      iconColor: {
-        required: false,
-        default: '',
-        type: String,
-      },
-      text: {
-        required: true,
-        type: String,
-      },
-      noWrap: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      minWidth: {
-        required: false,
-        default: null,
-        type: String,
-      },
-      height: {
-        required: false,
-        default: 'auto',
-        type: String,
-      },
-      id: {
-        required: false,
-        default: null,
-        type: String,
-      },
-      dataId: {
-        type: String,
-        default: '',
-      },
-      dataQaId: {
-        type: String,
-        default: '',
-      },
-      appTheme: {
-        type: String,
-        default: 'light',
-      },
-      buttonSize: {
-        type: String,
-        default: 'medium',
-        required: false,
-      },
-    },
-    computed: {
-      theme() {
-        return theme
-      },
-      getIconColor() {
-        return this.isDisabled
-          ? this.theme.mainButton[this.appTheme][this.type][this.variant]
-              .disabled.textColor
-          : this.theme.mainButton[this.appTheme][this.type][this.variant]
-              .default.textColor
-      },
-    },
-  }
-</script>
+<template>
+  <PageContainer>
+    <ButtonContainer
+      :id="id"
+      :app-theme="appTheme"
+      :button-size="buttonSize"
+      :data-id="dataId"
+      :data-qa-id="dataQaId"
+      :height="height"
+      :is-disabled="isDisabled"
+      :min-width="minWidth"
+      :no-wrap="noWrap"
+      :type="type"
+      :variant="variant"
+    >
+      <LabelComponent :has-icon="Boolean(icon)" :reverse-direction="iconLast">
+        <Icon
+          v-if="icon"
+          :color="getIconColor"
+          :hovered-color="getIconColor"
+          :name="icon"
+          size="14px"
+        />
+        {{ text }}
+      </LabelComponent>
+    </ButtonContainer>
+  </PageContainer>
+</template>
+
+<script>
+  // To use:
+  // import RCMainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
+  // <RCMainButton
+  //   text="Click Me"
+  //   customColor="#ab5348"
+  //   type="secondary" // primary, secondary, cancel
+  //   icon="icon-name" // icon name from icon component
+  //   :isDisabled="true"
+  //   :minWidth="minWidth"
+  //   :data-id="test_data_id"
+  // />
+
+  import styled from 'vue3-styled-components'
+  import Icon from '../../icon'
+  import theme from '../../../assets/theme'
+
+  const PageContainer = styled.div``
+
+  const ButtonAttrs = {
+    type: String,
+    isDisabled: Boolean,
+    minWidth: String,
+    noWrap: Boolean,
+    height: String,
+    variant: String,
+    buttonSize: String,
+    appTheme: String,
+  }
+  const ButtonContainer = styled('div', ButtonAttrs)`
+    display: flex;
+    justify-content: center;
+    padding: ${(props) =>
+      props.theme?.mainButton?.size?.[props.buttonSize]?.padding};
+    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.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.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.theme.mainButton[props.appTheme][props.type][props.variant]
+            .default.borderColor
+      return borderValue ? '1px solid ' + borderValue : 'none'
+    }};
+    border-radius: 4px;
+    text-align: center;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    user-select: none;
+    ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
+    ${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
+    height: ${(props) => props.height};
+
+    &:hover {
+      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]
+              .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 LabelAttrs = {
+    hasIcon: Boolean,
+    reverseDirection: Boolean,
+  }
+
+  const LabelComponent = styled('span', LabelAttrs)`
+    display: flex;
+    flex-direction: ${(props) =>
+      props.reverseDirection ? 'row-reverse' : 'row'};
+    align-items: center;
+    justify-content: center;
+    gap: ${(props) => (props.hasIcon ? '5px' : '0')};
+  `
+
+  export default {
+    name: 'MainButton',
+    components: {
+      Icon,
+      LabelComponent,
+      PageContainer,
+      ButtonContainer,
+    },
+    props: {
+      type: {
+        required: false,
+        default: 'primary', // primary, secondary, tertiary, ghost
+        type: String,
+      },
+      variant: {
+        required: false,
+        default: 'main', // main, cancel
+        type: String,
+      },
+      isDisabled: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      icon: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      iconColor: {
+        required: false,
+        default: '',
+        type: String,
+      },
+      iconLast: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      text: {
+        required: true,
+        type: String,
+      },
+      noWrap: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      minWidth: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      height: {
+        required: false,
+        default: 'auto',
+        type: String,
+      },
+      id: {
+        required: false,
+        default: null,
+        type: String,
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
+      appTheme: {
+        type: String,
+        default: 'light',
+      },
+      buttonSize: {
+        type: String,
+        default: 'medium',
+        required: false,
+      },
+    },
+    computed: {
+      theme() {
+        return theme
+      },
+      getIconColor() {
+        return this.isDisabled
+          ? this.theme.mainButton[this.appTheme][this.type][this.variant]
+              .disabled.textColor
+          : this.theme.mainButton[this.appTheme][this.type][this.variant]
+              .default.textColor
+      },
+    },
+  }
+</script>