luna-one 3.1.594 → 3.1.596

package/dist/luna/components/PullQuote/PullQuoteDocumentation.mdx

@@ -1,60 +1,60 @@
-#### PullQuote
-
-###### Props -
-
-- content **(required)** - object containing quotes, ctas, button
-  - `quote` **(required)** - object consisting of text, source, and sourceTitle strings
-    - `text` **(required)** - string that generates the quote text
-    - `source` **(required)** - string that generates the text of the person who said the thing
-    - `sourceTitle` **(required)** - string that generates the text of the source's job title
-  - `sideImage` - This will be the side image if there is no top image
-    - `alt` **(required)** - string that generates image accessibility text
-    - `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
-  - `topImage` - This is the top image
-    - `alt` **(required)** - string that generates image accessibility text
-    - `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
-  - `cta` - object for generating a CTA below the quote
-    - `url` - string for generating link href
-    - `text` - string for generating CTA text
-    - className -string that represents theme for CTA (or custom className) light themes use `primary--1` and `secondary--1`, dark themes use `primary--2` and `secondary--2`
-  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
-  - `imagePosition` - This determines the side of the side image. Only if there is no top image
-  - `imageWidth` - This determines the width of the image and quote on side image variant
-  - `appearance` - This determines light or dark theme
-- variant **(required)** - This determines the type of variant to use for styling. reference storybook for all styles
-
-###### Example -
-
-```
-const content = {
-  quote: {
-    source: 'Gariatur Nostrud Pariatur',
-    sourceTitle: 'TITLE OR CREDENTIALS FOR THE QUOTEE',
-    text: '"Pull Quote can be aliquip aliqua    aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat"',
-  },
-  cta: {
-    className: 'primary--2',
-    text: 'Call To Action',
-    url: 'https://example.com',},
-  topImage: {},
-  sideImage: {
-    alt: 'Image 400x580',
-    focalPointImage: {
-      height: 580,
-      title: 'Image 400x580',
-      url: '//images.ctfassets.net/citn2sn5tdjr/1PNbZmXXwO7v2iYMY1HUkU/ab464795421712604d7ee08a887e6bcb/400x580.jpg',
-      width: 400,
-      x: 149,
-      y: 254,
-    },
-  },
-  imagePosition: 'Left',
-  imageWidth: '1/4',
-  appearance: 'Dark',
-  theme: { backgroundColor: '#252a2e', color: '#fff' },
-}
-
-return (
-  <PullQuote content={content}    variant="variant1" />
-
-```
+#### PullQuote
+
+###### Props -
+
+- content **(required)** - object containing quotes, ctas, button
+  - `quote` **(required)** - object consisting of text, source, and sourceTitle strings
+    - `text` **(required)** - string that generates the quote text
+    - `source` **(required)** - string that generates the text of the person who said the thing
+    - `sourceTitle` **(required)** - string that generates the text of the source's job title
+  - `sideImage` - This will be the side image if there is no top image
+    - `alt` **(required)** - string that generates image accessibility text
+    - `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
+  - `topImage` - This is the top image
+    - `alt` **(required)** - string that generates image accessibility text
+    - `focalPointImage` - image object for focal point image. Consists of x & y coords along with image url.
+  - `cta` - object for generating a CTA below the quote
+    - `url` - string for generating link href
+    - `text` - string for generating CTA text
+    - className -string that represents theme for CTA (or custom className) light themes use `primary--1` and `secondary--1`, dark themes use `primary--2` and `secondary--2`
+  - `theme` - object with `backgroundColor`, and `color` as strings to represent hex value for background color,
+  - `imagePosition` - This determines the side of the side image. Only if there is no top image
+  - `imageWidth` - This determines the width of the image and quote on side image variant
+  - `appearance` - This determines light or dark theme
+- variant **(required)** - This determines the type of variant to use for styling. reference storybook for all styles
+
+###### Example -
+
+```
+const content = {
+  quote: {
+    source: 'Gariatur Nostrud Pariatur',
+    sourceTitle: 'TITLE OR CREDENTIALS FOR THE QUOTEE',
+    text: '"Pull Quote can be aliquip aliqua    aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat"',
+  },
+  cta: {
+    className: 'primary--2',
+    text: 'Call To Action',
+    url: 'https://example.com',},
+  topImage: {},
+  sideImage: {
+    alt: 'Image 400x580',
+    focalPointImage: {
+      height: 580,
+      title: 'Image 400x580',
+      url: '//images.ctfassets.net/citn2sn5tdjr/1PNbZmXXwO7v2iYMY1HUkU/ab464795421712604d7ee08a887e6bcb/400x580.jpg',
+      width: 400,
+      x: 149,
+      y: 254,
+    },
+  },
+  imagePosition: 'Left',
+  imageWidth: '1/4',
+  appearance: 'Dark',
+  theme: { backgroundColor: '#252a2e', color: '#fff' },
+}
+
+return (
+  <PullQuote content={content}    variant="variant1" />
+
+```

package/dist/luna/components/PullQuote/ico-quote-white.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="15" viewBox="0 0 24 15">
-  <path fill="#f9f9fb" d="M13.0023202,246.643632 C13.4106749,244.91562 14.083522,242.746142 15.0208817,240.135135 C15.9582413,237.524128 16.9187886,235.145773 17.9025522,233 L24,233 C22.7749359,238.070101 21.8375903,242.826811 21.187935,247.27027 L13.3921114,247.27027 L13.0023202,246.643632 Z M0,246.643632 C0.40835471,244.91562 1.08120181,242.746142 2.01856148,240.135135 C2.95592116,237.524128 3.9164684,235.145773 4.90023202,233 L10.9976798,233 C9.77261568,238.070101 8.83527007,242.826811 8.18561485,247.27027 L0.389791183,247.27027 L0,246.643632 Z" transform="translate(0 -233)"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="15" viewBox="0 0 24 15">
+  <path fill="#f9f9fb" d="M13.0023202,246.643632 C13.4106749,244.91562 14.083522,242.746142 15.0208817,240.135135 C15.9582413,237.524128 16.9187886,235.145773 17.9025522,233 L24,233 C22.7749359,238.070101 21.8375903,242.826811 21.187935,247.27027 L13.3921114,247.27027 L13.0023202,246.643632 Z M0,246.643632 C0.40835471,244.91562 1.08120181,242.746142 2.01856148,240.135135 C2.95592116,237.524128 3.9164684,235.145773 4.90023202,233 L10.9976798,233 C9.77261568,238.070101 8.83527007,242.826811 8.18561485,247.27027 L0.389791183,247.27027 L0,246.643632 Z" transform="translate(0 -233)"/>
+</svg>

package/dist/luna/components/PullQuote/ico-quote.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="15" viewBox="0 0 24 15">
-  <path fill="#363545" d="M13.0023202,246.643632 C13.4106749,244.91562 14.083522,242.746142 15.0208817,240.135135 C15.9582413,237.524128 16.9187886,235.145773 17.9025522,233 L24,233 C22.7749359,238.070101 21.8375903,242.826811 21.187935,247.27027 L13.3921114,247.27027 L13.0023202,246.643632 Z M0,246.643632 C0.40835471,244.91562 1.08120181,242.746142 2.01856148,240.135135 C2.95592116,237.524128 3.9164684,235.145773 4.90023202,233 L10.9976798,233 C9.77261568,238.070101 8.83527007,242.826811 8.18561485,247.27027 L0.389791183,247.27027 L0,246.643632 Z" transform="translate(0 -233)"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="15" viewBox="0 0 24 15">
+  <path fill="#363545" d="M13.0023202,246.643632 C13.4106749,244.91562 14.083522,242.746142 15.0208817,240.135135 C15.9582413,237.524128 16.9187886,235.145773 17.9025522,233 L24,233 C22.7749359,238.070101 21.8375903,242.826811 21.187935,247.27027 L13.3921114,247.27027 L13.0023202,246.643632 Z M0,246.643632 C0.40835471,244.91562 1.08120181,242.746142 2.01856148,240.135135 C2.95592116,237.524128 3.9164684,235.145773 4.90023202,233 L10.9976798,233 C9.77261568,238.070101 8.83527007,242.826811 8.18561485,247.27027 L0.389791183,247.27027 L0,246.643632 Z" transform="translate(0 -233)"/>
+</svg>

package/dist/luna/components/RegionCard/RegionCard.js

@@ -1,14 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 require("./RegionCard.scss");
 var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
-var _lodash = require("lodash");
 var RegionCard = function RegionCard(_ref) {
   var region = _ref.region,
     languages = _ref.languages,
@@ -41,7 +41,7 @@ var RegionCard = function RegionCard(_ref) {
   var renderLanguageOptions = function renderLanguageOptions() {
     return languages.map(function (language) {
       return /*#__PURE__*/_react["default"].createElement("li", {
-        id: (0, _lodash.uniqueId)("id-"),
+        id: (0, _react.useId)(),
         tabIndex: mouse ? "" : "0",
         className: "luna-region-card__language ".concat(checkActive(language)),
         onClick: function onClick() {
@@ -56,7 +56,7 @@ var RegionCard = function RegionCard(_ref) {
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "luna-region-card ".concat(active ? "luna-region-card--active" : "luna-region-card--inactive"),
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     tabIndex: mouse ? "" : "0"
   }, /*#__PURE__*/_react["default"].createElement("p", {
     className: "luna-region-card__region"

package/dist/luna/components/RegionCard/RegionCard.scss

@@ -1,86 +1,86 @@
-@import "../../../global-styles/terra.scss";
-
-.luna-region-card {
-  width: 230px;
-
-  // border: solid 2px rgba(0, 0, 0, 0.4);
-  font-size: $eyebrow-font-size;
-  margin: 0 auto 20px;
-
-  &__region {
-    font-size: $eyebrow-font-size;
-    @include benton-medium();
-    margin: 0;
-    height: 30px;
-    line-height: 30px;
-    padding-left: 8px;
-    background: $trimble-blue;
-    color: $concrete-gray-1;
-    border-top: solid $trimble-blue 2px;
-    border-left: solid $trimble-blue 2px;
-    border-right: solid $trimble-blue 2px;
-  }
-
-  &__language {
-    list-style: none;
-    cursor: pointer;
-    padding: 4px 0;
-
-    &:hover {
-      color: $mep-blue-2;
-    }
-  }
-  ul {
-    margin: 0;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    border-bottom: solid $concrete-gray 2px;
-    border-left: solid $concrete-gray 2px;
-    border-right: solid $concrete-gray 2px;
-    background: $concrete-gray;
-  }
-
-  &:hover {
-    ul {
-      border-bottom: solid $trimble-blue 2px;
-      border-left: solid $trimble-blue 2px;
-      border-right: solid $trimble-blue 2px;
-    }
-
-    .luna-region-card__region {
-      // background: $mep-blue-2;
-      border-top: solid $trimble-blue 2px;
-      border-left: solid $trimble-blue 2px;
-      border-right: solid $trimble-blue 2px;
-    }
-  }
-
-  &--inactive {
-    // border: solid 2px rgba(0, 0, 0, 0.2);
-
-    .luna-region-card__region {
-      background: $concrete-gray;
-      border-top: solid $concrete-gray 2px;
-      border-left: solid $concrete-gray 2px;
-      border-right: solid $concrete-gray 2px;
-      color: color("gray-7");
-    }
-
-    .luna-region-card__language {
-      // color: rgba(0, 0, 0, 0.2);
-    }
-  }
-
-  &__language--is-active {
-    &:before {
-      content: "•";
-      font-size: 300%; /* or whatever */
-      line-height: 0px;
-      position: absolute;
-      top: 12px;
-      left: -20px;
-    }
-    color: $trimble-blue;
-    position: relative;
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.luna-region-card {
+  width: 230px;
+
+  // border: solid 2px rgba(0, 0, 0, 0.4);
+  font-size: $eyebrow-font-size;
+  margin: 0 auto 20px;
+
+  &__region {
+    font-size: $eyebrow-font-size;
+    @include benton-medium();
+    margin: 0;
+    height: 30px;
+    line-height: 30px;
+    padding-left: 8px;
+    background: $trimble-blue;
+    color: $concrete-gray-1;
+    border-top: solid $trimble-blue 2px;
+    border-left: solid $trimble-blue 2px;
+    border-right: solid $trimble-blue 2px;
+  }
+
+  &__language {
+    list-style: none;
+    cursor: pointer;
+    padding: 4px 0;
+
+    &:hover {
+      color: $mep-blue-2;
+    }
+  }
+  ul {
+    margin: 0;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    border-bottom: solid $concrete-gray 2px;
+    border-left: solid $concrete-gray 2px;
+    border-right: solid $concrete-gray 2px;
+    background: $concrete-gray;
+  }
+
+  &:hover {
+    ul {
+      border-bottom: solid $trimble-blue 2px;
+      border-left: solid $trimble-blue 2px;
+      border-right: solid $trimble-blue 2px;
+    }
+
+    .luna-region-card__region {
+      // background: $mep-blue-2;
+      border-top: solid $trimble-blue 2px;
+      border-left: solid $trimble-blue 2px;
+      border-right: solid $trimble-blue 2px;
+    }
+  }
+
+  &--inactive {
+    // border: solid 2px rgba(0, 0, 0, 0.2);
+
+    .luna-region-card__region {
+      background: $concrete-gray;
+      border-top: solid $concrete-gray 2px;
+      border-left: solid $concrete-gray 2px;
+      border-right: solid $concrete-gray 2px;
+      color: color("gray-7");
+    }
+
+    .luna-region-card__language {
+      // color: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  &__language--is-active {
+    &:before {
+      content: "•";
+      font-size: 300%; /* or whatever */
+      line-height: 0px;
+      position: absolute;
+      top: 12px;
+      left: -20px;
+    }
+    color: $trimble-blue;
+    position: relative;
+  }
+}

package/dist/luna/components/ResourceGrid/ResourceGrid.scss

@@ -1,35 +1,35 @@
-@import "../../../global-styles/terra.scss";
-.luna-resource-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  row-gap: 45px;
-  grid-gap: 32px;
-  padding: 80px 0;
-  justify-items: center;
-  
-  @media screen and (max-width: $breakpoint-md) {
-    padding: 40px 0 ;
-  }
-
-  .ter-bounded-card {
-    width: 100%;
-    max-width: 350px;
-      &__header {
-        flex: 1;
-      }
-  }
-
-  &__load-more {
-    display: flex;
-    justify-content: center;
-    padding-bottom: 80px;
-  }
-
-  @media screen and (min-width: $breakpoint-xs){
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media screen and (min-width: $breakpoint-sm){
-    grid-template-columns: repeat(3, 1fr);
-  }
+@import "../../../global-styles/terra.scss";
+.luna-resource-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  row-gap: 45px;
+  grid-gap: 32px;
+  padding: 80px 0;
+  justify-items: center;
+  
+  @media screen and (max-width: $breakpoint-md) {
+    padding: 40px 0 ;
+  }
+
+  .ter-bounded-card {
+    width: 100%;
+    max-width: 350px;
+      &__header {
+        flex: 1;
+      }
+  }
+
+  &__load-more {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 80px;
+  }
+
+  @media screen and (min-width: $breakpoint-xs){
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (min-width: $breakpoint-sm){
+    grid-template-columns: repeat(3, 1fr);
+  }
 }

package/dist/luna/components/ResourceGrid/ResourceGridDocumentation.mdx

@@ -1,102 +1,102 @@
-#### Resource Grid
-
-###### Props -
-- `content` **(required)** - object containing content for the selected block type, fields vary based on type - see individual sub-components for details
-
-###### Example -
-
-```
-const CardImage = "../images/dummy-image.png";
-const content = [
-  {
-    image: { src: CardImage, altText: "FPO Image" },
-    eyebrow: "Eyebrow Option",
-    header: "Article title lorem ipsum dolor sit amet.",
-    cardLink: {
-      url: "/resource-center/blog-1",
-      text: "Learn more",
-    },
-  },
-  {
-    image: { src: CardImage, altText: "FPO Image" },
-    eyebrow: "Eyebrow Option",
-    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
-    cardLink: {
-      url: "/resource-center/blog-1",
-      text: "Learn more",
-    },
-  },
-  {
-    image: { src: CardImage, altText: "FPO Image" },
-    eyebrow: "Eyebrow Option",
-    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
-    cardLink: {
-      url: "/resource-center/blog-1",
-      text: "Learn more",
-    },
-  },
-  {
-    image: { src: CardImage, altText: "FPO Image" },
-    eyebrow: "Eyebrow Option",
-    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
-    cardLink: {
-      url: "/resource-center/blog-1",
-      text: "Learn more",
-    },
-  },
-  {
-    image: { src: CardImage, altText: "FPO Image" },
-    eyebrow: "Eyebrow Option",
-    header: "Article title lorem ipsum dolor sit amet.",
-    cardLink: {
-      url: "/resource-center/blog-1",
-      text: "Learn more",
-    },
-  },
-  {
-    image: { src: CardImage, altText: "FPO Image" },
-    eyebrow: "Eyebrow Option",
-    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
-    cardLink: {
-      url: "/resource-center/blog-1",
-      text: "Learn more",
-    },
-  },
-  {
-    image: { src: CardImage, altText: "FPO Image" },
-    eyebrow: "Eyebrow Option",
-    header: "Article title lorem ipsum dolor sit amet.",
-    cardLink: {
-      url: "/resource-center/blog-1",
-      text: "Learn more",
-    },
-  },
-  {
-    image: { src: CardImage, altText: "FPO Image" },
-    eyebrow: "Eyebrow Option",
-    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
-    cardLink: {
-      url: "/resource-center/blog-1",
-      text: "Learn more",
-    },
-  },
-  {
-    image: { src: CardImage, altText: "FPO Image" },
-    eyebrow: "Eyebrow Option",
-    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
-    cardLink: {
-      url: "/resource-center/blog-1",
-      text: "Learn more",
-    },
-  },
-];
-
-export const Default = () => (
-  <div style={{ maxWidth: "1400px", margin: "0 auto" }}>
-    <ResourceGrid
-      content={content}
-    />
-  </div>
-);
-
-```
+#### Resource Grid
+
+###### Props -
+- `content` **(required)** - object containing content for the selected block type, fields vary based on type - see individual sub-components for details
+
+###### Example -
+
+```
+const CardImage = "../images/dummy-image.png";
+const content = [
+  {
+    image: { src: CardImage, altText: "FPO Image" },
+    eyebrow: "Eyebrow Option",
+    header: "Article title lorem ipsum dolor sit amet.",
+    cardLink: {
+      url: "/resource-center/blog-1",
+      text: "Learn more",
+    },
+  },
+  {
+    image: { src: CardImage, altText: "FPO Image" },
+    eyebrow: "Eyebrow Option",
+    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
+    cardLink: {
+      url: "/resource-center/blog-1",
+      text: "Learn more",
+    },
+  },
+  {
+    image: { src: CardImage, altText: "FPO Image" },
+    eyebrow: "Eyebrow Option",
+    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
+    cardLink: {
+      url: "/resource-center/blog-1",
+      text: "Learn more",
+    },
+  },
+  {
+    image: { src: CardImage, altText: "FPO Image" },
+    eyebrow: "Eyebrow Option",
+    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
+    cardLink: {
+      url: "/resource-center/blog-1",
+      text: "Learn more",
+    },
+  },
+  {
+    image: { src: CardImage, altText: "FPO Image" },
+    eyebrow: "Eyebrow Option",
+    header: "Article title lorem ipsum dolor sit amet.",
+    cardLink: {
+      url: "/resource-center/blog-1",
+      text: "Learn more",
+    },
+  },
+  {
+    image: { src: CardImage, altText: "FPO Image" },
+    eyebrow: "Eyebrow Option",
+    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
+    cardLink: {
+      url: "/resource-center/blog-1",
+      text: "Learn more",
+    },
+  },
+  {
+    image: { src: CardImage, altText: "FPO Image" },
+    eyebrow: "Eyebrow Option",
+    header: "Article title lorem ipsum dolor sit amet.",
+    cardLink: {
+      url: "/resource-center/blog-1",
+      text: "Learn more",
+    },
+  },
+  {
+    image: { src: CardImage, altText: "FPO Image" },
+    eyebrow: "Eyebrow Option",
+    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
+    cardLink: {
+      url: "/resource-center/blog-1",
+      text: "Learn more",
+    },
+  },
+  {
+    image: { src: CardImage, altText: "FPO Image" },
+    eyebrow: "Eyebrow Option",
+    header: "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
+    cardLink: {
+      url: "/resource-center/blog-1",
+      text: "Learn more",
+    },
+  },
+];
+
+export const Default = () => (
+  <div style={{ maxWidth: "1400px", margin: "0 auto" }}>
+    <ResourceGrid
+      content={content}
+    />
+  </div>
+);
+
+```