@3t-transform/threeteeui 0.0.7 → 0.0.8

package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js

@@ -0,0 +1,23 @@
+export default {
+  title: 'Atoms/PopoverContent',
+  component: 'tttx-popover-content',
+  argTypes: {
+    header: {
+      control: {
+        type: 'text',
+      }
+    },
+    body: {
+      control: {
+        type: 'text',
+      }
+    },
+  },
+};
+const Template = ({ header, body, linkcontext }) => `<tttx-popover-content header="${header}" body="${body}" linkcontext="${linkcontext}" />`;
+export const Basic = Template.bind({});
+Basic.args = {
+  header: 'HEADER',
+  body: 'BODY',
+  linkcontext: 'TESTING123'
+};

package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.css

@@ -3,7 +3,7 @@
 }
 
 .material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
+  font-family: "Material Symbols Rounded", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 24px;
@@ -75,7 +75,6 @@
 
 .label {
   display: block;
-  font-size: 16px;
   height: 18px;
   font-weight: 600;
   color: #212121;
@@ -95,7 +94,6 @@
 }
 
 .errormsg {
-  height: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -105,7 +103,6 @@
   background-color: transparent;
   height: 26px;
   font-size: 14px;
-  color: white;
   border-radius: none;
   z-index: 2;
   color: #DC0000;

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

@@ -8,30 +8,26 @@ export default {
   },
 };
 export const CreateUserTemplate = () => `
-  <tttx-form>
-  <tttx-single-input label="Name" form-data="name" errormsg="You need a name please" required showerrormsg></tttx-single-input>
-  <tttx-single-input label="Email Address" form-data="email" errormsg="Email is required" required showerrormsg></tttx-single-input>
-  <tttx-single-input label="Password" form-data="password" type="password" errormsg="Enter a password" required showerrormsg></tttx-single-input>
-    <tttx-single-input label="Repeat Password" form-data="repeatpassword" type="password" errormsg="Repeat your password" required showerrormsg></tttx-single-input>
-    <tttx-checkbox label="Has Signed GDPR" form-data="gdpr" required></tttx-checkbox>
-
-    <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Create User</tttx-button>
-  </tttx-form>
+<tttx-form>
+  <tttx-input label="Email Address" form-data="email" errormsg="Email is required" required showerrormsg></tttx-input>
+  <tttx-input label="Password" form-data="password" type="password" errormsg="Enter a password" required showerrormsg></tttx-input>
+  <tttx-input label="Repeat Password" form-data="repeatpassword" type="password" errormsg="Repeat your password" required showerrormsg></tttx-input>
+  <tttx-checkbox label="Has Signed GDPR" form-data="gdpr" required></tttx-checkbox>
+  <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Create User</tttx-button>
+</tttx-form>
 `;
 export const LoginTemplate = () => `
-  <tttx-form>
-    <tttx-single-input label="Email" form-data="email" errormsg="email is required" required></tttx-single-input>
-    <tttx-single-input label="Password" form-data="password" type="password" errormsg="password is required" required></tttx-single-input>
-    <tttx-checkbox label="Remember my Password" form-data="rememberpassword" required></tttx-checkbox>
-
-    <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Log In</tttx-button>
-  </tttx-form>
+<tttx-form>
+  <tttx-input label="Email" form-data="email" errormsg="email is required" required></tttx-input>
+  <tttx-input label="Password" form-data="password" type="password" errormsg="password is required" required></tttx-input>
+  <tttx-checkbox label="Remember my Password" form-data="rememberpassword" required></tttx-checkbox>
+  <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Log In</tttx-button>
+</tttx-form>
 `;
 export const TextBoxExample = () => `
-  <tttx-form>
-    <tttx-text-box form-data="firstname" label="First Name" errormsg="Field is required" required></tttx-text-box>
-    <tttx-text-box form-data="lastname" label="Last Name"></tttx-text-box>
-
-    <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Submit</tttx-button>
-  </tttx-form>
+<tttx-form>
+  <tttx-text-box form-data="firstname" label="First Name" errormsg="Field is required" required></tttx-text-box>
+  <tttx-text-box form-data="lastname" label="Last Name"></tttx-text-box>
+  <tttx-button font-color="font-white" button-style="primary-blue" function-data="submit">Submit</tttx-button>
+</tttx-form>
 `;

package/dist/collection/components/{atoms/tttx-text-box/tttx-text-box.css → molecules/tttx-input/tttx-input.css}

