glints-aries 4.1.3 → 4.1.4

package/es/Input/PhoneNumberInput/PhoneNumberInputStyles.js

@@ -0,0 +1,88 @@
+import styled, { css } from 'styled-components';
+import { Greyscale, PrimaryColor, SecondaryColor } from '../../Utils/Colors';
+import { Shadow } from '../../Utils/Shadow';
+import { Loading } from '../../General/Loading';
+export var PhoneNumberInputContainer = styled.div.withConfig({
+  displayName: "PhoneNumberInputStyles__PhoneNumberInputContainer",
+  componentId: "sc-80kraj-0"
+})(["position:relative;"]);
+export var TopRow = styled.div.withConfig({
+  displayName: "PhoneNumberInputStyles__TopRow",
+  componentId: "sc-80kraj-1"
+})(["display:flex;border:2px solid ", ";align-items:center;&:hover{border:2px solid ", ";}&[data-invalid='true']{border:2px solid ", ";}"], Greyscale.lightgrey, SecondaryColor.actionblue, PrimaryColor.glintsred);
+export var CallingCodeInputToggle = styled.button.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeInputToggle",
+  componentId: "sc-80kraj-2"
+})(["border:none;background:none;padding:12px;padding-right:0;cursor:text;font-size:16px;display:flex;align-items:bottom;"]);
+export var CallingCodeInputOpenIndicator = styled.span.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeInputOpenIndicator",
+  componentId: "sc-80kraj-3"
+})(["margin-left:8px;padding-right:8px;border-right:1px solid ", ";cursor:pointer;svg{margin-top:-2px;}"], Greyscale.lightgrey);
+export var Label = styled.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:", ";"], Greyscale.devilsgrey);
+var visibleLabel = css(["+ ", "{visibility:visible;color:#646464;font-size:12px;}"], Label);
+export var SignificantNumberInput = styled.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 ", ";}"], SecondaryColor.actionblue, visibleLabel, function (_ref) {
+  var value = _ref.value;
+  return value && visibleLabel;
+}, PrimaryColor.glintsred);
+export var TopRowAddon = styled.div.withConfig({
+  displayName: "PhoneNumberInputStyles__TopRowAddon",
+  componentId: "sc-80kraj-6"
+})(["position:absolute;right:8px;top:50%;transform:translateY(-50%);"]);
+export var CallingCodeInput = styled.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:", ";", ""], Greyscale.lightgrey, Shadow.down1, function (_ref2) {
+  var isOpen = _ref2.isOpen;
+  return isOpen && css(["display:initial;"]);
+});
+var CALLING_CODE_INPUT_MARGIN = '8px';
+export var CallingCodeFilterInputGroup = styled.div.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeFilterInputGroup",
+  componentId: "sc-80kraj-8"
+})(["position:relative;width:90%;width:calc(100% - 2 * ", ");margin:", ";"], CALLING_CODE_INPUT_MARGIN, CALLING_CODE_INPUT_MARGIN);
+export var CallingCodeFilterInput = styled.input.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeFilterInput",
+  componentId: "sc-80kraj-9"
+})(["width:100%;border:2px solid ", ";padding:12px;font-size:14px;box-sizing:border-box;&:focus{border:2px solid ", ";outline:none;}"], Greyscale.lightgrey, SecondaryColor.actionblue);
+export var CallingCodeInputLoading = styled(Loading).withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeInputLoading",
+  componentId: "sc-80kraj-10"
+})(["position:absolute;right:8px;top:50%;transform:translateY(-50%);"]);
+export var CallingCodeOptionsList = styled.ol.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeOptionsList",
+  componentId: "sc-80kraj-11"
+})(["list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;font-size:16px;"]);
+var getGroupHeaderStyles = function getGroupHeaderStyles(_ref3) {
+  var withGroupHeader = _ref3.withGroupHeader;
+  return withGroupHeader && css(["content:'", "';display:block;padding:4px 8px;color:", ";font-size:8px;border-bottom:1px solid ", ";text-transform:uppercase;background:white;cursor:default;"], withGroupHeader, Greyscale.devilsgrey, Greyscale.softgrey);
+};
+export var CallingCodeOption = styled.li.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeOption",
+  componentId: "sc-80kraj-12"
+})(["cursor:pointer;&:hover{color:", ";background:", ";}&[aria-selected='true']{color:", ";background:", ";}::before{", "}"], SecondaryColor.actionblue, Greyscale.softgrey, SecondaryColor.actionblue, Greyscale.softgrey, getGroupHeaderStyles);
+export var CallingCodeOptionCallingCode = styled.div.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeOptionCallingCode",
+  componentId: "sc-80kraj-13"
+})(["min-width:48px;margin-right:8px;padding:8px;padding-right:0;"]);
+export var CallingCodeOptionLabel = styled.div.withConfig({
+  displayName: "PhoneNumberInputStyles__CallingCodeOptionLabel",
+  componentId: "sc-80kraj-14"
+})(["width:100%;padding:8px;padding-left:0;color:", ";&:hover{color:inherit;}"], Greyscale.devilsgrey);
+export var GroupHeader = styled.div.withConfig({
+  displayName: "PhoneNumberInputStyles__GroupHeader",
+  componentId: "sc-80kraj-15"
+})(["padding:4px 8px;color:", ";font-size:8px;border-bottom:1px solid ", ";text-transform:uppercase;"], Greyscale.devilsgrey, Greyscale.softgrey);
+export var NoOptions = styled.div.withConfig({
+  displayName: "PhoneNumberInputStyles__NoOptions",
+  componentId: "sc-80kraj-16"
+})(["padding:24px 8px;text-align:center;color:", ";font-size:14px;"], Greyscale.devilsgrey);
+export var Error = styled.div.withConfig({
+  displayName: "PhoneNumberInputStyles__Error",
+  componentId: "sc-80kraj-17"
+})(["margin-top:8px;color:", ";"], PrimaryColor.glintsred);

