@enki-tek/fms-web-components 0.0.2 → 0.0.3

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 (105) hide show
  1. package/app.scss +1 -1
  2. package/components/Accordion/Accordion.scss +30 -0
  3. package/components/Accordion/Accordion.stories.d.ts +20 -0
  4. package/components/Accordion/Accordion.stories.js +30 -0
  5. package/components/Accordion/Accordion.svelte +617 -0
  6. package/components/Accordion/Accordion.svelte.d.ts +17 -0
  7. package/components/Alert/Alert.scss +25 -0
  8. package/components/Alert/Alert.stories.d.ts +54 -0
  9. package/components/Alert/Alert.stories.js +46 -0
  10. package/components/Alert/Alert.svelte +29 -0
  11. package/components/Alert/Alert.svelte.d.ts +19 -0
  12. package/components/Badge/Badge.scss +8 -0
  13. package/components/Badge/Badge.stories.d.ts +75 -0
  14. package/components/Badge/Badge.stories.js +55 -0
  15. package/components/Badge/Badge.svelte +587 -0
  16. package/components/Badge/Badge.svelte.d.ts +17 -0
  17. package/components/Badge/BadgeConfig.d.ts +10 -0
  18. package/components/Badge/BadgeConfig.js +34 -0
  19. package/components/Breadcrumb/Breadcrumb.scss +26 -0
  20. package/components/Breadcrumb/Breadcrumb.stories.d.ts +23 -0
  21. package/components/Breadcrumb/Breadcrumb.stories.js +20 -0
  22. package/components/Breadcrumb/Breadcrumb.svelte +603 -0
  23. package/components/Breadcrumb/Breadcrumb.svelte.d.ts +16 -0
  24. package/components/Button/Button.scss +706 -0
  25. package/components/Button/Button.stories.d.ts +96 -27
  26. package/components/Button/Button.stories.js +99 -38
  27. package/components/Button/Button.svelte +1125 -10
  28. package/components/Button/Button.svelte.d.ts +43 -9
  29. package/components/Button/buttonConfig.d.ts +38 -0
  30. package/components/Button/buttonConfig.js +203 -0
  31. package/components/Card/Card.scss +39 -0
  32. package/components/Card/Card.stories.d.ts +59 -0
  33. package/components/Card/Card.stories.js +42 -0
  34. package/components/Card/Card.svelte +123 -0
  35. package/components/Card/Card.svelte.d.ts +51 -0
  36. package/components/CheckBox/Checkbox.scss +32 -0
  37. package/components/CheckBox/Checkbox.stories.d.ts +94 -0
  38. package/components/CheckBox/Checkbox.stories.js +51 -0
  39. package/components/CheckBox/Checkbox.svelte +614 -0
  40. package/components/CheckBox/Checkbox.svelte.d.ts +31 -0
  41. package/components/Dropdown/Dropdown.scss +72 -0
  42. package/components/Dropdown/Dropdown.stories.d.ts +29 -0
  43. package/components/Dropdown/Dropdown.stories.js +19 -0
  44. package/components/Dropdown/Dropdown.svelte +646 -0
  45. package/components/Dropdown/Dropdown.svelte.d.ts +17 -0
  46. package/components/Header/Header.scss +54 -0
  47. package/components/Header/Header.stories.d.ts +28 -0
  48. package/components/Header/Header.stories.js +28 -0
  49. package/components/Header/Header.svelte +667 -0
  50. package/components/Header/Header.svelte.d.ts +27 -0
  51. package/components/Icon/Icon.scss +0 -0
  52. package/components/Icon/Icon.stories.d.ts +21 -0
  53. package/components/Icon/Icon.stories.js +18 -0
  54. package/components/Icon/Icon.svelte +7 -0
  55. package/components/Icon/Icon.svelte.d.ts +23 -0
  56. package/components/ModalWindow/Modal.scss +28 -0
  57. package/components/ModalWindow/Modal.stories.d.ts +29 -0
  58. package/components/ModalWindow/Modal.stories.js +20 -0
  59. package/components/ModalWindow/Modal.svelte +641 -0
  60. package/components/ModalWindow/Modal.svelte.d.ts +23 -0
  61. package/components/Pagination/Pagination.scss +83 -0
  62. package/components/Pagination/Pagination.stories.d.ts +29 -0
  63. package/components/Pagination/Pagination.stories.js +18 -0
  64. package/components/Pagination/Pagination.svelte +702 -0
  65. package/components/Pagination/Pagination.svelte.d.ts +18 -0
  66. package/components/RadioButton/RadioButton.scss +28 -0
  67. package/components/RadioButton/RadioButton.stories.d.ts +35 -0
  68. package/components/RadioButton/RadioButton.stories.js +25 -0
  69. package/components/RadioButton/RadioButton.svelte +616 -0
  70. package/components/RadioButton/RadioButton.svelte.d.ts +41 -0
  71. package/components/Sidebar/Sidebar.scss +87 -0
  72. package/components/Sidebar/Sidebar.stories.d.ts +28 -0
  73. package/components/Sidebar/Sidebar.stories.js +27 -0
  74. package/components/Sidebar/Sidebar.svelte +144 -0
  75. package/components/Sidebar/Sidebar.svelte.d.ts +31 -0
  76. package/components/Switches/Switch.scss +12 -0
  77. package/components/Switches/Switch.stories.d.ts +87 -0
  78. package/components/Switches/Switch.stories.js +50 -0
  79. package/components/Switches/Switch.svelte +595 -0
  80. package/components/Switches/Switch.svelte.d.ts +29 -0
  81. package/components/Tab/Tab.scss +30 -0
  82. package/components/Tab/Tab.stories.d.ts +23 -0
  83. package/components/Tab/Tab.stories.js +19 -0
  84. package/components/Tab/Tab.svelte +615 -0
  85. package/components/Tab/Tab.svelte.d.ts +19 -0
  86. package/components/Table/Table.scss +38 -0
  87. package/components/Table/Table.stories.d.ts +28 -0
  88. package/components/Table/Table.stories.js +21 -0
  89. package/components/Table/Table.svelte +137 -0
  90. package/components/Table/Table.svelte.d.ts +35 -0
  91. package/components/Tooltip/Tooltip.scss +29 -0
  92. package/components/Tooltip/Tooltip.stories.d.ts +40 -0
  93. package/components/Tooltip/Tooltip.stories.js +24 -0
  94. package/components/Tooltip/Tooltip.svelte +622 -0
  95. package/components/Tooltip/Tooltip.svelte.d.ts +21 -0
  96. package/components/common.scss +789 -0
  97. package/components/textField/TextField.scss +34 -0
  98. package/components/textField/TextField.stories.d.ts +85 -0
  99. package/components/textField/TextField.stories.js +32 -0
  100. package/components/textField/TextField.svelte +607 -0
  101. package/components/textField/TextField.svelte.d.ts +33 -0
  102. package/components/variable.scss +134 -0
  103. package/index.d.ts +17 -1
  104. package/index.js +17 -1
  105. package/package.json +60 -1
