@eturnity/eturnity_reusable_components 7.51.15-EPDM-10679.0 → 7.51.15-EPDM-9631.2

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "7.51.15-EPDM-10679.0",
3
+ "version": "7.51.15-EPDM-9631.2",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
@@ -12,7 +12,6 @@ const theme = {
12
12
  white: '#ffffff',
13
13
  blue: '#48a2d0',
14
14
  red: '#ff5656',
15
- pureRed: '#ff0000',
16
15
  blue1: '#e4efff',
17
16
  brightBlue: '#0068DE',
18
17
  grey1: '#666',
@@ -16,18 +16,7 @@ export default {
16
16
  description: '',
17
17
  },
18
18
  color: {
19
- description: 'Color of the text (can overwrite preset styles)',
20
- control: {
21
- type: 'color',
22
- presetColors: [
23
- theme.colors.grey3,
24
- theme.colors.grey4,
25
- theme.colors.red,
26
- ],
27
- },
28
- },
29
- iconColor: {
30
- description: 'Color of the icon (can overwrite preset styles)',
19
+ description: 'Color of text and icon (can overwrite preset styles)',
31
20
  control: {
32
21
  type: 'color',
33
22
  presetColors: [
@@ -108,12 +97,6 @@ InfoCardTypeWarning.args = {
108
97
  type: 'warning',
109
98
  }
110
99
 
111
- export const InfoCardTypeErrorMinor = Template.bind({})
112
- InfoCardTypeErrorMinor.args = {
113
- ...defaultInfoCardProps,
114
- type: 'error_minor',
115
- }
116
-
117
100
  export const InfoCardTypeInfoMinWidth = Template.bind({})
118
101
  InfoCardTypeInfoMinWidth.args = {
119
102
  ...defaultInfoCardProps,
@@ -125,14 +108,7 @@ export const InfoCardTypeInfoColorOverwritten = Template.bind({})
125
108
  InfoCardTypeInfoColorOverwritten.args = {
126
109
  ...defaultInfoCardProps,
127
110
 
128
- color: theme.colors.green,
129
- }
130
-
131
- export const InfoCardTypeInfoIconColorOverwritten = Template.bind({})
132
- InfoCardTypeInfoIconColorOverwritten.args = {
133
- ...defaultInfoCardProps,
134
-
135
- iconColor: theme.colors.green,
111
+ color: theme.colors.red,
136
112
  }
137
113
 
138
114
  export const InfoCardTypeWarningAlignItemsOverwritten = Template.bind({})
@@ -153,18 +129,16 @@ InfoCardTypeWarningPaddingOverwritten.args = {
153
129
  padding: '50px',
154
130
  }
155
131
 
156
- export const InfoCardTypeErrorMinorBorderColorOverwritten = Template.bind({})
157
- InfoCardTypeErrorMinorBorderColorOverwritten.args = {
132
+ export const InfoCardTypeInfoBorderColorOverwritten = Template.bind({})
133
+ InfoCardTypeInfoBorderColorOverwritten.args = {
158
134
  ...defaultInfoCardProps,
159
- type: 'error_minor',
160
135
 
161
- borderColor: theme.colors.green,
136
+ borderColor: theme.colors.red,
162
137
  }
163
138
 
164
- export const InfoCardTypeErrorMinorBorderStyleOverwritten = Template.bind({})
165
- InfoCardTypeErrorMinorBorderStyleOverwritten.args = {
139
+ export const InfoCardTypeInfoBorderStyleOverwritten = Template.bind({})
140
+ InfoCardTypeInfoBorderStyleOverwritten.args = {
166
141
  ...defaultInfoCardProps,
167
- type: 'error_minor',
168
142
 
169
143
  borderStyle: 'solid none',
170
144
  }
@@ -10,7 +10,7 @@
10
10
  :preset-styles="presetStyles"
11
11
  >
12
12
  <RCIcon
13
- :color="iconColor ? iconColor : presetStyles.iconColor"
13
+ :color="color ? color : presetStyles.iconColor"
14
14
  data-test-id="info_card_icon"
15
15
  name="info"
16
16
  size="24px"
@@ -79,11 +79,6 @@
79
79
  type: String,
80
80
  default: '',
81
81
  },
82
- iconColor: {
83
- required: false,
84
- type: String,
85
- default: '',
86
- },
87
82
  color: {
88
83
  required: false,
89
84
  type: String,
@@ -118,9 +113,6 @@
118
113
  isWarning() {
119
114
  return this.type === 'warning'
120
115
  },
121
- isErrorMinor() {
122
- return this.type === 'error_minor'
123
- },
124
116
  presetStyles() {
125
117
  // the types that doesn't have explicit border anyway have it transparent
126
118
  // to avoid flickering in case the same info card would switch the types
@@ -136,10 +128,6 @@
136
128
  stylesCollection.color = theme.colors.white
137
129
  stylesCollection.backgroundColor = theme.colors.yellow
138
130
  stylesCollection.iconColor = theme.colors.white
139
- } else if (this.isErrorMinor) {
140
- stylesCollection.borderStyle = 'dashed'
141
- stylesCollection.borderColor = theme.colors.pureRed
142
- stylesCollection.iconColor = theme.colors.pureRed
143
131
  } else {
144
132
  stylesCollection.borderStyle = 'dashed'
145
133
  stylesCollection.borderColor = theme.colors.grey4
@@ -47,18 +47,10 @@ describe('RCInfoCard.vue', () => {
47
47
 
48
48
  expect(wrapper.vm.isInfo).toBe(true)
49
49
  expect(wrapper.vm.isWarning).toBe(false)
50
- expect(wrapper.vm.isErrorMinor).toBe(false)
51
50
 
52
51
  await wrapper.setProps({ type: 'warning' })
53
52
 
54
53
  expect(wrapper.vm.isInfo).toBe(false)
55
54
  expect(wrapper.vm.isWarning).toBe(true)
56
- expect(wrapper.vm.isErrorMinor).toBe(false)
57
-
58
- await wrapper.setProps({ type: 'error_minor' })
59
-
60
- expect(wrapper.vm.isInfo).toBe(false)
61
- expect(wrapper.vm.isWarning).toBe(false)
62
- expect(wrapper.vm.isErrorMinor).toBe(true)
63
55
  })
64
56
  })
@@ -254,6 +254,9 @@
254
254
  activeDropdown: null,
255
255
  }
256
256
  },
257
+ mounted() {
258
+ this.activeDropdown = this.activeParentTab
259
+ },
257
260
  methods: {
258
261
  toggleActiveDropdown(value) {
259
262
  if (this.activeDropdown === value) {
@@ -263,17 +266,5 @@
263
266
  }
264
267
  },
265
268
  },
266
- watch: {
267
- activeTab: {
268
- // once active tab is received, check if any parent
269
- // tab is active and if so open according dropdown
270
- handler() {
271
- if (this.activeParentTab) {
272
- this.activeDropdown = this.activeParentTab
273
- }
274
- },
275
- once: true,
276
- },
277
- },
278
269
  }
279
270
  </script>
@@ -0,0 +1,51 @@
1
+ // functions for standard date and time formatting
2
+
3
+ // e.g. 13.12.2024
4
+ export const toLocaleDate = ({
5
+ locale = localStorage.getItem('lang'),
6
+ value,
7
+ }) => {
8
+ const localeLC = locale.toLowerCase()
9
+ const options = {
10
+ year: 'numeric',
11
+ month: '2-digit',
12
+ day: '2-digit',
13
+ }
14
+
15
+ return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
16
+ }
17
+
18
+ // e.g. 31 December 2024
19
+ export const toLocaleDateLong = ({
20
+ locale = localStorage.getItem('lang'),
21
+ value,
22
+ }) => {
23
+ const localeLC = locale.toLowerCase()
24
+ const options = {
25
+ year: 'numeric',
26
+ month: 'long',
27
+ day: '2-digit',
28
+ }
29
+
30
+ return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
31
+ }
32
+
33
+ // e.g. 08:45
34
+ export const toLocaleTime = ({
35
+ locale = localStorage.getItem('lang'),
36
+ value,
37
+ }) => {
38
+ const nonDefaultFormatting = {
39
+ 'es-es': { hour: '2-digit' },
40
+ 'cs-es': { hour: '2-digit' },
41
+ }
42
+
43
+ const localeLC = locale.toLowerCase()
44
+ const options = {
45
+ hour: 'numeric',
46
+ minute: 'numeric',
47
+ ...nonDefaultFormatting[localeLC],
48
+ }
49
+
50
+ return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
51
+ }
@@ -1,3 +0,0 @@
1
- <svg width="26" height="26" viewBox="0 0 19 26" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M8.947 24.9C4.1 24.9 1.308 23.24.1 19.773c-.141-.389-.148-.542.1-.649l3.457-1.791c.218-.11.292-.1.393.177a4.731 4.731 0 0 0 4.8 3.039c2.459-.044 4.162-.874 4.162-2.5 0-1.448-1.574-3.046-4.849-3.42-.259-.027-.577-.06-.858-.1C3.8 13.986.871 11.979.737 7.921c-.151-4.6 2.4-7.81 8.708-7.81 4.735 0 7.455 2.236 8.582 5.194.142.378-.038.532-.251.6l-3.955 1.623c-.249.106-.348.029-.416-.147-.544-1.418-1.642-3.339-4.2-3.224-2.6.121-3.633 1.159-3.862 2.706-.316 2.128 1.568 3.117 5.1 3.527.318.035.711.106 1.175.176 4.558.636 6.967 3.083 6.967 6.768 0 5.446-4.047 7.564-9.637 7.564" fill="white"/>
3
- </svg>