@conveyorhq/arrow-ds 1.17.0 → 1.19.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.17.0",
+  "version": "1.19.2",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/ConveyorLogo/ConveyorLogo.js

@@ -27,7 +27,7 @@ const ConveyorLogo = ({ height = HEIGHT, monochrome = false, theme = types_1.THE
         return tokens_1.colors.brandGreen[400];
     };
     const iconColor = iconColorFunction();
-    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: variant === "wordmark" ? widthFromHeight(height) : height, height: height, viewBox: variant === "wordmark" ? `0 0 ${WIDTH} ${HEIGHT}` : "0 0 32 32" }, rest),
+    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: variant === "wordmark" ? widthFromHeight(height) : height, height: height, viewBox: variant === "wordmark" ? `0 0 ${WIDTH} ${HEIGHT}` : "0 0 32 32", className: className }, rest),
         variant === "wordmark" && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("path", { fill: wordmarkColor[theme], d: "M44.159 22.858c-3.914 0-5.732-3.663-5.732-9.087 0-4.222 1.286-8.388 5.144-8.388 2.796 0 4.389 2.125 5.228 5.088h3.076l-0.28-5.088c-1.789-1.51-4.669-2.349-7.884-2.349-6.626 0-11.91 4.473-11.91 11.603 0 6.263 4.11 10.764 11.938 10.764 3.411 0 6.43-0.783 8.36-2.125l0.503-6.039h-3.048c-1.146 3.774-2.768 5.62-5.396 5.62z" }),
             react_1.default.createElement("path", { fill: wordmarkColor[theme], d: "M62.261 23.361c-1.789 0-2.6-2.88-2.6-6.85 0-3.075 0.419-5.088 2.013-5.088 1.789 0 2.6 2.88 2.6 6.85 0 3.075-0.42 5.088-2.013 5.088zM61.674 25.402c5.116 0 8.779-3.187 8.779-8.276 0-4.362-3.215-7.745-8.192-7.745-5.116 0-8.779 3.187-8.779 8.276 0 4.362 3.215 7.745 8.192 7.745z" }),

package/public/components/Input/Input.d.ts

@@ -13,6 +13,7 @@ export interface InputBaseProps {
     icon?: IconType;
     iconPosition?: INPUT_ICON_POSITION;
     iconProps?: SharedFaIconProps;
+    wrapperClassName?: string;
 }
 export interface InputProps extends InputBaseProps, InputHTMLAttributes<HTMLInputElement> {
 }

package/public/components/Input/Input.js

@@ -36,18 +36,18 @@ var INPUT_ICON_POSITION;
     INPUT_ICON_POSITION["RIGHT"] = "right";
 })(INPUT_ICON_POSITION = exports.INPUT_ICON_POSITION || (exports.INPUT_ICON_POSITION = {}));
 const cn = "TextInput";
-const Input = react_1.forwardRef(({ as: Component = "input", className, icon, iconPosition = INPUT_ICON_POSITION.LEFT, iconProps = {}, id: idProp, type, variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, theme: themeProp, ...rest }, ref) => {
+const Input = react_1.forwardRef(({ as: Component = "input", className, wrapperClassName, icon, iconPosition = INPUT_ICON_POSITION.LEFT, iconProps = {}, id: idProp, type, variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, theme: themeProp, disabled, ...rest }, ref) => {
     const isTextInput = type !== "radio" && type !== "checkbox";
     const { id: idContext, variant: variantContext, theme: themeContext, } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const id = idContext || idProp;
     const variant = variantContext || variantProp;
     const theme = themeProp || themeContext;
-    const inputClasses = classnames_1.default(isTextInput && bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), icon && bem_1.bem(cn, { m: `icon-${iconPosition}` }), !icon && className);
-    const wrapperClasses = classnames_1.default(bem_1.bem(cn, { e: "wrapper" }), className);
+    const inputClasses = classnames_1.default(isTextInput && bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), disabled && bem_1.bem(cn, { m: "disabled" }), icon && bem_1.bem(cn, { m: `icon-${iconPosition}` }), className);
+    const wrapperClasses = classnames_1.default(bem_1.bem(cn, { e: "wrapper" }), wrapperClassName);
     const { className: iconClassName, ...iconPropsRest } = iconProps;
     const iconClasses = classnames_1.default(bem_1.bem(cn, { e: "icon" }), bem_1.bem(cn, { e: "icon", m: iconPosition }), iconClassName);
     return isTextInput && icon ? (react_1.default.createElement(Box_1.Box, { className: wrapperClasses },
-        react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type }, rest)),
-        react_1.default.createElement(Icon_1.Icon, Object.assign({ icon: icon, className: iconClasses }, iconPropsRest)))) : (react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type }, rest)));
+        react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type, disabled: disabled }, rest)),
+        react_1.default.createElement(Icon_1.Icon, Object.assign({ icon: icon, className: iconClasses }, iconPropsRest)))) : (react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type, disabled: disabled }, rest)));
 });
 exports.Input = Input;

