glints-aries 4.1.6 → 4.1.8

package/lib/@next/TextInput/TextInput.d.ts

@@ -3,8 +3,20 @@ import { InputProps } from '../Input/Input';
 export declare type TextInputProps = Omit<InputProps, 'type' | 'onChange'> & {
     canClear?: boolean;
     onChange?: (value: string) => void;
+    height?: string;
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
 };
 export declare const TextInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange"> & {
     canClear?: boolean;
     onChange?: (value: string) => void;
+    height?: string;
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
 } & React.RefAttributes<HTMLInputElement>>;

package/lib/@next/TextInput/TextInput.js

@@ -8,7 +8,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = require("../Icon");
 var _Input = require("../Input/Input");
-var _excluded = ["canClear", "suffix", "value", "onChange", "error"];
+var _excluded = ["canClear", "suffix", "value", "onChange", "error", "height", "border", "borderRadius", "required", "floatingFontSize", "isPlaceholderFloating"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var TextInput = /*#__PURE__*/_react["default"].forwardRef(function TextInput(_ref, ref) {
@@ -17,6 +17,12 @@ var TextInput = /*#__PURE__*/_react["default"].forwardRef(function TextInput(_re
     value = _ref.value,
     onChange = _ref.onChange,
     error = _ref.error,
+    height = _ref.height,
+    border = _ref.border,
+    borderRadius = _ref.borderRadius,
+    required = _ref.required,
+    floatingFontSize = _ref.floatingFontSize,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var ClearIcon = function ClearIcon() {
     return /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
@@ -51,7 +57,13 @@ var TextInput = /*#__PURE__*/_react["default"].forwardRef(function TextInput(_re
     suffix: suffixValue,
     value: value,
     onChange: handleChange,
-    error: error
+    error: error,
+    border: border,
+    borderRadius: borderRadius,
+    floatingFontSize: floatingFontSize,
+    isPlaceholderFloating: isPlaceholderFloating,
+    required: required,
+    height: height
   }, props));
 });
 exports.TextInput = TextInput;

package/lib/@next/TextInput/TextInput.stories.d.ts

@@ -3,3 +3,4 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const WithPrefixAndSuffix: any;
+export declare const WithFloatingPlaceholderAndRequiredInput: any;

package/lib/Input/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, error, addon, ...restProps }: Props) => JSX.Element;
+export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, isDisableCallingCode, isPlaceholderFloating, isRequired, error, addon, ...restProps }: Props) => JSX.Element;
 export interface Props {
     value: PhoneNumber;
     onChange: (value: PhoneNumber) => void;
@@ -17,6 +17,9 @@ export interface Props {
     otherOptionsLabel: string;
     callingCodeFilterInputPlaceholder: string;
     callingCodeNoOptionsLabel: string;
+    isDisableCallingCode?: boolean;
+    isPlaceholderFloating?: boolean;
+    isRequired?: boolean;
 }
 export interface PhoneNumber {
     callingCode: number;

package/lib/Input/PhoneNumberInput/PhoneNumberInput.js

@@ -13,7 +13,8 @@ var _components = require("../../General/Icon/components");
 var _Flex = require("../../Layout/Flex");
 var _useOutsideAlerter = require("../../Utils/useOutsideAlerter");
 var S = _interopRequireWildcard(require("./PhoneNumberInputStyles"));
-var _excluded = ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "error", "addon"];
+var _InputStyle = require("../../@next/Input/InputStyle");
+var _excluded = ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "isDisableCallingCode", "isPlaceholderFloating", "isRequired", "error", "addon"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Downshift wants a ref to this, but we need one ourselves, and there is no way
@@ -37,6 +38,9 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
     otherOptionsLabel = _ref.otherOptionsLabel,
     callingCodeFilterInputPlaceholder = _ref.callingCodeFilterInputPlaceholder,
     callingCodeNoOptionsLabel = _ref.callingCodeNoOptionsLabel,
+    isDisableCallingCode = _ref.isDisableCallingCode,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    isRequired = _ref.isRequired,
     error = _ref.error,
     addon = _ref.addon,
     restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
@@ -88,15 +92,16 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
   (0, _useOutsideAlerter.useOutsideAlerter)(containerRef, closeCallingCodeInput);
   var _useId = (0, _reactIdGenerator.useId)(1, 'significant-number-input-'),
     significantNumberInputId = _useId[0];
+  var placeholder = isRequired ? label + "*" : label;
   return /*#__PURE__*/_react["default"].createElement(S.PhoneNumberInputContainer, (0, _extends2["default"])({
     ref: containerRef
   }, restProps), /*#__PURE__*/_react["default"].createElement(S.TopRow, {
     "data-invalid": Boolean(error)
   }, /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputToggle, (0, _extends2["default"])({}, getToggleButtonProps(), {
     type: "button",
-    onClick: toggleIsCallingCodeOpen,
+    onClick: isDisableCallingCode ? undefined : toggleIsCallingCodeOpen,
     "data-testid": "calling-code-input-toggle"
-  }), "+", value.callingCode, /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputOpenIndicator, null, isCallingCodeInputOpen ? /*#__PURE__*/_react["default"].createElement(_components.ArrowUpIcon, null) : /*#__PURE__*/_react["default"].createElement(_components.ArrowDownIcon, null))), /*#__PURE__*/_react["default"].createElement(S.SignificantNumberInput, {
+  }), "+", value.callingCode, /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputOpenIndicator, null, isDisableCallingCode ? /*#__PURE__*/_react["default"].createElement("span", null, "\xA0") : isCallingCodeInputOpen ? /*#__PURE__*/_react["default"].createElement(_components.ArrowUpIcon, null) : /*#__PURE__*/_react["default"].createElement(_components.ArrowDownIcon, null))), /*#__PURE__*/_react["default"].createElement(S.SignificantNumberInput, {
     id: significantNumberInputId,
     "data-testid": "significant-number-input",
     type: "tel",
@@ -108,12 +113,13 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
     },
     onFocus: onFocus,
     onBlur: onBlur,
-    placeholder: label,
+    placeholder: isPlaceholderFloating ? undefined : placeholder,
     "data-invalid": Boolean(error),
-    "aria-label": label
+    "aria-label": label,
+    isPlaceholderFloating: isPlaceholderFloating
   }), /*#__PURE__*/_react["default"].createElement(S.Label, {
     htmlFor: significantNumberInputId
-  }, label), /*#__PURE__*/_react["default"].createElement(S.TopRowAddon, {
+  }, label, isRequired && /*#__PURE__*/_react["default"].createElement(_InputStyle.AsteriskIcon, null)), /*#__PURE__*/_react["default"].createElement(S.TopRowAddon, {
     "data-testid": "addon"
   }, addon)), /*#__PURE__*/_react["default"].createElement(S.CallingCodeInput, (0, _extends2["default"])({
     isOpen: isCallingCodeInputOpen

package/lib/Input/PhoneNumberInput/PhoneNumberInput.stories.d.ts

@@ -6,3 +6,4 @@ export declare const WithError: any;
 export declare const NoCallingCodeOptions: any;
 export declare const Loading: any;
 export declare const WithAddon: any;
+export declare const DisableCallingCodeOptionsAndFloatingPlaceholder: any;

package/lib/Input/PhoneNumberInput/PhoneNumberInputStyles.d.ts

@@ -4,7 +4,9 @@ export declare const TopRow: import("styled-components").StyledComponent<"div",
 export declare const CallingCodeInputToggle: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const CallingCodeInputOpenIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const SignificantNumberInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const SignificantNumberInput: import("styled-components").StyledComponent<"input", any, {
+    isPlaceholderFloating?: boolean;
+}, never>;
 export declare const TopRowAddon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CallingCodeInput: import("styled-components").StyledComponent<"div", any, {
     isOpen: boolean;

package/lib/Input/PhoneNumberInput/PhoneNumberInputStyles.js

@@ -31,15 +31,18 @@ exports.CallingCodeInputOpenIndicator = CallingCodeInputOpenIndicator;
 var Label = _styledComponents["default"].label.withConfig({
   displayName: "PhoneNumberInputStyles__Label",
   componentId: "sc-80kraj-4"
-})(["position:absolute;left:0.5em;top:-0.5em;visibility:hidden;padding:0 0.3em;background:white;color:", ";"], _Colors.Greyscale.devilsgrey);
+})(["position:absolute;left:0.5em;top:-1.25em;visibility:hidden;padding:0 0.3em;background:white;color:", ";"], _Colors.Greyscale.devilsgrey);
 exports.Label = Label;
 var visibleLabel = (0, _styledComponents.css)(["+ ", "{visibility:visible;color:#646464;font-size:12px;}"], Label);
 var SignificantNumberInput = _styledComponents["default"].input.withConfig({
   displayName: "PhoneNumberInputStyles__SignificantNumberInput",
   componentId: "sc-80kraj-5"
-})(["border:none;width:100%;font-size:16px;padding:12px;&:focus{outline:2px solid ", ";::placeholder{color:transparent;}", "}", " &[data-invalid='true']:focus{outline:2px solid ", ";}"], _Colors.SecondaryColor.actionblue, visibleLabel, function (_ref) {
+})(["border:none;width:100%;font-size:16px;padding:12px;&:focus{outline:2px solid ", ";::placeholder{color:transparent;}", "}", " ", " &[data-invalid='true']:focus{outline:2px solid ", ";}"], _Colors.SecondaryColor.actionblue, visibleLabel, function (_ref) {
   var value = _ref.value;
   return value && visibleLabel;
+}, function (_ref2) {
+  var isPlaceholderFloating = _ref2.isPlaceholderFloating;
+  return isPlaceholderFloating && visibleLabel;
 }, _Colors.PrimaryColor.glintsred);
 exports.SignificantNumberInput = SignificantNumberInput;
 var TopRowAddon = _styledComponents["default"].div.withConfig({
@@ -50,8 +53,8 @@ exports.TopRowAddon = TopRowAddon;
 var CallingCodeInput = _styledComponents["default"].div.withConfig({
   displayName: "PhoneNumberInputStyles__CallingCodeInput",
   componentId: "sc-80kraj-7"
-})(["position:absolute;display:none;z-index:2;background:white;margin-top:4px;width:100%;border:1px solid ", ";box-shadow:", ";", ""], _Colors.Greyscale.lightgrey, _Shadow.Shadow.down1, function (_ref2) {
-  var isOpen = _ref2.isOpen;
+})(["position:absolute;display:none;z-index:2;background:white;margin-top:4px;width:100%;border:1px solid ", ";box-shadow:", ";", ""], _Colors.Greyscale.lightgrey, _Shadow.Shadow.down1, function (_ref3) {
+  var isOpen = _ref3.isOpen;
   return isOpen && (0, _styledComponents.css)(["display:initial;"]);
 });
 exports.CallingCodeInput = CallingCodeInput;
@@ -76,8 +79,8 @@ var CallingCodeOptionsList = _styledComponents["default"].ol.withConfig({
   componentId: "sc-80kraj-11"
 })(["list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;font-size:16px;"]);
 exports.CallingCodeOptionsList = CallingCodeOptionsList;
-var getGroupHeaderStyles = function getGroupHeaderStyles(_ref3) {
-  var withGroupHeader = _ref3.withGroupHeader;
+var getGroupHeaderStyles = function getGroupHeaderStyles(_ref4) {
+  var withGroupHeader = _ref4.withGroupHeader;
   return withGroupHeader && (0, _styledComponents.css)(["content:'", "';display:block;padding:4px 8px;color:", ";font-size:8px;border-bottom:1px solid ", ";text-transform:uppercase;background:white;cursor:default;"], withGroupHeader, _Colors.Greyscale.devilsgrey, _Colors.Greyscale.softgrey);
 };
 var CallingCodeOption = _styledComponents["default"].li.withConfig({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.1.6",
+  "version": "4.1.8",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",