@eturnity/eturnity_reusable_components 9.22.2 → 9.25.0

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

@@ -0,0 +1,71 @@
+import { ref, watch } from 'vue'
+import RcSlider from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Inputs/Slider',
+  component: RcSlider,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Wrapper around `@vueform/slider` with Eturnity styling. The inner control is registered as `VueformSlider` so it cannot recurse into the host component.',
+      },
+    },
+  },
+  argTypes: {
+    value: { control: { type: 'range', min: 0, max: 100 } },
+    minValue: { control: 'number' },
+    maxValue: { control: 'number' },
+    unit: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { RcSlider },
+  setup() {
+    const innerValue = ref(args.value)
+    watch(
+      () => args.value,
+      (v) => {
+        innerValue.value = v
+      },
+    )
+    const onSliderChange = (v) => {
+      innerValue.value = v
+    }
+    return { args, innerValue, onSliderChange }
+  },
+  template: `
+    <div data-test-id="slider-story" style="min-width: 320px; padding: 16px;">
+      <RcSlider
+        :value="innerValue"
+        :min-value="args.minValue"
+        :max-value="args.maxValue"
+        :unit="args.unit"
+        @change="onSliderChange"
+      />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  value: 35,
+  minValue: 0,
+  maxValue: 100,
+  unit: '%',
+}
+
+export const MetersRange = Template.bind({})
+MetersRange.args = {
+  value: 120,
+  minValue: 10,
+  maxValue: 500,
+  unit: 'm',
+}

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

@@ -28,8 +28,11 @@
         <SwitchOption
           v-for="(item, index) in options"
           :key="index"
+          :border-color="borderColor"
           :color-mode="colorMode"
           :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
+          :height="height"
+          :inactive-border-color="inactiveBorderColor"
           :inactive-color="inactiveColor"
           :is-active="value == item.value"
           :primary-color="primaryColor"
@@ -82,6 +85,12 @@
   import theme from '../../../assets/theme'
   import RCIcon from '../../icon'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../shared/inputLabelTypography'
   const OptionIconContainer = styled.div`
     display: flex;
     align-items: center;
@@ -114,8 +123,10 @@
   }
   const LabelText = styled('div', toggleAttrs)`
     color: ${(props) => props.primaryColor};
-    font-size: 13px;
-    font-weight: 700;
+    font-size: ${inputLabelFontSize};
+    font-weight: ${inputLabelFontWeight};
+    line-height: ${inputLabelLineHeight};
+    letter-spacing: ${inputLabelLetterSpacing};
   `
 
   const SwitchWrapper = styled('span', toggleAttrs)`
@@ -131,6 +142,9 @@
     inactiveColor: String,
     size: String,
     width: String,
+    height: String,
+    borderColor: String,
+    inactiveBorderColor: String,
   }
   const SwitchOption = styled('div', optionAttrs)`
     color: ${(props) =>
@@ -139,7 +153,7 @@
       props.isActive ? props.secondaryColor : 'transparent'};
     border: 1px solid
       ${(props) =>
-        props.isActive ? props.secondaryColor : props.inactiveColor};
+        props.isActive ? props.borderColor : props.inactiveBorderColor};
     display: flex;
     width: ${({ width }) => width};
     word-break: break-word;
@@ -150,7 +164,9 @@
     line-height: 1;
     text-align: center;
     height: ${(props) =>
-      props.size === 'medium'
+      props.height
+        ? props.height
+        : props.size === 'medium'
         ? '24px'
         : props.size === 'small'
         ? '16px'
@@ -209,6 +225,11 @@
         required: false,
         default: 'small',
       },
