@muonic/muon 0.0.2-experimental-125-e41d6ed.0 → 0.0.2-experimental-126-4fb60a6.0

package/components/card/story.js

@@ -1,15 +1,23 @@
 import { Card } from '@muonic/muon/components/card';
 import setup from '@muonic/muon/storybook/stories';
 import { StandardLink as CTALink } from '../cta/story';
+import { staticHTML, unsafeStatic } from '@muonic/muon';
 
 const details = setup('card', Card);
 
-export default details.defaultValues;
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate']
+    }
+  }
+};
 
-const innerDetail = (args) => `
-  <h2 slot="header">${args.header}</h2>
-  ${args.content}
-  <div slot="footer">${args.footer}</div>
+const innerDetail = (args) => staticHTML`
+  <h2 slot="header">${unsafeStatic(args.header)}</h2>
+  ${unsafeStatic(args.content)}
+  <div slot="footer">${unsafeStatic(args.footer)}</div>
 `;
 
 const StandardTemplate = (args) => details.template(args, innerDetail);
@@ -31,14 +39,14 @@ StandardWithImage.args = {
   footer: `We've even got a free <a href='#!'>smartphone app</a>.`
 };
 
-const innerDetailWithCTA = (args) => `
-  <h2 slot="header">${args.header}</h2>
-  ${args.content}
-  <div slot="footer">${CTALink(args.footer)}</div>
+const innerDetailWithCTA = (args) => staticHTML`
+  <h2 slot="header">${unsafeStatic(args.header)}</h2>
+  ${unsafeStatic(args.content)}
+  <div slot="footer">${CTALink(args.cta)}</div>
 `;
 export const StandardWithCTA = (args) => details.template(args, innerDetailWithCTA);
 StandardWithCTA.args = {
   header: 'Where can I buy an ice cream?',
   content: `<p>We have the most wonderful shop just in town, that sells a whole variety of different ice creams. Just pop on in and we can get you sorted with your favourite flavour!</p>`,
-  footer: { text: 'Click Here', href: '#!' }
+  cta: { ...CTALink.args, text: 'Click Here', href: '#!' }
 };

package/components/cta/story.js

@@ -1,20 +1,28 @@
 import { Cta } from '@muonic/muon/components/cta';
 import setup from '@muonic/muon/storybook/stories';
+import { staticHTML } from '@muonic/muon';
 
 const details = setup('cta', Cta);
 const tag = details.getTagEl();
 
-export default details.defaultValues;
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'submitTemplate', 'resetTemplate', 'loading-message']
+    }
+  }
+};
 
-const StandardTemplate = (args) => details.template(args, (args) => args.text);
+const StandardTemplate = (args) => staticHTML`${details.template(args, (args) => args.text)}`;
 const ButtonTemplate = (args) => {
   const dArgs = details.dynamicArgs(args);
 
-  return `<${tag} ${dArgs} ._isButton=${true}>${args.text}</${tag}>`;
+  return staticHTML`<${tag} ${dArgs} ._isButton=${true}>${args.text}</${tag}>`;
 };
-const FormTemplate = (args) => `<form>${details.template(args, (args) => args.text)}</form>`;
-const WithinLinkTemplate = (args) => `<a href="${args.link}">${details.template(args, (args) => args.text)}</a>`;
-const WithinButtonTemplate = (args) => `<button>${details.template(args, (args) => args.text)}</button>`;
+const FormTemplate = (args) => staticHTML`<form>${StandardTemplate(args)}</form>`;
+const WithinLinkTemplate = (args) => staticHTML`<a href="${args.link}">${StandardTemplate(args)}</a>`;
+const WithinButtonTemplate = (args) => staticHTML`<button>${StandardTemplate(args)}</button>`;
 
 export const Standard = StandardTemplate.bind({});
 Standard.args = { text: 'Highpoint' };

package/components/detail/story.js

@@ -1,13 +1,21 @@
 import { Detail } from '@muonic/muon/components/detail';
 import setup from '@muonic/muon/storybook/stories';
+import { staticHTML, unsafeStatic } from '@muonic/muon';
 
 const details = setup('detail', Detail);
 
-export default details.defaultValues;
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate']
+    }
+  }
+};
 
-const innerDetail = (args) => `
-  <div slot="heading">${args.heading}</div>
-  ${args.content}
+const innerDetail = (args) => staticHTML`
+  <div slot="heading">${unsafeStatic(args.heading)}</div>
+  ${unsafeStatic(args.content)}
 `;
 
 const StandardTemplate = (args) => details.template(args, innerDetail);

