@arc-ui/components 11.14.0 → 11.16.0

package/dist/types/components/MediaCard/MediaCard.d.ts

@@ -1,57 +1,51 @@
-import { loadingOptions } from "../Image";
 import React, { FC } from "react";
-import { BoxProps } from "../Box";
+import { ImageProps } from "../Image/Image";
+import { HeadingLevel } from "../Heading/Heading";
 /**
  * Use `MediaCard` to contain content and an image about a single subject.
  */
 export declare const MediaCard: FC<MediaCardProps>;
+type MediaCardIcon = "play" | "arrow";
 export interface MediaCardProps {
     /**
-     * Content of the MediaCard.
+     * Heading for the MediaCard.
      */
-    children: React.ReactNode;
+    heading: string;
     /**
-     * Footer Content of the MediaCard.
+     * Heading level for the MediaCard heading.
      */
-    cardFooter?: React.ReactNode;
+    headingLevel?: HeadingLevel;
     /**
-     * Add rounded corners to the MediaCard.
+     * Text content for the MediaCard
      */
-    isBorderRadius?: BoxProps["isBorderRadius"];
+    text?: string;
     /**
-     * The border width of the MediaCard.
+     * Uppercase label for the MediaCard.
      */
-    borderWidth?: BoxProps["borderWidth"];
+    label?: string;
     /**
-     * Box shadow for the MediaCard.
+     * Url for the MediaCard. Makes the whole card a link.
      */
-    elevationLevel?: BoxProps["elevationLevel"];
+    url?: string;
     /**
-     * Set MediaCard to fill parent element.
+     * Text to show adjacent to the cta
      */
-    isFullHeight?: boolean;
+    metaText?: string;
     /**
-     * Background color for the MediaCard.
+     * MediaCard will have a contained look and feel with a white background if set to true.
      */
-    surface?: BoxProps["surface"];
+    isContained?: boolean;
     /**
-     * image src for the MediaCard.
+     * Image props for the MediaCard.
      */
-    imageSrc: string;
+    img: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height">;
     /**
-     * image alt for the MediaCard.
+     * Icon for the MediaCard Cta button
      */
-    imageAlt?: string;
+    buttonIcon?: MediaCardIcon;
     /**
-     * Loading behaviour of the MediaCard.
+     * Click handler for the MediaCard. Only applied when a url is provided.
      */
-    imageLoading?: (typeof loadingOptions)[number];
-    /**
-     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Required if srcSet is defined.
-     */
-    imageSizes?: string;
-    /**
-     * A comma-separated list indicating a set of possible image sources for the user agent to use for different screen sizes. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
-     */
-    imageSrcSet?: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }
+export {};

package/dist/types/components/Select/Select.d.ts

@@ -3,22 +3,71 @@ import { FormControlProps } from "../FormControl/FormControl";
 /** Use `Select` to choose from a dropdown list of options. */
 export declare const Select: React.FC<SelectProps>;
 export interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id" | "helperUnderLabel" | "supplementaryInfo"> {
+    /**
+     * Name for the Select.
+     */
     name: string;
+    /**
+     * Label for the Select.
+     */
     label: string;
+    /**
+     * Aria label for the Select.
+     */
     ariaLabel?: string;
+    /**
+     * Placeholder text for the Select.
+     */
     placeholder: string;
+    /**
+     * Options for the Select.
+     */
     options: {
         name: string;
         value: string;
     }[];
+    /**
+     * error message for the Select.
+     */
     errorMessage?: string;
+    /**
+     * Default value for the Select.
+     */
     defaultValue?: string;
+    /**
+     * onChange handler for the Select.
+     */
     onChange?: (value: string) => void;
+    /**
+     * onBlur handler for the Select.
+     */
     onBlur?: (e: FocusEvent) => void;
+    /**
+     * onOpenChange handler for the Select.
+     */
     onOpenChange?: () => void;
+    /**
+     * select handler for the Select.
+     */
     selectSize?: "s" | "m" | "l";
+    /**
+     * Sets the Select to 100% width.
+     */
     isFluid?: boolean;
+    /**
+     * Sets the width of the Select.
+     */
+    width?: string;
+    /**
+     * Disables the Select.
+     */
     isDisabled?: boolean;
+    /**
+     * Sets the Select to be open by default.
+     */
     isDefaultOpen?: boolean;
+    /**
+     * Sets the Select to be open by default.
+     */
     isRequired?: boolean;
 }

package/dist/types/components/TextInput/TextInput.d.ts

@@ -63,9 +63,20 @@ export interface TextInputProps extends Omit<FormControlProps, "children" | "ele
      */
     inputSize?: "s" | "m" | "l";
     /**
-     * Enable button to toggle TextInput type from `Selected Type` to `Text`
+     * Determine the alignment of the text within the input
+     */
+    inputAlignment?: "left" | "right";
+    /**
+     * Enable button to toggle TextInput type from `Selected Type` to `Text`. This will override any `suffix` elements
      */
     showPassword?: boolean;
