luna-one 3.1.597 → 3.1.599

package/dist/luna/components/IconTextList/IconTextList.scss

@@ -1,125 +1,125 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-icon-text-list {
-  @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: center;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      align-self: flex-start;
-    }
-
-    @media screen and (max-width: $breakpoint-xs) {
-      grid-column: 1 / span 16;
-      align-self: flex-start;
-    }
-  }
-
-  &__item {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 24px;
-    &-icon {
-      padding-right: 12px;
-
-      @media screen and (max-width: $breakpoint-xs) {
-        wpadding-right: 10px;
-      }
-
-      &-type {
-        width: 36px !important;
-        height: 36px !important;
-      }
-    }
-
-    &-text {
-
-      &-headline {
-        @include benton-bold();
-        font-size: $body-font-size;
-        line-height: 22px;
-        letter-spacing: 0.01em;
-        margin-top: 6px;
-        margin-bottom: 8px;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          font-size: $body-font-size-mobile;
-          line-height: 23px;
-        }
-      }
-
-      &-body,
-      &-body > p {
-        font-size: $body-font-size;
-        line-height: 22px;
-        font-weight: 350;
-        letter-spacing: 0.01em;
-
-        @media screen and (max-width: $breakpoint-xs) {
-          font-size: $body-font-size-mobile;
-          line-height: 23px;
-        }
-      }
-
-      &-body {
-        ul {
-          li {
-            list-style: none;
-            position: relative;
-
-            &:before {
-              content: "\26AC";
-              color: $trimble-blue;
-              font-weight: bold;
-              display: inline-block;
-              width: 1rem;
-              margin-left: -1rem;
-            }
-          }
-        }
-      }
-    }
-  }
-  &--extra-padding {
-    padding: 50px;
-    .ter-icon-text-list__item:last-child {
-      margin-bottom: 0;
-      .ter-icon-text-list__item-text-body > *:last-child {
-        // prevents excessive spacing when component is nested and has extra-padding class
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  &__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";
+
+.ter-icon-text-list {
+  @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: center;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      align-self: flex-start;
+    }
+
+    @media screen and (max-width: $breakpoint-xs) {
+      grid-column: 1 / span 16;
+      align-self: flex-start;
+    }
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 24px;
+    &-icon {
+      padding-right: 12px;
+
+      @media screen and (max-width: $breakpoint-xs) {
+        wpadding-right: 10px;
+      }
+
+      &-type {
+        width: 36px !important;
+        height: 36px !important;
+      }
+    }
+
+    &-text {
+
+      &-headline {
+        @include benton-bold();
+        font-size: $body-font-size;
+        line-height: 22px;
+        letter-spacing: 0.01em;
+        margin-top: 6px;
+        margin-bottom: 8px;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          font-size: $body-font-size-mobile;
+          line-height: 23px;
+        }
+      }
+
+      &-body,
+      &-body > p {
+        font-size: $body-font-size;
+        line-height: 22px;
+        font-weight: 350;
+        letter-spacing: 0.01em;
+
+        @media screen and (max-width: $breakpoint-xs) {
+          font-size: $body-font-size-mobile;
+          line-height: 23px;
+        }
+      }
+
+      &-body {
+        ul {
+          li {
+            list-style: none;
+            position: relative;
+
+            &:before {
+              content: "\26AC";
+              color: $trimble-blue;
+              font-weight: bold;
+              display: inline-block;
+              width: 1rem;
+              margin-left: -1rem;
+            }
+          }
+        }
+      }
+    }
+  }
+  &--extra-padding {
+    padding: 50px;
+    .ter-icon-text-list__item:last-child {
+      margin-bottom: 0;
+      .ter-icon-text-list__item-text-body > *:last-child {
+        // prevents excessive spacing when component is nested and has extra-padding class
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__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/IconTextList/IconTextListDocumentation.mdx

@@ -1,46 +1,46 @@
-#### Icon Text List
-
-###### 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 (
-	  <IconTextList
-      items={items}
-      theme={theme}
-      disableIcon={false}
-      paddingClass="custom-class"
-    />
-);
+#### Icon Text List
+
+###### 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 (
+	  <IconTextList
+      items={items}
+      theme={theme}
+      disableIcon={false}
+      paddingClass="custom-class"
+    />
+);
 ```