luna-one 3.1.594 → 3.1.596

package/dist/luna/components/2x2/2x2Documentation.mdx

@@ -1,77 +1,77 @@
-#### 2x2
-
-###### Props -
-
-- `content` **(required)** - An object with the following keys:
-  - `backgroundImages` - An array with zero to four items. Array lengths of 0, 1, and 4 are valid. Arrays with 2 and 3 entries will use the first item only. Each `backgroundImage` item is a `focalPointImage` object. The focal point image must have a `title` and `url`.
-  - `overlappingContent` - A boolean which determines if image content will be overlapped by text content.
-  - `topLeftContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
-  - `topLeftIsImage` - A boolean which determines if the top left content is an image.
-  - `topLeftBackgroundColor` - A string which determines the background color of the top left content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
-  - `topRightContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
-  - `topRightIsImage` - A boolean which determines if the top right content is an image.
-  - `topRightBackgroundColor` - A string which determines the background color of the top right content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
-  - `bottomLeftContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
-  - `bottomLeftIsImage` - A boolean which determines if the bottom left content is an image.
-  - `bottomLeftBackgroundColor` - A string which determines the background color of the bottom left content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
-  - `bottomRightContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
-  - `bottomRightIsImage` - A boolean which determines if the bottom right content is an image.
-  - `bottomRightBackgroundColor` - A string which determines the background color of the bottom right content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
-
-###### Example -
-
-```
-const RichTextContent = () => (
-  <>
-    <p>
-      <strong>This content is fits the container</strong> consectetur adipiscing
-      elit. Integer eleifend risus ultricies dignissim suscipit. Donec vel
-      lacus.
-    </p>
-  </>
-);
-
-
-const contentArray = [
-  {
-    type: "Header",
-    title: "Top Left Header",
-    headline: "This is the headline",
-    eyebrow: "eyebrow",
-    subhead: "This is the subheadline",
-  },
-  {
-    type: "Rich Text",
-    title: "Top Left Right Text",
-    content: <RichTextContent />,
-  },
-];
-
-const FocalPointImage = {
-  focalPointImage: {
-    height: 960,
-    width: 1280,
-    title: "FPO Placeholder",
-    url:
-      "//images.ctfassets.net/citn2sn5tdjr/2aIM2EvXTK5yrpIHrvP5k5/6f7a3669abb2bf2ec39b635a91da90f6/720x720.jpg",
-    x: 480,
-    y: 640,
-  },
-};
-
-const content = {
-  backgroundImages: [{ ...FocalPointImage }],
-  topLeftContent: contentArray,
-  topLeftBackgroundColor: "trimble-blue",
-  topRightContent: contentArray,
-  topRightBackgroundColor: "dark-navy",
-  bottomLeftContent: contentArray,
-  bottomLeftBackgroundColor: "dark-navy",
-  bottomRightContent: contentArray,
-  bottomRightBackgroundColor: "trimble-blue",
-};
-
-return (
-<TwoByTwo content={content} />
-);
-```
+#### 2x2
+
+###### Props -
+
+- `content` **(required)** - An object with the following keys:
+  - `backgroundImages` - An array with zero to four items. Array lengths of 0, 1, and 4 are valid. Arrays with 2 and 3 entries will use the first item only. Each `backgroundImage` item is a `focalPointImage` object. The focal point image must have a `title` and `url`.
+  - `overlappingContent` - A boolean which determines if image content will be overlapped by text content.
+  - `topLeftContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
+  - `topLeftIsImage` - A boolean which determines if the top left content is an image.
+  - `topLeftBackgroundColor` - A string which determines the background color of the top left content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
+  - `topRightContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
+  - `topRightIsImage` - A boolean which determines if the top right content is an image.
+  - `topRightBackgroundColor` - A string which determines the background color of the top right content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
+  - `bottomLeftContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
+  - `bottomLeftIsImage` - A boolean which determines if the bottom left content is an image.
+  - `bottomLeftBackgroundColor` - A string which determines the background color of the bottom left content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
+  - `bottomRightContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
+  - `bottomRightIsImage` - A boolean which determines if the bottom right content is an image.
+  - `bottomRightBackgroundColor` - A string which determines the background color of the bottom right content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
+
+###### Example -
+
+```
+const RichTextContent = () => (
+  <>
+    <p>
+      <strong>This content is fits the container</strong> consectetur adipiscing
+      elit. Integer eleifend risus ultricies dignissim suscipit. Donec vel
+      lacus.
+    </p>
+  </>
+);
+
+
+const contentArray = [
+  {
+    type: "Header",
+    title: "Top Left Header",
+    headline: "This is the headline",
+    eyebrow: "eyebrow",
+    subhead: "This is the subheadline",
+  },
+  {
+    type: "Rich Text",
+    title: "Top Left Right Text",
+    content: <RichTextContent />,
+  },
+];
+
+const FocalPointImage = {
+  focalPointImage: {
+    height: 960,
+    width: 1280,
+    title: "FPO Placeholder",
+    url:
+      "//images.ctfassets.net/citn2sn5tdjr/2aIM2EvXTK5yrpIHrvP5k5/6f7a3669abb2bf2ec39b635a91da90f6/720x720.jpg",
+    x: 480,
+    y: 640,
+  },
+};
+
+const content = {
+  backgroundImages: [{ ...FocalPointImage }],
+  topLeftContent: contentArray,
+  topLeftBackgroundColor: "trimble-blue",
+  topRightContent: contentArray,
+  topRightBackgroundColor: "dark-navy",
+  bottomLeftContent: contentArray,
+  bottomLeftBackgroundColor: "dark-navy",
+  bottomRightContent: contentArray,
+  bottomRightBackgroundColor: "trimble-blue",
+};
+
+return (
+<TwoByTwo content={content} />
+);
+```

