@eturnity/eturnity_reusable_components 1.1.21 → 1.1.24

package/.storybook/main.js

@@ -1,4 +1,8 @@
 module.exports = {
-  stories: ["../src/components/**/*.stories.js"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  stories: ["../src/components/**/*.stories.@(js|mdx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-docs",
+  ],
 }

package/.storybook/preview.js

@@ -1,9 +1,36 @@
 import { ThemeProvider } from "vue-styled-components"
 
 const theme = {
-  primary: "palevioletred",
-  secondary: "papayawhip",
-  tertiary: "lavenderblush",
+  colors: {
+    primary: "#48a2d0",
+    secondary: "#fdb813",
+    tertiary: "#d5d5d5",
+    black: "#353535",
+    yellow: "#fdb813",
+    darkGray: "#818181",
+    gray1: "#666",
+    mediumGray: "#d5d5d5",
+    lightGray: "#f2f2f2",
+    white: "#fff",
+    blue: "#48a2d0",
+    red: "#ff7e7e",
+    blue1: "#e4efff",
+    grey1: "#666",
+    grey2: "#c4c4c4",
+    grey3: "#b2b9c5",
+    grey4: "#ebeef4",
+    grey5: "#fafafa",
+    green: "#99db0c",
+    disabled: "#dfe1e1",
+  },
+  screen: {
+    mobileSmall: "345px",
+    mobile: "425px",
+    mobileLarge: "530px",
+    tablet: "768px",
+    tabletLarge: "950px",
+  },
+  borderRadius: "4px",
 }
 
 export const decorators = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.1.21",
+  "version": "1.1.24",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -17,9 +17,10 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.2.8",
+    "@storybook/addon-docs": "^6.4.19",
     "@storybook/addon-essentials": "^6.2.8",
     "@storybook/addon-links": "^6.2.8",
-    "@storybook/vue3": "^6.2.8",
+    "@storybook/vue": "^6.4.19",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",

package/src/components/addNewButton/AddNewButton.stories.js

@@ -0,0 +1,24 @@
+import AddNewButton from "./index.vue"
+
+export default {
+  title: "AddNewButton",
+  component: AddNewButton,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { AddNewButton },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<add-new-button v-bind="$props" />',
+
+  // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
+  // To use:
+  // <add-new-button :shouldPosition="true" />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  shouldPosition: true,
+}

package/src/components/buttons/closeButton/CloseButton.stories.js

@@ -0,0 +1,29 @@
+import CloseButton from "./index.vue"
+
+export default {
+  title: "CloseButton",
+  component: CloseButton,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { CloseButton },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<close-button v-bind="$props" />',
+
+  // To use:
+  // import CloseButton from "@eturnity/eturnity_reusable_components/src/components/buttons/closeButton"
+  // <close-button
+  //   color="#fff"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const ColorButton = Template.bind({})
+ColorButton.args = {
+  color: "orange",
+}

package/src/components/deleteIcon/DeleteIcon.stories.js

@@ -0,0 +1,29 @@
+import DeleteIcon from "./index.vue"
+
+export default {
+  title: "DeleteIcon",
+  component: DeleteIcon,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { DeleteIcon },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<delete-icon v-bind="$props" />',
+
+  // import DeleteIcon from "@eturnity/eturnity_reusable_components/src/components/deleteIcon"
+  // To use:
+  // <delete-icon color="gray" @click.native="onDeleteItem(item)" :isDisabled="true" />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isDisabled: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  isDisabled: true,
+}

package/src/components/deleteIcon/index.vue

@@ -17,7 +17,7 @@
 
 <script>
 // To use:
-// <delete-icon color="gray" @click.native="onDeleteItem(item)" :isDisabled="true" />
+// <delete-icon @click.native="onDeleteItem(item)" :isDisabled="true" />
 import styled from "vue-styled-components"
 
 const wrapperAttrs = { isDisabled: Boolean }

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

@@ -0,0 +1,57 @@
+import Checkbox from "./index.vue"
+
+export default {
+  title: "Checkbox",
+  component: Checkbox,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Checkbox },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<checkbox v-bind="$props" />',
+
+  // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
+  //To use:
+  // <checkbox
+  //     label="Do you accept the Terms?"
+  //     :isChecked="isChecked" //required
+  //     @on-event-handler="onInputChange($event)" //required
+  //     checkColor="blue"
+  //     size="small"
+  //     backgroundColor="red"
+  //     :isDisabled="true"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isChecked: true,
+  size: "medium", // "small" or "medium"
+  isDisabled: false,
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  isChecked: true,
+  size: "small", // "small" or "medium"
+  isDisabled: false,
+}
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  isChecked: true,
+  size: "medium", // "small" or "medium"
+  checkColor: "blue",
+  backgroundColor: "red",
+  isDisabled: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  isChecked: false,
+  size: "medium", // "small" or "medium"
+  isDisabled: true,
+}

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

