luna-one 3.1.596 → 3.1.598

package/dist/luna/components/NonTimeBasedListEntries/NonTimeBasedListEntriesDocumentation.mdx

@@ -1,89 +1,89 @@
-#### Non Time Based List Entries
-
-###### Props -
-
-- `variant` - string that determines the list entries appearance (either short-description or long-description)
-- `sidebarImage` - object containing the sidebar image information
-  - `src` - string containing the sidebar image source
-  - `alt` - string containing the sidebar image alt text
-- `groupEntries` - boolean determining if short-description entries will be grouped
-- `entries` - array of objects containing list entry information
-  - `eyebrow` - string containing the entry eyebrow text
-  - `header` - string containing the entry header text
-  - `subhead` - string containing the entry subhead text
-  - `link` - link object containing text and url:
-    - `url` - string for link url
-    - `text` - string for link text
-  - `customAriaLabel` - string containing the entry link aria label
-  - `image` - object containing the entry image
-    - `src` - string containing the image source
-    - `alt` - string containing the image alt text
-  - `summary` - HTML DOM string to be used as the entry description
-  - `industryCategory` - string containing the entry industry or category
-  - `groupingCategory` - string containing the entry grouping category (used when groupEntries is set to true)
-  - `role` - string containing the entry role text
-- `paddingClass` - string containing the name of the padding class to be inserted into the wrapper
-
-###### Example -
-
-```
-let sidebarImage = {
-  src: "https://picsum.photos/320/943",
-  alt: "Sidebar Image",
-}
-
-let placeHolderEntry1 = {
-  eyebrow: "Test Eyebrow",
-  header: "Test Header",
-  subhead: "Test Subhead",
-  link: "/",
-  customAriaLabel: "Custom Aria Label",
-  image: {
-    src: "https://picsum.photos/240",
-    alt: "test thumbnail image",
-  },
-  summary: `<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src="/">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>`,
-  industryCategory: "Test Industry",
-  groupingCategory: "Test Category Group 1",
-  role: "test role",
-}
-
-let placeHolderEntry2 = {
-  eyebrow: "Test Eyebrow",
-  header: "Test Header",
-  subhead: "Test Subhead",
-  link: "/",
-  customAriaLabel: "Custom Aria Label",
-  image: {
-    src: "https://picsum.photos/240",
-    alt: "test thumbnail image"
-  },
-  summary: `<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src="/">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>`,
-  industryCategory: "Test Industry",
-  groupingCategory: "Test Category Group 2",
-  role: "test role",
-}
-
-let placeHolderEntry3 = {
-  eyebrow: "Test Eyebrow",
-  header: "Test Header",
-  subhead: "Test Subhead",
-  summary: `<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src="/">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>`,
-  industryCategory: "Test Industry",
-  role: "test role",
-}
-
-let entries = [placeHolderEntry1, placeHolderEntry2, placeHolderEntry3]
-
-
-
-return (
-  <NonTimeBasedListEntries
-    variant="short-description"
-    sidebarImage={sidebarImage}
-    entries={entries}
-    groupEntries={true}
-    paddingClass="test-padding-class"
-  />
-);
-```
+#### Non Time Based List Entries
+
+###### Props -
+
+- `variant` - string that determines the list entries appearance (either short-description or long-description)
+- `sidebarImage` - object containing the sidebar image information
+  - `src` - string containing the sidebar image source
+  - `alt` - string containing the sidebar image alt text
+- `groupEntries` - boolean determining if short-description entries will be grouped
+- `entries` - array of objects containing list entry information
+  - `eyebrow` - string containing the entry eyebrow text
+  - `header` - string containing the entry header text
+  - `subhead` - string containing the entry subhead text
+  - `link` - link object containing text and url:
+    - `url` - string for link url
+    - `text` - string for link text
+  - `customAriaLabel` - string containing the entry link aria label
+  - `image` - object containing the entry image
+    - `src` - string containing the image source
+    - `alt` - string containing the image alt text
+  - `summary` - HTML DOM string to be used as the entry description
+  - `industryCategory` - string containing the entry industry or category
+  - `groupingCategory` - string containing the entry grouping category (used when groupEntries is set to true)
+  - `role` - string containing the entry role text
+- `paddingClass` - string containing the name of the padding class to be inserted into the wrapper
+
+###### Example -
+
+```
+let sidebarImage = {
+  src: "https://picsum.photos/320/943",
+  alt: "Sidebar Image",
+}
+
+let placeHolderEntry1 = {
+  eyebrow: "Test Eyebrow",
+  header: "Test Header",
+  subhead: "Test Subhead",
+  link: "/",
+  customAriaLabel: "Custom Aria Label",
+  image: {
+    src: "https://picsum.photos/240",
+    alt: "test thumbnail image",
+  },
+  summary: `<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src="/">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>`,
+  industryCategory: "Test Industry",
+  groupingCategory: "Test Category Group 1",
+  role: "test role",
+}
+
+let placeHolderEntry2 = {
+  eyebrow: "Test Eyebrow",
+  header: "Test Header",
+  subhead: "Test Subhead",
+  link: "/",
+  customAriaLabel: "Custom Aria Label",
+  image: {
+    src: "https://picsum.photos/240",
+    alt: "test thumbnail image"
+  },
+  summary: `<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src="/">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>`,
+  industryCategory: "Test Industry",
+  groupingCategory: "Test Category Group 2",
+  role: "test role",
+}
+
+let placeHolderEntry3 = {
+  eyebrow: "Test Eyebrow",
+  header: "Test Header",
+  subhead: "Test Subhead",
+  summary: `<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src="/">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>`,
+  industryCategory: "Test Industry",
+  role: "test role",
+}
+
+let entries = [placeHolderEntry1, placeHolderEntry2, placeHolderEntry3]
+
+
+
+return (
+  <NonTimeBasedListEntries
+    variant="short-description"
+    sidebarImage={sidebarImage}
+    entries={entries}
+    groupEntries={true}
+    paddingClass="test-padding-class"
+  />
+);
+```

