@arc-ui/components 11.6.0 → 11.7.0

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

@@ -0,0 +1,36 @@
+import React, { FC } from "react";
+import { SurfaceBackgroundColor, SurfacePadding } from "../Surface/Surface";
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+export declare const Box: FC<BoxProps>;
+export interface BoxProps {
+    /**
+     * Contents of the Box.
+     */
+    children: React.ReactNode;
+    /**
+     * Set Box to fill parent element.
+     */
+    isFullHeight?: boolean;
+    /**
+     * Add rounded corners to the box.
+     */
+    isBorderRadius?: boolean;
+    /**
+     * The border width of the box.
+     */
+    borderWidth?: "thin" | "medium";
+    /**
+     * Box shadow for the box.
+     */
+    elevationLevel?: "1" | "2";
+    /**
+     * Padding for the box.
+     */
+    padding?: SurfacePadding;
+    /**
+     * Background color for the box.
+     */
+    surface?: SurfaceBackgroundColor;
+}

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

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

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

@@ -1 +1 @@
-export { Image } from "./Image";
+export { Image, loadingOptions } from "./Image";

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

@@ -0,0 +1,57 @@
+import { loadingOptions } from "../Image";
+import React, { FC } from "react";
+import { BoxProps } from "../Box";
+/**
+ * Use `MediaCard` to contain content and an image about a single subject.
+ */
+export declare const MediaCard: FC<MediaCardProps>;
+export interface MediaCardProps {
+    /**
+     * Content of the MediaCard.
+     */
+    children: React.ReactNode;
+    /**
+     * Footer Content of the MediaCard.
+     */
+    cardFooter?: React.ReactNode;
+    /**
+     * Add rounded corners to the MediaCard.
+     */
+    isBorderRadius?: BoxProps["isBorderRadius"];
+    /**
+     * The border width of the MediaCard.
+     */
+    borderWidth?: BoxProps["borderWidth"];
+    /**
+     * Box shadow for the MediaCard.
+     */
+    elevationLevel?: BoxProps["elevationLevel"];
+    /**
+     * Set MediaCard to fill parent element.
+     */
+    isFullHeight?: boolean;
+    /**
+     * Background color for the MediaCard.
+     */
+    surface?: BoxProps["surface"];
+    /**
+     * image src for the MediaCard.
+     */
+    imageSrc: string;
+    /**
+     * image alt for the MediaCard.
+     */
+    imageAlt?: string;
+    /**
+     * Loading behaviour of the MediaCard.
+     */
+    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;
+}

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

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

package/dist/types/components/Modal/Modal.stories-wip.d.ts

@@ -0,0 +1,9 @@
+import { Meta, Story } from "@storybook/react";
+import { ModalProps } from "./Modal";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: Story<ModalProps>;
+export declare const CloseProgrammatically: Story<ModalProps>;
+export declare const OpenProgrammatically: Story<ModalProps>;
+export declare const TallContent: Story<ModalProps>;
+export declare const HiddenDescription: Story<ModalProps>;

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

@@ -0,0 +1,28 @@
+import { FC, ReactNode } from "react";
+import { ProgressStepperItem } from "./ProgressStepperItem/ProgressStepperItem";
+/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+export declare const ProgressStepper: FC<ProgressStepperProps> & {
+    Item: typeof ProgressStepperItem;
+};
+export interface ProgressStepperProps {
+    /**
+     * Children of `<ProgressStepper />` should only contain `<ProgressStepper.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item />` should be Fluid. Only appliciable for `horizontal direction.`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine if `<ProgressStepper.Item />` should be able to expand. This only is appliciable when direction is set to vertical
+     */
+    isExpandable?: boolean;
+}

package/dist/types/components/ProgressStepper/ProgressStepperItem/ProgressStepperItem.d.ts

