diff --git a/pages/flashbar/stack-collapse-control.page.tsx b/pages/flashbar/stack-collapse-control.page.tsx new file mode 100644 index 0000000000..088a204323 --- /dev/null +++ b/pages/flashbar/stack-collapse-control.page.tsx @@ -0,0 +1,72 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import * as React from 'react'; + +import Box from '~components/box'; +import Flashbar, { FlashbarProps } from '~components/flashbar'; +import SpaceBetween from '~components/space-between'; + +import ScreenshotArea from '../utils/screenshot-area'; + +const noop = () => void 0; + +const i18nStrings: FlashbarProps.I18nStrings = { + ariaLabel: 'Notifications', + notificationBarText: 'Notifications', + notificationBarAriaLabel: 'View all notifications', + errorIconAriaLabel: 'Error', + warningIconAriaLabel: 'Warning', + successIconAriaLabel: 'Success', + infoIconAriaLabel: 'Information', + inProgressIconAriaLabel: 'In progress', +}; + +const items: FlashbarProps.MessageDefinition[] = [ + { + id: 'success', + type: 'success', + statusIconAriaLabel: 'Success', + header: 'Instance created', + dismissible: true, + onDismiss: noop, + dismissLabel: 'Dismiss', + }, + { + id: 'warning', + type: 'warning', + statusIconAriaLabel: 'Warning', + header: 'Something weird may have happened...', + }, + { + id: 'error', + type: 'error', + statusIconAriaLabel: 'Error', + header: 'Unrecoverable error', + content: 'It all broke, like, really bad.', + }, +]; + +export default function FlashbarStackCollapseControl() { + const [expanded, setExpanded] = React.useState(null); + + return ( + <> +

Flashbar stacked group: defaultExpanded + onToggle

+ + + Last toggle event:{' '} + {expanded === null ? '(none yet)' : expanded ? 'expanded' : 'collapsed'} + + + setExpanded(event.detail.expanded)} + i18nStrings={i18nStrings} + items={items} + /> + + + + ); +} diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index b54c1b56ab..1014da4d5c 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -14297,7 +14297,27 @@ If you want to clear the selection, use empty array.", exports[`Components definition for flashbar matches the snapshot: flashbar 1`] = ` { "dashCaseName": "flashbar", - "events": [], + "events": [ + { + "cancelable": false, + "description": "Called when the user expands or collapses the stacked notifications group +by activating the notification bar. Only fires when \`stackItems\` is set to +\`true\`. The event \`detail\` contains the new value of the expanded state.", + "detailInlineType": { + "name": "FlashbarProps.ToggleDetail", + "properties": [ + { + "name": "expanded", + "optional": false, + "type": "boolean", + }, + ], + "type": "object", + }, + "detailType": "FlashbarProps.ToggleDetail", + "name": "onToggle", + }, + ], "functions": [], "name": "Flashbar", "properties": [ @@ -14308,6 +14328,15 @@ exports[`Components definition for flashbar matches the snapshot: flashbar 1`] = "optional": true, "type": "string", }, + { + "description": "Determines whether the stacked notifications group is initially expanded. +Only has an effect when \`stackItems\` is set to \`true\`. Defaults to \`false\` +(the group starts collapsed). This property is applied on the initial +render only; afterwards the expanded state is managed by the component.", + "name": "defaultExpanded", + "optional": true, + "type": "boolean", + }, { "description": "An object containing all the necessary localized strings required by the component. The object should contain: diff --git a/src/flashbar/__tests__/collapsible.test.tsx b/src/flashbar/__tests__/collapsible.test.tsx index 9dac776908..e447599c6d 100644 --- a/src/flashbar/__tests__/collapsible.test.tsx +++ b/src/flashbar/__tests__/collapsible.test.tsx @@ -644,6 +644,48 @@ describe('Collapsible Flashbar', () => { }); // Entire interactive element including the counter and the actual