@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-862fadc

package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx

@@ -1,113 +0,0 @@
-import { Meta, Source, Canvas } from '@storybook/addon-docs/blocks';
-import * as CriticalBannerStories from './CriticalBanner.story';
-
-<Meta title="Prompts/CriticalBanner/Accessibility" tags={['new']} />
-
-# Accessibility
-
-Under the hood, `CriticalBanner` is marked as `role="region"` for a section of content that users might want to navigate to directly.
-
-By default, it's labelled by the `title` and described by the `description`.
-
-## Announcement Behavior
-
-`CriticalBanner` is designed for critical messages that require immediate attention. It always uses **`aria-live="assertive"`** to immediately interrupt and announce changes to screen readers.
-
-Unlike `InfoPrompt` which offers configurable politeness levels, `CriticalBanner` is always assertive because it communicates critical, time-sensitive information that users must be aware of immediately.
-
-### What Gets Announced
-
-The component intelligently announces only **visible content**, respecting the collapsed/expanded state:
-
-- **Collapsed with title**: Announces title only (description is hidden)
-- **Collapsed without title**: Announces description only (visible up to 2 lines)
-- **Expanded**: Announces title, description, and action button labels (all visible)
-
-<Source
-  dark
-  code={`
-// Collapsed with title - announces: "Your account requires verification"
-<CriticalBanner
-  title="Your account requires verification"
-  description="Please verify your identity to continue"
-  action={{ label: "Verify now", onClick: handleVerify }}
-  expanded={false}
-  onToggle={handleToggle}
-/>
-
-// Expanded - announces: "Your account requires verification | Please verify your identity to continue | Verify now | Learn more"
-
-<CriticalBanner
-  title="Your account requires verification"
-  description="Please verify your identity to continue"
-  action={{ label: 'Verify now', onClick: handleVerify }}
-  actionSecondary={{ label: 'Learn more', onClick: handleLearnMore }}
-  expanded={true}
-  onToggle={handleToggle}
-/>
-
-// Collapsed without title - announces: "Your verification is pending..."
-
-<CriticalBanner
-  description="Your verification is pending. We'll notify you once complete."
-  expanded={false}
-  onToggle={handleToggle}
-/>
-`}
-/>
-
-### When Announcements Trigger
-
-Screen readers announce the banner content whenever:
-
-- The banner first appears in the DOM
-- The user toggles between collapsed and expanded states
-- The content (title, description, or action labels) changes
-
-## Media
-
-Custom media icons should include their own accessibility attributes. Use the `title` prop on icons to provide accessible names for screen readers:
-
-<Source
-  dark
-  code={`
-import { Bank, AlertCircle } from '@transferwise/icons';
-
-<CriticalBanner
-  title="Bank connection required"
-  description="Connect your bank account to continue"
-  media={{ avatar: { asset: <Bank title="Bank account" /> } }}
-  action={{ label: 'Connect now', onClick: handleConnect }}
-  expanded={false}
-  onToggle={handleToggle}
-/>
-
-<CriticalBanner
-  title="Verification required"
-  description="We need to verify your identity"
-  media={{ avatar: { asset: <AlertCircle title="Alert" /> } }}
-  action={{ label: "Start verification", onClick: handleVerify }}
-  expanded={false}
-  onToggle={handleToggle}
-/>
-`}
-/>
-
-Alternatively, you can use `media['aria-label']` to provide a label for custom images:
-
-<Source
-  dark
-  code={`
-<CriticalBanner
-  title="Card blocked"
-  description="Your card has been blocked for security reasons"
-  media={{
-    imgSrc: '/wise-card.svg',
-    'aria-label': 'Wise debit card'
-  }}
-  action={{ label: "Unblock card", onClick: handleUnblock }}
-  expanded={false}
-  onToggle={handleToggle}
-/>
-`}
-/>

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -1,59 +0,0 @@
-.wds-critical-banner {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: 0;
-  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
-     actions only go full-width below 480px (--screen-xs) */
-}
-.wds-critical-banner__mobile--collapsed {
-  max-height: 30vh;
-}
-.wds-critical-banner--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-.wds-critical-banner__title--collapsed {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.wds-critical-banner__description--collapsed {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.wds-critical-banner .wds-prompt__content-wrapper {
-  grid-template-columns: auto 1fr auto;
-  align-items: flex-start;
-}
-.wds-critical-banner__text-wrapper {
-  min-width: 0;
-  max-width: 480px;
-  height: 100%;
-}
-.wds-critical-banner .wds-prompt__actions-wrapper {
-  grid-column-start: 2;
-  grid-column-end: 3;
-}
-@media not (min-width: 480px) {
-  .wds-critical-banner .wds-prompt__actions-wrapper {
-    grid-column: span 3;
-    width: 100%;
-  }
-}
-@media not (min-width: 480px) {
-  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -1,64 +0,0 @@
-.wds-critical-banner {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: 0;
-
-  &__mobile--collapsed {
-    max-height: 30vh;
-  }
-
-  &--media-image {
-    width: var(--size-48);
-    height: var(--size-48);
-    object-fit: contain;
-  }
-
-  &__title--collapsed {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-
-  &__description--collapsed {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-
-  .wds-prompt__content-wrapper {
-    grid-template-columns: auto 1fr auto;
-    align-items: flex-start;
-  }
-
-  &__text-wrapper {
-    min-width: 0;
-    max-width: 480px;
-    height: 100%;
-  }
-
-  /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
-     actions only go full-width below 480px (--screen-xs) */
-  .wds-prompt__actions-wrapper {
-    grid-column-start: 2;
-    grid-column-end: 3;
-
-    @media not (--screen-xs) {
-      grid-column: span 3;
-      width: 100%;
-    }
-  }
-
-  &--with-two-actions .wds-prompt__actions-wrapper {
-    @media not (--screen-xs) {
-      .wds-Button {
-        flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-        min-width: fit-content;
-      }
-    }
-  }
-}