luna-one 3.1.594 → 3.1.596

package/dist/luna/components/ImageGallery/ImageGalleryDocumentation.mdx

@@ -1,90 +1,90 @@
-#### Block List Item
-
-###### Props -
-
-- `content` **(required)** - object containing cards, with following props
-  - `cards` - array containing objects for generating cards
-    - `eyebrow` - string for generating card eyebrow text
-    - `header` - string for generating card header text
-    - `text` - string for generating card body text
-    - `cardAlignment` - boolean for changing position of card image: image-top or image-bottom options toggled by `false` and `true` respectively
-    - `image` - object for generating card image
-      - `url` - string for generating image source text
-      - `altText` - string for generating image accessibility text
-      - `src` - string source of image
-    - `gatsbyImage` - boolean for use with image, allows use of GatsbyImage component
-    - `textLink` - object for generating card text CTA
-      - `url` - string for generating CTA href or React Router `to`
-      - `text` - string for generating CTA text
-    - `Link` - optional - either a react-router-dom or gatsby-link component
-    - `button` - optional object for use when a button is desired
-      - `text` - string for generating button text
-      - `url` - string for generating CTA href or React Router `to`
-      - `type` - string for assigning CSS class to button
-    - `displayButton` - boolean for when a button is desired (required to display button)
-    - `bgColor` - string used for determining background-color of card - currently only `grey` is available.
-  - `type` **(required)** - required to render the correct type of block list - e.g. `bounded_cards`
-- `motion` - boolean used to indicate whether or not motion should be used
-- `paddingClass` - string containing the container padding class name
-
-###### Example -
-
-```
-const CardImage = "../images/dummy-image.png";
-const content = {
-  type: "bounded_cards",
-  cards: [
-    {
-      image: { src: CardImage, altText: "FPO Image" },
-      eyebrow: "Eyebrow Option",
-      header: "Trimble S9 HP",
-      displayButton: true,
-      button: {
-        url: "/#",
-        text: "Button",
-      },
-      text:
-        "Combines top field technologies with the highest level of accuracy and most advanced engineering features.",
-    },
-    {
-      image: { src: CardImage, altText: "FPO Image" },
-      eyebrow: "Eyebrow Option",
-      header: "Trimble Zephyr 3 for GIS",
-      displayButton: true,
-      button: {
-        url: "/#",
-        text: "Button",
-      },
-    },
-    {
-      image: { src: CardImage, altText: "FPO Image" },
-      eyebrow: "Eyebrow Option",
-      header: "Trimble S5",
-      displayButton: true,
-      button: {
-        url: "/#",
-        text: "Button",
-      },
-      text:
-        "The no nonsense workhorse that works efficiently and dependably while maintaining the highest possible accuracy",
-    },
-    {
-      image: { src: CardImage, altText: "FPO Image" },
-      eyebrow: "Eyebrow Option",
-      header: "Yo I am a title! Woooo",
-      displayButton: true,
-      button: {
-        url: "/#",
-        text: "Button",
-      },
-      text:
-        "Uncompromising performance, range, accuracy and speed.",
-    }
-  ],
-  cardAlignment: true,
-};
-
-return (
-  <ListFeat content={content} motion />
-)
-```
+#### Block List Item
+
+###### Props -
+
+- `content` **(required)** - object containing cards, with following props
+  - `cards` - array containing objects for generating cards
+    - `eyebrow` - string for generating card eyebrow text
+    - `header` - string for generating card header text
+    - `text` - string for generating card body text
+    - `cardAlignment` - boolean for changing position of card image: image-top or image-bottom options toggled by `false` and `true` respectively
+    - `image` - object for generating card image
+      - `url` - string for generating image source text
+      - `altText` - string for generating image accessibility text
+      - `src` - string source of image
+    - `gatsbyImage` - boolean for use with image, allows use of GatsbyImage component
+    - `textLink` - object for generating card text CTA
+      - `url` - string for generating CTA href or React Router `to`
+      - `text` - string for generating CTA text
+    - `Link` - optional - either a react-router-dom or gatsby-link component
+    - `button` - optional object for use when a button is desired
+      - `text` - string for generating button text
+      - `url` - string for generating CTA href or React Router `to`
+      - `type` - string for assigning CSS class to button
+    - `displayButton` - boolean for when a button is desired (required to display button)
+    - `bgColor` - string used for determining background-color of card - currently only `grey` is available.
+  - `type` **(required)** - required to render the correct type of block list - e.g. `bounded_cards`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `paddingClass` - string containing the container padding class name
+
+###### Example -
+
+```
+const CardImage = "../images/dummy-image.png";
+const content = {
+  type: "bounded_cards",
+  cards: [
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Trimble S9 HP",
+      displayButton: true,
+      button: {
+        url: "/#",
+        text: "Button",
+      },
+      text:
+        "Combines top field technologies with the highest level of accuracy and most advanced engineering features.",
+    },
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Trimble Zephyr 3 for GIS",
+      displayButton: true,
+      button: {
+        url: "/#",
+        text: "Button",
+      },
+    },
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Trimble S5",
+      displayButton: true,
+      button: {
+        url: "/#",
+        text: "Button",
+      },
+      text:
+        "The no nonsense workhorse that works efficiently and dependably while maintaining the highest possible accuracy",
+    },
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Yo I am a title! Woooo",
+      displayButton: true,
+      button: {
+        url: "/#",
+        text: "Button",
+      },
+      text:
+        "Uncompromising performance, range, accuracy and speed.",
+    }
+  ],
+  cardAlignment: true,
+};
+
+return (
+  <ListFeat content={content} motion />
+)
+```

