@hashicorp/react-components 0.0.0 → 1.0.0

package/packages/button/index.js

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

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

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

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

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

@@ -1,179 +0,0 @@
-@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);
-      }
-    }
-  }
-}