glints-aries 4.0.344 → 4.0.345

package/es/@next/Steps/Step.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface StepProps {
+    /** Styles of step, predetermined from parent component, or you can overwrite this */
+    variant?: 'pending' | 'completed' | 'processing' | 'error';
+    /** Label given to the step component  */
+    label?: string;
+    /** Step number to be shown, by default it's 1,2,3,... from the parent component, or you can overwrite this */
+    index?: number;
+    type?: 'normal' | 'dot';
+}
+export declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Steps/Step.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Typography } from '../Typography';
+import { CircleDiv, StepItemContainer, StepItemWrapper, VerticalLine, VerticalLineWrapper } from './StepStyle';
+import { Icon } from '../Icon';
+import { Neutral } from '../utilities/colors';
+export var Step = /*#__PURE__*/React.forwardRef(function Step(_ref, ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'pending' : _ref$variant,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    _ref$index = _ref.index,
+    index = _ref$index === void 0 ? 0 : _ref$index,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'normal' : _ref$type;
+  return /*#__PURE__*/React.createElement(StepItemContainer, {
+    className: "step-item-container"
+  }, /*#__PURE__*/React.createElement(StepItemWrapper, {
+    ref: ref,
+    "data-dot": type === 'dot',
+    className: "step-item-wrapper"
+  }, /*#__PURE__*/React.createElement(CircleDiv, {
+    "data-variant": variant,
+    "data-dot": type === 'dot'
+  }, variant === 'completed' && /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-check",
+    className: "circle-icon"
+  }), variant === 'error' && /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close",
+    className: "circle-icon"
+  }), variant === 'processing' && /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "caption",
+    color: Neutral.B100,
+    className: "circle-icon"
+  }, index), variant === 'pending' && /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "caption",
+    color: Neutral.B40,
+    className: "circle-icon"
+  }, index)), /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: variant === 'processing' || variant === 'error' ? 'body2' : 'body1',
+    color: variant === 'pending' || variant === 'completed' ? Neutral.B40 : Neutral.B18
+  }, label)), /*#__PURE__*/React.createElement(VerticalLineWrapper, {
+    "data-dot": type === 'dot'
+  }, /*#__PURE__*/React.createElement(VerticalLine, {
+    "data-variant": variant,
+    "data-dot": type === 'dot'
+  })));
+});

package/es/@next/Steps/StepStyle.d.ts

@@ -0,0 +1,5 @@
+export declare const StepItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CircleDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalLineWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Steps/StepStyle.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { Breakpoints } from '..';
+import { space4, space12, space16 } from '../utilities/spacing';
+import { Blue, Neutral, Red } from '../utilities/colors';
+import { borderRadiusHalf } from '../utilities/borderRadius';
+export var StepItemContainer = styled.div.withConfig({
+  displayName: "StepStyle__StepItemContainer",
+  componentId: "sc-1br2jzt-0"
+})(["&:last-child > div:last-child{display:none;}"]);
+export var StepItemWrapper = styled.div.withConfig({
+  displayName: "StepStyle__StepItemWrapper",
+  componentId: "sc-1br2jzt-1"
+})(["display:flex;align-items:center;gap:", ";cursor:default;&[data-dot='true']{gap:", ";}"], space12, space16);
+export var CircleDiv = styled.div.withConfig({
+  displayName: "StepStyle__CircleDiv",
+  componentId: "sc-1br2jzt-2"
+})(["display:flex;align-items:center;justify-content:center;height:28px;width:28px;border-radius:", ";svg{height:16px;width:16px;}&[data-variant='pending']{background-color:", ";}&[data-variant='completed']{background-color:", ";svg{fill:", ";}}&[data-variant='processing']{background-color:", ";}&[data-variant='error']{background-color:", ";svg{fill:", ";}}&[data-dot='true']{height:10px;width:10px;> .circle-icon{display:none;}&[data-variant='completed']{background-color:", ";}}@media (max-width:", "){height:24px;width:24px;svg{height:14px;width:14px;}}"], borderRadiusHalf, Neutral.B95, Blue.S08, Blue.S99, Blue.S99, Red.B93, Neutral.B100, Blue.S99, Breakpoints.large);
+export var VerticalLineWrapper = styled.div.withConfig({
+  displayName: "StepStyle__VerticalLineWrapper",
+  componentId: "sc-1br2jzt-3"
+})(["display:flex;align-items:center;justify-content:center;padding:", " 0;height:64px;width:28px;&[data-dot='true']{width:10px;}@media (max-width:", "){width:24px;}"], space4, Breakpoints.large);
+export var VerticalLine = styled.div.withConfig({
+  displayName: "StepStyle__VerticalLine",
+  componentId: "sc-1br2jzt-4"
+})(["width:2px;height:100%;background-color:", ";&[data-variant='completed']{background-color:", ";}&[data-dot='true']{width:1.5px;}"], Neutral.B85, Blue.S99);

