@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-7.32.0

package/src/components/inputs/switchField/index.vue

@@ -1,254 +1,256 @@
 <template>
-  <Container>
-    <FlexWrapper
-      :align-items="alignItems"
+  <container>
+    <flex-wrapper
+      :size="size"
       :disabled="disabled"
+      :alignItems="alignItems"
       :label="label"
-      :size="size"
     >
-      <LabelContainer
+      <label-container
         v-if="label && labelAlign === 'left'"
-        :color-mode="colorMode"
-        :has-info-message="!!infoTextMessage"
-        :primary-color="primaryColor"
-        :secondary-color="secondaryColor"
+        :hasInfoMessage="!!infoTextMessage"
+        :colorMode="colorMode"
+        :primaryColor="primaryColor"
+        :secondaryColor="secondaryColor"
       >
-        <LabelText :size="size">
-          {{ label }}
-        </LabelText>
-        <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
-      </LabelContainer>
+        <label-text :size="size">{{ label }}</label-text>
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+        />
+      </label-container>
 
-      <SwitchWrapper
-        :background-color="backgroundColor"
-        :disabled="disabled"
+      <switch-wrapper
         :size="size"
+        :disabled="disabled"
+        :backgroundColor="backgroundColor"
       >
-        <SwitchOption
+        <switchOption
           v-for="(item, index) in options"
           :key="index"
-          :color-mode="colorMode"
-          :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
-          :inactive-color="inactiveColor"
-          :is-active="selectedValue == item.value"
-          :primary-color="primaryColor"
-          :secondary-color="secondaryColor"
           @click="selectItem(item.value)"
+          :isActive="selectedValue == item.value"
+          :colorMode="colorMode"
+          :primaryColor="primaryColor"
+          :secondaryColor="secondaryColor"
+          :inactiveColor="inactiveColor"
+          :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
         >
           {{ item.content }}
-        </SwitchOption>
-      </SwitchWrapper>
-      <LabelContainer
+        </switchOption>
+      </switch-wrapper>
+      <label-container
         v-if="label && labelAlign === 'right'"
-        :has-info-message="!!infoTextMessage"
+        :hasInfoMessage="!!infoTextMessage"
       >
-        <LabelText :font-color="fontColor" :size="size">
-          {{ label }}
-        </LabelText>
-        <InfoText v-if="infoTextMessage" :text="infoTextMessage" @click.stop />
-      </LabelContainer>
-    </FlexWrapper>
-  </Container>
+        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
+        <info-text
+          @click.stop
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+        />
+      </label-container>
+    </flex-wrapper>
+  </container>
 </template>
 
 <script>
-  // import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
-  // To use:
-  // <SwitchField
-  //   @on-switch-change="onInputChange($event)"
-  //   :options="[{value:0,content:'zero'},{value:1,content:'one'},{value:2,content:'two'}]"
-  //   :value="1"
-  //   label="label"
-  //   toggleColor="red"
-  //   size="large"
-  //   backgroundColor="blue"
-  //   labelAlign="left"
-  //   fontColor="black"
-  //   :disabled="false"
-  // />
+// import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
+// To use:
+// <SwitchField
+//   @on-switch-change="onInputChange($event)"
+//   :options="[{value:0,content:'zero'},{value:1,content:'one'},{value:2,content:'two'}]"
+//   :value="1"
+//   label="label"
+//   toggleColor="red"
+//   size="large"
+//   backgroundColor="blue"
+//   labelAlign="left"
+//   fontColor="black"
+//   :disabled="false"
+// />
 
-  import styled from 'vue3-styled-components'
-  import InfoText from '../../infoText'
-  import theme from '../../../assets/theme'
-  const Container = styled.div``
+import styled from 'vue3-styled-components'
+import InfoText from '../../infoText'
+import theme from '../../../assets/theme'
+const Container = styled.div``
 
