@hashicorp/react-components 0.0.0

package/packages/button/index.js

@@ -0,0 +1,86 @@
+import slugify from 'slugify'
+import fragment from './fragment.graphql'
+import InlineSvg from '@hashicorp/react-inline-svg'
+import svgArrowRight from './icons/arrow-right.svg.js'
+import svgExternalLink from './icons/external-link.svg.js'
+import svgChevronDown from './icons/chevron-down.svg.js'
+import svgDownload from './icons/download.svg.js'
+
+const linkTypeToIcon = {
+  inbound: svgArrowRight,
+  outbound: svgExternalLink,
+  anchor: svgChevronDown,
+  download: svgDownload,
+}
+
+import normalizeButtonTheme from './helpers/normalizeButtonTheme.js'
+
+function Button({
+  title,
+  url,
+  external,
+  theme,
+  ga_prefix,
+  onClick,
+  disabled,
+  className,
+  linkType,
+  icon,
+  size,
+  ...attrs
+}) {
+  const themeObj = normalizeButtonTheme(theme)
+  const gaSlug = slugify(title, { lower: true })
+  const isExternal = url && (linkType === 'outbound' || external)
+  const Elem = url ? 'a' : 'button'
+  const parsedIcon = linkTypeToIcon[linkType]
+    ? {
+        svg: linkTypeToIcon[linkType],
+        position: icon ? icon.position : 'right',
+        animationId: linkType,
+        isAnimated: icon ? icon.isAnimated : true,
+      }
+    : icon
+  const hasIcon = parsedIcon && parsedIcon.svg
+  const hasRightIcon = hasIcon && parsedIcon.position !== 'left'
+  const hasLeftIcon = hasIcon && parsedIcon.position === 'left'
+  return (
+    <Elem
+      className={`g-btn size-${size} variant-${themeObj.variant} background-${themeObj.background} brand-${themeObj.brand} ${className}`}
+      data-ga-button={`${ga_prefix ? ga_prefix + ' | ' : ''}${gaSlug}`}
+      href={url}
+      rel={isExternal ? 'noopener' : undefined}
+      target={isExternal ? '_blank' : undefined}
+      onClick={onClick}
+      disabled={disabled}
+      {...attrs}
+    >
+      {hasLeftIcon && <ButtonIcon icon={parsedIcon} />}
+      <span className="text g-type-buttons-and-standalone-links">{title}</span>
+      {hasRightIcon && <ButtonIcon icon={parsedIcon} />}
+    </Elem>
+  )
+}
+
+function ButtonIcon(props) {
+  const { svg, position, animationId, isAnimated } = props.icon
+  const SvgComponent = () => <InlineSvg src={svg} />
+  return (
+    <span
+      className={`icon at-${position} ${isAnimated ? 'is-animated' : ''}`}
+      data-animation={animationId}
+    >
+      <SvgComponent />
+    </span>
+  )
+}
+
+Button.defaultProps = {
+  className: '',
+  theme: { variant: 'primary', brand: 'hashicorp', background: 'light' },
+  size: 'medium',
+}
+
+Button.fragmentSpec = { fragment }
+
+export default Button

package/packages/button/package-lock.json

@@ -0,0 +1,18 @@
+{
+  "name": "@hashicorp/react-button",
+  "version": "4.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@hashicorp/react-inline-svg": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-inline-svg/-/react-inline-svg-1.0.0.tgz",
+      "integrity": "sha512-xzo9ubozATeW+irl93rkmtQulNNctgYzxUXxFn1Lcy9Y8L7bkLz7CROotv7TiUohkTCHPMzP4aBC8JPfTS1crw=="
+    },
+    "slugify": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.6.tgz",
+      "integrity": "sha512-wA9XS475ZmGNlEnYYLPReSfuz/c3VQsEMoU43mi6OnKMCdbnFXd4/Yg7J0lBv8jkPolacMpOrWEaoYxuE1+hoQ=="
+    }
+  }
+}

package/packages/button/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@hashicorp/react-button",
+  "description": "A clickable text box that allows a user to take an action.",
+  "version": "4.0.0",
+  "author": "HashiCorp",
+  "contributors": [
+    "Jeff Escalante"
+  ],
+  "dependencies": {
+    "@hashicorp/react-inline-svg": "^1.0.0",
+    "slugify": "1.3.6"
+  },
+  "license": "MPL-2.0",
+  "peerDependencies": {
+    "react": "^16.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "c47c50a8419f6278073505ebbe25c9fbe4faab07"
+}

package/packages/button/styles/index.css

