@3t-transform/threeteeui 0.1.5 → 0.1.7

package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js

@@ -1,77 +1,90 @@
-import icons from '../../../icons';
-export default {
-  title: 'Molecules/Standalone Input',
-  component: 'tttx-standalone-input',
-  argTypes: {
-    iconleft: {
-      options: icons,
-      control: { type: 'select' },
-    },
-    iconright: {
-      options: icons,
-      control: { type: 'select' },
-    },
-    label: {
-      control: { type: 'text' },
-    },
-    errormsg: {
-      control: { type: 'text' },
-    },
-    showerrormsg: {
-      control: { type: 'boolean' },
-    },
-    checked: {
-      control: { type: 'boolean' },
-    },
-    disabled: {
-      control: { type: 'boolean' },
-    },
-    max: {
-      control: { type: 'text' },
-    },
-    maxlength: {
-      control: { type: 'text' },
-    },
-    min: {
-      control: { type: 'text' },
-    },
-    minlength: {
-      control: { type: 'text' },
-    },
-    name: {
-      control: { type: 'text' },
-    },
-    pattern: {
-      control: { type: 'text' },
-    },
-    placeholder: {
-      control: { type: 'text' },
-    },
-    readonly: {
-      control: { type: 'boolean' },
-    },
-    required: {
-      control: { type: 'boolean' },
-    },
-    step: {
-      control: { type: 'text' },
-    },
-    type: {
-      options: ['text', 'password', 'email', 'number'],
-      control: { type: 'radio' },
-    },
-    value: {
-      control: { type: 'text' },
-    },
-  },
-};
-const TemplateTextInput = ({ iconleft, iconright, label, errormsg, showerrormsg, checked, disabled, max, maxlength, min, minlength, name, pattern, placeholder, readonly, required, step, type, value, }) => `
+import icons from '../../../icons';
+export default {
+  title: 'Molecules/Standalone Input',
+  component: 'tttx-standalone-input',
+  argTypes: {
+    iconleft: {
+      options: icons,
+      control: { type: 'select' },
+    },
+    iconright: {
+      options: icons,
+      control: { type: 'select' },
+    },
+    inputIcon: {
+      options: icons,
+      control: { type: 'select' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    errormsg: {
+      control: { type: 'text' },
+    },
+    showerrorbubble: {
+      control: { type: 'boolean' },
+    },
+    showerrormsg: {
+      control: { type: 'boolean' },
+    },
+    inline: {
+      control: { type: 'boolean' },
+    },
+    checked: {
+      control: { type: 'boolean' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    max: {
+      control: { type: 'text' },
+    },
+    maxlength: {
+      control: { type: 'text' },
+    },
+    min: {
+      control: { type: 'text' },
+    },
+    minlength: {
+      control: { type: 'text' },
+    },
+    name: {
+      control: { type: 'text' },
+    },
+    pattern: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    readonly: {
+      control: { type: 'boolean' },
+    },
+    required: {
+      control: { type: 'boolean' },
+    },
+    step: {
+      control: { type: 'text' },
+    },
+    type: {
+      options: ['text', 'password', 'email', 'number'],
+      control: { type: 'radio' },
+    },
+    value: {
+      control: { type: 'text' },
+    },
+  },
+};
+const TemplateTextInput = ({ iconleft, iconright, inputIcon, label, errormsg, showerrorbubble, showerrormsg, inline, checked, disabled, max, maxlength, min, minlength, name, pattern, placeholder, readonly, required, step, type, value, }) => `
 <tttx-standalone-input
   iconleft="${iconleft || ''}"
   iconright="${iconright || ''}"
+  inputicon="${inputIcon || ''}"
   label="${label}"
   errormsg="${errormsg}"
+  showerrorbubble="${showerrorbubble === false ? 'false' : 'true'}"
   ${showerrormsg ? 'showerrormsg' : ''}
+  ${inline ? 'inline' : ''}
   ${checked ? 'checked' : ''}
   ${disabled ? 'disabled' : ''}
   ${max ? `max=${max}` : ''}