package/es/Input/RadioButton/RadioButton.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+/** The className will be passed to
+ * the main radio button container. ...inputProps is passed to the
+ * input tag. */
+export declare const RadioButton: React.FunctionComponent<Props>;
+declare type HTMLInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'label'>;
+export interface Props extends HTMLInputProps {
+    /** Displays the error styles */
+    error?: boolean;
+    /** Sets the label of Radio Button. */
+    label?: React.ReactNode;
+    /** Sets the props on the label element. */
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
+    /** Sets theme for Radio Button. */
+    theme?: 'white';
+    /** Sets a border around the radio button. */
+    border?: boolean;
+    /** Sets the radio button to disable state. */
+    disabled?: boolean;
+    /** Sets the size of the radio button. */
+    size?: 'regular' | 'small';
+}
+export default RadioButton;

package/es/Input/RadioButton/RadioButton.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "children", "error", "label", "labelProps", "theme", "border", "disabled", "size"];
+import * as React from 'react';
+import classNames from 'classnames';
+import { RadioContainer, RadioLabel, RadioIcon, Border } from './RadioButtonStyle';
+
+/** The className will be passed to
+ * the main radio button container. ...inputProps is passed to the
+ * input tag. */
+export var RadioButton = function RadioButton(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    label = _ref.label,
+    labelProps = _ref.labelProps,
+    theme = _ref.theme,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? false : _ref$border,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'regular' : _ref$size,
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioIcon, {
+    error: error,
+    theme: theme,
+    border: border,
+    size: size,
+    disabled: disabled,
+    "data-testid": "radio-icon"
+  }), /*#__PURE__*/React.createElement(RadioLabel, {
+    className: "radiobtn-content",
+    error: error,
+    theme: theme,
+    tabIndex: -1,
+    border: border,
+    size: size,
+    disabled: disabled
+  }, label || children));
+  return /*#__PURE__*/React.createElement(RadioContainer, _extends({
+    className: classNames('aries-radiobtn', className),
+    error: error,
+    tabIndex: 0,
+    theme: theme,
+    border: border,
+    disabled: disabled
+  }, labelProps), /*#__PURE__*/React.createElement("input", _extends({
+    type: "radio",
+    disabled: disabled
+  }, inputProps)), border ? /*#__PURE__*/React.createElement(Border, {
+    error: error,
+    disabled: disabled,
+    "data-testid": "radio-border"
+  }, content) : content);
+};
+export default RadioButton;

