;
// endregion
-registerIcon(
- 'home',
- 'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg'
-);
-
-function renderTabs(args: IgcBadgeArgs) {
- return ['primary', 'info', 'success', 'warning', 'danger'].map(
- (variant, idx) => html`
-
-
- ${variant.toUpperCase()}
- ${idx + 1}
-
-
- `
- );
-}
+const variants = ['primary', 'info', 'success', 'warning', 'danger'] as const;
export const Basic: Story = {
render: ({ outlined, shape, variant, dot }) => html`
@@ -106,19 +112,289 @@ export const Basic: Story = {
variant=${variant}
?dot=${dot}
>
- ${renderTabs(args)} `,
+ argTypes: disableStoryControls(metadata),
+ render: () => html`
+ The badge supports five semantic color variants.
+
+ ${variants.map(
+ (v, i) => html`
+
+ ${i + 1}
+ ${v}
+
+ `
+ )}
+
+ The outlined attribute draws a border around the badge,
+ useful when placing badges over colored or patterned surfaces.
+
+
+
+
Filled
+
+ ${variants.map(
+ (v, i) => html`${i + 1} `
+ )}
+
+
+
+
Outlined
+
+ ${variants.map(
+ (v, i) =>
+ html`${i + 1} `
+ )}
+
+
+
+ Badges can be rounded (default) for a pill-shaped label or
+ square for a more rectangular appearance.
+
+
+
+
Rounded
+
+ ${variants.map(
+ (v, i) =>
+ html`${i + 1} `
+ )}
+
+
+
+
Square
+
+ ${variants.map(
+ (v, i) =>
+ html`${i + 1} `
+ )}
+
+
+
+ The dot attribute renders the badge as a compact indicator
+ without content — ideal for unread or online status cues.
+
+
+ ${variants.map(
+ (v) => html`
+
+ ${v}
+
+ `
+ )}
+
+ Any content can be slotted into the badge. When an
+ igc-icon is the only slotted element, the
+ icon CSS part is activated for targeted styling.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+};
+
+export const InContext: Story = {
+ argTypes: disableStoryControls(metadata),
+ render: () => html`
+
+ Badges are typically overlaid on a host element using
+ position: absolute on the badge and
+ position: relative on the container.
+
+
+
+
+ 5
+
+
Notifications
+
+
+
+
+
+
+ 3
+
+
Count badge
+
+
+
+
+
+
+ 99+
+
+
Cart (square)
+
+
+ Badges can be embedded in tab labels to communicate counts or status at a
+ glance within navigation.
+
+
+
+
+ Inbox
+ 4
+
+
+
+
+ Notifications
+ 7
+
+
+
+
+ Updates
+ New
+
+
+
+ Settings
+
+
+ `,
};
diff --git a/stories/banner.stories.ts b/stories/banner.stories.ts
index 8c8a73847..d7ea89859 100644
--- a/stories/banner.stories.ts
+++ b/stories/banner.stories.ts
@@ -9,6 +9,7 @@ import {
defineComponents,
registerIconFromText,
} from 'igniteui-webcomponents';
+import { disableStoryControls } from './story.js';
defineComponents(
IgcBannerComponent,
@@ -17,6 +18,31 @@ defineComponents(
IgcNavbarComponent
);
+registerIconFromText(
+ 'info',
+ ` = {
title: 'Banner',
@@ -51,45 +77,211 @@ type Story = StoryObj;
// endregion
-const checkIcon =
- '
- Title
+
+ My Application
- You are currently not logged in! Please, log into your account first.
+ You are currently not logged in. Please log in to your account to
+ continue.
- Toggle Banner
+
+ Toggle Banner
+
`,
};
-export const SlottedContent: Story = {
- render: (args) => html`
-
-
-
+ Use the prefix slot to provide an illustrative icon alongside
+ the message content.
+
+
+
+
+
+
+
+
+
+
+
+
+ f58a1815 completed successfully!
+
+
+
+ Use the actions slot to replace the default "Dismiss" button
+ with custom action buttons. If the slot is omitted, a default
+ Dismiss button is rendered automatically.
+
+
+
+
Default action (auto-rendered)
+
+
+
+
+
Custom actions
+
+
+ Later
+ Update now
+
+
+
+
+
Single action
+
+
+ OK
+
+
+
+
+ The banner exposes show(), hide(), and
+ toggle() methods for programmatic control. All methods are
+ animated and return a Promise<boolean>.
+
+
+ Show
+ Hide
+ Toggle
+
+
+
- OK
- View log
+ Dismiss
+ Retry
- Toggle Banner
+ `,
+};
+
+export const CancelableClose: Story = {
+ argTypes: disableStoryControls(metadata),
+ render: () => {
+ const onClosing = (e: CustomEvent) => {
+ const log = document.querySelector('#event-log');
+ const confirmed = window.confirm(
+ 'Are you sure you want to dismiss this banner?'
+ );
+
+ if (!confirmed) {
+ e.preventDefault();
+ if (log)
+ log.textContent = `[${new Date().toLocaleTimeString()}] igcClosing — cancelled by user`;
+ return;
+ }
+
+ if (log)
+ log.textContent = `[${new Date().toLocaleTimeString()}] igcClosing — allowed`;
+ };
+
+ const onClosed = () => {
+ const log = document.querySelector('#event-log');
+ if (log)
+ log.textContent += `\n[${new Date().toLocaleTimeString()}] igcClosed — banner is now hidden`;
+ };
+
+ return html`
+
+ The igcClosing event is cancelable. Call
+ event.preventDefault() to prevent the banner from closing.
+ The igcClosed event fires after the animation completes.
+
+
+
+
+
Event log:
+
+Click "Dismiss" to see the events fire.
+
Reset banner
+
Banners are most effective when placed directly below the app bar.
+
+
+ Dashboard
+
+
+
+ Dismiss
+ Retry connection
+
+
+
+ Page content goes here
+
+
= {
title: 'ButtonGroup',
@@ -62,31 +104,8 @@ type Story = StoryObj;
// endregion
-const icons = [
- {
- name: 'bold',
- url: 'https://unpkg.com/material-design-icons@3.0.1/editor/svg/production/ic_format_bold_24px.svg',
- },
- {
- name: 'italic',
- url: 'https://unpkg.com/material-design-icons@3.0.1/editor/svg/production/ic_format_italic_24px.svg',
- },
- {
- name: 'underline',
- url: 'https://unpkg.com/material-design-icons@3.0.1/editor/svg/production/ic_format_underlined_24px.svg',
- },
-];
-
-icons.forEach((icon) => {
- registerIcon(icon.name, icon.url, 'material');
-});
-
-const BasicTemplate = ({
- selection,
- disabled,
- alignment,
-}: IgcButtonGroupArgs) => {
- return html`
+export const Basic: Story = {
+ render: ({ selection, disabled, alignment }) => html`
Left
Center
Right
- Top
- Bottom
+ Justify
- `;
+ `,
};
-const SlottedContentTemplate = () => {
- return html`
-
-
-
+export const SelectionModes: Story = {
+ argTypes: disableStoryControls(metadata),
+ render: () => html`
+
+ Three selection modes are available: single allows at most
+ one selected item (deselectable), single-required always
+ keeps one selected, and multiple allows any combination.
+
+
+
+
+ single — one or none selected
+
+
+ Day
+ Week
+ Month
+ Year
+
+
+
+
+ single-required — exactly one always selected
+
+
+ XS
+ SM
+ MD
+ LG
+ XL
+
+
+
+
+ multiple — any number selected
+
+
+
+
+
+
+
+
+
+
+
-
+export const Alignment: Story = {
+ argTypes: disableStoryControls(metadata),
+ render: () => html`
+
+ The alignment attribute controls whether the buttons are
+ arranged horizontally (default) or vertically.
+
+
+
+
Horizontal
+
+
+
+
+
+
+
+
+
+
+
Vertical
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- `;
+export const WithIcons: Story = {
+ argTypes: disableStoryControls(metadata),
+ render: () => html`
+
+ Icon-only toggle buttons work well for compact toolbars. Provide an
+ aria-label on each button for accessibility.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
};
-export const Basic: Story = BasicTemplate.bind({});
-export const SlottedContent: Story = SlottedContentTemplate.bind({});
+export const Disabled: Story = {
+ argTypes: disableStoryControls(metadata),
+ render: () => html`
+
+ Setting disabled on the group disables all buttons.
+ Individual buttons can also be disabled independently.
+
+
+
+
+ Entire group disabled
+
+
+ Day
+ Week
+ Month
+
+
+
+
+ Individual buttons disabled
+
+
+ XS
+ SM
+ MD
+ LG
+ XL
+
+
+
('#prog-group');
+ if (group) group.selectedItems = values;
+ };
+
+ const onSelect = (e: CustomEvent) => {
+ const log = document.querySelector('#sel-log');
+ if (log) log.textContent = `igcSelect — value: "${e.detail}"`;
+ };
+
+ const onDeselect = (e: CustomEvent) => {
+ const log = document.querySelector('#sel-log');
+ if (log) log.textContent = `igcDeselect — value: "${e.detail}"`;
+ };
+
+ return html`
+
+ Use the selectedItems property to get or set the selection
+ programmatically. The igcSelect and
+ igcDeselect events fire on user interaction only.
+
+
+
+
+
+
+
+
+
+
+
+ setItems(['bold'])}
+ >Select Bold
+ setItems(['italic', 'underline'])}
+ >
+ Select Italic + Underline
+
+ setItems(['bold', 'italic', 'underline'])}
+ >
+ Select All
+
+ setItems([])}
+ >Clear
+
+
+
+
Event log:
+
+Interact with the buttons to see events.
+
= {
@@ -96,62 +123,169 @@ type Story = StoryObj;
// endregion
-registerIcon(
- 'home',
- 'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg'
-);
-
-export const BasicButton: Story = {
+export const Basic: Story = {
render: ({ disabled, variant, type }) => html`
- Basic button
+ Click me
`,
};
-export const ButtonWithSlots: Story = {
- render: ({ disabled, variant, type }) => html`
-
- +
- Click me
- -
-
+export const Variants: Story = {
+ argTypes: disableStoryControls(metadata),
+ render: () => html`
+
+ Four visual variants are available: contained (filled, high
+ emphasis), outlined (medium emphasis), flat (low
+ emphasis, no border), and fab
+ (floating action button, rounded).
+
+
+ Contained
+ Outlined
+ Flat
+
+
+
`,
};
-export const BasicLinkButton: Story = {
- args: {
- href: 'https://www.infragistics.com/products/ignite-ui-web-components',
- },
- render: ({ disabled, download, href, rel, target, variant }) =>
- html` html`
+
+ Use the prefix and suffix slots to place icons
+ or other content before and after the button label.
+
+
- Basic link button
- `,
+
+
+
+
+
+ Edit
+
+
+
+
+ `,
};
-export const LinkButtonWithSlots: Story = {
- args: {
- href: 'https://www.infragistics.com/products/ignite-ui-web-components',
- target: '_blank',
- },
- render: ({ disabled, download, href, rel, target, variant }) =>
- html` html`
+
+ The disabled attribute prevents interaction and applies
+ reduced-opacity styling across all variants.
+
+
+ Contained
+ Outlined
+ Flat
+
+
+
+ `,
+};
+
+export const AsLink: Story = {
+ argTypes: disableStoryControls(metadata),
+ render: () => html`
+
+ Setting href renders the button as an
+ <a> element, supporting target,
+ rel, and download attributes.
+
+
-
+
+
+ Disabled link
+
+
+ `,
+};
+
+export const InForm: Story = {
+ argTypes: disableStoryControls(metadata),
+ render: () => html`
+
+ Buttons with type="submit" and type="reset"
+ participate in native form submission and reset.
+
+
+
+
Submitted data:
+
+Submit the form to see the data here.
+
;
// endregion
-// Enhance the calendar args with extra properties
-interface IgcCalendarArgs {
- weekDayFormat: '"long" | "short" | "narrow"';
- monthFormat: '"numeric" | "2-digit" | "long" | "short" | "narrow"';
- title: string;
- values: string;
-}
-
// Add additional configuration options
Object.assign(metadata.argTypes!, {
weekDayFormat: {
@@ -214,72 +206,121 @@ Object.assign(metadata.args!, {
monthFormat: 'long',
});
-const Template = ({
- showWeekNumbers,
- hideOutsideDays,
- weekStart,
- locale,
- weekDayFormat,
- monthFormat,
- selection,
- activeView,
- hideHeader = false,
- headerOrientation,
- orientation,
- title,
- visibleMonths,
- value,
- values,
- activeDate,
-}: IgcCalendarArgs) => {
- const formatOptions: Intl.DateTimeFormatOptions = {
- month: monthFormat,
- weekday: weekDayFormat,
- };
-
- const currentYear = new Date().getFullYear();
- const currentMonth = new Date().getMonth();
+const today = new Date();
+const currentYear = today.getFullYear();
+const currentMonth = today.getMonth();
- const disabledDates: DateRangeDescriptor[] = [
- {
- type: DateRangeType.Specific,
- dateRange: [new Date(currentYear, currentMonth, 7)],
- },
- ];
-
- const specialDates: DateRangeDescriptor[] = [
- {
- type: DateRangeType.Specific,
- dateRange: [new Date(currentYear, currentMonth, 22)],
- },
- {
- type: DateRangeType.Specific,
- dateRange: [new Date(currentYear, currentMonth, 23)],
- },
- ];
-
- return html`
+export const Basic: Story = {
+ render: (args) => html`
- ${title ? html`${title} ` : ''}
- `;
+ `,
+};
+
+export const RangeSelection: Story = {
+ render: () => {
+ const start = new Date(currentYear, currentMonth, 5);
+ const end = new Date(currentYear, currentMonth, 18);
+ return html`
+