@hashicorp/react-components 0.0.0 → 1.0.0

package/packages/content-cta/docs.mdx

@@ -1,25 +0,0 @@
----
-componentName: 'ContentCta'
----
-
-A flexible call-to-action component used in a variety of places on HashiCorp websites
-
-<LiveComponent>{`<ContentCta
-  product="terraform"
-  heading="My Custom Heading"
-  content="Compare Terraform Cloud and Terraform Enterprise features to find the best fit for your organization."
-  links={[
-    {
-      title: 'Compare Features',
-      url: 'example.com',
-    },
-    {
-      title: 'Contact Sales',
-      url: 'example.com',
-    },
-  ]}
-/>`}</LiveComponent>
-
-### Props
-
-<PropsTable props={componentProps} />

package/packages/content-cta/index.js

@@ -1,49 +0,0 @@
-import Button from '@hashicorp/react-button'
-
-export default function ContentCta({
-  heading,
-  content,
-  product = 'hashicorp',
-  links,
-}) {
-  if (!heading || !content) {
-    throw new Error('<ContentCTA /> requires heading & content props')
-  }
-  const hasLinks = links && links.length > 0
-  if (hasLinks && links.filter((l) => !l.title || !l.url).length > 0) {
-    throw new Error('<ContentCTA /> `links` must have both a title and a URL')
-  }
-  const isContentString = typeof content === 'string'
-  const isContentRenderProp = typeof content === 'function'
-  return (
-    <div className={`g-content-cta ${product}`}>
-      <h4 data-testid="heading" className="g-type-display-4">
-        {heading}
-      </h4>
-
-      {isContentString ? (
-        <p data-testid="content" className="g-type-body">
-          {content}
-        </p>
-      ) : isContentRenderProp ? (
-        content()
-      ) : null}
-      {hasLinks && (
-        <div data-testid="links" className="links">
-          {links.map(({ title, url }, i) => (
-            <Button
-              key={title}
-              title={title}
-              url={url}
-              theme={{
-                brand: product,
-                variant: i === 0 ? 'primary' : 'secondary',
-              }}
-              size="small"
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

package/packages/content-cta/index.test.js

@@ -1,78 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import ContentCta from './'
-
-const baseProps = {
-  product: 'terraform',
-  heading: 'Lorem Ipsum Dolor Sit Amet',
-  content:
-    'Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  links: [
-    {
-      title: 'First Action',
-      url: 'https://www.example.com',
-    },
-    {
-      title: 'Second Action',
-      url: 'https://www.example.com',
-    },
-  ],
-}
-
-describe('<ContentCta />', () => {
-  it('should render a `.g-content-cta` <div> root element', () => {
-    const { container } = render(<ContentCta {...baseProps} />)
-    const rootElem = container.firstChild
-    expect(rootElem.tagName).toBe('DIV')
-    expect(rootElem).toHaveClass('g-content-cta')
-  })
-
-  it('should display simple heading and content strings and links', () => {
-    const { heading, content } = baseProps
-    render(<ContentCta {...baseProps} />)
-    expect(screen.getByText(heading)).toBeVisible()
-    expect(screen.getByText(content)).toBeVisible()
-    expect(screen.getByTestId('heading')).toBeVisible()
-    expect(screen.getByTestId('content')).toBeVisible()
-    expect(screen.getByTestId('links')).toBeVisible()
-  })
-
-  it('should render links passed to it', () => {
-    render(<ContentCta {...baseProps} />)
-    baseProps.links.forEach((link) => {
-      expect(screen.getByText(link.title)).toBeVisible()
-    })
-  })
-
-  it('should throw an error if heading, content, or product is not supplied', () => {
-    const basePropsModified = Object.assign({}, baseProps)
-    delete basePropsModified.heading
-    delete basePropsModified.content
-    delete basePropsModified.product
-    //  Suppress console.error for this test, we expect an error
-    jest.spyOn(console, 'error')
-    global.console.error.mockImplementation(() => {})
-    expect(() => {
-      render(<ContentCta {...basePropsModified} />)
-    }).toThrowError()
-    //  Restore console.error for further tests
-    global.console.error.mockRestore()
-  })
-
-  it('should throw an error when a link with missing properties is supplied', () => {
-    const basePropsModified = Object.assign({}, baseProps)
-    delete basePropsModified.links
-    //  Suppress console.error for this test, we expect an error
-    jest.spyOn(console, 'error')
-    global.console.error.mockImplementation(() => {})
-    const urlButNoText = [{ url: 'URL but no text' }]
-    expect(() => {
-      render(<ContentCta {...basePropsModified} links={urlButNoText} />)
-    }).toThrowError()
-    const textButNoUrl = [{ title: 'title But No URL' }]
-    expect(() => {
-      render(<ContentCta {...basePropsModified} links={textButNoUrl} />)
-    }).toThrowError()
-    //  Restore console.error for further tests
-    global.console.error.mockRestore()
-  })
-})

package/packages/content-cta/package-lock.json

@@ -1,27 +0,0 @@
-{
-	"name": "@hashicorp/react-content-cta",
-	"version": "1.0.11",
-	"lockfileVersion": 1,
-	"requires": true,
-	"dependencies": {
-		"@hashicorp/react-button": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.3.0.tgz",
-			"integrity": "sha512-1C6V8OxadkdDAkwgItDfNxx7ns9EB6znK39V94RBiPvElmsNLCEG7zujcQX71V2n+HMSv1JPgDvXp4WLICzK+Q==",
-			"requires": {
-				"@hashicorp/react-inline-svg": "^1.0.0",
-				"slugify": "^1.3.6"
-			}
-		},
-		"@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/content-cta/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "@hashicorp/react-content-cta",
-  "description": "alert style content callout with product theming",
-  "version": "1.0.11",
-  "author": "HashiCorp",
-  "contributors": [
-    "Nicole Forrester"
-  ],
-  "dependencies": {
-    "@hashicorp/react-button": "^2.2.6"
-  },
-  "license": "MPL-2.0",
-  "peerDependencies": {
-    "react": "^16.9.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "style": "./style.css"
-}

package/packages/content-cta/props.js

@@ -1,41 +0,0 @@
-module.exports = {
-  heading: {
-    type: 'string',
-    required: true,
-  },
-  content: {
-    type: 'string|function',
-    required: true,
-  },
-  product: {
-    type: 'string',
-    control: { type: 'select' },
-    options: [
-      'hashicorp',
-      'terraform',
-      'vault',
-      'consul',
-      'nomad',
-      'packer',
-      'vagrant',
-    ],
-  },
-  links: {
-    type: 'array',
-    properties: [
-      {
-        type: 'object',
-        properties: {
-          url: {
-            type: 'string',
-            description: 'link url',
-          },
-          text: {
-            type: 'string',
-            description: 'link text',
-          },
-        },
-      },
-    ],
-  },
-}

package/packages/content-cta/stories/examples.stories.js

@@ -1,51 +0,0 @@
-import React from 'react'
-import ContentCta from '../index.props.js'
-import DocsPage from './docs.mdx'
-
-export const Basic = () => (
-  <ContentCta
-    product="terraform"
-    heading="My Custom Heading"
-    content="Compare Terraform Cloud and Terraform Enterprise features to find the best fit for your organization."
-    links={[
-      {
-        title: 'Compare Features',
-        url: 'example.com',
-      },
-      {
-        title: 'Contact Sales',
-        url: 'example.com',
-      },
-    ]}
-  />
-)
-
-export const ContentRenderProp = () => (
-  <ContentCta
-    product="terraform"
-    heading="With Content Render Prop"
-    content={() => (
-      <p className="g-type-body">
-        Custom content text. This is an <a href="example.com">example link</a>.
-        Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id
-        elit.
-      </p>
-    )}
-    links={[
-      {
-        title: 'Compare Features',
-        url: 'example.com',
-      },
-      {
-        title: 'Contact Sales',
-        url: 'example.com',
-      },
-    ]}
-  />
-)
-
-export default {
-  title: 'Blocks|Content Cta/Examples',
-  component: ContentCta,
-  parameters: { docs: { page: DocsPage } },
-}

package/packages/content-cta/stories/with-knobs.stories.js

@@ -1,58 +0,0 @@
-import React from 'react'
-import ContentCta from '../index.props.js'
-import DocsPage from './docs.mdx'
-import { withKnobs, text, select } from '@storybook/addon-knobs'
-
-const propsBase = {
-  product: 'terraform',
-  heading: 'My Custom Heading',
-  content:
-    'Compare Terraform Cloud and Terraform Enterprise features to find the best fit for your organization.',
-  links: [
-    {
-      title: 'Compare Features',
-      url: 'example.com',
-    },
-    {
-      title: 'Contact Sales',
-      url: 'example.com',
-    },
-  ],
-}
-
-export const WithKnobs = () => {
-  const heading = text('Heading', propsBase.heading)
-  const content = text('Content', propsBase.content)
-  const product = select(
-    'product',
-    ['terraform', 'vault', 'consul', 'nomad', 'packer', 'vagrant'],
-    propsBase.product
-  )
-  return (
-    <ContentCta
-      product={product}
-      heading={heading}
-      content={content}
-      links={[
-        {
-          title: 'Compare Features',
-          url: 'example.com',
-        },
-        {
-          title: 'Contact Sales',
-          url: 'example.com',
-        },
-      ]}
-    />
-  )
-}
-
-WithKnobs.story = {
-  decorators: [withKnobs({ escapeHTML: false })],
-}
-
-export default {
-  title: 'Blocks|Content Cta/With Knobs',
-  component: ContentCta,
-  parameters: { docs: { page: DocsPage } },
-}

package/packages/content-cta/style.css

@@ -1,80 +0,0 @@
-.g-content-cta {
-  padding: 28px;
-
-  & h4 {
-    margin-top: 0;
-    margin-bottom: 16px;
-  }
-
-  & p {
-    margin: 0;
-    max-width: 30em;
-    color: var(--gray-2);
-
-    & a:hover {
-      text-decoration: underline;
-    }
-  }
-
-  & .links {
-    margin-top: 28px;
-    & a:first-child {
-      margin-right: 16px;
-
-      @media (max-width: 468px) {
-        margin-bottom: 16px;
-      }
-    }
-  }
-
-  &.terraform {
-    border: 1px solid var(--terraform-l2);
-    background: var(--terraform-l3);
-
-    & h4,
-    & p > a {
-      color: var(--terraform);
-    }
-  }
-  &.nomad {
-    border: 1px solid var(--nomad-l2);
-    background: var(--nomad-l3);
-    & h4,
-    & p > a {
-      color: var(--nomad);
-    }
-  }
-  &.consul {
-    border: 1px solid var(--consul-l2);
-    background: var(--consul-l3);
-    & h4,
-    & p > a {
-      color: var(--consul);
-    }
-  }
-  &.packer {
-    border: 1px solid var(--packer-l2);
-    background: var(--packer-l3);
-    & h4,
-    & p > a {
-      color: var(--packer);
-    }
-  }
-  &.vault {
-    border: 1px solid var(--vault-l2);
-    background: var(--vault-l3);
-    & h4,
-    & p > a {
-      color: var(--vault);
-    }
-  }
-
-  &.vagrant {
-    border: 1px solid var(--vagrant-l2);
-    background: var(--vagrant-l3);
-    & h4,
-    & p > a {
-      color: var(--vagrant);
-    }
-  }
-}