@3t-transform/threeteeui 0.1.21 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/dist/cjs/{index-b8a62ede.js → index-dc6cc829.js} +2 -88
  2. package/dist/cjs/loader.cjs.js +3 -4
  3. package/dist/cjs/tttx-button.cjs.entry.js +24 -24
  4. package/dist/cjs/tttx-filter.cjs.entry.js +152 -152
  5. package/dist/cjs/tttx-form.cjs.entry.js +363 -363
  6. package/dist/cjs/tttx-icon.cjs.entry.js +11 -11
  7. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +59 -59
  8. package/dist/cjs/tttx-list.cjs.entry.js +43 -43
  9. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +16 -16
  10. package/dist/cjs/tttx-sorter.cjs.entry.js +112 -0
  11. package/dist/cjs/tttx-standalone-input.cjs.entry.js +60 -60
  12. package/dist/cjs/tttx-toolbar.cjs.entry.js +10 -10
  13. package/dist/cjs/tttx.cjs.js +3 -7
  14. package/dist/collection/collection-manifest.json +3 -2
  15. package/dist/collection/components/atoms/tttx-button/tttx-button.js +110 -110
  16. package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +14 -14
  17. package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +62 -62
  18. package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +22 -22
  19. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js +109 -109
  20. package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js +38 -38
  21. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +67 -67
  22. package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +17 -17
  23. package/dist/collection/components/molecules/tttx-filter/tttx-filter.js +325 -325
  24. package/dist/collection/components/molecules/tttx-filter/tttx-filter.stories.js +89 -89
  25. package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js +35 -35
  26. package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js +58 -58
  27. package/dist/collection/components/molecules/tttx-form/tttx-form.js +364 -364
  28. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +127 -127
  29. package/dist/collection/components/molecules/tttx-list/tttx-list.js +105 -105
  30. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +43 -43
  31. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.css +108 -0
  32. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.js +224 -0
  33. package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.stories.js +49 -0
  34. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.js +627 -627
  35. package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.js +157 -157
  36. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js +44 -44
  37. package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js +14 -14
  38. package/dist/collection/components/palette.stories.js +7 -7
  39. package/dist/collection/docs/gettingstarted-developer.stories.js +5 -5
  40. package/dist/collection/icons.js +2838 -2838
  41. package/dist/collection/index.js +1 -1
  42. package/dist/collection/shared/domsanitiser.options.js +14 -14
  43. package/dist/components/index.d.ts +1 -9
  44. package/dist/components/index.js +2 -1
  45. package/dist/components/tttx-button.js +48 -48
  46. package/dist/components/tttx-filter.js +184 -184
  47. package/dist/components/tttx-form.js +380 -380
  48. package/dist/components/tttx-icon2.js +28 -28
  49. package/dist/components/tttx-keyvalue-block.js +76 -76
  50. package/dist/components/tttx-list.js +65 -65
  51. package/dist/components/tttx-loading-spinner.js +33 -33
  52. package/dist/components/tttx-sorter.d.ts +11 -0
  53. package/dist/components/tttx-sorter.js +141 -0
  54. package/dist/components/tttx-standalone-input.js +107 -107
  55. package/dist/components/tttx-toolbar.js +26 -26
  56. package/dist/esm/{index-e888a5f4.js → index-86faeaab.js} +3 -88
  57. package/dist/esm/loader.js +3 -4
  58. package/dist/esm/polyfills/core-js.js +0 -0
  59. package/dist/esm/polyfills/css-shim.js +1 -1
  60. package/dist/esm/polyfills/dom.js +0 -0
  61. package/dist/esm/polyfills/es5-html-element.js +0 -0
  62. package/dist/esm/polyfills/index.js +0 -0
  63. package/dist/esm/polyfills/system.js +0 -0
  64. package/dist/esm/tttx-button.entry.js +24 -24
  65. package/dist/esm/tttx-filter.entry.js +152 -152
  66. package/dist/esm/tttx-form.entry.js +363 -363
  67. package/dist/esm/tttx-icon.entry.js +11 -11
  68. package/dist/esm/tttx-keyvalue-block.entry.js +59 -59
  69. package/dist/esm/tttx-list.entry.js +43 -43
  70. package/dist/esm/tttx-loading-spinner.entry.js +16 -16
  71. package/dist/esm/tttx-sorter.entry.js +108 -0
  72. package/dist/esm/tttx-standalone-input.entry.js +60 -60
  73. package/dist/esm/tttx-toolbar.entry.js +10 -10
  74. package/dist/esm/tttx.js +3 -4
  75. package/dist/tttx/p-12fc0b16.entry.js +3 -0
  76. package/dist/tttx/p-52a47b7c.js +2 -0
  77. package/dist/tttx/{p-41f5b296.entry.js → p-603f6ebe.entry.js} +1 -1
  78. package/dist/tttx/{p-e145951b.entry.js → p-72b4c98a.entry.js} +1 -1
  79. package/dist/tttx/{p-043f9b8a.entry.js → p-8f3badad.entry.js} +1 -1
  80. package/dist/tttx/{p-4cf3e1e0.entry.js → p-ae48fe5a.entry.js} +1 -1
  81. package/dist/tttx/{p-01f4628e.entry.js → p-bdb054b2.entry.js} +1 -1
  82. package/dist/tttx/{p-dc5c356b.entry.js → p-c72d1a03.entry.js} +1 -1
  83. package/dist/tttx/{p-96bbf1ed.entry.js → p-e25d5fe2.entry.js} +1 -1
  84. package/dist/tttx/p-f19194f8.entry.js +1 -0
  85. package/dist/tttx/{p-b3a03986.entry.js → p-f1d7eb35.entry.js} +1 -1
  86. package/dist/tttx/tttx.esm.js +1 -1
  87. package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +10 -10
  88. package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +10 -10
  89. package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +5 -5
  90. package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +20 -20
  91. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.d.ts +7 -7
  92. package/dist/types/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.d.ts +9 -9
  93. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -6
  94. package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +17 -17
  95. package/dist/types/components/molecules/tttx-filter/tttx-filter.d.ts +37 -37
  96. package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts +43 -43
  97. package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts +13 -13
  98. package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts +17 -17
  99. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +114 -114
  100. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +13 -13
  101. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +11 -11
  102. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +14 -14
  103. package/dist/types/components/molecules/tttx-sorter/interfaces.d.ts +9 -0
  104. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts +19 -0
  105. package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts +30 -0
  106. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +56 -56
  107. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts +123 -123
  108. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts +4 -4
  109. package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts +13 -13
  110. package/dist/types/components/palette.stories.d.ts +6 -6
  111. package/dist/types/components.d.ts +27 -0
  112. package/dist/types/docs/gettingstarted-developer.stories.d.ts +5 -5
  113. package/dist/types/icons.d.ts +2 -2
  114. package/dist/types/index.d.ts +1 -1
  115. package/dist/types/shared/domsanitiser.options.d.ts +10 -10
  116. package/dist/types/stencil-public-runtime.d.ts +3 -59
  117. package/loader/index.d.ts +0 -9
  118. package/package.json +1 -1
  119. package/dist/tttx/p-6dff6b5a.entry.js +0 -3
  120. package/dist/tttx/p-f764ffc4.js +0 -2
