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

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

@@ -1,112 +1,115 @@
 <template>
-  <Container>
-    <FlexWrapper
-      :data-id="dataId"
-      :disabled="disabled"
+  <container>
+    <flex-wrapper
       :size="size"
+      :disabled="disabled"
       @click="onToggleChange"
+      :data-id="dataId"
     >
-      <LabelContainer
+      <label-container
         v-if="label && labelAlign === 'left'"
-        :has-info-message="!!infoTextMessage"
+        :hasInfoMessage="!!infoTextMessage"
       >
-        <LabelText :font-color="fontColor" :size="size">
-          {{ label }}
-        </LabelText>
-        <InfoText v-if="infoTextMessage" :text="infoTextMessage" />
-      </LabelContainer>
-      <ToggleWrapper
-        :background-color="backgroundColor"
-        :checked="isChecked"
-        :disabled="disabled"
-        :is-checked="isChecked"
+        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+        />
+      </label-container>
+      <toggle-wrapper
         role="checkbox"
+        :checked="isChecked"
         :size="size"
         tabindex="0"
         @keydown.space.prevent="onToggleChange"
+        :disabled="disabled"
+        :backgroundColor="backgroundColor"
+        :isChecked="isChecked"
       >
-        <ToggleBackground
-          :background-color="backgroundColor"
+        <toggle-background
+          :backgroundColor="backgroundColor"
+          :isChecked="isChecked"
           :disabled="disabled"
-          :is-checked="isChecked"
         />
-        <ToggleDot
-          :disabled="disabled"
-          :is-checked="isChecked"
+        <toggle-dot
+          :isChecked="isChecked"
+          :toggleColor="toggleColor"
           :size="size"
-          :toggle-color="toggleColor"
+          :disabled="disabled"
         />
-      </ToggleWrapper>
-      <LabelContainer
+      </toggle-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:
-  // <toggle
-  //   @on-toggle-change="onInputChange($event)"
-  //   :isChecked="toggleValue" // Boolean
-  //   label="My Label Text"
-  //   toggleColor="red"
-  //   size="small" // small, medium
-  //   backgroundColor="blue"
-  //   labelAlign="right"
-  //   fontColor="black"
-  //   :disabled="true"
-  //   infoTextMessage="My info message"
-  //   data-id="test_data_id"
-  // />
+// import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
+// To use:
+// <toggle
+//   @on-toggle-change="onInputChange($event)"
+//   :isChecked="toggleValue" // Boolean
+//   label="My Label Text"
+//   toggleColor="red"
+//   size="small" // small, medium
+//   backgroundColor="blue"
+//   labelAlign="right"
+//   fontColor="black"
+//   :disabled="true"
+//   infoTextMessage="My info message"
+//   data-id="test_data_id"
+// />
 
-  import styled from 'vue3-styled-components'
-  import InfoText from '../../infoText'
+import styled from 'vue3-styled-components'
+import InfoText from '../../infoText'
 
-  const Container = styled.div`
-    display: inline-block;
-  `
+const Container = styled.div`
+  display: inline-block;
+`
 
-  const flexAttrs = { size: String, disabled: Boolean }
-  const FlexWrapper = styled('div', flexAttrs)`
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-gap: ${(props) =>
-      props.size === 'medium'
-        ? '20px'
-        : props.size === 'small'
-        ? '10px'
-        : '20px'};
-    align-items: center;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-  `
+const flexAttrs = { size: String, disabled: Boolean }
+const FlexWrapper = styled('div', flexAttrs)`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: ${(props) =>
+    props.size === 'medium'
+      ? '20px'
+      : props.size === 'small'
+      ? '10px'
+      : '20px'};
+  align-items: center;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+`
 
