@mailstep/design-system 0.6.71-beta.0 → 0.6.71

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 (29) hide show
  1. package/README.md +78 -78
  2. package/package.json +150 -150
  3. package/ui/Blocks/LoginPage/LoginPage.js +1 -1
  4. package/ui/Blocks/LoginPage/styles.d.ts +1 -1
  5. package/ui/Blocks/LoginPage/styles.js +2 -1
  6. package/ui/Elements/Card/Card.d.ts +6 -4
  7. package/ui/Elements/Card/Card.js +44 -6
  8. package/ui/Elements/Card/index.d.ts +3 -2
  9. package/ui/Elements/Card/index.js +3 -2
  10. package/ui/Elements/Card/stories/Card.stories.d.ts +5 -3
  11. package/ui/Elements/Card/stories/Card.stories.js +27 -12
  12. package/ui/Elements/Card/stories/CardComponent.stories.d.ts +12 -0
  13. package/ui/Elements/Card/stories/CardComponent.stories.js +27 -0
  14. package/ui/Elements/Card/styles.d.ts +12 -4
  15. package/ui/Elements/Card/styles.js +27 -10
  16. package/ui/Elements/Card/types.d.ts +17 -4
  17. package/ui/Elements/Logo/assets/mailship/mailship-logo.svg +12 -12
  18. package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg +17 -17
  19. package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg +17 -17
  20. package/ui/Elements/Logo/assets/mailstock/mailstock.svg +12 -12
  21. package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg +46 -46
  22. package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg +19 -19
  23. package/ui/Elements/Logo/assets/warehouse/manager.svg +5 -5
  24. package/ui/Elements/Logo/assets/warehouse/manager2.svg +5 -5
  25. package/ui/Elements/Logo/assets/warehouse/manager3.svg +4 -4
  26. package/ui/index.d.ts +1 -0
  27. package/ui/index.es.js +6325 -6270
  28. package/ui/index.js +1 -0
  29. package/ui/index.umd.js +448 -424
