@eturnity/eturnity_reusable_components 7.51.16-EPDM-13312.0 → 7.51.16-EPDM-10609.12

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.16-EPDM-13312.0",
3
+ "version": "7.51.16-EPDM-10609.12",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
@@ -0,0 +1,4 @@
1
+ <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M22 10V12L0 12L1.19209e-07 10L22 10Z" fill="white"/>
3
+ <path d="M10 0H12V22H10V0Z" fill="white"/>
4
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 9.46199L9.708 11.7L8.724 7.48199L12 4.64399L7.686 4.27799L6 0.299988L4.314 4.27799L0 4.64399L3.276 7.48199L2.292 11.7L6 9.46199Z" fill="#FDB813"/>
3
+ </svg>
@@ -11,6 +11,7 @@ const theme = {
11
11
  lightGray: '#f2f2f2',
12
12
  white: '#ffffff',
13
13
  blue: '#48a2d0',
14
+ blue2: '#6CD4D4',
14
15
  red: '#ff5656',
15
16
  blue1: '#e4efff',
16
17
  brightBlue: '#0068DE',
@@ -0,0 +1,4 @@
1
+ export const TEXT_OVERLAY_TOP_OFFSET = 35
2
+ export const TEXT_OVERLAY_LEFT_OFFSET = 3
3
+ export const TEXT_OVERLAY_ARROW_LEFT_OFFSET = 62
4
+ export const TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET = 68
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <PageContainer ref="container">
2
+ <PageContainer ref="container" :type="type">
3
3
  <div
4
4
  ref="icon"
5
5
  data-test-id="infoText_trigger"
@@ -7,7 +7,13 @@
7
7
  @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
8
8
  @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
9
9
  >
10
+ <Dot
11
+ v-if="type === 'dot'"
12
+ :color="dotColor"
13
+ data-test-id="infoText_dot"
14
+ />
10
15
  <IconComponent
16
+ v-else
11
17
  :color="iconColor || computedIconColor"
12
18
  :cursor="isDisabled ? 'not-allowed' : 'pointer'"
13
19
  :disabled="isDisabled"
@@ -94,7 +100,7 @@
94
100
  `
95
101
 
96
102
  const PageContainer = styled('div')`
97
- display: inline-block;
103
+ display: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
98
104
  position: relative;
99
105
  `
100
106
 
@@ -108,12 +114,20 @@
108
114
  height: auto;
109
115
  `
110
116
 
117
+ const Dot = styled('div')`
118
+ width: 5px;
119
+ height: 5px;
120
+ background-color: ${(props) => props.color};
121
+ border-radius: 50%;
122
+ `
123
+
111
124
  export default {
112
125
  name: 'InfoText',
113
126
  components: {
114
127
  IconComponent,
115
128
  TextOverlay,
116
129
  Arrow,
130
+ Dot,
117
131
  PageContainer,
118
132
  TextWrapper,
119
133
  OverlayImage,
@@ -165,6 +179,16 @@
165
179
  default: false,
166
180
  required: false,
167
181
  },
182
+ dotColor: {
183
+ type: String,
184
+ required: false,
185
+ default: theme.colors.blue2,
186
+ },
187
+ type: {
188
+ type: String,
189
+ required: false,
190
+ default: 'info', // info, dot
191
+ },
168
192
  },
169
193
  setup(props) {
170
194
  const isVisible = ref(false)
@@ -0,0 +1,62 @@
1
+ /* eslint-disable */
2
+ import { mount } from '@vue/test-utils'
3
+ import InfoText from '@/components/infoText'
4
+ import theme from '@/assets/theme'
5
+
6
+ jest.mock('@/components/icon/iconCache.mjs', () => ({
7
+ // need to mock this due to how jest handles import.meta
8
+ fetchIcon: jest.fn(() => Promise.resolve('close_for_modals,_tool_tips.svg')),
9
+ }))
10
+
11
+ describe('InfoText Component', () => {
12
+ let wrapper
13
+
14
+ beforeEach(() => {
15
+ wrapper = mount(InfoText, {
16
+ props: {
17
+ text: 'default text',
18
+ size: '14px',
19
+ infoPosition: 'bottom',
20
+ alignArrow: 'center',
21
+ openTrigger: 'onHover',
22
+ width: '165px',
23
+ maxWidth: '165px',
24
+ shouldUseTeleport: false,
25
+ dotColor: '#00009f',
26
+ type: 'info',
27
+ },
28
+ global: {
29
+ provide: {
30
+ theme,
31
+ },
32
+ },
33
+ })
34
+ })
35
+
36
+ test('renders InfoText component with default props', () => {
37
+ expect(wrapper.find('[data-test-id="infoText_info"]').exists()).toBe(true)
38
+ expect(wrapper.vm.text).toContain('default text')
39
+ expect(wrapper.vm.size).toContain('14px')
40
+ expect(wrapper.vm.infoPosition).toContain('bottom')
41
+ expect(wrapper.vm.alignArrow).toContain('center')
42
+ })
43
+
44
+ test('openTrigger prop is set to onClick', async () => {
45
+ await wrapper.setProps({ openTrigger: 'onClick' })
46
+
47
+ //should not see text upon hover
48
+ expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
49
+ false
50
+ )
51
+ //should see text upon click
52
+ await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
53
+ expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
54
+ true
55
+ )
56
+ })
57
+
58
+ test('position type is dot', async () => {
59
+ await wrapper.setProps({ type: 'dot' })
60
+ expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
61
+ })
62
+ })
@@ -0,0 +1,48 @@
1
+ import InfoText from './index.vue'
2
+
3
+ export default {
4
+ title: 'infoText',
5
+ component: InfoText,
6
+ tags: ['autodocs'],
7
+ parameters: {
8
+ layout: 'centered',
9
+ },
10
+ }
11
+
12
+ // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
13
+ //To use:
14
+ // <info-text
15
+ // text="Veritatis et quasi architecto beatae vitae"
16
+ // size="20px"
17
+ // alignArrow="right" // which side the arrow should be on
18
+ // />
19
+
20
+ export const Default = {
21
+ args: {
22
+ text: 'default text',
23
+ size: '14px',
24
+ infoPosition: 'bottom',
25
+ alignArrow: 'center',
26
+ openTrigger: 'onHover',
27
+ width: '165px',
28
+ maxWidth: '165px',
29
+ shouldUseTeleport: false,
30
+ dotColor: '#00009f',
31
+ type: 'info',
32
+ },
33
+ }
34
+
35
+ export const Dot = {
36
+ args: {
37
+ ...Default.args,
38
+ type: 'dot',
39
+ },
40
+ }
41
+
42
+ //will only show the info text on click
43
+ export const OnClick = {
44
+ args: {
45
+ ...Default.args,
46
+ openTrigger: 'onClick',
47
+ },
48
+ }
@@ -150,12 +150,11 @@
150
150
  computed: {},
