@ohos-ports/s-ui-react-atom-input 5.51.0-beta.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 SUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,227 @@
+# AtomInput
+
+> Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts.
+
+[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/input/)
+[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,input)
+[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-input?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-input)
+
+[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Ainput&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Ainput)
+[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-input)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/input/LICENSE.md)
+
+## Installation
+
+```sh
+ƛ npm install @s-ui/react-atom-input --save
+```
+
+## Usage
+
+### Add styles
+
+To use the component's own styles, create a .scss file and import them inside.
+
+```scss
+@import '~@s-ui/react-atom-input/lib/index';
+```
+
+If you want to customize your components, create your own theme and add it to your component just **before**.
+
+```scss
+@import 'custom-settings';
+@import '~@s-ui/react-atom-input/lib/index';
+```
+
+### You can use native types like this
+
+```js
+import AtomInput from '@s-ui/react-atom-input'
+
+return <AtomInput type="number" /> // possible type options: text, number, date and password
+```
+
+### Non native Inputs
+
+#### SUI-Password
+
+In order to use SUI defined Password Input pass the prop `type='sui-password'` to the Input component.
+
+```js
+import AtomInput from '@s-ui/react-atom-input'
+
+return <AtomInput type="sui-password" />
+```
+
+#### Mask
+
+Wraps the https://unmanner.github.io/imaskjs/ lib, used if the input must follow a regex or a specific format/pattern . Using `type='mask'` activates this input, which will be expecting the `mask` prop type to be passed by.
+
+```js
+const bankAccountMask = {
+  // checkout all options here https://unmanner.github.io/imaskjs/guide.html
+  mask: 'ES00 0000 0000 00 0000000000'
+}
+
+return <AtomInput type="mask" mask={bankAccountMask} placeholder="ES00 0000 0000 00 0000000000" />
+```
+
+### Sizes
+
+There are defined 3 sizes (`MEDIUM`, `SMALL` and `XSMALL`) available at the exported object `inputSizes` and that can be set through the prop `size`
+
+Related size Sass vars are:
+
+```scss
+$h-atom-input--m: 40px;
+$h-atom-input--s: 32px;
+$h-atom-input--xs: 24px;
+```
+
+```js
+<AtomInput size={inputSizes.SMALL} name="first" placeholder="Small input" />
+```
+
+### Addons
+
+> [What are addons?](https://paper.dropbox.com/doc/SUI-Input-03mHJFkOCjviSZevsaTwm#:uid=125362683844628624581838&h2=Icons-and-addons-inside-the-in)
+
+Addons are passed as prop, use **leftAddon** or **rightAddon** in order to set the position inside the Input
+
+#### Addon usage
+
+```js
+import AtomInput from '@s-ui/react-atom-input'
+
+return <AtomInput leftAddon="http://" rightAddon="@schibsted.com" />
+```
+
+### Icons
+
+Icons are passed as prop, use **leftIcon** or **rightIcon** in order to set the position inside the Input
+
+```js
+import AtomInput from '@s-ui/react-atom-input'
+
+const logo = 'my_logo.svg'
+const leftIcon = () => <img src={logo} />
+
+<AtomInput leftIcon={leftIcon} />
+```
+
+You can also pass a handler for each Icon using the props **onClickLeftIcon** or **onClickRightIcon**
+
+```js
+<AtomInput
+  name="second"
+  placeholder="Medium Input"
+  leftIcon={LeftIcon}
+  rightIcon={IconLocation}
+  onClickRightIcon={e => alert('clicked right icon')}
+/>
+```
+
+### Error states
+
+There are 3 error states:
+
+- error state = **true**, will show a **red** border around the input field
+- error state = **false**, will show a **green** border around the input field
+- error state = **null**, will show the by **default** border around the input field
+
+```js
+<AtomInput name="second" placeholder="Success input" errorState={false} />
+```
+
+### Input states
+
+There are 3 error states:
+
+- input state = **'error'**, will show a **red** border around the input field
+- input state = **'success'**, will show a **green** border around the input field
+- input state = **'alert'**, will show a **orange** border around the input field
+- input state = **null**, will show the by **default** border around the input field
+
+```js
+<AtomInput name="second" placeholder="Success input" state="alert" />
+```
+
+### Form Usage
+
+Each field returns its value on every onChange event so you can save it inside your form state.
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Input from '@s-ui/react-atom-input'
+import Button from '@s-ui/react-atom-button'
+
+class SimpleLoginForm extends React.Component {
+  constructor() {
+    super()
+    this.state = {
+      email: {
+        value: '',
+        errorState: null
+      },
+      password: {
+        value: '',
+        errorState: null
+      }
+    }
+
+    this.onChange = this.onChange.bind(this)
+    this.onSubmit = this.onSubmit.bind(this)
+    this.onBlur = this.onBlur.bind(this)
+  }
+
+  isEmail(value) {
+    return /(.+)@(.+){2,}\.(.+){2,}/.test(value)
+  }
+
+  onChange({value, field}) {
+    this.setState(
+      Object.assign({}, this.state, {
+        [field]: {
+          value,
+          errorState: null
+        }
+      })
+    )
+  }
+
+  onBlur({value, field}) {
+    let errorState = !this.isEmail(value)
+    this.setState({
+      [field]: {errorState, value}
+    })
+  }
+
+  onSubmit(ev) {
+    ev.preventDefault()
+    ev.stopPropagation()
+
+    window.alert(JSON.stringify(this.state))
+  }
+
+  render() {
+    const {email, password} = this.state
+    return (
+      <form>
+        <Input
+          type="text"
+          value={email.value}
+          onChange={({ev, value}) => this.onChange({value, field: 'email', ev})}
+          onBlur={ev => this.onBlur({value: ev.target.value, field: 'email'})}
+          errorState={this.state.email.errorState}
+        />
+        <Input
+          type="sui-password"
+          value={password.value}
+          onChange={({ev, value}) => this.onChange({value, field: 'password', ev})}
+        />
+        <Button onClick={this.onSubmit}>Login</Button>
+      </form>
+    )
+  }
+}
+```

package/lib/Container/InputContainer.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "shape", "noBorder"];
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { BASE, INPUT_SHAPES } from '../config.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+var InputContainer = function InputContainer(_ref) {
+  var children = _ref.children,
+    shape = _ref.shape,
+    noBorder = _ref.noBorder,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx("div", _extends({
+    className: cx(BASE + "_Container", shape && BASE + "_Container-shape-" + shape, noBorder && BASE + "_Container-noBorder")
+  }, props, {
+    children: children
+  }));
+};
+export default InputContainer;

package/lib/Container/index.scss

@@ -0,0 +1,25 @@
+$base-class-container: '#{$base-class}_Container';
+
+#{$base-class-container} {
+  display: flex;
+  flex-grow: 1;
+  width: 100%;
+  border-radius: $bdrs-atom-input;
+  $this: &;
+  &:not(#{$base-class-container}-noBorder) {
+    border-radius: $bdrs-atom-input;
+    &#{$this}-shape {
+      @each $shapeMapKey, $shapeMapValue in $bdrs-atom-input-shapes {
+        &-#{$shapeMapKey} {
+          border-radius: $shapeMapValue;
+        }
+      }
+    }
+    &#{$this}:focus-within:has(#{$base-class-input}:focus-visible) {
+      outline-style: solid;
+      outline-color: transparentize($c-primary, 0.2);
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+  }
+}

package/lib/Input/Component/index.js

@@ -0,0 +1,141 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["as", "disabled", "readOnly", "hideInput", "noBorder", "id", "name", "onBlur", "onFocus", "onPaste", "onCopy", "placeholder", "reference", "size", "errorState", "state", "type", "value", "charsSize", "tabIndex", "ariaLabel", "maxLength", "minLength", "defaultValue", "min", "max", "step", "autoComplete", "autoFocus", "onChange", "onEnter", "onEnterKey", "onKeyDown", "onKeyPress", "required", "pattern", "inputMode", "shape", "children", "className"];
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs';
+import PolymorphicElement from '@s-ui/react-primitive-polymorphic-element';
+import { getClassNames, INPUT_SHAPES, INPUT_STATES, noop, SIZES } from '../../config.js';
+import isValidInputValue from '../../helpers/isValidInputValue.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Input = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'input' : _ref$as,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    hideInput = _ref.hideInput,
+    noBorder = _ref.noBorder,
+    id = _ref.id,
+    name = _ref.name,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onPaste = _ref.onPaste,
+    onCopy = _ref.onCopy,
+    placeholder = _ref.placeholder,
+    reference = _ref.reference,
+    size = _ref.size,
+    errorState = _ref.errorState,
+    state = _ref.state,
+    type = _ref.type,
+    value = _ref.value,
+    charsSize = _ref.charsSize,
+    tabIndex = _ref.tabIndex,
+    ariaLabel = _ref.ariaLabel,
+    maxLength = _ref.maxLength,
+    minLength = _ref.minLength,
+    defaultValue = _ref.defaultValue,
+    min = _ref.min,
+    max = _ref.max,
+    step = _ref.step,
+    autoComplete = _ref.autoComplete,
+    autoFocus = _ref.autoFocus,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+    _ref$onEnter = _ref.onEnter,
+    onEnter = _ref$onEnter === void 0 ? noop : _ref$onEnter,
+    _ref$onEnterKey = _ref.onEnterKey,
+    onEnterKey = _ref$onEnterKey === void 0 ? 'Enter' : _ref$onEnterKey,
+    _ref$onKeyDown = _ref.onKeyDown,
+    onKeyDown = _ref$onKeyDown === void 0 ? noop : _ref$onKeyDown,
+    _ref$onKeyPress = _ref.onKeyPress,
+    onKeyPress = _ref$onKeyPress === void 0 ? noop : _ref$onKeyPress,
+    required = _ref.required,
+    pattern = _ref.pattern,
+    inputMode = _ref.inputMode,
+    shape = _ref.shape,
+    children = _ref.children,
+    classNameProp = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var changeHandler = function changeHandler(ev) {
+    var _ev$target = ev.target,
+      value = _ev$target.value,
+      name = _ev$target.name;
+    onChange(ev, {
+      value: value,
+      name: name
+    });
+  };
+  var handleKeyDown = function handleKeyDown(ev) {
+    var _ev$target2 = ev.target,
+      value = _ev$target2.value,
+      name = _ev$target2.name;
+    var key = ev.key;
+    if (isValidInputValue(event, {
+      type: type,
+      onEnterKey: onEnterKey
+    })) {
+      onKeyDown(ev, {
+        value: value,
+        name: name
+      });
+      if (typeof onEnterKey === 'string') {
+        key === onEnterKey && onEnter(ev, {
+          value: value,
+          name: name
+        });
+      } else if (Array.isArray(onEnterKey)) {
+        onEnterKey.includes(key) && onEnter(ev, {
+          value: value,
+          name: name
+        });
+      }
+    }
+  };
+  var className = getClassNames({
+    size: size,
+    charsSize: charsSize,
+    hideInput: hideInput,
+    noBorder: noBorder,
+    readOnly: readOnly,
+    errorState: errorState,
+    state: state,
+    shape: shape,
+    className: classNameProp
+  });
+  return /*#__PURE__*/_jsx(PolymorphicElement, _extends({
+    as: as,
+    className: className,
+    tabIndex: tabIndex,
+    "aria-label": ariaLabel,
+    disabled: disabled,
+    readOnly: readOnly,
+    id: id,
+    name: name,
+    onChange: changeHandler,
+    onFocus: onFocus,
+    onPaste: onPaste,
+    onCopy: onCopy,
+    onBlur: onBlur,
+    onKeyDown: handleKeyDown,
+    onKeyPress: onKeyPress,
+    placeholder: placeholder,
+    ref: useMergeRefs.apply(void 0, [reference, forwardedRef].filter(Boolean)),
+    type: type,
+    value: value,
+    size: charsSize,
+    defaultValue: defaultValue,
+    maxLength: maxLength,
+    minLength: minLength,
+    max: max,
+    min: min,
+    step: step,
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
+    required: required,
+    pattern: pattern,
+    inputMode: inputMode,
+    children: as === 'input' ? undefined : children
+  }, props));
+});
+export default Input;
+export { SIZES as inputSizes, INPUT_STATES as inputStates };

package/lib/Input/Component/index.scss

@@ -0,0 +1,93 @@
+$base-class-input: '#{$base-class}-input';
+$class-read-only: '#{$base-class-input}--readOnly';
+
+#{$base-class-input} {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
+  @include sui-atom-input-input;
+  border-radius: $bdrs-atom-input;
+  min-height: auto;
+  text-overflow: $tov-atom-input-placeholder;
+  flex-grow: 1;
+  &--charsSize {
+    width: inherit;
+  }
+
+  &--hidden {
+    display: none;
+  }
+
+  &--readOnly {
+    background: $bgc-atom-input-read-only;
+    border: $bd-atom-input-read-only;
+    color: $c-atom-input-read-only;
+  }
+
+  @include atom-input-shape-wrapper(
+    $base-class,
+    $base-class-input,
+    $bdrs-atom-input-shapes,
+    $sizes-atom-input,
+    $bdrs-atom-input,
+    $h-atom-input--m
+  );
+
+  &#{$base-class-input}--noBorder,
+  &#{$base-class-input}--noBorder:disabled {
+    border: 0;
+    &:focus {
+      border: 0;
+      box-shadow: none;
+      outline: 0;
+    }
+  }
+
+  &::placeholder {
+    color: $c-atom-input-placeholder;
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    &:not(#{$class-read-only}) {
+      -webkit-text-fill-color: $c-atom-input-disabled;
+
+      background: $bgc-atom-input-disabled;
+      color: $c-atom-input-disabled;
+    }
+  }
+
+  &:focus {
+    //@include sui-atom-input-input-focus;
+    outline: none;
+  }
+
+  @each $type, $attr in $sizes-atom-input {
+    &-size-#{$type} {
+      height: $attr;
+      min-height: $attr;
+    }
+  }
+
+  @each $state, $color in $states-atom-input {
+    &.sui-AtomInput-input--state-#{$state} {
+      border-color: $color;
+
+      &:focus {
+        //box-shadow: $bxsh-atom-input-size $color;
+      }
+    }
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+  }
+}

package/lib/Input/Component/settings.scss

@@ -0,0 +1,30 @@
+$bgc-atom-input-disabled: $c-gray-lightest !default;
+$c-atom-input-placeholder: $c-gray-dark !default;
+$c-atom-input-disabled: $c-atom-input-placeholder !default;
+$bd-atom-input-disabled: $bd-atom-input-base !default;
+$m-atom-input-type-left: $m-m !default;
+$m-atom-input-type-right: $m-m !default;
+$bdrs-atom-input: $bdrs-m !default;
+$bdrs-atom-input-shapes: (
+  square: $bdrs-none,
+  rounded: $bdrs-m,
+  circle: 100dvh
+) !default;
+$tov-atom-input-placeholder: unset !default;
+$h-atom-input--xl: 7 * $sz-base !default; // 56px
+$h-atom-input--l: 6 * $sz-base !default; // 48px
+$h-atom-input--m: 5 * $sz-base !default; // 40px
+$h-atom-input--s: 4 * $sz-base !default; // 32px
+$h-atom-input--xs: 3 * $sz-base !default; // 24px
+
+$c-atom-input--success: $c-success !default;
+$c-atom-input--error: $c-error !default;
+$c-atom-input--alert: $c-alert !default;
+
+$sizes-atom-input: xl $h-atom-input--xl, l $h-atom-input--l, m $h-atom-input--m, xs $h-atom-input--xs,
+  s $h-atom-input--s !default;
+$states-atom-input: success $c-atom-input--success, error $c-atom-input--error, alert $c-atom-input--alert !default;
+
+$bgc-atom-input-read-only: $bgc-atom-input !default;
+$c-atom-input-read-only: $c-atom-input !default;
+$bd-atom-input-read-only: $bd-atom-input-base !default;

package/lib/Input/Wrappers/Addons/InputAddons.js

@@ -0,0 +1,32 @@
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { INPUT_SHAPES, SIZES } from '../../../config.js';
+import { ADDON_TYPES, BASE_CLASS_ADDON_WRAPPER, getClassName } from './config.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var InputAddon = function InputAddon(_ref) {
+  var leftAddon = _ref.leftAddon,
+    rightAddon = _ref.rightAddon,
+    shape = _ref.shape,
+    size = _ref.size,
+    children = _ref.children;
+  if (!(leftAddon || rightAddon)) {
+    return children;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(BASE_CLASS_ADDON_WRAPPER, shape && BASE_CLASS_ADDON_WRAPPER + "-shape-" + shape, size && BASE_CLASS_ADDON_WRAPPER + "-size-" + size),
+    children: [leftAddon && /*#__PURE__*/_jsx("span", {
+      className: getClassName({
+        type: ADDON_TYPES.LEFT,
+        shape: shape
+      }),
+      children: leftAddon
+    }), children, rightAddon && /*#__PURE__*/_jsx("span", {
+      className: getClassName({
+        type: ADDON_TYPES.RIGHT,
+        shape: shape
+      }),
+      children: rightAddon
+    })]
+  });
+};
+export default InputAddon;

package/lib/Input/Wrappers/Addons/config.js

@@ -0,0 +1,12 @@
+import cx from 'classnames';
+import { BASE } from '../../../config.js';
+export var BASE_CLASS_ADDON = BASE + "--withAddon";
+export var BASE_CLASS_ADDON_WRAPPER = BASE_CLASS_ADDON + "Wrapper";
+export var ADDON_TYPES = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+export var getClassName = function getClassName(_ref) {
+  var type = _ref.type;
+  return cx(BASE_CLASS_ADDON, BASE_CLASS_ADDON + "--" + type);
+};

package/lib/Input/Wrappers/Addons/index.scss

@@ -0,0 +1,35 @@
+#{$base-class}--withAddon {
+  align-items: center;
+  background-color: $bgc-atom-input-addon;
+  border-color: $bdc-atom-input-addon;
+  border-style: solid;
+  color: $c-atom-input-addon;
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+  justify-content: center;
+  line-height: inherit;
+  padding-left: $p-atom-input-addon-left;
+  padding-right: $p-atom-input-addon-right;
+
+  &--right {
+    border-width: $bdw-atom-input-addon-right;
+  }
+
+  &--left {
+    border-width: $bdw-atom-input-addon-left;
+  }
+
+  &Wrapper {
+    display: flex;
+    flex-grow: 1;
+    @include atom-input-shape-wrapper(
+      $base-class,
+      #{'.sui-AtomInput--withAddonWrapper'},
+      $bdrs-atom-input-shapes,
+      $sizes-atom-input,
+      $bdrs-atom-input,
+      $h-atom-input--m
+    );
+  }
+}

package/lib/Input/Wrappers/Addons/settings.scss

@@ -0,0 +1,7 @@
+$bdw-atom-input-addon-right: $bdw-s $bdw-s $bdw-s 0 !default;
+$bdw-atom-input-addon-left: $bdw-s 0 $bdw-s $bdw-s !default;
+$bgc-atom-input-addon: $c-gray-light-5 !default;
+$bdc-atom-input-addon: $c-gray-light !default;
+$c-atom-input-addon: $c-gray-light-1 !default;
+$p-atom-input-addon-left: $p-l !default;
+$p-atom-input-addon-right: $p-l !default;

package/lib/Input/Wrappers/Button/InputButton.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import { BASE_CLASS_BUTTON } from './config.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var InputButton = function InputButton(_ref) {
+  var button = _ref.button,
+    children = _ref.children;
+  if (button === undefined) {
+    return children;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: BASE_CLASS_BUTTON,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: BASE_CLASS_BUTTON + "-input",
+      children: children
+    }), /*#__PURE__*/_jsx("div", {
+      className: BASE_CLASS_BUTTON + "-button",
+      children: button
+    })]
+  });
+};
+export default InputButton;

package/lib/Input/Wrappers/Button/config.js

@@ -0,0 +1,2 @@
+import { BASE } from '../../../config.js';
+export var BASE_CLASS_BUTTON = BASE + "--withButton";

package/lib/Input/Wrappers/Button/index.scss

@@ -0,0 +1,13 @@
+#{$base-class}--withButton {
+  display: flex;
+  width: 100%;
+
+  &-input {
+    flex: 1;
+    width: 100%;
+  }
+
+  &-button {
+    margin-left: $m-m;
+  }
+}