@eturnity/eturnity_reusable_components 7.45.5-EPDM-11314.2 → 7.45.5-EPDM-10609.1

package/src/components/banner/infoBanner/index.vue

@@ -1,97 +1,97 @@
-<template>
-  <RCModal
-    data-test-id="info_banner_wrapper"
-    :is-open="isOpen"
-    @on-close="closeModal"
-  >
-    <ModalContainer>
-      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
-        <slot name="title"></slot>
-      </ModalTitle>
-      <TextContainer v-if="$slots.body" data-test-id="modal_body">
-        <slot name="body"></slot>
-      </TextContainer>
-      <ButtonContainer>
-        <RCButton
-          data-test-id="modal_buttons"
-          min-width="150px"
-          :text="buttonText"
-          type="primary"
-          @click="closeModal"
-        />
-      </ButtonContainer>
-    </ModalContainer>
-  </RCModal>
-</template>
-<script>
-  import styled from 'vue3-styled-components'
-  import RCModal from '@/components/modals/modal'
-  import RCButton from '@/components/buttons/mainButton'
-
-  const ModalContainer = styled.div`
-    width: 450px;
-    display: flex;
-    flex-direction: column;
-    min-height: 205px;
-    padding: 40px 40px 30px 40px;
-  `
-
-  const ModalTitle = styled.div`
-    color: ${(props) => props.theme.colors.black};
-    font-family: inherit;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 120%;
-    text-transform: uppercase;
-  `
-  const ButtonContainer = styled.div`
-    display: inline-flex;
-    flex-grow: 1;
-    align-items: flex-end;
-    gap: 20px;
-  `
-  const TextContainer = styled.div`
-    color: ${(props) => props.theme.colors.black};
-    font-family: inherit;
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    padding: 30px 0px;
-    white-space: pre-wrap;
-  `
-  export default {
-    name: 'InfoModal',
-    components: {
-      ModalContainer,
-      ModalTitle,
-      TextContainer,
-      ButtonContainer,
-      RCModal,
-      RCButton,
-    },
-    props: {
-      isOpen: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      buttonLabel: {
-        default: null,
-        type: String,
-      },
-    },
-    computed: {
-      buttonText() {
-        //work around for storybook not finding the $gettext function
-        return this.buttonLabel || this.$gettext('Got it')
-      },
-    },
-    methods: {
-      closeModal() {
-        this.$emit('on-close')
-      },
-    },
-  }
-</script>
+<template>
+  <RCModal
+    data-test-id="info_banner_wrapper"
+    :is-open="isOpen"
+    @on-close="closeModal"
+  >
+    <ModalContainer>
+      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
+        <slot name="title"></slot>
+      </ModalTitle>
+      <TextContainer v-if="$slots.body" data-test-id="modal_body">
+        <slot name="body"></slot>
+      </TextContainer>
+      <ButtonContainer>
+        <RCButton
+          data-test-id="modal_buttons"
+          min-width="150px"
+          :text="buttonText"
+          type="primary"
+          @click="closeModal"
+        />
+      </ButtonContainer>
+    </ModalContainer>
+  </RCModal>
+</template>
+<script>
+  import styled from 'vue3-styled-components'
+  import RCModal from '@/components/modals/modal'
+  import RCButton from '@/components/buttons/mainButton'
+
+  const ModalContainer = styled.div`
+    width: 450px;
+    display: flex;
+    flex-direction: column;
+    min-height: 205px;
+    padding: 40px 40px 30px 40px;
+  `
+
+  const ModalTitle = styled.div`
+    color: ${(props) => props.theme.colors.black};
+    font-family: inherit;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 120%;
+    text-transform: uppercase;
+  `
+  const ButtonContainer = styled.div`
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: flex-end;
+    gap: 20px;
+  `
+  const TextContainer = styled.div`
+    color: ${(props) => props.theme.colors.black};
+    font-family: inherit;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 30px 0px;
+    white-space: pre-wrap;
+  `
+  export default {
+    name: 'InfoModal',
+    components: {
+      ModalContainer,
+      ModalTitle,
+      TextContainer,
+      ButtonContainer,
+      RCModal,
+      RCButton,
+    },
+    props: {
+      isOpen: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      buttonLabel: {
+        default: null,
+        type: String,
+      },
+    },
+    computed: {
+      buttonText() {
+        //work around for storybook not finding the $gettext function
+        return this.buttonLabel || this.$gettext('Got it')
+      },
+    },
+    methods: {
+      closeModal() {
+        this.$emit('on-close')
+      },
+    },
+  }
+</script>

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