package/public/components/Loading/Loading.d.ts

@@ -1,2 +1,3 @@
-import { BoxProps } from "../Box";
-export declare const Loading: ({ className, ...rest }: BoxProps) => JSX.Element;
+import { ConveyorLogoProps } from "../ConveyorLogo";
+export declare type LoadingProps = Omit<ConveyorLogoProps, "variant">;
+export declare const Loading: ({ theme, height, className, ...rest }: LoadingProps) => JSX.Element;

package/public/components/Loading/Loading.js

@@ -6,14 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loading = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
+const types_1 = require("../../types");
+const ConveyorLogo_1 = require("../ConveyorLogo");
 const cn = "Loading";
-const Loading = ({ className, ...rest }) => {
-    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest),
-        react_1.default.createElement(Box_1.Box, null),
-        react_1.default.createElement(Box_1.Box, null),
-        react_1.default.createElement(Box_1.Box, null),
-        react_1.default.createElement(Box_1.Box, null)));
+const Loading = ({ theme = types_1.THEME.BRAND, height = 40, className, ...rest }) => {
+    return (react_1.default.createElement(ConveyorLogo_1.ConveyorLogo, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className), variant: "icon", height: height, theme: theme }, rest)));
 };
 exports.Loading = Loading;

package/public/components/Paragraph/Paragraph.js

@@ -7,14 +7,10 @@ exports.Paragraph = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Text_1 = require("../Text");
+const bem_1 = require("../../utilities/bem");
+const cn = bem_1.bemHOF("Paragraph");
 const Paragraph = (props) => {
     const { className, ...rest } = props;
-    return (react_1.default.createElement(Text_1.Text, Object.assign({}, rest, { className: classnames_1.default([
-            "text-body",
-            "text-gray-700",
-            "leading-normal",
-            "my-6",
-            className,
-        ]) })));
+    return react_1.default.createElement(Text_1.Text, Object.assign({ className: classnames_1.default([cn(), className]) }, rest));
 };
 exports.Paragraph = Paragraph;

package/public/css/styles.css

@@ -3982,7 +3982,10 @@ override built-in Image component classes */
   color: rgba(185, 200, 210, var(--tw-text-opacity));
 }
 
-.ads-TextInput--brand:disabled {
+.ads-TextInput--brand.ads-TextInput--disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 27, 40, var(--tw-bg-opacity));
+  border-color: transparent;
   --tw-text-opacity: 1;
   color: rgba(134, 163, 181, var(--tw-text-opacity));
 }
@@ -4015,11 +4018,16 @@ override built-in Image component classes */
   color: rgba(134, 163, 181, var(--tw-text-opacity));
 }
 
