@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-10576.2

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

@@ -1,115 +1,112 @@
 <template>
-  <container>
-    <flex-wrapper
-      :size="size"
+  <Container>
+    <FlexWrapper
+      :data-id="dataId"
       :disabled="disabled"
+      :size="size"
       @click="onToggleChange"
-      :data-id="dataId"
     >
-      <label-container
+      <LabelContainer
         v-if="label && labelAlign === 'left'"
-        :hasInfoMessage="!!infoTextMessage"
+        :has-info-message="!!infoTextMessage"
       >
-        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
-        <info-text
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-        />
-      </label-container>
-      <toggle-wrapper
-        role="checkbox"
+        <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"
+        role="checkbox"
         :size="size"
         tabindex="0"
         @keydown.space.prevent="onToggleChange"
-        :disabled="disabled"
-        :backgroundColor="backgroundColor"
-        :isChecked="isChecked"
       >
-        <toggle-background
-          :backgroundColor="backgroundColor"
-          :isChecked="isChecked"
+        <ToggleBackground
+          :background-color="backgroundColor"
           :disabled="disabled"
+          :is-checked="isChecked"
         />
-        <toggle-dot
-          :isChecked="isChecked"
-          :toggleColor="toggleColor"
-          :size="size"
+        <ToggleDot
           :disabled="disabled"
+          :is-checked="isChecked"
+          :size="size"
+          :toggle-color="toggleColor"
         />
-      </toggle-wrapper>
-      <label-container
+      </ToggleWrapper>
+      <LabelContainer
         v-if="label && labelAlign === 'right'"
-        :hasInfoMessage="!!infoTextMessage"
+        :has-info-message="!!infoTextMessage"
       >
-        <label-text :size="size" :fontColor="fontColor">{{ label }}</label-text>
-        <info-text
-          @click.stop
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-        />
-      </label-container>
-    </flex-wrapper>
-  </container>
+        <LabelText :font-color="fontColor" :size="size">
+          {{ label }}
+        </LabelText>
+        <InfoText v-if="infoTextMessage" :text="infoTextMessage" @click.stop />
+      </LabelContainer>
+    </FlexWrapper>
+  </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
@@ -145,144 +142,144 @@ const ToggleWrapper = styled('span', toggleAttrs)`
   }
 `
 
-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
+  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.theme.colors.green
-      : props.theme.colors.grey3};
-  transition: 0.4s ease;
-`
+          ? props.backgroundColor
+          : 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
-      ? 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)'
+  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'
-        ? 'translateX(12px)'
-        : 'translateX(25px)'
-      : 'translateX(0)'};
-
-  @media (max-width: ${(props) => props.theme.screen.mobile}) {
-    height: 24px;
-    width: 24px;
+        ? '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.theme.colors.white
+        : props.theme.colors.white};
+    border-radius: 100%;
+    transition: transform 0.4s ease;
     transform: ${(props) =>
-      props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
-    bottom: 8px;
-  }
-`
+      props.isChecked
+        ? props.size === 'medium'
+          ? 'translateX(25px)'
+          : props.size === 'small'
+          ? 'translateX(12px)'
+          : 'translateX(25px)'
+        : 'translateX(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;
-`
+    @media (max-width: ${(props) => props.theme.screen.mobile}) {
+      height: 24px;
+      width: 24px;
+      transform: ${(props) =>
+        props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
+      bottom: 8px;
+    }
+  `
 
-export default {
-  name: 'toggle',
-  components: {
-    Container,
-    ToggleBackground,
-    ToggleDot,
-    ToggleWrapper,
-    FlexWrapper,
-    LabelText,
-    InfoText,
-    LabelContainer
-  },
-  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
+  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,
     },
-    disabled: {
-      required: false,
-      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: '',
+      },
     },
-    infoTextMessage: {
-      required: false
+    methods: {
+      onToggleChange() {
+        if (this.disabled) {
+          return
+        }
+        this.$emit('on-toggle-change', !this.isChecked)
+      },
     },
-    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>
-  <label-wrapper :labelAlign="labelAlign">
-    <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">
+  <LabelWrapper :label-align="labelAlign">
+    <InputLabel :font-size="fontSize" :label-font-color="labelFontColor">
       <slot></slot>
-      <optionalLabel v-if="labelOptional"
-        >({{ $gettext('Optional') }})</optionalLabel
-      ></input-label
-    >
-    <info-text
+      <OptionalLabel v-if="labelOptional">
+        ({{ $gettext('Optional') }})
+      </OptionalLabel>
+    </InputLabel>
+    <InfoText
       v-if="infoTextMessage"
-      :text="infoTextMessage"
-      borderColor="#ccc"
+      :align-arrow="infoTextAlign"
+      border-color="#ccc"
       :size="fontSize ? fontSize : '16px'"
-      :alignArrow="infoTextAlign"
+      :text="infoTextMessage"
     />
-  </label-wrapper>
+  </LabelWrapper>
 </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: 'input-text',
-  components: {
-    InfoText,
-    InputLabel,
-    LabelWrapper,
-    optionalLabel
-  },
-  data() {
-    return {
-      inputTypeData: 'text'
-    }
-  },
-  props: {
-    infoTextMessage: {
-      required: false
-    },
-    infoTextAlign: {
-      required: false
-    },
-    labelOptional: {
-      required: false,
-      default: false
+    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,
     },
-    fontSize: {
-      required: false,
-      default: null
+    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',
+      },
     },
-    labelFontColor: {
-      required: false,
-      default: 'black'
+    data() {
+      return {
+        inputTypeData: 'text',
+      }
     },
-    labelAlign: {
-      required: false,
-      default: 'vertical'
-    }
   }
-}
 </script>