@postnord/web-components
Version:
PostNord Web Components
111 lines (110 loc) • 4.54 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import * as flags from "pn-design-assets/pn-assets/flags";
import { createComponent } from "../../../globals/documentation/story";
import "../pn-icon/pn-icon-grid.scss";
import { createPnTablist } from "../../navigation/pn-tablist/renderTablist";
/**
* This is not an individual component, but a `pn-icon` component consuming our flag assets.
* The flag has their own export path so we separate them here in storybook as well.
*
* <pn-toast appearance="error">You will need to install pn-design-assets v1.8.1, or newer</pn-toast>
*
* Read more about it on <pn-text-link href="./?path=/docs/docs-assets--docs">the assets page.</pn-text-link>
*
* ```js
* // Import all flags at once
* import * as flags from 'pn-design-assets/pn-assets/flags';
* import * as flagsCamel from 'pn-design-assets/pn-assets/flagsCamel';
*
* // Import individual flags
* import { se_flag } from 'pn-design-assets/pn-assets/flags';
* import { seFlag } from 'pn-design-assets/pn-assets/flagsCamel';
*
* // or
*
* import {
* se_flag,
* seFlag
* } from 'pn-design-assets/pn-assets/flags/se_flag';
* ```
*
* Look at the <pn-text-link href="./?path=/docs/components-design-tokens-icon--docs">pn-icon documentation page</pn-text-link> for more information.
**/
const meta = {
title: 'Components/Design Tokens/Flag',
};
export default meta;
/**
* The flag icons will not inherit color styles set on the `pn-icon` or additional styling from other components.
* Such as the red color that will be applied on warning states.
*
* You use these flags the same way you do with the regular icons.
*/
export const PnIconFlag = {
name: 'pn-icon (using flags in components)',
render: () => {
const icon = createComponent('pn-icon', { color: 'white' });
icon.setAttribute('icon', flags.se_flag);
const button = createComponent('pn-button', { label: 'This is a button', appearance: 'warning' });
button.setAttribute('icon', flags.dk_flag);
const tag = createComponent('pn-tag', { appearance: 'positive' });
tag.setAttribute('icon', flags.fi_flag);
tag.label = 'This is a tag';
const chip = createComponent('pn-choice-chip', { value: 'one', tile: true });
chip.setAttribute('icon', flags.no_flag);
chip.label = 'Chip option';
const link = createComponent('pn-text-link', {});
link.setAttribute('icon', flags.de_flag);
link.innerText = 'This is a text link';
const tablist = createPnTablist({ label: 'Tab flag', value: 'one', icon: 'truck' }, { isMenu: true });
tablist.querySelector('pn-tab[value="one"]').setAttribute('icon', flags.is_flag);
const div = document.createElement('div');
div.className = 'sb-button-row';
div.style.flexDirection = 'column';
div.appendChild(icon);
div.appendChild(button);
div.appendChild(tag);
div.appendChild(chip);
div.appendChild(link);
div.appendChild(tablist);
return div;
},
};
/** View all of our flags in a grid. */
export const PnIconFlagGrid = {
name: 'pn-icon (flag)',
parameters: {
layout: 'padded',
},
render: () => {
const container = document.createElement('div');
const searchField = createComponent('pn-input', { label: 'Find flags', type: 'search' });
searchField.style.width = '100%';
searchField.style.marginBottom = '2em';
const grid = document.createElement('ul');
grid.setAttribute('class', 'pn-sb-grid');
Object.keys(flags).forEach(flag => {
const li = document.createElement('li');
li.setAttribute('data-icon', flag.replace('pn_', '').toLowerCase());
const pnIcon = createComponent('pn-icon', {});
pnIcon.icon = flags[flag];
const text = document.createElement('p');
text.innerText = flag;
li.appendChild(pnIcon);
li.appendChild(text);
grid.appendChild(li);
});
container.appendChild(searchField);
container.appendChild(grid);
const items = Array.from(grid.children);
searchField.addEventListener('input', ({ target }) => {
const value = target.value?.toLowerCase();
items.forEach(item => item.dataset.icon.match(value) ? item.removeAttribute('hidden') : item.setAttribute('hidden', 'true'));
});
return container;
},
};
//# sourceMappingURL=pn-flags.stories.js.map