package/es/Input/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const RadioButtonWithError: any;
+export declare const RadioButtonWithBorder: any;
+export declare const DisabledRadioButton: any;
+export declare const SmallRadioButton: any;

package/es/Input/RadioButton/RadioButton.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/es/Input/RadioButton/RadioButtonStyle.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    error?: boolean;
+    theme?: string;
+    border?: boolean;
+    disabled?: boolean;
+    size?: 'regular' | 'small';
+}
+export declare const RadioIcon: import("styled-components").StyledComponent<"span", any, Props, never>;
+export declare const RadioLabel: import("styled-components").StyledComponent<"span", any, Props, never>;
+export declare const Border: import("styled-components").StyledComponent<"span", any, Props, never>;
+export declare const RadioContainer: import("styled-components").StyledComponent<"label", any, Props, never>;
+export {};

package/es/Input/RadioButton/RadioButtonStyle.js

@@ -0,0 +1,95 @@
+import styled, { css } from 'styled-components';
+import { PrimaryColor, SecondaryColor, Greyscale } from '../../Utils/Colors';
+var getStateColor = function getStateColor(_ref, checked) {
+  var disabled = _ref.disabled,
+    error = _ref.error,
+    border = _ref.border,
+    theme = _ref.theme;
+  if (disabled) {
+    return Greyscale.lightgrey;
+  } else if (error) {
+    return PrimaryColor.glintsred;
+  } else if (theme === 'white') {
+    return Greyscale.white;
+  } else if (!checked) {
+    return Greyscale.grey;
+  } else if (border) {
+    return SecondaryColor.actionblue;
+  } else {
+    return SecondaryColor.darkgreen;
+  }
+};
+var showSolidCircleStyle = css(["&:after{opacity:1;transform:scale(1,1);}"]);
+export var RadioIcon = styled.span.withConfig({
+  displayName: "RadioButtonStyle__RadioIcon",
+  componentId: "sc-1dmv219-0"
+})(["display:inline-flex;align-items:center;justify-content:center;height:", ";width:", ";margin-right:10px;border-radius:50%;border-style:solid;border-width:2px;border-color:", ";&:after{content:'';display:inline-block;height:", ";width:", ";border-radius:50%;opacity:0;transform:scale(0,0);transition:all 0.2s cubic-bezier(0.64,0.57,0.67,1.53);background-color:", ";}"], function (_ref2) {
+  var size = _ref2.size;
+  return size === 'regular' ? '18px' : '15px';
+}, function (_ref3) {
+  var size = _ref3.size;
+  return size === 'regular' ? '18px' : '15px';
+}, function (props) {
+  return getStateColor(props, false);
+}, function (_ref4) {
+  var size = _ref4.size;
+  return size === 'regular' ? '8px' : '7px';
+}, function (_ref5) {
+  var size = _ref5.size;
+  return size === 'regular' ? '8px' : '7px';
+}, function (props) {
+  return getStateColor(props, true);
+});
+export var RadioLabel = styled.span.withConfig({
+  displayName: "RadioButtonStyle__RadioLabel",
+  componentId: "sc-1dmv219-1"
+})(["font-size:", ";outline:none;color:", ";"], function (_ref6) {
+  var size = _ref6.size;
+  return size === 'regular' ? '16px' : '14px';
+}, function (_ref7) {
+  var disabled = _ref7.disabled,
+    theme = _ref7.theme;
+  if (disabled) {
+    return Greyscale.lightgrey;
+  } else if (theme === 'white') {
+    return Greyscale.white;
+  } else {
+    return Greyscale.black;
+  }
+});
+export var Border = styled.span.withConfig({
+  displayName: "RadioButtonStyle__Border",
+  componentId: "sc-1dmv219-2"
+})(["display:flex;align-items:center;padding:15px 10px;border-style:solid;border-width:1px;border-radius:2px;border-color:", ";", ";"], function (_ref8) {
+  var disabled = _ref8.disabled;
+  return disabled ? Greyscale.lightgrey : '#aaa';
+}, function (_ref9) {
+  var disabled = _ref9.disabled,
+    error = _ref9.error;
+  if (disabled) {
+    return null;
+  } else if (error) {
+    return css(["background-color:rgba(236,39,43,0.1);border-color:", ";", "{border-color:", ";}"], PrimaryColor.glintsred, RadioIcon, Greyscale.grey);
+  }
+  return css(["&:hover{background-color:rgba(1,126,183,0.1);border-color:", ";}"], SecondaryColor.actionblue);
+});
+export var RadioContainer = styled.label.withConfig({
+  displayName: "RadioButtonStyle__RadioContainer",
+  componentId: "sc-1dmv219-3"
+})(["position:relative;display:inline-flex;align-items:center;cursor:", ";user-select:none;text-align:left;input{display:none;&:checked + ", "{", " border-color:", ";}&:checked + ", "{background-color:transparent;border-color:", ";", "{", " border-color:", ";}}}&:focus{outline:none;}", ""], function (_ref10) {
+  var disabled = _ref10.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, RadioIcon, showSolidCircleStyle, function (props) {
+  return getStateColor(props, true);
+}, Border, function (props) {
+  return getStateColor(props, true);
+}, RadioIcon, showSolidCircleStyle, function (props) {
+  return getStateColor(props, true);
+}, function (_ref11) {
+  var disabled = _ref11.disabled,
+    error = _ref11.error,
+    border = _ref11.border;
+  if (!disabled && !error && !border) {
+    return css(["&:hover{", "{border-color:", ";}}"], RadioIcon, SecondaryColor.darkgreen);
+  }
+});

package/es/Input/RadioButton/index.d.ts

@@ -0,0 +1,3 @@
+import RadioButton from './RadioButton';
+export { RadioButton };
+export default RadioButton;

package/es/Input/RadioButton/index.js

@@ -0,0 +1,3 @@
+import RadioButton from './RadioButton';
+export { RadioButton };
+export default RadioButton;

package/es/Input/SearchFilter/SearchFilterStyle.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const SearchFilterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchFilterBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchFilterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../General/Button/Button").Props & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const SearchFilterBodyWrapper: import("styled-components").StyledComponent<"div", any, SearchFilterBodyWrapperProps, never>;
+interface SearchFilterBodyWrapperProps {
+    open?: boolean;
+}
+export declare const SearchFilterResultContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchFilterListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchFilterItemWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
+export {};

package/es/Input/SearchFilter/SearchFilterStyle.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import Button from '../../General/Button';
+import { ScreenSize } from '../../Utils/StyleConfig';
+import { Greyscale, SecondaryColor } from '../../Utils/Colors';
+export var SearchFilterContainer = styled.div.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterContainer",
+  componentId: "sc-18veyec-0"
+})(["position:relative;"]);
+export var SearchFilterBar = styled.div.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterBar",
+  componentId: "sc-18veyec-1"
+})(["display:flex;align-items:center;position:relative;input{padding:25px 6em 25px 30px;background:", ";border:3px solid ", ";font-size:1.4em;line-height:1.5;color:", ";width:100%;@media (max-width:", "px){padding:1em 5em 1em 1em;font-size:1em;}&:focus{outline:none;}&:hover,&:focus{border:3px solid ", ";}}"], Greyscale.white, Greyscale.grey, Greyscale.grey, ScreenSize.mobileL, SecondaryColor.actionblue);
+export var SearchFilterButton = styled(Button).withConfig({
+  displayName: "SearchFilterStyle__SearchFilterButton",
+  componentId: "sc-18veyec-2"
+})(["position:absolute;right:0;top:0;font-size:1.5em;height:100%;button{@media (max-width:", "px){padding:15px 20px;}}"], ScreenSize.mobileL);
+export var SearchFilterBodyWrapper = styled.div.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterBodyWrapper",
+  componentId: "sc-18veyec-3"
+})(["position:relative;display:", ";z-index:9999;"], function (_ref) {
+  var open = _ref.open;
+  return open ? 'block' : 'none';
+});
+export var SearchFilterResultContainer = styled.div.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterResultContainer",
+  componentId: "sc-18veyec-4"
+})(["position:absolute;width:100%;display:grid;font-size:1.1em;grid-template-columns:repeat(3,1fr);padding:25px 30px;background:", ";border:1px solid ", ";@media (max-width:", "px){grid-template-columns:auto;grid-gap:2em;}"], Greyscale.white, Greyscale.lightgrey, ScreenSize.mobileL);
+export var SearchFilterListWrapper = styled.div.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterListWrapper",
+  componentId: "sc-18veyec-5"
+})(["position:relative;label{color:", ";text-transform:uppercase;font-weight:600;letter-spacing:0.3px;}ul{padding:0;margin:0;li{display:flex;align-items:center;margin-bottom:0.6em;cursor:pointer;list-style-type:none;&:first-child{margin-top:0.5em;}&:last-child{margin-bottom:0;}svg,img{margin-right:1em;}img{object-fit:cover;border-radius:50%;}}}"], Greyscale.grey);
+export var SearchFilterItemWrapper = styled.li.withConfig({
+  displayName: "SearchFilterStyle__SearchFilterItemWrapper",
+  componentId: "sc-18veyec-6"
+})(["position:relative;"]);

