@telia/teddy 0.7.33 → 0.7.34

package/dist/components/video/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_video_video = require("./video.cjs");
+exports.Video = components_video_video;

package/dist/components/video/index.d.ts

@@ -0,0 +1,2 @@
+export type { VideoProps } from './video';
+export { default as Video } from './video';

package/dist/components/video/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./video.js";
+export {
+  default2 as Video
+};

package/dist/components/video/video.cjs

@@ -0,0 +1,43 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+require("../../assets/sprite.6511e521-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+const video = "_video_e37ft_1";
+const iframeWrapper = "_iframeWrapper_e37ft_5";
+const iframe = "_iframe_e37ft_5";
+const customDetails = "_customDetails_e37ft_24";
+const thumbnail = "_thumbnail_e37ft_51";
+const details = "_details_e37ft_57";
+const icon = "_icon_e37ft_67";
+const styles = {
+  video,
+  iframeWrapper,
+  iframe,
+  customDetails,
+  thumbnail,
+  details,
+  icon
+};
+const Video = ({ className, src, allowFullScreen, img, description, videoTitle, autoplay, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx(img ? styles.withCustomThumbnail : styles.video, className), ...rest, children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.iframeWrapper, children: [
+    img && !autoplay && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.customDetails, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("img", { src: img, alt: "", className: styles.thumbnail }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.details, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { className: styles.icon, name: "play", color: "white" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: styles.title, children: description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        src: src + (autoplay ? "?rel=0&autoplay=1" : ""),
+        className: styles.iframe,
+        allowFullScreen,
+        title: videoTitle
+      }
+    )
+  ] }),
+  !img && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.caption, children: description })
+] });
+module.exports = Video;

package/dist/components/video/video.d.ts

@@ -0,0 +1,12 @@
+export interface VideoProps {
+    allowFullScreen?: boolean;
+    autoplay?: boolean;
+    className?: string;
+    description?: string;
+    img?: string;
+    src?: string;
+    videoTitle?: string;
+    onClick?: () => void;
+}
+declare const Video: ({ className, src, allowFullScreen, img, description, videoTitle, autoplay, ...rest }: VideoProps) => import("react/jsx-runtime").JSX.Element;
+export default Video;

package/dist/components/video/video.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import "../../assets/sprite.6511e521-teddy.svg";
+import { Icon } from "../icon/icon.js";
+const video = "_video_e37ft_1";
+const iframeWrapper = "_iframeWrapper_e37ft_5";
+const iframe = "_iframe_e37ft_5";
+const customDetails = "_customDetails_e37ft_24";
+const thumbnail = "_thumbnail_e37ft_51";
+const details = "_details_e37ft_57";
+const icon = "_icon_e37ft_67";
+const styles = {
+  video,
+  iframeWrapper,
+  iframe,
+  customDetails,
+  thumbnail,
+  details,
+  icon
+};
+const Video = ({ className, src, allowFullScreen, img, description, videoTitle, autoplay, ...rest }) => /* @__PURE__ */ jsxs("div", { className: clsx(img ? styles.withCustomThumbnail : styles.video, className), ...rest, children: [
+  /* @__PURE__ */ jsxs("div", { className: styles.iframeWrapper, children: [
+    img && !autoplay && /* @__PURE__ */ jsxs("div", { className: styles.customDetails, children: [
+      /* @__PURE__ */ jsx("img", { src: img, alt: "", className: styles.thumbnail }),
+      /* @__PURE__ */ jsxs("div", { className: styles.details, children: [
+        /* @__PURE__ */ jsx(Icon, { className: styles.icon, name: "play", color: "white" }),
+        /* @__PURE__ */ jsx("h2", { className: styles.title, children: description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: src + (autoplay ? "?rel=0&autoplay=1" : ""),
+        className: styles.iframe,
+        allowFullScreen,
+        title: videoTitle
+      }
+    )
+  ] }),
+  !img && /* @__PURE__ */ jsx("div", { className: styles.caption, children: description })
+] });
+export {
+  Video as default
+};

package/dist/style.css

@@ -7044,6 +7044,75 @@
   margin: 0;
   font-size: 14px;
   font-weight: 400;
+}._video_e37ft_1 {
+  margin-bottom: 2rem;
+}
+
+._iframeWrapper_e37ft_5 {
+  height: 0;
+  padding-bottom: 56.25%; /* 16:9 */
+  position: relative;
+}
+
+._noMarginBottom_e37ft_11 {
+  margin-bottom: 0;
+}
+
+._iframe_e37ft_5 {
+  border: none;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+._customDetails_e37ft_24 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  z-index: 1;
+}
+._customDetails_e37ft_24._isHidden_e37ft_33 {
+  display: none;
+}
+._customDetails_e37ft_24:hover:after {
+  opacity: 0.65;
+}
+._customDetails_e37ft_24:after {
+  content: "";
+  background-color: var(--teddy-color-functional-black);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.45;
+  transition: opacity 0.25s ease-in;
+}
+
+._thumbnail_e37ft_51 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+._details_e37ft_57 {
+  position: absolute;
+  text-align: center;
+  top: 57%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--teddy-color-functional-white);
+  z-index: 1;
+}
+
+._icon_e37ft_67 {
+  width: 4rem;
+  height: 4rem;
 }:root {
   --teddy-border-radius-xs: 2px;
   --teddy-border-radius-sm: 4px;

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=10"
   },
   "private": false,
-  "version": "0.7.33",
+  "version": "0.7.34",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"