package/README.md CHANGED
@@ -1,78 +1,78 @@
1
- # Mailstep Design-system
2
-
3
- Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook
4
-
5
- Powered by chromatic: https://www.chromatic.com/library?appId=664c5032c1e55e80a74fcfd2&branch=master
6
-
7
- ## Peer dependencies
8
- - @xstyled/styled-components
9
- - styled-component
10
- - react-router
11
- - react-router-dom
12
-
13
- ### How to develoop
14
- ```
15
- yarn install
16
- yarn dev
17
- ```
18
-
19
- ### How to use
20
- ```
21
- yarn add @mailstep/design-system
22
- ```
23
- and add `import 'swiper/css'` somewhere to the root app.
24
-
25
-
26
- #### How to publish
27
- In root folder run
28
-
29
- ```
30
- npm run build
31
- npm run deploy
32
- ```
33
-
34
- ## Components
35
- There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
36
-
37
- ### Elements
38
- | Component | Description | Info |
39
- |----------|:-------------:|------:|
40
- | Alert | TBD | [More info](ui/Elements/Alert/README.md) |
41
- | Avatar | TBD | [More info](ui/Elements/Avatar/README.md) |
42
- | Badge | TBD | [More info](ui/Elements/Badge/README.md) |
43
- | BorderedBox | TBD | [More info](ui/Elements/BorderedBox/README.md) |
44
- | Button | TBD | [More info](ui/Elements/Button/README.md) |
45
- | Card | TBD | [More info](ui/Elements/Card/README.md) |
46
- | DialogOverlay | TBD | [More info](ui/Elements/DialogOverlay/README.md) |
47
- | Dropdown | TBD | [More info](ui/Elements/Dropdown/README.md) |
48
- | ErrorMessage | TBD | [More info](ui/Elements/ErrorMessage/README.md) |
49
- | Icon | TBD | [More info](ui/Elements/Icon/README.md) |
50
- | Image | TBD | [More info](ui/Elements/Image/README.md) |
51
- | Label | TBD | [More info](ui/Elements/Label/README.md) |
52
- | Link | TBD | [More info](ui/Elements/Link/README.md) |
53
- | Logo | TBD | [More info](ui/Elements/Logo/README.md) |
54
- | Overlay | TBD | [More info](ui/Elements/Overlay/README.md) |
55
- | Pagination | TBD | [More info](ui/Elements/Pagination/README.md) |
56
- | Paragraph | TBD | [More info](ui/Elements/Paragraph/README.md) |
57
- | Spinner | TBD | [More info](ui/Elements/Spinner/README.md) |
58
-
59
- ### Blocks
60
- | Component | Description | Info |
61
- |----------|:-------------:|------:|
62
- | TBD | TBD | TBD |
63
-
64
- ### Forms
65
- | Component | Description | Info |
66
- |----------|:-------------:|------:|
67
- | TBD | TBD | TBD |
68
-
69
- ### System
70
- | Component | Description | Info |
71
- |----------|:-------------:|------:|
72
- | Fonts | Import adjusted fonts of inter | TBD |
73
-
74
- ### Theme Provider
75
- | Component | Description | Info |
76
- |----------|:-------------:|------:|
77
- | Theme Provider | TBD | [More info](ui/ThemeProvider/README.md) |
78
-
1
+ # Mailstep Design-system
2
+
3
+ Live demo here: https://mailstep.gitlab.io/mailwise/mw2/design-system/storybook
4
+
5
+ Powered by chromatic: https://www.chromatic.com/library?appId=664c5032c1e55e80a74fcfd2&branch=master
6
+
7
+ ## Peer dependencies
8
+ - @xstyled/styled-components
9
+ - styled-component
10
+ - react-router
11
+ - react-router-dom
12
+
13
+ ### How to develoop
14
+ ```
15
+ yarn install
16
+ yarn dev
17
+ ```
18
+
19
+ ### How to use
20
+ ```
21
+ yarn add @mailstep/design-system
22
+ ```
23
+ and add `import 'swiper/css'` somewhere to the root app.
24
+
25
+
26
+ #### How to publish
27
+ In root folder run
28
+
29
+ ```
30
+ npm run build
31
+ npm run deploy
32
+ ```
33
+
34
+ ## Components
35
+ There are Elements, Blocks and Forms components. Also you can use ThemeProvider and Utils package
36
+
37
+ ### Elements
38
+ | Component | Description | Info |
39
+ |----------|:-------------:|------:|
40
+ | Alert | TBD | [More info](ui/Elements/Alert/README.md) |
41
+ | Avatar | TBD | [More info](ui/Elements/Avatar/README.md) |
42
+ | Badge | TBD | [More info](ui/Elements/Badge/README.md) |
43
+ | BorderedBox | TBD | [More info](ui/Elements/BorderedBox/README.md) |
44
+ | Button | TBD | [More info](ui/Elements/Button/README.md) |
45
+ | Card | TBD | [More info](ui/Elements/Card/README.md) |
46
+ | DialogOverlay | TBD | [More info](ui/Elements/DialogOverlay/README.md) |
47
+ | Dropdown | TBD | [More info](ui/Elements/Dropdown/README.md) |
48
+ | ErrorMessage | TBD | [More info](ui/Elements/ErrorMessage/README.md) |
49
+ | Icon | TBD | [More info](ui/Elements/Icon/README.md) |
50
+ | Image | TBD | [More info](ui/Elements/Image/README.md) |
51
+ | Label | TBD | [More info](ui/Elements/Label/README.md) |
52
+ | Link | TBD | [More info](ui/Elements/Link/README.md) |
53
+ | Logo | TBD | [More info](ui/Elements/Logo/README.md) |
54
+ | Overlay | TBD | [More info](ui/Elements/Overlay/README.md) |
55
+ | Pagination | TBD | [More info](ui/Elements/Pagination/README.md) |
56
+ | Paragraph | TBD | [More info](ui/Elements/Paragraph/README.md) |
57
+ | Spinner | TBD | [More info](ui/Elements/Spinner/README.md) |
58
+
59
+ ### Blocks
60
+ | Component | Description | Info |
61
+ |----------|:-------------:|------:|
62
+ | TBD | TBD | TBD |
63
+
64
+ ### Forms
65
+ | Component | Description | Info |
66
+ |----------|:-------------:|------:|
67
+ | TBD | TBD | TBD |
68
+
69
+ ### System
70
+ | Component | Description | Info |
71
+ |----------|:-------------:|------:|
72
+ | Fonts | Import adjusted fonts of inter | TBD |
73
+
74
+ ### Theme Provider
75
+ | Component | Description | Info |
76
+ |----------|:-------------:|------:|
77
+ | Theme Provider | TBD | [More info](ui/ThemeProvider/README.md) |
78
+
package/package.json CHANGED
@@ -1,150 +1,150 @@
1
- {
2
- "name": "@mailstep/design-system",
3
- "version": "0.6.71-beta.0",
4
- "license": "ISC",
5
- "type": "module",
6
- "main": "./ui/index.js",
7
- "module": "./ui/index.es.js",
8
- "types": "./ui/index.d.ts",
9
- "files": [
10
- "ui",
11
- "assets"
12
- ],
13
- "scripts": {
14
- "storybook": "storybook dev -p 6006",
15
- "build": "tsc && vite build && copy package.json build && copy README.md build",
16
- "build-storybook": "storybook build",
17
- "deploy": "npm run build && npm publish ./build",
18
- "dev": "yarn storybook",
19
- "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
20
- "chromatic": "npx chromatic --project-token=chpt_cbebab21ab70358 --exit-zero-on-changes",
21
- "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}"
22
- },
23
- "devDependencies": {
24
- "@babel/core": "^7.20.12",
25
- "@babel/preset-env": "^7.22.4",
26
- "@babel/preset-react": "^7.22.3",
27
- "@babel/preset-typescript": "^7.23.3",
28
- "@chromatic-com/storybook": "^1",
29
- "@fortawesome/fontawesome-svg-core": "^6.3.0",
30
- "@fortawesome/free-brands-svg-icons": "^6.1.1",
31
- "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
32
- "@fortawesome/pro-light-svg-icons": "^6.0.0",
33
- "@fortawesome/pro-regular-svg-icons": "^6.0.0",
34
- "@fortawesome/pro-solid-svg-icons": "^6.3.0",
35
- "@fortawesome/react-fontawesome": "^0.2.0",
36
- "@lingui/core": "3.17.2",
37
- "@lingui/react": "3.17.2",
38
- "@popperjs/core": "^2.11.8",
39
- "@storybook/addon-controls": "^8.1.1",
40
- "@storybook/addon-designs": "^8.0.2",
41
- "@storybook/addon-essentials": "^8.1.1",
42
- "@storybook/addon-interactions": "^8.1.1",
43
- "@storybook/addon-links": "^8.1.1",
44
- "@storybook/blocks": "^8.1.1",
45
- "@storybook/react": "^8.1.1",
46
- "@storybook/react-webpack5": "^8.1.1",
47
- "@storybook/test": "^8.1.1",
48
- "@svgr/rollup": "^8.0.1",
49
- "@trivago/prettier-plugin-sort-imports": "^4.3.0",
50
- "@types/faker": "^4.1.11",
51
- "@types/luxon": "^3.4.2",
52
- "@types/node": "^20.1.7",
53
- "@types/react": "^18.2.6",
54
- "@types/react-beautiful-dnd": "^13.1.2",
55
- "@types/react-dom": "^18.2.4",
56
- "@types/react-helmet": "^6.1.11",
57
- "@types/react-router": "^5.1.20",
58
- "@types/react-router-dom": "^5.3.3",
59
- "@types/styled-components": "^5.1.26",
60
- "@typescript-eslint/eslint-plugin": "^5.59.6",
61
- "@typescript-eslint/parser": "^5.59.6",
62
- "@vitejs/plugin-react": "^4.2.1",
63
- "@xstyled/styled-components": "^3.8.0",
64
- "babel-loader": "^9.1.3",
65
- "babel-plugin-macros": "^3.1.0",
66
- "babel-plugin-named-exports-order": "^0.0.2",
67
- "chromatic": "^11.3.5",
68
- "eslint": "^8.41.0",
69
- "eslint-config-prettier": "^8.8.0",
70
- "eslint-config-standard-with-typescript": "^34.0.1",
71
- "eslint-plugin-import": "^2.29.1",
72
- "eslint-plugin-n": "^17.9.0",
73
- "eslint-plugin-prettier": "^4.2.1",
74
- "eslint-plugin-promise": "^6.6.0",
75
- "eslint-plugin-react": "^7.35.0",
76
- "eslint-plugin-react-hooks": "^4.6.2",
77
- "eslint-plugin-react-perf": "^3.3.2",
78
- "eslint-plugin-storybook": "^0.8.0",
79
- "faker": "^5.1.0",
80
- "immer": "9.0.7",
81
- "lodash": "^4.17.21",
82
- "luxon": "^3.4.4",
83
- "moment": "^2.30.1",
84
- "prettier": "2.8.8",
85
- "react": "^18.2.0",
86
- "react-beautiful-dnd": "^13.0.0",
87
- "react-dom": "^18.2.0",
88
- "react-helmet": "^6.1.0",
89
- "react-image": "^4.1.0",
90
- "react-onclickoutside": "^6.13.0",
91
- "react-popper": "^2.3.0",
92
- "react-redux": "*",
93
- "react-router": "^5.1.2",
94
- "react-router-dom": "^5.1.2",
95
- "react-script": "^2.0.5",
96
- "react-select": "^5.8.0",
97
- "react-use-draggable-scroll": "^0.4.7",
98
- "redux": ">=4.0.5",
99
- "reselect": "5.0.0-alpha.2",
100
- "storybook": "^8.1.1",
101
- "string-width": "6.1.0",
102
- "styled-components": "^5.3.10",
103
- "swiper": "^11.0.3",
104
- "tslib": "^2.6.2",
105
- "typescript": "^5.0.4",
106
- "vite": "^5.0.10",
107
- "vite-plugin-dts": "^3.6.4",
108
- "vite-plugin-static-copy": "^1.0.0",
109
- "webpack": "^5.82.1"
110
- },
111
- "peerDependencies": {
112
- "@fortawesome/fontawesome-svg-core": "^6.3.0",
113
- "@fortawesome/free-brands-svg-icons": "^6.1.1",
114
- "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
115
- "@fortawesome/pro-light-svg-icons": "^6.0.0",
116
- "@fortawesome/pro-regular-svg-icons": "^6.0.0",
117
- "@fortawesome/pro-solid-svg-icons": "^6.3.0",
118
- "@fortawesome/react-fontawesome": "^0.2.0",
119
- "@lingui/core": "3.17.2",
120
- "@lingui/react": "3.17.2",
121
- "@popperjs/core": "^2.11.8",
122
- "@xstyled/styled-components": "^3.8.0",
123
- "babel-plugin-macros": "^3.1.0",
124
- "immer": "9.0.7",
125
- "lodash": "^4.17.21",
126
- "luxon": "^3.4.4",
127
- "moment": "^2.30.1",
128
- "react": "^18.2.0",
129
- "react-beautiful-dnd": "^13.0.0",
130
- "react-dom": "^18.2.0",
131
- "react-helmet": "^6.1.0",
132
- "react-image": "^4.1.0",
133
- "react-onclickoutside": "^6.13.0",
134
- "react-popper": "^2.3.0",
135
- "react-redux": ">=4.0.5",
136
- "react-router": "^5.1.2",
137
- "react-router-dom": "^5.1.2",
138
- "react-select": "^5.8.0",
139
- "react-use-draggable-scroll": "^0.4.7",
140
- "redux": ">=4.0.5",
141
- "reselect": "5.0.0-alpha.2",
142
- "styled-components": "^5.3.10",
143
- "swiper": "^11.0.3",
144
- "tslib": "^2.6.2",
145
- "typescript": "^5.0.4"
146
- },
147
- "resolutions": {
148
- "jackspeak": "2.1.1"
149
- }
150
- }
1
+ {
2
+ "name": "@mailstep/design-system",
3
+ "version": "0.6.71",
4
+ "license": "ISC",
5
+ "type": "module",
6
+ "main": "./ui/index.js",
7
+ "module": "./ui/index.es.js",
8
+ "types": "./ui/index.d.ts",
9
+ "files": [
10
+ "ui",
11
+ "assets"
12
+ ],
13
+ "scripts": {
14
+ "storybook": "storybook dev -p 6006",
15
+ "build": "rm -rf ./build && tsc && vite build && cp package.json build && cp README.md build",
16
+ "build-storybook": "storybook build",
17
+ "deploy": "npm run build && npm publish ./build",
18
+ "dev": "yarn storybook",
19
+ "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
20
+ "chromatic": "npx chromatic --project-token=chpt_cbebab21ab70358 --exit-zero-on-changes",
21
+ "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}"
22
+ },
23
+ "devDependencies": {
24
+ "@babel/core": "^7.20.12",
25
+ "@babel/preset-env": "^7.22.4",
26
+ "@babel/preset-react": "^7.22.3",
27
+ "@babel/preset-typescript": "^7.23.3",
28
+ "@chromatic-com/storybook": "^1",
29
+ "@fortawesome/fontawesome-svg-core": "^6.3.0",
30
+ "@fortawesome/free-brands-svg-icons": "^6.1.1",
31
+ "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
32
+ "@fortawesome/pro-light-svg-icons": "^6.0.0",
33
+ "@fortawesome/pro-regular-svg-icons": "^6.0.0",
34
+ "@fortawesome/pro-solid-svg-icons": "^6.3.0",
35
+ "@fortawesome/react-fontawesome": "^0.2.0",
36
+ "@lingui/core": "3.17.2",
37
+ "@lingui/react": "3.17.2",
38
+ "@popperjs/core": "^2.11.8",
39
+ "@storybook/addon-controls": "^8.1.1",
40
+ "@storybook/addon-designs": "^8.0.2",
41
+ "@storybook/addon-essentials": "^8.1.1",
42
+ "@storybook/addon-interactions": "^8.1.1",
43
+ "@storybook/addon-links": "^8.1.1",
44
+ "@storybook/blocks": "^8.1.1",
45
+ "@storybook/react": "^8.1.1",
46
+ "@storybook/react-webpack5": "^8.1.1",
47
+ "@storybook/test": "^8.1.1",
48
+ "@svgr/rollup": "^8.0.1",
49
+ "@trivago/prettier-plugin-sort-imports": "^4.3.0",
50
+ "@types/faker": "^4.1.11",
51
+ "@types/luxon": "^3.4.2",
52
+ "@types/node": "^20.1.7",
53
+ "@types/react": "^18.2.6",
54
+ "@types/react-beautiful-dnd": "^13.1.2",
55
+ "@types/react-dom": "^18.2.4",
56
+ "@types/react-helmet": "^6.1.11",
57
+ "@types/react-router": "^5.1.20",
58
+ "@types/react-router-dom": "^5.3.3",
59
+ "@types/styled-components": "^5.1.26",
60
+ "@typescript-eslint/eslint-plugin": "^5.59.6",
61
+ "@typescript-eslint/parser": "^5.59.6",
62
+ "@vitejs/plugin-react": "^4.2.1",
63
+ "@xstyled/styled-components": "^3.8.0",
64
+ "babel-loader": "^9.1.3",
65
+ "babel-plugin-macros": "^3.1.0",
66
+ "babel-plugin-named-exports-order": "^0.0.2",
67
+ "chromatic": "^11.3.5",
68
+ "eslint": "^8.41.0",
69
+ "eslint-config-prettier": "^8.8.0",
70
+ "eslint-config-standard-with-typescript": "^34.0.1",
71
+ "eslint-plugin-import": "^2.29.1",
72
+ "eslint-plugin-n": "^17.9.0",
73
+ "eslint-plugin-prettier": "^4.2.1",
74
+ "eslint-plugin-promise": "^6.6.0",
75
+ "eslint-plugin-react": "^7.35.0",
76
+ "eslint-plugin-react-hooks": "^4.6.2",
77
+ "eslint-plugin-react-perf": "^3.3.2",
78
+ "eslint-plugin-storybook": "^0.8.0",
79
+ "faker": "^5.1.0",
80
+ "immer": "9.0.7",
81
+ "lodash": "^4.17.21",
82
+ "luxon": "^3.4.4",
83
+ "moment": "^2.30.1",
84
+ "prettier": "2.8.8",
85
+ "react": "^18.2.0",
86
+ "react-beautiful-dnd": "^13.0.0",
87
+ "react-dom": "^18.2.0",
88
+ "react-helmet": "^6.1.0",
89
+ "react-image": "^4.1.0",
90
+ "react-onclickoutside": "^6.13.0",
91
+ "react-popper": "^2.3.0",
92
+ "react-redux": "*",
93
+ "react-router": "^5.1.2",
94
+ "react-router-dom": "^5.1.2",
95
+ "react-script": "^2.0.5",
96
+ "react-select": "^5.8.0",
97
+ "react-use-draggable-scroll": "^0.4.7",
98
+ "redux": ">=4.0.5",
99
+ "reselect": "5.0.0-alpha.2",
100
+ "storybook": "^8.1.1",
101
+ "string-width": "6.1.0",
102
+ "styled-components": "^5.3.10",
103
+ "swiper": "^11.0.3",
104
+ "tslib": "^2.6.2",
105
+ "typescript": "^5.0.4",
106
+ "vite": "^5.0.10",
107
+ "vite-plugin-dts": "^3.6.4",
108
+ "vite-plugin-static-copy": "^1.0.0",
109
+ "webpack": "^5.82.1"
110
+ },
111
+ "peerDependencies": {
112
+ "@fortawesome/fontawesome-svg-core": "^6.3.0",
113
+ "@fortawesome/free-brands-svg-icons": "^6.1.1",
114
+ "@fortawesome/pro-duotone-svg-icons": "^6.0.0",
115
+ "@fortawesome/pro-light-svg-icons": "^6.0.0",
116
+ "@fortawesome/pro-regular-svg-icons": "^6.0.0",
117
+ "@fortawesome/pro-solid-svg-icons": "^6.3.0",
118
+ "@fortawesome/react-fontawesome": "^0.2.0",
119
+ "@lingui/core": "3.17.2",
120
+ "@lingui/react": "3.17.2",
121
+ "@popperjs/core": "^2.11.8",
122
+ "@xstyled/styled-components": "^3.8.0",
123
+ "babel-plugin-macros": "^3.1.0",
124
+ "immer": "9.0.7",
125
+ "lodash": "^4.17.21",
126
+ "luxon": "^3.4.4",
127
+ "moment": "^2.30.1",
128
+ "react": "^18.2.0",
129
+ "react-beautiful-dnd": "^13.0.0",
130
+ "react-dom": "^18.2.0",
131
+ "react-helmet": "^6.1.0",
132
+ "react-image": "^4.1.0",
133
+ "react-onclickoutside": "^6.13.0",
134
+ "react-popper": "^2.3.0",
135
+ "react-redux": ">=4.0.5",
136
+ "react-router": "^5.1.2",
137
+ "react-router-dom": "^5.1.2",
138
+ "react-select": "^5.8.0",
139
+ "react-use-draggable-scroll": "^0.4.7",
140
+ "redux": ">=4.0.5",
141
+ "reselect": "5.0.0-alpha.2",
142
+ "styled-components": "^5.3.10",
143
+ "swiper": "^11.0.3",
144
+ "tslib": "^2.6.2",
145
+ "typescript": "^5.0.4"
146
+ },
147
+ "resolutions": {
148
+ "jackspeak": "2.1.1"
149
+ }
150
+ }
package/ui/Blocks/LoginPage/LoginPage.js CHANGED
@@ -6,7 +6,7 @@ import { SocialLinks } from './components/SocialLinks';
6
6
  import { EMAIL_ADDRESS } from './utils/links';
