@hashicorp/react-components 0.0.0 → 1.0.1

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

@@ -1,182 +0,0 @@
-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

@@ -1,7 +0,0 @@
-# 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

@@ -1,176 +0,0 @@
-.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%;
-  }
-}