@3t-transform/threeteeui 0.0.3 → 0.0.5

package/dist/collection/collection-manifest.json

@@ -1,5 +1,7 @@
 {
   "entries": [
+    "./components/components/tttx-icon/tttx-icon.js",
+    "./components/patterns/qualifications-list/qualifications-list.js",
     "./components/patterns/tttx-page/tttx-page.js",
     "./components/patterns/tttx-worksheet/tttx-worksheet.js"
   ],

package/dist/collection/components/components/tttx-icon/tttx-icon.css

@@ -0,0 +1,89 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Icons+Round");
+* {
+  box-sizing: border-box;
+}
+
+.flex-start {
+  justify-content: start;
+}
+
+.flex-end {
+  justify-content: end;
+}
+
+.flex-centre {
+  justify-content: center;
+}
+
+[class^=col-] {
+  display: flex;
+  /* we need to overright bootstrap to get the buttering we want */
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+}
+
+h1, h2, h3, h4, h5, h6, p, label, small {
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p, label {
+  display: block;
+}
+
+* {
+  font-family: "Roboto", sans-serif;
+}
+
+html,
+body {
+  font-weight: normal;
+  font-size: 16px;
+}
+
+h1 {
+  font-weight: 700;
+  font-size: 24px;
+}
+
+h2 {
+  font-weight: 700;
+  font-size: 20px;
+}
+
+h3 {
+  font-weight: 700;
+  font-size: 18px;
+}
+
+h4 {
+  font-weight: normal;
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+button {
+  font-weight: 500;
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+small {
+  font-weight: normal;
+  font-size: 14px;
+}
+
+label {
+  font-weight: 700;
+  font-size: 16px;
+}
+
+:host {
+  display: block;
+}
+
+.material-icons-round {
+  vertical-align: -6px;
+  color: var(--ui-color-lt);
+}

package/dist/collection/components/components/tttx-icon/tttx-icon.js

@@ -0,0 +1,59 @@
+import { h } from '@stencil/core';
+export class TttxIcon {
+  constructor() {
+    this.name = undefined;
+    this.color = undefined;
+  }
+  render() {
+    return (h("span", { class: "material-icons-round", style: { color: this.color } }, this.name));
+  }
+  static get is() { return "tttx-icon"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/components/tttx-icon/tttx-icon.stories.js

@@ -0,0 +1,40 @@
+import './icon-button.css';
+export default {
+  title: 'Components/Icon',
+  argTypes: {
+    name: {
+      options: [
+        'check_circle',
+        'report_problem',
+        'report',
+        'menu',
+        'thumb_up'
+      ],
+      control: {
+        type: 'select'
+      },
+      defaultValue: 'check_circle',
+      description: 'The name of the icon. Exhaustive list can be found in the [Google Material Icons guide](https://fonts.google.com/icons?icon.style=Rounded&icon.set=Material+Icons)'
+    },
+    color: {
+      control: {
+        type: 'color'
+      },
+      description: 'The colour to apply to the icon. Accepts any CSS color attribute.'
+    }
+  }
+};
+const Template = (args) => `
+  <tttx-icon name='${args.name}' ${args.color ? `color='${args.color}' ` : ''}/>
+`;
+export const Default = Template.bind({});
+export const WithElements = (args) => `
+  <tttx-icon name='${args.name}'${args.color ? ` color='${args.color}'` : ''}></tttx-icon>
+  <div style='display: inline'>Inline element beside icon</div>
+  <div>Block element below Icon</div>
+`;
+export const Button = (args) => `
+  <button class='icon-example__button'>
+    <tttx-icon name='${args.name}' ${args.color ? `color='${args.color}' ` : ''}/>
+  </button>
+`;

package/dist/collection/components/patterns/qualifications-list/qualifications-list.js

@@ -0,0 +1,32 @@
+import { h, Host } from '@stencil/core';
+import List from 'devextreme/esm/ui/list';
+import CustomStore from 'devextreme/esm/data/custom_store';
+import DataSource from 'devextreme/esm/data/data_source';
+export class QualificationsList {
+  componentDidLoad() {
+    const store = new CustomStore({
+      key: 'id',
+      load: async () => {
+        const userId = '83526262-996f-48bc-9927-60233074d144';
+        const continuationToken = this.continuationToken ? `&${this.continuationToken}` : '';
+        return fetch(`https://pr-626.dev.3tplatform.com/v2/attestations?UserId=${userId}&Limit=1${continuationToken}`).then(response => {
+          console.log(response.body);
+          //this.continuationToken = response.body.continuationToken;
+          return response.body;
+        });
+      },
+    });
+    const dataSource = new DataSource({ store });
+    new List(this.listWrapper, {
+      dataSource: dataSource,
+      itemTemplate: (data) => {
+        console.log(data);
+        return h("p", null, data.name);
+      },
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { ref: el => (this.listWrapper = el) })));
+  }
+  static get is() { return "qualifications-list"; }
+}

package/dist/collection/components/patterns/qualifications-list/qualifications-list.stories.js

@@ -0,0 +1,7 @@
+export default {
+  title: 'Patterns/QualificationsList',
+};
+const Template = () => `
+  <qualifications-list />
+`;
+export const Default = Template.bind({});

package/dist/components/index.d.ts

@@ -1,4 +1,6 @@
 /* tttx custom elements */
+export { QualificationsList as QualificationsList } from '../types/components/patterns/qualifications-list/qualifications-list';
+export { TttxIcon as TttxIcon } from '../types/components/components/tttx-icon/tttx-icon';
 export { TttxPage as TttxPage } from '../types/components/patterns/tttx-page/tttx-page';
 export { TttxWorksheet as TttxWorksheet } from '../types/components/patterns/tttx-worksheet/tttx-worksheet';
 

package/dist/components/index.js

@@ -1,3 +1,5 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { QualificationsList, defineCustomElement as defineCustomElementQualificationsList } from './qualifications-list.js';
+export { TttxIcon, defineCustomElement as defineCustomElementTttxIcon } from './tttx-icon.js';
 export { TttxPage, defineCustomElement as defineCustomElementTttxPage } from './tttx-page.js';
 export { TttxWorksheet, defineCustomElement as defineCustomElementTttxWorksheet } from './tttx-worksheet.js';

package/dist/components/qualifications-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface QualificationsList extends Components.QualificationsList, HTMLElement {}
+export const QualificationsList: {
+  prototype: QualificationsList;
+  new (): QualificationsList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;