@worksafevictoria/wcl7.5 1.9.0-beta.5 → 1.9.0-beta.7

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/Containers/Carousel/index.stories.js +4 -3
  3. package/src/components/Containers/Carousel/index.vue +67 -55
  4. package/src/components/Global/AppFooter/index.vue +18 -7
  5. package/src/components/SubComponents/VideoThumbnail/index.vue +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.9.0-beta.5",
3
+ "version": "1.9.0-beta.7",
4
4
  "main": "src/index.js",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/components/Containers/Carousel/index.stories.js CHANGED
@@ -12,7 +12,8 @@ export default {
12
12
  },
13
13
  args: {
14
14
  carouselItems: mockCarouselItems,
15
- storybook: true
15
+ storybook: true,
16
+ isParagraph: true,
16
17
  },
17
18
 
18
19
  }
@@ -22,8 +23,8 @@ const DefaultCarousel = (args) => ({
22
23
  setup() {
23
24
  return { args }
24
25
  },
25
- template: `<div style="width: 50%; height: auto;">
26
- <h2>Carousel Component</h2>
26
+ template: `<div>
27
+ <h2 style="padding-left: 50px; padding-bottom: 20px;">Carousel Component</h2>
27
28
  <carousel-component v-bind="args"></carousel-component>
28
29
  </div>`
29
30
  })
package/src/components/Containers/Carousel/index.vue CHANGED
@@ -2,6 +2,7 @@
2
2
  <div>
3
3
  <b-carousel
4
4
  id="carousel-1"
5
+ :class="{carouselPara: isParagraph}"
5
6
  v-model="slide"
6
7
  interval="0"
7
8
  controls
@@ -47,7 +48,11 @@ props: {
47
48
  storybook: {
48
49
  type: Boolean,
49
50
  default: false,
50
- }
51
+ },
52
+ isParagraph: {
53
+ type: Boolean,
54
+ default: false,
55
+ },
51
56
  },
52
57
  computed: {
53
58
  filteredCarouselItems() {
@@ -102,70 +107,77 @@ methods: {
102
107
  </script>
103
108
 
104
109
  <style lang="scss" scoped>
105
- @import '../../../includes/scss/all';
110
+ @use '../../../includes/scss/all';
106
111
  </style>
107
112
 
108
113
  <style>
109
- .carousel {
110
- position: relative;
111
- padding-bottom: 7rem;
112
- max-width: 540px;
113
- }
114
+ .carousel {
115
+ position: relative;
116
+ padding-bottom: 7rem;
117
+ max-width: 540px;
118
+ }
114
119
 
115
- .carousel-inner {
116
- overflow: visible;
117
- }
120
+ .carousel-inner {
121
+ overflow: visible;
122
+ }
118
123
 
119
- .carousel-indicators {
120
- padding-bottom: 3rem;
121
- float: right;
122
- right: 2% !important;
123
- width: 20%;
124
- justify-content: end;
125
- margin-left: 80%;
126
- margin-right: 0;
127
- }
124
+ .carousel-indicators {
125
+ padding-bottom: 3rem;
126
+ float: right;
127
+ right: 2% !important;
128
+ width: 20%;
129
+ justify-content: end;
130
+ margin-left: 80%;
131
+ margin-right: 0;
132
+ }
128
133
 
129
- .carousel-indicators button {
130
- width: 10px !important;
131
- height: 10px !important;
132
- border-radius: 50% !important;
133
- background-color: black !important;
134
- }
134
+ .carousel-indicators button {
135
+ width: 10px !important;
136
+ height: 10px !important;
137
+ border-radius: 50% !important;
138
+ background-color: black !important;
139
+ }
135
140
 
136
- .carousel-indicators button:focus,
137
- .carousel-indicators button:active {
138
- outline: none !important;
139
- box-shadow: none;
140
- }
141
+ .carousel-indicators button:focus,
142
+ .carousel-indicators button:active {
143
+ outline: none !important;
144
+ box-shadow: none;
145
+ }
141
146
 
142
- .carousel-caption {
143
- color: black;
144
- top: 100%;
145
- left: 0;
146
- right: 20%;
147
- text-align: left;
148
- text-decoration: underline;
149
- }
147
+ .carousel-caption {
148
+ color: black;
149
+ top: 100%;
150
+ left: 0;
151
+ right: 20%;
152
+ text-align: left;
153
+ text-decoration: underline;
154
+ }
150
155
 
151
- .carousel-control-next,
152
- .carousel-control-prev {
153
- bottom: 7rem;
154
- }
156
+ .carousel-control-next,
157
+ .carousel-control-prev {
158
+ bottom: 7rem;
159
+ }
155
160
 
156
- .carousel-control-prev:focus,
157
- .carousel-control-prev:active,
158
- .carousel-control-next:focus,
159
- .carousel-control-next:active {
160
- outline: none !important;
161
- box-shadow: none;
162
- }
161
+ .carousel-control-prev:focus,
162
+ .carousel-control-prev:active,
163
+ .carousel-control-next:focus,
164
+ .carousel-control-next:active {
165
+ outline: none !important;
166
+ box-shadow: none;
167
+ }
163
168
 
164
- .carousel-control-prev-icon,
165
- .carousel-control-next-icon {
166
- height: 50px !important;
167
- width: 50px !important;
168
- outline:none !important;
169
- }
169
+ .carousel-control-prev-icon,
170
+ .carousel-control-next-icon {
171
+ height: 50px !important;
172
+ width: 50px !important;
173
+ outline:none !important;
174
+ }
175
+
176
+ .carouselPara {
177
+ margin-left: auto;
178
+ margin-right: auto;
179
+ width: 75%;
180
+ height: auto;
181
+ }
170
182
 
171
183
  </style>
package/src/components/Global/AppFooter/index.vue CHANGED
@@ -145,18 +145,28 @@
145
145
 
146
146
  <a
147
147
  v-if="menuItem.absolute === menuItem.relative"
148
- :role="!menuItem.absolute ? 'button' : false"
149
- :href="menuItem.absolute"
150
- class="app-footer-menu__title--link dark"
151
- :class="!menuItem.absolute ? 'nolink' : false"
148
+ :role="!menuItem.absolute ? 'button' : null"
149
+ :href="menuItem.absolute || undefined"
150
+ :class="[
151
+ 'app-footer-menu__title--link',
152
+ 'dark',
153
+ { nolink: !menuItem.absolute },
154
+ ]"
155
+ :tabindex="!menuItem.absolute ? 0 : undefined"
152
156
  target="_blank"
153
- :aria-expanded="isMobile ? (menuItem.isOpen ? 'true' : 'false') : false"
157
+ :aria-expanded="
158
+ isMobile && !menuItem.absolute
159
+ ? menuItem.isOpen
160
+ ? 'true'
161
+ : 'false'
162
+ : undefined
163
+ "
154
164
  @click.prevent="handleAbsoluteClick(menuItem)"
155
165
  ><h2>{{ menuItem.title }}</h2>
156
166
  </a>
157
167
  <nuxt-link
158
168
  v-else
159
- :to="menuItem.relative"
169
+ :to="menuItem.title"
160
170
  class="app-footer-menu__title--link dark"
161
171
  >
162
172
  <h2>{{ menuItem.title }}</h2>
@@ -210,10 +220,11 @@
210
220
  >
211
221
  <a
212
222
  :aria-expanded="
213
- isMobile ? (contactMenuIsOpen ? 'true' : 'false') : false
223
+ isMobile ? (contactMenuIsOpen ? 'true' : 'false') : undefined
214
224
  "
215
225
  role="button"
216
226
  class="app-footer-menu__title--link dark nolink"
227
+ tabindex="0"
217
228
  ><h2>Contact</h2></a
218
229
  >
219
230
  <img
package/src/components/SubComponents/VideoThumbnail/index.vue CHANGED
@@ -20,7 +20,6 @@
20
20
  <b-modal
21
21
  :id="`wcl-video-modal-${video.id}`"
22
22
  v-model="showModal"
23
- title="Video modal"
24
23
  scrollable
25
24
  class="wcl-video-modal__modal"
26
25
  no-footer