@postnord/web-components
Version:
PostNord Web Components
85 lines (84 loc) • 2.21 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-search-field-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/** A customizable search field. */
const meta = {
title: 'Components/Input/Search Field',
parameters: {
docs: {
description: {
story: textContent,
},
},
actions: {
handles: ['search', 'update'],
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
label: '',
value: '',
placeholder: 'Example placeholder',
searchid: '',
name: '',
autocomplete: '',
list: '',
language: '',
disabled: false,
required: false,
loading: false,
button: '',
buttonLabel: 'Search',
buttonLight: false,
},
argTypes,
};
export default meta;
export const PnSearchField = {
name: 'pn-search-field',
render: args => createComponent('pn-search-field', args),
};
/** Use the light button variant */
export const PnSearchFieldLightButton = {
name: 'pn-search-field (light button)',
render: PnSearchField.render,
args: {
buttonLight: true,
},
};
/** Use the icon button variant */
export const PnSearchFieldIconButton = {
name: 'pn-search-field (icon button)',
render: PnSearchField.render,
args: {
button: 'icon',
},
};
/** Use the no button variant */
export const PnSearchFieldNoButton = {
name: 'pn-search-field (no button)',
render: PnSearchField.render,
args: {
button: 'none',
},
};
/**
* Use the icon inline button variant. While this looks similar to the no button variant,
* this variant allows you to tab to the search button.
*/
export const PnSearchFieldIconInline = {
name: 'pn-search-field (icon inline)',
render: PnSearchField.render,
args: {
button: 'icon-inline',
},
};
//# sourceMappingURL=pn-search-field.stories.js.map