@eturnity/eturnity_reusable_components 9.22.2 → 9.25.0

package/src/components/inputs/checkbox/Checkbox.stories.js

@@ -1,7 +1,7 @@
 import Checkbox from './index.vue'
 
 export default {
-  title: 'Checkbox',
+  title: 'Components/Inputs/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
 }

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

@@ -45,6 +45,12 @@
   // />
   import styled from 'vue3-styled-components'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../shared/inputLabelTypography'
   const ComponentWrapper = styled.div`
     min-height: 16px;
   `
@@ -178,7 +184,10 @@
     isDisabled: Boolean,
   }
   const LabelText = styled('div', LabelTextAttrs)`
-    font-size: 13px;
+    font-size: ${inputLabelFontSize};
+    font-weight: ${inputLabelFontWeight};
+    line-height: ${inputLabelLineHeight};
+    letter-spacing: ${inputLabelLetterSpacing};
     display: flex;
     align-items: center;
     min-height: 16px;

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -1,7 +1,7 @@
 import InputNumber from './index.vue'
 
 export default {
-  title: 'InputNumber',
+  title: 'Components/Inputs/InputNumber',
   component: InputNumber,
   // argTypes: {},
 }

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

@@ -50,7 +50,7 @@
             "
             :border-color="
               colorMode === 'transparent' && !borderColor
-                ? 'white'
+                ? 'grey4'
                 : borderColor
             "
             :color-mode="colorMode"
@@ -97,7 +97,7 @@
           colorMode === 'transparent' ? 'transparent' : backgroundColor
         "
         :border-color="
-          colorMode === 'transparent' && !borderColor ? 'white' : borderColor
+          colorMode === 'transparent' && !borderColor ? 'grey4' : borderColor
         "
         :color-mode="colorMode"
         :data-id="inputDataId"
@@ -250,6 +250,12 @@
   import IsRequiredLabelStar from '../isRequiredLabelStar'
   import warningIcon from '../../../assets/icons/error_icon.png'
   import Icon from '../../icon'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../shared/inputLabelTypography'
 
   const inputProps = {
     isError: Boolean,
@@ -496,12 +502,16 @@
   `
 
   const LabelText = styled('div', inputProps)`
-    font-size: 13px;
+    font-size: ${(props) =>
+      props.fontSize ? props.fontSize : inputLabelFontSize};
+    font-weight: ${(props) =>
+      props.labelFontWeight ? props.labelFontWeight : inputLabelFontWeight};
+    line-height: ${inputLabelLineHeight};
+    letter-spacing: ${inputLabelLetterSpacing};
     color: ${(props) =>
       props.theme.colors[props.labelFontColor]
         ? props.theme.colors[props.labelFontColor]
         : props.labelFontColor};
-    font-weight: ${(props) => props.labelFontWeight};
   `
 
   const IconAttrs = { size: String, marginRight: Number }