package/es/Input/Select/Select.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { SelectItemProps } from './SelectList';
+import { SelectInput } from './SelectStyle';
+declare const Select: React.FC<Props> & {
+    Option: React.FC<SelectItemProps>;
+};
+export interface SelectInputProps {
+    /** Disable typing on Select input, so the option can't be searched. */
+    disableTyping?: boolean;
+    /** Sets Select to be smaller. */
+    small?: boolean;
+    /** Deprecated! */
+    status?: string;
+}
+export declare type Props = React.ComponentPropsWithoutRef<typeof SelectInput> & SelectInputProps & {
+    children: React.ReactNode;
+    /** Sets value for Input. */
+    value?: string;
+    /** Sets default value for Input. */
+    defaultValue?: string;
+    /** Disable the Text Field. */
+    disabled?: boolean;
+    /** To disable browser auto complete, pass "nope" or anything other than "off". */
+    autoComplete?: string;
+    /** Shows loading spinner in menu. */
+    isLoading?: boolean;
+    /** Sets placeholder value for the Text Field. */
+    label?: string;
+    /** Sets message to display when no option matches, set it to null when the message is not needed. */
+    noOptionResult?: string;
+    /** Removes drop icon. */
+    removeDropIcon?: boolean;
+    /** Removes floating effect for placeholder. */
+    removeFloatingLabel?: boolean;
+    /** Pass true to display error state without error message */
+    error?: React.ReactNode | string | boolean;
+    /** Deprecated! */
+    renderError?: (error: React.ReactNode | string | boolean) => React.ReactNode;
+    /** Sets initial open state of Select. */
+    defaultOpen?: boolean;
+    /** A custom function to filter options by when typing into Select. By default, it filters options by input with case insensitive. However, if the input value is case sensitive same as one of options, then filterFunction will be ignored.  */
+    filterFunction?: (option: string, search: string) => boolean;
+    onFocus?(e: React.FocusEvent<HTMLInputElement>): void;
+    onBlur?(e: React.FocusEvent<HTMLInputElement>): void;
+    /** Called when select an option or value of input is changed. WARNING: firing on value of input is changed will be deprecated, please use onInputChange instead */
+    onChange?(value: string): void;
+    /** Called when value of input is changed. */
+    onInputChange?(event: React.ChangeEvent<HTMLInputElement>): void;
+};
+export declare const Option: React.FC<SelectItemProps>;
+export default Select;

package/es/Input/Select/Select.disableTyping.test.d.ts

@@ -0,0 +1,2 @@
+import 'jest-styled-components';
+import '@testing-library/jest-dom/extend-expect';