mediawiki-skins-Vector/stories/ButtonsAndIcons.stories.js

196 lines
3.7 KiB
JavaScript
Raw Normal View History

import { CdxIcon, CdxButton } from '@wikimedia/codex';
import '../node_modules/@wikimedia/codex/dist/codex.style.css';
import { h, createApp } from 'vue';
import buttonTemplate from '!!raw-loader!../includes/templates/Button.mustache';
import mustache from 'mustache';
import { cdxIconAdd } from '@wikimedia/codex-icons';
export default {
title: 'Icon and Buttons'
};
/**
*
* @typedef {Object} ButtonProps
* @property {string} type
* @property {string} action
*/
/**
* @param {ButtonProps} props
* @param {string} label
* @return {string}
*/
function makeButtonLegacy( props, label ) {
let typeClass = '';
let iconClass = 'mw-ui-icon-add';
switch ( props.action ) {
case 'progressive':
typeClass += ' mw-ui-progressive';
iconClass += '-progressive';
break;
case 'destructive':
typeClass += ' mw-ui-destructive';
iconClass += '-destructive';
break;
}
if ( props.type === 'primary' ) {
iconClass = 'mw-ui-icon-add-invert';
}
return mustache.render( buttonTemplate, {
label,
class: typeClass,
'is-quiet': props.type === 'quiet',
'html-vector-button-icon': `<span class="mw-ui-icon ${iconClass}"></span>`
} );
}
/**
* @param {ButtonProps} props
* @param {string} text
* @param {string} icon
* @return {string}
*/
function makeButton( props, text, icon ) {
const el = document.createElement( 'div' );
const vm = createApp( {
render: function () {
// @ts-ignore
return h( CdxButton, props, [
h( CdxIcon, { icon } ),
text
] );
}
} );
vm.mount( el );
return `
<tr>
<td>${makeButtonLegacy( props, text )}</td>
<td>${el.outerHTML}</td>
</tr>`;
}
/**
* @return {string}
*/
function makeIcon() {
const el = document.createElement( 'div' );
const vm = createApp( {
render: function () {
// @ts-ignore
return h( CdxButton, {
'aria-label': 'add'
}, [
h( CdxIcon, { icon: cdxIconAdd } )
] );
}
} );
vm.mount( el );
const elQuiet = document.createElement( 'div' );
const vmQuiet = createApp( {
render: function () {
// @ts-ignore
return h( CdxButton, {
type: 'quiet',
'aria-label': 'add'
}, [
h( CdxIcon, { icon: cdxIconAdd } )
] );
}
} );
vmQuiet.mount( elQuiet );
return `
<tr>
<td>
<h6>Regular icon</h6>
${
mustache.render( buttonTemplate, {
label: 'Normal Icon button',
icon: 'add'
} )
}
</td>
<td>
<h6>Regular icon</h6>
${el.outerHTML}
</td>
</tr>
<tr>
<td>
<h6>Small icon button</h6>
${
mustache.render( buttonTemplate, {
label: 'Small icon button',
class: 'mw-ui-icon-small',
icon: 'add'
} )
}
</td>
<td>
<h6>Small icon button</h6>
${el.outerHTML}</td>
</tr>
<tr>
<td>
<h6>Quiet icon button</h6>
${
mustache.render( buttonTemplate, {
label: 'Quiet Icon',
'is-quiet': true,
icon: 'add'
} )
}
</td>
<td>
<h6>Quiet icon button</h6>
${elQuiet.outerHTML}</td>
</tr>`;
}
/**
*
* @param {string[]} btns
* @return {string}
*/
function makeButtons( btns ) {
return `<table class="vector-storybook-example-table">
<tbody>
<tr>
<th>Legacy</th>
<th>Codex</th>
</tr>
${btns.join( '\n' )}
</tbody>
</table>`;
}
/**
* @return {string}
*/
export const Button = () => makeButtons( [
makeButton( {
action: 'default',
type: 'quiet'
}, 'Quiet button', cdxIconAdd ),
makeButton( {
action: 'progressive',
type: 'quiet'
}, 'Quiet progressive', cdxIconAdd ),
makeButton( {
action: 'destructive',
type: 'quiet'
}, 'Quiet destructive', cdxIconAdd ),
makeButton( {
action: 'default',
type: 'normal'
}, 'Normal', cdxIconAdd ),
makeButton( {
type: 'primary',
action: 'progressive'
}, 'Progressive primary', cdxIconAdd ),
makeButton( {
type: 'primary',
action: 'destructive'
}, 'Destructive primary', cdxIconAdd ),
makeIcon()
] );