@@ -737,7 +747,7 @@
       labelFontWeight: {
         type: String,
         required: false,
-        default: '700',
+        default: '500',
       },
       focus: {
         type: Boolean,

package/src/components/inputs/inputNumberQuestion/inputNumberQuestion.stories.js

@@ -0,0 +1,77 @@
+import { ref } from 'vue'
+import InputNumberQuestion from './index.vue'
+import theme from '@/assets/theme'
+
+const questionWithUnit = {
+  number_format_precision: 2,
+  number_min_allowed: 0,
+  number_max_allowed: 500,
+  unit_short_name: 'kWh',
+}
+
+const questionPlain = {
+  number_format_precision: 0,
+  number_min_allowed: 1,
+  number_max_allowed: 99,
+  unit_short_name: '',
+}
+
+export default {
+  title: 'Components/Inputs/InputNumberQuestion',
+  component: InputNumberQuestion,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+const Template = (args) => ({
+  components: { InputNumberQuestion },
+  setup() {
+    const val = ref(args.value)
+    return { args, val }
+  },
+  template: `
+    <div data-test-id="input-number-question-story" style="min-width: 280px; padding: 16px;">
+      <InputNumberQuestion
+        :question="args.question"
+        :value="val"
+        :placeholder="args.placeholder"
+        :is-error="args.isError"
+        :input-width="args.inputWidth"
+        :error-message="args.errorMessage"
+        @input-change="val = $event"
+      />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const WithUnit = Template.bind({})
+WithUnit.args = {
+  question: questionWithUnit,
+  value: '120',
+  placeholder: 'Annual consumption',
+  isError: false,
+  inputWidth: '200px',
+  errorMessage: 'Enter a number between 0 and 500',
+}
+
+export const PlainInteger = Template.bind({})
+PlainInteger.args = {
+  question: questionPlain,
+  value: '',
+  placeholder: 'Floor number',
+  isError: false,
+  inputWidth: '160px',
+  errorMessage: 'Enter a number between 1 and 99',
+}
+
+export const WithError = Template.bind({})
+WithError.args = {
+  ...PlainInteger.args,
+  value: 'abc',
+  isError: true,
+}

package/src/components/inputs/inputText/InputText.stories.js

@@ -1,7 +1,7 @@
 import InputText from './index.vue'
 
 export default {
-  title: 'InputText',
+  title: 'Components/Inputs/InputText',
   component: InputText,
   tags: ['autodocs'],
 }

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

@@ -107,6 +107,12 @@
   import ErrorMessage from '../../errorMessage'
   import InputValidations from '../../../mixins/inputValidations.js'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../shared/inputLabelTypography'
 
   const Container = styled.div`
     width: 100%;
@@ -119,14 +125,17 @@
       props.theme.colors[props.labelFontColor]
         ? props.theme.colors[props.labelFontColor]
         : props.labelFontColor
-          ? props.labelFontColor
-          : props.theme.colors.eturnityGrey};
+        ? props.labelFontColor
+        : props.theme.colors.eturnityGrey};
 
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-    font-weight: 700;
+    font-size: ${(props) =>
+      props.fontSize ? props.fontSize : inputLabelFontSize};
+    font-weight: ${inputLabelFontWeight};
+    line-height: ${inputLabelLineHeight};
+    letter-spacing: ${inputLabelLetterSpacing};
   `
   const OptionalLabel = styled.span`
-    font-weight: 300;
+    font-weight: 400;
   `
   const LabelWrapper = styled.div`
     display: inline-grid;
@@ -163,29 +172,29 @@
       props.noBorder
         ? 'none'
         : props.isError
-          ? '1px solid ' + props.theme.colors.red
-          : props.borderColor
-            ? props.theme.colors[props.borderColor]
-              ? '1px solid ' + props.theme.colors[props.borderColor]
-              : '1px solid ' + props.borderColor
-            : '1px solid ' + props.theme.colors.grey4};
+        ? '1px solid ' + props.theme.colors.red
+        : props.borderColor
+        ? props.theme.colors[props.borderColor]
+          ? '1px solid ' + props.theme.colors[props.borderColor]
+          : '1px solid ' + props.borderColor
+        : '1px solid ' + props.theme.colors.grey4};
     padding: ${(props) =>
       props.isError
         ? '11px 25px 11px 10px'
         : props.inputType === 'password'
-          ? '11px 25px 11px 10px'
-          : props.defaultPadding
-            ? '10px 35px 10px 15px'
-            : '11px 5px 11px 10px'};
+        ? '11px 25px 11px 10px'
+        : props.defaultPadding
+        ? '10px 35px 10px 15px'
+        : '11px 5px 11px 10px'};
     border-radius: 4px;
     position: relative;
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+    font-size: ${(props) => (props.fontSize ? props.fontSize : '14px')};
     color: ${(props) =>
       props.isDisabled
         ? props.theme.colors.grey2
         : props.fontColor
-          ? props.fontColor + ' !important'
-          : props.theme.colors.black};
+        ? props.fontColor + ' !important'
+        : props.theme.colors.black};
 
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
     min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