@@ -0,0 +1,62 @@
+import { FC, ReactNode } from "react";
+import { ProgressStatus } from "../progressStatus";
+export declare const ProgressStepperItem: FC<ProgressStepperItemProps>;
+export interface ProgressStepperItemProps {
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    title: string;
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    titleHref?: string;
+    /**
+     * Text to override `linkTitle` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Execute a function on title click `<ProgressStepper.Item />`
+     */
+    onClick?: () => void;
+    /**
+     * Determine a sub title for `<ProgressStepper.Item />`
+     */
+    subTitle?: string;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the position of the step `<ProgressStepper.Item />`
+     */
+    position?: "first" | "middle" | "last";
+    /**
+     * Determine a status for `<ProgressStepper.Item />`
+     */
+    status?: ProgressStatus;
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item /> should be Fluid`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine the context `<ProgressStepper.Item /> should b`
+     */
+    previousStep?: ProgressStatus;
+    /**
+     * Determine if `<ProgressStepper.Item /> should have expandable content`
+     */
+    isExpandable?: boolean;
+    /**
+     * Determine what content to display in `<ProgressStepper.Item />. To use this option isExpandable must be `true``
+     */
+    stepContent?: ReactNode;
+    /**
+     * Determine if `stepContent` is hidden
+     */
+    isStepContentHidden?: boolean;
+}

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

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

package/dist/types/components/ProgressStepper/progressStatus.d.ts

@@ -0,0 +1 @@
+export declare type ProgressStatus = "completed" | "current" | "warning" | "error" | "todo";

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

@@ -10,12 +10,13 @@ export declare const Surface: FC<SurfaceProps>;
 export declare const backgrounds: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
 export declare const backgroundsBT: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
 export declare type SurfacePadding = "8" | "12" | "16" | "24" | "32" | "48" | "64";
+export declare type SurfaceBackgroundColor = "black" | "brand" | "brand-flat" | "dark" | "darker" | "coral" | "turquoise" | "light" | "lighter" | "white";
 export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
     /**
      * Background colour of the Surface. Contents will change colour to meet
      * accessibility requirements.
      */
-    background?: typeof backgrounds[number];
+    background?: SurfaceBackgroundColor;
     /**
      * Content to display on the Surface.
      */

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

@@ -1 +1 @@
-export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "./Surface";
+export { Surface, SurfaceContext, backgrounds, backgroundsBT, SurfacePadding, SurfaceBackgroundColor } from "./Surface";

package/dist/types/styles.d.ts

@@ -5,6 +5,7 @@ import "./components/Base/Base.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";
@@ -20,6 +21,7 @@ import "./components/Heading/Heading.css";
 import "./components/Icon/Icon.css";
 import "./components/Image/Image.css";
 import "./components/Markup/Markup.css";
+import "./components/MediaCard/MediaCard.css";
 import "./components/Modal/Modal.css";
 import "./components/Pagination/Pagination.css";
 import "./components/PaginationSimple/PaginationSimple.css";
@@ -67,3 +69,6 @@ import "./components/Text/Text.bt.css";
 import "./components/TextInput/TextInput.bt.css";
 import "./components/UniversalHeader/UniversalHeader.bt.css";
 import "./components/Switch/Switch.bt.css";
+import "./components/Modal/Modal.css";
+import "./components/ProgressBar/ProgressBar.css";
+import "./components/ProgressStepper/ProgressStepper.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "11.6.0",
+  "version": "11.7.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",
@@ -32,9 +32,9 @@
     "@radix-ui/react-switch": "^1.0.1"
   },
   "devDependencies": {
-    "@arc-ui/fonts": "^11.6.0",
-    "@arc-ui/icons": "^11.6.0",
-    "@arc-ui/tokens": "^11.6.0",
+    "@arc-ui/fonts": "^11.7.0",
+    "@arc-ui/icons": "^11.7.0",
+    "@arc-ui/tokens": "^11.7.0",
     "@babel/core": "^7.14.3",
     "@babel/helper-define-map": "^7.14.3",
     "@storybook/addon-essentials": "^6.3.6",