glints-aries 4.1.3 → 4.1.5

package/lib/General/Typography/Title.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export declare const Title: React.FunctionComponent<Props>;
+export declare type tagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface Props {
+    className?: string;
+    children: React.ReactNode;
+    /** Sets the Title's color */
+    color?: string;
+    /** Display ellipsis when the title overflows */
+    ellipsis?: boolean;
+    /** Sets the title tag to one of the heading tags */
+    tag?: tagType;
+    /** Makes the title in all upper case */
+    uppercase?: boolean;
+}
+export default Title;

package/lib/General/Typography/Title.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.Title = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _TitleStyles = require("./TitleStyles");
+var _Colors = require("../../Utils/Colors");
+var _excluded = ["className", "children", "color", "ellipsis", "tag", "uppercase"];
+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 Title = function Title(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? _Colors.Greyscale.black : _ref$color,
+    _ref$ellipsis = _ref.ellipsis,
+    ellipsis = _ref$ellipsis === void 0 ? false : _ref$ellipsis,
+    _ref$tag = _ref.tag,
+    tag = _ref$tag === void 0 ? 'h1' : _ref$tag,
+    _ref$uppercase = _ref.uppercase,
+    uppercase = _ref$uppercase === void 0 ? false : _ref$uppercase,
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_TitleStyles.Title, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('aries-typography-title', className),
+    as: tag,
+    color: color,
+    ellipsis: ellipsis,
+    uppercase: uppercase
+  }, restProps), children);
+};
+exports.Title = Title;
+var _default = Title;
+exports["default"] = _default;

package/lib/General/Typography/Title.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 Color: any;
+export declare const Ellipsis: any;
+export declare const Tag: any;
+export declare const Uppercase: any;

package/lib/General/Typography/Title.test.d.ts

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

package/lib/General/Typography/TitleStyles.d.ts

@@ -0,0 +1,20 @@
+import { tagType } from './Title';
+export declare const TITLE_VARIANTS: {
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+};
+export declare const TITLE_FONT_SIZES: {
+    [x: string]: number;
+};
+interface TitleProps {
+    as: tagType;
+    color?: string;
+    ellipsis?: boolean;
+    uppercase?: boolean;
+}
+export declare const Title: import("styled-components").StyledComponent<"h1", any, TitleProps, never>;
+export {};

package/lib/General/Typography/TitleStyles.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Title = exports.TITLE_VARIANTS = exports.TITLE_FONT_SIZES = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TITLE_FONT_SIZES;
+var TITLE_VARIANTS = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6'
+};
+exports.TITLE_VARIANTS = TITLE_VARIANTS;
+var TITLE_FONT_SIZES = (_TITLE_FONT_SIZES = {}, _TITLE_FONT_SIZES[TITLE_VARIANTS.h1] = 50, _TITLE_FONT_SIZES[TITLE_VARIANTS.h2] = 36, _TITLE_FONT_SIZES[TITLE_VARIANTS.h3] = 30, _TITLE_FONT_SIZES[TITLE_VARIANTS.h4] = 26, _TITLE_FONT_SIZES[TITLE_VARIANTS.h5] = 22, _TITLE_FONT_SIZES[TITLE_VARIANTS.h6] = 18, _TITLE_FONT_SIZES);
+exports.TITLE_FONT_SIZES = TITLE_FONT_SIZES;
+var Title = _styledComponents["default"].h1.withConfig({
+  displayName: "TitleStyles__Title",
+  componentId: "sc-6snwzj-0"
+})(["margin:0;font-weight:bold;font-stretch:normal;font-style:normal;letter-spacing:normal;color:", ";text-transform:", ";", ";", ""], function (props) {
+  return props.color;
+}, function (props) {
+  if (props.uppercase) return 'uppercase';
+}, function (props) {
+  switch (props.as) {
+    case TITLE_VARIANTS.h1:
+      return "\n        font-size: " + TITLE_FONT_SIZES.h1 + "px;\n        font-weight: 900;\n        line-height: " + (props.uppercase ? '60px' : '70px') + ";\n      ";
+    case TITLE_VARIANTS.h2:
+      return "\n        font-size: " + TITLE_FONT_SIZES.h2 + "px;\n        line-height: line-height: " + (props.uppercase ? '43.2px' : '50.4px') + ";\n      ";
+    case TITLE_VARIANTS.h3:
+      return "\n        font-size: " + TITLE_FONT_SIZES.h3 + "px;\n        line-height: line-height: " + (props.uppercase ? '36px' : '42px') + ";\n      ";
+    case TITLE_VARIANTS.h4:
+      return "\n        font-size: " + TITLE_FONT_SIZES.h4 + "px;\n        line-height: 36.4px;\n      ";
+    case TITLE_VARIANTS.h5:
+      return "\n        font-size: " + TITLE_FONT_SIZES.h5 + "px;\n        line-height: 28px;\n      ";
+    case TITLE_VARIANTS.h6:
+      return "\n        font-size: " + TITLE_FONT_SIZES.h6 + "px;\n        line-height: 25.2px;\n      ";
+    default:
+      return "\n        font-size: " + TITLE_FONT_SIZES.h1 + "px;\n        font-weight: 900;\n        line-height: " + (props.uppercase ? '60px' : '70px') + ";\n    ";
+  }
+}, function (props) {
+  if (props.ellipsis) {
+    return "\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      ";
+  }
+});
+exports.Title = Title;