@@ -1,145 +1,145 @@
-<template>
-  <PageContainer>
-    <ButtonWrapper
-      :custom-color="customColor"
-      :height="height"
-      :is-disabled="isDisabled"
-      :min-width="minWidth"
-    >
-      <IconContainer :width="height">
-        <Icon
-          :color="fontColor ? fontColor : theme.colors.white"
-          :name="iconName"
-          size="14px"
-        />
-      </IconContainer>
-      <ButtonContainer :font-color="fontColor" :font-size="fontSize">
-        {{ 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"
-  //   height="24px"
-  // />
-
-  import Icon from '../../icon'
-  import styled from 'vue3-styled-components'
-  import Theme from '@/assets/theme'
-
-  const PageContainer = styled.div``
-
-  const ButtonAttrs = {
-    isDisabled: Boolean,
-    minWidth: String,
-    customColor: String,
-    height: String,
-  }
-  const ButtonWrapper = styled('div', ButtonAttrs)`
-    display: grid;
-    grid-template-columns: auto 1fr;
-    background-color: ${(props) =>
-      props.isDisabled
-        ? props.theme.colors.disabled
-        : props.customColor
-        ? props.customColor
-        : props.theme.colors.yellow};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    user-select: none;
-    border-radius: 4px;
-    overflow: hidden;
-    min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
-    height: ${(props) => props.height};
-
-    &:hover {
-      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
-    }
-
-    &:active {
-      opacity: 1;
-    }
-  `
-
-  const ButtonContainerAttrs = {
-    fontSize: String,
-    fontColor: String,
-  }
-  const ButtonContainer = styled('div', ButtonContainerAttrs)`
-    font-size: ${(props) => props.fontSize};
-    color: ${(props) =>
-      props.fontColor ? props.fontColor : props.theme.colors.white};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 15px;
-  `
-
-  const IconContainerAttrs = {
-    width: String,
-  }
-  const IconContainer = styled('div', IconContainerAttrs)`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    width: ${(props) => props.width};
-    background: ${(props) => props.theme.colors.white + '1a'};
-  `
-
-  export default {
-    name: 'ButtonIcon',
-    components: {
-      PageContainer,
-      ButtonContainer,
-      ButtonWrapper,
-      IconContainer,
-      Icon,
-    },
-    props: {
-      isDisabled: {
-        required: false,
-        default: false,
-      },
-      text: {
-        required: true,
-      },
-      minWidth: {
-        required: false,
-        default: null,
-      },
-      customColor: {
-        required: false,
-        default: null,
-      },
-      iconName: {
-        required: true,
-      },
-      fontColor: {
-        required: false,
-        default: null,
-      },
-      fontSize: {
-        required: false,
-        default: '13px',
-      },
-      height: {
-        required: false,
-        default: '30px',
-      },
-    },
-    data() {
-      return {
-        theme: Theme,
-      }
-    },
-  }
-</script>
+<template>
+  <PageContainer>
+    <ButtonWrapper
+      :custom-color="customColor"
+      :height="height"
+      :is-disabled="isDisabled"
+      :min-width="minWidth"
+    >
+      <IconContainer :width="height">
+        <Icon
+          :color="fontColor ? fontColor : theme.colors.white"
+          :name="iconName"
+          size="14px"
+        />
+      </IconContainer>
+      <ButtonContainer :font-color="fontColor" :font-size="fontSize">
+        {{ 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"
+  //   height="24px"
+  // />
+
+  import Icon from '../../icon'
+  import styled from 'vue3-styled-components'
+  import Theme from '@/assets/theme'
+
+  const PageContainer = styled.div``
+
+  const ButtonAttrs = {
+    isDisabled: Boolean,
+    minWidth: String,
+    customColor: String,
+    height: String,
+  }
+  const ButtonWrapper = styled('div', ButtonAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    background-color: ${(props) =>
+      props.isDisabled
+        ? props.theme.colors.disabled
+        : props.customColor
+        ? props.customColor
+        : props.theme.colors.yellow};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    user-select: none;
+    border-radius: 4px;
+    overflow: hidden;
+    min-width: ${(props) => (props.minWidth ? props.minWidth : 'initial')};
+    height: ${(props) => props.height};
+
+    &:hover {
+      opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
+    }
+
+    &:active {
+      opacity: 1;
+    }
+  `
+
+  const ButtonContainerAttrs = {
+    fontSize: String,
+    fontColor: String,
+  }
+  const ButtonContainer = styled('div', ButtonContainerAttrs)`
+    font-size: ${(props) => props.fontSize};
+    color: ${(props) =>
+      props.fontColor ? props.fontColor : props.theme.colors.white};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 15px;
+  `
+
+  const IconContainerAttrs = {
+    width: String,
+  }
+  const IconContainer = styled('div', IconContainerAttrs)`
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    width: ${(props) => props.width};
+    background: ${(props) => props.theme.colors.white + '1a'};
+  `
+
+  export default {
+    name: 'ButtonIcon',
+    components: {
+      PageContainer,
+      ButtonContainer,
+      ButtonWrapper,
+      IconContainer,
+      Icon,
+    },
+    props: {
+      isDisabled: {
+        required: false,
+        default: false,
+      },
+      text: {
+        required: true,
+      },
+      minWidth: {
+        required: false,
+        default: null,
+      },
+      customColor: {
+        required: false,
+        default: null,
+      },
+      iconName: {
+        required: true,
+      },
+      fontColor: {
+        required: false,
+        default: null,
+      },
+      fontSize: {
+        required: false,
+        default: '13px',
+      },
+      height: {
+        required: false,
+        default: '30px',
+      },
+    },
+    data() {
+      return {
+        theme: Theme,
+      }
+    },
+  }
+</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',
+  },
+}

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>