@empathyco/x-components 3.0.0-alpha.90 → 3.0.0-alpha.91

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.91](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.90...@empathyco/x-components@3.0.0-alpha.91) (2022-05-04)
+
+### Features
+
+- add `alt-text` accessibility
+  ([da5a10a](https://github.com/empathyco/x/commit/da5a10a236aae5fae96943fe0ad54849df15e7f5)),
+  closes [EX-5930](https://searchbroker.atlassian.net/browse/EX-5930)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.90](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.89...@empathyco/x-components@3.0.0-alpha.90) (2022-05-03)
 
 ### Features

package/design-system/full-theme.css

@@ -323,6 +323,35 @@
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
 }
+.x-dropdown--card {
+  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
+  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-left-dropdown-default: var(
+    --x-size-border-radius-top-left-dropdown-card
+  );
+  --x-size-border-radius-top-right-dropdown-default: var(
+    --x-size-border-radius-top-right-dropdown-card
+  );
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-bottom-right-dropdown-card
+  );
+  --x-size-border-radius-bottom-left-dropdown-default: var(
+    --x-size-border-radius-bottom-left-dropdown-card
+  );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-top-dropdown-list-default: var(
+    --x-size-border-width-top-dropdown-list-card
+  );
+  --x-size-border-width-right-dropdown-list-default: var(
+    --x-size-border-width-right-dropdown-list-card
+  );
+  --x-size-border-width-bottom-dropdown-list-default: var(
+    --x-size-border-width-bottom-dropdown-list-card
+  );
+  --x-size-border-width-left-dropdown-list-default: var(
+    --x-size-border-width-left-dropdown-list-card
+  );
+}
 :root {
   --x-size-gap-dropdown-card: var(--x-size-base-03);
   --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
@@ -4136,6 +4165,21 @@
 :root {
   --x-color-text-accent: var(--x-color-base-accent);
 }
+.x-text--bold.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
+}
 .x,
 .x-text {
   font-family: var(--x-font-family-text);
@@ -7522,48 +7566,3 @@
 .x-normal-case {
   text-transform: none;
 }
-
-.x-dropdown--card {
-  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
-  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-left-dropdown-default: var(
-    --x-size-border-radius-top-left-dropdown-card
-  );
-  --x-size-border-radius-top-right-dropdown-default: var(
-    --x-size-border-radius-top-right-dropdown-card
-  );
-  --x-size-border-radius-bottom-right-dropdown-default: var(
-    --x-size-border-radius-bottom-right-dropdown-card
-  );
-  --x-size-border-radius-bottom-left-dropdown-default: var(
-    --x-size-border-radius-bottom-left-dropdown-card
-  );
-  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-top-dropdown-list-default: var(
-    --x-size-border-width-top-dropdown-list-card
-  );
-  --x-size-border-width-right-dropdown-list-default: var(
-    --x-size-border-width-right-dropdown-list-card
-  );
-  --x-size-border-width-bottom-dropdown-list-default: var(
-    --x-size-border-width-bottom-dropdown-list-card
-  );
-  --x-size-border-width-left-dropdown-list-default: var(
-    --x-size-border-width-left-dropdown-list-card
-  );
-}
-.x-text--bold.x-text {
-  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title1 {
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title2 {
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-title3 {
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
-}
-.x-text--bold.x-small {
-  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
-}

package/js/x-modules/search/components/banner.vue.js

@@ -20,7 +20,7 @@ var __vue_render__ = function () {
     [
       _c("img", {
         staticClass: "x-banner__image",
-        attrs: { src: _vm.banner.image, alt: "" },
+        attrs: { src: _vm.banner.image, alt: _vm.banner.title },
       }),
       _vm._v(" "),
       _c("h2", { staticClass: "x-banner__title" }, [
@@ -35,7 +35,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-134380e3_0", { source: ".x-banner {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-banner__image {\n  width: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
+    inject("data-v-3a9082b6_0", { source: ".x-banner {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-banner__image {\n  width: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */

package/js/x-modules/search/components/banner.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"banner.url\" class=\"x-banner\" data-test=\"banner\">\n    <img :src=\"banner.image\" class=\"x-banner__image\" alt=\"\" />\n    <h2 class=\"x-banner__title\">{{ banner.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Banner as BannerModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\n  /**\n   * A banner result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is the first item in the grid or it can be placed in the middle of them\n   * and fill the whole row where appears. It just contains a link to the banner content, an image\n   * and a title.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class Banner extends Vue {\n    /**\n     * The banner data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public banner!: BannerModel;\n\n    /**\n     * Emits the banner click event.\n     *\n     * @internal\n     */\n    protected emitClickEvent(): void {\n      this.$x.emit('UserClickedABanner', this.banner);\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-banner {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n\n    &__image {\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"banner.vue.js","sources":["../../../../../src/x-modules/search/components/banner.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"banner.url\" class=\"x-banner\" data-test=\"banner\">\n    <img :src=\"banner.image\" class=\"x-banner__image\" :alt=\"banner.title\" />\n    <h2 class=\"x-banner__title\">{{ banner.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Banner as BannerModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\n  /**\n   * A banner result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is the first item in the grid or it can be placed in the middle of them\n   * and fill the whole row where appears. It just contains a link to the banner content, an image\n   * and a title.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class Banner extends Vue {\n    /**\n     * The banner data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public banner!: BannerModel;\n\n    /**\n     * Emits the banner click event.\n     *\n     * @internal\n     */\n    protected emitClickEvent(): void {\n      this.$x.emit('UserClickedABanner', this.banner);\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-banner {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n\n    &__image {\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example banned data is passed as a prop.\n\n_Here you can see how the `Banner` component is rendered._\n\n```vue\n<template>\n  <Banner :banner=\"banner\" />\n</template>\n\n<script>\n  import { Banner } from '@empathyco/x-components/search';\n  export default {\n    name: 'BannerDemo',\n    components: {\n      Banner\n    },\n    data() {\n      return {\n        banner: {\n          modelName: 'Banner',\n          id: 'banner-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search/components/promoted.vue.js

@@ -20,7 +20,7 @@ var __vue_render__ = function () {
     [
       _c("img", {
         staticClass: "x-promoted__image",
-        attrs: { src: _vm.promoted.image, alt: "" },
+        attrs: { src: _vm.promoted.image, alt: _vm.promoted.title },
       }),
       _vm._v(" "),
       _c("h2", { staticClass: "x-promoted__title" }, [
@@ -35,7 +35,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-344a5de2_0", { source: ".x-promoted {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-promoted__image {\n  width: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
+    inject("data-v-6786add5_0", { source: ".x-promoted {\n  display: flex;\n  flex-flow: column nowrap;\n  text-decoration: none;\n}\n.x-promoted__image {\n  width: 100%;\n  object-fit: contain;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */

package/js/x-modules/search/components/promoted.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" alt=\"\" />\n    <h2 class=\"x-promoted__title\">{{ promoted.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * A promoted result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is one of the first items in the grid, and has the same shape as a\n   * result. It just contains a link to the promoted content, an image, and a title.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class Promoted extends Vue {\n    /**\n     * The promoted data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public promoted!: PromotedModel;\n\n    /**\n     * Emits the promoted click event.\n     *\n     * @internal\n     */\n    protected emitClickEvent(): void {\n      this.$x.emit('UserClickedAPromoted', this.promoted);\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-promoted {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n\n    &__image {\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"promoted.vue.js","sources":["../../../../../src/x-modules/search/components/promoted.vue"],"sourcesContent":["<template>\n  <a @click=\"emitClickEvent\" :href=\"promoted.url\" class=\"x-promoted\" data-test=\"promoted\">\n    <img :src=\"promoted.image\" class=\"x-promoted__image\" :alt=\"promoted.title\" />\n    <h2 class=\"x-promoted__title\">{{ promoted.title }}</h2>\n  </a>\n</template>\n\n<script lang=\"ts\">\n  import { Promoted as PromotedModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { searchXModule } from '../x-module';\n\n  /**\n   * A promoted result is just an item that has been inserted into the search results to advertise\n   * something. Usually it is one of the first items in the grid, and has the same shape as a\n   * result. It just contains a link to the promoted content, an image, and a title.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(searchXModule)]\n  })\n  export default class Promoted extends Vue {\n    /**\n     * The promoted data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public promoted!: PromotedModel;\n\n    /**\n     * Emits the promoted click event.\n     *\n     * @internal\n     */\n    protected emitClickEvent(): void {\n      this.$x.emit('UserClickedAPromoted', this.promoted);\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-promoted {\n    display: flex;\n    flex-flow: column nowrap;\n    text-decoration: none;\n\n    &__image {\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nIn this example promoted data is passed as a prop.\n\n_Here you can see how the `Promoted` component is rendered._\n\n```vue\n<template>\n  <Promoted :promoted=\"promoted\" />\n</template>\n\n<script>\n  import { Promoted } from '@empathyco/x-components/search';\n\n  export default {\n    name: 'PromotedDemo',\n    components: {\n      Promoted\n    },\n    data() {\n      return {\n        promoted: {\n          modelName: 'Promoted',\n          id: 'promoted-example',\n          url: 'https://my-website.com/summer-shirts',\n          image: 'https://my-website.com/images/summer-shirts.jpg',\n          title: 'Trendy summer shirts'\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.90",
+  "version": "3.0.0-alpha.91",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -125,5 +125,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "6f1d5ff63c861ee3eafca312d815c6635df3f800"
+  "gitHead": "ef73eb4b19269566873d0207fdf611b2c44e1ea5"
 }