+      height: {
+        required: false,
+        default: null,
+        type: String,
+      },
       labelAlign: {
         required: false,
         default: 'left',
@@ -249,17 +270,23 @@
         primaryColor: 'white',
         secondaryColor: 'black',
         inactiveColor: 'grey6',
+        borderColor: 'grey6',
+        inactiveBorderColor: 'grey6',
       }
     },
     created() {
       if (this.colorMode == 'dark') {
-        this.primaryColor = theme.colors.black
-        this.secondaryColor = theme.colors.white
-        this.inactiveColor = theme.colors.grey6
+        this.primaryColor = theme.semanticColors.teal[800]
+        this.secondaryColor = theme.semanticColors.teal[50]
+        this.inactiveColor = theme.semanticColors.teal[50]
+        this.borderColor = this.secondaryColor
+        this.inactiveBorderColor = theme.semanticColors.teal[600]
       } else {
-        this.primaryColor = theme.colors.white
-        this.secondaryColor = theme.colors.black
-        this.inactiveColor = theme.colors.grey6
+        this.primaryColor = theme.semanticColors.teal[50]
+        this.secondaryColor = theme.semanticColors.teal[800]
+        this.inactiveColor = theme.semanticColors.teal[50]
+        this.borderColor = this.secondaryColor
+        this.inactiveBorderColor = theme.semanticColors.teal[50]
       }
     },
     methods: {

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

@@ -0,0 +1,71 @@
+import { ref } from 'vue'
+import SwitchField from './index.vue'
+import theme from '@/assets/theme'
+
+const demoOptions = [
+  { value: 0, content: 'Off' },
+  { value: 1, content: 'Auto' },
+  { value: 2, content: 'On' },
+]
+
+export default {
+  title: 'Components/Inputs/SwitchField',
+  component: SwitchField,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    label: { control: 'text' },
+    size: { control: 'select', options: ['small', 'medium'] },
+    disabled: { control: 'boolean' },
+    colorMode: { control: 'select', options: ['light', 'dark'] },
+    alignItems: { control: 'select', options: ['horizontal', 'vertical'] },
+    infoTextMessage: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { SwitchField },
+  setup() {
+    const value = ref(args.value)
+    return { args, value, demoOptions }
+  },
+  template: `
+    <div data-test-id="switch-field-story" style="padding: 16px; min-width: 280px;">
+      <SwitchField
+        v-bind="args"
+        :options="demoOptions"
+        :value="value"
+        @on-switch-change="value = $event"
+      />
+      <p style="margin-top: 12px; font-size: 12px; color: #666;">Selected value: {{ value }}</p>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const ThreeWaySwitch = Template.bind({})
+ThreeWaySwitch.args = {
+  label: 'Fan speed',
+  value: 1,
+  size: 'small',
+  disabled: false,
+  colorMode: 'light',
+  alignItems: 'horizontal',
+  infoTextMessage: '',
+}
+
+export const WithInfoText = Template.bind({})
+WithInfoText.args = {
+  ...ThreeWaySwitch.args,
+  infoTextMessage: 'Applies to this location only.',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...ThreeWaySwitch.args,
+  disabled: true,
+}

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

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

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

@@ -5,7 +5,7 @@
       :has-label="label && label.length > 0"
     >
       <LabelWrapper v-if="label">
-        <InputLabel :data-id="labelDataId" :font-size="fontSize">
+        <InputLabel :data-id="labelDataId">
           {{ label }}
           <IsRequiredLabelStar v-if="isRequiredLabel" />
         </InputLabel>
@@ -15,6 +15,7 @@
         :app-theme="appTheme"
         :disabled="isDisabled"
         :font-size="fontSize"
+        :input-padding="inputPadding"
         :input-width="inputWidth"
         :is-error="isError"
       >
@@ -58,12 +59,17 @@
   import InfoText from '../../infoText'
   import ErrorMessage from '../../errorMessage'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../shared/inputLabelTypography'
 
   const containerProps = { inputWidth: String }
   const Container = styled('div', containerProps)`
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
     position: relative;
-    margin-bottom: 20px;
   `
 
   const LabelWrapper = styled.div`
@@ -80,6 +86,7 @@
     fontSize: String,
     inputWidth: String,
     appTheme: String,
+    inputPadding: String,
   }
 
   const InputContainer = styled('div', inputProps)`
@@ -88,8 +95,7 @@
         props.isError
           ? `1px solid ${props.theme.colors.red} !important`
           : `1px solid ${props.theme.colors.grey4} !important`};
-      padding: ${(props) =>
-        props.hasUnit ? '11px 40px 11px 10px !important' : '15px !important'};
+      padding: ${(props) => props.inputPadding + ' !important'};
       border-radius: 4px !important;
       font-size: ${(props) => `${props.fontSize} !important`};
       color: ${({ appTheme, theme }) =>
@@ -129,8 +135,11 @@
 
   const labelAttrs = { fontSize: String }
   const InputLabel = styled('div', labelAttrs)`
-    font-weight: bold;
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+    font-size: ${(props) =>
+      props.fontSize ? props.fontSize : inputLabelFontSize};
+    font-weight: ${inputLabelFontWeight};
+    line-height: ${inputLabelLineHeight};
+    letter-spacing: ${inputLabelLetterSpacing};
   `
 
   export default {
@@ -218,6 +227,10 @@
         type: String,
         default: 'light',
       },
+      inputPadding: {
+        required: false,
+        default: '15px',
+      },
     },
     methods: {
       onChangeHandler($event) {

package/src/components/inputs/toggle/Toggle.stories.js

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

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

@@ -94,6 +94,12 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../shared/inputLabelTypography'
 
   const Container = styled.div`
     display: inline-block;
@@ -123,12 +129,10 @@
   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'};
+    font-size: ${inputLabelFontSize};
+    font-weight: ${inputLabelFontWeight};
+    line-height: ${inputLabelLineHeight};
+    letter-spacing: ${inputLabelLetterSpacing};
   `
 
   const ToggleWrapper = styled('span', toggleAttrs)`

package/src/components/label/index.vue

@@ -1,6 +1,10 @@
 <template>
   <LabelWrapper :label-align="labelAlign">
-    <InputLabel :font-size="fontSize" :label-font-color="labelFontColor">
+    <InputLabel
+      :app-theme="appTheme"
+      :font-size="fontSize"
+      :label-font-color="labelFontColor"
+    >
       <slot></slot>
       <IsRequiredLabelStar v-if="isRequiredLabel" />
       <OptionalLabel v-if="labelOptional">
@@ -10,6 +14,7 @@
     <InfoText
       v-if="infoTextMessage"
       :align-arrow="infoTextAlign"
+      :app-theme="appTheme"
       :size="fontSize ? fontSize : '14px'"
       :text="infoTextMessage"
     />
@@ -20,18 +25,36 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../infoText'
   import IsRequiredLabelStar from '../inputs/isRequiredLabelStar'
+  import {
+    inputLabelFontSize,
+    inputLabelFontWeight,
+    inputLabelLetterSpacing,
+    inputLabelLineHeight,
+  } from '../inputs/shared/inputLabelTypography'
 
-  const labelAttrs = { fontSize: String, labelFontColor: String }
+  const labelAttrs = {
+    appTheme: String,
+    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};
+    color: ${(props) => {
+      if (props.labelFontColor) {
+        return props.theme.colors[props.labelFontColor]
+          ? props.theme.colors[props.labelFontColor]
+          : props.labelFontColor
+      }
+
+      return props.appTheme === 'dark'
+        ? props.theme.colors.white
+        : props.theme.colors.black
+    }};
 
-    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;
@@ -83,9 +106,14 @@
         required: false,
         default: null,
       },