7
7
  import { Trans } from '@lingui/react';
8
8
  import { x } from '@xstyled/styled-components';
9
- import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, Version, CardBodyWithLanguage } from './styles';
9
+ import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, CardBodyWithLanguage, Version } from './styles';
10
10
  var Login = function (_a) {
11
11
  var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version, backgroundImage = _a.backgroundImage, _b = _a.hasSupport, hasSupport = _b === void 0 ? true : _b, _c = _a.hasSocialLinks, hasSocialLinks = _c === void 0 ? true : _c;
12
12
  return (_jsxs(Wrapper, { backgroundImage: backgroundImage, children: [_jsxs(CardBodyWithLanguage, { children: [_jsx(LogoWrapper, { children: _jsx(MainLogo, { brand: brand, variant: brandVariant }) }), _jsxs(LanguageBox, { children: [hasSupport && (_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] })), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter })] }), children, version && _jsx(Version, { children: version }), hasSocialLinks && _jsx(SocialLinks, {})] }));
package/ui/Blocks/LoginPage/styles.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div",
3
3
  backgroundImage?: "mailship" | undefined;
4
4
  }, never>;
5
5
  export declare const LanguageBox: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
6
- export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
6
+ export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<({ children, ...rest }: import("../../Elements/Card/types").PropsBody) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
7
7
  export declare const MailTo: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;