@@ -0,0 +1,134 @@
1
+ @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
2
+
3
+
4
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
5
+ @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
6
+
7
+ // Variables
8
+
9
+ //Fontfamily
10
+
11
+ $bodyFonts: Roboto;
12
+ $headFonts: Merriweather;
13
+
14
+ //colors
15
+
16
+ $primary: #00AEE5;
17
+ $primary-dark: #007FD8;
18
+ $primary-light: #CEF3FF;
19
+
20
+ $secondary: #3AC82E;
21
+ $secondary-dark: #00A855;
22
+ $secondary-light: #CBFFC7;
23
+
24
+ $white: #ffffff;
25
+ $black :#000000;
26
+
27
+ $danger: #FE4747;
28
+ $danger-dark: #B02A37;
29
+ $danger-light: #FE4747;
30
+
31
+ $success: #00A96B;
32
+ $success-dark: #146C43;
33
+ $success-light: #D1E7DD;
34
+
35
+ $info: #0DCAF0;
36
+ $info-dark: #087990;
37
+ $info-light: #9EEAF9;
38
+
39
+ $warning: #FFBA3A;
40
+ $warning-dark: #997404;
41
+ $warning-light: #FFF3CD;
42
+
43
+ $gray-900: #212529;
44
+ $gray-800: #343A40;
45
+ $gray-700: #495057;
46
+ $gray-600: #6C757D;
47
+ $gray-500: #adb5bd;
48
+ $gray-400: #CED4DA;
49
+ $gray-300: #DEE2E6;
50
+ $gray-200: #E9ECEF;
51
+ $gray-100: #F8F9FA;
52
+
53
+ $green-900: #051B11;
54
+ $green-800: #0A3622;
55
+ $green-700: #0F5132;
56
+ $green-600: #146C43;
57
+ $green-500: #198754;
58
+ $green-400: #479F76;
59
+ $green-300: #75B798;
60
+ $green-200: #A3CFBB;
61
+ $green-100: #D1E7DD;
62
+
63
+
64
+ $red-900: #2C0B0E;
65
+ $red-800: #58151C;
66
+ $red-700: #842029;
67
+ $red-600: #B02A37;
68
+ $red-500: #DC3545;
69
+ $red-400: #E35D6A;
70
+ $red-300: #EA868F;
71
+ $red-200: #F1AEB5;
72
+ $red-100: #F8D7DA;
73
+
74
+ $yellow-900: #332701;
75
+ $yellow-800: #664D03;
76
+ $yellow-700: #997404;
77
+ $yellow-600: #CC9A06;
78
+ $yellow-500: #FFC107;
79
+ $yellow-400: #FFCD39;
80
+ $yellow-300: #FFDA6A;
81
+ $yellow-200: #FFE69C;
82
+ $yellow-100: #FFF3CD;
83
+
84
+ $cyan-900: #032830;
85
+ $cyan-800: #055160;
86
+ $cyan-700: #087990;
87
+ $cyan-600: #0AA2C0;
88
+ $cyan-500: #0DCAF0;
89
+ $cyan-400: #3DD5F3;
90
+ $cyan-300: #6EDFF6;
91
+ $cyan-200: #9EEAF9;
92
+ $cyan-100: #CFF4FC;
93
+
94
+ $blue-700: #084298;
95
+ $blue-500: rgba(13, 110, 253, 1);
96
+
97
+ $Title-Color: #152536;
98
+
99
+ $box-shadow-green: rgba(11, 235, 49, 0.25);
100
+ //Button sizes
101
+
102
+ $small-width: 100px;
103
+ $small-height: 32px;
104
+
105
+ $medium-width: 140px;
106
+ $medium-height: 42px;
107
+
108
+ $large-width: 160px;
109
+ $large-height: 52px;
110
+
111
+ //Fonts
112
+
113
+ //shadows
114
+
115
+ $nonShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
116
+ $lowShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
117
+ $mediumShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.10);
118
+ $highShadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.10);
119
+
120
+ // $shadow-key-umbra-opacity: 0.20 !default;
121
+ // $shadow-key-penumbra-opacity: 0.14 !default;
122
+ // $shadow-ambient-shadow-opacity: 0.12 !default;
123
+
124
+ //$lowShadow:0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
125
+ // 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
126
+ // 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
127
+
128
+ //$mediumShadow:0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
129
+ // 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
130
+ // 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
131
+
132
+ //$highShadow:0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
133
+ // 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
134
+ // 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
package/index.d.ts CHANGED
@@ -1,5 +1,21 @@
1
1
  import './app.scss';
