golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

[storybook] ButtonAndIcons should use Button template 

Change-Id: I391cd6b3f9d167c1ff659bba6a5e12be7ff9a439
This commit is contained in:
jdlrobson 2021-09-08 11:14:29 -07:00 committed by Jdlrobson
parent 62149265e9
commit 0be41f3414
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
stories/ButtonsAndIcons.stories.js
View File

@ -1,6 +1,8 @@
import wvui from '@wikimedia/wvui'; import wvui from '@wikimedia/wvui';
import Vue from 'vue'; import Vue from 'vue';
import buttonTemplate from '!!raw-loader!../includes/templates/Button.mustache';
import '@wikimedia/wvui/dist/wvui.css'; import '@wikimedia/wvui/dist/wvui.css';
import mustache from 'mustache';
const wvuiIconAdd = 'M11 9V4H9v5H4v2h5v5h2v-5h5V9z'; const wvuiIconAdd = 'M11 9V4H9v5H4v2h5v5h2v-5h5V9z';
export default { export default {
@ -15,17 +17,12 @@ export default {
*/ */
/** /**
* @param {ButtonProps} props * @param {ButtonProps} props
* @param {string} text * @param {string} label
* @return {string} * @return {string}
*/ */
function makeButtonLegacy( props, text ) { function makeButtonLegacy( props, label ) {
let typeClass = ''; let typeClass = '';
let iconClass = 'mw-ui-icon-add'; let iconClass = 'mw-ui-icon-add';
switch ( props.type ) {
case 'quiet':
typeClass += ' mw-ui-quiet';
break;
}
switch ( props.action ) { switch ( props.action ) {
case 'progressive': case 'progressive':
typeClass += ' mw-ui-progressive'; typeClass += ' mw-ui-progressive';
@ -39,10 +36,12 @@ function makeButtonLegacy( props, text ) {
if ( props.type === 'primary' ) { if ( props.type === 'primary' ) {
iconClass = 'mw-ui-icon-add-invert'; iconClass = 'mw-ui-icon-add-invert';
} }
return `<button class="mw-ui-button ${typeClass}"> return mustache.render( buttonTemplate, {
<span class="mw-ui-icon ${iconClass}" label,
></span>${text} class: typeClass,
</button>`; 'is-quiet': props.type === 'quiet',
'html-vector-button-icon': `<span class="mw-ui-icon ${iconClass}"></span>`
} );
} }
/** /**
@ -82,15 +81,24 @@ function makeIcon() {
return ` return `
<tr> <tr>
<td> <td>
<button class="mw-ui-icon mw-ui-icon-element mw-ui-icon-add ${
mw-ui-button">Normal Icon</button> mustache.render( buttonTemplate, {
label: 'Normal Icon',
icon: 'add'
} )
}
</td> </td>
<td>N/A</td> <td>N/A</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<button class="mw-ui-icon mw-ui-icon-element mw-ui-icon-add ${
mw-ui-button mw-ui-quiet">Quiet Icon</button> mustache.render( buttonTemplate, {
label: 'Quiet Icon',
'is-quiet': true,
icon: 'add'
} )
}
</td> </td>
<td>N/A</td> <td>N/A</td>
</tr>`; </tr>`;