8
8
  export declare const LogoWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
9
9
  export declare const MainLogo: import("styled-components").StyledComponent<({ brand, variant, size, width, height, ...rest }: import("../../Elements/Logo/types").LogoProps) => JSX.Element | null, import("@xstyled/system").Theme, {}, never>;
package/ui/Blocks/LoginPage/styles.js CHANGED
@@ -2,6 +2,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
2
2
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
3
  return cooked;
4
4
  };
5
+ import { CardBody } from '../../Elements/Card/Card';
5
6
  import Logo from '../../Elements/Logo/Logo';
6
7
  import mailship from './assets/mailship.jpg';
7
8
  import styled, { th } from '@xstyled/styled-components';
@@ -13,7 +14,7 @@ export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTe
13
14
  return "transparent ".concat(backgroundImage && "url(".concat(backgroundImageMap[backgroundImage], ")"), " 50% 0% no-repeat padding-box;");
14
15
  });
15
16
  export var LanguageBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n margin: 15px 0;\n align-items: flex-end;\n justify-content: space-between;\n @media (min-width: 1024px) {\n justify-content: flex-end;\n margin: 40px 0;\n }\n"], ["\n display: flex;\n margin: 15px 0;\n align-items: flex-end;\n justify-content: space-between;\n @media (min-width: 1024px) {\n justify-content: flex-end;\n margin: 40px 0;\n }\n"])));