package/lib/General/Typography/Typography.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Title from './Title';
+import Paragraph from './Paragraph';
+declare const Typography: Typography;
+declare type Typography = React.FunctionComponent<Props> & {
+    Title: typeof Title;
+    Paragraph: typeof Paragraph;
+};
+interface Props {
+    children: React.ReactNode;
+}
+export default Typography;

package/lib/General/Typography/Typography.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Title = _interopRequireDefault(require("./Title"));
+var _Paragraph = _interopRequireDefault(require("./Paragraph"));
+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 Typography = function Typography(props) {
+  var children = props.children;
+  return /*#__PURE__*/React.createElement("article", null, children);
+};
+Typography.Title = _Title["default"];
+Typography.Paragraph = _Paragraph["default"];
+var _default = Typography;
+exports["default"] = _default;

package/lib/General/Typography/Typography.test.d.ts

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

package/lib/General/Typography/index.d.ts

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

package/lib/General/Typography/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _Typography = _interopRequireDefault(require("./Typography"));
+exports.Typography = _Typography["default"];
+var _default = _Typography["default"];
+exports["default"] = _default;

package/lib/Input/Checkbox/Checkbox.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export declare type CheckedState = 'false' | 'true' | 'mixed';
+export declare const Checkbox: React.FunctionComponent<CheckboxProps>;
+declare type HTMLInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'label'>;
+export interface CheckboxProps extends HTMLInputProps {
+    /** REQUIRED */
+    id?: string;
+    label?: React.ReactNode;
+    size?: 'large' | 'small';
+    border?: boolean;
+    /** REQUIRED */
+    value?: string;
+    /** If given, the Checkbox will be treated as controlled. Use with onClick. */
+    checked?: boolean;
+    /** If true, overrides 'checked' and puts the checkbox in mixed state */
+    indeterminate?: boolean;
+    /** Called when the checkbox changed (uncontrolled) or should change (controlled). */
+    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+}
+export default Checkbox;

package/lib/Input/Checkbox/Checkbox.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.Checkbox = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = require("lodash");
+var _CheckboxStyle = require("./CheckboxStyle");
+var _excluded = ["id", "label", "value", "onClick", "size", "border", "indeterminate", "className", "checked"];
+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 getCheckedState = function getCheckedState(internalChecked, externalChecked, externalIndeterminate) {
+  if (externalIndeterminate) return 'mixed';
+  if (!(0, _lodash.isUndefined)(externalChecked)) {
+    return externalChecked ? 'true' : 'false';
+  }
+  return internalChecked ? 'true' : 'false';
+};
+var Checkbox = function Checkbox(_ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    value = _ref.value,
+    onClick = _ref.onClick,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? false : _ref$border,
+    _ref$indeterminate = _ref.indeterminate,
+    indeterminate = _ref$indeterminate === void 0 ? undefined : _ref$indeterminate,
+    className = _ref.className,
+    checked = _ref.checked,
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _React$useState = React.useState(false),
+    internalChecked = _React$useState[0],
+    setInternalChecked = _React$useState[1];
+  var handleClick = function handleClick(e) {
+    setInternalChecked(function (internalChecked) {
+      return !internalChecked;
+    });
+    if (onClick !== undefined) {
+      return onClick(e);
+    }
+  };
+  var combinedChecked = getCheckedState(internalChecked, checked, indeterminate);
+  return /*#__PURE__*/React.createElement(_CheckboxStyle.CheckboxContainer, {
+    className: (0, _classnames["default"])('aries-checkbox', className),
+    role: "checkbox",
+    "aria-labelledby": id,
+    "aria-checked": combinedChecked,
+    "data-border": border ? 'true' : 'false',
+    tabIndex: 0,
+    size: size
+  }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    type: "checkbox",
+    id: id,
+    value: value,
+    onClick: handleClick,
+    checked: combinedChecked !== 'false'
+  }, restProps)), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    tabIndex: -1
+  }, label || value));
+};
+exports.Checkbox = Checkbox;
+var _default = Checkbox;
+exports["default"] = _default;

package/lib/Input/Checkbox/Checkbox.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 Bordered: any;
+export declare const Sizes: any;
+export declare const Indeterminate: any;
+export declare const FontSize: any;

