@arc-ui/components 10.6.0 → 10.7.0

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

@@ -1,4 +1,5 @@
-import { FC } from "react";
+import React, { FC } from "react";
+export declare const ArcRootElementContext: React.Context<HTMLElement | null>;
 /**
  * Use `Base` as the root component of the arc system.
  */

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

@@ -10,6 +10,10 @@ export declare const Card: FC<CardProps> & {
  * Internal `Card.Block` component to section blocks of content within a Card.
  */
 declare const CardBlock: FC<{
+    /**
+     * Contents of the CardBlock.
+     */
+    children: React.ReactNode;
     /**
      * How should the content of the block be aligned?
      */

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

@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+export declare const Modal: FC<ModalProps>;
+export interface ModalProps {
+    /**
+     * title for the modal dialog, announced when opened
+     */
+    title: string;
+    /**
+     * description for the modal dialog, announced when opened
+     */
+    description: string;
+    /**
+     * Function to be called when the modal has been requested to close.
+     */
+    onClose: () => void;
+    /**
+     * determines whether the description is visible. If set to false it will be visually hidden, but will still be announaced by screen readers. Set to true by default.
+     */
+    showDescription?: boolean;
+    /**
+     * Set modal open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * content for the modal
+     */
+    children?: React.ReactNode;
+}

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

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

package/dist/types/components/Poster/PosterImage.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { anchorPoints } from "../../helpers";
 import { loadingOptions } from "../Image/Image";
 export declare const PosterImage: FC<PosterImageProps>;
@@ -27,4 +27,8 @@ export interface PosterImageProps {
      * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Poster.Image. 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`.
      */
     srcSet?: string;
+    /**
+     * Contents of the PosterImage.
+     */
+    children?: React.ReactNode;
 }

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

@@ -0,0 +1,21 @@
+import React, { FocusEvent } from "react";
+import { FormControlProps } from "../FormControl/FormControl";
+export interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id"> {
+    name: string;
+    label: string;
+    placeholder: string;
+    options: {
+        name: string;
+        value: string;
+    }[];
+    errorMessage?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onOpenChange?: () => void;
+    isFluid?: boolean;
+    isDisabled?: boolean;
+    isDefaultOpen?: boolean;
+    isRequired?: boolean;
+}
+export declare const Select: React.FC<SelectProps>;

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

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

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

@@ -0,0 +1,34 @@
+import { FC } from "react";
+import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
+/** `WIP`: Use `Switch` to toggle between checked and not checked. */
+export declare const Switch: FC<SwitchProps>;
+export interface SwitchProps {
+    /**
+     * label for screen readers to announce
+     */
+    label: string;
+    /**
+     * handler for blur
+     */
+    onBlur?: RadixSwitchProps["onBlur"];
+    /**
+     * show rendered label above input, useful for forms
+     */
+    showLabel?: boolean;
+    /**
+     * set the switch to be checked by default
+     */
+    defaultChecked?: RadixSwitchProps["defaultChecked"];
+    /**
+     * value for the switch, is applied to a hidden checkbox if within a form
+     */
+    value?: RadixSwitchProps["value"];
+    /**
+     * name for the hidden checkbox if within a form
+     */
+    name?: RadixSwitchProps["name"];
+    /**
+     * callback for when the switch is toggled
+     */
+    onCheckedChange?: RadixSwitchProps["onCheckedChange"];
+}

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

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

package/dist/types/styles.d.ts

@@ -20,6 +20,7 @@ import "./components/Poster/Poster.css";
 import "./components/RadioGroup/RadioGroup.css";
 import "./components/Rule/Rule.css";
 import "./components/Section/Section.css";
+import "./components/Select/Select.css";
 import "./components/SiteFooter/SiteFooter.css";
 import "./components/SiteHeader/SiteHeader.css";
 import "./components/Surface/Surface.css";
@@ -28,6 +29,7 @@ import "./components/TextInput/TextInput.css";
 import "./components/UniversalHeader/UniversalHeader.css";
 import "./components/VerticalSpace/VerticalSpace.css";
 import "./components/VisuallyHidden/VisuallyHidden.css";
+import "./components/Switch/Switch.css";
 import "./components/Base/Base.bt.css";
 import "./components/BrandLogo/BrandLogo.bt.css";
 import "./components/Button/Button.bt.css";
@@ -44,9 +46,12 @@ import "./components/Markup/Markup.bt.css";
 import "./components/Poster/Poster.bt.css";
 import "./components/RadioGroup/RadioGroup.bt.css";
 import "./components/Rule/Rule.bt.css";
+import "./components/Select/Select.bt.css";
 import "./components/SiteFooter/SiteFooter.bt.css";
 import "./components/SiteHeader/SiteHeader.bt.css";
 import "./components/Surface/Surface.bt.css";
 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "10.6.0",
+  "version": "10.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",
@@ -25,9 +25,15 @@
   "peerDependencies": {
     "react": "^18.0.0"
   },
+  "dependencies": {
+    "@radix-ui/react-dialog": "1.0.2",
+    "@radix-ui/react-label": "2.0.0",
+    "@radix-ui/react-select": "1.1.2",
+    "@radix-ui/react-switch": "^1.0.1"
+  },
   "devDependencies": {
-    "@arc-ui/fonts": "^10.6.0",
-    "@arc-ui/tokens": "^10.6.0",
+    "@arc-ui/fonts": "^10.7.0",
+    "@arc-ui/tokens": "^10.7.0",
     "@babel/core": "^7.14.3",
     "@babel/helper-define-map": "^7.14.3",
     "@storybook/addon-essentials": "^6.3.6",
@@ -37,12 +43,13 @@
     "@types/classnames": "^2.2.10",
     "@types/node": "^12.12.38",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "babel-loader": "^8.2.2",
     "camelcase": "^6.2.1",
     "cheerio": "^1.0.0-rc.3",
     "classnames": "^2.2.6",
+    "countries-list": "^2.6.1",
     "formik": "^2.2.9",
     "prop-types": "^15.7.2",
     "react": "^18.0.0",

package/dist/_shared/index.es-793935a1.js

@@ -1,286 +0,0 @@
-/**
- * Do not edit directly
- * Generated file
- */
-const ArcBreakpointM = 768;
-const ArcBreakpointL = 1024;
-const iconsSelected = [
-  "bt3GFill",
-  "bt4GFill",
-  "bt5GFill",
-  "btAccessibilityFill",
-  "btAddFill",
-  "btAlertFill",
-  "btAlertTriangleFill",
-  "btAnswerPointFill",
-  "btArchitectureFill",
-  "btArchiveFill",
-  "btArrowAltDownFill",
-  "btArrowAltLeftFill",
-  "btArrowAltLeftRightFill",
-  "btArrowAltRightFill",
-  "btArrowAltUpFill",
-  "btArrowDownFill",
-  "btArrowLeftFill",
-  "btArrowLeftRightFill",
-  "btArrowRightFill",
-  "btArrowUpFill",
-  "btAttachmentAltFill",
-  "btAttachmentFill",
-  "btBagFill",
-  "btBasketFill",
-  "btBinFill",
-  "btBlockedNumberFill",
-  "btBoatFill",
-  "btBroadbandFill",
-  "btBuildingFill",
-  "btBurgerMenuFill",
-  "btCakeFill",
-  "btCalenderAcceptedFill",
-  "btCalenderAddEventFill",
-  "btCalenderFill",
-  "btCalenderPaymentPlanAltFill",
-  "btCalenderPaymentPlanFill",
-  "btCalenderSpecialDateFill",
-  "btCallRoutingFill",
-  "btCallerIdFill",
-  "btChatFill",
-  "btChatMessageFill",
-  "btChatTypingFill",
-  "btClipboardFill",
-  "btClipboardTickFill",
-  "btClockFill",
-  "btCloudAlertFill",
-  "btCloudDesktopFill",
-  "btCloudFill",
-  "btCloudLinkFill",
-  "btCloudMeetingFill",
-  "btCloudPhoneFill",
-  "btCloudSecurityFill",
-  "btCloudUploadFill",
-  "btCloudUserFill",
-  "btCollapseFill",
-  "btCompareFill",
-  "btComputerChipFill",
-  "btConnectedCareFill",
-  "btContactDetailsFill",
-  "btContactNoDetailsFill",
-  "btContactsFill",
-  "btCreditCardFill",
-  "btCrossAlt2pxFill",
-  "btCrossAltFill",
-  "btCrossFill",
-  "btDashboardFill",
-  "btDepositFill",
-  "btDesignFill",
-  "btDeskPhoneFill",
-  "btDetailsFill",
-  "btDetailsGroupFill",
-  "btDexterityFill",
-  "btDialPadFill",
-  "btDialPadWithHandFill",
-  "btDialledNumberDestinationFill",
-  "btDigitalCollaborationFill",
-  "btDisabilityFill",
-  "btDiscountFill",
-  "btDivertOnBusyFill",
-  "btDocumentAndPencilFill",
-  "btDocumentArticleFill",
-  "btDocumentBillsFill",
-  "btDocumentDownloadFill",
-  "btDocumentFill",
-  "btDocumentPdfFill",
-  "btDocumentWithCopyCrossedOutFill",
-  "btDocumentWithCopyFill",
-  "btDynamicCollaborationFill",
-  "btEducationFill",
-  "btEmailReadFill",
-  "btEmailUnreadFill",
-  "btEngagedFill",
-  "btEthernetFill",
-  "btFaceHappyFill",
-  "btFaceNeutralFill",
-  "btFaceSadFill",
-  "btFaceVeryHappyFill",
-  "btFirstAidFill",
-  "btFolderFill",
-  "btGamingFill",
-  "btGenderFemaleAndMaleFill",
-  "btGenderFemaleFill",
-  "btGenderMaleFill",
-  "btGenderNeutralFill",
-  "btGiftFill",
-  "btGlobalConnectivityFill",
-  "btGlobeFill",
-  "btGlossaryFill",
-  "btGondolaFill",
-  "btGraphBarAndPlotFill",
-  "btGraphBarChartFill",
-  "btGraphDownFill",
-  "btGraphUpAndDownFill",
-  "btGraphUpFill",
-  "btHeadsetFill",
-  "btHeartBrokenFill",
-  "btHeartCareFill",
-  "btHeartFill",
-  "btHoldingHeartFill",
-  "btHomeFill",
-  "btHomeTechExpertFill",
-  "btHometownFill",
-  "btHubAndMobileFill",
-  "btHubFill",
-  "btHubOldFill",
-  "btIpFill",
-  "btIPv6Fill",
-  "btIdeaFill",
-  "btInfoFill",
-  "btJsonFill",
-  "btJigsawFill",
-  "btJourneyFill",
-  "btKeyFill",
-  "btKnifeAndForkFill",
-  "btLanFill",
-  "btLaptopAndMobileFill",
-  "btLaptopConnectAndShareFill",
-  "btLaptopDetectionFill",
-  "btLaptopFill",
-  "btLaptopSecureFill",
-  "btLaptopVideoConferenceFill",
-  "btLaptopUsersFill",
-  "btLayoutGridLargeFill",
-  "btLayoutGridMediumFill",
-  "btLayoutGridSmallFill",
-  "btLayoutRowsLargeFill",
-  "btLayoutRowsMediumFill",
-  "btLayoutRowsSmallFill",
-  "btLeadershipFill",
-  "btLinkFill",
-  "btLiteracyNumeracyFill",
-  "btLocationFill",
-  "btLockedFill",
-  "btLogoutFill",
-  "btMedalFill",
-  "btMedalWithStarFill",
-  "btMeetingSpaceFill",
-  "btMegaphoneFill",
-  "btMicrophoneFill",
-  "btMobileFill",
-  "btMobileTransferCallFill",
-  "btMobileWithHandFill",
-  "btMobilityFill",
-  "btMoneyFill",
-  "btMonitorFill",
-  "btMonitorTickFill",
-  "btMoonFill",
-  "btMouseFill",
-  "btNamingFill",
-  "btNewWindowFill",
-  "btNoHearingFill",
-  "btNoHearingOrSpeechFill",
-  "btNoSpeechFill",
-  "btNoViewFill",
-  "btNotificationFill",
-  "btPaperTowelFill",
-  "btPasswordFIll",
-  "btPaymentMethodFill",
-  "btPayphoneFill",
-  "btPhoneBarredFill",
-  "btPhoneFill",
-  "btPictureFill",
-  "btPinAltFill",
-  "btPinFill",
-  "btPlaneFill",
-  "btPlanningFill",
-  "btPlantFill",
-  "btPlayFill",
-  "btPodcastFill",
-  "btPresentationFill",
-  "btPriceFill",
-  "btPrinterFill",
-  "btProcessFill",
-  "btProcessMiningFill",
-  "btProcessRolesFill",
-  "btProportionalCallDistributionFill",
-  "btQuestionFill",
-  "btRecyclingFill",
-  "btRefreshFill",
-  "btRefundFill",
-  "btReleaseFill",
-  "btResolution4KFill",
-  "btResolutionHdFill",
-  "btResolutionSdFill",
-  "btScaleFill",
-  "btSearchFill",
-  "btServerFill",
-  "btSettingsAlt2Fill",
-  "btSettingsAltFill",
-  "btSettingsFill",
-  "btShieldAddFill",
-  "btShieldFill",
-  "btShieldQuestionMarkFIll",
-  "btShieldSecurityFill",
-  "btShieldTickFill",
-  "btShipFill",
-  "btSignalFill",
-  "btSignatureFill",
-  "btSignpostFill",
-  "btSimFill",
-  "btSimpleFill",
-  "btSkiingFill",
-  "btSkisFill",
-  "btSnowboardingFill",
-  "btSpannerFill",
-  "btSpeakerFullVolumeFill",
-  "btSpeakerHalfVolumeFill",
-  "btSpeakerLowVolumeFill",
-  "btSpeakerMuteFill",
-  "btSpeedFasterFill",
-  "btSpeedFastestFill",
-  "btSpeedGuaranteeFill",
-  "btSpeedSlowFill",
-  "btSportFootballFill",
-  "btStarFill",
-  "btStopFill",
-  "btStopAltFill",
-  "btSuitcaseFill",
-  "btSunFill",
-  "btSwitchFill",
-  "btTvArialFill",
-  "btTvFill",
-  "btTvAndHubFill",
-  "btTvAndHubAndPhoneFill",
-  "btTabletFill",
-  "btTabletWithKeyboardFill",
-  "btTagFill",
-  "btTaxonomyFill",
-  "btTechBarFill",
-  "btTelemarkFill",
-  "btThumbsDownFill",
-  "btThumbsUpFill",
-  "btTickAlt2pxFill",
-  "btTickFill",
-  "btTickVariantFill",
-  "btTree1Fill",
-  "btTree2Fill",
-  "btTrophyFill",
-  "btUkFill",
-  "btUkHotspotsFill",
-  "btUsbFill",
-  "btUnlockedFill",
-  "btUserAddFill",
-  "btUserCloudFill",
-  "btUserDuplicateProfileFill",
-  "btUserFill",
-  "btUserGroupsFill",
-  "btUserParentAndChildFill",
-  "btUserWithQuestionmarkFill",
-  "btVanFill",
-  "btViewFill",
-  "btVirusFill",
-  "btWholeHomeWifiFill",
-  "btWiFiFill",
-  "btWizardFill",
-  "btWorkstationFill"
-];
-
-export { ArcBreakpointM as A, ArcBreakpointL as a, iconsSelected as i };