package/dist/luna/components/Accordion/Accordion.scss

@@ -1,155 +1,155 @@
-@import "../../../global-styles/terra.scss";
-
-.luna-accordion {
-  @include grid-container;
-
-  grid-template-rows: 1fr;
-
-  @media screen and (max-width: $breakpoint-sm) {
-    grid-template-rows: minmax(min-content, max-content);
-  }
-
-  &__content-wrapper  {
-    grid-row: 1 / span 1;
-    grid-column: 1 / span 16;
-    align-self: start;
-
-    @media screen and (max-width: $breakpoint-xs) {
-      grid-column: 1 / span 16;
-    }
-  }
-
-  &__item {
-    display: flex;
-    flex-direction: column;
-    padding: 24px 0px;
-    .luna-accordion__item-wrapper {
-      max-height: 0;
-      overflow: hidden;
-      transition-property: max-height;
-      transition-duration: 0.5s;
-      transition-timing-function: ease-in-out;
-    }
-    &--open {
-      .luna-accordion__item-wrapper {
-        transition-property: max-height;
-        transition-duration: 0.5s;
-        transition-timing-function: ease-in-out;
-      }
-    }
-
-    &-header {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      cursor: pointer;
-      &-icon {
-        padding-right: 24px;
-
-        &-type {
-          width: 36px !important;
-          height: 36px !important;
-          display: block;
-        }
-      }
-
-      &-text {
-        font-weight: $bold-font-weight;
-        font-size: $body-font-size;
-        line-height: 22px;
-        letter-spacing: 0.01em;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          font-size: $body-font-size-mobile;
-          line-height: 23px;
-        }
-      }
-
-      &-collapse {
-        padding-left: 12px;
-        margin-left: auto;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          padding-left: 10px;
-        }
-
-        &-type {
-          display: block;
-        }
-      }
-    }
-    &-wrapper {
-      overflow: hidden;
-    }
-
-    &-body {
-      margin-top: 8px;
-      padding-left: 60px;
-      padding-right: 32px;
-
-      ul {
-        li {
-          list-style: none;
-          position: relative;
-
-          &:before {
-            content: "\26AC";
-            color: $trimble-blue;
-            font-weight: bold;
-            display: inline-block;
-            width: 1rem;
-            margin-left: -1rem;
-          }
-        }
-      }
-    }
-
-    &-body,
-    &-body > p {
-      font-size: $body-font-size;
-      font-weight: $regular-font-weight;
-      line-height: 22px;
-      letter-spacing: 0.01em;
-
-      @media screen and (max-width: $breakpoint-xs) {
-        font-size: $body-font-size-mobile;
-        line-height: 23px;
-      }
-    }
-
-    &-body--full {
-      padding-left: 0px;
-    }
-  }
-
-  &__item:last-child {
-    border-bottom: none !important;
-  }
-
-  &--extra-padding {
-    padding: 20px;
-  }
-
-  &__bullet-theme {
-    &--white,
-    &--transparent-dark-text,
-    &--concrete-gray {
-      > ul {
-        li:before {
-          color: $trimble-blue;
-        }
-      }
-    }
-
-    &--transparent-light-text,
-    &--dark-navy,
-    &--dark-gray,
-    &--blue {
-      > ul {
-        li:before {
-          color: $white;
-        }
-      }
-    }
-  }
+@import "../../../global-styles/terra.scss";
+
+.luna-accordion {
+  @include grid-container;
+
+  grid-template-rows: 1fr;
+
+  @media screen and (max-width: $breakpoint-sm) {
+    grid-template-rows: minmax(min-content, max-content);
+  }
+
+  &__content-wrapper  {
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 16;
+    align-self: start;
+
+    @media screen and (max-width: $breakpoint-xs) {
+      grid-column: 1 / span 16;
+    }
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    padding: 24px 0px;
+    .luna-accordion__item-wrapper {
+      max-height: 0;
+      overflow: hidden;
+      transition-property: max-height;
+      transition-duration: 0.5s;
+      transition-timing-function: ease-in-out;
+    }
+    &--open {
+      .luna-accordion__item-wrapper {
+        transition-property: max-height;
+        transition-duration: 0.5s;
+        transition-timing-function: ease-in-out;
+      }
+    }
+
+    &-header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      cursor: pointer;
+      &-icon {
+        padding-right: 24px;
+
+        &-type {
+          width: 36px !important;
+          height: 36px !important;
+          display: block;
+        }
+      }
+
+      &-text {
+        font-weight: $bold-font-weight;
+        font-size: $body-font-size;
+        line-height: 22px;
+        letter-spacing: 0.01em;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          font-size: $body-font-size-mobile;
+          line-height: 23px;
+        }
+      }
+
+      &-collapse {
+        padding-left: 12px;
+        margin-left: auto;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          padding-left: 10px;
+        }
+
+        &-type {
+          display: block;
+        }
+      }
+    }
+    &-wrapper {
+      overflow: hidden;
+    }
+
+    &-body {
+      margin-top: 8px;
+      padding-left: 60px;
+      padding-right: 32px;
+
+      ul {
+        li {
+          list-style: none;
+          position: relative;
+
+          &:before {
+            content: "\26AC";
+            color: $trimble-blue;
+            font-weight: bold;
+            display: inline-block;
+            width: 1rem;
+            margin-left: -1rem;
+          }
+        }
+      }
+    }
+
+    &-body,
+    &-body > p {
+      font-size: $body-font-size;
+      font-weight: $regular-font-weight;
+      line-height: 22px;
+      letter-spacing: 0.01em;
+
+      @media screen and (max-width: $breakpoint-xs) {
+        font-size: $body-font-size-mobile;
+        line-height: 23px;
+      }
+    }
+
+    &-body--full {
+      padding-left: 0px;
+    }
+  }
+
+  &__item:last-child {
+    border-bottom: none !important;
+  }
+
+  &--extra-padding {
+    padding: 20px;
+  }
+
+  &__bullet-theme {
+    &--white,
+    &--transparent-dark-text,
+    &--concrete-gray {
+      > ul {
+        li:before {
+          color: $trimble-blue;
+        }
+      }
+    }
+
+    &--transparent-light-text,
+    &--dark-navy,
+    &--dark-gray,
+    &--blue {
+      > ul {
+        li:before {
+          color: $white;
+        }
+      }
+    }
+  }
 }