package/es/@next/Steps/Steps.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StepProps } from './Step';
+export interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Step index (1-indexed) marked as processing */
+    currentStep: number;
+    /** List of indexes (1-indexed) to be marked as error */
+    errorSteps?: number[];
+    /** Step components as child are required (1-indexed) */
+    children?: React.ReactElement<StepProps>[];
+    /** If dot type, display dot only; default is normal; automatically passed to all children */
+    type?: 'normal' | 'dot';
+}
+export declare const StepsComponent: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Steps: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<HTMLDivElement>> & {
+    Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>;
+};

package/es/@next/Steps/Steps.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["currentStep", "errorSteps", "children", "type"];
+import React from 'react';
+import { Step } from './Step';
+export var StepsComponent = /*#__PURE__*/React.forwardRef(function Collapse(_ref, ref) {
+  var _ref$currentStep = _ref.currentStep,
+    currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
+    _ref$errorSteps = _ref.errorSteps,
+    errorSteps = _ref$errorSteps === void 0 ? [] : _ref$errorSteps,
+    children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'normal' : _ref$type,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props), React.Children.map(children, function (child, index) {
+    var _child$props, _child$props2;
+    var variant = errorSteps.includes(index + 1) ? 'error' : index + 1 === currentStep ? 'processing' : index + 1 < currentStep ? 'completed' : 'pending';
+    var childVariant = ((_child$props = child.props) == null ? void 0 : _child$props.variant) || variant;
+    var childIndex = ((_child$props2 = child.props) == null ? void 0 : _child$props2.index) || index + 1;
+    return /*#__PURE__*/React.createElement(child.type, _extends({}, child.props, {
+      variant: childVariant,
+      index: childIndex,
+      type: type
+    }));
+  }));
+});
+export var Steps = Object.assign(StepsComponent, {
+  Step: Step
+});

package/es/@next/Steps/Steps.stories.d.ts

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

package/lib/@next/Steps/Step.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface StepProps {
+    /** Styles of step, predetermined from parent component, or you can overwrite this */
+    variant?: 'pending' | 'completed' | 'processing' | 'error';
+    /** Label given to the step component  */
+    label?: string;
+    /** Step number to be shown, by default it's 1,2,3,... from the parent component, or you can overwrite this */
+    index?: number;
+    type?: 'normal' | 'dot';
+}
+export declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>;

package/lib/@next/Steps/Step.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Step = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = require("../Typography");
+var _StepStyle = require("./StepStyle");
+var _Icon = require("../Icon");
+var _colors = require("../utilities/colors");
+var Step = /*#__PURE__*/_react["default"].forwardRef(function Step(_ref, ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'pending' : _ref$variant,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    _ref$index = _ref.index,
+    index = _ref$index === void 0 ? 0 : _ref$index,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'normal' : _ref$type;
+  return /*#__PURE__*/_react["default"].createElement(_StepStyle.StepItemContainer, {
+    className: "step-item-container"
+  }, /*#__PURE__*/_react["default"].createElement(_StepStyle.StepItemWrapper, {
+    ref: ref,
+    "data-dot": type === 'dot',
+    className: "step-item-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement(_StepStyle.CircleDiv, {
+    "data-variant": variant,
+    "data-dot": type === 'dot'
+  }, variant === 'completed' && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-check",
+    className: "circle-icon"
+  }), variant === 'error' && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-close",
+    className: "circle-icon"
+  }), variant === 'processing' && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "caption",
+    color: _colors.Neutral.B100,
+    className: "circle-icon"
+  }, index), variant === 'pending' && /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "caption",
+    color: _colors.Neutral.B40,
+    className: "circle-icon"
+  }, index)), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: variant === 'processing' || variant === 'error' ? 'body2' : 'body1',
+    color: variant === 'pending' || variant === 'completed' ? _colors.Neutral.B40 : _colors.Neutral.B18
+  }, label)), /*#__PURE__*/_react["default"].createElement(_StepStyle.VerticalLineWrapper, {
+    "data-dot": type === 'dot'
+  }, /*#__PURE__*/_react["default"].createElement(_StepStyle.VerticalLine, {
+    "data-variant": variant,
+    "data-dot": type === 'dot'
+  })));
+});
+exports.Step = Step;

package/lib/@next/Steps/StepStyle.d.ts

