luna-one 3.1.593 → 3.1.594

package/dist/luna/{featurettes → 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/Accordion.stories.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TransparentWithLightText = exports.TransparentWithDarkText = exports.Default = exports.DarkNavyThemeWithoutIcon = exports.DarkGrayThemeWithPadding = exports.ConcreteGrayTheme = exports.BlueTheme = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+var _AccordionDocumentation = _interopRequireDefault(require("./AccordionDocumentation.mdx"));
+var _themes = require("../../utils/themes");
+var 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>"
+}];
+var _default = {
+  component: _Accordion["default"],
+  title: "MXP Components/Accordion ",
+  parameters: {
+    docs: {
+      page: _AccordionDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items
+  });
+};
+exports.Default = Default;
+var ConcreteGrayTheme = function ConcreteGrayTheme() {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["concreteGray"]
+  });
+};
+exports.ConcreteGrayTheme = ConcreteGrayTheme;
+var BlueTheme = function BlueTheme() {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["blue"]
+  });
+};
+exports.BlueTheme = BlueTheme;
+var DarkNavyThemeWithoutIcon = function DarkNavyThemeWithoutIcon() {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["darkNavy"],
+    disableIcon: true
+  });
+};
+exports.DarkNavyThemeWithoutIcon = DarkNavyThemeWithoutIcon;
+var TransparentWithLightText = function TransparentWithLightText() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: "relative",
+      backgroundImage: "url('https://via.placeholder.com/1920x1080/FF0000/000000')",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["transparentLightText"]
+  }));
+};
+exports.TransparentWithLightText = TransparentWithLightText;
+var TransparentWithDarkText = function TransparentWithDarkText() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: "relative",
+      backgroundImage: "url('https://via.placeholder.com/1920x1080/A6FFFF/FFFFFF')",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["transparentDarkText"]
+  }));
+};
+exports.TransparentWithDarkText = TransparentWithDarkText;
+var DarkGrayThemeWithPadding = function DarkGrayThemeWithPadding() {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["darkGray"],
+    paddingClass: "luna-accordion--extra-padding"
+  });
+};
+exports.DarkGrayThemeWithPadding = DarkGrayThemeWithPadding;

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

@@ -0,0 +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"
+    />
+);
+```

package/dist/luna/components/AdminCategoryData/AdminCategoryData.scss

@@ -1,81 +1,81 @@
-@import "../../../global-styles/terra.scss";
-
-.luna-admin-category-data {
-  margin-bottom: 32px;
-  p {
-    font-size: $body-font-size;
-    padding: 0 0 0 6px;
-    margin: 0;
-  }
-
-  &__name {
-    background-color: $concrete-gray;
-    margin: 0;
-    padding: 6px;
-  }
-
-  &__industry {
-    padding-top: 6px !important;
-    span {
-      // font-weight: 800;
-    }
-  }
-
-  &__regions,
-  &__translations {
-    padding-left: 6px;
-  }
-
-  &__regions {
-    li {
-      padding-top: 6px;
-    }
-  }
-
-  &__region-wrapper {
-    display: flex;
-    padding-top: 6px;
-  }
-
-  &__region-list {
-    display: inline-flex;
-    font-size: $body-font-size;
-    margin: 0;
-
-    &-item {
-      list-style: none;
-
-      &--add-space {
-        &::after {
-          content: ",";
-          padding-right: 4px;
-        }
-      }
-    }
-  }
-}
-
-.bold-me-pls {
-  @include benton-medium();
-}
-
-.luna-category-translation-data {
-  background: $concrete-gray;
-  color: $asphalt-gray;
-  padding: 16px;
-  margin: 8px;
-  display: grid;
-  grid-template-columns: 120px 1fr;
-  align-items: center;
-  a {
-    color: $asphalt-gray !important;
-  }
-
-  img {
-    box-sizing: border-box;
-    // width: 100%;
-    // margin: 0 16px;
-    padding: 16px 16px 16px 0;
-    width: 100%;
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.luna-admin-category-data {
+  margin-bottom: 32px;
+  p {
+    font-size: $body-font-size;
+    padding: 0 0 0 6px;
+    margin: 0;
+  }
+
+  &__name {
+    background-color: $concrete-gray;
+    margin: 0;
+    padding: 6px;
+  }
+
+  &__industry {
+    padding-top: 6px !important;
+    span {
+      // font-weight: 800;
+    }
+  }
+
+  &__regions,
+  &__translations {
+    padding-left: 6px;
+  }
+
+  &__regions {
+    li {
+      padding-top: 6px;
+    }
+  }
+
+  &__region-wrapper {
+    display: flex;
+    padding-top: 6px;
+  }
+
+  &__region-list {
+    display: inline-flex;
+    font-size: $body-font-size;
+    margin: 0;
+
+    &-item {
+      list-style: none;
+
+      &--add-space {
+        &::after {
+          content: ",";
+          padding-right: 4px;
+        }
+      }
+    }
+  }
+}
+
+.bold-me-pls {
+  @include benton-medium();
+}
+
+.luna-category-translation-data {
+  background: $concrete-gray;
+  color: $asphalt-gray;
+  padding: 16px;
+  margin: 8px;
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  align-items: center;
+  a {
+    color: $asphalt-gray !important;
+  }
+
+  img {
+    box-sizing: border-box;
+    // width: 100%;
+    // margin: 0 16px;
+    padding: 16px 16px 16px 0;
+    width: 100%;
+  }
+}

package/dist/luna/components/AdminCategoryData/AdminCategoryData.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _AdminCategoryData = _interopRequireDefault(require("./AdminCategoryData"));
+var translations = [{
+  language: "en",
+  teaserImage: {
+    url: "http://fpoimg.com/95x95"
+  },
+  name: "Product name",
+  text: "Dolore velit irure velit duis ea."
+}, {
+  language: "fr",
+  teaserImage: {
+    url: "http://fpoimg.com/95x95"
+  },
+  name: "Product name, but in French",
+  text: "Dolore velit irure velit duis ea."
+}, {
+  language: "de",
+  teaserImage: {
+    url: "http://fpoimg.com/95x95"
+  },
+  name: "Product name, but in German",
+  text: "Dolore velit irure velit duis ea."
+}];
+var content = {
+  name: "Category name",
+  industry: "Industry name",
+  translations: translations,
+  url: "/products/industry_name/category_name",
+  languageOptions: {
+    de: "German",
+    fr: "French",
+    en: "English"
+  }
+};
+
+// storiesOf("Not Yet Implemented/AdminCategoryData", module).add("Card", () => {
+//   return <AdminCategoryData content={content} currentLanguageURL="en" />;
+// });