@@ -0,0 +1,122 @@
+@import '~@hashicorp/react-global-styles/custom-properties/color.css';
+@import '~@hashicorp/react-global-styles/custom-properties/font.css';
+
+@import './variant-primary.css';
+@import './variant-secondary.css';
+@import './variant-tertiary.css';
+@import './variant-tertiary-neutral.css';
+
+.g-btn {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  border-radius: 1px;
+  border: none;
+  transition: transform 0.4s, color 0.2s, background 0.2s, border-color 0.2s;
+  text-decoration: none;
+  -webkit-appearance: none;
+
+  /* Scrim used in most hover effects */
+  &::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    border-radius: 1px;
+    transition: opacity 0.25s ease, background 0.25s ease;
+    z-index: 0;
+    opacity: 0;
+  }
+
+  & .icon {
+    display: inline-block;
+    position: relative;
+    z-index: 2;
+
+    & svg {
+      display: block;
+      overflow: visible;
+      & [stroke-width] {
+        stroke-width: 1.5;
+      }
+    }
+
+    &.is-animated {
+      transition: transform 0.2s;
+      &[data-animation='inbound'] {
+        transform: translate3D(0px, 0px, 0px);
+      }
+      &[data-animation='anchor'] {
+        transform: translate3D(0px, 0px, 0px);
+      }
+      &[data-animation='outbound'] [data-animation-target] {
+        transition: transform 0.2s;
+        transform: translate3D(0px, 0px, 0px);
+      }
+      &[data-animation='download'] [data-animation-target] {
+        transition: transform 0.2s;
+        transform: translate3D(0px, 0px, 0px);
+      }
+    }
+
+    &.at-left {
+      margin-right: 12px;
+    }
+
+    &.at-right {
+      margin-left: 12px;
+    }
+  }
+
+  & .text {
+    position: relative;
+    z-index: 2;
+  }
+
+  &:hover:not([disabled]) {
+    cursor: pointer;
+    & .icon.is-animated {
+      &[data-animation='inbound'] {
+        transform: translate3D(2px, 0, 0);
+      }
+      &[data-animation='anchor'] {
+        transform: translate3D(0, 2px, 0);
+      }
+      &[data-animation='outbound'] [data-animation-target] {
+        transform: translate3D(2px, -2px, 0);
+      }
+      &[data-animation='download'] [data-animation-target] {
+        transform: translate3D(0, 2px, 0);
+      }
+    }
+  }
+
+  &.size-small {
+    padding: 7px 20px 8px 20px;
+    line-height: 1.4em;
+    & .text {
+      line-height: inherit;
+      font-size: 0.9375rem;
+    }
+    & .icon {
+      margin-bottom: -3.5px;
+      & svg {
+        height: 18px;
+        width: 18px;
+      }
+    }
+  }
+
+  &.size-medium {
+    padding: 12px 20px;
+    & .icon {
+      margin-bottom: -4.5px;
+      & svg {
+        height: 20px;
+        width: 20px;
+      }
+    }
+  }
+}

package/packages/button/styles/variant-primary.css

