luna-one 3.1.593 → 3.1.594

package/dist/luna/components/SuperHero/SuperHeroDocumentation.mdx

@@ -0,0 +1,57 @@
+#### Super Hero
+
+###### Props -
+
+- `contentComponent` React component used as the content of the superHero. Overrides the content information in the "content" field.
+- `content` **(required)** - object containing header, text, ctas, and image
+  - `eyebrow` - string for generating eyebrow text
+  - `header` **(required)** - string for generating header text
+  - `subHeader` - string for generating sub-header text
+  - `text` - string for generating body text either HTML or plain text
+  - `ctas` - objects for generating a `<CTASection>` component requiring `ctaOne` and/or `ctaTwo` objects with `url`, `text`, and `className` strings, takes precedence over the `cta` object
+  - `image` - object with `src` and `alt` as keys with strings as values.
+  - `video` - object for rendering the video embed
+    - `url` - string that points to the video source on YouTube or Vimeo
+    - `uuid` - string used for rendering Vidyard video embeds
+    - `vidyard` - boolean for indicating that a Vidyard component should be rendered
+  - `variant` - string to indicate page layout. This defaults to "variant_1" unless video props are present
+    - `variant_1` - image 3/4 of page and 1/4 text
+    - `variant_2` - image 1/2 of page and 1/2 text
+    - `variant_3` - image 2/3 of page and 1/3 text
+    - `variant_4` - image size 555x555 and 1/2 text
+    - `variant_6` - full width image and text (either top or bottom)
+    - `variant_7` - video and text
+  - `contentSide` - string for generating the side content will appear. Options are left, right, top or bottom (please note top and bottom are only availble for variant_7). This defaults at "right"
+  - `paddingClass` - string to generate a custom class to pass into the outermost div of the component
+
+###### Example -
+
+```
+const content = {
+  eyebrow: "Eyebrow",
+  header: "Header text",
+  subHeader: "I am the subheader",
+    text: "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur",
+  ctas: {
+    ctaOne: {
+      text: "Button",
+      url: "/#",
+  },
+    ctaTwo: {
+      text: "Button",
+      url: "/#",
+    },
+  },
+  image:  {
+    src: "https://fpoimg.com/800x400",
+    alt: "placeholder",
+  },
+  contentSide: "right",
+  variant: "variant_1",
+};
+
+
+return (
+  <SuperHero content={content} paddingClass={"my-custom-class"} />
+);
+```

package/dist/luna/components/SupportCard/SupportCard.scss

