@kiva/kv-components 3.5.2 → 3.6.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 (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +2 -2
  3. package/vue/KvContentfulImg.vue +94 -59
  4. package/vue/stories/KvContentfulImg.stories.js +20 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [3.6.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.5.2...@kiva/kv-components@3.6.0) (2022-09-16)
7
+
8
+
9
+ ### Features
10
+
11
+ * **KvContentfulImg:** add optional caption MARS-243 ([35dfa7a](https://github.com/kiva/kv-ui-elements/commit/35dfa7ac4888dff6ff62b14f71bb1edb4c805717))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [3.5.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.5.1...@kiva/kv-components@3.5.2) (2022-09-15)
7
18
 
8
19
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "3.5.2",
3
+ "version": "3.6.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -68,5 +68,5 @@
68
68
  "optional": true
69
69
  }
70
70
  },
71
- "gitHead": "0c86a3bf05ab8d27e7d48d7c6f9e67e559dc0155"
71
+ "gitHead": "b06545e3231afe7b1267b5e5202ec1c63e0b2c31"
72
72
  }
package/vue/KvContentfulImg.vue CHANGED
@@ -1,71 +1,97 @@
1
1
  <template>
2
- <picture
2
+ <figure
3
3
  v-if="(width || height) && contentfulSrc"
4
4
  class="tw-inline-block"
5
5
  >