@@ -8,12 +8,13 @@
8
8
  "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
9
9
  "./components/molecules/tttx-form/tttx-form.js",
10
10
  "./components/molecules/tttx-list/tttx-list.js",
11
+ "./components/molecules/tttx-sorter/tttx-sorter.js",
11
12
  "./components/molecules/tttx-toolbar/tttx-toolbar.js"
12
13
  ],
13
14
  "compiler": {
14
15
  "name": "@stencil/core",
15
- "version": "2.22.3",
16
- "typescriptVersion": "4.9.4"
16
+ "version": "2.20.0",
17
+ "typescriptVersion": "4.8.4"
17
18
  },
18
19
  "collections": [],
19
20
  "bundles": []
@@ -1,110 +1,110 @@
1
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
- import { Host, h } from '@stencil/core';
3
- export class TttxButton {
4
- constructor() {
5
- this._iconcolor = 'black';
6
- this.notext = undefined;
7
- this.icon = undefined;
8
- this.iconposition = 'left';
9
- this.design = 'default';
10
- }
11
- componentWillLoad() {
12
- this._design = this.design;
13
- const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
14
- if (!designs.includes(this.design)) {
15
- this._design = 'default';
16
- }
17
- if (this._design === 'primary' || this._design === 'danger') {
18
- this._iconcolor = 'white';
19
- }
20
- }
21
- render() {
22
- return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
23
- }
24
- static get is() { return "tttx-button"; }
25
- static get encapsulation() { return "shadow"; }
26
- static get originalStyleUrls() {
27
- return {
28
- "$": ["tttx-button.scss"]
29
- };
30
- }
31
- static get styleUrls() {
32
- return {
33
- "$": ["tttx-button.css"]
34
- };
35
- }
36
- static get properties() {
37
- return {
38
- "notext": {
39
- "type": "boolean",
40
- "mutable": false,
41
- "complexType": {
42
- "original": "boolean",
43
- "resolved": "boolean",
44
- "references": {}
45
- },
46
- "required": false,
47
- "optional": false,
48
- "docs": {
49
- "tags": [],
50
- "text": ""
51
- },
52
- "attribute": "notext",
53
- "reflect": false
54
- },
55
- "icon": {
56
- "type": "string",
57
- "mutable": false,
58
- "complexType": {
59
- "original": "string",
60
- "resolved": "string",
61
- "references": {}
62
- },
63
- "required": false,
64
- "optional": false,
65
- "docs": {
66
- "tags": [],
67
- "text": ""
68
- },
69
- "attribute": "icon",
70
- "reflect": false
71
- },
72
- "iconposition": {
73
- "type": "string",
74
- "mutable": false,
75
- "complexType": {
76
- "original": "'left' | 'right'",
77
- "resolved": "\"left\" | \"right\"",
78
- "references": {}
79
- },
80
- "required": false,
81
- "optional": false,
82
- "docs": {
83
- "tags": [],
84
- "text": ""
85
- },
86
- "attribute": "iconposition",
87
- "reflect": false,
88
- "defaultValue": "'left'"
89
- },
90
- "design": {
91
- "type": "string",
92
- "mutable": false,
93
- "complexType": {
94
- "original": "string",
95
- "resolved": "string",
96
- "references": {}
97
- },
98
- "required": false,
99
- "optional": false,
100
- "docs": {
101
- "tags": [],
102
- "text": ""
103
- },
104
- "attribute": "design",
105
- "reflect": false,
106
- "defaultValue": "'default'"
107
- }
108
- };
109
- }
110
- }
1
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
+ import { Host, h } from '@stencil/core';
3
+ export class TttxButton {
4
+ constructor() {
5
+ this._iconcolor = 'black';
6
+ this.notext = undefined;
7
+ this.icon = undefined;
8
+ this.iconposition = 'left';
9
+ this.design = 'default';
10
+ }
11
+ componentWillLoad() {
12
+ this._design = this.design;
13
+ const designs = ['primary', 'default', 'disabled', 'danger', 'borderless'];
14
+ if (!designs.includes(this.design)) {
15
+ this._design = 'default';
16
+ }
17
+ if (this._design === 'primary' || this._design === 'danger') {
18
+ this._iconcolor = 'white';
19
+ }
20
+ }
21
+ render() {
22
+ return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''} ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
23
+ }
24
+ static get is() { return "tttx-button"; }
25
+ static get encapsulation() { return "shadow"; }
26
+ static get originalStyleUrls() {
27
+ return {
28
+ "$": ["tttx-button.scss"]
29
+ };
30
+ }
31
+ static get styleUrls() {
32
+ return {
33
+ "$": ["tttx-button.css"]
34
+ };
35
+ }
36
+ static get properties() {
37
+ return {
38
+ "notext": {
39
+ "type": "boolean",
40
+ "mutable": false,
41
+ "complexType": {
42
+ "original": "boolean",
43
+ "resolved": "boolean",
44
+ "references": {}
45
+ },
46
+ "required": false,
47
+ "optional": false,
48
+ "docs": {
49
+ "tags": [],
50
+ "text": ""
51
+ },
52
+ "attribute": "notext",
53
+ "reflect": false
54
+ },
55
+ "icon": {
56
+ "type": "string",
57
+ "mutable": false,
58
+ "complexType": {
59
+ "original": "string",
60
+ "resolved": "string",
61
+ "references": {}
62
+ },
63
+ "required": false,
64
+ "optional": false,
65
+ "docs": {
66
+ "tags": [],
67
+ "text": ""
68
+ },
69
+ "attribute": "icon",
70
+ "reflect": false
71
+ },
72
+ "iconposition": {
73
+ "type": "string",
74
+ "mutable": false,
75
+ "complexType": {
76
+ "original": "'left' | 'right'",
77
+ "resolved": "\"left\" | \"right\"",
78
+ "references": {}
79
+ },
80
+ "required": false,
81
+ "optional": false,
82
+ "docs": {
83
+ "tags": [],
84
+ "text": ""
85
+ },
86
+ "attribute": "iconposition",
87
+ "reflect": false,
88
+ "defaultValue": "'left'"
89
+ },
90
+ "design": {
91
+ "type": "string",
92
+ "mutable": false,
93
+ "complexType": {
94
+ "original": "string",
95
+ "resolved": "string",
96
+ "references": {}
97
+ },
98
+ "required": false,
99
+ "optional": false,
100
+ "docs": {
101
+ "tags": [],
102
+ "text": ""
103
+ },
104
+ "attribute": "design",
105
+ "reflect": false,
106
+ "defaultValue": "'default'"
107
+ }
108
+ };
109
+ }
110
+ }
@@ -1,7 +1,7 @@
1
- export default {
2
- title: 'Atoms/Button',
3
- component: 'tttx-button'
4
- };
1
+ export default {
2
+ title: 'Atoms/Button',
3
+ component: 'tttx-button'
4
+ };
5
5
  const PrimaryButtons = () => `
6
6
  <h2>Standard</h2>
7
7
  <tttx-button design="primary">Primary</tttx-button>
@@ -14,8 +14,8 @@ const PrimaryButtons = () => `
14
14
  <hr />