-  const flexAttrs = {
-    label: String,
-    size: String,
-    disabled: Boolean,
-    alignItems: String,
-  }
-  const FlexWrapper = styled('div', flexAttrs)`
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: 10px;
-    align-items: center;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    grid-template-columns: ${(props) =>
-      props.alignItems === 'vertical' || !props.label ? '1fr' : 'auto 1fr'};
-  `
+const flexAttrs = {
+  label: String,
+  size: String,
+  disabled: Boolean,
+  alignItems: String
+}
+const FlexWrapper = styled('div', flexAttrs)`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 10px;
+  align-items: center;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  grid-template-columns: ${(props) =>
+    props.alignItems === 'vertical' || !props.label ? '1fr' : 'auto 1fr'};
+`
 
-  const toggleAttrs = {
-    size: String,
-    fontColor: String,
-    disabled: Boolean,
-    backgroundColor: String,
-    isChecked: Boolean,
-    secondaryColor: String,
-    primaryColor: String,
-  }
-  const LabelText = styled('div', toggleAttrs)`
-    color: ${(props) => props.primaryColor};
-    font-size: 13px;
-    font-weight: 700;
-  `
+const toggleAttrs = {
+  size: String,
+  fontColor: String,
+  disabled: Boolean,
+  backgroundColor: String,
+  isChecked: Boolean,
+  secondaryColor: String,
+  primaryColor: String,
+}
+const LabelText = styled('div', toggleAttrs)`
+  color: ${(props) => props.primaryColor };
+  font-size: 13px;
+  font-weight: 700;
+`
 