package/components/form/story.js

@@ -1,38 +1,57 @@
 import { Form } from '@muonic/muon/components/form';
 import setup from '@muonic/muon/storybook/stories';
-import { Text, Email, Checkbox } from '../inputter/story';
+import * as InputterStories from '../inputter/story';
 import { Standard as SubmitCTA } from '../cta/story';
+import { staticHTML } from '@muonic/muon';
 
 const details = setup('form', Form);
 
-export default details.defaultValues;
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'submit']
+    }
+  }
+};
 
-const innerDetail = () => `
-<form>
-${Text({ ...Text.args,
+const innerDetail = (args) => staticHTML`
+  <form>
+    ${InputterStories.Text(args.Text)}
+    ${InputterStories.Email(args.Email)}
+
+    <label for="user-id">User ID<label>
+    <input type="text" id="user-id" name="user-id" required/>
+
+    ${InputterStories.Checkbox(args.Checkbox)}
+
+    <input type="reset" />
+    ${SubmitCTA(args.Submit)}
+  <form>`;
+
+export const Standard = (args) => details.template(args, innerDetail);
+
+Standard.args = {
+  Text: {
+    ...InputterStories.Text.args,
     name: 'username',
     label: 'Name'
-  })}
-${Email({ ...Email.args,
+  },
+  Email: {
+    ...InputterStories.Email.args,
     name: 'useremail'
-  })}
-  
-  <label for="user-id">User ID<label>
-  <input type="text" id="user-id" name="user-id" required/>
-
-${Checkbox({ ...Checkbox.args,
+  },
+  Checkbox: {
+    ...InputterStories.Checkbox.args,
     value: 'b',
     options: [
       { label: 'Option A', value: 'a' },
       { label: 'Option B', value: 'b' }
     ]
-  })}
-
-  <input type="reset" />
-  ${SubmitCTA({ ...SubmitCTA.args,
+  },
+  Submit: {
+    ...SubmitCTA.args,
     type: 'submit',
     text: 'Submit'
-  })}
-<form>`;
-
-export const Standard = (args) => details.template(args, innerDetail);
+  }
+};

package/components/icon/story.js

@@ -6,22 +6,21 @@ import {
 
 const details = setup('icon', Icon);
 
-details.defaultValues.argTypes = {
-  ...details.defaultValues.argTypes,
-  iconSize: {
-    table: {
-      disable: true
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'sizes', 'iconSize', 'allSizes']
     }
   },
-  size: {
-    control: {
-      type: 'select',
-      options: [...ICON_CONFIG_SIZES]
+  argTypes: {
+    ...details.defaultValues.argTypes,
+    size: {
+      control:
+      { type: 'range', min: 1, max: ICON_CONFIG_SIZES.length, step: 1 }
     }
   }
 };
 
-export default details.defaultValues;
-
 export const Standard = (args) => details.template(args);
 Standard.args = { name: 'arrow-right' };

package/components/image/story.js

@@ -1,9 +1,26 @@
 import { Image } from '@muonic/muon/components/image';
 import setup from '@muonic/muon/storybook/stories';
+import { IMAGE_CONFIG_RATIOS } from '@muonic/muon/build/tokens/es6/muon-tokens.mjs';
 
 const details = setup('image', Image);
 
-export default details.defaultValues;
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate', 'placeholderImage']
+    }
+  },
+  argTypes: {
+    ...details.defaultValues.argTypes,
+    ratio: {
+      options: IMAGE_CONFIG_RATIOS,
+      control: {
+        type: 'inline-radio'
+      }
+    }
+  }
+};
 
 const StandardTemplate = (args) => details.template(args, (args) => args.text);
 

