@salesforcedevs/dx-components 0.37.0 → 0.41.0

package/lwc.config.json

@@ -79,6 +79,7 @@
         "dx/typeBadgeGroup",
         "dx/toc",
         "dx/prismjs",
+        "dx/vimeoPlayer",
         "helpers/animations",
         "helpers/card",
         "helpers/code",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.37.0",
+    "version": "0.41.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -13,6 +13,7 @@
         "@coveo/headless": "^1.32.0",
         "@popperjs/core": "2.9.1",
         "@sfdocs-internal/wires": "^0.6.3",
+        "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
         "coveo-search-ui": "^2.10082.5",
         "debounce": "^1.2.0",
@@ -24,7 +25,8 @@
     "devDependencies": {
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
-        "@types/lodash.get": "^4.4.6"
+        "@types/lodash.get": "^4.4.6",
+        "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "afae7d1e2e986271f9f496635b39ab5f3c193b5e"
+    "gitHead": "363477b8997dcd990c2d668b03ee0142334d7815"
 }

package/src/modules/dx/hr/hr.css

@@ -13,6 +13,7 @@ h2 {
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-blue-vibrant-20);
+    text-transform: uppercase;
     letter-spacing: 0;
     line-height: 18px;
 }

package/src/modules/dx/vimeoPlayer/vimeoPlayer.css

@@ -0,0 +1 @@
+@import "helpers/reset";

package/src/modules/dx/vimeoPlayer/vimeoPlayer.html

@@ -0,0 +1,3 @@
+<template>
+    <div class="video-container"></div>
+</template>

package/src/modules/dx/vimeoPlayer/vimeoPlayer.ts

@@ -0,0 +1,31 @@
+import { LightningElement, api } from "lwc";
+import Player from "@vimeo/player";
+import { Options, Player as PlayerType } from "vimeo__player";
+
+export default class VimeoPlayer extends LightningElement {
+    @api videoId!: number;
+    @api
+    get options() {
+        return this._options;
+    }
+    set options(value: any) {
+        this._options = JSON.parse(value);
+    }
+
+    private player!: PlayerType;
+    private _options: Options = {
+        responsive: true,
+        title: false
+    };
+
+    renderedCallback(): void {
+        const videoContainer = this.template.querySelector(
+            ".video-container"
+        ) as HTMLElement;
+
+        this.player = new Player(videoContainer, {
+            id: this.videoId,
+            ...this.options
+        });
+    }
+}

package/src/modules/helpers/text/text.css

@@ -172,6 +172,16 @@
     text-transform: uppercase;
 }
 
+.dx-text-label-4 {
+    color: var(--dx-g-text-label-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    font-weight: var(--dx-g-font-demi);
+    letter-spacing: 0.5%;
+    line-height: 20px;
+    text-transform: uppercase;
+}
+
 .dx-text-form-error-message {
     font-family: var(--dx-g-font-sans);
     color: var(--dx-g-red-vibrant-50);