2
2
  import Layout from './components/lay-out/LayOut.svelte';
3
3
  import Button from './components/Button/Button.svelte';
4
- export { Button };
4
+ import TextField from './components/textField/TextField.svelte';
5
+ import Card from './components/Card/Card.svelte';
6
+ import Tooltip from './components/Tooltip/Tooltip.svelte';
7
+ import Tab from './components/Tab/Tab.svelte';
8
+ import Icon from './components/Icon/Icon.svelte';
9
+ import Modal from './components/ModalWindow/Modal.svelte';
10
+ import Header from './components/Header/Header.svelte';
11
+ import Dropdown from './components/Dropdown/Dropdown.svelte';
12
+ import Badge from './components/Badge/Badge.svelte';
13
+ import Alert from './components/Alert/Alert.svelte';
14
+ import Pagination from './components/Pagination/Pagination.svelte';
15
+ import RadioButton from './components/RadioButton/RadioButton.svelte';
16
+ import Switch from './components/Switches/Switch.svelte';
17
+ import Checkbox from './components/CheckBox/Checkbox.svelte';
18
+ import Breadcrumb from './components/Breadcrumb/Breadcrumb.svelte';
19
+ import Accordion from './components/Accordion/Accordion.svelte';
20
+ export { Button, TextField, Card, Tooltip, Tab, Icon, Modal, Header, Dropdown, Badge, Alert, Pagination, RadioButton, Accordion, Switch, Checkbox, Breadcrumb };
5
21
  export default Layout;
