@postnord/web-components
Version:
PostNord Web Components
106 lines (105 loc) • 3.33 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-tile-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/** The pn-tile component is used for navigation, but can display a title, text and/or image in an accessible way. */
const meta = {
title: 'Components/Navigation/Tile',
parameters: {
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
url: 'https://portal.postnord.com/se/en/',
label: '',
illustration: '',
horizontal: false,
rel: '',
target: '',
},
argTypes,
};
export default meta;
export const PnTile = {
name: 'pn-tile',
parameters: {
docs: {
description: {
story: textContent,
},
},
},
render: args => {
const tile = createComponent('pn-tile', args);
tile.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
tile.addEventListener('click', e => e.preventDefault());
return tile;
},
args: {
label: 'Tile Label',
illustration: 'person_package_2',
},
};
/** With `horizontal=true` prop you can force a horizontal tile even if the description doesn't fill the tile enough to make it horizontal. */
export const PnTileHorizontal = {
name: 'pn-tile (horizontal)',
render: (args, context) => {
const tile = PnTile.render(args, context);
tile.innerHTML = 'Lorem ipsum dolor sit amet';
return tile;
},
args: {
label: 'Forced Horizontal',
horizontal: true,
illustration: 'thankyou',
},
};
/** If you set the `target` attribute to `_blank`, the tile will add the open external icon. */
export const PnTileExternal = {
name: 'pn-tile (external)',
render: (args, context) => {
const tile = PnTile.render(args, context);
tile.innerHTML = 'This is an external tile.';
return tile;
},
args: {
label: 'External link tile',
illustration: 'hand_app_packages',
target: '_blank',
},
};
/** When you write a short or omit the description completely, the tile becomes simple. */
export const PnTileSimple = {
name: 'pn-tile (simple)',
render: (args, context) => {
const tile = PnTile.render(args, context);
tile.innerHTML = '';
return tile;
},
args: {
label: 'Simple tile',
illustration: 'truck',
},
};
/** You can slot your own content with the `slot="illustration"` prop. */
export const PnTileSlot = {
name: 'pn-tile (slot)',
render: (args, context) => {
const tile = PnTile.render(args, context);
tile.innerHTML +=
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
tile.innerHTML += `<img slot="illustration" src="https://a.storyblok.com/f/172902/230x230/f4419778e8/error-blue.svg" />`;
return tile;
},
args: {
label: 'Tile with slot',
illustration: '',
},
};
//# sourceMappingURL=pn-tile.stories.js.map