-.ads-TextInput--product:disabled {
+/* Not using :disabled pseudo-class here for specificity reasons */
+
+/* Not qualifying with the --product modifier for specificity reasons */
+
+.ads-TextInput--disabled {
   --tw-bg-opacity: 1;
   background-color: rgba(244, 247, 249, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(222, 231, 238, var(--tw-border-opacity));
+  cursor: not-allowed;
   --tw-text-opacity: 1;
   color: rgba(71, 104, 125, var(--tw-text-opacity));
 }
@@ -4228,108 +4236,8 @@ override built-in Image component classes */
 }
 
 .ads-Loading {
-  height: 40px;
-  position: relative;
-  --tw-text-opacity: 1;
-  color: rgba(32, 65, 86, var(--tw-text-opacity));
-  width: 40px;
-}
-
-.ads-Loading > div {
-  float: left;
-  position: relative;
-  width: 50%;
-  height: 50%;
-}
-
-.ads-Loading > div::before {
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  -webkit-animation: fold 2.4s infinite linear both;
-          animation: fold 2.4s infinite linear both;
-  background-color: currentColor;
-  content: "";
-  -webkit-transform-origin: 100% 100%;
-          transform-origin: 100% 100%;
-}
-
-.ads-Loading > div:nth-child(2) {
-  -webkit-transform: rotateZ(90deg);
-          transform: rotateZ(90deg);
-}
-
-.ads-Loading > div:nth-child(4) {
-  -webkit-transform: rotateZ(180deg);
-          transform: rotateZ(180deg);
-}
-
-.ads-Loading > div:nth-child(3) {
-  -webkit-transform: rotateZ(270deg);
-          transform: rotateZ(270deg);
-}
-
-.ads-Loading > div:nth-child(2)::before {
-  -webkit-animation-delay: 0.3s;
-          animation-delay: 0.3s;
-}
-
-.ads-Loading > div:nth-child(4)::before {
-  -webkit-animation-delay: 0.6s;
-          animation-delay: 0.6s;
-}
-
-.ads-Loading > div:nth-child(3)::before {
-  -webkit-animation-delay: 0.9s;
-          animation-delay: 0.9s;
-}
-
-@-webkit-keyframes fold {
-  0%,
-  10% {
-    -webkit-transform: perspective(140px) rotateX(-180deg);
-            transform: perspective(140px) rotateX(-180deg);
-    opacity: 0;
-  }
-
-  25%,
-  75% {
-    -webkit-transform: perspective(140px) rotateX(0deg);
-            transform: perspective(140px) rotateX(0deg);
-    opacity: 1;
-  }
-
-  90%,
-  100% {
-    -webkit-transform: perspective(140px) rotateY(180deg);
-            transform: perspective(140px) rotateY(180deg);
-    opacity: 0;
-  }
-}
-
-@keyframes fold {
-  0%,
-  10% {
-    -webkit-transform: perspective(140px) rotateX(-180deg);
-            transform: perspective(140px) rotateX(-180deg);
-    opacity: 0;
-  }
-
-  25%,
-  75% {
-    -webkit-transform: perspective(140px) rotateX(0deg);
-            transform: perspective(140px) rotateX(0deg);
-    opacity: 1;
-  }
-
-  90%,
-  100% {
-    -webkit-transform: perspective(140px) rotateY(180deg);
-            transform: perspective(140px) rotateY(180deg);
-    opacity: 0;
-  }
+  -webkit-animation: spin 1.8s infinite linear both;
+          animation: spin 1.8s infinite linear both;
 }
 
 .ads-Markdown {
@@ -5060,6 +4968,15 @@ override built-in Image component classes */
   padding: 8px;
 }
 
+.ads-Paragraph {
+  font-size: 14px;
+  line-height: 1.5;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  --tw-text-opacity: 1;
+  color: rgba(71, 104, 125, var(--tw-text-opacity));
+}
+
 .ads-Popover {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -36443,6 +36360,18 @@ override built-in Image component classes */
   }
 }
 
+@keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
 .animated {
   -webkit-animation-duration: 500ms;
           animation-duration: 500ms;
@@ -36487,6 +36416,11 @@ override built-in Image component classes */
   transition: all 1s ease;
 }
 
+.spin {
+  -webkit-animation-name: spin;
+          animation-name: spin;
+}
+
 .elevation-inset {
   box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.01);
 }