@@ -199,8 +208,8 @@
           ? props.disabledBackgroundColor + ' !important'
           : props.theme.colors.grey5
         : props.backgroundColor
-          ? props.backgroundColor + ' !important'
-          : props.theme.colors.white};
+        ? props.backgroundColor + ' !important'
+        : props.theme.colors.white};
     &::placeholder {
       color: ${(props) => props.theme.colors.grey2};
     }

package/src/components/inputs/isRequiredLabelStar/isRequiredLabelStar.stories.js

@@ -0,0 +1,26 @@
+import IsRequiredLabelStar from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Inputs/IsRequiredLabelStar',
+  component: IsRequiredLabelStar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+const Template = () => ({
+  components: { IsRequiredLabelStar },
+  template: `
+    <span data-test-id="required-star-story" style="font-size: 14px;">
+      Required field
+      <IsRequiredLabelStar />
+    </span>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})

package/src/components/inputs/radioButton/RadioButton.stories.js

@@ -4,7 +4,7 @@ import defaultRadioButtonProps from './defaultProps'
 import RadioButton from './index.vue'
 
 export default {
-  title: 'RadioButton',
+  title: 'Components/Inputs/RadioButton',
   component: RadioButton,
   tags: ['autodocs'],
 }

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

@@ -110,6 +110,12 @@
   import InfoText from '../../infoText'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
   import ErrorMessage from '../../errorMessage'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../shared/inputLabelTypography'
 
   const wrapperProps = {
     layout: String,
@@ -159,12 +165,6 @@
         : props.theme.colors.black};
     position: relative;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    font-size: ${(props) =>
-      props.size === 'large'
-        ? '16px'
-        : props.size === 'medium'
-        ? '13px'
-        : '10px'};
     user-select: none;
     flex: auto;
     align-self: baseline;
@@ -213,8 +213,22 @@
     }
   `
 
-  const textAttrs = { isDisabled: Boolean, colorMode: String }
+  const textAttrs = {
+    isDisabled: Boolean,
+    colorMode: String,
+    fontSize: String,
+    fontWeight: String,
+    labelFontWeight: String,
+  }
   const LabelText = styled('div', textAttrs)`
+    font-size: ${(props) =>
+      props.fontSize ? props.fontSize : inputLabelFontSize};
+    font-weight: ${(props) =>
+      props.fontWeight || props.labelFontWeight
+        ? props.fontWeight || props.labelFontWeight
+        : inputLabelFontWeight};
+    line-height: ${inputLabelLineHeight};
+    letter-spacing: ${inputLabelLetterSpacing};
     color: ${(props) =>
       props.isDisabled
         ? props.theme.colors.grey2

package/src/components/inputs/searchInput/SearchInput.stories.js

@@ -4,7 +4,7 @@ import defaultSearchInputProps from './defaultProps'
 import SearchInput from './index.vue'
 
 export default {
-  title: 'SearchInput',
+  title: 'Components/Inputs/SearchInput',
   component: SearchInput,
   tags: ['autodocs'],
 }

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

@@ -24,7 +24,6 @@
               ? 'white'
               : 'eturnityGrey'
           "
-          :font-size="fontSize"
           :font-weight="labelFontWeight"
           >{{ label }}
           <IsRequiredLabelStar v-if="isRequiredLabel" />
@@ -50,7 +49,7 @@
             buttonBgColor
               ? buttonBgColor
               : colorMode == 'dark'
-              ? 'transparentBlack1'
+              ? 'transparent'
               : colorMode == 'transparent'
               ? 'transparent'
               : 'white'
@@ -155,6 +154,7 @@
                   : 'white'
               "
               class="rc-select-dropdown"
+              :color-mode="colorMode"
               :dropdown-match-max-content="dropdownMatchMaxContent"
               :dropdown-position="dropdownPosition"
               :font-color="
@@ -233,9 +233,9 @@
               ></slot>
               <slot
                 v-if="isCustomOptionVisible"
-                name="customOption"
                 :custom-option-value="customOptionValue"
-              />
+                name="customOption"
+              ></slot>
             </SelectDropdown>
           </Component>
         </DropdownWrapper>
@@ -287,6 +287,12 @@
   import InputText from '../inputText'
   import DraggableInputHandle from '../../draggableInputHandle'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../shared/inputLabelTypography'
   import { debounce } from '../../../utils'
 
   const CARET_WIDTH = '30px'
@@ -323,6 +329,7 @@
     showBorder: Boolean,
   }
   const Selector = styled('div', selectorProps)`
+    font-size: 14px;
     color: ${(props) => (props.disabled ? props.theme.colors.grey2 : '')};
     ${(props) =>
       props.selectWidth === '100%'
@@ -357,8 +364,12 @@
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
-    font-size: ${(props) => props.fontSize};
-    font-weight: ${(props) => props.fontWeight};
+    font-size: ${(props) =>
+      props.fontSize ? props.fontSize : inputLabelFontSize};
+    font-weight: ${(props) =>
+      props.fontWeight ? props.fontWeight : inputLabelFontWeight};
+    line-height: ${inputLabelLineHeight};
+    letter-spacing: ${inputLabelLetterSpacing};
   `
   const OptionalLabel = styled.span`
     font-weight: 300;
@@ -443,7 +454,7 @@
     display: flex;
     align-items: center;
     ${(props) => (props.selectHeight ? `height: ${props.selectHeight};` : '')}
-    ${({ showBorder, theme, hasError }) =>
+    ${({ showBorder, theme, hasError, colorMode }) =>
       showBorder &&
       `
     border: ${BORDER_WIDTH} solid ${
@@ -472,7 +483,11 @@
     overflow: hidden;
     & > .handle {
       border-right: ${(props) =>
-          props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
+          props.hasError
+            ? props.theme.colors.red
+            : props.colorMode === 'light'
+            ? props.theme.colors.grey4
+            : props.theme.colors.white}
         1px solid;
     }
   `
@@ -492,6 +507,7 @@
     isFixedDropdownPosition: Boolean,
     isTeleport: Boolean,
     dropdownMatchMaxContent: Boolean,
+    colorMode: String,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
@@ -564,7 +580,7 @@
     gap: 8px;
     box-sizing: border-box;
     width: 100%;
-    border: 1px solid ${(p) => p.theme.semanticColors.grey[300]};
+    border: 1px solid ${(p) => p.theme.semanticColors.teal[600]};
     border-radius: 8px;
     background-color: ${(p) => p.theme.colors.white};
   `
@@ -648,7 +664,7 @@
       },
       labelFontWeight: {
         required: false,
-        default: '700',
+        default: '500',
         type: String,
       },
       isRequiredLabel: {
@@ -715,7 +731,7 @@
       },
       dropdownBgColor: {
         required: false,
-        default: 'grey5',
+        default: 'transparent',
       },
       dropdownFontColor: {
         required: false,
@@ -925,12 +941,9 @@
       isSearchBarVisible() {
         return (
           (this.isCustomizable ||
-            (
-              this.searchPlacement !== 'dropdown' &&
+            (this.searchPlacement !== 'dropdown' &&
               this.isSearchable &&
-              this.optionLength >= this.minOptionLength
-            )
-          ) &&
+              this.optionLength >= this.minOptionLength)) &&
           this.isDropdownOpen
         )
       },
@@ -967,10 +980,7 @@
         return this.dropdownWidth
       },
       isSelectDropdownShown() {
-        return (
-          this.isDropdownOpen &&
-          this.dropdownPosition.left !== null
-        )
+        return this.isDropdownOpen && this.dropdownPosition.left !== null
       },
       isMobileDevice() {
         const userAgent =
@@ -1230,7 +1240,9 @@
         }
 
         nodes.forEach((el) => {
-          let show = el.textContent.toLowerCase().includes(q) || el.hasAttribute('data-custom-option')
+          let show =
+            el.textContent.toLowerCase().includes(q) ||
+            el.hasAttribute('data-custom-option')
           if (
             show &&
             hideUnassignedWhenOthers &&

package/src/components/inputs/select/option/index.vue

@@ -2,7 +2,7 @@
   <OptionContainer
     :background-color="
       colorMode == 'dark'
-        ? theme.semanticColors.teal[900]
+        ? theme.semanticColors.teal[800]
         : colorMode == 'transparent'
         ? 'black'
         : backgroundColor

package/src/components/inputs/select/select.stories.js

@@ -10,7 +10,7 @@ const SELECT_SAMPLE_OPTIONS = [
 ]
 
 export default {
-  title: 'select',
+  title: 'Components/Inputs/Select',
   component: Select,
 }
 
@@ -35,28 +35,6 @@ const Template = (args) => ({
                     </Option>
                 </template>
             </Select>`,
-
-  // import Select from "@eturnity/eturnity_reusable_components/src/components/inputs/select"
-  // import Option from "@eturnity/eturnity_reusable_components/src/components/inputs/select/option"
-  // To use:
-  // How to use it
-  // <Select
-  //     hoverDropdown="true"
-  //     selectWidth="100%"
-  //     optionWidth="50%"
-  //     label="that is a label"
-  //     alignItems="vertical"
-  //     >
-  //     <template #selector="{selectedValue}">
-  //     value selected: {{selectedValue}}
-  //     </template>
-  //     <template #dropdown>
-  //     <Option value="1">value one</Option>
-  //     <Option value="2">value two</Option>
-  //     <Option value="3">value three</Option>
-  //     <Option value="4">value four</Option>
-  //     </template>
-  // </Select>
 })
 
 export const Default = Template.bind({})
@@ -64,7 +42,7 @@ Default.args = {
   hoverDropdown: false,
   selectWidth: '100%',
   optionWidth: '50%',
-  label: 'that is a label',
+  label: 'Service territory',
   alignItems: 'vertical',
   value: SELECT_SAMPLE_OPTIONS[1],
 }
@@ -88,7 +66,8 @@ const CustomizableTemplate = (args) => ({
       }
       return options.filter(
         (item, index, self) =>
-          self.findIndex((candidate) => candidate.label === item.label) === index
+          self.findIndex((candidate) => candidate.label === item.label) ===
+          index
       )
     })
     const onInputChange = (value) => {

package/src/components/inputs/shared/inputLabelTypography.js

@@ -0,0 +1,7 @@
+/** Default label typography for input components (matches InputText). */
+export const inputLabelFontSize = '12px'
+
+export const inputLabelFontWeight = '500'
+
+export const inputLabelLineHeight = '140%'
+export const inputLabelLetterSpacing = '-1%'

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

@@ -1,6 +1,6 @@
 <template>
   <Container>
-    <Slider
+    <VueformSlider
       :max="maxValue"
       :min="minValue"
       :tooltips="false"
@@ -21,7 +21,7 @@
   //     :minValue="10" //default is 0 if not specified
   //     :maxValue="500" //default is 100 if not specified
   // />
-  import Slider from '@vueform/slider'
+  import VueformSlider from '@vueform/slider'
   import styled from 'vue3-styled-components'
 
   const Container = styled.div`
@@ -81,9 +81,9 @@
   `
 
   export default {
-    name: 'Slider',
+    name: 'RcSlider',
     components: {
-      Slider,
+      VueformSlider,
       Container,
       NumberText,
     },
@@ -106,14 +106,11 @@
       },
     },
     mounted() {
-      // This is to add the 3 white lines to the slider button
-      let slider = document.querySelector('.slider-touch-area')
-      let span1 = document.createElement('span')
-      let span2 = document.createElement('span')
-      let span3 = document.createElement('span')
-      slider.appendChild(span1)
-      slider.appendChild(span2)
-      slider.appendChild(span3)
+      const slider = this.$el?.querySelector?.('.slider-touch-area')
+      if (!slider) return
+      ;[1, 2, 3].forEach(() => {
+        slider.appendChild(document.createElement('span'))
+      })
     },
     methods: {
       onChange(value) {