@hashicorp/react-components 0.0.0

package/packages/content-cta/docs.mdx

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

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

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

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

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

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

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

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

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