151
151
  methods: {
152
152
  clickHandler(e) {
153
- if (this.isDisabled) {
153
+ if (this.isDisabled || !!this.$attrs?.onClick) {
154
154
  // prevent emitter if the option is disabled
155
155
  return
156
- } else {
157
- this.$parent.$emit('option-selected', this.value, e)
158
156
  }
157
+ this.$parent.$emit('option-selected', this.value, e)
159
158
  },
160
159
  hoverHandler() {
161
160
  this.$parent.$emit('option-hovered', this.value)
@@ -9,10 +9,12 @@
9
9
  v-if="!item.children"
10
10
  :key="idx"
11
11
  :data-id="`sub_menu_settings_${item.key}`"
12
- :is-active="activeTab === item.key"
12
+ :is-active="activeTab === item.key || activeParentTab === item.key"
13
13
  @click="$emit('tab-click', { activeKey: item.key })"
14
14
  >
15
- <IconContainer :is-active="activeTab === item.key">
15
+ <IconContainer
16
+ :is-active="activeTab === item.key || activeParentTab === item.key"
17
+ >
16
18
  <Icon color="#fff" cursor="pointer" :name="item.icon" size="18px" />
17
19
  </IconContainer>
18
20
  <ListText>{{ $gettext(item.label) }}</ListText>
@@ -30,9 +30,6 @@
30
30
  <IconPlaceholder v-else />
31
31
  </IconWrapper>
32
32
  <TextContainer
33
- :is-archived="
34
- item.statusActive === false && !!item.companyComponentLibraryId
35
- "
36
33
  :style="{ marginLeft: item.type == 'optimizer' ? '32px' : '0' }"
37
34
  >
38
35
  <TitleText :title="item.model">
@@ -43,20 +40,6 @@
43
40
  : ''
44
41
  }}
45
42
  {{ item.model }}
46
- <InfoTextWrapper>
47
- <RCInfoText
48
- v-if="
49
- item.statusActive === false &&
50
- item.companyComponentLibraryId
51
- "
52
- button-type="error"
53
- :text="
54
- $gettext(
55
- `Component has been archived and shouldn't be used`
56
- )
57
- "
58
- />
59
- </InfoTextWrapper>
60
43
  </TitleText>
61
44
  <TitleSubText>
62
45
  <span>{{ item.brandName }}</span>
@@ -434,7 +417,7 @@
434
417
  import RCIcon from '../../icon'
435
418
  import ButtonIcon from '../../buttons/buttonIcon'
436
419
  import { numberToString } from '../../../helpers/numberConverter'
437
- import RCInfoText from '../../infoText'
420
+
438
421
  const PageContainer = styled.div`
439
422
  position: relative;
440
423
  `
@@ -461,23 +444,16 @@
461
444
  margin-left: 32px;
462
445
  margin-top: 4px;
463
446
  `
464
- const textContainerAttr = { isArchived: Boolean }
465
- const TextContainer = styled('div', textContainerAttr)`
447
+
448
+ const TextContainer = styled.div`
466
449
  display: grid;
467
- color: ${(props) => (props.isArchived ? props.theme.colors.red : 'white')};
468
- `
469
- const InfoTextWrapper = styled.div`
470
- display: flex;
471
- align-items: center;
472
- justify-content: center;
473
- padding-left: 8px;
474
450
  `
451
+
475
452
  const TitleText = styled.div`
476
453
  font-size: 14px;
477
454
  white-space: nowrap;
478
455
  overflow: hidden;
479
456
  text-overflow: ellipsis;
480
- display: flex;
481
457
  `
482
458
 
483
459
  const TitleSubText = styled.div`
@@ -732,8 +708,6 @@
732
708
  export default {
733
709
  name: 'DropdownMenu',
734
710
  components: {
735
- InfoTextWrapper,
736
- RCInfoText,
737
711
  SectionContainer,
738
712
  TitleContainer,
739
713
  IconsContainer,