package/components/inputter/story.js

@@ -1,53 +1,56 @@
 import { Inputter } from '@muonic/muon/components/inputter';
 import setup from '@muonic/muon/storybook/stories';
 import customValidation from '@muon/utils/validation/index.js';
+import { staticHTML, unsafeStatic } from '@muonic/muon';
+
 const details = setup('inputter', Inputter);
 
-details.defaultValues.argTypes = {
-  ...details.defaultValues.argTypes,
-  validation: {
-    control: {
-      type: 'multi-select',
-      options: [...Object.keys(customValidation)]
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate']
+    }
+  },
+  argTypes: {
+    ...details.defaultValues.argTypes,
+    validation: {
+      control: {
+        type: 'multi-select',
+        options: [...Object.keys(customValidation)]
+      }
     }
   }
 };
 
-export default details.defaultValues;
+const autoCompleteTemplate = (args) => args.autocomplete ? unsafeStatic(`autocomplete="${args.autocomplete}"`) : '';
 
-const labelTemplate = (args) => `
-  <label slot="label">${args.label}</label>
-`;
+const placeHolderTemplate = (args) => args.placeholder ? unsafeStatic(`placeholder="${args.placeholder}"`) : '';
 
-const tipDetailsTemplate = (args) => `
-  <div slot="tip-details">${args.tip}</div>
-`;
+const disabledTemplate = (args) => args.disabled ? unsafeStatic(`disabled`) : '';
 
-const autoCompleteTemplate = (args) => `
-  ${args.autocomplete ? `autocomplete="${args.autocomplete}"` : ''}
-`;
+const labelTemplate = (args) => staticHTML`
+  <label slot="label">${args.label}</label>`;
 
-const placeHolderTemplate = (args) => `
-  ${args.placeholder ? `placeholder="${args.placeholder}"` : ''}
-`;
+const tipDetailsTemplate = (args) => staticHTML`
+  <div slot="tip-details">${args.tip}</div>`;
 
-const disabledTemplate = (args) => `
-  ${args.disabled ? `disabled` : ''}
-`;
+const inputTemplate = (args) => staticHTML`
+<input type="${args.inputtype}" ${placeHolderTemplate(args)} ${autoCompleteTemplate(args)} ${disabledTemplate(args)}>`;
 
-const slottedContent = (args) => `
+const singleTemplate = (args) => staticHTML`
   ${args.label ? labelTemplate(args) : ''}
-  <input type="${args.inputtype}" ${placeHolderTemplate(args)} ${autoCompleteTemplate(args)} ${disabledTemplate(args)}>
-  ${args.tip ? tipDetailsTemplate(args) : ''}
-`;
+  ${args.inputtype ? inputTemplate(args) : ''}
+  ${args.tip ? tipDetailsTemplate(args) : ''}`;
 
-const InputterStandardTemplate = (args) => details.template(args, slottedContent);
+const InputterStandardTemplate = (args) => details.template(args, singleTemplate);
 export const Text = InputterStandardTemplate.bind({});
 Text.args = {
   inputtype: 'text',
   label: 'Text',
   value: '',
   helper: 'Useful information to help populate this field.',
+  tip: '',
   validation: ['isRequired'],
   placeholder: 'e.g. Placeholder'
 };
@@ -138,7 +141,7 @@ Separator.args = {
   separator: '-'
 };
 
-const innerNumber = (args) => `
+const innerNumber = (args) => staticHTML`
   ${args.label ? labelTemplate(args) : ''}
   <input type="${args.inputtype}"  min="${args.min}" max="${args.max}">
   ${args.tip ? tipDetailsTemplate(args) : ''}
@@ -153,7 +156,7 @@ Number.args = {
   max: 10
 };
 