package/dist/luna/components/OverlayNotice/OverlayNotice.scss

@@ -1,247 +1,247 @@
-@import "../../../global-styles/terra.scss";
-
-.overlay-notice {
-  &__container {
-    z-index: 1000;
-    background-color: #c7e2f6; //Intentional, this color is specific in the design.
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    border-top: 4px solid $trimble-blue;
-    box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.2);
-    -webkit-box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.2);
-    min-height: 48px;
-    max-height: 500px;
-    visibility: visible;
-    transition: max-height 1s ease-out, min-height 1s, visibility 0s,
-      border-top 0s;
-
-    &--closed {
-      max-height: 0px;
-      min-height: 0px;
-      visibility: hidden;
-      border-top: 0px solid $trimble-blue;
-      transition: max-height 0.5s, min-height 0.5s, visibility 0.5s,
-        border-top 0.3s linear 1.1s;
-    }
-  }
-
-  &__grid-container {
-    width: 100%;
-    padding: 0px calc((100% - 1280px) / 2);
-
-    @media screen and (max-width: $breakpoint-sm) {
-      padding: 0;
-    }
-  }
-
-  &__grid {
-    padding: spacing("md") 0;
-    display: grid;
-    grid-template-columns: repeat(16, 1fr);
-
-    @media screen and (max-width: $breakpoint-sm) {
-      padding: spacing("sm") 0;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      padding: spacing("xs") 0;
-    }
-
-    @media screen and (max-width: $breakpoint-xxs) {
-      padding: spacing("xxs") 0;
-    }
-  }
-
-  &__text-content {
-    grid-column: 2 / span 10 !important;
-    padding: 0 spacing("xs") 0 0;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      grid-column: 2 / span 9 !important;
-    }
-    @media screen and (max-width: $breakpoint-xs) {
-      grid-column: 2 / span 11 !important;
-    }
-  }
-
-  &__header {
-    @include header-standard-size;
-    font-size: font-size("xl");
-    line-height: font-size("mega");
-    margin-bottom: 8px;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      font-size: font-size("md");
-      line-height: font-size("xl");
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      font-size: font-size("sm");
-      line-height: font-size("base");
-      margin-bottom: 0px;
-    }
-  }
-
-  &__details {
-    font-weight: 500;
-    p {
-      font-size: 14px;
-      display: inline-block;
-    }
-
-    p + p {
-      display: block;
-    }
-
-    & p:last-child {
-      margin: 0;
-    }
-
-    & p:first-child {
-      @media screen and (max-width: $breakpoint-xs) {
-        margin: spacing("xs") 0 0 0;
-      }
-    }
-
-    a {
-      @include benton-medium();
-      color: $trimble-dark-gray;
-      font-size: $body-font-size;
-      box-shadow: 0px 2px $trimble-gold;
-      cursor: pointer;
-      line-height: 14px;
-      text-decoration: none !important;
-      display: inline-block;
-      margin-left: spacing("micro");
-
-      &:hover {
-        color: $trimble-dark-gray;
-      }
-    }
-  }
-
-  &__cta-button {
-    grid-column: 12 / span 3 !important;
-    margin: auto;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      grid-column: 11 / span 4 !important;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      grid-column: 2 / span 14 !important;
-      grid-row: 2 / span 1;
-      margin: spacing("xs") 0 0 0;
-    }
-
-    a.ter-button {
-      white-space: pre-wrap;
-      height: auto !important;
-      padding: spacing("mini") spacing("xs");
-      line-height: 28px;
-
-      @media screen and (max-width: $breakpoint-xxs) {
-        max-width: 280px;
-        padding: 0 spacing("xxs") !important;
-        line-height: 28px;
-        font-size: $body-font-size-mobile;
-      }
-    }
-
-    &--external {
-      a.ter-button {
-        &:after {
-          margin: 0 -8px 0 4px;
-          width: 28px;
-          height: 24px;
-          content: "";
-          background-image: url("../../images/arrow-diagonal-white.svg");
-          background-repeat: no-repeat;
-          align-self: start;
-
-          @media screen and (max-width: $breakpoint-sm) {
-            margin: 1px -4px 0 4px;
-          }
-        }
-      }
-    }
-  }
-
-  &__button {
-    width: 34px;
-    height: 34px;
-    border-radius: 50%;
-
-    &--close {
-      cursor: pointer;
-      background-color: $white;
-      margin: auto;
-      grid-column: 15 / span 1 !important;
-
-      @media screen and (max-width: $breakpoint-sm) {
-        margin: auto auto auto spacing("xs");
-      }
-
-      @media screen and (max-width: $breakpoint-xs) {
-        margin: 0;
-      }
-
-      &:hover {
-        background-color: $concrete-gray-1;
-      }
-    }
-
-    &--close.tabFocus:focus {
-        outline: 2px solid $sky-blue;
-    }
-
-    &--expand {
-      background-color: $trimble-blue;
-      position: absolute;
-      left: spacing("md");
-      top: -#{spacing("xxs")};
-      visibility: visible;
-      transition: 0s;
-
-      &--closed {
-        visibility: hidden;
-        top: #{spacing("xxs")};
-        transition: visibility 0.3s linear 1s, top 0.7s linear 0.8s;
-      }
-
-      &:hover {
-        background-color: $sky-blue;
-      }
-    }
-    &--expand.tabFocus:focus {
-        outline: 2px solid $sky-blue;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      width: 20px;
-      height: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-    }
-  }
-
-  &__close-button-icon {
-    width: 14px;
-    height: 14px;
-
-    @media screen and (max-width: $breakpoint-xs) {
-      width: 10px;
-      height: 10px;
-    }
-  }
-
-  &__caret-button-icon {
-    width: 10px;
-    height: 10px;
-    transform: rotateZ(-90deg);
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.overlay-notice {
+  &__container {
+    z-index: 1000;
+    background-color: #c7e2f6; //Intentional, this color is specific in the design.
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    border-top: 4px solid $trimble-blue;
+    box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.2);
+    min-height: 48px;
+    max-height: 500px;
+    visibility: visible;
+    transition: max-height 1s ease-out, min-height 1s, visibility 0s,
+      border-top 0s;
+
+    &--closed {
+      max-height: 0px;
+      min-height: 0px;
+      visibility: hidden;
+      border-top: 0px solid $trimble-blue;
+      transition: max-height 0.5s, min-height 0.5s, visibility 0.5s,
+        border-top 0.3s linear 1.1s;
+    }
+  }
+
+  &__grid-container {
+    width: 100%;
+    padding: 0px calc((100% - 1280px) / 2);
+
+    @media screen and (max-width: $breakpoint-sm) {
+      padding: 0;
+    }
+  }
+
+  &__grid {
+    padding: spacing("md") 0;
+    display: grid;
+    grid-template-columns: repeat(16, 1fr);
+
+    @media screen and (max-width: $breakpoint-sm) {
+      padding: spacing("sm") 0;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      padding: spacing("xs") 0;
+    }
+
+    @media screen and (max-width: $breakpoint-xxs) {
+      padding: spacing("xxs") 0;
+    }
+  }
+
+  &__text-content {
+    grid-column: 2 / span 10 !important;
+    padding: 0 spacing("xs") 0 0;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      grid-column: 2 / span 9 !important;
+    }
+    @media screen and (max-width: $breakpoint-xs) {
+      grid-column: 2 / span 11 !important;
+    }
+  }
+
+  &__header {
+    @include header-standard-size;
+    font-size: font-size("xl");
+    line-height: font-size("mega");
+    margin-bottom: 8px;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      font-size: font-size("md");
+      line-height: font-size("xl");
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      font-size: font-size("sm");
+      line-height: font-size("base");
+      margin-bottom: 0px;
+    }
+  }
+
+  &__details {
+    font-weight: 500;
+    p {
+      font-size: 14px;
+      display: inline-block;
+    }
+
+    p + p {
+      display: block;
+    }
+
+    & p:last-child {
+      margin: 0;
+    }
+
+    & p:first-child {
+      @media screen and (max-width: $breakpoint-xs) {
+        margin: spacing("xs") 0 0 0;
+      }
+    }
+
+    a {
+      @include benton-medium();
+      color: $trimble-dark-gray;
+      font-size: $body-font-size;
+      box-shadow: 0px 2px $trimble-gold;
+      cursor: pointer;
+      line-height: 14px;
+      text-decoration: none !important;
+      display: inline-block;
+      margin-left: spacing("micro");
+
+      &:hover {
+        color: $trimble-dark-gray;
+      }
+    }
+  }
+
+  &__cta-button {
+    grid-column: 12 / span 3 !important;
+    margin: auto;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      grid-column: 11 / span 4 !important;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      grid-column: 2 / span 14 !important;
+      grid-row: 2 / span 1;
+      margin: spacing("xs") 0 0 0;
+    }
+
+    a.ter-button {
+      white-space: pre-wrap;
+      height: auto !important;
+      padding: spacing("mini") spacing("xs");
+      line-height: 28px;
+
+      @media screen and (max-width: $breakpoint-xxs) {
+        max-width: 280px;
+        padding: 0 spacing("xxs") !important;
+        line-height: 28px;
+        font-size: $body-font-size-mobile;
+      }
+    }
+
+    &--external {
+      a.ter-button {
+        &:after {
+          margin: 0 -8px 0 4px;
+          width: 28px;
+          height: 24px;
+          content: "";
+          background-image: url("../../images/arrow-diagonal-white.svg");
+          background-repeat: no-repeat;
+          align-self: start;
+
+          @media screen and (max-width: $breakpoint-sm) {
+            margin: 1px -4px 0 4px;
+          }
+        }
+      }
+    }
+  }
+
+  &__button {
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+
+    &--close {
+      cursor: pointer;
+      background-color: $white;
+      margin: auto;
+      grid-column: 15 / span 1 !important;
+
+      @media screen and (max-width: $breakpoint-sm) {
+        margin: auto auto auto spacing("xs");
+      }
+
+      @media screen and (max-width: $breakpoint-xs) {
+        margin: 0;
+      }
+
+      &:hover {
+        background-color: $concrete-gray-1;
+      }
+    }
+
+    &--close.tabFocus:focus {
+        outline: 2px solid $sky-blue;
+    }
+
+    &--expand {
+      background-color: $trimble-blue;
+      position: absolute;
+      left: spacing("md");
+      top: -#{spacing("xxs")};
+      visibility: visible;
+      transition: 0s;
+
+      &--closed {
+        visibility: hidden;
+        top: #{spacing("xxs")};
+        transition: visibility 0.3s linear 1s, top 0.7s linear 0.8s;
+      }
+
+      &:hover {
+        background-color: $sky-blue;
+      }
+    }
+    &--expand.tabFocus:focus {
+        outline: 2px solid $sky-blue;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+  }
+
+  &__close-button-icon {
+    width: 14px;
+    height: 14px;
+
+    @media screen and (max-width: $breakpoint-xs) {
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  &__caret-button-icon {
+    width: 10px;
+    height: 10px;
+    transform: rotateZ(-90deg);
+  }
+}