@@ -0,0 +1,232 @@
+@import '~@hashicorp/react-global-styles/custom-properties/color.css';
+
+.g-btn.variant-primary {
+  color: var(--white);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--brand);
+  background-color: var(--brand);
+
+  & .icon svg {
+    & [fill] {
+      fill: var(--white);
+    }
+    & [stroke] {
+      stroke: var(--white);
+    }
+  }
+
+  &::before {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  &:active::before {
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  &:hover:not([disabled])::before,
+  &:active:not([disabled])::before {
+    opacity: 1;
+  }
+
+  /* Disabled styles (shared across all style variations) */
+  &[disabled] {
+    &.background-light,
+    &.background-brand-l3 {
+      border-color: transparent;
+      background-color: rgba(0, 0, 0, 0.14);
+    }
+    &.background-brand,
+    &.background-dark {
+      border-color: transparent;
+      background-color: rgba(255, 255, 255, 0.16);
+      color: rgba(255, 255, 255, 0.24);
+      & .icon svg {
+        & [fill] {
+          fill: rgba(255, 255, 255, 0.24);
+        }
+        & [stroke] {
+          stroke: rgba(255, 255, 255, 0.24);
+        }
+      }
+    }
+  }
+
+  &.background-brand {
+    border-color: var(--white);
+    background-color: var(--white);
+    color: var(--black);
+
+    & .icon svg {
+      & [fill] {
+        fill: var(--black);
+      }
+      & [stroke] {
+        stroke: var(--black);
+      }
+    }
+
+    &::before {
+      background: var(--brand-l3);
+    }
+    &:active::before {
+      background: var(--brand-l2);
+    }
+  }
+}
+
+/*
+BRAND STYLING
+Note: we might be able to figure out a better way to do this, maybe with an IE11 custom properties polyfill?
+See https://gist.github.com/zchsh/5eb843af4ef3a6d11b86ccb7af2251fd
+*/
+.g-btn.variant-primary:not([disabled]) {
+  /* Brand -- HashiCorp */
+  /* Brand -- Vagrant */
+  /* Brand -- Vault */
+  &.brand-hashicorp,
+  &.brand-vault,
+  &.brand-vagrant {
+    /* Uses default values for --brand */
+  }
+
+  /* Brand -- Neutral */
+  &.brand-neutral {
+    &:not(.background-brand),
+    &:not(.background-dark) {
+      border-color: var(--black);
+      background-color: var(--black);
+    }
+
+    &:not(.background-brand),
+    &:not(.background-dark) {
+      &::before {
+        background: rgba(255, 255, 255, 0.15);
+      }
+
+      &:active::before {
+        background: rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    &.background-dark,
+    &.background-brand {
+      border-color: var(--white);
+      background-color: var(--white);
+      color: var(--black);
+
+      & .icon svg {
+        & [fill] {
+          fill: var(--black);
+        }
+        & [stroke] {
+          stroke: var(--black);
+        }
+      }
+
+      &::before {
+        background: rgba(0, 0, 0, 0.1);
+      }
+      &:active::before {
+        background: rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+
+  /* Brand -- Consul */
+  &.brand-consul {
+    &:not(.background-brand) {
+      border-color: var(--consul);
+      background-color: var(--consul);
+    }
+    &.background-brand {
+      &::before {
+        background: var(--consul-l3);
+      }
+      &:active::before {
+        background: var(--consul-l2);
+      }
+    }
+  }
+
+  /* Brand -- Nomad */
+  &.brand-nomad {
+    &:not(.background-brand) {
+      border-color: var(--nomad);
+      background-color: var(--nomad);
+    }
+
+    &.background-brand {
+      &::before {
+        background: var(--nomad-l3);
+      }
+      &:active::before {
+        background: var(--nomad-l2);
+      }
+    }
+  }
+
+  /* Brand -- Packer */
+  &.brand-packer {
+    &:not(.background-brand) {
+      border-color: var(--packer);
+      background-color: var(--packer);
+    }
+    &.background-brand {
+      &::before {
+        background: var(--packer-l3);
+      }
+      &:active::before {
+        background: var(--packer-l2);
+      }
+    }
+  }
+
+  /* Brand -- Terraform */
+  &.brand-terraform {
+    &:not(.background-brand) {
+      border-color: var(--terraform);
+      background-color: var(--terraform);
+    }
+    &.background-brand {
+      &::before {
+        background: var(--terraform-l3);
+      }
+      &:active::before {
+        background: var(--terraform-l2);
+      }
+    }
+  }
+
+  /* Brand -- Waypoint */
+  &.brand-waypoint {
+    &:not(.background-brand) {
+      border-color: var(--waypoint);
+      background-color: var(--waypoint);
+    }
+    &.background-brand {
+      &::before {
+        background: var(--waypoint-l3);
+      }
+      &:active::before {
+        background: var(--waypoint-l2);
+      }
+    }
+  }
+
+  /* Brand -- Boundary */
+  &.brand-boundary {
+    &:not(.background-brand) {
+      border-color: var(--boundary);
+      background-color: var(--boundary);
+    }
+    &.background-brand {
+      &::before {
+        background: var(--boundary-l3);
+      }
+      &:active::before {
+        background: var(--boundary-l2);
+      }
+    }
+  }
+}

package/packages/button/styles/variant-secondary.css

@@ -0,0 +1,179 @@
+@import '~@hashicorp/react-global-styles/custom-properties/color.css';
+
+.g-btn.variant-secondary {
+  color: var(--black);
+  border: 1px solid rgba(29, 30, 35, 0.2);
+  background: none;
+
+  &::before {
+    background-color: var(--black);
+  }
+
+  & .icon svg {
+    & [fill] {
+      fill: var(--black);
+    }
+    & [stroke] {
+      stroke: var(--black);
+    }
+  }
+
+  &:hover:not([disabled]) {
+    border-color: transparent;
+    &::before {
+      opacity: 0.1;
+    }
+  }
+
+  &:active:not([disabled]) {
+    border-color: transparent;
+    &::before {
+      opacity: 0.16;
+    }
+  }
+
+  &[disabled] {
+    &.background-light,
+    &.background-brand-l3 {
+      color: rgba(0, 0, 0, 0.3);
+      & .icon svg {
+        & [fill] {
+          fill: rgba(0, 0, 0, 0.3);
+        }
+        & [stroke] {
+          stroke: rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+    &.background-dark,
+    &.background-brand {
+      color: rgba(255, 255, 255, 0.3);
+      & .icon svg {
+        & [fill] {
+          fill: rgba(255, 255, 255, 0.3);
+        }
+        & [stroke] {
+          stroke: rgba(255, 255, 255, 0.3);
+        }
+      }
+    }
+  }
+
+  /* Shared styles for all secondary buttons on brand-l3 background */
+  &.background-brand-l3 {
+    &::before {
+      background: var(--brand);
+    }
+  }
+
+  /* Shared styles for all secondary buttons on dark and brand background */
+  &.background-dark,
+  &.background-brand {
+    color: var(--white);
+    border-color: rgba(255, 255, 255, 0.24);
+
+    & .icon svg {
+      & [fill] {
+        fill: var(--white);
+      }
+      & [stroke] {
+        stroke: var(--white);
+      }
+    }
+
+    &::before {
+      background-color: var(--white);
+    }
+    &:hover:not([disabled]) {
+      border-color: transparent;
+      &::before {
+        opacity: 0.14;
+      }
+    }
+    &:active:not([disabled]) {
+      border-color: transparent;
+      &::before {
+        opacity: 0.08;
+      }
+    }
+  }
+}
+
+/*
+BRAND STYLING
+Note: we might be able to figure out a better way to do this, maybe with an IE11 custom properties polyfill?
+See https://gist.github.com/zchsh/5eb843af4ef3a6d11b86ccb7af2251fd
+*/
+.g-btn.variant-secondary:not([disabled]) {
+  /* Brand -- HashiCorp */
+  /* Brand -- Vagrant */
+  /* Brand -- Vault */
+  &.brand-hashicorp,
+  &.brand-vault,
+  &.brand-vagrant {
+    /* Uses default values for --brand */
+  }
+
+  /* Brand -- Neutral */
+  &.brand-neutral {
+    &.background-brand-l3 {
+      &::before {
+        background: var(--black);
+      }
+    }
+  }
+
+  /* Brand -- Consul */
+  &.brand-consul {
+    &.background-brand-l3 {
+      &::before {
+        background: var(--consul);
+      }
+    }
+  }
+
+  /* Brand -- Nomad */
+  &.brand-nomad {
+    &.background-brand-l3 {
+      &::before {
+        background: var(--nomad);
+      }
+    }
+  }
+
+  /* Brand -- Packer */
+  &.brand-packer {
+    &.background-brand-l3 {
+      &::before {
+        background: var(--packer);
+      }
+    }
+  }
+
+  /* Brand -- Terraform */
+  &.brand-terraform {
+    &.background-brand-l3 {
+      &::before {
+        background: var(--terraform);
+      }
+    }
+  }
+
+  /* Brand -- Waypoint */
+  &.brand-waypoint {
+    &.background-brand-l3 {
+      &::before {
+        background: var(--waypoint);
+      }
+    }
+  }
+
+  /* Brand -- Boundary */
+  &.brand-boundary {
+    &.background-brand-l3 {
+      &::before {
+        background: var(--boundary);
+      }
+    }
+  }
+}

package/packages/button/styles/variant-tertiary-neutral.css

@@ -0,0 +1,65 @@
+@import '~@hashicorp/react-global-styles/custom-properties/color.css';
+
+.g-btn.variant-tertiary-neutral {
+  color: var(--black);
+  border-color: transparent;
+  background-color: transparent;
+
+  & .icon svg {
+    & [fill] {
+      fill: var(--black);
+    }
+    & [stroke] {
+      stroke: var(--black);
+    }
+  }
+
+  &.size-small,
+  &.size-medium {
+    padding: 0;
+  }
+
+  &:hover:not([disabled]) {
+    border-color: transparent;
+  }
+
+  &[disabled] {
+    &.background-light,
+    &.background-brand-l3 {
+      color: rgba(0, 0, 0, 0.3);
+      & .icon svg {
+        & [fill] {
+          fill: rgba(0, 0, 0, 0.3);
+        }
+        & [stroke] {
+          stroke: rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+    &.background-dark,
+    &.background-brand {
+      color: rgba(255, 255, 255, 0.3);
+      & .icon svg {
+        & [fill] {
+          fill: rgba(255, 255, 255, 0.3);
+        }
+        & [stroke] {
+          stroke: rgba(255, 255, 255, 0.3);
+        }
+      }
+    }
+  }
+
+  &.background-dark,
+  &.background-brand {
+    color: var(--white);
+    & .icon svg {
+      & [fill] {
+        fill: var(--white);
+      }
+      & [stroke] {
+        stroke: var(--white);
+      }
+    }
+  }
+}