-const innerTextarea = (args) => `
+const innerTextarea = (args) => staticHTML`
   <label slot="label">${args.label}</label>
   <textarea placeholder="${args.placeholder}"></textarea>
 `;
@@ -166,19 +169,25 @@ Textarea.args = {
   placeholder: 'e.g. Provide information'
 };
 
-const innerMultiple = (args) => `
+const innerMultiple = (args) => staticHTML`
+  <input type="${args.inputtype}" name="${args.name}" value="${args.value}" ${unsafeStatic(args.states?.join(' ') ?? '')} id="${args.id}">
+  <label for="${args.id}">${unsafeStatic(args.label)}</label>
+`;
+const multiTemplate = (args) => staticHTML`
   ${args.options?.map((option, i) => {
-    const states = option.states?.join(' ') ?? '';
     const id = `${args.inputtype}-${i + 1}`;
-    return `
-    <input type="${args.inputtype}" name="${args.name}" value="${option.value}" ${states} id="${id}">
-    <label for="${id}">${option.label}</label>
-    `;
-  }).join(' ')}
+    return staticHTML`${innerMultiple({
+      ...args,
+      value: option.value,
+      label: option.label,
+      id,
+      states: option.states
+    })}`;
+  })}
   ${args.tip ? tipDetailsTemplate(args) : ''}
 `;
 
-const InputterMultipleTemplate = (args) => details.template(args, innerMultiple);
+const InputterMultipleTemplate = (args) => details.template(args, multiTemplate);
 export const Checkbox = InputterMultipleTemplate.bind({});
 Checkbox.args = {
   inputtype: 'checkbox',
@@ -211,14 +220,14 @@ Radio.args = {
   ]
 };
 
-const innerSelect = (args) => `
+const selectTemplate = (args) => staticHTML`
   <label slot="label">${args.label}</label>
   <select name="${args.name}">
-  ${args.options?.map((option) => `<option value="${option.value}">${option.label}</option>`).join(' ')}
+  ${args.options?.map((option) => staticHTML`<option value="${option.value}">${option.label}</option>`)}
   </select>
 `;
 
-export const Select = (args) => details.template(args, innerSelect);
+export const Select = (args) => details.template(args, selectTemplate);
 Select.args = {
   label: 'Select',
   value: '',

package/index.js

@@ -18,7 +18,7 @@ import { cache } from 'lit/directives/cache.js';
 import { AsyncDirective } from 'lit/async-directive.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { literal, html as staticHTML } from 'lit/static-html.js';
+import { literal, html as staticHTML, unsafeStatic } from 'lit/static-html.js';
 import { until } from 'lit/directives/until.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { MuonElement } from '@muonic/muon/muon-element';
@@ -43,6 +43,7 @@ export {
   dedupeMixin,
   literal,
   staticHTML,
+  unsafeStatic,
   until,
   noChange,
   repeat,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-125-e41d6ed.0",
+  "version": "0.0.2-experimental-126-4fb60a6.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/storybook/stories.js

@@ -1,3 +1,4 @@
+import { staticHTML, unsafeStatic } from '@muonic/muon';
 export default (name, el) => {
   const prefix = process.env.MUON_PREFIX;
   const element = `${prefix}-${name}`;
@@ -40,7 +41,7 @@ export default (name, el) => {
   };
 
   const getTagEl = () => {
-    return element;
+    return unsafeStatic(element);
   };
 
   const dynamicArgs = (args) => {
@@ -63,14 +64,14 @@ export default (name, el) => {
       }
     }).filter((arg) => arg).join(' ');
 
-    return dArgs;
+    return unsafeStatic(dArgs);
   };
 
   const template = (args, inner) => {
     const tag = getTagEl();
     const dArgs = dynamicArgs(args);
-
-    return `<${tag} ${dArgs}>${inner ? inner(args) : ''}</${tag}>`;
+    return staticHTML`
+      <${tag} ${dArgs}>${inner ? inner(args) : ''}</${tag}>`;
   };
 
   return {