/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '@material/web/chips/assist-chip.js';
import '@material/web/chips/chip-set.js';
import '@material/web/chips/filter-chip.js';
import '@material/web/chips/input-chip.js';
import '@material/web/chips/suggestion-chip.js';
import '@material/web/icon/icon.js';
import {MaterialStoryInit} from './material-collection.js';
import {css, html, svg} from 'lit';
import {classMap} from 'lit/directives/class-map.js';
/** Knob types for chips stories. */
export interface StoryKnobs {
label: string;
elevated: boolean;
disabled: boolean;
scrolling: boolean;
}
const GOOGLE_LOGO = svg`
`;
const styles = css`
md-chip-set.scrolling {
flex-wrap: nowrap;
max-width: 512px;
overflow: scroll;
/** Add room for focus ring. */
padding: 8px;
}
`;
const assist: MaterialStoryInit = {
name: 'Assist chips',
styles,
render({label, elevated, disabled, scrolling}) {
const classes = {'scrolling': scrolling};
return html`
local_laundry_service
${GOOGLE_LOGO}
`;
},
};
const filters: MaterialStoryInit = {
name: 'Filter chips',
styles,
render({label, elevated, disabled, scrolling}) {
const classes = {'scrolling': scrolling};
return html`
local_laundry_service
`;
},
};
const inputs: MaterialStoryInit = {
name: 'Input chips',
styles,
render({label, disabled, scrolling}) {
const classes = {'scrolling': scrolling};
return html`
local_laundry_service
${GOOGLE_LOGO}
`;
},
};
const suggestions: MaterialStoryInit = {
name: 'Suggestion chips',
styles,
render({label, elevated, disabled, scrolling}) {
const classes = {'scrolling': scrolling};
return html`
local_laundry_service
${GOOGLE_LOGO}
`;
},
};
/** Chips stories. */
export const stories = [assist, filters, inputs, suggestions];