@hashicorp/react-components 0.0.0

package/packages/case-study-slider/props.js

@@ -0,0 +1,182 @@
+const image = {
+  url: {
+    type: 'string',
+    description: 'url of the image',
+  },
+  alt: {
+    type: 'string',
+    description: 'alt text for the image',
+  },
+  format: {
+    type: 'string',
+    description: 'format of the image, like "jpg" or "svg"',
+  },
+}
+
+module.exports = {
+  data: {
+    type: 'object',
+    description: 'Data for the case study slider',
+    properties: {
+      caseStudies: {
+        type: 'array',
+        description: 'Collection of case study objects',
+        properties: [
+          {
+            type: 'object',
+            properties: {
+              company: {
+                type: 'object',
+                description:
+                  'object containing a company logo, typically returned directly from nextjs',
+                properties: {
+                  monochromeLogo: {
+                    type: 'object',
+                    description: 'black/gray logo',
+                    properties: image,
+                  },
+                  whiteLogo: {
+                    type: 'object',
+                    description: 'white logo',
+                    properties: image,
+                  },
+                },
+              },
+              headline: {
+                type: 'string',
+                description: 'headline text',
+              },
+              description: {
+                type: 'string',
+                description: 'body text under the deadline',
+              },
+              caseStudyResource: {
+                slug: {
+                  type: 'string',
+                  description: 'slug returned from the CMS',
+                },
+                image: {
+                  type: 'object',
+                  description: 'case study resource image',
+                  properties: image,
+                },
+              },
+              caseStudyImage: {
+                type: 'object',
+                description: 'image representing a linked case study',
+                properties: image,
+              },
+              buttonLabel: {
+                type: 'string',
+                description: 'overrides the button text',
+              },
+            },
+          },
+        ],
+      },
+    },
+    testValue: {
+      caseStudies: [
+        {
+          company: {
+            monochromeLogo: {
+              url:
+                'https://www.datocms-assets.com/2885/1538067560-proofpoint-logo-reg-k.png',
+              alt: 'Logo dark',
+              format: 'png',
+            },
+            whiteLogo: {
+              url:
+                'https://www.datocms-assets.com/2885/1538067567-proofpoint-logo-reg-reversed.png',
+              alt: 'Logo white',
+              format: 'png',
+            },
+          },
+          headline: 'This is the first case study',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut arcu justo, et convallis lectus. Sed commodo massa eget risus feugiat suscipit. ',
+          caseStudyResource: {
+            slug: 'https://www.hashicorp.com',
+            image: {
+              url:
+                'https://www.datocms-assets.com/2885/1538142087-ye-endahl.jpg',
+              alt: 'Test image',
+              format: 'jpg',
+            },
+          },
+          buttonLabel: 'Custom Label',
+        },
+        {
+          company: {
+            monochromeLogo: {
+              url:
+                'https://www.datocms-assets.com/2885/1524097005-adobe-black-1.svg',
+              alt: 'Logo dark',
+              format: 'svg',
+            },
+            whiteLogo: {
+              url:
+                'https://www.datocms-assets.com/2885/1524097013-adobe-white-1.svg',
+              alt: 'Logo white',
+              format: 'svg',
+            },
+          },
+          headline: 'This is the second case study',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut arcu justo, et convallis lectus. Sed commodo massa eget risus feugiat suscipit. Nulla velit lectus, imperdiet cursus tempor at, ',
+          caseStudyResource: {
+            slug: 'https://www.hashicorp.com',
+            image: {
+              url:
+                'https://www.datocms-assets.com/2885/1538233406-wa-6h7-400x400.jpg',
+              alt: 'Test image',
+              format: 'jpg',
+            },
+          },
+        },
+        {
+          company: {
+            monochromeLogo: {
+              url: 'https://www.datocms-assets.com/2885/1535495419-black.png',
+              alt: 'Logo dark',
+              format: 'png',
+            },
+            whiteLogo: {
+              url: 'https://www.datocms-assets.com/2885/1535495424-white.png',
+              alt: 'Logo white',
+              format: 'png',
+            },
+          },
+          headline: 'This is the third case study',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut arcu justo, et convallis lectus. Sed commodo massa eget risus feugiat suscipit. Nulla velit lectus, ',
+          caseStudyResource: {
+            slug: 'https://www.hashicorp.com',
+            image: {
+              url:
+                'https://www.datocms-assets.com/2885/1535120026-36755049704aeaabe64ddk.jpg',
+              alt: 'Test image',
+              format: 'jpg',
+            },
+          },
+          caseStudyImage: {
+            url:
+              'https://www.datocms-assets.com/2885/1535120026-36755049704aeaabe64ddk.jpg',
+            alt: 'Case Study image override',
+            format: 'jpg',
+          },
+        },
+      ],
+    },
+  },
+  timing: {
+    type: 'integer',
+    description: 'Slider timing in seconds',
+    testValue: 10,
+  },
+  dark: {
+    type: 'boolean',
+    description: 'Controls color of some elements - button and progress bars',
+    testValue: false,
+  },
+}