package/lib/Input/Checkbox/Checkbox.test.d.ts

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

package/lib/Input/Checkbox/CheckboxStyle.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxProps } from './Checkbox';
+export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", any, CheckboxProps, never>;

package/lib/Input/Checkbox/CheckboxStyle.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CheckboxContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Colors = require("../../Utils/Colors");
+var CheckboxContainer = _styledComponents["default"].div.withConfig({
+  displayName: "CheckboxStyle__CheckboxContainer",
+  componentId: "sc-c3ckvs-0"
+})(["position:relative;display:inline-flex;font-size:", ";line-height:1.5;&:focus{outline:none;}input{padding:0;height:initial;width:initial;margin-bottom:0;display:none;cursor:pointer;}label:before{content:'';appearance:none;background-color:transparent;border:1px solid ", ";display:inline-block;position:relative;vertical-align:middle;cursor:pointer;margin-right:10px;border-radius:4px;width:1.29em;height:1.29em;box-sizing:border-box;}&[aria-checked='true'] label:before{border-color:transparent;}&[aria-checked='true'][data-border='true'] label:before{background:", ";}&[aria-checked='true'][data-border='false'] label:before{background:", ";}&[aria-checked='mixed'] label:before{background:", ";}label{position:relative;display:flex;align-items:center;line-height:1;cursor:pointer;outline:none;}&[aria-checked='true'] label{border-color:", ";}&[data-border='true'] label{border:1px solid #aaaaaa;cursor:pointer;border-radius:8px;padding:0.57em 0.86em;&:hover{background:rgba(1,126,183,0.1);border-color:", ";}}&[aria-checked='true'] label:after,&[aria-checked='mixed'] label:after{content:'';display:block;position:absolute;border:solid ", ";}&[aria-checked='true'] label:after{top:0.13em;left:0.45em;width:0.43em;height:0.86em;border-width:0 0.143em 0.143em 0;transform:rotate(45deg);}&[aria-checked='mixed'] label:after{top:0.55em;left:0.45em;width:0.43em;border-width:0.143em 0 0 0;}&[aria-checked='true'][data-border='true'] label:after,&[aria-checked='mixed'][data-border='true'] label:after{margin-top:0.61em;margin-left:0.89em;}"], function (_ref) {
+  var size = _ref.size;
+  return size === 'small' ? '14px' : '16px';
+}, _Colors.Greyscale.grey, _Colors.SecondaryColor.actionblue, _Colors.SecondaryColor.darkgreen, _Colors.Greyscale.devilsgrey, _Colors.SecondaryColor.actionblue, _Colors.SecondaryColor.actionblue, _Colors.Greyscale.white);
+exports.CheckboxContainer = CheckboxContainer;

package/lib/Input/Checkbox/index.d.ts

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

package/lib/Input/Checkbox/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+exports.Checkbox = _Checkbox["default"];
+var _default = _Checkbox["default"];
+exports["default"] = _default;

package/lib/Input/Datepicker/Datepicker.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+declare class Datepicker extends React.Component<Props, State> {
+    constructor(props: Props);
+    handleOnFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleOnInputBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleOnDateBlur: (e: React.FocusEvent<HTMLDivElement>) => void;
+    handleMouseDownDate: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    handleClickToday: () => void;
+    handleOnClickSelectedDate: (date: number) => void;
+    handleShowMonths: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    handleChooseMonth: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, month: string, tempMonth: string[]) => void;
+    static getDerivedStateFromProps(nextProps: Props, prevState: State): {
+        isOpen: boolean;
+        previousFullDate?: undefined;
+    } | {
+        previousFullDate: string;
+        isOpen?: undefined;
+    };
+    setYearBack: () => void;
+    setYearNext: () => void;
+    setMonthBack: () => void;
+    setMonthNext: () => void;
+    renderTHead: () => JSX.Element;
+    renderTBody: () => JSX.Element;
+    renderFirstWeekRow: () => JSX.Element;
+    renderDayRow: (array?: React.ReactNode[], startingCount?: number) => React.ReactNode;
+    renderOffSetDay: () => JSX.Element[];
+    renderLeftSideIcon: (showMonths: boolean) => JSX.Element;
+    renderRightSideIcon: (showMonths: boolean) => JSX.Element;
+    renderShowMonths: () => JSX.Element;
+    render(): JSX.Element;
+}
+interface Props {
+    label?: string;
+}
+interface State {
+    previousFullDate: string;
+    getFullDate: string;
+    currentActiveDate: string;
+    currentYear: number;
+    currentMonth: number;
+    monthValue: number;
+    firstDay: number;
+    lastDate: number;
+    isOpen: boolean;
+    isDatepickerFocus: boolean;
+    showMonths: boolean;
+}
+export default Datepicker;