@@ -87,70 +100,70 @@ const TemplateTextInput = ({ iconleft, iconright, label, errormsg, showerrormsg,
   type="${type}"
   value="${value}"  
 />
-`;
-export const InputField = TemplateTextInput.bind({});
-InputField.args = {
-  value: '',
-  label: 'First name',
-  type: 'text',
-  errormsg: 'Please enter your first name',
-  required: false,
-  showerrormsg: false,
-  placeholder: 'Enter first name',
-};
-// export const TextInputIconLeft = TemplateTextInput.bind({});
-// TextInputIconLeft.args = {
-//   value: 'Uh egg',
-//   label: 'Please tell me about your egg',
-//   iconleft: 'egg',
-//   type: 'text',
-//   errormsg: 'Incorrect egg, please egg again.',
-//   required: true,
-//   showerrormsg: true,
-//   placeholder: 'Please for the love of god tell me about your egg',
-// };
-// export const TextInputIconRight = TemplateTextInput.bind({});
-// TextInputIconRight.args = {
-//   value: 'Uh egg',
-//   label: 'Please tell me about your egg',
-//   iconright: 'egg',
-//   type: 'text',
-//   errormsg: 'Incorrect egg, please egg again.',
-//   required: true,
-//   showerrormsg: true,
-//   placeholder: 'Please for the love of god tell me about your egg',
-// };
-// export const PasswordInputBasic = TemplateTextInput.bind({});
-// PasswordInputBasic.args = {
-//   value: 'qwefdweferg',
-//   label: 'Input your Password',
-//   iconleft: 'lock',
-//   type: 'password',
-//   errormsg: 'Password is not strong enough',
-//   required: true,
-//   showerrormsg: true,
-//   placeholder: 'Your password',
-// };
-// export const EmailInputBasic = TemplateTextInput.bind({});
-// EmailInputBasic.args = {
-//   value: 'email.address@website.com',
-//   label: 'Choose an email address',
-//   iconleft: 'mail',
-//   type: 'email',
-//   errormsg: 'This email smells funny',
-//   required: true,
-//   valid: false,
-//   showerrormsg: true,
-//   placeholder: 'Your email address',
-// };
-// export const NumberInputBasic = TemplateTextInput.bind({});
-// NumberInputBasic.args = {
-//   value: '42069',
-//   label: 'What is your favourite number?',
-//   iconleft: '123',
-//   type: 'number',
-//   errormsg: 'This number feels wrong',
-//   required: true,
-//   showerrormsg: true,
-//   placeholder: 'Your favourite number',
-// };
+`;
+export const InputField = TemplateTextInput.bind({});
+InputField.args = {
+  value: '',
+  label: 'First name',
+  type: 'text',
+  errormsg: 'Please enter your first name',
+  required: false,
+  showerrormsg: false,
+  placeholder: 'Enter first name',
+};
+// export const TextInputIconLeft = TemplateTextInput.bind({});
+// TextInputIconLeft.args = {
+//   value: 'Uh egg',
+//   label: 'Please tell me about your egg',
+//   iconleft: 'egg',
+//   type: 'text',
+//   errormsg: 'Incorrect egg, please egg again.',
+//   required: true,
+//   showerrormsg: true,
+//   placeholder: 'Please for the love of god tell me about your egg',
+// };
+// export const TextInputIconRight = TemplateTextInput.bind({});
+// TextInputIconRight.args = {
+//   value: 'Uh egg',
+//   label: 'Please tell me about your egg',
+//   iconright: 'egg',
+//   type: 'text',
+//   errormsg: 'Incorrect egg, please egg again.',
+//   required: true,
+//   showerrormsg: true,
+//   placeholder: 'Please for the love of god tell me about your egg',
+// };
+// export const PasswordInputBasic = TemplateTextInput.bind({});
+// PasswordInputBasic.args = {
+//   value: 'qwefdweferg',
+//   label: 'Input your Password',
+//   iconleft: 'lock',
+//   type: 'password',
+//   errormsg: 'Password is not strong enough',
+//   required: true,
+//   showerrormsg: true,
+//   placeholder: 'Your password',
+// };
+// export const EmailInputBasic = TemplateTextInput.bind({});
+// EmailInputBasic.args = {
+//   value: 'email.address@website.com',
+//   label: 'Choose an email address',
+//   iconleft: 'mail',
+//   type: 'email',
+//   errormsg: 'This email smells funny',
+//   required: true,
+//   valid: false,
+//   showerrormsg: true,
+//   placeholder: 'Your email address',
+// };
+// export const NumberInputBasic = TemplateTextInput.bind({});
+// NumberInputBasic.args = {
+//   value: '42069',
+//   label: 'What is your favourite number?',
+//   iconleft: '123',
+//   type: 'number',
+//   errormsg: 'This number feels wrong',
+//   required: true,
+//   showerrormsg: true,
+//   placeholder: 'Your favourite number',
+// };

package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.css

@@ -0,0 +1,30 @@
+:host {
+  height: 36px;
+  display: flex;
+  padding: 8px 0;
+  gap: 8px;
+}
+
+:host(.bordered) {
+  border-bottom: 1px solid #d5d5d5;
+}
+
+slot[name=before] {
+  display: flex;
+  flex: 1 1 0px;
+  gap: 8px;
+}
+
+slot[name=center] {
+  display: flex;
+  justify-content: center;
+  flex: 1 1 0px;
+  gap: 8px;
+}
+
+slot[name=after] {
+  display: flex;
+  justify-content: end;
+  flex: 1 1 0px;
+  gap: 8px;
+}

package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js

@@ -0,0 +1,44 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Host } from '@stencil/core';
+export class TttxToolbar {
+  constructor() {
+    this.border = true;
+  }
+  render() {
+    return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
+  }
+  static get is() { return "tttx-toolbar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-toolbar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-toolbar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "border": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "border",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+}

package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js

@@ -0,0 +1,20 @@
+export default {
+  title: 'molecules/Toolbar',
+  component: 'tttx-toolbar',
+  argTypes: {
+    border: {
+      control: { type: 'boolean' }
+    },
+  },
+};
+const Default = ({ border }) => `
+    <tttx-toolbar border="${border ? 'true' : 'false'}">
+      <span slot="before"><tttx-button design="primary">Before</tttx-button></span>
+      <span slot="center"><div style="position: relative; top: -4px;"><tttx-standalone-input placeholder="center" inline required showerrorbubble="false" inputicon="search" /></div></span>
+      <span slot="after"><tttx-keyvalue-block horizontal keyvalues='{"Position":"after"}' /></span>
+    <tttx-toolbar>
+`;
+export const BasicStringList = Default.bind({});
+BasicStringList.args = {
+  border: true
+};

package/dist/collection/components/palette.stories.js

@@ -1,7 +1,7 @@
-export default {
-  title: 'Foundations/Palette',
-  component: 'tttx-palette',
-};
+export default {
+  title: 'Foundations/Palette',
+  component: 'tttx-palette',
+};
 const Swatch = (colour, name = '') => `
 <div class="swatch">
   <div class="swatchcontent" style="background-color:${colour};">
@@ -9,7 +9,7 @@ const Swatch = (colour, name = '') => `
   </div>
   <p>${name}</p>  
 </div>
-`;
+`;
 const Template = () => `
 
 <style>
@@ -84,5 +84,5 @@ ${Swatch('#EA6100', '$dv-high')}
 ${Swatch('#DC0000', '$dv-very-high')}
 ${Swatch('#A20000', '$dv-highest')}
 
-`;
-export const Default = Template.bind({});
+`;
+export const Default = Template.bind({});

package/dist/collection/docs/gettingstarted-developer.stories.js

@@ -1,9 +1,9 @@
-export default {
-  title: 'Getting Started/Developer',
-};
+export default {
+  title: 'Getting Started/Developer',
+};
 const Template = () => `
 <tttx-typography>
     <p>Quick start guide for developers</p>
 </tttx-typography>
-`;
-export const Default = Template.bind({});
+`;
+export const Default = Template.bind({});