-  const toggleAttrs = {
-    size: String,
-    fontColor: String,
-    disabled: Boolean,
-    backgroundColor: String,
-    isChecked: Boolean,
-  }
-  const LabelText = styled('div', toggleAttrs)`
-    color: ${(props) =>
-      props.fontColor ? props.fontColor : props.theme.colors.darkGray};
-    font-size: ${(props) =>
-      props.size === 'medium'
-        ? '16px'
-        : props.size === 'small'
-        ? '13px'
-        : '16px'};
-  `
+const toggleAttrs = {
+  size: String,
+  fontColor: String,
+  disabled: Boolean,
+  backgroundColor: String,
+  isChecked: Boolean
+}
+const LabelText = styled('div', toggleAttrs)`
+  color: ${(props) =>
+    props.fontColor ? props.fontColor : props.theme.colors.darkGray};
+  font-size: ${(props) =>
+    props.size === 'medium'
+      ? '16px'
+      : props.size === 'small'
+      ? '13px'
+      : '16px'};
+`
 
-  const ToggleWrapper = styled('span', toggleAttrs)`
+const ToggleWrapper = styled('span', toggleAttrs)`
   display: inline-block;
   border: ${(props) =>
     props.disabled
@@ -142,144 +145,144 @@
   }
 `
 
-  const backgroundAttrs = {
-    backgroundColor: String,
-    isChecked: Boolean,
-    disabled: Boolean,
-  }
-  const ToggleBackground = styled('span', backgroundAttrs)`
-    display: block;
-    border-radius: 100px;
-    height: 100%;
-    width: 100%;
-    background-color: ${(props) =>
-      props.disabled
-        ? props.theme.colors.grey5
-        : props.isChecked
+const backgroundAttrs = {
+  backgroundColor: String,
+  isChecked: Boolean,
+  disabled: Boolean
+}
+const ToggleBackground = styled('span', backgroundAttrs)`
+  display: block;
+  border-radius: 100px;
+  height: 100%;
+  width: 100%;
+  background-color: ${(props) =>
+    props.disabled
+      ? props.theme.colors.grey5
+      : props.isChecked
+      ? props.backgroundColor
         ? props.backgroundColor
-          ? props.backgroundColor
-          : props.theme.colors.green
-        : props.theme.colors.grey3};
-    transition: 0.4s ease;
-  `
+        : props.theme.colors.green
+      : props.theme.colors.grey3};
+  transition: 0.4s ease;
+`
 
-  const toggleProps = {
-    isChecked: Boolean,
-    toggleColor: String,
-    size: String,
-    disabled: Boolean,
-  }
-  const ToggleDot = styled('span', toggleProps)`
-    position: absolute;
-    height: ${(props) =>
-      props.size === 'medium'
-        ? '14px'
-        : props.size === 'small'
-        ? '10px'
-        : '14px'};
-    width: ${(props) =>
-      props.size === 'medium'
-        ? '14px'
-        : props.size === 'small'
-        ? '10px'
-        : '14px'};
-    left: 3px;
-    bottom: ${(props) =>
-      props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
-    background-color: ${(props) =>
-      props.disabled
-        ? props.theme.colors.disabled
-        : props.isChecked
+const toggleProps = {
+  isChecked: Boolean,
+  toggleColor: String,
+  size: String,
+  disabled: Boolean
+}
+const ToggleDot = styled('span', toggleProps)`
+  position: absolute;
+  height: ${(props) =>
+    props.size === 'medium'
+      ? '14px'
+      : props.size === 'small'
+      ? '10px'
+      : '14px'};
+  width: ${(props) =>
+    props.size === 'medium'
+      ? '14px'
+      : props.size === 'small'
+      ? '10px'
+      : '14px'};
+  left: 3px;
+  bottom: ${(props) =>
+    props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
+  background-color: ${(props) =>
+    props.disabled
+      ? props.theme.colors.disabled
+      : props.isChecked
+      ? props.toggleColor
         ? props.toggleColor
-          ? props.toggleColor
-          : props.theme.colors.white
-        : props.theme.colors.white};
-    border-radius: 100%;
-    transition: transform 0.4s ease;
-    transform: ${(props) =>
-      props.isChecked
-        ? props.size === 'medium'
-          ? 'translateX(25px)'
-          : props.size === 'small'
-          ? 'translateX(12px)'
-          : 'translateX(25px)'
-        : 'translateX(0)'};
+        : props.theme.colors.white
+      : props.theme.colors.white};
+  border-radius: 100%;
+  transition: transform 0.4s ease;
+  transform: ${(props) =>
+    props.isChecked
+      ? props.size === 'medium'
+        ? 'translateX(25px)'
+        : props.size === 'small'
+        ? 'translateX(12px)'
+        : 'translateX(25px)'
+      : 'translateX(0)'};
 
-    @media (max-width: ${(props) => props.theme.screen.mobile}) {
-      height: 24px;
-      width: 24px;
-      transform: ${(props) =>
-        props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
-      bottom: 8px;
-    }
-  `
+  @media (max-width: ${(props) => props.theme.screen.mobile}) {
+    height: 24px;
+    width: 24px;
+    transform: ${(props) =>
+      props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
+    bottom: 8px;
+  }
+`
 
-  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: 'Toggle',
-    components: {
-      Container,
-      ToggleBackground,
-      ToggleDot,
-      ToggleWrapper,
-      FlexWrapper,
-      LabelText,
-      InfoText,
-      LabelContainer,
+export default {
+  name: 'toggle',
+  components: {
+    Container,
+    ToggleBackground,
+    ToggleDot,
+    ToggleWrapper,
+    FlexWrapper,
+    LabelText,
+    InfoText,
+    LabelContainer
+  },
+  props: {
+    label: {
+      required: false,
+      default: ''
+    },
+    isChecked: {
+      required: true,
+      default: false
     },
-    props: {
-      label: {
-        required: false,
-        default: '',
-      },
-      isChecked: {
-        required: true,
-        default: false,
-      },
-      toggleColor: {
-        required: false,
-      },
-      backgroundColor: {
-        required: false,
-      },
-      size: {
-        required: false,
-        default: 'small',
-      },
-      labelAlign: {
-        required: false,
-        default: 'right',
-      },
-      fontColor: {
-        required: false,
-      },
-      disabled: {
-        required: false,
-        default: false,
-      },
-      infoTextMessage: {
-        required: false,
-      },
-      dataId: {
-        type: String,
-        default: '',
-      },
+    toggleColor: {
+      required: false
     },
-    methods: {
-      onToggleChange() {
-        if (this.disabled) {
-          return
-        }
-        this.$emit('on-toggle-change', !this.isChecked)
-      },
+    backgroundColor: {
+      required: false
     },
+    size: {
+      required: false,
+      default: 'small'
+    },
+    labelAlign: {
+      required: false,
+      default: 'right'
+    },
+    fontColor: {
+      required: false
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    infoTextMessage: {
+      required: false
+    },
+    dataId: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    onToggleChange() {
+      if (this.disabled) {
+        return
+      }
+      this.$emit('on-toggle-change', !this.isChecked)
+    }
   }
+}
 </script>

package/src/components/label/index.vue

@@ -1,99 +1,99 @@
 <template>
-  <LabelWrapper :label-align="labelAlign">
-    <InputLabel :font-size="fontSize" :label-font-color="labelFontColor">
+  <label-wrapper :labelAlign="labelAlign">
+    <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">
       <slot></slot>
-      <OptionalLabel v-if="labelOptional">
-        ({{ $gettext('Optional') }})
-      </OptionalLabel>
-    </InputLabel>
-    <InfoText
+      <optionalLabel v-if="labelOptional"
+        >({{ $gettext('Optional') }})</optionalLabel
+      ></input-label
+    >
+    <info-text
       v-if="infoTextMessage"
-      :align-arrow="infoTextAlign"
-      border-color="#ccc"
-      :size="fontSize ? fontSize : '16px'"
       :text="infoTextMessage"
+      borderColor="#ccc"
+      :size="fontSize ? fontSize : '16px'"
+      :alignArrow="infoTextAlign"
     />
-  </LabelWrapper>
+  </label-wrapper>
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
-  import InfoText from '../infoText'
+import styled from 'vue3-styled-components'
+import InfoText from '../infoText'
 
-  const labelAttrs = { fontSize: String, labelFontColor: String }
-  const InputLabel = styled('div', labelAttrs)`
-    color: ${(props) =>
-      props.theme.colors[props.labelFontColor]
-        ? props.theme.colors[props.labelFontColor]
-        : props.labelFontColor
-        ? props.labelFontColor
-        : props.theme.colors.eturnityGrey};
+const labelAttrs = { fontSize: String, labelFontColor: String }
+const InputLabel = styled('div', labelAttrs)`
+  color: ${(props) =>
+    props.theme.colors[props.labelFontColor]
+      ? props.theme.colors[props.labelFontColor]
+      : props.labelFontColor
+      ? props.labelFontColor
+      : props.theme.colors.eturnityGrey};
 
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-    font-weight: 700;
-  `
-  const OptionalLabel = styled.span`
-    font-weight: 300;
-  `
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-weight: 700;
+`
+const optionalLabel = styled.span`
+  font-weight: 300;
+`
 
-  const LabelWrapper = styled('div', { labelAlign: String })`
-    ${(props) =>
-      props.labelAlign == 'horizontal'
-        ? 'display: inline-grid;'
-        : 'display: grid;'}
-    ${(props) =>
-      props.labelAlign == 'horizontal'
-        ? 'margin-right: 10px;'
-        : 'margin-bottom: 8px;'}
+const LabelWrapper = styled('div', { labelAlign: String })`
+  ${(props) =>
+    props.labelAlign == 'horizontal'
+      ? 'display: inline-grid;'
+      : 'display: grid;'}
+  ${(props) =>
+    props.labelAlign == 'horizontal'
+      ? 'margin-right: 10px;'
+      : 'margin-bottom: 8px;'}
   vertical-align: center;
-    grid-template-columns: auto auto;
-    grid-gap: 12px;
-    align-items: center;
-    justify-content: start;
-  `
-  export default {
-    // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
-    // To use:
-    // <label-text
-    //   infoTextAlign="right" // left by default
-    //   infoTextMessage="My info message"
-    //   label="Question 5"
-    // />
-    name: 'InputText',
-    components: {
-      InfoText,
-      InputLabel,
-      LabelWrapper,
-      OptionalLabel,
+  grid-template-columns: auto auto;
+  grid-gap: 12px;
+  align-items: center;
+  justify-content: start;
+`
+export default {
+  // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
+  // To use:
+  // <label-text
+  //   infoTextAlign="right" // left by default
+  //   infoTextMessage="My info message"
+  //   label="Question 5"
+  // />
+  name: 'input-text',
+  components: {
+    InfoText,
+    InputLabel,
+    LabelWrapper,
+    optionalLabel
+  },
+  data() {
+    return {
+      inputTypeData: 'text'
+    }
+  },
+  props: {
+    infoTextMessage: {
+      required: false
+    },
+    infoTextAlign: {
+      required: false
+    },
+    labelOptional: {
+      required: false,
+      default: false
     },
-    props: {
-      infoTextMessage: {
-        required: false,
-      },
-      infoTextAlign: {
-        required: false,
-      },
-      labelOptional: {
-        required: false,
-        default: false,
-      },
-      fontSize: {
-        required: false,
-        default: null,
-      },
-      labelFontColor: {
-        required: false,
-        default: 'black',
-      },
-      labelAlign: {
-        required: false,
-        default: 'vertical',
-      },
+    fontSize: {
+      required: false,
+      default: null
     },
-    data() {
-      return {
-        inputTypeData: 'text',
-      }
+    labelFontColor: {
+      required: false,
+      default: 'black'
     },
+    labelAlign: {
+      required: false,
+      default: 'vertical'
+    }
   }
+}
 </script>