@cloudscape-design/components 3.0.1297 → 3.0.1298

package/skeleton/styles.scoped.css

@@ -0,0 +1,273 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+@keyframes awsui_skeleton-wave_1qq5l_23px4_1 {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes awsui_skeleton-wave-rtl_1qq5l_23px4_1 {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+.awsui_root_1qq5l_23px4_161:not(#\9) {
+  inline-size: 100%;
+}
+.awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9) {
+  block-size: 1em;
+  inline-size: 100%;
+  vertical-align: middle;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--color-background-skeleton-sjxg4n, #ebebf0);
+  border-start-start-radius: var(--border-radius-skeleton-9lkvfi, 8px);
+  border-start-end-radius: var(--border-radius-skeleton-9lkvfi, 8px);
+  border-end-start-radius: var(--border-radius-skeleton-9lkvfi, 8px);
+  border-end-end-radius: var(--border-radius-skeleton-9lkvfi, 8px);
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+}
+.awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9)::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  background: linear-gradient(90deg, transparent, var(--color-background-skeleton-wave-1dy97d, #f6f6f9), transparent);
+  animation: awsui_skeleton-wave_1qq5l_23px4_1 1.25s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9)::after {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9)::after, .awsui-mode-entering .awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9)::after {
+  animation: none;
+  transition: none;
+}
+.awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9):dir(rtl)::after {
+  animation: awsui_skeleton-wave-rtl_1qq5l_23px4_1 1.25s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9):dir(rtl)::after {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9):dir(rtl)::after, .awsui-mode-entering .awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9):dir(rtl)::after {
+  animation: none;
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9), .awsui-mode-entering .awsui_root_1qq5l_23px4_161 > .awsui_inner_1qq5l_23px4_164:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_display-block_1qq5l_23px4_222:not(#\9) {
+  display: block;
+}
+
+.awsui_display-inline-block_1qq5l_23px4_226:not(#\9) {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.awsui_display-inline_1qq5l_23px4_226:not(#\9) {
+  display: inline;
+}
+
+.awsui_variant-text-body-s_1qq5l_23px4_235:not(#\9) {
+  font-size: var(--font-size-body-s-smc8cv, 12px);
+  line-height: var(--line-height-body-s-nu5hx1, 16px);
+}
+
+.awsui_variant-text-body-m_1qq5l_23px4_240:not(#\9) {
+  font-size: var(--font-size-body-m-a7nh2n, 14px);
+  line-height: var(--line-height-body-m-2mh3ke, 20px);
+}
+
+.awsui_variant-text-heading-xs_1qq5l_23px4_245:not(#\9) {
+  font-size: var(--font-size-heading-xs-j8yzxv, 14px);
+  line-height: var(--line-height-heading-xs-q9j004, 18px);
+}
+
+.awsui_variant-text-heading-s_1qq5l_23px4_250:not(#\9) {
+  font-size: var(--font-size-heading-s-zp08en, 16px);
+  line-height: var(--line-height-heading-s-hmi4vc, 20px);
+}
+
+.awsui_variant-text-heading-m_1qq5l_23px4_255:not(#\9) {
+  font-size: var(--font-size-heading-m-170yiy, 18px);
+  line-height: var(--line-height-heading-m-uoaqdh, 22px);
+}
+
+.awsui_variant-text-heading-l_1qq5l_23px4_260:not(#\9) {
+  font-size: var(--font-size-heading-l-vnacx6, 20px);
+  line-height: var(--line-height-heading-l-mg5bx6, 24px);
+}
+
+.awsui_variant-text-heading-xl_1qq5l_23px4_265:not(#\9) {
+  font-size: var(--font-size-heading-xl-wvkbur, 24px);
+  line-height: var(--line-height-heading-xl-hko6p0, 30px);
+}
+
+.awsui_variant-text-display-l_1qq5l_23px4_270:not(#\9) {
+  font-size: var(--font-size-display-l-wa6woo, 42px);
+  line-height: var(--line-height-display-l-vwanzp, 48px);
+}

package/skeleton/styles.selectors.js

@@ -0,0 +1,21 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_1qq5l_23px4_161",
+  "inner": "awsui_inner_1qq5l_23px4_164",
+  "skeleton-wave": "awsui_skeleton-wave_1qq5l_23px4_1",
+  "skeleton-wave-rtl": "awsui_skeleton-wave-rtl_1qq5l_23px4_1",
+  "display-block": "awsui_display-block_1qq5l_23px4_222",
+  "display-inline-block": "awsui_display-inline-block_1qq5l_23px4_226",
+  "display-inline": "awsui_display-inline_1qq5l_23px4_226",
+  "variant-text-body-s": "awsui_variant-text-body-s_1qq5l_23px4_235",
+  "variant-text-body-m": "awsui_variant-text-body-m_1qq5l_23px4_240",
+  "variant-text-heading-xs": "awsui_variant-text-heading-xs_1qq5l_23px4_245",
+  "variant-text-heading-s": "awsui_variant-text-heading-s_1qq5l_23px4_250",
+  "variant-text-heading-m": "awsui_variant-text-heading-m_1qq5l_23px4_255",
+  "variant-text-heading-l": "awsui_variant-text-heading-l_1qq5l_23px4_260",
+  "variant-text-heading-xl": "awsui_variant-text-heading-xl_1qq5l_23px4_265",
+  "variant-text-display-l": "awsui_variant-text-display-l_1qq5l_23px4_270"
+};
+  