@@ -0,0 +1,5 @@
+export declare const StepItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CircleDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalLineWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/Steps/StepStyle.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.VerticalLineWrapper = exports.VerticalLine = exports.StepItemWrapper = exports.StepItemContainer = exports.CircleDiv = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("..");
+var _spacing = require("../utilities/spacing");
+var _colors = require("../utilities/colors");
+var _borderRadius = require("../utilities/borderRadius");
+var StepItemContainer = _styledComponents["default"].div.withConfig({
+  displayName: "StepStyle__StepItemContainer",
+  componentId: "sc-1br2jzt-0"
+})(["&:last-child > div:last-child{display:none;}"]);
+exports.StepItemContainer = StepItemContainer;
+var StepItemWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "StepStyle__StepItemWrapper",
+  componentId: "sc-1br2jzt-1"
+})(["display:flex;align-items:center;gap:", ";cursor:default;&[data-dot='true']{gap:", ";}"], _spacing.space12, _spacing.space16);
+exports.StepItemWrapper = StepItemWrapper;
+var CircleDiv = _styledComponents["default"].div.withConfig({
+  displayName: "StepStyle__CircleDiv",
+  componentId: "sc-1br2jzt-2"
+})(["display:flex;align-items:center;justify-content:center;height:28px;width:28px;border-radius:", ";svg{height:16px;width:16px;}&[data-variant='pending']{background-color:", ";}&[data-variant='completed']{background-color:", ";svg{fill:", ";}}&[data-variant='processing']{background-color:", ";}&[data-variant='error']{background-color:", ";svg{fill:", ";}}&[data-dot='true']{height:10px;width:10px;> .circle-icon{display:none;}&[data-variant='completed']{background-color:", ";}}@media (max-width:", "){height:24px;width:24px;svg{height:14px;width:14px;}}"], _borderRadius.borderRadiusHalf, _colors.Neutral.B95, _colors.Blue.S08, _colors.Blue.S99, _colors.Blue.S99, _colors.Red.B93, _colors.Neutral.B100, _colors.Blue.S99, _.Breakpoints.large);
+exports.CircleDiv = CircleDiv;
+var VerticalLineWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "StepStyle__VerticalLineWrapper",
+  componentId: "sc-1br2jzt-3"
+})(["display:flex;align-items:center;justify-content:center;padding:", " 0;height:64px;width:28px;&[data-dot='true']{width:10px;}@media (max-width:", "){width:24px;}"], _spacing.space4, _.Breakpoints.large);
+exports.VerticalLineWrapper = VerticalLineWrapper;
+var VerticalLine = _styledComponents["default"].div.withConfig({
+  displayName: "StepStyle__VerticalLine",
+  componentId: "sc-1br2jzt-4"
+})(["width:2px;height:100%;background-color:", ";&[data-variant='completed']{background-color:", ";}&[data-dot='true']{width:1.5px;}"], _colors.Neutral.B85, _colors.Blue.S99);
+exports.VerticalLine = VerticalLine;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StepProps } from './Step';
+export interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Step index (1-indexed) marked as processing */
+    currentStep: number;
+    /** List of indexes (1-indexed) to be marked as error */
+    errorSteps?: number[];
+    /** Step components as child are required (1-indexed) */
+    children?: React.ReactElement<StepProps>[];
+    /** If dot type, display dot only; default is normal; automatically passed to all children */
+    type?: 'normal' | 'dot';
+}
+export declare const StepsComponent: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Steps: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<HTMLDivElement>> & {
+    Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>;
+};

package/lib/@next/Steps/Steps.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StepsComponent = exports.Steps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Step = require("./Step");
+var _excluded = ["currentStep", "errorSteps", "children", "type"];
+var StepsComponent = /*#__PURE__*/_react["default"].forwardRef(function Collapse(_ref, ref) {
+  var _ref$currentStep = _ref.currentStep,
+    currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
+    _ref$errorSteps = _ref.errorSteps,
+    errorSteps = _ref$errorSteps === void 0 ? [] : _ref$errorSteps,
+    children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'normal' : _ref$type,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    ref: ref
+  }, props), _react["default"].Children.map(children, function (child, index) {
+    var _child$props, _child$props2;
+    var variant = errorSteps.includes(index + 1) ? 'error' : index + 1 === currentStep ? 'processing' : index + 1 < currentStep ? 'completed' : 'pending';
+    var childVariant = ((_child$props = child.props) == null ? void 0 : _child$props.variant) || variant;
+    var childIndex = ((_child$props2 = child.props) == null ? void 0 : _child$props2.index) || index + 1;
+    return /*#__PURE__*/_react["default"].createElement(child.type, (0, _extends2["default"])({}, child.props, {
+      variant: childVariant,
+      index: childIndex,
+      type: type
+    }));
+  }));
+});
+exports.StepsComponent = StepsComponent;
+var Steps = Object.assign(StepsComponent, {
+  Step: _Step.Step
+});
+exports.Steps = Steps;

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

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

package/package.json

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