+      appTheme: {
+        type: String,
+        required: false,
+        default: 'light',
+      },
       labelFontColor: {
         required: false,
-        default: 'black',
+        default: null,
       },
       labelAlign: {
         required: false,

package/src/components/label/label.stories.js

@@ -0,0 +1,69 @@
+import LabelText from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Label/Label',
+  component: LabelText,
+  tags: ['autodocs'],
+  argTypes: {
+    labelAlign: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+    },
+    labelFontColor: { control: 'text' },
+    fontSize: { control: 'text' },
+    isRequiredLabel: { control: 'boolean' },
+    labelOptional: { control: 'boolean' },
+    infoTextMessage: { control: 'text' },
+    infoTextAlign: { control: 'select', options: ['left', 'right'] },
+  },
+}
+
+const Template = (args) => ({
+  components: { LabelText },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="label-story" style="padding: 16px; max-width: 420px;">
+      <LabelText v-bind="args">
+        {{ args.slotLabel }}
+      </LabelText>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  slotLabel: 'Project name',
+  labelAlign: 'vertical',
+  isRequiredLabel: false,
+  labelOptional: false,
+  infoTextMessage: '',
+}
+
+export const RequiredField = Template.bind({})
+RequiredField.args = {
+  ...Default.args,
+  slotLabel: 'Legal entity',
+  isRequiredLabel: true,
+}
+
+export const OptionalWithHint = Template.bind({})
+OptionalWithHint.args = {
+  ...Default.args,
+  slotLabel: 'Nickname',
+  labelOptional: true,
+  infoTextMessage: 'Shown on invoices only.',
+  infoTextAlign: 'left',
+}
+
+export const HorizontalLayout = Template.bind({})
+HorizontalLayout.args = {
+  ...Default.args,
+  slotLabel: 'Budget (CHF)',
+  labelAlign: 'horizontal',
+}

package/src/components/markerItem/markerItem.stories.js

@@ -0,0 +1,46 @@
+import MarkerItem from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/MarkerItem/MarkerItem',
+  component: MarkerItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    label: { control: 'text' },
+    iconName: { control: 'text' },
+    backgroundColor: { control: 'text' },
+    cursor: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { MarkerItem },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="marker-item-story" style="padding: 16px;">
+      <MarkerItem v-bind="args" />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Highlights',
+  iconName: 'House',
+  backgroundColor: 'blue4',
+  cursor: 'pointer',
+}
+
+export const TextOnly = Template.bind({})
+TextOnly.args = {
+  label: 'No icon variant',
+  cursor: 'default',
+}

package/src/components/modals/actionModal/actionModal.stories.js

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

package/src/components/modals/actionModal/index.vue

@@ -26,7 +26,7 @@
     font-family: inherit;
     font-size: 18px;
     font-style: normal;
-    font-weight: 700;
+    font-weight: 500;
     line-height: 120%;
     &::first-letter {
       text-transform: uppercase;

package/src/components/modals/infoModal/index.vue

@@ -22,21 +22,12 @@
   import styled from 'vue3-styled-components'
   import RCModal from '../modal'
   import RCMainButton from '../../buttons/mainButton'
-
+  import ModalTitle from '../modalTitle'
   const ModalContainer = styled.div`
     width: 450px;
     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;
     align-items: flex-start;

package/src/components/modals/infoModal/infoModal.stories.js

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