@hashicorp/react-components 0.0.0

package/packages/callouts/package.json

@@ -0,0 +1,20 @@
+{
+  "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

@@ -0,0 +1,9 @@
+{
+  "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

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

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

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

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

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

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

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

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