@postnord/web-components
Version:
PostNord Web Components
71 lines (70 loc) • 1.88 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import { getFigmaUrl } from "../../../globals/figmaLinks";
import docs from "./pn-text-link-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
/**
* The pn-text-link component is simply a styled `a` element.
* You can slot text and an icon or use the props `label` and `icon`.
**/
const meta = {
title: 'Components/Navigation/Text Link',
parameters: {
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
label: 'PostNord Portal home',
href: 'https://portal.postnord.com/se/en/',
light: false,
icon: '',
leftIcon: false,
download: '',
hreflang: '',
media: '',
referrerpolicy: '',
rel: '',
target: '',
linkid: '',
},
argTypes,
};
meta.argTypes.leftIcon.if = { arg: 'icon', truthy: true };
export default meta;
export const PnTextLink = {
name: 'pn-text-link',
parameters: {
docs: {
description: {
story: textContent,
},
},
},
render: args => createComponent('pn-text-link', args),
};
/** You can use an icon with this component. This will also add some extra padding to the link. */
export const PnTextLinkIcon = {
name: 'pn-text-link (icon)',
render: PnTextLink.render,
args: {
icon: 'arrow_right',
},
};
/** Use the `light` variant in dark background. */
export const PnTextLinkLight = {
name: 'pn-text-link (light)',
render: PnTextLink.render,
args: {
light: true,
icon: 'truck',
},
parameters: {
backgrounds: { default: 'darkest' },
},
};
//# sourceMappingURL=pn-text-link.stories.js.map