16
- export var CardBodyWithLanguage = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n padding: 0 32px 10px 32px;\n flex-grow: 1;\n margin: auto;\n width: 500px;\n @media (min-width: 1024px) {\n display: block;\n flex-grow: 0;\n }\n"], ["\n display: flex;\n justify-content: start;\n padding: 0 32px 10px 32px;\n flex-grow: 1;\n margin: auto;\n width: 500px;\n @media (min-width: 1024px) {\n display: block;\n flex-grow: 0;\n }\n"])));
17
+ export var CardBodyWithLanguage = styled(CardBody)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n padding: 0 32px 10px 32px;\n flex-grow: 1;\n margin: auto;\n width: 500px;\n @media (min-width: 1024px) {\n display: block;\n flex-grow: 0;\n }\n"], ["\n display: flex;\n justify-content: start;\n padding: 0 32px 10px 32px;\n flex-grow: 1;\n margin: auto;\n width: 500px;\n @media (min-width: 1024px) {\n display: block;\n flex-grow: 0;\n }\n"])));
17
18
  export var MailTo = styled.a(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n &:hover {\n color: ", ";\n }\n"], ["\n color: ", ";\n &:hover {\n color: ", ";\n }\n"])), th.color('typoPrimary'), th.color('red1'));
18
19
  export var LogoWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n margin-top: 30px;\n @media (min-width: 1024px) {\n display: block;\n margin-top: 0;\n }\n"], ["\n display: flex;\n justify-content: center;\n margin-top: 30px;\n @media (min-width: 1024px) {\n display: block;\n margin-top: 0;\n }\n"])));
19
20
  export var MainLogo = styled(Logo)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 50%;\n height: auto;\n"], ["\n width: 50%;\n height: auto;\n"])));
package/ui/Elements/Card/Card.d.ts CHANGED
@@ -1,4 +1,6 @@
1
- import { FC } from 'react';
2
- import { CardProps } from './types';
3
- declare const Card: FC<CardProps>;
4
- export default Card;
1
+ import { CardComponentProps, CardProps, PropsBody, PropsCardImage } from './types';
2
+ export declare const Card: ({ children, block, hasBorder, backgroundColor, ...rest }: CardProps) => JSX.Element;
3
+ export declare const CardBody: ({ children, ...rest }: PropsBody) => JSX.Element;
4
+ export declare const CardImage: ({ children, color, ...rest }: PropsCardImage) => JSX.Element;
5
+ declare const CardComponent: ({ img, body, children, color }: CardComponentProps) => import("react/jsx-runtime").JSX.Element;
6
+ export default CardComponent;
package/ui/Elements/Card/Card.js CHANGED
@@ -1,7 +1,45 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { StyledCard } from './styles';
3
- var Card = function (_a) {
4
- var children = _a.children, _b = _a.display, display = _b === void 0 ? 'block' : _b, bg = _a.bg, onClick = _a.onClick;
5
- return (_jsx(StyledCard, { onClick: onClick, bg: bg, display: display, hasOnClick: !!onClick, children: children }));
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
6
11
  };
7
- export default Card;
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
+ import { th } from '@xstyled/styled-components';
25
+ import { useTheme } from '@xstyled/styled-components';
26
+ import { StyledCard, CardWrapper, StyledBody, ImageWrapper, StyledImage } from './styles';
27
+ export var Card = function (_a) {
28
+ var children = _a.children, block = _a.block, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, rest = __rest(_a, ["children", "block", "hasBorder", "backgroundColor"]);
29
+ return (_jsx(CardWrapper, { block: block, children: _jsx(StyledCard, __assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));
30
+ };
31
+ export var CardBody = function (_a) {
32
+ var children = _a.children, rest = __rest(_a, ["children"]);
33
+ return _jsx(StyledBody, __assign({}, rest, { children: children }));
34
+ };
35
+ export var CardImage = function (_a) {
36
+ var children = _a.children, _b = _a.color, color = _b === void 0 ? 'white' : _b, rest = __rest(_a, ["children", "color"]);
37
+ var theme = useTheme();
38
+ var themeColor = th.color(color)({ theme: theme });
39
+ return (_jsx(ImageWrapper, { color: themeColor, children: _jsx(StyledImage, __assign({}, rest, { children: children })) }));
40
+ };
41
+ var CardComponent = function (_a) {
42
+ var img = _a.img, body = _a.body, children = _a.children, color = _a.color;
43
+ return (_jsxs(Card, { children: [img && (_jsx(CardImage, { color: color, children: _jsx("img", { src: img, width: "300" }) })), _jsxs(CardBody, { children: [body, children] })] }));
44
+ };
45
+ export default CardComponent;
package/ui/Elements/Card/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- import Card from './Card';
2
- export default Card;
1
+ import CardComponent from './Card';
2
+ export { Card, CardImage, CardBody } from './Card';
3
+ export default CardComponent;
package/ui/Elements/Card/index.js CHANGED
@@ -1,2 +1,3 @@
1
- import Card from './Card';
2
- export default Card;
1
+ import CardComponent from './Card';
2
+ export { Card, CardImage, CardBody } from './Card';
3
+ export default CardComponent;
package/ui/Elements/Card/stories/Card.stories.d.ts CHANGED
@@ -2,12 +2,14 @@
2
2
  import type { StoryObj } from '@storybook/react';
3
3
  declare const meta: {
4
4
  title: string;
5
- component: import("react").FC<import("../types").CardProps>;
5
+ component: ({ children, block, hasBorder, backgroundColor, ...rest }: import("../types").CardProps) => JSX.Element;
6
6
  tags: string[];
7
7
  argTypes: {};
8
8
  };
9
9
  export default meta;
10
10
  type Story = StoryObj<typeof meta>;
11
11
  export declare const Default: Story;
12
- export declare const WithOnClick: Story;
13
- export declare const CustomBg: Story;
12
+ export declare const NoBorder: Story;
13
+ export declare const WithPadding: Story;
14
+ export declare const WithShadow: Story;
15
+ export declare const WithBackground: Story;