15
15
  <h2>Icon Only</h2>
16
16
  <tttx-button design="primary" icon="more_vert" notext></tttx-button>
17
- `;
18
- export const Primary = PrimaryButtons.bind({});
17
+ `;
18
+ export const Primary = PrimaryButtons.bind({});
19
19
  const DefaultButtons = () => `
20
20
  <h2>Standard</h2>
21
21
  <tttx-button>Default</tttx-button>
@@ -28,8 +28,8 @@ const DefaultButtons = () => `
28
28
  <hr />
29
29
  <h2>Icon Only</h2>
30
30
  <tttx-button icon="more_vert" notext></tttx-button>
31
- `;
32
- export const Default = DefaultButtons.bind({});
31
+ `;
32
+ export const Default = DefaultButtons.bind({});
33
33
  const BorderlessButtons = () => `
34
34
  <h2>Standard</h2>
35
35
  <tttx-button design="borderless">Borderless</tttx-button>
@@ -42,8 +42,8 @@ const BorderlessButtons = () => `
42
42
  <hr />
43
43
  <h2>Icon Only</h2>
44
44
  <tttx-button design="borderless" icon="more_vert" notext></tttx-button>
45
- `;
46
- export const Borderless = BorderlessButtons.bind({});
45
+ `;
46
+ export const Borderless = BorderlessButtons.bind({});
47
47
  const DangerButtons = () => `
48
48
  <h2>Standard</h2>
49
49
  <tttx-button design="danger">Danger</tttx-button>
@@ -56,8 +56,8 @@ const DangerButtons = () => `
56
56
  <hr />
