@conveyorhq/arrow-ds 1.216.0 → 1.216.1

package/package.json

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

package/src/components/Appbar/Appbar.tsx

@@ -24,6 +24,9 @@ type NavComponent = ReactNode;
 type UserComponent = ReactNode;
 type OrganizationComponent = ReactNode;
 
+/**
+ * @deprecated
+ */
 export interface AppbarProps extends BoxProps {
   /**
    * Which company is this?
@@ -65,6 +68,9 @@ export interface AppbarProps extends BoxProps {
   isProductMenuDisabled?: boolean;
 }
 
+/**
+ * @deprecated
+ */
 export const Appbar = (props: AppbarProps) => {
   const {
     company = COMPLY_COMPANY_NAME.CONVEYOR,

package/src/components/Box/Box.tsx

@@ -1,10 +1,16 @@
 import React, { FunctionComponent, HTMLAttributes, forwardRef } from "react";
 
+/**
+ * @deprecated use React.ComponentProps<"div"> instead
+ */
 export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
   ref?: any;
   as?: any;
 }
 
+/**
+ * @deprecated use a <div /> or <span /> element instead
+ */
 export const Box: FunctionComponent<BoxProps> = forwardRef<
   HTMLDivElement,
   BoxProps

package/src/components/BrandIcon/BrandIcon.tsx

@@ -10,6 +10,9 @@ import {
   brandIconSizeMap,
 } from "./types";
 
+/**
+ * @deprecated
+ */
 export const BRAND_ICON_MAP: BrandIconComponentMap = {
   [BrandIconNameEnum.confluence]: Icons.BrandIconSVGConfluence,
   [BrandIconNameEnum.conveyor_ai]: Icons.BrandIconSVGConveyorAI,
@@ -31,6 +34,9 @@ type BrandIconProps = React.HTMLAttributes<HTMLSpanElement> & {
   style?: React.CSSProperties;
 };
 
+/**
+ * @deprecated
+ */
 export const BrandIcon = forwardRef<HTMLSpanElement, BrandIconProps>(
   function BrandIcon(props, ref) {
     const { name, size = "md", className, style, ...rest } = props;

package/src/components/Description/Description.tsx

@@ -11,6 +11,9 @@ export interface DescriptionProps extends TextProps {
 
 const cn = "Description";
 
+/**
+ * @deprecated
+ */
 export const Description = (props: DescriptionProps) => {
   const { className, theme: themeProp, ...rest } = props;
 

package/src/components/Flex/Flex.tsx

@@ -5,6 +5,9 @@ import { bemHOF } from "../../utilities";
 
 const cn = bemHOF("Flex");
 
+/**
+ * @deprecated use the “flex” classname instead
+ */
 export const Flex: FunctionComponent<BoxProps> = forwardRef<
   HTMLDivElement,
   BoxProps

package/src/components/Grid/Grid.tsx

@@ -5,6 +5,9 @@ import { bemHOF } from "../../utilities";
 
 const cn = bemHOF("Grid");
 
+/**
+ * @deprecated
+ */
 export interface GridProps extends BoxProps {
   /**
    * Maps to the
@@ -26,6 +29,9 @@ export interface GridProps extends BoxProps {
   gap?: string;
 }
 
+/**
+ * @deprecated
+ */
 export interface GridItemProps extends BoxProps {
   /**
    * Specifies a grid item’s size and location within a grid column; internally,
@@ -48,6 +54,9 @@ export interface GridItemProps extends BoxProps {
   area?: string;
 }
 
+/**
+ * @deprecated
+ */
 export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
   (props, ref) => {
     const {
@@ -79,6 +88,9 @@ export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
   },
 );
 
+/**
+ * @deprecated use the “grid” classname instead
+ */
 const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const { className, style, columns = [], rows = [], gap, ...rest } = props;
 

package/src/components/InputFeedback/InputFeedback.tsx

@@ -11,6 +11,9 @@ interface InputFeedbackProps extends TextProps {
   variant?: STATUS_VARIANT;
 }
 
+/**
+ * @deprecated
+ */
 export const InputFeedback = (props: InputFeedbackProps) => {
   const {
     variant: variantProp = STATUS_VARIANT.DEFAULT,

package/src/components/List/List.tsx

@@ -5,10 +5,16 @@ interface ListProps extends BoxProps {
   as?: "ol" | "ul";
 }
 
+/**
+ * @deprecated use a <li /> element instead
+ */
 const ListItem = forwardRef<HTMLLIElement, BoxProps>((props, ref) => {
   return <Box {...props} ref={ref} as="li" />;
 });
 
+/**
+ * @deprecated use a <ol /> or <ul /> elements instead
+ */
 const List = forwardRef<HTMLOListElement | HTMLUListElement, ListProps>(
   (props, ref) => {
     const { as = "ul", ...rest } = props;

package/src/components/Marquee/Marquee.tsx

@@ -121,6 +121,9 @@ const MarqueeGradient = ({ style }: { style: CSSProperties }) => {
   return <Box className={cn({ e: "overlay" })} style={style} />;
 };
 
+/**
+ * @deprecated
+ */
 export const Marquee = forwardRef<HTMLDivElement, MarqueeProps>(
   function Marquee(
     {

package/src/components/MenuRenderer/MenuRenderer.tsx

@@ -110,6 +110,9 @@ const TRANSITION_START = {
 };
 const TRANSITION_END = { transform: "translateY(0)", opacity: 1 };
 
+/**
+ * @deprecated
+ */
 export const MenuRenderer = ({
   children,
   className,

package/src/components/Overlay/Overlay.tsx

@@ -6,6 +6,9 @@ import { bem } from "../../utilities/bem";
 
 const cn = "Overlay";
 
+/**
+ * @deprecated
+ */
 export const Overlay = (props: BoxProps) => {
   const { className, ...rest } = props;
 

package/src/components/Panel/Panel.tsx

@@ -10,6 +10,9 @@ export interface PanelProps extends BoxProps {
   border?: BorderPosition;
 }
 
+/**
+ * @deprecated create panels using the appropriate classnames instead
+ */
 export const Panel = (props: PanelProps) => {
   const { background = "white", border = "all", className, ...rest } = props;
 

package/src/components/PopoverMenu/PopoverMenu.tsx

@@ -11,6 +11,9 @@ export interface PopoverMenuProps extends BoxProps {
   theme?: THEME;
 }
 
+/**
+ * @deprecated
+ */
 export const PopoverMenu: FunctionComponent<PopoverMenuProps> = forwardRef<
   HTMLDivElement,
   PopoverMenuProps

package/src/components/Portal/Portal.tsx

@@ -9,4 +9,7 @@ export type PortalProps = {
   root?: PortalRootElementType;
 };
 
+/**
+ * @deprecated import FloatingPortal from @floating-ui/react instead
+ */
 export const Portal = (props: PortalProps) => <FloatingPortal {...props} />;

package/src/components/SpeechBubble/SpeechBubble.tsx

@@ -22,6 +22,9 @@ export interface SpeechBubbleProps extends BoxProps {
   placement?: SpeechBubblePlacement;
 }
 
+/**
+ * @deprecated
+ */
 export const SpeechBubble = (props: SpeechBubbleProps) => {
   const {
     "data-placement": dataPlacement = "top-start",

package/src/components/Stack/Stack.tsx

@@ -38,6 +38,9 @@ export interface StackProps extends BoxProps {
   reverse?: boolean;
 }
 
+/**
+ * @deprecated use the “flex” classname instead
+ */
 export const Stack: FunctionComponent<StackProps> = forwardRef<
   HTMLDivElement,
   StackProps

package/src/components/Text/Text.tsx

@@ -3,6 +3,9 @@ import { Box, BoxProps } from "../Box";
 
 export type TextProps = BoxProps;
 
+/**
+ * @deprecated use a <p /> element instead
+ */
 export const Text = (props: TextProps) => {
   return <Box as="p" {...props} />;
 };

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -5,6 +5,9 @@ import { bemHOF } from "../../utilities";
 
 const cn = bemHOF("VisuallyHidden");
 
+/**
+ * @deprecated use the “visually-hidden” classname instead
+ */
 export const VisuallyHidden: React.FunctionComponent<BoxProps> = React.forwardRef<
   HTMLDivElement,
   BoxProps

package/src/docs/FontAwesomeToMaterialDesign.mdx

@@ -65,7 +65,7 @@ The follwing props for `Icon` no longer apply to `MaterialIcon`.
 | Prop type                     | Alternative                                                                                                                                                                        |
 | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `color?: string;`             | Use `className` or `style` to set the icon's color                                                                                                                                 |
-| `spin?: boolean;`             | Use the `loading-spin` classname, which adds a spinning animation to the icon (still to be implemented)                                                                            |
+| `spin?: boolean;`             | Use the `animate-spin` classname, which adds a spinning animation to the icon                                                                                                      |
 | `prefix?: ICON_STYLE_PREFIX;` | None; `prefix` was specific to Font Awesome                                                                                                                                        |
 | `flip?: FlipProp;`            | This prop was specific to Font Awesome and was never used; if necessary, use the CSS `transform` property with functions `scaleX(-1)` for horizontal or `scaleY(-1)` for vertical. |