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

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 (3) 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
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.6",
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>