package/packages/case-study-slider/readme.md

@@ -0,0 +1,7 @@
+# Case Study Slider
+
+A slider component that can display up to three case studies and allow a visitor to toggle between them, and click through to read.
+
+### Props
+
+See the [props file](props.js) for more details on the component's props!

package/packages/case-study-slider/style.css

@@ -0,0 +1,176 @@
+.g-case-study-slider {
+  & .logo-bar-container {
+    display: flex;
+    padding: 32px 0;
+    align-items: center;
+    justify-content: center;
+
+    & .logo-bar {
+      flex-basis: 33.333%;
+      cursor: pointer;
+      position: relative;
+      transition: transform 0.2s ease;
+      margin-right: 32px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      & .logo-container {
+        height: 84px;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 24px;
+
+        & picture,
+        & img {
+          object-fit: contain;
+          width: 100%;
+          height: 100%;
+        }
+
+        @media (min-width: 768px) {
+          height: 92px;
+          padding: 32px;
+        }
+      }
+
+      & .progress-bar {
+        width: 100%;
+        height: 2px;
+        display: block;
+        background-color: var(--DEPRECATED-gray-9);
+
+        &.dark {
+          background-color: var(--DEPRECATED-gray-3);
+        }
+
+        & span {
+          width: 0;
+          background-color: var(--brand);
+          height: 100%;
+          display: block;
+          animation-duration: 10s;
+          &.nomad {
+            background-color: var(--nomad);
+          }
+          &.consul {
+            background-color: var(--consul);
+          }
+          &.terraform {
+            background-color: var(--terraform);
+          }
+          &.active {
+            animation-name: case-study-bar;
+            animation-timing-function: linear;
+          }
+        }
+      }
+
+      &:hover {
+        transform: translateY(-4px);
+      }
+    }
+
+    /* When there are two case studies */
+    &.double {
+      & .logo-bar {
+        flex-basis: 50%;
+      }
+    }
+
+    @media (min-width: 768px) {
+      padding: 0 0 48px;
+    }
+  }
+
+  & .case-study-container {
+    overflow: hidden;
+
+    & .slider-container {
+      transition: transform 400ms ease-out;
+
+      & .slider-frame {
+        & .case-study {
+          & .feature-image {
+            margin-bottom: 2rem;
+
+            & img,
+            & picture {
+              width: 100%;
+              height: auto;
+            }
+          }
+
+          & .feature-content {
+            text-align: center;
+
+            & h3 {
+              margin: 0 0 8px;
+            }
+
+            & .single-logo {
+              margin-bottom: 32px;
+              width: 100%;
+              height: 65px;
+
+              & picture,
+              & img {
+                height: 100%;
+                width: auto;
+              }
+            }
+
+            & .g-btn {
+              margin-top: 32px;
+            }
+          }
+
+          @media (min-width: 768px) {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+
+            & .feature-image {
+              margin-bottom: 0;
+              flex-basis: 60%;
+              margin-right: 64px;
+            }
+
+            & .feature-content {
+              flex-basis: 40%;
+              text-align: left;
+
+              & p {
+                margin: 0;
+
+                & + p {
+                  margin-top: 1em;
+                }
+              }
+            }
+          }
+        }
+
+        &.single {
+          & .case-study {
+            align-items: flex-start;
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes case-study-bar {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}