+    /**
+     * Add a prefixed value within `TextInput`
+     */
+    prefix?: string;
+    /**
+     * Add a suffixed value within `TextInput`. If `showPassword` is true, suffix will not be displayed   */
+    suffix?: string;
     /**
      * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
      */

package/dist/types/components/TypographyCard/TypographyCard.d.ts

@@ -0,0 +1,48 @@
+import React, { FC } from "react";
+import { HeadingLevel } from "../Heading/Heading";
+export declare const TypographyCard: FC<TypographyCardProps>;
+type TypographyCardIcon = "play" | "arrow";
+type TypographyCardPathway = "light" | "dark";
+export interface TypographyCardProps {
+    /**
+     * Heading for the TypographyCard.
+     */
+    heading: string;
+    /**
+     * Url for the TypographyCard.
+     */
+    url: string;
+    /**
+     * Sets a dark or light background for the TypographyCard.
+     */
+    pathway?: TypographyCardPathway;
+    /**
+     * Icon for the TypographyCard Cta button.
+     */
+    buttonIcon?: TypographyCardIcon;
+    /**
+     * Heading level for the TypographyCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Uppercase label for the TypographyCard.
+     */
+    label?: string;
+    /**
+     * Click handler for the TypographyCard.
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     *
+     * Text to show adjacent to the cta
+     */
+    metaText?: string;
+    /**
+     * Object of `data-` attributes to render on internal anchor element, e.g.
+     * `{ data-analytics-link: "My link"}` => `<a data-analytics-link="My link">`.
+     */
+    linkData?: {
+        [key: string]: string;
+    };
+}
+export {};

package/dist/types/components/TypographyCard/index.d.ts

@@ -0,0 +1 @@
+export { TypographyCard } from "./TypographyCard";

package/dist/types/components/UniversalHeader/UniversalHeader.d.ts

@@ -22,4 +22,8 @@ export interface UniversalHeaderProps {
      * UniversalHeader.Item components.
      */
     children: ReactNode;
+    /**
+     * A Slot to accept react node. Any content with this slot will be aligned right.
+     */
+    ContentSlot?: ReactNode;
 }

package/dist/types/components/index.d.ts

@@ -45,6 +45,7 @@ export { TextArea } from "./TextArea";
 export { TextInput } from "./TextInput";
 export { Toast } from "./Toast";
 export { Truncate } from "./Truncate";
+export { TypographyCard } from "./TypographyCard";
 export { UniversalHeader } from "./UniversalHeader";
 export { VerticalSpace } from "./VerticalSpace";
 export { VisuallyHidden } from "./VisuallyHidden";

package/dist/types/internal-components/ConditionalWrapper/ConditionalWrapper.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const ConditionalWrapper: React.FC<{
+    condition: boolean;
+    wrapper: (children: React.ReactNode) => React.ReactNode;
+    children: React.ReactNode;
+}>;

package/dist/types/internal-components/ConditionalWrapper/index.d.ts

@@ -0,0 +1 @@
+export { ConditionalWrapper } from "./ConditionalWrapper";

package/dist/types/internal-components/index.d.ts

@@ -0,0 +1 @@
+export { ConditionalWrapper } from "./ConditionalWrapper";

package/dist/types/styles.d.ts

@@ -2,10 +2,10 @@ import "./components/Alert/Alert.css";
 import "./components/Align/Align.css";
 import "./components/Badge/Badge.css";
 import "./components/Base/Base.css";
+import "./components/Box/Box.css";
 import "./components/BrandLogo/BrandLogo.css";
 import "./components/Breadcrumbs/Breadcrumbs.css";
 import "./components/Card/Card.css";
-import "./components/Box/Box.css";
 import "./components/Button/Button.css";
 import "./components/Checkbox/Checkbox.css";
 import "./components/Clock/Clock.css";
@@ -74,3 +74,4 @@ import "./components/Switch/Switch.bt.css";
 import "./components/Toast/Toast.css";
 import "./components/ProgressStepper/ProgressStepper.css";
 import "./components/InformationCard/InformationCard.css";
+import "./components/TypographyCard/TypographyCard.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "11.14.0",
+  "version": "11.16.0",
   "homepage": "https://ui.digital-ent-int.bt.com",
   "author": "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
     "@geometricpanda/storybook-addon-badges": "^2.0.0",
     "@radix-ui/react-dialog": "1.0.4",
     "@radix-ui/react-label": "2.0.0",
-    "@radix-ui/react-select": "1.1.2",
+    "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-switch": "1.0.1",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.4",