@eturnity/eturnity_reusable_components 9.37.7 → 9.37.9-ATE-23.0

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 (9) hide show
  1. package/dist/index.es3.js +12 -0
  2. package/package.json +1 -1
  3. package/src/assets/svgIcons/subscriptions.svg +2 -2
  4. package/src/assets/theme.js +12 -0
  5. package/src/components/navigationSideMenu/index.vue +17 -17
  6. package/src/components/sideMenu/index.vue +14 -12
  7. package/src/components/sideMenu/sideMenu.spec.js +26 -0
  8. package/src/components/tableDropdown/index.vue +1 -1
  9. package/src/components/tabsHeader/index.vue +6 -6
package/dist/index.es3.js CHANGED
@@ -247,6 +247,18 @@ const theme = (() => {
247
247
  return {
248
248
  colors,
249
249
  semanticColors,
250
+ navigation: {
251
+ icon: {
252
+ default: semanticColors.teal[800],
253
+ active: semanticColors.purple[500],
254
+ hovered: semanticColors.purple[500]
255
+ },
256
+ label: {
257
+ default: semanticColors.teal[800],
258
+ active: semanticColors.purple[500],
259
+ hovered: semanticColors.purple[500]
260
+ }
261
+ },
250
262
  fonts: {
251
263
  mainFont: '"Figtree", sans-serif'
252
264
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "9.37.7",
3
+ "version": "9.37.9-ATE-23.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
package/src/assets/svgIcons/subscriptions.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M0 10H8V8H0V10ZM0 14H8V12H0V14ZM0 6H8V4H0V6ZM0 0V2H8V0H0ZM10 0H18V14H10V0Z" fill="#263238"/>
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6.10173 4.00478L6.2033 4.02041L6.32537 4.05654C6.4437 4.09977 6.54918 4.16206 6.63396 4.20986L10.3342 6.2958C10.4241 6.34648 10.5383 6.40668 10.6408 6.49013L10.7385 6.58193L10.8058 6.66494C10.8686 6.75088 10.9173 6.84675 10.9504 6.94814C11.0059 7.11896 11.0002 7.30154 11.0002 7.44131V10.5751C11.7312 10.4363 12.4353 10.1182 13.0402 9.61904H12.3908C12.1478 9.61895 11.9505 9.42157 11.9504 9.17861C11.9505 8.93565 12.1478 8.73925 12.3908 8.73916H14.051C14.2938 8.73938 14.4912 8.93573 14.4914 9.17861V10.8397C14.491 11.0822 14.2943 11.2796 14.0519 11.2802C13.8088 11.2802 13.6106 11.0818 13.6105 10.8388V10.2899C12.841 10.9282 11.9356 11.3196 11.0002 11.4677V11.5585C11.0002 11.6982 11.0059 11.8809 10.9504 12.0517C10.9063 12.1869 10.8342 12.3123 10.7385 12.4179C10.6169 12.5517 10.454 12.6365 10.3342 12.704L6.63396 14.7899C6.521 14.8536 6.37183 14.9441 6.2033 14.9794C6.06959 15.0073 5.93076 15.0072 5.79705 14.9794C5.62847 14.9442 5.47941 14.8537 5.36638 14.7899L1.66619 12.704C1.54634 12.6364 1.38355 12.5518 1.26189 12.4179C1.16598 12.3122 1.09404 12.187 1.04998 12.0517C0.99439 11.8808 1.00017 11.6983 1.00017 11.5585V7.44131C1.00017 7.30155 0.994405 7.11896 1.04998 6.94814L1.08806 6.84853C1.13144 6.75148 1.19 6.66113 1.26189 6.58193L1.35955 6.49013C1.46209 6.40673 1.57631 6.34646 1.66619 6.2958L5.36638 4.20986C5.47939 4.14613 5.62853 4.05561 5.79705 4.02041L5.89861 4.00478C5.96599 3.99788 6.03436 3.99786 6.10173 4.00478ZM2.00017 11.5585C2.00017 11.6509 2.00007 11.6994 2.00212 11.7343C2.00229 11.7371 2.00198 11.7399 2.00212 11.7421C2.00376 11.7432 2.00591 11.7447 2.00798 11.746C2.03658 11.7645 2.07774 11.788 2.1574 11.8329L5.50017 13.7167V9.79092L2.00017 7.81826V11.5585ZM6.50017 9.79092V13.7167L9.84295 11.8329C9.92257 11.788 9.9638 11.7644 9.99236 11.746C9.99408 11.7448 9.99582 11.743 9.99724 11.7421C9.99743 11.7399 9.99805 11.7371 9.99822 11.7343C10.0003 11.6994 10.0002 11.6509 10.0002 11.5585V7.81826L6.50017 9.79092ZM5.85759 5.08095L2.51775 6.96279L6.00017 8.92568L9.48162 6.96279L6.14275 5.08095C6.06755 5.03857 6.02884 5.01688 6.00017 5.00283L5.85759 5.08095ZM6.6867 1.9247C8.81976 0.154882 11.9894 0.268855 13.9885 2.26748C15.2647 3.54401 15.7727 5.29907 15.5129 6.954C15.4749 7.19368 15.2497 7.35757 15.0099 7.32021C14.7699 7.28236 14.6061 7.05638 14.6437 6.81631C14.8616 5.42768 14.435 3.95945 13.3664 2.89052C11.6943 1.21849 9.04421 1.11953 7.25701 2.59463L7.9074 2.5956C8.15038 2.59581 8.34783 2.79301 8.34783 3.03603C8.34742 3.27871 8.15012 3.47626 7.9074 3.47646L6.24724 3.47549C6.00426 3.47535 5.80691 3.27804 5.80681 3.03506V1.3749C5.80702 1.13201 6.00433 0.935584 6.24724 0.935447C6.49009 0.935653 6.68746 1.13205 6.68767 1.3749L6.6867 1.9247Z" fill="#263238"/>
3
3
  </svg>
package/src/assets/theme.js CHANGED
@@ -248,6 +248,18 @@ const theme = (() => {
248
248
  return {
249
249
  colors,
250
250
  semanticColors,
251
+ navigation: {
252
+ icon: {
253
+ default: semanticColors.teal[800],
254
+ active: semanticColors.purple[500],
255
+ hovered: semanticColors.purple[500],
256
+ },
257
+ label: {
258
+ default: semanticColors.teal[800],
259
+ active: semanticColors.purple[500],
260
+ hovered: semanticColors.purple[500],
261
+ },
262
+ },
251
263
  fonts: {
252
264
  mainFont: '"Figtree", sans-serif',
253
265
  },
package/src/components/navigationSideMenu/index.vue CHANGED
@@ -130,7 +130,7 @@
130
130
  <GroupChevron>
131
131
  <IconComponent
132
132
  :color="theme.semanticColors.grey[700]"
133
- :hovered-color="theme.semanticColors.purple[500]"
133
+ :hovered-color="theme.navigation.icon.hovered"
134
134
  :name="
135
135
  isGroupCollapsed(groupKey(group, groupIdx))
136
136
  ? 'chevron_down'
@@ -172,11 +172,11 @@
172
172
  v-if="item.icon"
173
173
  :color="
174
174
  item.id === activeItemId
175
- ? theme.semanticColors.purple[500]
176
- : theme.semanticColors.teal[800]
175
+ ? theme.navigation.icon.active
176
+ : theme.navigation.icon.default
177
177
  "
178
178
  :fill-type="item.fillType"
179
- :hovered-color="theme.semanticColors.purple[500]"
179
+ :hovered-color="theme.navigation.icon.hovered"
180
180
  :name="item.icon"
181
181
  :size="item.iconSize || '16px'"
182
182
  />
@@ -222,11 +222,11 @@
222
222
  v-if="item.icon"
223
223
  :color="
224
224
  item.id === activeParentId
225
- ? theme.semanticColors.purple[500]
226
- : theme.semanticColors.teal[800]
225
+ ? theme.navigation.icon.active
226
+ : theme.navigation.icon.default
227
227
  "
228
228
  :fill-type="item.fillType"
229
- :hovered-color="theme.semanticColors.purple[500]"
229
+ :hovered-color="theme.navigation.icon.hovered"
230
230
  :name="item.icon"
231
231
  :size="item.iconSize || '16px'"
232
232
  />
@@ -241,10 +241,10 @@
241
241
  <IconComponent
242
242
  :color="
243
243
  activeParentId === item.id
244
- ? theme.semanticColors.purple[500]
245
- : theme.semanticColors.teal[800]
244
+ ? theme.navigation.icon.active
245
+ : theme.navigation.icon.default
246
246
  "
247
- :hovered-color="theme.semanticColors.purple[500]"
247
+ :hovered-color="theme.navigation.icon.hovered"
248
248
  :name="
249
249
  openDropdownId === item.id
250
250
  ? 'chevron_up'
@@ -494,7 +494,7 @@
494
494
  min-width: max-content;
495
495
  cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'pointer')};
496
496
  opacity: ${(p) => (p.isDisabled ? 0.6 : 1)};
497
- color: ${(p) => p.theme.semanticColors.teal[800]};
497
+ color: ${(p) => p.theme.navigation.label.default};
498
498
  font-size: 14px;
499
499
  font-weight: 400;
500
500
  height: ${(p) => (p.isCollapsed ? '30px' : '32px')};
@@ -511,7 +511,7 @@
511
511
  p.isActive &&
512
512
  `
513
513
  background-color: ${p.theme.semanticColors.purple[100]};
514
- color: ${p.theme.semanticColors.purple[500]};
514
+ color: ${p.theme.navigation.label.active};
515
515
  `}
516
516
 
517
517
  &:hover {
@@ -519,10 +519,10 @@
519
519
  !p.isDisabled &&
520
520
  `
521
521
  background-color: ${p.theme.semanticColors.purple[50]};
522
- color: ${p.theme.semanticColors.purple[500]};
522
+ color: ${p.theme.navigation.label.hovered};
523
523
 
524
524
  svg path:not(.fix) {
525
- ${p.fillType || 'fill'}: ${p.theme.semanticColors.purple[500]};
525
+ ${p.fillType || 'fill'}: ${p.theme.navigation.icon.hovered};
526
526
  }
527
527
 
528
528
  svg path.fix {
@@ -623,14 +623,14 @@
623
623
  border-radius: 8px;
624
624
  cursor: ${(p) => (p.isDisabled ? 'not-allowed' : 'pointer')};
625
625
  opacity: ${(p) => (p.isDisabled ? 0.6 : 1)};
626
- color: ${(p) => p.theme.semanticColors.teal[800]};
626
+ color: ${(p) => p.theme.navigation.label.default};
627
627
  font-size: 14px;
628
628
 
629
629
  ${(p) =>
630
630
  p.isActive &&
631
631
  `
632
632
  background-color: ${p.theme.semanticColors.purple[50]};
633
- color: ${p.theme.semanticColors.purple[500]};
633
+ color: ${p.theme.navigation.label.active};
634
634
  `}
635
635
 
636
636
  &:hover {
@@ -638,7 +638,7 @@
638
638
  !p.isDisabled &&
639
639
  `
640
640
  background-color: ${p.theme.semanticColors.purple[50]};
641
- color: ${p.theme.semanticColors.purple[500]};
641
+ color: ${p.theme.navigation.label.hovered};
642
642
  `}
643
643
  }
644
644
  `
package/src/components/sideMenu/index.vue CHANGED
@@ -20,7 +20,9 @@
20
20
  <IconContainer :is-active="activeTab === item.key">
21
21
  <Icon
22
22
  :color="
23
- activeTab === item.key ? theme.semanticColors.purple[500] : ''
23
+ activeTab === item.key
24
+ ? theme.navigation.icon.active
25
+ : theme.navigation.icon.default
24
26
  "
25
27
  cursor="pointer"
26
28
  :fill-type="item.fillType"
@@ -44,8 +46,8 @@
44
46
  <Icon
45
47
  :color="
46
48
  activeParentTab === item.key
47
- ? theme.semanticColors.purple[500]
48
- : ''
49
+ ? theme.navigation.icon.active
50
+ : theme.navigation.icon.default
49
51
  "
50
52
  cursor="pointer"
51
53
  :name="item.icon"
@@ -59,8 +61,8 @@
59
61
  <Icon
60
62
  :color="
61
63
  activeParentTab === item.key
62
- ? theme.semanticColors.purple[500]
63
- : theme.semanticColors.teal[800]
64
+ ? theme.navigation.icon.active
65
+ : theme.navigation.icon.default
64
66
  "
65
67
  :name="
66
68
  activeDropdown === item.key
@@ -142,15 +144,15 @@
142
144
  props.isActive ? props.theme.semanticColors.purple[100] : ''};
143
145
  color: ${(props) =>
144
146
  props.isActive
145
- ? props.theme.semanticColors.purple[500]
146
- : props.theme.semanticColors.teal[800]};
147
+ ? props.theme.navigation.label.active
148
+ : props.theme.navigation.label.default};
147
149
 
148
150
  &:hover:not([data-active='true']) {
149
151
  background-color: ${(props) => props.theme.semanticColors.purple[100]};
150
- color: ${(props) => props.theme.semanticColors.purple[500]};
152
+ color: ${(props) => props.theme.navigation.label.hovered};
151
153
  svg path:not(.fix) {
152
154
  ${(props) => props.fillType}: ${(props) =>
153
- props.theme.semanticColors.purple[500]};
155
+ props.theme.navigation.icon.hovered};
154
156
  }
155
157
  }
156
158
  `
@@ -211,8 +213,8 @@
211
213
  border-radius: 4px;
212
214
  color: ${(props) =>
213
215
  props.isActive
214
- ? props.theme.semanticColors.purple[500]
215
- : props.theme.semanticColors.teal[800]};
216
+ ? props.theme.navigation.label.active
217
+ : props.theme.navigation.label.default};
216
218
  font-weight: 400;
217
219
  font-size: 14px;
218
220
  background: ${(props) =>
@@ -220,7 +222,7 @@
220
222
 
221
223
  &:hover:not([data-active='true']) {
222
224
  background: ${(props) => props.theme.semanticColors.purple[50]};
223
- color: ${(props) => props.theme.semanticColors.purple[500]} !important;
225
+ color: ${(props) => props.theme.navigation.label.hovered} !important;
224
226
  }
225
227
  `
226
228
 
package/src/components/sideMenu/sideMenu.spec.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import { mount } from '@vue/test-utils'
2
2
  import SideMenu from '@/components/sideMenu'
3
3
  import Spinner from '@/components/spinner'
4
+ import Icon from '@/components/icon/Icon.vue'
5
+ import theme from '@/assets/theme.js'
4
6
 
5
7
  jest.mock('@/components/icon/iconCache.mjs', () => ({
6
8
  // need to mock this due to how jest handles import.meta
@@ -54,6 +56,30 @@ describe('sideMenu/index.vue', () => {
54
56
  expect(item(wrapper, 'dashboard').attributes('data-active')).toBe('false')
55
57
  })
56
58
 
59
+ it('passes an explicit colour to both active and inactive item icons', () => {
60
+ // An empty colour makes Icon skip its fill override, which lets whatever
61
+ // fill is baked into the SVG asset show through.
62
+ const wrapper = mountMenu({ activeTab: 'dashboard' })
63
+
64
+ const activeIcon = item(wrapper, 'dashboard').findComponent(Icon)
65
+ const inactiveIcon = item(wrapper, 'projects').findComponent(Icon)
66
+
67
+ expect(activeIcon.props('color')).toBe(theme.navigation.icon.active)
68
+ expect(inactiveIcon.props('color')).toBe(theme.navigation.icon.default)
69
+ })
70
+
71
+ it('passes an explicit colour to the icon of a collapsed parent item', async () => {
72
+ const wrapper = mountMenu({ activeTab: 'dashboard' })
73
+
74
+ const parentIcon = item(wrapper, 'settings').findComponent(Icon)
75
+ expect(parentIcon.props('color')).toBe(theme.navigation.icon.default)
76
+
77
+ await wrapper.setProps({ activeParentTab: 'settings' })
78
+ expect(item(wrapper, 'settings').findComponent(Icon).props('color')).toBe(
79
+ theme.navigation.icon.active
80
+ )
81
+ })
82
+
57
83
  it('emits tab-click with the activeKey when a flat item is clicked', async () => {
58
84
  const wrapper = mountMenu()
59
85
 
package/src/components/tableDropdown/index.vue CHANGED
@@ -657,7 +657,7 @@
657
657
  scrollToItem() {
658
658
  if (this.$refs.optionsContainer) {
659
659
  this.$refs.optionsContainer.$el.scrollIntoView({
660
- behavior: 'smooth',
660
+ behavior: 'instant',
661
661
  block: 'center',
662
662
  })
663
663
  }
package/src/components/tabsHeader/index.vue CHANGED
@@ -43,14 +43,14 @@
43
43
  v-if="item.icon"
44
44
  :color="
45
45
  activeTab === item.id
46
- ? theme.semanticColors.purple[500]
47
- : theme.semanticColors.teal[800]
46
+ ? theme.navigation.icon.active
47
+ : theme.navigation.icon.default
48
48
  "
49
49
  data-test-id="tab-icon"
50
50
  :hovered-color="
51
51
  activeTab === item.id
52
- ? theme.semanticColors.purple[500]
53
- : theme.semanticColors.teal[800]
52
+ ? theme.navigation.icon.active
53
+ : theme.navigation.icon.default
54
54
  "
55
55
  :name="item.icon"
56
56
  size="14px"
@@ -189,8 +189,8 @@
189
189
  font-weight: ${(props) => (props.isActive ? '500' : '400')};
190
190
  color: ${(props) =>
191
191
  props.isActive
192
- ? props.theme.semanticColors.purple[500]
193
- : props.theme.semanticColors.teal[800]};
192
+ ? props.theme.navigation.label.active
193
+ : props.theme.navigation.label.default};
194
194
  flex-grow: ${(props) => (props.fullSize && !props.scrollOverflow ? 1 : 0)};
195
195
  flex-shrink: ${(props) => (props.scrollOverflow ? 0 : 1)};
196
196
  white-space: ${(props) => (props.scrollOverflow ? 'nowrap' : 'normal')};