@@ -1,135 +1,135 @@
-@import "../../../global-styles/terra.scss";
-
-.luna-support-card {
-  &__header-section {
-    background: $trimble-blue;
-    padding: 24px 32px;
-  }
-
-  &__header,
-  &__sub-header {
-    color: $concrete-gray;
-    padding: 0;
-    margin: 0;
-  }
-
-  &__header {
-    font-size: $card-title-size;
-    line-height: 28px;
-    font-weight: 800;
-  }
-
-  &__sub-header {
-    padding-top: 6px;
-    font-size: $eyebrow-font-size;
-    line-height: 14px;
-    font-weight: 400;
-  }
-
-  &__content-section {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-    min-height: 404px;
-
-    @media screen and (max-width: 900px) {
-      display: block;
-      min-height: auto;
-    }
-
-    background: $concrete-gray;
-  }
-
-  &__content-column {
-    &--empty {
-      @media screen and (max-width: 900px) {
-        display: none;
-        background: purple; // TODO - REPLACE WITH SUITABLE COLOR IF THIS COMPONENT IS USED
-      }
-    }
-
-    margin: 32px 0;
-    padding: 0px 32px;
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
-
-    @media screen and (max-width: 900px) {
-      margin: 0 32px;
-      padding: 32px 0;
-    }
-
-    &:nth-child(2),
-    &:nth-child(3) {
-      border-left: 1px solid color(gray-4);
-      @media screen and (max-width: 900px) {
-        border-left: 0;
-        border-top: 1px solid color(gray-4);
-      }
-    }
-
-    &:last-child {
-      border-right: none;
-
-      @media screen and (max-width: 900px) {
-        border-bottom: none;
-        margin-bottom: 0 !important;
-      }
-    }
-    p, li, ol, ul {
-      font-size: $large-body-font-size;
-      line-height: 19px;
-      margin: 0;
-      padding-bottom: 13px;
-
-      &:last-child {
-        padding-bottom: 0;
-      }
-    }
-
-    p {
-      padding-top: 10px;
-    }
-
-    li {
-      position: relative;
-      right: 12px;
-      padding-bottom: 5px;
-    }
-
-
-    a {
-      background: $trimble-blue;
-      color: $concrete-gray;
-      text-decoration: none;
-      font-size: $large-body-font-size;
-      line-height: calc(48px - (2px));
-      font-weight: 500;
-      min-width: 144px;
-      height: 48px;
-      display: block;
-      text-align: center;
-      margin-bottom: 28px;
-      margin-top: 7px;
-      -webkit-transition: 0.1s;
-      -o-transition: 0.1s;
-      transition: 0.1s;
-
-      &:hover {
-        background: $dark-navy;
-        color: $white;
-      }
-
-      &:after {
-        color: $white !important;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
+@import "../../../global-styles/terra.scss";
+
+.luna-support-card {
+  &__header-section {
+    background: $trimble-blue;
+    padding: 24px 32px;
+  }
+
+  &__header,
+  &__sub-header {
+    color: $concrete-gray;
+    padding: 0;
+    margin: 0;
+  }
+
+  &__header {
+    font-size: $card-title-size;
+    line-height: 28px;
+    font-weight: 800;
+  }
+
+  &__sub-header {
+    padding-top: 6px;
+    font-size: $eyebrow-font-size;
+    line-height: 14px;
+    font-weight: 400;
+  }
+
+  &__content-section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    min-height: 404px;
+
+    @media screen and (max-width: 900px) {
+      display: block;
+      min-height: auto;
+    }
+
+    background: $concrete-gray;
+  }
+
+  &__content-column {
+    &--empty {
+      @media screen and (max-width: 900px) {
+        display: none;
+        background: purple; // TODO - REPLACE WITH SUITABLE COLOR IF THIS COMPONENT IS USED
+      }
+    }
+
+    margin: 32px 0;
+    padding: 0px 32px;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+
+    @media screen and (max-width: 900px) {
+      margin: 0 32px;
+      padding: 32px 0;
+    }
+
+    &:nth-child(2),
+    &:nth-child(3) {
+      border-left: 1px solid color(gray-4);
+      @media screen and (max-width: 900px) {
+        border-left: 0;
+        border-top: 1px solid color(gray-4);
+      }
+    }
+
+    &:last-child {
+      border-right: none;
+
+      @media screen and (max-width: 900px) {
+        border-bottom: none;
+        margin-bottom: 0 !important;
+      }
+    }
+    p, li, ol, ul {
+      font-size: $large-body-font-size;
+      line-height: 19px;
+      margin: 0;
+      padding-bottom: 13px;
+
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+
+    p {
+      padding-top: 10px;
+    }
+
+    li {
+      position: relative;
+      right: 12px;
+      padding-bottom: 5px;
+    }
+
+
+    a {
+      background: $trimble-blue;
+      color: $concrete-gray;
+      text-decoration: none;
+      font-size: $large-body-font-size;
+      line-height: calc(48px - (2px));
+      font-weight: 500;
+      min-width: 144px;
+      height: 48px;
+      display: block;
+      text-align: center;
+      margin-bottom: 28px;
+      margin-top: 7px;
+      -webkit-transition: 0.1s;
+      -o-transition: 0.1s;
+      transition: 0.1s;
+
+      &:hover {
+        background: $dark-navy;
+        color: $white;
+      }
+
+      &:after {
+        color: $white !important;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _SupportCard = _interopRequireDefault(require("./SupportCard"));
+var sectionOne = [{
+  value: "<h1>Header</h1><p>Non anim voluptate eu cillum sunt voluptate ipsum laboris ipsum do irure.</p><a href='/#'>Link</a>",
+  format: "wysiwyg_editor"
+}, {
+  value: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin lectus ligula, nec tempus eros viverra sed. Curabitur malesuada, leo ut porta pretium, turpis turpis dignissim neque, convallis vulputate nisl ante id sapien. Donec efficitur, turpis et blandit ornare, lorem sem aliquet ligula, euismod condimentum dui quam quis purus.</p>\r\n\r\n<p>adadasd</p>\r\n\r\n<ul>\r\n\t<li>asdasd</li>\r\n\t<li>sfdsdfsd</li>\r\n\t<li>sdfsdf</li>\r\n</ul>\r\n",
+  format: "wysiwyg_editor"
+}, {
+  value: "<p>Non anim voluptate eu cillum sunt.</p>",
+  format: "wysiwyg_editor"
+}, {
+  value: '<a href="mailto:jeff@biscuits.com">Email me</a>'
+}];
+var sectionTwo = [{
+  value: "<p>Non anim voluptate eu cillum sunt voluptate ipsum laboris ipsum do irure.</p>",
+  format: "w/e"
+}, {
+  value: "<p>Veniam labore sunt tempor nulla commodo ullamco tempor.</p>",
+  format: "w/e"
+}];
+var sectionThree = [{
+  value: "Non anim voluptate eu cillum sunt voluptate ipsum laboris ipsum do irure.",
+  format: "w/e"
+}, {
+  value: "Veniam labore sunt tempor nulla commodo ullamco tempor.",
+  format: "w/e"
+}, {
+  value: "Non anim voluptate eu cillum sunt. Okay",
+  format: "w/e"
+}];
+var contentOne = {
+  header: "Construction",
+  headerLabel: "Industry",
+  subHeader: "Civil Engineering Software",
+  product: "Novapoint and Quandri",
+  subHeaderLabel: "Categories",
+  sections: [sectionOne, sectionTwo, sectionThree]
+};
+var contentTwo = {
+  header: "Construction",
+  headerLabel: "Industry",
+  subHeader: "Civil Engineering Software",
+  product: "Novapoint and Quandri",
+  subHeaderLabel: "Categories",
+  sections: [sectionOne, sectionTwo]
+};
+var contentThree = {
+  header: "Construction",
+  headerLabel: "Industry",
+  subHeader: "Civil Engineering Software",
+  product: "Novapoint and Quandri",
+  subHeaderLabel: "Categories",
+  sections: [sectionOne]
+};
+
+// storiesOf("Not Yet Implemented/SupportCard", module)
+//   .add("SupportCard with three levels", () => (
+//     <div style={{ maxWidth: "1200px", margin: "auto", padding: "0 32px" }}>
+//       <SupportCard content={contentOne} />
+//     </div>
+//   ))
+//   .add("SupportCard with two levels", () => (
+//     <div style={{ maxWidth: "1200px", margin: "auto", padding: "0 32px" }}>
+//       <SupportCard content={contentTwo} />
+//     </div>
+//   ))
+//   .add("SupportCard with one level", () => (
+//     <div style={{ maxWidth: "1200px", margin: "auto", padding: "0 32px" }}>
+//       <SupportCard content={contentThree} />
+//     </div>
+//   ));