@@ -3,7 +3,7 @@
 }
 
 .material-symbols-rounded {
-  font-family: "Material Symbols Rounded";
+  font-family: "Material Symbols Rounded", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 24px;
@@ -75,7 +75,6 @@
 
 .label {
   display: block;
-  font-size: 16px;
   height: 18px;
   font-weight: 600;
   color: #212121;
@@ -95,7 +94,6 @@
 }
 
 .errormsg {
-  height: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -105,7 +103,6 @@
   background-color: transparent;
   height: 26px;
   font-size: 14px;
-  color: white;
   border-radius: none;
   z-index: 2;
   color: #DC0000;
@@ -139,4 +136,14 @@
 
 .errorstate {
   border-color: #DC0000;
+}
+
+.icon-right {
+  margin-top: 5px;
+  margin-right: 4px;
+}
+
+.icon-left {
+  margin-top: 5px;
+  margin-left: 4px;
 }

package/dist/collection/components/{atoms/tttx-single-input/tttx-single-input.js → molecules/tttx-input/tttx-input.js}

@@ -1,5 +1,5 @@
 import { Host, h } from '@stencil/core';
-export class TttxSingleInput {
+export class TttxInput {
   constructor() {
     this.handleFocus = () => {
       this.isfocused = true;
@@ -27,18 +27,18 @@ export class TttxSingleInput {
   }
   render() {
     const inputClass = ['container', this.showerrormsg ? 'errorstate' : '', this.isfocused ? 'focused' : '', this.iconleft ? 'iconleft' : ''].join(' ');
-    return (h(Host, null, h("div", { class: "field spacing" }, this.label && h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : ''), h("div", { class: inputClass }, this.iconleft && (h("div", { class: "icon-left" }, h("span", { class: "material-symbols-rounded" }, this.iconleft))), h("input", { class: "input", onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), type: this.type, placeholder: this.placeholder, value: this.value, onInput: event => this.handleChange(event) }), this.iconright && (h("div", { class: "icon-right" }, h("span", { class: "material-symbols-rounded" }, this.iconright)))), this.showerrormsg && this.errormsg && h("div", { class: "errormsg" }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+    return (h(Host, null, h("div", { class: "field spacing" }, this.label && h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : ''), h("div", { class: inputClass }, this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, colour: "grey" }))), h("input", { class: "input", onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), type: this.type, placeholder: this.placeholder, value: this.value, onInput: event => this.handleChange(event) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, colour: "grey" })))), this.showerrormsg && this.errormsg && h("div", { class: "errormsg" }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
   }
-  static get is() { return "tttx-single-input"; }
+  static get is() { return "tttx-input"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["tttx-single-input.scss"]
+      "$": ["tttx-input.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["tttx-single-input.css"]
+      "$": ["tttx-input.css"]
     };
   }
   static get properties() {

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

@@ -0,0 +1,106 @@
+import icons from '../../../icons';
+export default {
+  title: 'Molecules/Text Input',
+  component: 'tttx-input',
+  argTypes: {
+    iconleft: {
+      options: icons,
+      control: { type: 'select' },
+    },
+    iconright: {
+      options: icons,
+      control: { type: 'select' },
+    },
+    type: {
+      options: ['text', 'password', 'email', 'number'],
+      control: { type: 'radio' },
+    },
+    value: {
+      control: { type: 'text' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    required: {
+      control: { type: 'boolean' },
+    },
+    errormsg: {
+      control: { type: 'text' },
+    },
+    showerrormsg: {
+      control: { type: 'boolean' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+  },
+};
+const TemplateTextInput = ({ value, label, iconleft, iconright, type, required, errormsg, showerrormsg, placeholder }) => `
+<tttx-input
+  placeholder="${placeholder}"
+  iconleft="${iconleft || ''}"
+  iconright="${iconright || ''}"
+  value="${value}"  
+  label="${label}"
+  type="${type}"
+  errormsg="${errormsg}"
+  ${required ? `required` : ''}
+  ${showerrormsg ? `showerrormsg` : ''}
+></tttx-input>
+`;
+export const TextInputBasic = TemplateTextInput.bind({});
+TextInputBasic.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/palette.stories.js

@@ -0,0 +1,88 @@
+export default {
+  title: 'Foundations/Palette',
+  component: 'tttx-palette',
+};
+const Swatch = (colour, name = "") => `
+<div class="swatch">
+  <div class="swatchcontent" style="background-color:${colour};">
+    <div class="pill">${colour}</div>
+  </div>
+  <p>${name}</p>  
+</div>
+`;
+const Template = () => `
+
+<style>
+h2 { clear:both; margin-top: 2em; display: block; }
+.swatch { width:130px; height:130px; float:left; font-size: 12px; }
+.swatchcontent { width:120px; height:80px;  }
+.pill {
+  margin: 0.5em;
+  display: inline-block;
+  padding: 0.25em 0.5em;
+  border-radius: 1em;
+  background-color: #FFFFFF;
+  color: #000000;
+  font-size: 1em;
+  font-weight: bold;
+}
+p { margin: 8px 0 0 0; }
+</style>
+
+<h2>Primary</h2>
+${Swatch("#111111", "$black")}
+${Swatch("#FFFFFF", "$white")}
+${Swatch("#00187C", "$brand")}
+${Swatch("#1579C6", "$accent")}
+${Swatch("#E7F1F9", "$selected")}
+
+<h2>Text and icons</h2>
+${Swatch("#212121", "$ui-primary")}
+${Swatch("#757575", "$ui-secondary")}
+${Swatch("#9E9E9E", "$ui-placeholder")}
+${Swatch("#4C4C4C", "$ui-disabled")}
+
+<h2>Layout</h2>
+${Swatch("#F0F0F0", "$background")}
+${Swatch("#FAFAFA", "$backround-secondary")}
+${Swatch("#D5D5D5", "$ui-border")}
+
+<h2>Buttons</h2>
+${Swatch("#1579C6", "$btn-accent")}
+${Swatch("#146EB3", "$btn-accent-hover")}
+${Swatch("#10609D", "$btn-accent-active")}
+<div style="clear:both;"></div>
+${Swatch("#FFFFFF", "$btn-default")}
+${Swatch("#e6e6e6", "$btn-hover")}
+${Swatch("#cccccc", "$btn-active")}
+<div style="clear:both;"></div>
+${Swatch("#DC0000", "$btn-danger")}
+${Swatch("#C70101", "$btn-danger-hover")}
+${Swatch("#B30303", "$btn-danger-active")}
+<div style="clear:both;"></div>
+${Swatch("#BDBDBD", "$btn-disabled")}
+
+<h2>Severity</h2>
+${Swatch("#DC0000", "$severity-critical")}
+${Swatch("#F59500", "$severity-warning")}
+${Swatch("#A2BB31", "$severity-success")}
+${Swatch("#00187C", "$severity-info")}
+<div style="clear:both;"></div>
+${Swatch("#F2BEBE", "$message-critical")}
+${Swatch("#F9E1BE", "$message-warning")}
+${Swatch("#E4EBC9", "$message-success")}
+${Swatch("#C2DAEE", "$message-info")}
+
+<h2>Diverging</h2>
+${Swatch("#0373A5", "$dv-lowest")}
+${Swatch("#00C2D1", "$dv-very-low")}
+${Swatch("#50A472", "$dv-low")}
+${Swatch("#A2BB31", "$dv-med-low")}
+${Swatch("#FDC500", "$dv-medium")}
+${Swatch("#F59500", "$dv-med-high")}
+${Swatch("#EA6100", "$dv-high")}
+${Swatch("#DC0000", "$dv-very-high")}
+${Swatch("#A20000", "$dv-highest")}
+
+`;
+export const Default = Template.bind({});

package/dist/components/index.d.ts

@@ -2,8 +2,10 @@
 export { TttxButton as TttxButton } from '../types/components/atoms/tttx-button/tttx-button';
 export { TttxCheckbox as TttxCheckbox } from '../types/components/atoms/ttx-checkbox/tttx-checkbox';
 export { TttxForm as TttxForm } from '../types/components/molecules/tttx-form/tttx-form';
-export { TttxSingleInput as TttxSingleInput } from '../types/components/atoms/tttx-single-input/tttx-single-input';
-export { TttxTextBox as TttxTextBox } from '../types/components/atoms/tttx-text-box/tttx-text-box';
+export { TttxIcon as TttxIcon } from '../types/components/atoms/tttx-icon/tttx-icon';
+export { TttxInput as TttxInput } from '../types/components/molecules/tttx-input/tttx-input';
+export { TttxLoadingSpinner as TttxLoadingSpinner } from '../types/components/atoms/tttx-loading-spinner/tttx-loading-spinner';
+export { TttxPopoverContent as TttxPopoverContent } from '../types/components/atoms/tttx-popover-content/tttx-popover-content';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -2,5 +2,7 @@ export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/intern
 export { TttxButton, defineCustomElement as defineCustomElementTttxButton } from './tttx-button.js';
 export { TttxCheckbox, defineCustomElement as defineCustomElementTttxCheckbox } from './tttx-checkbox.js';
 export { TttxForm, defineCustomElement as defineCustomElementTttxForm } from './tttx-form.js';
-export { TttxSingleInput, defineCustomElement as defineCustomElementTttxSingleInput } from './tttx-single-input.js';
-export { TttxTextBox, defineCustomElement as defineCustomElementTttxTextBox } from './tttx-text-box.js';
+export { TttxIcon, defineCustomElement as defineCustomElementTttxIcon } from './tttx-icon.js';
+export { TttxInput, defineCustomElement as defineCustomElementTttxInput } from './tttx-input.js';
+export { TttxLoadingSpinner, defineCustomElement as defineCustomElementTttxLoadingSpinner } from './tttx-loading-spinner.js';
+export { TttxPopoverContent, defineCustomElement as defineCustomElementTttxPopoverContent } from './tttx-popover-content.js';

package/dist/components/tttx-checkbox.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\";font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;font-size:16px;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{height:16px;display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;color:white;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}";
+const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}";
 
 const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/{tttx-text-box.d.ts → tttx-icon.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface TttxTextBox extends Components.TttxTextBox, HTMLElement {}
-export const TttxTextBox: {
-  prototype: TttxTextBox;
-  new (): TttxTextBox;
+interface TttxIcon extends Components.TttxIcon, HTMLElement {}
+export const TttxIcon: {
+  prototype: TttxIcon;
+  new (): TttxIcon;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/tttx-icon.js

@@ -0,0 +1,6 @@
+import { T as TttxIcon$1, d as defineCustomElement$1 } from './tttx-icon2.js';
+
+const TttxIcon = TttxIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxIcon, defineCustomElement };