luna-one 3.1.596 → 3.1.598

package/dist/luna/components/Video/Video.scss

@@ -1,210 +1,210 @@
-@import "../../../global-styles/terra.scss";
-
-.videoContainer {
-  width: 100%;
-  &--deployed {
-    z-index: 20;
-  }
-    #video-modal:focus-within {
-      outline: none;
-    }
-
-  .luna-super-hero {
-
-    &__thumbnail {
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      margin: auto;
-      -webkit-transition: 0.2s;
-      -o-transition: 0.2s;
-      transition: 0.2s;
-  
-      &--is-hovering {
-        -webkit-transform: scale(1.03);
-        transform: scale(1.03);
-        cursor: pointer;
-      }
-  
-      @media screen and (max-width: $breakpoint-sm) {
-        padding: 0;
-      }
-  
-      &-container {
-        -webkit-box-flex: 7;
-        flex: 7;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        @media screen and (max-width: $breakpoint-sm) {
-          max-width: 100vw;
-        }
-      }
-    }
-  
-    &__play-btn {
-      height: 72px;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      margin: auto;
-    }
-  
-    &__play-btn:hover {
-      -webkit-transform: scale(1.2);
-      transform: scale(1.2);
-      cursor: pointer;
-    }
-  
-    &__video-wrapper {
-      position: relative;
-      bottom: 55px;
-      -webkit-transition: 0.3s;
-      -o-transition: 0.3s;
-      transistion: 0.3s;
-      -webkit-transform: translateY(50px);
-      transform: translateY(50px);
-  
-      &--default {
-        padding-bottom: 56.25%;
-        padding-top: 25px;
-        height: 0;
-      }
-  
-      &--is-deployed {
-        -webkit-transform: translateY(0);
-        transform: translateY(0);
-      }
-  
-      iframe {
-        position: absolute;
-        top: -55px;
-        bottom: 0px;
-        left: 0;
-        right: 0;
-        max-width: 50%;
-        max-height: 50%;
-        margin: 100px auto 0;
-  
-        @media screen and (max-width: $breakpoint-lg) {
-          max-width: 1200px;
-          max-height: 675px;
-        }
-      }
-    }
-  
-    &__video-close-wrapper {
-      cursor: pointer;
-      height: 100px;
-      display: flex;
-      justify-content: flex-end;
-    }
-  
-    &__close-button {
-      margin: 20px 50px 12px 50px;
-  
-      @media screen and (max-width: 1300px) {
-        margin: 20px 40px 0px 0px;
-      }
-    }
-  
-    &__modal {
-      overflow: scroll;
-      position: fixed;
-      background: rgba(0, 0, 0, 0.7);
-      z-index: 100;
-      top: 0;
-      left: 0;
-      -webkit-transition: 0.3s;
-      -o-transition: 0.3s;
-      transition: 0.3s;
-      opacity: 0;
-      -webkit-animation: fade-in 0.5s linear;
-      animation: fade-in 0.5s linear;
-      height: 100%;
-      width: 100%;
-      scrollbar-width: none;
-  
-      &--is-deployed {
-        opacity: 1;
-        visibility: visible;
-      }
-    }
-  }
-  
-  .luna-super-hero__modal::-webkit-scrollbar {
-    display: none;
-  }
-
-  .luna-super-hero__transcript-title {
-    position: fixed;
-    padding: 0 8px 8px;
-    background-color: rgba(0, 0, 0, 0.7);
-    z-index: 100;
-    cursor: pointer;
-    color: $white;
-    padding: 4px 15px;
-  }
-
-  .luna-super-hero__transcript-body {
-    position: relative;
-    top: 40px;
-    padding: 10px 15px;
-    min-height: 300px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: $white;
-  }
-
-  .luna-super-hero__transcript-wrapper {
-    position: relative;
-    top: calc(100vw / 3.3);
-    max-width: 1200px;
-    margin: 0 auto;
-    scrollbar-width: none;
-
-    &--true {
-      top: calc(100vw / -5) !important;
-
-      @media screen and (max-width: $breakpoint-lg) and (min-height: $breakpoint-lg) {
-        top: 0px !important;
-      }
-
-      @media screen and (min-height: $breakpoint-md) and (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) {
-        top: -10px !important;
-      }
-
-      @media screen and (max-width: $breakpoint-lg) and (max-height: $breakpoint-md) {
-        margin-top: 100px;
-      }
-
-      @media screen and (max-width: 1600px) and (max-height: $breakpoint-md) {
-        margin-top: 200px;
-      }
-
-      @media screen and (max-width: $breakpoint-md) and (max-height: $breakpoint-md) {
-        max-height: 200px !important;
-      }
-    }
-
-    @media screen and (max-height: $breakpoint-sm) and (min-width: $breakpoint-sm) {
-      max-height: 200px;
-    }
-
-    @media screen and (max-width: $breakpoint-lg) {
-      top: 710px;
-    }
-
-    @media screen and (max-width: $breakpoint-sm) {
-      top: calc(100vw / 1.5);
-    }
-  }
-
-  .luna-super-hero__transcript-wrapper::-webkit-scrollbar {
-    display: none;
-  }
-
+@import "../../../global-styles/terra.scss";
+
+.videoContainer {
+  width: 100%;
+  &--deployed {
+    z-index: 20;
+  }
+    #video-modal:focus-within {
+      outline: none;
+    }
+
+  .luna-super-hero {
+
+    &__thumbnail {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      margin: auto;
+      -webkit-transition: 0.2s;
+      -o-transition: 0.2s;
+      transition: 0.2s;
+  
+      &--is-hovering {
+        -webkit-transform: scale(1.03);
+        transform: scale(1.03);
+        cursor: pointer;
+      }
+  
+      @media screen and (max-width: $breakpoint-sm) {
+        padding: 0;
+      }
+  
+      &-container {
+        -webkit-box-flex: 7;
+        flex: 7;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        @media screen and (max-width: $breakpoint-sm) {
+          max-width: 100vw;
+        }
+      }
+    }
+  
+    &__play-btn {
+      height: 72px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
+  
+    &__play-btn:hover {
+      -webkit-transform: scale(1.2);
+      transform: scale(1.2);
+      cursor: pointer;
+    }
+  
+    &__video-wrapper {
+      position: relative;
+      bottom: 55px;
+      -webkit-transition: 0.3s;
+      -o-transition: 0.3s;
+      transistion: 0.3s;
+      -webkit-transform: translateY(50px);
+      transform: translateY(50px);
+  
+      &--default {
+        padding-bottom: 56.25%;
+        padding-top: 25px;
+        height: 0;
+      }
+  
+      &--is-deployed {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+      }
+  
+      iframe {
+        position: absolute;
+        top: -55px;
+        bottom: 0px;
+        left: 0;
+        right: 0;
+        max-width: 50%;
+        max-height: 50%;
+        margin: 100px auto 0;
+  
+        @media screen and (max-width: $breakpoint-lg) {
+          max-width: 1200px;
+          max-height: 675px;
+        }
+      }
+    }
+  
+    &__video-close-wrapper {
+      cursor: pointer;
+      height: 100px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  
+    &__close-button {
+      margin: 20px 50px 12px 50px;
+  
+      @media screen and (max-width: 1300px) {
+        margin: 20px 40px 0px 0px;
+      }
+    }
+  
+    &__modal {
+      overflow: scroll;
+      position: fixed;
+      background: rgba(0, 0, 0, 0.7);
+      z-index: 100;
+      top: 0;
+      left: 0;
+      -webkit-transition: 0.3s;
+      -o-transition: 0.3s;
+      transition: 0.3s;
+      opacity: 0;
+      -webkit-animation: fade-in 0.5s linear;
+      animation: fade-in 0.5s linear;
+      height: 100%;
+      width: 100%;
+      scrollbar-width: none;
+  
+      &--is-deployed {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+  
+  .luna-super-hero__modal::-webkit-scrollbar {
+    display: none;
+  }
+
+  .luna-super-hero__transcript-title {
+    position: fixed;
+    padding: 0 8px 8px;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 100;
+    cursor: pointer;
+    color: $white;
+    padding: 4px 15px;
+  }
+
+  .luna-super-hero__transcript-body {
+    position: relative;
+    top: 40px;
+    padding: 10px 15px;
+    min-height: 300px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: $white;
+  }
+
+  .luna-super-hero__transcript-wrapper {
+    position: relative;
+    top: calc(100vw / 3.3);
+    max-width: 1200px;
+    margin: 0 auto;
+    scrollbar-width: none;
+
+    &--true {
+      top: calc(100vw / -5) !important;
+
+      @media screen and (max-width: $breakpoint-lg) and (min-height: $breakpoint-lg) {
+        top: 0px !important;
+      }
+
+      @media screen and (min-height: $breakpoint-md) and (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) {
+        top: -10px !important;
+      }
+
+      @media screen and (max-width: $breakpoint-lg) and (max-height: $breakpoint-md) {
+        margin-top: 100px;
+      }
+
+      @media screen and (max-width: 1600px) and (max-height: $breakpoint-md) {
+        margin-top: 200px;
+      }
+
+      @media screen and (max-width: $breakpoint-md) and (max-height: $breakpoint-md) {
+        max-height: 200px !important;
+      }
+    }
+
+    @media screen and (max-height: $breakpoint-sm) and (min-width: $breakpoint-sm) {
+      max-height: 200px;
+    }
+
+    @media screen and (max-width: $breakpoint-lg) {
+      top: 710px;
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+      top: calc(100vw / 1.5);
+    }
+  }
+
+  .luna-super-hero__transcript-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+
 }

package/dist/luna/components/Video/VideoDocumentation.mdx

@@ -1,56 +1,56 @@
-#### Videoo
-
-###### Props -
-
-- `content` **(required)** - object containing all video information
-  - `image` - object with `src` and `alt` as keys with strings as values.
-  - `video` - object for rendering the video embed
-    - `url` - string that points to the video source on YouTube or Vimeo
-    - `uuid` - string used for rendering Vidyard video embeds
-    - `vidyard` - boolean for indicating that a Vidyard component should be rendered
-  - `variant` - string to indicate page layout. This defaults to "variant_1" unless video props are present
-    - `variant_1` - image 3/4 of page and 1/4 text
-    - `variant_2` - image 1/2 of page and 1/2 text
-    - `variant_3` - image 2/3 of page and 1/3 text
-    - `variant_4` - image size 555x555 and 1/2 text
-    - `variant_6` - full width image and text (either top or bottom)
-    - `variant_7` - video and text
-
-###### Example -
-
-```
-const video = {
-  url: "https://www.youtube.com/embed/UY7r0juBF8Y",
-  allowFullScreen: true,
-  uuid: "UrtwArRETP23TP9yGgCEd6",
-};
-
-const vidyardVideo = {
-  url: null,
-  allowFullScreen: true,
-  uuid: "ELv5BCNfZhgji83ocGbTV1",
-  vidyard: true,
-};
-
-const thumbnail = {
-  src: "https://fpoimg.com/720x450",
-  alt: "fpo",
-};
-
-const videoContent = {
-  transcript: "View Transcript",
-  closeTranscript: "Hide Transcript",
-  transcriptText:
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-  video,
-  thumbnail,
-  variant: "variant_7",
-};
-
-return (
-  <>
-    <VideoComponent content={videoContent} />
-    <VideoComponent content={vidyardVideoContent} />
-  </>
-);
-```
+#### Videoo
+
+###### Props -
+
+- `content` **(required)** - object containing all video information
+  - `image` - object with `src` and `alt` as keys with strings as values.
+  - `video` - object for rendering the video embed
+    - `url` - string that points to the video source on YouTube or Vimeo
+    - `uuid` - string used for rendering Vidyard video embeds
+    - `vidyard` - boolean for indicating that a Vidyard component should be rendered
+  - `variant` - string to indicate page layout. This defaults to "variant_1" unless video props are present
+    - `variant_1` - image 3/4 of page and 1/4 text
+    - `variant_2` - image 1/2 of page and 1/2 text
+    - `variant_3` - image 2/3 of page and 1/3 text
+    - `variant_4` - image size 555x555 and 1/2 text
+    - `variant_6` - full width image and text (either top or bottom)
+    - `variant_7` - video and text
+
+###### Example -
+
+```
+const video = {
+  url: "https://www.youtube.com/embed/UY7r0juBF8Y",
+  allowFullScreen: true,
+  uuid: "UrtwArRETP23TP9yGgCEd6",
+};
+
+const vidyardVideo = {
+  url: null,
+  allowFullScreen: true,
+  uuid: "ELv5BCNfZhgji83ocGbTV1",
+  vidyard: true,
+};
+
+const thumbnail = {
+  src: "https://fpoimg.com/720x450",
+  alt: "fpo",
+};
+
+const videoContent = {
+  transcript: "View Transcript",
+  closeTranscript: "Hide Transcript",
+  transcriptText:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  video,
+  thumbnail,
+  variant: "variant_7",
+};
+
+return (
+  <>
+    <VideoComponent content={videoContent} />
+    <VideoComponent content={vidyardVideoContent} />
+  </>
+);
+```

package/dist/luna/components/VidyardModal/VidyardModal.scss

@@ -1,34 +1,34 @@
-@import "../../../global-styles/terra.scss";
-
-.luna-vidyard-modal {
-  display: flex;
-  align-items: center;
-
-  .vidyard-player-embed {
-
-    visibility: hidden;
-  }
-
-  .vidyard-player-container {
-
-    animation: fadein 2000 linear;
-    animation-delay: 1000;
-
-    iframe {
-      @media screen and (max-width: $breakpoint-lg) {
-      margin: 0 auto !important;
-
-      }
-    }
-  }
-}
-
-@keyframes fadein {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.luna-vidyard-modal {
+  display: flex;
+  align-items: center;
+
+  .vidyard-player-embed {
+
+    visibility: hidden;
+  }
+
+  .vidyard-player-container {
+
+    animation: fadein 2000 linear;
+    animation-delay: 1000;
+
+    iframe {
+      @media screen and (max-width: $breakpoint-lg) {
+      margin: 0 auto !important;
+
+      }
+    }
+  }
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}