@hashicorp/react-components 0.0.0 → 1.0.0

package/packages/callouts/index.js

@@ -1,67 +0,0 @@
-import CalloutItem from './partials/callout-item/index.js'
-
-function Callouts({
-  heading,
-  subheading,
-  centerHeading,
-  layout,
-  theme,
-  brand,
-  items,
-}) {
-  if (!layout)
-    throw new Error('The "layout" prop is required, please pass in a value')
-  return (
-    <section className={`g-callouts theme-${theme}`}>
-      <div className="g-grid-container">
-        {(heading || subheading) && (
-          <div className="headings" data-testid="headings">
-            {heading && (
-              <h2
-                className={`g-type-display-2 theme-${theme} ${
-                  centerHeading ? 'centered' : ''
-                }`}
-              >
-                {heading}
-              </h2>
-            )}
-            {subheading && (
-              <p
-                className={`g-type-body-large theme-${theme} ${
-                  centerHeading ? 'centered' : ''
-                }`}
-              >
-                {subheading}
-              </p>
-            )}
-          </div>
-        )}
-        <div className={`items layout-${layout}`}>
-          {items.map((item, stableIdx) => {
-            return (
-              // eslint-disable-next-line react/no-array-index-key
-              <div key={stableIdx} className="callout-item-wrapper">
-                <CalloutItem
-                  icon={item.icon}
-                  heading={item.heading}
-                  content={item.content}
-                  link={item.link}
-                  layout={layout}
-                  theme={theme}
-                  brand={brand}
-                />
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-Callouts.defaultProps = {
-  theme: 'light',
-  brand: 'hashicorp',
-}
-
-export default Callouts

package/packages/callouts/package-lock.json

@@ -1,33 +0,0 @@
-{
-  "name": "@hashicorp/react-callouts",
-  "version": "5.0.3",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@hashicorp/react-button": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.2.4.tgz",
-      "integrity": "sha512-jEjoN31nAI9K/4FDkUORjRhRHsH8rFIukR15wTmL72x7T0fZiBzNkB4OBAnLh2HQExLPKJzTGv+RaepJgQru/Q==",
-      "requires": {
-        "@hashicorp/react-global-styles": "^4.4.2",
-        "@hashicorp/react-inline-svg": "^1.0.2",
-        "slugify": "^1.3.6"
-      }
-    },
-    "@hashicorp/react-global-styles": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.4.2.tgz",
-      "integrity": "sha512-EprEFwymJJbrbIQmzMCODM6eYwew2OsgVa9EtWNE984/KFk71QWvbjKVjebqNB0vWdpwSt6+127kfOQsx8JolA=="
-    },
-    "@hashicorp/react-inline-svg": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-inline-svg/-/react-inline-svg-1.0.2.tgz",
-      "integrity": "sha512-AAFnBslSTgnEr++dTbMn3sybAqvn7myIj88ijGigF6u11eSRiV64zqEcyYLQKWTV6dF4AvYoxiYC6GSOgiM0Yw=="
-    },
-    "slugify": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
-      "integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
-    }
-  }
-}

package/packages/callouts/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "@hashicorp/react-callouts",
-  "description": "Display a set of items, each with a title, description, option links, and an optional icon.",
-  "version": "5.0.3",
-  "author": "HashiCorp",
-  "contributors": [
-    "Zach Shilton"
-  ],
-  "dependencies": {
-    "@hashicorp/react-button": "^2.2.4",
-    "@hashicorp/react-inline-svg": "^1.0.2"
-  },
-  "license": "MPL-2.0",
-  "peerDependencies": {
-    "react": "^16.9.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

package/packages/callouts/partials/callout-item/fixtures/default.json

@@ -1,9 +0,0 @@
-{
-  "icon": "<svg><title>Default svg title</title></svg>",
-  "heading": "My test heading",
-  "content": "My test content",
-  "link": {
-    "text": "My test link",
-    "url": "/some/test/path"
-  }
-}

package/packages/callouts/partials/callout-item/index.js

@@ -1,71 +0,0 @@
-import InlineSvg from '@hashicorp/react-inline-svg'
-import Button from '@hashicorp/react-button'
-
-export default function CalloutItem({
-  icon,
-  heading,
-  content,
-  link,
-  layout,
-  theme,
-  brand,
-}) {
-  const hasBadLink = link && (!link.text || !link.url)
-  if (hasBadLink) {
-    throw new Error('`link` must have both `text` and a `url`')
-  }
-
-  const isContentString = typeof content === 'string'
-  const isContentRenderProp = typeof content === 'function'
-  const renderIcon =
-    typeof icon === 'function'
-      ? icon
-      : typeof icon === 'string'
-      ? () => <InlineSvg src={icon} />
-      : false
-  return (
-    <div className={`callout-item layout-${layout} theme-${theme}`}>
-      {renderIcon && (
-        <div data-testid="icon" className={`icon layout-${layout}`}>
-          {renderIcon({ theme, brand })}
-        </div>
-      )}
-
-      <div className="text-and-links">
-        {heading && (
-          <h3
-            className={`heading g-type-display-5 layout-${layout} theme-${theme}`}
-            data-testid="heading"
-          >
-            {heading}
-          </h3>
-        )}
-        {isContentString ? (
-          <p
-            className={`content g-type-body theme-${theme}`}
-            data-testid="content"
-          >
-            {content}
-          </p>
-        ) : isContentRenderProp ? (
-          content({ theme, brand })
-        ) : null}
-
-        {link && (
-          <div className="links" data-testid="links">
-            <Button
-              title={link.text}
-              url={link.url}
-              linkType={link.linkType || 'inbound'}
-              theme={{
-                brand,
-                background: theme,
-                variant: 'tertiary',
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/packages/callouts/partials/callout-item/style.css

@@ -1,76 +0,0 @@
-.g-callouts .callout-item {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  width: 100%;
-
-  &.layout-two-up {
-    padding: 32px;
-    &.theme-light {
-      background: var(--gray-7);
-    }
-    &.theme-gray {
-      background: var(--white);
-    }
-    &.theme-dark {
-      background: var(--gray-1);
-    }
-
-    @media (min-width: 640px) {
-      flex-wrap: nowrap;
-      flex-direction: row;
-    }
-  }
-
-  & > .icon {
-    margin-bottom: 16px;
-    &.layout-two-up {
-      @media (min-width: 640px) {
-        margin-right: 32px;
-        margin-bottom: 0;
-      }
-    }
-
-    & svg {
-      display: block;
-    }
-  }
-
-  & > .text-and-links {
-    & > .heading {
-      &.theme-light {
-        color: var(--black);
-      }
-      &.theme-gray {
-        color: var(--black);
-      }
-      &.theme-dark {
-        color: var(--white);
-      }
-
-      &.layout-two-up {
-        @media (min-width: 640px) {
-          margin-top: -0.2em;
-        }
-      }
-    }
-
-    & > .content {
-      margin-top: 8px;
-
-      &.theme-light {
-        color: var(--gray-2);
-      }
-      &.theme-gray {
-        color: var(--black);
-      }
-      &.theme-dark {
-        color: var(--gray-5);
-      }
-    }
-
-    & > .links {
-      margin-top: 20px;
-    }
-  }
-}

package/packages/callouts/style.css

@@ -1 +0,0 @@
-@import './styles/index.css';

package/packages/callouts/styles/_temp-reset.css

@@ -1,11 +0,0 @@
-.g-callouts {
-  & h1,
-  & h2,
-  & h3 {
-    margin: 0;
-  }
-
-  & p {
-    margin: 0;
-  }
-}

package/packages/callouts/styles/_temp-spacing-tokens.css

@@ -1,41 +0,0 @@
-@import '~@hashicorp/react-global-styles/custom-media.css';
-
-:root {
-  /* Small Viewports */
-  @media (--small) {
-    --space-grid-gap: 20px;
-    --space-block-padding: 64px;
-    --space-block-padding-reduced: 48px;
-    --space-display-2--body-large: 16px;
-    --space-display-2--content: 48px;
-    --space-body-large--buttons: 32px;
-    --space-body-large--links: 24px;
-    --space-columns-three: 48px;
-    --space-columns-four: 48px;
-  }
-
-  /* Medium Viewports */
-  /* (IE fallback, so no media query) */
-  --space-grid-gap: 24px;
-  --space-block-padding: 88px;
-  --space-block-padding-reduced: 64px;
-  --space-display-2--body-large: 16px;
-  --space-display-2--content: 56px;
-  --space-body-large--buttons: 32px;
-  --space-body-large--links: 24px;
-  --space-columns-three: 40px;
-  --space-columns-four: 32px;
-
-  /* Large Viewports */
-  @media (--large) {
-    --space-grid-gap: 32px;
-    --space-block-padding: 128px;
-    --space-block-padding-reduced: 88px;
-    --space-display-2--body-large: 24px;
-    --space-display-2--content: 64px;
-    --space-body-large--buttons: 40px;
-    --space-body-large--links: 32px;
-    --space-columns-three: 64px;
-    --space-columns-four: 48px;
-  }
-}

package/packages/callouts/styles/index.css

@@ -1,124 +0,0 @@
-@import './_temp-reset.css';
-@import './_temp-spacing-tokens.css';
-@import '../partials/callout-item/style.css';
-
-.g-callouts {
-  /* Spacing */
-  /* Below assumes we set { preserve: true } for our CSS custom properties plugin,
-  or even better, use an IE11-specific polyfill so we can use custom properties as they're intended to be used */
-  padding-top: var(--space-block-padding);
-  padding-bottom: var(--space-block-padding);
-
-  /* Themeing */
-  &.theme-light {
-    background: var(--white);
-  }
-  &.theme-gray {
-    background: var(--gray-7);
-  }
-  &.theme-dark {
-    background: var(--black);
-  }
-
-  & > .g-grid-container {
-    /* Heading and subheading styling + centering */
-    & > .headings {
-      margin-bottom: var(--space-display-2--content);
-      text-align: left;
-
-      & > h2 {
-        max-width: 38em;
-        &.theme-light,
-        &.theme-gray {
-          color: var(--gray-1);
-        }
-        &.theme-dark {
-          color: var(--white);
-        }
-        &.centered {
-          text-align: center;
-          margin-left: auto;
-          margin-right: auto;
-        }
-      }
-
-      & > p {
-        margin-top: var(--space-display-2--body-large);
-        max-width: 38em;
-        &.theme-light,
-        &.theme-gray {
-          color: var(--gray-3);
-        }
-        &.theme-dark {
-          color: var(--gray-5);
-        }
-        &.centered {
-          text-align: center;
-          margin-left: auto;
-          margin-right: auto;
-        }
-      }
-    }
-
-    /*
-    LAYOUT STYLES
-
-    The styles below create a grid layout with flexbox (because CSS grid is no good on IE11)
-    Each "wrapper" flex item (.callout-item-wrapper) holds a "grid item" (.callout-item),
-    and creates the grid-gap with its padding + its siblings' padding (left & right padding for column-gap, top & bottom for row-gap)
-    while the flex "container" (.items) uses a negative margin to compensate for the extraneous padding at the edges of the grid
-    ---
-    Hopefully this helps explain how we arrive at the styles below, given the desired grid gaps from design side:
-    - .layout-two-up   : 32px gap                       =>  -16px margin & 16px padding
-    - .layout-three-up : 48px row gap, 64px column gap  =>  -24px -32px margin & 24px 32px padding
-    - .layout-four-up  : 48px row gap, 64px column gap  =>  -24px -32px margin & 24px 32px padding
-    ---
-    With this approach in place, we can also change the number of "grid columns" by modifying the % width of the "wrapper" items
-    The columns vary per layout and viewport size. 50% = 2 colums, 33.33% = 3 columns, 25% = 4 columns, etc
-    */
-
-    & > .items {
-      position: relative;
-      display: flex;
-      flex-wrap: wrap;
-
-      & .callout-item-wrapper {
-        display: flex;
-        width: 100%;
-      }
-
-      &.layout-two-up {
-        margin: calc(var(--space-grid-gap) / -2);
-        & > .callout-item-wrapper {
-          padding: calc(var(--space-grid-gap) / 2);
-          @media (--large) {
-            width: 50%;
-          }
-        }
-      }
-
-      &.layout-three-up {
-        margin: calc(var(--space-columns-three) / -2);
-        & > .callout-item-wrapper {
-          padding: calc(var(--space-columns-three) / 2);
-          @media (--medium-up) {
-            width: 33.33%;
-          }
-        }
-      }
-
-      &.layout-four-up {
-        margin: calc(var(--space-columns-four) / -2);
-        & > .callout-item-wrapper {
-          padding: calc(var(--space-columns-four) / 2);
-          @media (min-width: 640px) {
-            width: 50%;
-          }
-          @media (--large) {
-            width: 25%;
-          }
-        }
-      }
-    }
-  }
-}