@postnord/web-components
Version:
PostNord Web Components
60 lines (59 loc) • 1.94 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation } from "../../../globals/documentation/story";
import docs from "./pn-tablist-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
/**
* The `pn-tablist` is used together with nested `pn-tab` components.
*
* There are two different versions of the `pn-tablist`. The regular tablist that is built with `button` elements and
* the menu variant that uses `a` elements with href attributes.
*
* - The button variant allows focus on one of the buttons. Then you must use the arrow keys to go left/right. <pn-text-link href="https://codepen.io/adamkillander96/pen/mdgbjGN">Codepen example</pn-text-link>.
* - The menu variant behaves just like a list of links. You can tab through them like normal. <pn-text-link href="https://codepen.io/adamkillander96/pen/dyLbjga">Codepen example</pn-text-link>.
**/
const meta = {
title: 'Components/Navigation/Tablist',
component: 'pn-tablist',
parameters: {
layout: 'padded',
docs: {
description: {
story: textContent,
},
},
actions: {
handles: ['tabchange'],
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
label: 'Tablist name',
value: 'dashboard',
small: false,
stackedicons: false,
language: '',
},
argTypes,
};
export default meta;
import { createPnTablist } from "./renderTablist";
import { getFigmaUrl } from "../../../globals/figmaLinks";
export const PnTablist = {
name: 'pn-tablist',
render: args => createPnTablist(args, { isTablist: true }),
};
/** Small tablist. */
export const PnTablistSmall = {
name: 'pn-tablist (small)',
render: PnTablist.render,
args: {
small: true,
},
};
//# sourceMappingURL=pn-tablist.stories.js.map