@arc-ui/components 10.8.1 → 11.0.0

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

@@ -1,5 +1,5 @@
-import { icons } from "@arc-ui/tokens";
 import React, { FC } from "react";
+import { ArcIcon } from "../../types/arc-icon";
 export declare type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
 export declare type Ref = React.Ref<ElementUnion> | null;
 /**
@@ -10,7 +10,7 @@ export interface ButtonIconProps {
     /**
      * Icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * Should the icon be a default chevron?
      */
@@ -55,7 +55,7 @@ export interface ButtonProps extends ButtonElementProps, LinkElementProps {
     /**
      * Button icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * How should a Button icon be displayed?
      */

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

@@ -1,5 +1,5 @@
-import { icons } from "@arc-ui/tokens";
 import { FC } from "react";
+import { ArcIcon } from "../../types/arc-icon";
 /**
  * Use `Icon` to display brand iconography.
  */
@@ -14,14 +14,10 @@ export interface IconProps {
      * Should the Icon component be styled as an inline element?
      */
     isInline?: boolean;
-    /**
-     * Should a selected variant of the Icon be shown?
-     */
-    isSelected?: boolean;
     /**
      * Icon variant.
      */
-    icon?: typeof icons[number];
+    icon?: ArcIcon;
     /**
      * Alternative text label for the Icon.
      */
@@ -30,4 +26,8 @@ export interface IconProps {
      * Size of the Icon, in pixels.
      */
     size?: number;
+    /**
+     * value for data-testid
+     */
+    testId?: string;
 }

package/dist/types/types/arc-icon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from "react";
+export declare type ArcIcon = React.FC<SVGProps<SVGSVGElement>>;

package/package.json

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

package/dist/_shared/cjs/Icon-bb5a5fd1.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var index = require('./index-78b35bc1.js');
-var index_es = require('./index.es-f590caaf.js');
-var index$1 = require('./index-45bfb67b.js');
-var React = require('react');
-var suffixModifier = require('./suffix-modifier-edf7851e.js');
-var Surface = require('./Surface-d6b8010e.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * Use `Icon` to display brand iconography.
- */
-var Icon = function (_a) {
-    var _b;
-    var _c = _a.color, color = _c === void 0 ? "auto" : _c, icon = _a.icon, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isSelected, isSelected = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = index.__rest(_a, ["color", "icon", "isInline", "isSelected", "label", "size"]);
-    var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("span", index.__assign({ "aria-label": label, className: index$1.classNames((_b = {},
-            _b["arc-Icon"] = true,
-            _b[suffixModifier.suffixModifier("arc-Icon--color", color)] = color !== "auto",
-            _b["arc-Icon--".concat(icon).concat(isSelected && index_es.iconsSelected.includes("".concat(icon, "Fill")) ? "Fill" : "")] = icon,
-            _b["arc-Icon--inline"] = isInline,
-            _b["arc-Icon--onDarkSurface"] = surface === "dark",
-            _b)), role: label ? "img" : undefined, style: {
-            height: size,
-            width: size
-        } }, index.filterDataAttrs(props))));
-};
-
-exports.Icon = Icon;

package/dist/_shared/cjs/index.es-f590caaf.js

@@ -1,290 +0,0 @@
-'use strict';
-
-/**
- * Do not edit directly
- * Generated file
- */
-var ArcBreakpointM = 768;
-var ArcBreakpointL = 1024;
-var 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"
-];
-
-exports.ArcBreakpointL = ArcBreakpointL;
-exports.ArcBreakpointM = ArcBreakpointM;
-exports.iconsSelected = iconsSelected;

package/dist/_shared/esm/Button-d59c31a2.js

@@ -1,51 +0,0 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
-import { c as classNames } from './index-2ae58626.js';
-import React, { forwardRef, useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
-import { I as Icon } from './Icon-2fd92daa.js';
-import { C as Context } from './Surface-d515d212.js';
-
-/**
- * Use `Button` to allow users to take actions with clicks and taps.
- */
-var Button = forwardRef(function (_a, ref) {
-    var _b;
-    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
-    var surface = useContext(Context).surface;
-    var buttonClasses = classNames((_b = {
-            "arc-Button": true,
-            "arc-Button--displayBlock": isDisplayBlock
-        },
-        _b[suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
-        _b["arc-Button--fullWidth"] = isFullWidth,
-        _b[suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") &&
-            iconPosition &&
-            iconPosition !== "afterText",
-        _b["arc-Button--hasSupportingText"] = supportingText,
-        _b["arc-Button--onDarkSurface"] = surface === "dark",
-        _b));
-    var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, filterDataAttrs(props));
-    var buttonText = supportingText ? (React.createElement("span", null,
-        React.createElement("span", { className: "arc-Button-text" }, label),
-        React.createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React.createElement("span", { className: "arc-Button-text" }, label));
-    var buttonIcon = icon || fill === "flat" ? (React.createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
-    if (href && !isDisabled) {
-        return (React.createElement("a", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
-            React.createElement("span", { className: "arc-Button-inner" },
-                buttonText,
-                buttonIcon)));
-    }
-    return (React.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
-        React.createElement("span", { className: "arc-Button-inner" },
-            buttonText,
-            buttonIcon)));
-});
-var ButtonIcon = function (_a) {
-    var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React.createElement("span", { className: classNames({
-            "arc-Button-icon": true,
-            "arc-Button-icon--chevron": isChevron
-        }) }, isChevron ? (React.createElement(Icon, { icon: "btChevron".concat(isBeforeText ? "Left" : "Right", "Mid") })) : (React.createElement(Icon, { icon: icon }))));
-};
-
-export { Button as B };

package/dist/_shared/esm/Icon-2fd92daa.js

@@ -1,27 +0,0 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
-import { i as iconsSelected } from './index.es-42f84e2d.js';
-import { c as classNames } from './index-2ae58626.js';
-import React, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
-import { C as Context } from './Surface-d515d212.js';
-
-/**
- * Use `Icon` to display brand iconography.
- */
-var Icon = function (_a) {
-    var _b;
-    var _c = _a.color, color = _c === void 0 ? "auto" : _c, icon = _a.icon, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isSelected, isSelected = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["color", "icon", "isInline", "isSelected", "label", "size"]);
-    var surface = useContext(Context).surface;
-    return (React.createElement("span", __assign({ "aria-label": label, className: classNames((_b = {},
-            _b["arc-Icon"] = true,
-            _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
-            _b["arc-Icon--".concat(icon).concat(isSelected && iconsSelected.includes("".concat(icon, "Fill")) ? "Fill" : "")] = icon,
-            _b["arc-Icon--inline"] = isInline,
-            _b["arc-Icon--onDarkSurface"] = surface === "dark",
-            _b)), role: label ? "img" : undefined, style: {
-            height: size,
-            width: size
-        } }, filterDataAttrs(props))));
-};
-
-export { Icon as I };