@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
39 lines • 1.96 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { InternalButton } from '../../button/internal';
import InternalIcon from '../../icon/internal';
import testutilStyles from '../test-classes/styles.css.js';
import styles from './styles.css.js';
export const togglesConfig = {
navigation: {
TagName: 'nav',
iconName: 'menu',
getLabels: (labels = {}) => ({
mainLabel: labels.navigation,
openLabel: labels.navigationToggle,
closeLabel: labels.navigationClose,
}),
},
tools: {
TagName: 'aside',
iconName: 'status-info',
getLabels: (labels = {}) => ({
mainLabel: labels.tools,
openLabel: labels.toolsToggle,
closeLabel: labels.toolsClose,
}),
},
};
export const ToggleButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, ariaControls, iconName, iconSvg, disabled, testId, onClick, badge, }, ref) => {
return (React.createElement("button", { ref: ref, className: clsx(className, styles['toggle-button'], {
[testutilStyles['drawers-trigger-with-badge']]: badge,
}), "aria-label": ariaLabel, type: "button", onClick: onClick, disabled: disabled, "aria-expanded": ariaExpanded, "aria-haspopup": ariaExpanded ? undefined : true, "aria-controls": ariaControls, "data-testid": testId },
React.createElement(InternalIcon, { svg: iconSvg, name: iconName, badge: badge })));
});
export const CloseButton = React.forwardRef(({ className, ariaLabel, onClick }, ref) => {
return (React.createElement("span", { className: styles['close-button'] },
React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", iconName: "close", onClick: onClick })));
});
//# sourceMappingURL=index.js.map