@momentum-design/components 0.114.0 → 0.116.0

package/dist/react/banner/index.d.ts

@@ -0,0 +1,40 @@
+import Component from '../../components/banner';
+/**
+ * `mdc-banner` is a component that allows applications to communicate important messages to users
+ * and requires user action to dismiss them. It supports different message types with appropriate styling
+ * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.
+ *
+ * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.
+ *
+ * This component supports both structured content via properties and flexible customization via slots:
+ * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.
+ * - Use slots for custom content and complete layout control.
+ * - Combine both approaches for maximum flexibility.
+ * - Create custom orientations and actions using CSS parts and slots.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.
+ * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.
+ * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.
+ * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.
+ *
+ * @tagname mdc-banner
+ *
+ * @csspart leading - The leading section containing the icon and text.
+ * @csspart leading-icon - The icon displayed for variants or custom icon slot.
+ * @csspart leading-text - The leading section containing label and secondary label text.
+ * @csspart trailing - The trailing section containing action buttons and controls.
+ * @csspart leading-label - The label text of the banner.
+ * @csspart leading-secondary-label - The secondary label text of the banner.
+ *
+ * @cssproperty --mdc-banner-background-color - Background color of the banner.
+ * @cssproperty --mdc-banner-border-color - Border color of the banner.
+ * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.
+ * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.
+ * @cssproperty --mdc-banner-padding - Padding inside the banner.
+ * @cssproperty --mdc-banner-gap - Gap between banner elements.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/banner/index.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/banner';
+import { TAG_NAME } from '../../components/banner/banner.constants';
+/**
+ * `mdc-banner` is a component that allows applications to communicate important messages to users
+ * and requires user action to dismiss them. It supports different message types with appropriate styling
+ * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.
+ *
+ * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.
+ *
+ * This component supports both structured content via properties and flexible customization via slots:
+ * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.
+ * - Use slots for custom content and complete layout control.
+ * - Combine both approaches for maximum flexibility.
+ * - Create custom orientations and actions using CSS parts and slots.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.
+ * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.
+ * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.
+ * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.
+ *
+ * @tagname mdc-banner
+ *
+ * @csspart leading - The leading section containing the icon and text.
+ * @csspart leading-icon - The icon displayed for variants or custom icon slot.
+ * @csspart leading-text - The leading section containing label and secondary label text.
+ * @csspart trailing - The trailing section containing action buttons and controls.
+ * @csspart leading-label - The label text of the banner.
+ * @csspart leading-secondary-label - The secondary label text of the banner.
+ *
+ * @cssproperty --mdc-banner-background-color - Background color of the banner.
+ * @cssproperty --mdc-banner-border-color - Border color of the banner.
+ * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.
+ * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.
+ * @cssproperty --mdc-banner-padding - Padding inside the banner.
+ * @cssproperty --mdc-banner-gap - Gap between banner elements.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Banner',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -7,6 +7,7 @@ export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
+export { default as Banner } from './banner';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';

package/dist/react/index.js

@@ -7,6 +7,7 @@ export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
+export { default as Banner } from './banner';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.114.0",
+  "version": "0.116.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"