-  const SwitchWrapper = styled('span', toggleAttrs)`
-    display: flex;
-    position: relative;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    height: ${(props) =>
-      props.size === 'medium'
-        ? '24px'
-        : props.size === 'small'
-        ? '16px'
-        : '24px'};
-  `
-  const optionAttrs = {
-    isActive: Boolean,
-    primaryColor: String,
-    secondaryColor: String,
-    inactiveColor: String,
+const SwitchWrapper = styled('span', toggleAttrs)`
+  display: flex;
+  position: relative;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  height: ${(props) =>
+    props.size === 'medium'
+      ? '24px'
+      : props.size === 'small'
+      ? '16px'
+      : '24px'};
+`
+const optionAttrs = {
+  isActive: Boolean,
+  primaryColor: String,
+  secondaryColor: String,
+  inactiveColor: String
+}
+const switchOption = styled('div', optionAttrs)`
+  color: ${(props) =>
+    props.isActive ? props.primaryColor : props.inactiveColor};
+  background-color: ${(props) =>
+    props.isActive ? props.secondaryColor : 'transparent'};
+  border: 1px solid
+    ${(props) => (props.isActive ? props.secondaryColor : props.inactiveColor)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  font-size: 13px;
+  line-height: 1;
+  text-align: center;
+  padding: 10px;
+  margin-right: -1px;
+  transition: all 0.1s ease-in-out;
+  overflow: hidden;
+  & :hover {
+    cursor: pointer;
   }
-  const SwitchOption = styled('div', optionAttrs)`
-    color: ${(props) =>
-      props.isActive ? props.primaryColor : props.inactiveColor};
-    background-color: ${(props) =>
-      props.isActive ? props.secondaryColor : 'transparent'};
-    border: 1px solid
-      ${(props) =>
-        props.isActive ? props.secondaryColor : props.inactiveColor};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
-    font-size: 13px;
-    line-height: 1;
-    text-align: center;
-    padding: 10px;
-    margin-right: -1px;
-    transition: all 0.1s ease-in-out;
-    overflow: hidden;
-    & :hover {
-      cursor: pointer;
-    }
-    &:first-child {
-      border-radius: 4px 0 0 4px;
-    }
-    &:last-child {
-      border-radius: 0 4px 4px 0;
-    }
-  `
+  &:first-child {
+    border-radius: 4px 0 0 4px;
+  }
+  &:last-child {
+    border-radius: 0 4px 4px 0;
+  }
+`
 
-  const labelAttrs = { hasInfoMessage: Boolean }
-  const LabelContainer = styled('div', labelAttrs)`
-    display: inline-grid;
-    grid-template-columns: ${(props) =>
-      props.hasInfoMessage ? 'auto 1fr' : 'auto'};
-    grid-gap: 12px;
-    align-items: center;
-  `
+const labelAttrs = { hasInfoMessage: Boolean }
+const LabelContainer = styled('div', labelAttrs)`
+  display: inline-grid;
+  grid-template-columns: ${(props) =>
+    props.hasInfoMessage ? 'auto 1fr' : 'auto'};
+  grid-gap: 12px;
+  align-items: center;
+`
 
-  export default {
-    name: 'SwitchField',
-    components: {
-      Container,
-      SwitchWrapper,
-      FlexWrapper,
-      LabelText,
-      InfoText,
-      LabelContainer,
-      SwitchOption,
+export default {
+  name: 'switchField',
+  components: {
+    Container,
+    SwitchWrapper,
+    FlexWrapper,
+    LabelText,
+    InfoText,
+    LabelContainer,
+    switchOption
+  },
+  props: {
+    label: {
+      required: false,
+      default: ''
     },
-    props: {
-      label: {
-        required: false,
-        default: '',
-      },
-      toggleColor: {
-        required: false,
-      },
-      backgroundColor: {
-        required: false,
-      },
-      size: {
-        required: false,
-        default: 'small',
-      },
-      labelAlign: {
-        required: false,
-        default: 'left',
-      },
-      fontColor: {
-        required: false,
-      },
-      disabled: {
-        required: false,
-        default: false,
-      },
-      infoTextMessage: {
-        required: false,
-      },
-      colorMode: {
-        required: false,
-        default: 'light',
-      },
-      alignItems: {
-        required: false,
-        default: 'horizontal',
-      },
-      options: {
-        required: true,
-      },
-      value: {
-        required: false,
-        default: null,
-      },
+    toggleColor: {
+      required: false
     },
-    data() {
-      return {
-        selectedValue: null,
-        primaryColor: 'white',
-        secondaryColor: 'black',
-        inactiveColor: 'grey6',
-      }
+    backgroundColor: {
+      required: false
     },
-    watch: {
-      value(val) {
-        this.selectedValue = val
-      },
+    size: {
+      required: false,
+      default: 'small'
     },
-    created() {
-      this.selectedValue = this.value
-
-      if (this.colorMode == 'dark') {
-        this.primaryColor = theme.colors.black
-        this.secondaryColor = theme.colors.white
-        this.inactiveColor = theme.colors.grey6
-      } else {
-        this.primaryColor = theme.colors.white
-        this.secondaryColor = theme.colors.black
-        this.inactiveColor = theme.colors.grey6
-      }
+    labelAlign: {
+      required: false,
+      default: 'left'
+    },
+    fontColor: {
+      required: false
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    infoTextMessage: {
+      required: false
+    },
+    colorMode: {
+      required: false,
+      default: 'light'
+    },
+    alignItems: {
+      required: false,
+      default: 'horizontal'
     },
-    methods: {
-      selectItem(value) {
-        if (this.disabled) {
-          return
-        }
-        this.selectedValue = value
-        this.$emit('on-switch-change', this.selectedValue)
-      },
+    options: {
+      required: true
     },
+    value: {
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {
+      selectedValue: null,
+      primaryColor: 'white',
+      secondaryColor: 'black',
+      inactiveColor: 'grey6'
+    }
+  },
+  created() {
+    this.selectedValue = this.value
+
+    if (this.colorMode == 'dark') {
+      this.primaryColor = theme.colors.black
+      this.secondaryColor = theme.colors.white
+      this.inactiveColor = theme.colors.grey6
+    } else {
+      this.primaryColor = theme.colors.white
+      this.secondaryColor = theme.colors.black
+      this.inactiveColor = theme.colors.grey6
+    }
+  },
+  methods: {
+    selectItem(value) {
+      if (this.disabled) {
+        return
+      }
+      this.selectedValue = value
+      this.$emit('on-switch-change', this.selectedValue)
+    }
+  },
+  watch: {
+    value(val) {
+      this.selectedValue = val
+    }
   }
+}
 </script>

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -1,7 +1,7 @@
-import TextAreaInput from './index.vue'
+import TextAreaInput from "./index.vue"
 
 export default {
-  title: 'TextAreaInput',
+  title: "TextAreaInput",
   component: TextAreaInput,
   // argTypes: {},
 }
@@ -31,97 +31,97 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({})
 Default.args = {
-  placeholder: 'Enter a comment',
+  placeholder: "Enter a comment",
   isDisabled: false,
-  rowHeight: '2',
+  rowHeight: "2",
   isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: '',
-  label: '',
-  value: '',
-  alignItems: 'vertical',
-  inputWidth: '350px',
+  errorText: "This field is required",
+  infoTextMessage: "",
+  label: "",
+  value: "",
+  alignItems: "vertical",
+  inputWidth: "350px",
 }
 
 export const Disabled = Template.bind({})
 Disabled.args = {
-  placeholder: 'Enter a comment',
+  placeholder: "Enter a comment",
   isDisabled: true,
-  rowHeight: '2',
+  rowHeight: "2",
   isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: '',
-  label: '',
-  value: '',
-  alignItems: 'vertical',
-  inputWidth: '350px',
+  errorText: "This field is required",
+  infoTextMessage: "",
+  label: "",
+  value: "",
+  alignItems: "vertical",
+  inputWidth: "350px",
 }
 
 export const Error = Template.bind({})
 Error.args = {
-  placeholder: 'Enter a comment',
+  placeholder: "Enter a comment",
   isDisabled: false,
-  rowHeight: '2',
+  rowHeight: "2",
   isError: true,
-  errorText: 'This field is required',
-  infoTextMessage: '',
-  label: '',
-  value: '',
-  alignItems: 'vertical',
-  inputWidth: '350px',
+  errorText: "This field is required",
+  infoTextMessage: "",
+  label: "",
+  value: "",
+  alignItems: "vertical",
+  inputWidth: "350px",
 }
 
 export const WithLabel = Template.bind({})
 WithLabel.args = {
-  placeholder: 'Enter a comment',
+  placeholder: "Enter a comment",
   isDisabled: false,
-  rowHeight: '2',
+  rowHeight: "2",
   isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
-  label: 'Description',
-  value: 'Here is my description!',
-  alignItems: 'vertical',
-  inputWidth: '350px',
+  errorText: "This field is required",
+  infoTextMessage: "Here is some information",
+  label: "Description",
+  value: "Here is my description!",
+  alignItems: "vertical",
+  inputWidth: "350px",
 }
 
 export const HorizontalLabel = Template.bind({})
 HorizontalLabel.args = {
-  placeholder: 'Enter a comment',
+  placeholder: "Enter a comment",
   isDisabled: false,
-  rowHeight: '2',
+  rowHeight: "2",
   isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
-  label: 'Description',
-  value: 'Here is my description!',
-  alignItems: 'horizontal',
-  inputWidth: '350px',
+  errorText: "This field is required",
+  infoTextMessage: "Here is some information",
+  label: "Description",
+  value: "Here is my description!",
+  alignItems: "horizontal",
+  inputWidth: "350px",
 }
 
 export const LargerTextArea = Template.bind({})
 LargerTextArea.args = {
-  placeholder: 'Enter a comment',
+  placeholder: "Enter a comment",
   isDisabled: false,
-  rowHeight: '5',
+  rowHeight: "5",
   isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
-  label: 'Description',
-  value: 'Here is my description!',
-  alignItems: 'vertical',
+  errorText: "This field is required",
+  infoTextMessage: "Here is some information",
+  label: "Description",
+  value: "Here is my description!",
+  alignItems: "vertical",
 }
 
 export const LargerFontSize = Template.bind({})
 LargerFontSize.args = {
-  placeholder: 'Enter a comment',
+  placeholder: "Enter a comment",
   isDisabled: false,
-  rowHeight: '5',
-  fontSize: '24px',
+  rowHeight: "5",
+  fontSize: "24px",
   isError: false,
-  errorText: 'This field is required',
-  infoTextMessage: 'Here is some information',
-  label: 'Description',
-  value: 'Here is my description!',
-  alignItems: 'vertical',
+  errorText: "This field is required",
+  infoTextMessage: "Here is some information",
+  label: "Description",
+  value: "Here is my description!",
+  alignItems: "vertical",
 }