@@ -0,0 +1,149 @@
+import InputNumber from "./index.vue"
+
+export default {
+  title: "InputNumber",
+  component: InputNumber,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { InputNumber },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<input-number v-bind="$props" />',
+
+  // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
+  // How to use:
+  // <input-number
+  //     placeholder="Enter distance"
+  //     :isError="false" //default is false
+  //     inputWidth="150px" //by default, this is 100%
+  //     :numberPrecision="3"
+  //     unitName="pc"
+  //     :value="inputValue" //required -- String
+  //     @input-change="onInputChange($event)" //required
+  //     @on-enter-click="onInputSubmit()"
+  //     :errorMessage="Enter a number between 1 and 10"
+  //     :disabled="false"
+  //     :noBorder="true"
+  //     textAlign="left" // "left, right, center"
+  //     :showLinearUnitName="true"
+  //     fontSize="13px"
+  //     labelText="Number of Modules"
+  //     labelInfoText="Here is some information for you..."
+  //     labelInfoAlign="left"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: "",
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 0,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+}
+
+export const hasError = Template.bind({})
+hasError.args = {
+  placeholder: "Enter Value",
+  errorMessage: "This field is required",
+  isError: true,
+  disabled: false,
+  inputWidth: "200px",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: "Enter Value",
+  disabled: true,
+  value: "",
+  inputWidth: "200px",
+  isError: false,
+  numberPrecision: 0,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+}
+
+export const LinearUnit = Template.bind({})
+LinearUnit.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: 10,
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 2,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: true,
+}
+
+export const NormalUnit = Template.bind({})
+NormalUnit.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: 10,
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 2,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+}
+
+export const WithLabel = Template.bind({})
+WithLabel.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: 10,
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 2,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+  labelText: "Number Input",
+}
+
+export const WithLabelInfo = Template.bind({})
+WithLabelInfo.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: 10,
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 2,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+  labelText: "Number Input",
+  labelInfoText: "Here is some information for you...",
+  labelInfoAlign: "right",
+}
+
+export const LargerFont = Template.bind({})
+LargerFont.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: 10,
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 2,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+  labelText: "Number Input",
+  fontSize: "16px",
+}

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

@@ -19,7 +19,7 @@
         :isError="isError"
         :inputWidth="inputWidth"
         :value="formatWithCurrency(value)"