package/index.js CHANGED
@@ -2,5 +2,21 @@
2
2
  import './app.scss';
3
3
  import Layout from './components/lay-out/LayOut.svelte';
4
4
  import Button from './components/Button/Button.svelte';
5
- export { Button };
5
+ import TextField from './components/textField/TextField.svelte';
6
+ import Card from './components/Card/Card.svelte';
7
+ import Tooltip from './components/Tooltip/Tooltip.svelte';
8
+ import Tab from './components/Tab/Tab.svelte';
9
+ import Icon from './components/Icon/Icon.svelte';
10
+ import Modal from './components/ModalWindow/Modal.svelte';
11
+ import Header from './components/Header/Header.svelte';
12
+ import Dropdown from './components/Dropdown/Dropdown.svelte';
13
+ import Badge from './components/Badge/Badge.svelte';
14
+ import Alert from './components/Alert/Alert.svelte';
15
+ import Pagination from './components/Pagination/Pagination.svelte';
16
+ import RadioButton from './components/RadioButton/RadioButton.svelte';
17
+ import Switch from './components/Switches/Switch.svelte';
18
+ import Checkbox from './components/CheckBox/Checkbox.svelte';
19
+ import Breadcrumb from './components/Breadcrumb/Breadcrumb.svelte';
20
+ import Accordion from './components/Accordion/Accordion.svelte';
21
+ export { Button, TextField, Card, Tooltip, Tab, Icon, Modal, Header, Dropdown, Badge, Alert, Pagination, RadioButton, Accordion, Switch, Checkbox, Breadcrumb };
6
22
  export default Layout;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enki-tek/fms-web-components",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "devDependencies": {
5
5
  "@storybook/addon-essentials": "^7.6.14",
6
6
  "@storybook/addon-interactions": "^7.6.14",