package/dist/luna/components/InPageJumpNav/InPageJumpNav.scss

@@ -1,123 +1,123 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-jump-nav {
-  background-color: $trimble-dark-gray;
-  opacity: 0.9;
-  color: $white;
-  overflow: hidden;
-  display: none;
-  font-size: $body-font-size;
-  width: 100%;
-  max-width: 36px;
-  padding: 8px;
-  pointer-events: auto;
-  @media screen and (min-width: $breakpoint-sm) {
-    margin-right: 22px;
-    display: flex;
-  }
-  @media screen and (min-width: $breakpoint-md){
-    margin-right: 0;
-  }
-  @media screen and (min-width: 1400px) {
-    margin-right: -58px;
-  }
-  &:not(.ter-jump-nav--expanded){
-    font-size: 0;
-    cursor: pointer;
-    .ter-jump-nav__nav-link {
-      pointer-events: none;
-    }
-  }
-  &--expanded {
-    max-width: 210px;
-    padding: 16px 20px;
-    .ter-jump-nav__nav-item {
-      padding: 10px 0;
-    }
-    .ter-jump-nav__nav-link {
-      pointer-events: auto;
-      cursor: pointer;
-      color: $white;
-      text-decoration: none;
-    }
-  }
-  &-holder {
-    position: fixed;
-    z-index: 50;
-    display: flex;
-    justify-content: flex-end;
-    pointer-events: none;
-    top: 40vh;
-    right: 0;
-    width: 100%;
-  }
-  * {
-    opacity: 1;
-  }
-  &__heading {
-    font-size: $body-font-size;
-    cursor: pointer;
-    display: grid;
-    grid-template-columns: 20px auto;
-    font-weight: 700;
-  }
-  &__heading-text {
-    padding-left: 10px;
-    display: flex;
-    align-items: center;
-  }
-  &__heading-icon {
-    width: 20px;
-    margin-right: 10px;
-  }
-  &__nav {
-    padding: 0;
-    margin: 0;
-  }
-  &__nav-item {
-    line-height: 1;
-    list-style-type: none;
-    position: relative;
-    padding: 5px 0;
-  }
-  &__link-dot {
-    display: flex;
-    align-items: top;
-    padding-top: 4px;
-    &:before {
-      content: "";
-      display: inline-block;
-      background-color: white;
-      border-radius: 50%;
-      height: 4px;
-      width: 4px;
-      position: relative;
-      margin: 0 auto;
-      left: 0;
-    }
-  }
-  &__link-text {
-    padding-left: 10px;
-  }
-  &__nav-link {
-    text-decoration: none;
-    color: $white;
-    opacity: 0.8;
-    display: grid;
-    grid-template-columns: 20px auto;
-    font-weight: inherit;
-  }
-  &__nav-item--active > .ter-jump-nav__nav-link {
-    opacity: 1;
-    color: $white;
-    text-decoration: none;
-    font-weight: bold;
-    .ter-jump-nav__link-dot:before {
-      transform: scale(1.5);
-    }
-  }
-  .ter-jump-nav__nav-item:not(.ter-jump-nav__heading) > .ter-jump-nav__nav-link:hover,
-  .ter-jump-nav__nav-item:not(.ter-jump-nav__heading) > .ter-jump-nav__nav-link:active {
-    text-decoration: underline;
-  }
+@import "../../../global-styles/terra.scss";
+
+.ter-jump-nav {
+  background-color: $trimble-dark-gray;
+  opacity: 0.9;
+  color: $white;
+  overflow: hidden;
+  display: none;
+  font-size: $body-font-size;
+  width: 100%;
+  max-width: 36px;
+  padding: 8px;
+  pointer-events: auto;
+  @media screen and (min-width: $breakpoint-sm) {
+    margin-right: 22px;
+    display: flex;
+  }
+  @media screen and (min-width: $breakpoint-md){
+    margin-right: 0;
+  }
+  @media screen and (min-width: 1400px) {
+    margin-right: -58px;
+  }
+  &:not(.ter-jump-nav--expanded){
+    font-size: 0;
+    cursor: pointer;
+    .ter-jump-nav__nav-link {
+      pointer-events: none;
+    }
+  }
+  &--expanded {
+    max-width: 210px;
+    padding: 16px 20px;
+    .ter-jump-nav__nav-item {
+      padding: 10px 0;
+    }
+    .ter-jump-nav__nav-link {
+      pointer-events: auto;
+      cursor: pointer;
+      color: $white;
+      text-decoration: none;
+    }
+  }
+  &-holder {
+    position: fixed;
+    z-index: 50;
+    display: flex;
+    justify-content: flex-end;
+    pointer-events: none;
+    top: 40vh;
+    right: 0;
+    width: 100%;
+  }
+  * {
+    opacity: 1;
+  }
+  &__heading {
+    font-size: $body-font-size;
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: 20px auto;
+    font-weight: 700;
+  }
+  &__heading-text {
+    padding-left: 10px;
+    display: flex;
+    align-items: center;
+  }
+  &__heading-icon {
+    width: 20px;
+    margin-right: 10px;
+  }
+  &__nav {
+    padding: 0;
+    margin: 0;
+  }
+  &__nav-item {
+    line-height: 1;
+    list-style-type: none;
+    position: relative;
+    padding: 5px 0;
+  }
+  &__link-dot {
+    display: flex;
+    align-items: top;
+    padding-top: 4px;
+    &:before {
+      content: "";
+      display: inline-block;
+      background-color: white;
+      border-radius: 50%;
+      height: 4px;
+      width: 4px;
+      position: relative;
+      margin: 0 auto;
+      left: 0;
+    }
+  }
+  &__link-text {
+    padding-left: 10px;
+  }
+  &__nav-link {
+    text-decoration: none;
+    color: $white;
+    opacity: 0.8;
+    display: grid;
+    grid-template-columns: 20px auto;
+    font-weight: inherit;
+  }
+  &__nav-item--active > .ter-jump-nav__nav-link {
+    opacity: 1;
+    color: $white;
+    text-decoration: none;
+    font-weight: bold;
+    .ter-jump-nav__link-dot:before {
+      transform: scale(1.5);
+    }
+  }
+  .ter-jump-nav__nav-item:not(.ter-jump-nav__heading) > .ter-jump-nav__nav-link:hover,
+  .ter-jump-nav__nav-item:not(.ter-jump-nav__heading) > .ter-jump-nav__nav-link:active {
+    text-decoration: underline;
+  }
 }

package/dist/luna/components/InPageJumpNav/InPageJumpNavDocumentation.mdx

@@ -1,23 +1,23 @@
-#### In-Page Jump Nav
-
-###### Props -
-
-- `pageSections` - array of objects, each with `title` & `link` as strings to represent the sections on a page.
-
-###### Example -
-
-```
-
-const pageSections = [
-  { title: "Overview", link: "#overview" },
-  { title: "Uses by Industry", link: "#uses" },
-  { title: "Features & Benefits", link: "#features" },
-  { title: "Complete Solutions and Lorem Ipsum", link: "#solutions" },
-  { title: "Articles", link: "#articles" },
-];
-
-
-return (
-	  <InPageJumpNav pageSections={pageSections} />
-);
+#### In-Page Jump Nav
+
+###### Props -
+
+- `pageSections` - array of objects, each with `title` & `link` as strings to represent the sections on a page.
+
+###### Example -
+
+```
+
+const pageSections = [
+  { title: "Overview", link: "#overview" },
+  { title: "Uses by Industry", link: "#uses" },
+  { title: "Features & Benefits", link: "#features" },
+  { title: "Complete Solutions and Lorem Ipsum", link: "#solutions" },
+  { title: "Articles", link: "#articles" },
+];
+
+
+return (
+	  <InPageJumpNav pageSections={pageSections} />
+);
 ```