package/dist/luna/components/Accordion/AccordionDocumentation.mdx

@@ -1,46 +1,46 @@
-#### Accordion
-
-###### Props -
-
-- `items` - array of objects, each with `icon`, `headline` and `body` as strings to represent the icon text items.
-- `theme` - object with `backgroundColor`, `color` and `iconColor` as strings to represent hex value for background color.
-- `disableIcon` - boolean to don't display icon.
-- `paddingClass` - string to generate a custom class to pass into the outermost div of the component.
-
-###### Example -
-
-```
-const theme = {
-  color: "#FFFFFF",
-  backgroundColor: "#0063A3",
-  iconColor: "#FFFFFF",
-};
-
-const items = [
-  {
-    icon: "ico-annotate-48px",
-    headline : "Headline Lorem ipsum dolor sit amet",
-    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec."
-  },
-  {
-    icon: "ico-annotate-48px",
-    headline : "Headline Lorem ipsum dolor sit amet",
-    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec."
-  },
-  {
-    icon: "ico-annotate-48px",
-    headline : "Headline Lorem ipsum dolor sit amet",
-    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec. <ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit congue pellentesque rhoncus, at ac commodo ornare interdum arcu. </li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit congue pellentesque rhoncus, at ac commodo ornare interdum arcu. </li></ul>"
-  }
-];
-
-
-return (
-	  <Accordion
-      items={items}
-      theme={theme}
-      disableIcon={false}
-      paddingClass="custom-class"
-    />
-);
+#### Accordion
+
+###### Props -
+
+- `items` - array of objects, each with `icon`, `headline` and `body` as strings to represent the icon text items.
+- `theme` - object with `backgroundColor`, `color` and `iconColor` as strings to represent hex value for background color.
+- `disableIcon` - boolean to don't display icon.
+- `paddingClass` - string to generate a custom class to pass into the outermost div of the component.
+
+###### Example -
+
+```
+const theme = {
+  color: "#FFFFFF",
+  backgroundColor: "#0063A3",
+  iconColor: "#FFFFFF",
+};
+
+const items = [
+  {
+    icon: "ico-annotate-48px",
+    headline : "Headline Lorem ipsum dolor sit amet",
+    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec."
+  },
+  {
+    icon: "ico-annotate-48px",
+    headline : "Headline Lorem ipsum dolor sit amet",
+    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec."
+  },
+  {
+    icon: "ico-annotate-48px",
+    headline : "Headline Lorem ipsum dolor sit amet",
+    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec. <ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit congue pellentesque rhoncus, at ac commodo ornare interdum arcu. </li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit congue pellentesque rhoncus, at ac commodo ornare interdum arcu. </li></ul>"
+  }
+];
+
+
+return (
+	  <Accordion
+      items={items}
+      theme={theme}
+      disableIcon={false}
+      paddingClass="custom-class"
+    />
+);
 ```