-        :hasLength="!!value.length"
+        :hasLength="!!value && !!value.length"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @keyup.enter="$emit('on-enter-click')"
@@ -281,7 +281,7 @@ export default {
       let value = e.target.value
       let evaluatedInput = this.onEvaluateCode(value)
       this.onChangeHandler(evaluatedInput)
-      if (value.length) {
+      if (value && value.length) {
         this.textInput = numberToString({
           value: evaluatedInput,
           numberPrecision: this.numberPrecision,

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

@@ -0,0 +1,73 @@
+import InputText from "./index.vue"
+
+export default {
+  title: "InputText",
+  component: InputText,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { InputText },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<input-text v-bind="$props" />',
+
+  // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
+  // To use:
+  // <input-text
+  //   placeholder="Company name"
+  //   :value="companyName"
+  //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
+  //   :isError="checkErrors()"
+  //   :errorMessage="This is my error message"
+  //   infoTextAlign="right" // left by default
+  //   infoTextMessage="My info message"
+  //   label="Question 5"
+  //   alignItems="horizontal" // horizontal, vertical
+  //   inputWidth="250px"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: "Company name",
+  disabled: false,
+  value: "",
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  textAlign: "left",
+}
+
+export const hasError = Template.bind({})
+hasError.args = {
+  placeholder: "Enter Value",
+  errorMessage: "This field is required",
+  isError: true,
+  disabled: false,
+  inputWidth: "200px",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: "Enter Value",
+  disabled: true,
+  value: "",
+  inputWidth: "200px",
+  isError: false,
+}
+
+export const WithLabel = Template.bind({})
+WithLabel.args = {
+  placeholder: "Company name",
+  disabled: false,
+  label: "What is the best company in Switzerland?",
+  value: "Eturnity",
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  errorMessage: "Maximum 5 characters",
+  textAlign: "left",
+  alignItems: "vertical",
+}

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

@@ -68,7 +68,7 @@ const InputContainer = styled("input", inputProps)`
   font-size: 16px;
   color: ${(props) =>
     props.isError ? props.theme.colors.red : props.theme.colors.black};
-  width: 100%;
+  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
   box-sizing: border-box; // to allow width of 100% with padding
   font-weight: 500;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
@@ -115,6 +115,7 @@ export default {
   //   infoTextMessage="My info message"
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical
+  //   inputWidth="250px"
   // />
   name: "input-text",
   components: {

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

@@ -0,0 +1,58 @@
+import RadioButton from "./index.vue"
+
+export default {
+  title: "RadioButton",
+  component: RadioButton,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { RadioButton },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<radio-button v-bind="$props" />',
+
+  // import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
+  // To use:
+  // <radio-button
+  //     :options="radioOptions"
+  //     :selectedOption="checkedOption"
+  //     @on-radio-change="onInputChange($event)"
+  //     layout="vertical"
+  //     size="large"
+  //   />
+  // Data being passed should look like:
+  // radioOptions: [
+  // { label: 'Button 1', value: 'button_1', img: 'www.imagesrc.com', infoText: 'my info text' },
+  // { label: 'Button 2', value: 'button_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
+  // { label: 'Button 3', value: 'button_3', img: 'www.imagesrc.com', disabled: true },
+  // { label: 'Button 4', value: 'button_4', disabled: true }
+  // ]
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  options: [
+    { label: "Button 1", value: "button_1", infoText: "my info text" },
+    { label: "Button 2", value: "button_2", infoText: "my info text 2" },
+    { label: "Button 3", value: "button_3", disabled: true },
+    { label: "Button 4", value: "button_4", disabled: true },
+  ],
+  selectedOption: "button_2",
+  layout: "horizontal",
+  size: "medium",
+}
+
+export const VerticalLayout = Template.bind({})
+VerticalLayout.args = {
+  options: [
+    { label: "Button 1", value: "button_1" },
+    { label: "Button 2", value: "button_2" },
+    { label: "Button 3", value: "button_3" },
+    { label: "Button 4", value: "button_4", disabled: true },
+  ],
+  selectedOption: "button_2",
+  layout: "vertical",
+  size: "medium",
+}

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

@@ -0,0 +1,40 @@
+import SearchInput from "./index.vue"
+
+export default {
+  title: "SearchInput",
+  component: SearchInput,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { SearchInput },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<search-input v-bind="$props" />',
+
+  // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+  // To use:
+  // <search-input
+  //   placeholder="Company name"
+  //   :value="companyName"
+  //   :disabled="true"
+  //   inputWidth="250px"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: "Search...",
+  disabled: false,
+  value: "",
+  inputWidth: "250px",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: "Search...",
+  disabled: true,
+  value: "",
+  inputWidth: "250px",
+}

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

@@ -7,6 +7,7 @@
         @input="onChangeHandler($event)"
         :disabled="disabled"
         :isDisabled="disabled"
+        :inputWidth="inputWidth"
       />
       <img
         class="search-icn"
@@ -18,6 +19,13 @@
 
 <script>
 // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
+// To use:
+// <search-input
+//   placeholder="Company name"
+//   :value="companyName"
+//   :disabled="true"
+//   inputWidth="250px"
+// />
 import styled from "vue-styled-components"
 
 const Container = styled.div`
@@ -25,14 +33,14 @@ const Container = styled.div`
   position: relative;
 `
 
-const inputAttrs = { isDisabled: Boolean }
+const inputAttrs = { isDisabled: Boolean, inputWidth: String }
 const InputContainer = styled("input", inputAttrs)`
   border: 1px solid ${(props) => props.theme.colors.mediumGray};
   padding: 11px 30px 11px 10px;
   border-radius: 4px;
   font-size: 16px;
   color: ${(props) => props.theme.colors.black};
-  width: 100%;
+  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
   box-sizing: border-box;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
   background: ${(props) => props.theme.colors.white} !important;
@@ -74,6 +82,10 @@ export default {
       required: false,
       default: "",
     },
+    inputWidth: {
+      required: false,
+      default: null,
+    },
   },
   methods: {
     onChangeHandler(event) {

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

@@ -0,0 +1,135 @@
+import TextAreaInput from "./index.vue"
+
+export default {
+  title: "TextAreaInput",
+  component: TextAreaInput,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { TextAreaInput },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<text-area-input v-bind="$props" />',
+
+  // import TextAreaInput from "@eturnity/eturnity_reusable_components/src/components/inputs/textAreaInput"
+  // To use:
+  // <text-area-input
+  //     placeholder="Comments"
+  //     @input-change="onInputChange({ value: $event, type: 'note' })"
+  //     :value="form.note"
+  //     rowHeight="4" //optional
+  //     :isError="false"
+  //     :errorText="$gettext('field_required')"
+  //     infoTextAlign="right" // left by default
+  //     infoTextMessage="My info message"
+  //     label="Question 5"
+  //     alignItems="horizontal" // horizontal, vertical
+  //     :isDisabled="true"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: "Enter a comment",
+  isDisabled: false,
+  rowHeight: "2",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "",
+  label: "",
+  value: "",
+  alignItems: "vertical",
+  inputWidth: "350px",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: "Enter a comment",
+  isDisabled: true,
+  rowHeight: "2",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "",
+  label: "",
+  value: "",
+  alignItems: "vertical",
+  inputWidth: "350px",
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  placeholder: "Enter a comment",
+  isDisabled: false,
+  rowHeight: "2",
+  isError: true,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "",
+  label: "",
+  value: "",
+  alignItems: "vertical",
+  inputWidth: "350px",
+}
+
+export const WithLabel = Template.bind({})
+WithLabel.args = {
+  placeholder: "Enter a comment",
+  isDisabled: false,
+  rowHeight: "2",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  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",
+  isDisabled: false,
+  rowHeight: "2",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  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",
+  isDisabled: false,
+  rowHeight: "5",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  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",
+  isDisabled: false,
+  rowHeight: "5",
+  fontSize: "24px",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "Here is some information",
+  label: "Description",
+  value: "Here is my description!",
+  alignItems: "vertical",
+}

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

@@ -16,6 +16,7 @@
         :isError="isError"
         :rows="rowHeight"
         :value="value"
+        :inputWidth="inputWidth"
         :disabled="isDisabled"
         :fontSize="fontSize"
         @input="onChangeHandler"
@@ -39,6 +40,7 @@
 //     infoTextMessage="My info message"
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
+//     :isDisabled="true"
 // />
 import styled from "vue-styled-components"
 import InfoText from "../../infoText"
@@ -57,7 +59,12 @@ const LabelWrapper = styled.div`
   margin-bottom: 12px;
 `
 
-const inputProps = { isError: Boolean, disabled: Boolean, fontSize: String }
+const inputProps = {
+  isError: Boolean,
+  disabled: Boolean,
+  fontSize: String,
+  inputWidth: String,
+}
 const InputContainer = styled("textarea", inputProps)`
   border: ${(props) =>
     props.isError
@@ -68,7 +75,7 @@ const InputContainer = styled("textarea", inputProps)`
   border-radius: 4px;
   font-size: ${(props) => (props.fontSize ? props.fontSize : "16px")};
   color: ${(props) => props.theme.colors.black};
-  width: 100%;
+  width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
   max-width: 100%;
   box-sizing: border-box; // to allow width of 100% with padding
   cursor: ${(props) => (props.disabled ? "not-allowed" : "inherit")};
@@ -160,9 +167,16 @@ export default {
       required: false,
       default: "16px",
     },
+    inputWidth: {
+      required: false,
+      default: null,
+    },
   },
   methods: {
     onChangeHandler($event) {
+      if (this.isDisabled) {
+        return
+      }
       this.$emit("input-change", $event)
     },
   },

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

@@ -0,0 +1,77 @@
+import Toggle from "./index.vue"
+
+export default {
+  title: "Toggle",
+  component: Toggle,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Toggle },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<toggle v-bind="$props" />',
+
+  // 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"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isChecked: true,
+  size: "small", // "small" or "medium"
+  disabled: false,
+}
+
+export const Medium = Template.bind({})
+Medium.args = {
+  isChecked: true,
+  size: "medium", // "small" or "medium"
+  disabled: false,
+}
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  isChecked: true,
+  size: "small", // "small" or "medium"
+  disabled: false,
+  toggleColor: "red",
+  backgroundColor: "blue",
+}
+
+export const LabelLeft = Template.bind({})
+LabelLeft.args = {
+  isChecked: true,
+  size: "small", // "small" or "medium"
+  label: "My Label Text",
+  disabled: false,
+  labelAlign: "left",
+}
+
+export const LabelRight = Template.bind({})
+LabelRight.args = {
+  isChecked: true,
+  size: "small", // "small" or "medium"
+  label: "My Label Text",
+  disabled: false,
+  labelAlign: "right",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  isChecked: false,
+  size: "small", // "small" or "medium"
+  disabled: true,
+}

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

@@ -113,7 +113,7 @@ const ToggleWrapper = styled("span", toggleAttrs)`
       : props.size === "small"
       ? "16px"
       : "24px"};
-  border-radius: 9px;
+  border-radius: 100px;
 
   &:focus {
     outline: 0;

package/src/helpers/numberConverter.js

@@ -3,7 +3,12 @@ export const stringToNumber = ({ value, numberPrecision }) => {
   let newVal = value.toString()
   const selectedLang = localStorage.getItem("lang")
   // The first replace will replace not allowed characters with a blank
-  if (selectedLang === "de-DE" || selectedLang === "it-CH") {
+  if (
+    selectedLang === "de-DE" ||
+    selectedLang === "it-CH" ||
+    selectedLang === "no-no" ||
+    selectedLang === "da-dk"
+  ) {
     // replace commas with a dot, and dots with blank
     newVal = newVal
       .replace(/[^\d.,']/g, "")
@@ -19,7 +24,11 @@ export const stringToNumber = ({ value, numberPrecision }) => {
   ) {
     // replace ' with blank
     newVal = newVal.replace(/[^\d.,']/g, "").replace(/['\s]/g, "")
-  } else if (selectedLang === "fr-fr") {
+  } else if (
+    selectedLang === "fr-fr" ||
+    selectedLang === "fr" ||
+    selectedLang === "sv-se"
+  ) {
     // replace space with blank, and commas with dot
     newVal = newVal.replace(/[^\d.,']/g, "").replace(/[,\s]/g, ".")
   } else {