6
- <!-- Set of image sources -->
7
- <template v-if="sourceSizes.length > 0">
8
- <!-- browser supports webp -->
9
- <source
10
- v-for="(image, index) in sourceSizes"
11
- :key="'webp-image'+index"
12
- :media="'('+image.media+')'"
13
- type="image/webp"
14
- :width="image.width ? image.width : null"
15
- :height="image.height ? image.height : null"
16
- :srcset="`
17
- ${buildUrl(image, 2)}&fit=${fit}&f=${focus}&fm=webp&q=65 2x,
18
- ${buildUrl(image)}&fit=${fit}&f=${focus}&fm=webp&q=80 1x`"
19
- >
20
- <!-- browser doesn't support webp -->
21
- <source
22
- v-for="(image, index) in sourceSizes"
23
- :key="'fallback-image'+index"
24
- :media="'('+image.media+')'"
25
- :width="image.width ? image.width : null"
26
- :height="image.height ? image.height : null"
27
- :srcset="`
28
- ${buildUrl(image, 2)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=65 2x,
29
- ${buildUrl(image)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=80 1x`"
30
- >
31
- <!-- browser doesn't support picture element -->
32
- <img
33
- class="tw-max-w-full tw-max-h-full"
34
- style="width: inherit; height: inherit; object-fit: inherit;"
35
- :src="`${buildUrl(width, height)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=80`"
36
- :alt="alt"
37
- :loading="loading"
38
- >
39
- </template>
6
+ <picture>
7
+ <!-- Set of image sources -->
8
+ <template v-if="sourceSizes.length > 0">
9
+ <!-- browser supports webp -->
10
+ <source
11
+ v-for="(image, index) in sourceSizes"
12
+ :key="'webp-image'+index"
13
+ :media="'('+image.media+')'"
14
+ type="image/webp"
15
+ :width="image.width ? image.width : null"
16
+ :height="image.height ? image.height : null"
17
+ :srcset="`
18
+ ${buildUrl(image, 2)}&fit=${fit}&f=${focus}&fm=webp&q=65 2x,
19
+ ${buildUrl(image)}&fit=${fit}&f=${focus}&fm=webp&q=80 1x`"
20
+ >
21
+ <!-- browser doesn't support webp -->
22
+ <source
23
+ v-for="(image, index) in sourceSizes"
24
+ :key="'fallback-image'+index"
25
+ :media="'('+image.media+')'"
26
+ :width="image.width ? image.width : null"
27
+ :height="image.height ? image.height : null"
28
+ :srcset="`
29
+ ${buildUrl(image, 2)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=65 2x,
30
+ ${buildUrl(image)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=80 1x`"
31
+ >
32
+ <!-- browser doesn't support picture element -->
33
+ <img
34
+ class="tw-max-w-full tw-max-h-full"
35
+ style="width: inherit; height: inherit; object-fit: inherit;"
36
+ :src="`${buildUrl(width, height)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=80`"
37
+ :alt="caption || alt"
38
+ :loading="loading"
39
+ >
40
+ </template>
40
41
 
41
- <!-- Single image -->
42
- <template v-if="sourceSizes.length === 0">
43
- <!-- browser supports webp -->
44
- <source
45
- type="image/webp"
46
- :srcset="`
47
- ${buildUrl(null, 2)}&fit=${fit}&f=${focus}&fm=webp&q=65 2x,
48
- ${buildUrl()}&fit=${fit}&f=${focus}&fm=webp&q=80 1x`"
42
+ <!-- Single image -->
43
+ <template v-if="sourceSizes.length === 0">
44
+ <!-- browser supports webp -->
45
+ <source
46
+ type="image/webp"
47
+ :srcset="`
48
+ ${buildUrl(null, 2)}&fit=${fit}&f=${focus}&fm=webp&q=65 2x,
49
+ ${buildUrl()}&fit=${fit}&f=${focus}&fm=webp&q=80 1x`"
50
+ >
51
+ <!-- browser doesn't support webp or browser doesn't support picture element -->
52
+ <img
53
+ class="tw-max-w-full tw-max-h-full"
54
+ style="width: inherit; height: inherit; object-fit: inherit;"
55
+ :srcset="`
56
+ ${buildUrl(null, 2)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=65 2x,
57
+ ${buildUrl()}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=80 1x`"
58
+ :src="`${buildUrl()}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=80`"
59
+ :width="width ? width : null"
60
+ :height="height ? height : null"
61
+ :alt="caption || alt"
62
+ :loading="loading"
63
+ >
64
+ </template>
65
+ </picture>
66
+ <figcaption
67
+ v-if="caption"
68
+ class="tw-text-h4 tw-mt-2"
69
+ >
70
+ <span
71
+ class="tw-inline-flex tw-align-text-top"
72
+ aria-hidden="true"
73
+ role="img"
49
74
  >
50
- <!-- browser doesn't support webp or browser doesn't support picture element -->
51
- <img
52
- class="tw-max-w-full tw-max-h-full"
53
- style="width: inherit; height: inherit; object-fit: inherit;"
54
- :srcset="`
55
- ${buildUrl(null, 2)}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=65 2x,
56
- ${buildUrl()}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=80 1x`"
57
- :src="`${buildUrl()}&fit=${fit}&f=${focus}&fm=${fallbackFormat}&q=80`"
58
- :width="width ? width : null"
59
- :height="height ? height : null"
60
- :alt="alt"
61
- :loading="loading"
62
- >
63
- </template>
64
- </picture>
75
+ <svg
76
+ class="tw-h-2 tw-w-2"
77
+ viewBox="0 0 20 20"
78
+ xmlns="http://www.w3.org/2000/svg"
79
+ >
80
+ <!-- eslint-disable max-len -->
81
+ <path
82
+ d="m3.12088 18.7441c12.86212 0 15.87912-14.52631 15.87912-16.99996h-1.1209c-12.85272 0-15.8791 14.51376-15.8791 16.99996z"
83
+ fill="currentColor"
84
+ />
85
+ <!-- eslint-enable max-len -->
86
+ </svg>
87
+ </span>
88
+ {{ caption }}
89
+ </figcaption>
90
+ </figure>
65
91
  </template>
66
92
 
67
93
  <script>
68
- import { toRefs } from 'vue-demi';
94
+ import { computed, toRefs } from 'vue-demi';
69
95
  // Since it's easy for marketing or other to upload massive images to contentful,
70
96
  // in order to be performant respectful of our users data plans, and not damage
71
97
  // our SEO, we shouldn't send the source image directly to our users.
@@ -175,6 +201,7 @@ export default {
175
201
  },
176
202
  setup(props) {
177
203
  const {
204
+ alt,
178
205
  contentfulSrc,
179
206
  width,
180
207
  height,
@@ -197,8 +224,16 @@ export default {
197
224
  return src;
198
225
  };
199
226
 
227
+ const caption = computed(() => {
228
+ if (alt.value && alt.value.charAt(0) === '^') {
229
+ return alt.value.slice(1).trim();
230
+ }
231
+ return '';
232
+ });
233
+
200
234
  return {
201
235
  buildUrl,
236
+ caption,
202
237
  };
203
238
  },
204
239
  };
package/vue/stories/KvContentfulImg.stories.js CHANGED
@@ -51,7 +51,7 @@ export const Default = (args, { argTypes }) => ({
51
51
  :fallback-format="fallbackFormat"
52
52
  :width="width"
53
53
  :height="height"
54
- :alt="alt"
54
+ alt="Descriptive alt text"
55
55
  :loading="loading"
56
56
  :fit="fit"
57
57
  :focus="focus"
@@ -149,3 +149,22 @@ AdaptiveImageSet.args = {
149
149
  ],
150
150
  contentfulSrc: '//images.ctfassets.net/j0p9a6ql0rn7/V0FQ3TmvSVVX5zXCX9l9A/363cf644709b838f2e3478facd0a6959/wrd2021-hero-lg-2x.jpg',
151
151
  };
152
+
153
+ export const WithCaption = (args, { argTypes }) => ({
154
+ props: Object.keys(argTypes),
155
+ components: {
156
+ KvContentfulImg,
157
+ },
158
+ template: `
159
+ <kv-contentful-img
160
+ :contentful-src="contentfulSrc"
161
+ :fallback-format="fallbackFormat"
162
+ :width="width"
163
+ :height="height"
164
+ alt="^ A descriptive caption"
165
+ :loading="loading"
166
+ :fit="fit"
167
+ :focus="focus"
168
+ />
169
+ `,
170
+ });