@@ -43,12 +43,71 @@
43
43
  "exports": {
44
44
  "./package.json": "./package.json",
45
45
  "./app.scss": "./app.scss",
46
+ "./components/Accordion/Accordion.scss": "./components/Accordion/Accordion.scss",
47
+ "./components/Accordion/Accordion.stories": "./components/Accordion/Accordion.stories.js",
48
+ "./components/Accordion/Accordion.svelte": "./components/Accordion/Accordion.svelte",
49
+ "./components/Alert/Alert.scss": "./components/Alert/Alert.scss",
50
+ "./components/Alert/Alert.stories": "./components/Alert/Alert.stories.js",
51
+ "./components/Alert/Alert.svelte": "./components/Alert/Alert.svelte",
52
+ "./components/Badge/Badge.scss": "./components/Badge/Badge.scss",
53
+ "./components/Badge/Badge.stories": "./components/Badge/Badge.stories.js",
54
+ "./components/Badge/Badge.svelte": "./components/Badge/Badge.svelte",
55
+ "./components/Badge/BadgeConfig": "./components/Badge/BadgeConfig.js",
56
+ "./components/Breadcrumb/Breadcrumb.scss": "./components/Breadcrumb/Breadcrumb.scss",
57
+ "./components/Breadcrumb/Breadcrumb.stories": "./components/Breadcrumb/Breadcrumb.stories.js",
58
+ "./components/Breadcrumb/Breadcrumb.svelte": "./components/Breadcrumb/Breadcrumb.svelte",
59
+ "./components/Button/Button.scss": "./components/Button/Button.scss",
46
60
  "./components/Button/Button.stories": "./components/Button/Button.stories.js",
47
61
  "./components/Button/Button.svelte": "./components/Button/Button.svelte",
62
+ "./components/Button/buttonConfig": "./components/Button/buttonConfig.js",
63
+ "./components/Card/Card.scss": "./components/Card/Card.scss",
64
+ "./components/Card/Card.stories": "./components/Card/Card.stories.js",
65
+ "./components/Card/Card.svelte": "./components/Card/Card.svelte",
66
+ "./components/CheckBox/Checkbox.scss": "./components/CheckBox/Checkbox.scss",
67
+ "./components/CheckBox/Checkbox.stories": "./components/CheckBox/Checkbox.stories.js",
68
+ "./components/CheckBox/Checkbox.svelte": "./components/CheckBox/Checkbox.svelte",
69
+ "./components/Dropdown/Dropdown.scss": "./components/Dropdown/Dropdown.scss",
70
+ "./components/Dropdown/Dropdown.stories": "./components/Dropdown/Dropdown.stories.js",
71
+ "./components/Dropdown/Dropdown.svelte": "./components/Dropdown/Dropdown.svelte",
72
+ "./components/Header/Header.scss": "./components/Header/Header.scss",
73
+ "./components/Header/Header.stories": "./components/Header/Header.stories.js",
74
+ "./components/Header/Header.svelte": "./components/Header/Header.svelte",
75
+ "./components/Icon/Icon.scss": "./components/Icon/Icon.scss",
76
+ "./components/Icon/Icon.stories": "./components/Icon/Icon.stories.js",
77
+ "./components/Icon/Icon.svelte": "./components/Icon/Icon.svelte",
78
+ "./components/ModalWindow/Modal.scss": "./components/ModalWindow/Modal.scss",
79
+ "./components/ModalWindow/Modal.stories": "./components/ModalWindow/Modal.stories.js",
80
+ "./components/ModalWindow/Modal.svelte": "./components/ModalWindow/Modal.svelte",
81
+ "./components/Pagination/Pagination.scss": "./components/Pagination/Pagination.scss",
82
+ "./components/Pagination/Pagination.stories": "./components/Pagination/Pagination.stories.js",
83
+ "./components/Pagination/Pagination.svelte": "./components/Pagination/Pagination.svelte",
84
+ "./components/RadioButton/RadioButton.scss": "./components/RadioButton/RadioButton.scss",
85
+ "./components/RadioButton/RadioButton.stories": "./components/RadioButton/RadioButton.stories.js",
86
+ "./components/RadioButton/RadioButton.svelte": "./components/RadioButton/RadioButton.svelte",
87
+ "./components/Sidebar/Sidebar.scss": "./components/Sidebar/Sidebar.scss",
88
+ "./components/Sidebar/Sidebar.stories": "./components/Sidebar/Sidebar.stories.js",
89
+ "./components/Sidebar/Sidebar.svelte": "./components/Sidebar/Sidebar.svelte",
90
+ "./components/Switches/Switch.scss": "./components/Switches/Switch.scss",
91
+ "./components/Switches/Switch.stories": "./components/Switches/Switch.stories.js",
92
+ "./components/Switches/Switch.svelte": "./components/Switches/Switch.svelte",
93
+ "./components/Tab/Tab.scss": "./components/Tab/Tab.scss",
94
+ "./components/Tab/Tab.stories": "./components/Tab/Tab.stories.js",
95
+ "./components/Tab/Tab.svelte": "./components/Tab/Tab.svelte",
96
+ "./components/Table/Table.scss": "./components/Table/Table.scss",
97
+ "./components/Table/Table.stories": "./components/Table/Table.stories.js",
98
+ "./components/Table/Table.svelte": "./components/Table/Table.svelte",
99
+ "./components/Tooltip/Tooltip.scss": "./components/Tooltip/Tooltip.scss",
100
+ "./components/Tooltip/Tooltip.stories": "./components/Tooltip/Tooltip.stories.js",
101
+ "./components/Tooltip/Tooltip.svelte": "./components/Tooltip/Tooltip.svelte",
102
+ "./components/common.scss": "./components/common.scss",
48
103
  "./components/lay-out/Footer.svelte": "./components/lay-out/Footer.svelte",
49
104
  "./components/lay-out/LayOut.spec": "./components/lay-out/LayOut.spec.js",
50
105
  "./components/lay-out/LayOut.stories": "./components/lay-out/LayOut.stories.js",
51
106
  "./components/lay-out/LayOut.svelte": "./components/lay-out/LayOut.svelte",
107
+ "./components/textField/TextField.scss": "./components/textField/TextField.scss",
108
+ "./components/textField/TextField.stories": "./components/textField/TextField.stories.js",
109
+ "./components/textField/TextField.svelte": "./components/textField/TextField.svelte",
110
+ "./components/variable.scss": "./components/variable.scss",
52
111
  ".": "./index.js"
53
112
  },
54
113
  "svelte": "./index.js"