package/test-utils/dom/index.d.ts

@@ -69,6 +69,7 @@ import S3ResourceSelectorWrapper from './s3-resource-selector';
 import SegmentedControlWrapper from './segmented-control';
 import SelectWrapper from './select';
 import SideNavigationWrapper from './side-navigation';
+import SkeletonWrapper from './skeleton';
 import SliderWrapper from './slider';
 import SpaceBetweenWrapper from './space-between';
 import SpinnerWrapper from './spinner';
@@ -161,6 +162,7 @@ export { S3ResourceSelectorWrapper };
 export { SegmentedControlWrapper };
 export { SelectWrapper };
 export { SideNavigationWrapper };
+export { SkeletonWrapper };
 export { SliderWrapper };
 export { SpaceBetweenWrapper };
 export { SpinnerWrapper };
@@ -1980,6 +1982,32 @@ declare module '@cloudscape-design/test-utils-core/dist/dom' {
      * @returns {SideNavigationWrapper | null}
      */
     findClosestSideNavigation(): SideNavigationWrapper | null;
+    /**
+     * Returns the wrapper of the first Skeleton that matches the specified CSS selector.
+     * If no CSS selector is specified, returns the wrapper of the first Skeleton.
+     * If no matching Skeleton is found, returns `null`.
+     *
+     * @param {string} [selector] CSS Selector
+     * @returns {SkeletonWrapper | null}
+     */
+    findSkeleton(selector?: string): SkeletonWrapper | null;
+    /**
+     * Returns an array of Skeleton wrapper that matches the specified CSS selector.
+     * If no CSS selector is specified, returns all of the Skeletons inside the current wrapper.
+     * If no matching Skeleton is found, returns an empty array.
+     *
+     * @param {string} [selector] CSS Selector
+     * @returns {Array<SkeletonWrapper>}
+     */
+    findAllSkeletons(selector?: string): Array<SkeletonWrapper>;
+    /**
+     * Returns the wrapper of the closest parent Skeleton for the current element,
+     * or the element itself if it is an instance of Skeleton.
+     * If no Skeleton is found, returns `null`.
+     *
+     * @returns {SkeletonWrapper | null}
+     */
+    findClosestSkeleton(): SkeletonWrapper | null;
     /**
      * Returns the wrapper of the first Slider that matches the specified CSS selector.
      * If no CSS selector is specified, returns the wrapper of the first Slider.

package/test-utils/dom/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LineChartWrapper = exports.KeyValuePairsWrapper = exports.ItemCardWrapper = exports.InputWrapper = exports.IconWrapper = exports.HotspotWrapper = exports.HelpPanelWrapper = exports.HeaderWrapper = exports.GridWrapper = exports.FormFieldWrapper = exports.FormWrapper = exports.FlashbarWrapper = exports.FileUploadWrapper = exports.FileTokenGroupWrapper = exports.FileInputWrapper = exports.FileDropzoneWrapper = exports.ExpandableSectionWrapper = exports.ErrorBoundaryWrapper = exports.DropdownWrapper = exports.DrawerWrapper = exports.DividerWrapper = exports.DateRangePickerWrapper = exports.DatePickerWrapper = exports.DateInputWrapper = exports.CopyToClipboardWrapper = exports.ContentLayoutWrapper = exports.ContainerWrapper = exports.ColumnLayoutWrapper = exports.CollectionPreferencesWrapper = exports.CodeEditorWrapper = exports.CheckboxWrapper = exports.CardsWrapper = exports.CalendarWrapper = exports.ButtonGroupWrapper = exports.ButtonDropdownWrapper = exports.ButtonWrapper = exports.BreadcrumbGroupWrapper = exports.BoxWrapper = exports.BarChartWrapper = exports.BadgeWrapper = exports.AutosuggestWrapper = exports.AttributeEditorWrapper = exports.AreaChartWrapper = exports.AppLayoutToolbarWrapper = exports.AppLayoutWrapper = exports.AnnotationWrapper = exports.AnchorNavigationWrapper = exports.AlertWrapper = exports.ActionCardWrapper = exports.ElementWrapper = void 0;
-exports.WizardWrapper = exports.TutorialPanelWrapper = exports.TreeViewWrapper = exports.TopNavigationWrapper = exports.TooltipWrapper = exports.TokenGroupWrapper = exports.TokenWrapper = exports.ToggleButtonWrapper = exports.ToggleWrapper = exports.TimeInputWrapper = exports.TilesWrapper = exports.TextareaWrapper = exports.TextFilterWrapper = exports.TextContentWrapper = exports.TagEditorWrapper = exports.TabsWrapper = exports.TableWrapper = exports.StepsWrapper = exports.StatusIndicatorWrapper = exports.SplitPanelWrapper = exports.SpinnerWrapper = exports.SpaceBetweenWrapper = exports.SliderWrapper = exports.SideNavigationWrapper = exports.SelectWrapper = exports.SegmentedControlWrapper = exports.S3ResourceSelectorWrapper = exports.RadioGroupWrapper = exports.RadioButtonWrapper = exports.PropertyFilterWrapper = exports.PromptInputWrapper = exports.ProgressBarWrapper = exports.PopoverWrapper = exports.PieChartWrapper = exports.PanelLayoutWrapper = exports.PaginationWrapper = exports.NavigableGroupWrapper = exports.MultiselectWrapper = exports.ModalWrapper = exports.MixedLineBarChartWrapper = exports.LiveRegionWrapper = exports.ListWrapper = exports.LinkWrapper = void 0;
+exports.WizardWrapper = exports.TutorialPanelWrapper = exports.TreeViewWrapper = exports.TopNavigationWrapper = exports.TooltipWrapper = exports.TokenGroupWrapper = exports.TokenWrapper = exports.ToggleButtonWrapper = exports.ToggleWrapper = exports.TimeInputWrapper = exports.TilesWrapper = exports.TextareaWrapper = exports.TextFilterWrapper = exports.TextContentWrapper = exports.TagEditorWrapper = exports.TabsWrapper = exports.TableWrapper = exports.StepsWrapper = exports.StatusIndicatorWrapper = exports.SplitPanelWrapper = exports.SpinnerWrapper = exports.SpaceBetweenWrapper = exports.SliderWrapper = exports.SkeletonWrapper = exports.SideNavigationWrapper = exports.SelectWrapper = exports.SegmentedControlWrapper = exports.S3ResourceSelectorWrapper = exports.RadioGroupWrapper = exports.RadioButtonWrapper = exports.PropertyFilterWrapper = exports.PromptInputWrapper = exports.ProgressBarWrapper = exports.PopoverWrapper = exports.PieChartWrapper = exports.PanelLayoutWrapper = exports.PaginationWrapper = exports.NavigableGroupWrapper = exports.MultiselectWrapper = exports.ModalWrapper = exports.MixedLineBarChartWrapper = exports.LiveRegionWrapper = exports.ListWrapper = exports.LinkWrapper = void 0;
 exports.default = wrapper;
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
@@ -146,6 +146,8 @@ const select_1 = require("./select");
 exports.SelectWrapper = select_1.default;
 const side_navigation_1 = require("./side-navigation");
 exports.SideNavigationWrapper = side_navigation_1.default;
+const skeleton_1 = require("./skeleton");
+exports.SkeletonWrapper = skeleton_1.default;
 const slider_1 = require("./slider");
 exports.SliderWrapper = slider_1.default;
 const space_between_1 = require("./space-between");
@@ -1020,6 +1022,18 @@ dom_1.ElementWrapper.prototype.findSideNavigation = function (selector) {
 dom_1.ElementWrapper.prototype.findAllSideNavigations = function (selector) {
     return this.findAllComponents(side_navigation_1.default, selector);
 };
+dom_1.ElementWrapper.prototype.findSkeleton = function (selector) {
+    let rootSelector = `.${skeleton_1.default.rootSelector}`;
+    if ("legacyRootSelector" in skeleton_1.default && skeleton_1.default.legacyRootSelector) {
+        rootSelector = `:is(.${skeleton_1.default.rootSelector}, .${skeleton_1.default.legacyRootSelector})`;
+    }
+    // casting to 'any' is needed to avoid this issue with generics
+    // https://github.com/microsoft/TypeScript/issues/29132
+    return this.findComponent(selector ? (0, utils_1.appendSelector)(selector, rootSelector) : rootSelector, skeleton_1.default);
+};
+dom_1.ElementWrapper.prototype.findAllSkeletons = function (selector) {
+    return this.findAllComponents(skeleton_1.default, selector);
+};
 dom_1.ElementWrapper.prototype.findSlider = function (selector) {
     let rootSelector = `.${slider_1.default.rootSelector}`;
     if ("legacyRootSelector" in slider_1.default && slider_1.default.legacyRootSelector) {
@@ -1641,6 +1655,11 @@ dom_1.ElementWrapper.prototype.findClosestSideNavigation = function () {
     // https://github.com/microsoft/TypeScript/issues/29132
     return this.findClosestComponent(side_navigation_1.default);
 };
+dom_1.ElementWrapper.prototype.findClosestSkeleton = function () {
+    // casting to 'any' is needed to avoid this issue with generics
+    // https://github.com/microsoft/TypeScript/issues/29132
+    return this.findClosestComponent(skeleton_1.default);
+};
 dom_1.ElementWrapper.prototype.findClosestSlider = function () {
     // casting to 'any' is needed to avoid this issue with generics
     // https://github.com/microsoft/TypeScript/issues/29132