57
57
  <h2>Icon Only</h2>
58
58
  <tttx-button design="danger" icon="more_vert" notext></tttx-button>
59
- `;
60
- export const Danger = DangerButtons.bind({});
59
+ `;
60
+ export const Danger = DangerButtons.bind({});
61
61
  const DisabledButtons = () => `
62
62
  <h2>Standard</h2>
63
63
  <tttx-button design="disabled">Disabled</tttx-button>
@@ -70,5 +70,5 @@ const DisabledButtons = () => `
70
70
  <hr />
71
71
  <h2>Icon Only</h2>
72
72
  <tttx-button design="disabled" icon="more_vert" notext></tttx-button>
73
- `;
74
- export const Disabled = DisabledButtons.bind({});
73
+ `;
74
+ export const Disabled = DisabledButtons.bind({});
@@ -1,62 +1,62 @@
1
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
- import { Host, h } from '@stencil/core';
3
- export class TttxIcon {
4
- constructor() {
5
- this.icon = undefined;
6
- this.color = 'grey';
7
- }
8
- render() {
9
- return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
10
- }
11
- static get is() { return "tttx-icon"; }
12
- static get encapsulation() { return "shadow"; }
13
- static get originalStyleUrls() {
14
- return {
15
- "$": ["tttx-icon.scss"]
16
- };
17
- }
18
- static get styleUrls() {
19
- return {
20
- "$": ["tttx-icon.css"]
21
- };
22
- }
23
- static get properties() {
24
- return {
25
- "icon": {
26
- "type": "string",
27
- "mutable": false,
28
- "complexType": {
29
- "original": "string",
30
- "resolved": "string",
31
- "references": {}
32
- },
33
- "required": false,
34
- "optional": false,
35
- "docs": {
36
- "tags": [],
37
- "text": ""
38
- },
39
- "attribute": "icon",
40
- "reflect": false
41
- },
42
- "color": {
43
- "type": "string",
44
- "mutable": false,
45
- "complexType": {
46
- "original": "string",
47
- "resolved": "string",
48
- "references": {}
49
- },
50
- "required": false,
51
- "optional": false,
52
- "docs": {
53
- "tags": [],
54
- "text": ""
55
- },
56
- "attribute": "color",
57
- "reflect": false,
58
- "defaultValue": "'grey'"
59
- }
60
- };
61
- }
62
- }
1
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
+ import { Host, h } from '@stencil/core';
3
+ export class TttxIcon {
4
+ constructor() {
5
+ this.icon = undefined;
6
+ this.color = 'grey';
7
+ }
8
+ render() {
9
+ return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
10
+ }
11
+ static get is() { return "tttx-icon"; }
12
+ static get encapsulation() { return "shadow"; }
13
+ static get originalStyleUrls() {
14
+ return {
15
+ "$": ["tttx-icon.scss"]
16
+ };
17
+ }
18
+ static get styleUrls() {
19
+ return {
20
+ "$": ["tttx-icon.css"]
21
+ };
22
+ }
23
+ static get properties() {
24
+ return {
25
+ "icon": {
26
+ "type": "string",
27
+ "mutable": false,
28
+ "complexType": {
29
+ "original": "string",
30
+ "resolved": "string",
31
+ "references": {}
32
+ },
33
+ "required": false,
34
+ "optional": false,
35
+ "docs": {
36
+ "tags": [],
37
+ "text": ""
38
+ },
39
+ "attribute": "icon",
40
+ "reflect": false
41
+ },
42
+ "color": {
43
+ "type": "string",
44
+ "mutable": false,
45
+ "complexType": {
46
+ "original": "string",
47
+ "resolved": "string",
48
+ "references": {}
49
+ },
50
+ "required": false,
51
+ "optional": false,
52
+ "docs": {
53
+ "tags": [],
54
+ "text": ""
55
+ },
56
+ "attribute": "color",
57
+ "reflect": false,
58
+ "defaultValue": "'grey'"
59
+ }
60
+ };
61
+ }
62
+ }
@@ -1,22 +1,22 @@
1
- import icons from './../../../icons';
2
- const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred'];
3
- export default {
4
- title: 'Atoms/Icons',
5
- component: 'tttx-icon',
6
- argTypes: {
7
- icon: {
8
- control: { type: 'select' },
9
- options: icons,
10
- },
11
- color: {
12
- control: { type: 'select' },
13
- options: colors,
14
- },
15
- },
16
- };
17
- const Template = ({ icon, color }) => `<tttx-icon icon="${icon}" color="${color}" />`;
18
- export const Icon = Template.bind({});
19
- Icon.args = {
20
- icon: 'warning',
21
- color: 'red',
22
- };
1
+ import icons from './../../../icons';
2
+ const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred'];
3
+ export default {
4
+ title: 'Atoms/Icons',
5
+ component: 'tttx-icon',
6
+ argTypes: {
7
+ icon: {
8
+ control: { type: 'select' },
9
+ options: icons,
10
+ },
11
+ color: {
12
+ control: { type: 'select' },
13
+ options: colors,
14
+ },
15
+ },
16
+ };
17
+ const Template = ({ icon, color }) => `<tttx-icon icon="${icon}" color="${color}" />`;
18
+ export const Icon = Template.bind({});
19
+ Icon.args = {
20
+ icon: 'warning',
21
+ color: 'red',
22
+ };