@arc-ui/community-components 3.10.0 → 3.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +11 -11
- package/CHANGELOG.md +14 -0
- package/lib/ActionTile/ActionTile.cjs +5 -3
- package/lib/ActionTile/ActionTile.mjs +5 -3
- package/lib/ActionTile/styles.css +1 -1
- package/lib/HeaderBarNotification/HeaderBarNotification.cjs +6 -4
- package/lib/HeaderBarNotification/HeaderBarNotification.mjs +6 -4
- package/lib/HeaderBarNotification/styles.css +1 -1
- package/lib/LinkTile/LinkTile.cjs +6 -3
- package/lib/LinkTile/LinkTile.mjs +6 -3
- package/lib/LinkTile/styles.css +1 -1
- package/lib/index.cjs +78 -72
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +10 -0
- package/lib/index.d.mts +10 -0
- package/lib/index.mjs +78 -72
- package/lib/index.mjs.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +3 -3
- package/src/components/ActionTile/ActionTile.module.css +10 -0
- package/src/components/ActionTile/ActionTile.tsx +9 -1
- package/src/components/HeaderBarNotification/HeaderBarNotification.module.css +40 -0
- package/src/components/HeaderBarNotification/HeaderBarNotification.tsx +12 -2
- package/src/components/LinkTile/LinkTile.module.css +5 -0
- package/src/components/LinkTile/LinkTile.tsx +10 -1
- package/versions.json +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
|
|
2
|
-
> @arc-ui/community-components@3.
|
|
2
|
+
> @arc-ui/community-components@3.12.0 build /builds/enterprise/frontend/arc-community/packages/components
|
|
3
3
|
> rimraf lib dist && rollup -c && generate-subpath-css && pnpm run build:clean
|
|
4
4
|
|
|
5
|
-
Browserslist: browsers data (caniuse-lite) is
|
|
5
|
+
Browserslist: browsers data (caniuse-lite) is 11 months old. Please run:
|
|
6
6
|
npx update-browserslist-db@latest
|
|
7
7
|
Why you should do it regularly: https://github.com/browserslist/update-db#readme
|
|
8
8
|
[36m
|
|
9
9
|
[1msrc/index.ts[22m → [1mlib/index.cjs, lib/index.mjs[22m...[39m
|
|
10
|
-
[32mcreated [1mlib/index.cjs, lib/index.mjs[22m in [
|
|
10
|
+
[32mcreated [1mlib/index.cjs, lib/index.mjs[22m in [1m13.9s[22m[39m
|
|
11
11
|
[36m
|
|
12
12
|
[1m./lib/types/index.d.ts[22m → [1mlib/index.d.mts, lib/index.d.cts[22m...[39m
|
|
13
13
|
[1m[33m(!) Unresolved dependencies[39m[22m
|
|
14
14
|
[90mhttps://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency[39m
|
|
15
15
|
[1m@arc-ui/components/NavigationHeader[22m (imported by "lib/types/components/HeaderBarNotification/HeaderBarNotification.d.ts")
|
|
16
16
|
[1m@arc-ui/components/MediaCard[22m (imported by "lib/types/components/ArticleCarousel/ArticleCarousel.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts")
|
|
17
|
-
[1m@arc-ui/components/Download[22m (imported by "lib/types/components/DownloadList/DownloadList.d.ts")
|
|
18
17
|
[1m@arc-ui/components/Avatar[22m (imported by "lib/types/components/Author/Author.d.ts")
|
|
19
|
-
[1m@arc-ui/components/
|
|
20
|
-
[1m@arc-ui/components/Heading[22m (imported by "lib/types/components/CopyLead/CopyLead.d.ts", "lib/types/components/FeaturePost/FeaturePost.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/Summary/Summary.d.ts", "lib/types/components/BannerWithTabs/BannerWithTabs.d.ts", "lib/types/components/SectionHeading/SectionHeading.d.ts", "lib/types/components/PartnerBrandLogos/PartnerBrandLogos.d.ts", "lib/types/components/Accordion/components/AccordionHeading/AccordionHeading.d.ts", "lib/types/components/ArticleSidebar/types/text-section.d.ts", "lib/types/components/ArticleSidebar/types/share.d.ts", "lib/types/components/ArticleSidebar/types/link-section.d.ts", "lib/types/components/ArticleSidebar/types/topic.d.ts" and "lib/types/components/PartnerBrandLogos/components/PartnerLogoSubgroup/PartnerLogoSubgroup.d.ts")
|
|
18
|
+
[1m@arc-ui/components/Heading[22m (imported by "lib/types/components/CopyLead/CopyLead.d.ts", "lib/types/components/FeaturePost/FeaturePost.d.ts", "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/Summary/Summary.d.ts", "lib/types/components/BannerWithTabs/BannerWithTabs.d.ts", "lib/types/components/SectionHeading/SectionHeading.d.ts", "lib/types/components/PartnerBrandLogos/PartnerBrandLogos.d.ts", "lib/types/components/Accordion/components/AccordionHeading/AccordionHeading.d.ts", "lib/types/components/ArticleSidebar/types/text-section.d.ts", "lib/types/components/ArticleSidebar/types/link-section.d.ts", "lib/types/components/ArticleSidebar/types/topic.d.ts", "lib/types/components/ArticleSidebar/types/share.d.ts" and "lib/types/components/PartnerBrandLogos/components/PartnerLogoSubgroup/PartnerLogoSubgroup.d.ts")
|
|
21
19
|
[1m@arc-ui/components/VideoPlayer[22m (imported by "lib/types/components/CopyLead/CopyLead.d.ts" and "lib/types/components/FeaturePost/FeaturePost.d.ts")
|
|
20
|
+
[1m@arc-ui/components/Download[22m (imported by "lib/types/components/DownloadList/DownloadList.d.ts")
|
|
21
|
+
[1m@arc-ui/components/ButtonV2[22m (imported by "lib/types/components/Highlights/Highlights.d.ts" and "lib/types/components/PromoListing/PromoListing.d.ts")
|
|
22
22
|
[1m@arc-ui/components/ImpactCard[22m (imported by "lib/types/components/PromoListing/PromoListing.d.ts")
|
|
23
23
|
[1m@arc-ui/components/InformationCard[22m (imported by "lib/types/components/PromoListing/PromoListing.d.ts", "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts" and "lib/types/components/ProductNavigation/types/product-list.d.ts")
|
|
24
24
|
[1m@arc-ui/components/TypographyCard[22m (imported by "lib/types/components/PromoListing/PromoListing.d.ts" and "lib/types/components/BusinessSegmentSwitcher/types/types.d.ts")
|
|
@@ -31,17 +31,17 @@ Browserslist: browsers data (caniuse-lite) is 10 months old. Please run:
|
|
|
31
31
|
[1m@arc-ui/components/AppButton[22m (imported by "lib/types/components/FeaturePost/types/feature-post-app-button-footer.d.ts")
|
|
32
32
|
[1mreact-player/types[22m (imported by "lib/types/internal/VideoCardPlayer/VideoCardPlayer.d.ts" and "lib/types/internal/VideoCardPlayer/types/player-props.d.ts")
|
|
33
33
|
[1m@arc-ui/components/Visible[22m (imported by "lib/types/internal/VideoCardPlayer/components/VideoCardThumbnail/VideoCardThumbnail.d.ts")
|
|
34
|
-
[32mcreated [1mlib/index.d.mts, lib/index.d.cts[22m in [
|
|
34
|
+
[32mcreated [1mlib/index.d.mts, lib/index.d.cts[22m in [1m406ms[22m[39m
|
|
35
35
|
[36m
|
|
36
36
|
[1m./src/components/Accordion/index.ts, ./src/components/ActionTile/index.ts, ./src/components/ArticleCarousel/index.ts, ./src/components/ArticleSidebar/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/BusinessSegmentSwitcher/index.ts, ./src/components/ContentInfoWidget/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FAQs/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/HeaderBarNotification/index.ts, ./src/components/Highlights/index.ts, ./src/components/InlineLinkGroup/index.ts, ./src/components/LinkTile/index.ts, ./src/components/PartnerBrandLogos/index.ts, ./src/components/ProductNavigation/index.ts, ./src/components/PromoListing/index.ts, ./src/components/PromoListingThumbnailSignpost/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts, ./src/components/ThumbnailSignpost/index.ts, ./src/components/VideoHeroCard/index.ts, ./src/components/VideoPortraitCard/index.ts[22m → [1mlib[22m...[39m
|
|
37
|
-
[32mcreated [1mlib[22m in [
|
|
37
|
+
[32mcreated [1mlib[22m in [1m20s[22m[39m
|
|
38
38
|
[36m
|
|
39
39
|
[1m./src/components/Accordion/index.ts, ./src/components/ActionTile/index.ts, ./src/components/ArticleCarousel/index.ts, ./src/components/ArticleSidebar/index.ts, ./src/components/Author/index.ts, ./src/components/BannerWithTabs/index.ts, ./src/components/BusinessSegmentSwitcher/index.ts, ./src/components/ContentInfoWidget/index.ts, ./src/components/CopyLead/index.ts, ./src/components/DownloadList/index.ts, ./src/components/FAQs/index.ts, ./src/components/FeaturePost/index.ts, ./src/components/HeaderBarNotification/index.ts, ./src/components/Highlights/index.ts, ./src/components/InlineLinkGroup/index.ts, ./src/components/LinkTile/index.ts, ./src/components/PartnerBrandLogos/index.ts, ./src/components/ProductNavigation/index.ts, ./src/components/PromoListing/index.ts, ./src/components/PromoListingThumbnailSignpost/index.ts, ./src/components/Quote/index.ts, ./src/components/SectionHeading/index.ts, ./src/components/Statistics/index.ts, ./src/components/Summary/index.ts, ./src/components/ThumbnailSignpost/index.ts, ./src/components/VideoHeroCard/index.ts, ./src/components/VideoPortraitCard/index.ts[22m → [1mlib[22m...[39m
|
|
40
|
-
[32mcreated [1mlib[22m in [
|
|
41
|
-
Browserslist: browsers data (caniuse-lite) is
|
|
40
|
+
[32mcreated [1mlib[22m in [1m17s[22m[39m
|
|
41
|
+
Browserslist: browsers data (caniuse-lite) is 11 months old. Please run:
|
|
42
42
|
npx update-browserslist-db@latest
|
|
43
43
|
Why you should do it regularly: https://github.com/browserslist/update-db#readme
|
|
44
44
|
|
|
45
|
-
> @arc-ui/community-components@3.
|
|
45
|
+
> @arc-ui/community-components@3.12.0 build:clean /builds/enterprise/frontend/arc-community/packages/components
|
|
46
46
|
> rimraf ./lib/types ./lib/styles.js ./lib/index.js ./lib/index.js.map
|
|
47
47
|
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @arc-ui/community-components
|
|
2
2
|
|
|
3
|
+
## 3.12.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 0cf14aa: Add a neutral tone prop variant to LinkTile.
|
|
8
|
+
- 3563378: Add an isCompact prop variant to ActionTile.
|
|
9
|
+
- 3563378: Update ActionTile to use isCompact prop
|
|
10
|
+
|
|
11
|
+
## 3.11.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- e30e127: New abandoned cart notification
|
|
16
|
+
|
|
3
17
|
## 3.10.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -6,7 +6,7 @@ var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
|
|
|
6
6
|
var Icon = require('@arc-ui/components/Icon');
|
|
7
7
|
var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
|
|
8
8
|
|
|
9
|
-
var styles = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
|
|
9
|
+
var styles = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--compact":"ActionTile-module_action-tile--compact__wq5Aa","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* Do not edit directly
|
|
@@ -18,19 +18,21 @@ const BtIconTickAlt2Px =
|
|
|
18
18
|
|
|
19
19
|
var ActionTile = function (_a) {
|
|
20
20
|
var _b, _c;
|
|
21
|
-
var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.
|
|
21
|
+
var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.isCompact, isCompact = _d === void 0 ? false : _d, _e = _a.isActive, isActive = _e === void 0 ? false : _e, onClick = _a.onClick, props = tslib_es6.__rest(_a, ["icon", "activeIcon", "heading", "isCompact", "isActive", "onClick"]);
|
|
22
22
|
var displayIcon = isActive && activeIcon ? activeIcon : icon;
|
|
23
|
+
var iconSize = isCompact ? 40 : 48;
|
|
23
24
|
var content = (React.createElement(React.Fragment, null,
|
|
24
25
|
React.createElement("div", { className: index.classNames(styles["action-tile-content"], (_b = {},
|
|
25
26
|
_b[styles["action-tile-content--without-icon"]] = !displayIcon,
|
|
26
27
|
_b)) },
|
|
27
28
|
displayIcon && (React.createElement("div", { className: styles["action-tile-icon"] },
|
|
28
|
-
React.createElement(Icon.Icon, { icon: displayIcon, size:
|
|
29
|
+
React.createElement(Icon.Icon, { icon: displayIcon, size: iconSize }))),
|
|
29
30
|
React.createElement("span", { className: styles["action-tile-heading"] }, heading)),
|
|
30
31
|
isActive && (React.createElement("div", { className: styles["action-tile-tick"] },
|
|
31
32
|
React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
|
|
32
33
|
return (React.createElement("button", tslib_es6.__assign({ type: "button", className: index.classNames(styles["action-tile"], (_c = {},
|
|
33
34
|
_c[styles["action-tile--active"]] = isActive,
|
|
35
|
+
_c[styles["action-tile--compact"]] = isCompact,
|
|
34
36
|
_c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs.filterAttrs(props)), content));
|
|
35
37
|
};
|
|
36
38
|
|
|
@@ -4,7 +4,7 @@ import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
|
|
|
4
4
|
import { Icon } from '@arc-ui/components/Icon';
|
|
5
5
|
import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
|
|
6
6
|
|
|
7
|
-
var styles = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
|
|
7
|
+
var styles = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--compact":"ActionTile-module_action-tile--compact__wq5Aa","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
@@ -16,19 +16,21 @@ const BtIconTickAlt2Px =
|
|
|
16
16
|
|
|
17
17
|
var ActionTile = function (_a) {
|
|
18
18
|
var _b, _c;
|
|
19
|
-
var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.
|
|
19
|
+
var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.isCompact, isCompact = _d === void 0 ? false : _d, _e = _a.isActive, isActive = _e === void 0 ? false : _e, onClick = _a.onClick, props = __rest(_a, ["icon", "activeIcon", "heading", "isCompact", "isActive", "onClick"]);
|
|
20
20
|
var displayIcon = isActive && activeIcon ? activeIcon : icon;
|
|
21
|
+
var iconSize = isCompact ? 40 : 48;
|
|
21
22
|
var content = (React__default.createElement(React__default.Fragment, null,
|
|
22
23
|
React__default.createElement("div", { className: classNames(styles["action-tile-content"], (_b = {},
|
|
23
24
|
_b[styles["action-tile-content--without-icon"]] = !displayIcon,
|
|
24
25
|
_b)) },
|
|
25
26
|
displayIcon && (React__default.createElement("div", { className: styles["action-tile-icon"] },
|
|
26
|
-
React__default.createElement(Icon, { icon: displayIcon, size:
|
|
27
|
+
React__default.createElement(Icon, { icon: displayIcon, size: iconSize }))),
|
|
27
28
|
React__default.createElement("span", { className: styles["action-tile-heading"] }, heading)),
|
|
28
29
|
isActive && (React__default.createElement("div", { className: styles["action-tile-tick"] },
|
|
29
30
|
React__default.createElement(Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
|
|
30
31
|
return (React__default.createElement("button", __assign({ type: "button", className: classNames(styles["action-tile"], (_c = {},
|
|
31
32
|
_c[styles["action-tile--active"]] = isActive,
|
|
33
|
+
_c[styles["action-tile--compact"]] = isCompact,
|
|
32
34
|
_c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
|
|
33
35
|
};
|
|
34
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ActionTile-module_action-tile__JPwGb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;min-width:230px;height:164px;min-height:132px;padding:var(--sem-space-padding-110);gap:var(--sem-space-padding-70);border-radius:var(--sem-border-radius-xl);border:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);background:var(--sem-color-bg-secondary-light-default);text-decoration:none;cursor:pointer;font:inherit;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;transition:border-color 0.2s ease,box-shadow 0.2s ease;position:relative;isolation:isolate;overflow:visible}.ActionTile-module_action-tile-content__ZkgHc{display:flex;flex-direction:column;gap:var(--sem-space-padding-60);flex:1;align-items:flex-start;align-self:stretch}.ActionTile-module_action-tile-content--without-icon__7F5xj{justify-content:center}.ActionTile-module_action-tile-icon__PY1EN{display:flex;align-items:center;justify-content:flex-start;width:48px;height:48px;color:var(--sem-color-fg-secondary-light-default);transition:color 0.2s ease}.ActionTile-module_action-tile-heading__Uxdu9{font-family:var(--sem-font-family-heading);font-size:var(--sem-font-size-125);font-weight:var(--sem-font-weight-semi);line-height:var(--sem-line-height-base-scale-m);letter-spacing:0;color:var(--sem-color-fg-secondary-light-default);margin:0;transition:color 0.2s ease;width:100%;word-wrap:break-word;word-wrap:break-word;align-self:stretch;flex-grow:1;text-align:left}.ActionTile-module_action-tile-content--without-icon__7F5xj .ActionTile-module_action-tile-heading__Uxdu9{flex-grow:0}.ActionTile-module_action-tile--active__-aWze{background:var(--sem-color-bg-primary-light-subtle-alt);border-color:var(--sem-color-fg-primary-light-minimal);box-shadow:none}.ActionTile-module_action-tile--active__-aWze .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile--active__-aWze .ActionTile-module_action-tile-icon__PY1EN{color:var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile-tick__vhsJE{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--sem-border-radius-l);background:var(--sem-color-fg-primary-light-minimal);color:var(--sem-color-fg-secondary-light-alt);flex-shrink:0;position:absolute;top:-4px;right:-4px;z-index:1}.ActionTile-module_action-tile__JPwGb:hover{border-color:var(--button-v2-colors-light-text-hover);box-shadow:0 0 0 1px var(--button-v2-colors-light-text-hover)}.ActionTile-module_action-tile__JPwGb:hover .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile__JPwGb:hover .ActionTile-module_action-tile-icon__PY1EN{color:var(--button-v2-colors-light-text-hover)}.ActionTile-module_action-tile--active__-aWze:hover{background:var(--sem-color-bg-primary-light-subtle-alt);border-color:var(--sem-color-fg-primary-light-minimal);box-shadow:0 0 0 1px var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile--active__-aWze:hover .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile--active__-aWze:hover .ActionTile-module_action-tile-icon__PY1EN{color:var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile__JPwGb:focus-visible{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}
|
|
1
|
+
.ActionTile-module_action-tile__JPwGb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;min-width:230px;height:164px;min-height:132px;padding:var(--sem-space-padding-110);gap:var(--sem-space-padding-70);border-radius:var(--sem-border-radius-xl);border:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);background:var(--sem-color-bg-secondary-light-default);text-decoration:none;cursor:pointer;font:inherit;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;transition:border-color 0.2s ease,box-shadow 0.2s ease;position:relative;isolation:isolate;overflow:visible}.ActionTile-module_action-tile-content__ZkgHc{display:flex;flex-direction:column;gap:var(--sem-space-padding-60);flex:1;align-items:flex-start;align-self:stretch}.ActionTile-module_action-tile-content--without-icon__7F5xj{justify-content:center}.ActionTile-module_action-tile-icon__PY1EN{display:flex;align-items:center;justify-content:flex-start;width:48px;height:48px;color:var(--sem-color-fg-secondary-light-default);transition:color 0.2s ease}.ActionTile-module_action-tile-heading__Uxdu9{font-family:var(--sem-font-family-heading);font-size:var(--sem-font-size-125);font-weight:var(--sem-font-weight-semi);line-height:var(--sem-line-height-base-scale-m);letter-spacing:0;color:var(--sem-color-fg-secondary-light-default);margin:0;transition:color 0.2s ease;width:100%;word-wrap:break-word;word-wrap:break-word;align-self:stretch;flex-grow:1;text-align:left}.ActionTile-module_action-tile--compact__wq5Aa .ActionTile-module_action-tile-icon__PY1EN{width:40px;height:40px}.ActionTile-module_action-tile--compact__wq5Aa .ActionTile-module_action-tile-heading__Uxdu9{font-size:16px;line-height:24px}.ActionTile-module_action-tile-content--without-icon__7F5xj .ActionTile-module_action-tile-heading__Uxdu9{flex-grow:0}.ActionTile-module_action-tile--active__-aWze{background:var(--sem-color-bg-primary-light-subtle-alt);border-color:var(--sem-color-fg-primary-light-minimal);box-shadow:none}.ActionTile-module_action-tile--active__-aWze .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile--active__-aWze .ActionTile-module_action-tile-icon__PY1EN{color:var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile-tick__vhsJE{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--sem-border-radius-l);background:var(--sem-color-fg-primary-light-minimal);color:var(--sem-color-fg-secondary-light-alt);flex-shrink:0;position:absolute;top:-4px;right:-4px;z-index:1}.ActionTile-module_action-tile__JPwGb:hover{border-color:var(--button-v2-colors-light-text-hover);box-shadow:0 0 0 1px var(--button-v2-colors-light-text-hover)}.ActionTile-module_action-tile__JPwGb:hover .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile__JPwGb:hover .ActionTile-module_action-tile-icon__PY1EN{color:var(--button-v2-colors-light-text-hover)}.ActionTile-module_action-tile--active__-aWze:hover{background:var(--sem-color-bg-primary-light-subtle-alt);border-color:var(--sem-color-fg-primary-light-minimal);box-shadow:0 0 0 1px var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile--active__-aWze:hover .ActionTile-module_action-tile-heading__Uxdu9,.ActionTile-module_action-tile--active__-aWze:hover .ActionTile-module_action-tile-icon__PY1EN{color:var(--sem-color-fg-primary-light-minimal)}.ActionTile-module_action-tile__JPwGb:focus-visible{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var tslib_es6 = require('../_shared/cjs/tslib.es6-BxB9I209.cjs');
|
|
4
4
|
var React = require('react');
|
|
5
|
+
var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
|
|
5
6
|
var filterAttrs = require('../_shared/cjs/filter-attrs-BizjMsy0.cjs');
|
|
6
7
|
var NavigationHeader = require('@arc-ui/components/NavigationHeader');
|
|
7
8
|
var Popover = require('@arc-ui/components/Popover');
|
|
@@ -20,11 +21,12 @@ var ButtonV2 = require('@arc-ui/components/ButtonV2');
|
|
|
20
21
|
const BtIconCrossAlt =
|
|
21
22
|
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
|
|
22
23
|
|
|
23
|
-
var styles = {"container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
|
|
24
|
+
var styles = {"popupNotification":"HeaderBarNotification-module_popupNotification__HAxod","hiddenByDefault":"HeaderBarNotification-module_hiddenByDefault__JHbUy","s":"HeaderBarNotification-module_s__HofMM","m":"HeaderBarNotification-module_m__ZUdjq","l":"HeaderBarNotification-module_l__wlZ1Z","xl":"HeaderBarNotification-module_xl__z7DBP","container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
|
|
24
25
|
|
|
25
26
|
var HeaderBarNotification = function (_a) {
|
|
26
|
-
var
|
|
27
|
-
var _c =
|
|
27
|
+
var _b;
|
|
28
|
+
var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _c = _a.isPersistant, isPersistant = _c === void 0 ? false : _c, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, showAtSize = _a.showAtSize, props = tslib_es6.__rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button", "showAtSize"]);
|
|
29
|
+
var _d = React.useState(isPersistant), showNotification = _d[0], setShowNotification = _d[1];
|
|
28
30
|
var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
|
|
29
31
|
// Check to see if the notication has been hidden or not and show it if so
|
|
30
32
|
React.useEffect(function () {
|
|
@@ -38,7 +40,7 @@ var HeaderBarNotification = function (_a) {
|
|
|
38
40
|
localStorage.setItem(localStorageId, "true");
|
|
39
41
|
setShowNotification(false);
|
|
40
42
|
};
|
|
41
|
-
return (React.createElement(Popover.Popover, tslib_es6.__assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, content: React.createElement("div", { className: styles.container },
|
|
43
|
+
return (React.createElement(Popover.Popover, tslib_es6.__assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, className: index.classNames(styles.popupNotification, (_b = {}, _b[styles.hiddenByDefault] = showAtSize, _b), showAtSize === null || showAtSize === void 0 ? void 0 : showAtSize.map(function (s) { return styles[s]; })), content: React.createElement("div", { className: styles.container },
|
|
42
44
|
React.createElement("div", { className: styles.content },
|
|
43
45
|
(image || icon) && (React.createElement("div", { className: styles.image },
|
|
44
46
|
image && (React.createElement(Image.Image, { src: image, alt: heading, fit: "cover", width: 55 })),
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-BVXMhEem.mjs';
|
|
2
2
|
import React__default, { useState, useEffect } from 'react';
|
|
3
|
+
import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
|
|
3
4
|
import { f as filterAttrs } from '../_shared/esm/filter-attrs-DZ7RCEZm.mjs';
|
|
4
5
|
import { NavigationHeaderAction } from '@arc-ui/components/NavigationHeader';
|
|
5
6
|
import { Popover } from '@arc-ui/components/Popover';
|
|
@@ -18,11 +19,12 @@ import { ButtonV2 } from '@arc-ui/components/ButtonV2';
|
|
|
18
19
|
const BtIconCrossAlt =
|
|
19
20
|
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
|
|
20
21
|
|
|
21
|
-
var styles = {"container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
|
|
22
|
+
var styles = {"popupNotification":"HeaderBarNotification-module_popupNotification__HAxod","hiddenByDefault":"HeaderBarNotification-module_hiddenByDefault__JHbUy","s":"HeaderBarNotification-module_s__HofMM","m":"HeaderBarNotification-module_m__ZUdjq","l":"HeaderBarNotification-module_l__wlZ1Z","xl":"HeaderBarNotification-module_xl__z7DBP","container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
|
|
22
23
|
|
|
23
24
|
var HeaderBarNotification = function (_a) {
|
|
24
|
-
var
|
|
25
|
-
var _c =
|
|
25
|
+
var _b;
|
|
26
|
+
var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _c = _a.isPersistant, isPersistant = _c === void 0 ? false : _c, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, showAtSize = _a.showAtSize, props = __rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button", "showAtSize"]);
|
|
27
|
+
var _d = useState(isPersistant), showNotification = _d[0], setShowNotification = _d[1];
|
|
26
28
|
var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
|
|
27
29
|
// Check to see if the notication has been hidden or not and show it if so
|
|
28
30
|
useEffect(function () {
|
|
@@ -36,7 +38,7 @@ var HeaderBarNotification = function (_a) {
|
|
|
36
38
|
localStorage.setItem(localStorageId, "true");
|
|
37
39
|
setShowNotification(false);
|
|
38
40
|
};
|
|
39
|
-
return (React__default.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, content: React__default.createElement("div", { className: styles.container },
|
|
41
|
+
return (React__default.createElement(Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, className: classNames(styles.popupNotification, (_b = {}, _b[styles.hiddenByDefault] = showAtSize, _b), showAtSize === null || showAtSize === void 0 ? void 0 : showAtSize.map(function (s) { return styles[s]; })), content: React__default.createElement("div", { className: styles.container },
|
|
40
42
|
React__default.createElement("div", { className: styles.content },
|
|
41
43
|
(image || icon) && (React__default.createElement("div", { className: styles.image },
|
|
42
44
|
image && (React__default.createElement(Image, { src: image, alt: heading, fit: "cover", width: 55 })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.HeaderBarNotification-module_container__18nau{display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border-radius:var(--sem-border-radius-m)}@media (
|
|
1
|
+
.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_hiddenByDefault__JHbUy{display:none}.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_s__HofMM{display:block}@media (min-width:768px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_s__HofMM{display:none}}@media (min-width:768px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_m__ZUdjq{display:block}}@media (min-width:1024px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_m__ZUdjq{display:none}}@media (min-width:1024px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_l__wlZ1Z{display:block}}@media (min-width:1280px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_l__wlZ1Z{display:none}}@media (min-width:1280px){.HeaderBarNotification-module_popupNotification__HAxod.HeaderBarNotification-module_xl__z7DBP{display:block}}.HeaderBarNotification-module_container__18nau{display:flex;flex-direction:column;gap:16px;padding:20px;background:#ffffff;border-radius:var(--sem-border-radius-m)}@media (min-width:768px){.HeaderBarNotification-module_container__18nau{flex-direction:row;align-items:center}}.HeaderBarNotification-module_content__SUo-l{display:flex;align-items:center;gap:16px;width:100%;min-width:55%;max-width:70vw;margin-right:24px}@media (min-width:768px){.HeaderBarNotification-module_content__SUo-l{width:400px;margin-right:16px}}.HeaderBarNotification-module_image__uV-nD{flex-shrink:0}.HeaderBarNotification-module_details__S5Rrx{display:flex;flex-direction:column;width:100%}.HeaderBarNotification-module_closeButtonContainer__b1UDI{position:absolute;right:20px;top:20px;margin:0}@media (min-width:768px){.HeaderBarNotification-module_closeButtonContainer__b1UDI{position:relative;right:0;top:0}}
|
|
@@ -6,13 +6,16 @@ var index = require('../_shared/cjs/index-B7Z7sgRq.cjs');
|
|
|
6
6
|
var Icon = require('@arc-ui/components/Icon');
|
|
7
7
|
var BtIconArrowAltRight = require('../_shared/cjs/BtIconArrowAltRight-CLQdP61r.cjs');
|
|
8
8
|
|
|
9
|
-
var styles = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
|
|
9
|
+
var styles = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf","link-tile--neutral":"LinkTile-module_link-tile--neutral__T2z5x"};
|
|
10
10
|
|
|
11
11
|
var LinkTile = function (_a) {
|
|
12
|
-
var
|
|
12
|
+
var _b;
|
|
13
|
+
var text = _a.text, href = _a.href, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, _d = _a.tone, tone = _d === void 0 ? "brand" : _d, className = _a.className, props = tslib_es6.__rest(_a, ["text", "href", "showIcon", "tone", "className"]);
|
|
13
14
|
var Component = href ? "a" : "div";
|
|
14
15
|
var linkProps = href ? { href: href } : {};
|
|
15
|
-
return (React.createElement(Component, tslib_es6.__assign({ className: index.classNames(styles["link-tile"],
|
|
16
|
+
return (React.createElement(Component, tslib_es6.__assign({ className: index.classNames(styles["link-tile"], (_b = {},
|
|
17
|
+
_b[styles["link-tile--neutral"]] = tone === "neutral",
|
|
18
|
+
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles["link-tile-content"] },
|
|
16
19
|
React.createElement("span", { className: styles["link-tile-text"] }, text),
|
|
17
20
|
showIcon && (React.createElement("span", { className: styles["link-tile-icon"] },
|
|
18
21
|
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight.BtIconArrowAltRight, size: 32 })))))));
|
|
@@ -4,13 +4,16 @@ import { c as classNames } from '../_shared/esm/index-BSO2EFem.mjs';
|
|
|
4
4
|
import { Icon } from '@arc-ui/components/Icon';
|
|
5
5
|
import { B as BtIconArrowAltRight } from '../_shared/esm/BtIconArrowAltRight-VH6RTTnL.mjs';
|
|
6
6
|
|
|
7
|
-
var styles = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
|
|
7
|
+
var styles = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf","link-tile--neutral":"LinkTile-module_link-tile--neutral__T2z5x"};
|
|
8
8
|
|
|
9
9
|
var LinkTile = function (_a) {
|
|
10
|
-
var
|
|
10
|
+
var _b;
|
|
11
|
+
var text = _a.text, href = _a.href, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, _d = _a.tone, tone = _d === void 0 ? "brand" : _d, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "tone", "className"]);
|
|
11
12
|
var Component = href ? "a" : "div";
|
|
12
13
|
var linkProps = href ? { href: href } : {};
|
|
13
|
-
return (React__default.createElement(Component, __assign({ className: classNames(styles["link-tile"],
|
|
14
|
+
return (React__default.createElement(Component, __assign({ className: classNames(styles["link-tile"], (_b = {},
|
|
15
|
+
_b[styles["link-tile--neutral"]] = tone === "neutral",
|
|
16
|
+
_b), className) }, linkProps, props), text && (React__default.createElement("div", { className: styles["link-tile-content"] },
|
|
14
17
|
React__default.createElement("span", { className: styles["link-tile-text"] }, text),
|
|
15
18
|
showIcon && (React__default.createElement("span", { className: styles["link-tile-icon"] },
|
|
16
19
|
React__default.createElement(Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
|
package/lib/LinkTile/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.LinkTile-module_link-tile__xVUP3{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:306px;height:144px;min-height:144px;max-height:144px;border:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);border-radius:var(--sem-border-radius-xl);padding:var(--sem-space-padding-110) var(--sem-space-padding-70) var(--sem-space-padding-110) var(--sem-space-padding-110);background:var(--sem-color-bg-secondary-light-default);text-decoration:none;cursor:pointer;transition:border-color 0.2s ease;flex:none;align-self:stretch;position:relative;overflow:hidden;flex-grow:1}.LinkTile-module_link-tile-content__H-QN8{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--sem-space-padding-40);width:100%;min-height:48px;flex:none;align-self:stretch}.LinkTile-module_link-tile-icon__kTMfH{display:flex;width:32px;height:32px;color:var(--sem-color-fg-primary-light-default);transition:color 0.2s ease;flex:none;flex-shrink:0;order:1}.LinkTile-module_link-tile-text__0K6zf{font-family:var(--sem-font-family-heading);font-size:var(--sem-font-size-100);font-weight:var(--sem-font-weight-semi);line-height:var(--sem-line-height-base-scale-xs);letter-spacing:0;color:var(--sem-color-fg-primary-light-default);transition:color 0.2s ease;flex:1;order:0}.LinkTile-module_link-tile-icon__kTMfH svg,.LinkTile-module_link-tile__xVUP3 .LinkTile-module_link-tile-content__H-QN8 svg{color:inherit;transition:color 0.2s ease}.LinkTile-module_link-tile__xVUP3[\:not-has\(svg\)]{padding:var(--sem-space-padding-110)}.LinkTile-module_link-tile__xVUP3:not(:has(svg)){padding:var(--sem-space-padding-110)}.LinkTile-module_link-tile__xVUP3:active{border-radius:var(--sem-border-radius-xl)}@media (min-width:1024px){.LinkTile-module_link-tile__xVUP3{padding:var(--sem-space-padding-110) var(--sem-space-padding-70) var(--sem-space-padding-110) var(--sem-space-padding-110)}}.LinkTile-module_link-tile__xVUP3:hover{border-color:transparent;box-shadow:inset 0 0 0 2px var(--button-v2-colors-light-text-hover)}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-text__0K6zf{color:var(--button-v2-colors-light-text-hover)}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-icon__kTMfH{color:var(--button-v2-colors-light-text-hover)}
|
|
1
|
+
.LinkTile-module_link-tile__xVUP3{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:306px;height:144px;min-height:144px;max-height:144px;border:var(--sem-border-width-xxs) solid var(--sem-color-border-secondary-light-minimal);border-radius:var(--sem-border-radius-xl);padding:var(--sem-space-padding-110) var(--sem-space-padding-70) var(--sem-space-padding-110) var(--sem-space-padding-110);background:var(--sem-color-bg-secondary-light-default);text-decoration:none;cursor:pointer;transition:border-color 0.2s ease;flex:none;align-self:stretch;position:relative;overflow:hidden;flex-grow:1}.LinkTile-module_link-tile-content__H-QN8{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--sem-space-padding-40);width:100%;min-height:48px;flex:none;align-self:stretch}.LinkTile-module_link-tile-icon__kTMfH{display:flex;width:32px;height:32px;color:var(--sem-color-fg-primary-light-default);transition:color 0.2s ease;flex:none;flex-shrink:0;order:1}.LinkTile-module_link-tile-text__0K6zf{font-family:var(--sem-font-family-heading);font-size:var(--sem-font-size-100);font-weight:var(--sem-font-weight-semi);line-height:var(--sem-line-height-base-scale-xs);letter-spacing:0;color:var(--sem-color-fg-primary-light-default);transition:color 0.2s ease;flex:1;order:0}.LinkTile-module_link-tile--neutral__T2z5x .LinkTile-module_link-tile-text__0K6zf,.LinkTile-module_link-tile--neutral__T2z5x .LinkTile-module_link-tile-icon__kTMfH{color:var(--sem-color-fg-secondary-light-default)}.LinkTile-module_link-tile-icon__kTMfH svg,.LinkTile-module_link-tile__xVUP3 .LinkTile-module_link-tile-content__H-QN8 svg{color:inherit;transition:color 0.2s ease}.LinkTile-module_link-tile__xVUP3[\:not-has\(svg\)]{padding:var(--sem-space-padding-110)}.LinkTile-module_link-tile__xVUP3:not(:has(svg)){padding:var(--sem-space-padding-110)}.LinkTile-module_link-tile__xVUP3:active{border-radius:var(--sem-border-radius-xl)}@media (min-width:1024px){.LinkTile-module_link-tile__xVUP3{padding:var(--sem-space-padding-110) var(--sem-space-padding-70) var(--sem-space-padding-110) var(--sem-space-padding-110)}}.LinkTile-module_link-tile__xVUP3:hover{border-color:transparent;box-shadow:inset 0 0 0 2px var(--button-v2-colors-light-text-hover)}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-text__0K6zf{color:var(--button-v2-colors-light-text-hover)}.LinkTile-module_link-tile__xVUP3:hover .LinkTile-module_link-tile-icon__kTMfH{color:var(--button-v2-colors-light-text-hover)}
|
package/lib/index.cjs
CHANGED
|
@@ -132,72 +132,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
132
132
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
133
133
|
};
|
|
134
134
|
|
|
135
|
-
/**
|
|
136
|
-
* Filters out attributes from the given props object based on a pattern.
|
|
137
|
-
*
|
|
138
|
-
* This function extracts all properties that match either the `data-*` or `aria-*` attribute patterns
|
|
139
|
-
* and returns a new object containing only those properties.
|
|
140
|
-
*
|
|
141
|
-
* @param props - The object containing properties to filter.
|
|
142
|
-
* @returns A new object containing only the matched attributes (`data-*` and `aria-*`) from the input props.
|
|
143
|
-
*/
|
|
144
|
-
var attributePrefixes = ["data-", "aria-"];
|
|
145
|
-
var filterAttrs = function (props) {
|
|
146
|
-
var filteredProps = {};
|
|
147
|
-
var _loop_1 = function (prop) {
|
|
148
|
-
if (Object.prototype.hasOwnProperty.call(props, prop) &&
|
|
149
|
-
attributePrefixes.some(function (prefix) { return prop.startsWith(prefix); })) {
|
|
150
|
-
filteredProps[prop] = props[prop];
|
|
151
|
-
}
|
|
152
|
-
};
|
|
153
|
-
for (var prop in props) {
|
|
154
|
-
_loop_1(prop);
|
|
155
|
-
}
|
|
156
|
-
return filteredProps;
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
/**
|
|
160
|
-
* Do not edit directly
|
|
161
|
-
* Generated file
|
|
162
|
-
*/
|
|
163
|
-
|
|
164
|
-
const BtIconCrossAlt =
|
|
165
|
-
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
|
|
166
|
-
|
|
167
|
-
var styles$v = {"container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
|
|
168
|
-
|
|
169
|
-
var HeaderBarNotification = function (_a) {
|
|
170
|
-
var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _b = _a.isPersistant, isPersistant = _b === void 0 ? false : _b, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, props = __rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button"]);
|
|
171
|
-
var _c = React.useState(isPersistant), showNotification = _c[0], setShowNotification = _c[1];
|
|
172
|
-
var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
|
|
173
|
-
// Check to see if the notication has been hidden or not and show it if so
|
|
174
|
-
React.useEffect(function () {
|
|
175
|
-
if (typeof window !== "undefined" && !isPersistant) {
|
|
176
|
-
setShowNotification(!localStorage.getItem(localStorageId));
|
|
177
|
-
}
|
|
178
|
-
}, []);
|
|
179
|
-
// Handle the closure of the notification, store it in the session so we don't keep showing it.
|
|
180
|
-
var handleClosePopup = function () {
|
|
181
|
-
if (!isPersistant)
|
|
182
|
-
localStorage.setItem(localStorageId, "true");
|
|
183
|
-
setShowNotification(false);
|
|
184
|
-
};
|
|
185
|
-
return (React.createElement(Popover.Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, content: React.createElement("div", { className: styles$v.container },
|
|
186
|
-
React.createElement("div", { className: styles$v.content },
|
|
187
|
-
(image || icon) && (React.createElement("div", { className: styles$v.image },
|
|
188
|
-
image && (React.createElement(Image$2.Image, { src: image, alt: heading, fit: "cover", width: 55 })),
|
|
189
|
-
icon && React.createElement(Icon.Icon, { icon: icon, size: 35 }))),
|
|
190
|
-
React.createElement("div", { className: styles$v.details },
|
|
191
|
-
tagline && (React.createElement(Text.Text, { size: "m", tone: "muted" }, tagline)),
|
|
192
|
-
React.createElement(Heading.Heading, { size: "s", level: "3" }, heading),
|
|
193
|
-
children)),
|
|
194
|
-
button && (React.createElement(ButtonV2.ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
|
|
195
|
-
React.createElement("div", { className: styles$v.closeButtonContainer },
|
|
196
|
-
React.createElement(Tooltip.Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
|
|
197
|
-
React.createElement(ButtonV2.ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
|
|
198
|
-
React.createElement(NavigationHeader.NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
|
|
199
|
-
};
|
|
200
|
-
|
|
201
135
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
202
136
|
|
|
203
137
|
function getDefaultExportFromCjs (x) {
|
|
@@ -291,6 +225,73 @@ function requireClassnames () {
|
|
|
291
225
|
var classnamesExports = requireClassnames();
|
|
292
226
|
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
293
227
|
|
|
228
|
+
/**
|
|
229
|
+
* Filters out attributes from the given props object based on a pattern.
|
|
230
|
+
*
|
|
231
|
+
* This function extracts all properties that match either the `data-*` or `aria-*` attribute patterns
|
|
232
|
+
* and returns a new object containing only those properties.
|
|
233
|
+
*
|
|
234
|
+
* @param props - The object containing properties to filter.
|
|
235
|
+
* @returns A new object containing only the matched attributes (`data-*` and `aria-*`) from the input props.
|
|
236
|
+
*/
|
|
237
|
+
var attributePrefixes = ["data-", "aria-"];
|
|
238
|
+
var filterAttrs = function (props) {
|
|
239
|
+
var filteredProps = {};
|
|
240
|
+
var _loop_1 = function (prop) {
|
|
241
|
+
if (Object.prototype.hasOwnProperty.call(props, prop) &&
|
|
242
|
+
attributePrefixes.some(function (prefix) { return prop.startsWith(prefix); })) {
|
|
243
|
+
filteredProps[prop] = props[prop];
|
|
244
|
+
}
|
|
245
|
+
};
|
|
246
|
+
for (var prop in props) {
|
|
247
|
+
_loop_1(prop);
|
|
248
|
+
}
|
|
249
|
+
return filteredProps;
|
|
250
|
+
};
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Do not edit directly
|
|
254
|
+
* Generated file
|
|
255
|
+
*/
|
|
256
|
+
|
|
257
|
+
const BtIconCrossAlt =
|
|
258
|
+
"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='currentColor' d='m16.707 16.02 4.482-4.494a.5.5 0 1 0-.707-.706l-4.48 4.493-4.482-4.493a.5.5 0 1 0-.707.706l4.483 4.494-4.483 4.494a.5.5 0 1 0 .707.706l4.481-4.493 4.481 4.493a.5.5 0 1 0 .707-.706Z'/%3e%3c/svg%3e";
|
|
259
|
+
|
|
260
|
+
var styles$v = {"popupNotification":"HeaderBarNotification-module_popupNotification__HAxod","hiddenByDefault":"HeaderBarNotification-module_hiddenByDefault__JHbUy","s":"HeaderBarNotification-module_s__HofMM","m":"HeaderBarNotification-module_m__ZUdjq","l":"HeaderBarNotification-module_l__wlZ1Z","xl":"HeaderBarNotification-module_xl__z7DBP","container":"HeaderBarNotification-module_container__18nau","content":"HeaderBarNotification-module_content__SUo-l","image":"HeaderBarNotification-module_image__uV-nD","details":"HeaderBarNotification-module_details__S5Rrx","closeButtonContainer":"HeaderBarNotification-module_closeButtonContainer__b1UDI"};
|
|
261
|
+
|
|
262
|
+
var HeaderBarNotification = function (_a) {
|
|
263
|
+
var _b;
|
|
264
|
+
var headerActionProps = _a.headerActionProps, notificationId = _a.notificationId, _c = _a.isPersistant, isPersistant = _c === void 0 ? false : _c, icon = _a.icon, image = _a.image, heading = _a.heading, tagline = _a.tagline, children = _a.children, button = _a.button, showAtSize = _a.showAtSize, props = __rest(_a, ["headerActionProps", "notificationId", "isPersistant", "icon", "image", "heading", "tagline", "children", "button", "showAtSize"]);
|
|
265
|
+
var _d = React.useState(isPersistant), showNotification = _d[0], setShowNotification = _d[1];
|
|
266
|
+
var localStorageId = "hide".concat(notificationId.replace(/[^a-zA-Z0-9\-_]/g, ""));
|
|
267
|
+
// Check to see if the notication has been hidden or not and show it if so
|
|
268
|
+
React.useEffect(function () {
|
|
269
|
+
if (typeof window !== "undefined" && !isPersistant) {
|
|
270
|
+
setShowNotification(!localStorage.getItem(localStorageId));
|
|
271
|
+
}
|
|
272
|
+
}, []);
|
|
273
|
+
// Handle the closure of the notification, store it in the session so we don't keep showing it.
|
|
274
|
+
var handleClosePopup = function () {
|
|
275
|
+
if (!isPersistant)
|
|
276
|
+
localStorage.setItem(localStorageId, "true");
|
|
277
|
+
setShowNotification(false);
|
|
278
|
+
};
|
|
279
|
+
return (React.createElement(Popover.Popover, __assign({ open: showNotification, side: "bottom", sideOffset: 12, maxWidth: 900, arrow: true, asChild: true, className: classNames(styles$v.popupNotification, (_b = {}, _b[styles$v.hiddenByDefault] = showAtSize, _b), showAtSize === null || showAtSize === void 0 ? void 0 : showAtSize.map(function (s) { return styles$v[s]; })), content: React.createElement("div", { className: styles$v.container },
|
|
280
|
+
React.createElement("div", { className: styles$v.content },
|
|
281
|
+
(image || icon) && (React.createElement("div", { className: styles$v.image },
|
|
282
|
+
image && (React.createElement(Image$2.Image, { src: image, alt: heading, fit: "cover", width: 55 })),
|
|
283
|
+
icon && React.createElement(Icon.Icon, { icon: icon, size: 35 }))),
|
|
284
|
+
React.createElement("div", { className: styles$v.details },
|
|
285
|
+
tagline && (React.createElement(Text.Text, { size: "m", tone: "muted" }, tagline)),
|
|
286
|
+
React.createElement(Heading.Heading, { size: "s", level: "3" }, heading),
|
|
287
|
+
children)),
|
|
288
|
+
button && (React.createElement(ButtonV2.ButtonV2, { onClick: button.handleClick, label: button.text, buttonStyle: "secondary", isFullWidth: true })),
|
|
289
|
+
React.createElement("div", { className: styles$v.closeButtonContainer },
|
|
290
|
+
React.createElement(Tooltip.Tooltip, { side: "bottom", title: "Dismiss Notification", asChild: true },
|
|
291
|
+
React.createElement(ButtonV2.ButtonV2, { "data-testid": localStorageId, buttonStyle: "tertiary", "aria-label": "Close ".concat(notificationId, " popup"), onClick: handleClosePopup, icon: BtIconCrossAlt })))) }, filterAttrs(props)),
|
|
292
|
+
React.createElement(NavigationHeader.NavigationHeaderAction, __assign({ isAttention: true }, headerActionProps))));
|
|
293
|
+
};
|
|
294
|
+
|
|
294
295
|
var styles$u = {"accordion-header":"AccordionHeading-module_accordion-header__8s12f","accordion-header--hasImage":"AccordionHeading-module_accordion-header--hasImage__wbDjW","accordion-header--padded":"AccordionHeading-module_accordion-header--padded__me1JY","accordion-header--headingSizeM":"AccordionHeading-module_accordion-header--headingSizeM__amLfy"};
|
|
295
296
|
|
|
296
297
|
var AccordionHeading = function (_a) {
|
|
@@ -4017,33 +4018,38 @@ var ContentInfoWidget = function (_a) {
|
|
|
4017
4018
|
React.createElement(Text.Text, { size: "xs", tone: "muted" }, text))));
|
|
4018
4019
|
};
|
|
4019
4020
|
|
|
4020
|
-
var styles$b = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
|
|
4021
|
+
var styles$b = {"action-tile":"ActionTile-module_action-tile__JPwGb","action-tile-content":"ActionTile-module_action-tile-content__ZkgHc","action-tile-content--without-icon":"ActionTile-module_action-tile-content--without-icon__7F5xj","action-tile-icon":"ActionTile-module_action-tile-icon__PY1EN","action-tile-heading":"ActionTile-module_action-tile-heading__Uxdu9","action-tile--compact":"ActionTile-module_action-tile--compact__wq5Aa","action-tile--active":"ActionTile-module_action-tile--active__-aWze","action-tile-tick":"ActionTile-module_action-tile-tick__vhsJE"};
|
|
4021
4022
|
|
|
4022
4023
|
var ActionTile = function (_a) {
|
|
4023
4024
|
var _b, _c;
|
|
4024
|
-
var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.
|
|
4025
|
+
var icon = _a.icon, activeIcon = _a.activeIcon, heading = _a.heading, _d = _a.isCompact, isCompact = _d === void 0 ? false : _d, _e = _a.isActive, isActive = _e === void 0 ? false : _e, onClick = _a.onClick, props = __rest(_a, ["icon", "activeIcon", "heading", "isCompact", "isActive", "onClick"]);
|
|
4025
4026
|
var displayIcon = isActive && activeIcon ? activeIcon : icon;
|
|
4027
|
+
var iconSize = isCompact ? 40 : 48;
|
|
4026
4028
|
var content = (React.createElement(React.Fragment, null,
|
|
4027
4029
|
React.createElement("div", { className: classNames(styles$b["action-tile-content"], (_b = {},
|
|
4028
4030
|
_b[styles$b["action-tile-content--without-icon"]] = !displayIcon,
|
|
4029
4031
|
_b)) },
|
|
4030
4032
|
displayIcon && (React.createElement("div", { className: styles$b["action-tile-icon"] },
|
|
4031
|
-
React.createElement(Icon.Icon, { icon: displayIcon, size:
|
|
4033
|
+
React.createElement(Icon.Icon, { icon: displayIcon, size: iconSize }))),
|
|
4032
4034
|
React.createElement("span", { className: styles$b["action-tile-heading"] }, heading)),
|
|
4033
4035
|
isActive && (React.createElement("div", { className: styles$b["action-tile-tick"] },
|
|
4034
4036
|
React.createElement(Icon.Icon, { icon: BtIconTickAlt2Px, size: 28 })))));
|
|
4035
4037
|
return (React.createElement("button", __assign({ type: "button", className: classNames(styles$b["action-tile"], (_c = {},
|
|
4036
4038
|
_c[styles$b["action-tile--active"]] = isActive,
|
|
4039
|
+
_c[styles$b["action-tile--compact"]] = isCompact,
|
|
4037
4040
|
_c)), onClick: onClick, "aria-pressed": isActive }, filterAttrs(props)), content));
|
|
4038
4041
|
};
|
|
4039
4042
|
|
|
4040
|
-
var styles$a = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf"};
|
|
4043
|
+
var styles$a = {"link-tile":"LinkTile-module_link-tile__xVUP3","link-tile-content":"LinkTile-module_link-tile-content__H-QN8","link-tile-icon":"LinkTile-module_link-tile-icon__kTMfH","link-tile-text":"LinkTile-module_link-tile-text__0K6zf","link-tile--neutral":"LinkTile-module_link-tile--neutral__T2z5x"};
|
|
4041
4044
|
|
|
4042
4045
|
var LinkTile = function (_a) {
|
|
4043
|
-
var
|
|
4046
|
+
var _b;
|
|
4047
|
+
var text = _a.text, href = _a.href, _c = _a.showIcon, showIcon = _c === void 0 ? true : _c, _d = _a.tone, tone = _d === void 0 ? "brand" : _d, className = _a.className, props = __rest(_a, ["text", "href", "showIcon", "tone", "className"]);
|
|
4044
4048
|
var Component = href ? "a" : "div";
|
|
4045
4049
|
var linkProps = href ? { href: href } : {};
|
|
4046
|
-
return (React.createElement(Component, __assign({ className: classNames(styles$a["link-tile"],
|
|
4050
|
+
return (React.createElement(Component, __assign({ className: classNames(styles$a["link-tile"], (_b = {},
|
|
4051
|
+
_b[styles$a["link-tile--neutral"]] = tone === "neutral",
|
|
4052
|
+
_b), className) }, linkProps, props), text && (React.createElement("div", { className: styles$a["link-tile-content"] },
|
|
4047
4053
|
React.createElement("span", { className: styles$a["link-tile-text"] }, text),
|
|
4048
4054
|
showIcon && (React.createElement("span", { className: styles$a["link-tile-icon"] },
|
|
4049
4055
|
React.createElement(Icon.Icon, { icon: BtIconArrowAltRight, size: 32 })))))));
|