feat(content-cta)!: convert to CSS modules (#306)

* refactor(content-cta)!: convert to CSS modules

* feat(content-cta): support className prop, add changeset

.changeset/selfish-pigs-agree.md

@@ -0,0 +1,7 @@
+---
+'@hashicorp/react-content-cta': major
+---
+
+- 💥✨ BREAKING CHANGE: Converts to CSS modules.
+  - Consumers will need to remove any `@hashicorp/react-content-cta/style.css` imports.
+  - To support overrides in projects, consumers can use the `className` prop.

packages/content-cta/index.js

@@ -1,12 +1,14 @@
 import useProductMeta from '@hashicorp/platform-product-meta'
 import classNames from 'classnames'
 import Button from '@hashicorp/react-button'
+import s from './style.module.css'
 
 export default function ContentCta({
   heading,
   content,
   product = 'hashicorp',
   links,
+  className,
 }) {
   if (!heading || !content) {
     throw new Error('<ContentCTA /> requires heading & content props')
@@ -21,26 +23,32 @@ export default function ContentCta({
 
   return (
     <div
-      className={classNames('g-content-cta', themeClass, {
-        hasTheme: themeClass,
-      })}
+      className={classNames(
+        s.root,
+        themeClass,
+        {
+          [s.hasTheme]: themeClass,
+        },
+        className
+      )}
     >
-      <h4 data-testid="heading" className="g-type-display-4">
+      <h4 data-testid="heading" className={s.heading}>
         {heading}
       </h4>
 
       {isContentString ? (
-        <p data-testid="content" className="g-type-body">
+        <p data-testid="content" className={s.content}>
           {content}
         </p>
       ) : isContentRenderProp ? (
         content()
       ) : null}
       {hasLinks && (
-        <div data-testid="links" className="links">
+        <div data-testid="links" className={s.links}>
           {links.map(({ title, url }, i) => (
             <Button
               key={title}
+              className={i === 0 ? s.firstLink : ''}
               title={title}
               url={url}
               theme={{

packages/content-cta/index.test.js

@@ -19,11 +19,14 @@ const baseProps = {
 }
 
 describe('<ContentCta />', () => {
-  it('should render a `.g-content-cta` <div> root element', () => {
-    const { container } = render(<ContentCta {...baseProps} />)
+  it('should add a provided className to the root element', () => {
+    const className = 'my-content-cta'
+    const { container } = render(
+      <ContentCta {...baseProps} className={className} />
+    )
     const rootElem = container.firstChild
     expect(rootElem.tagName).toBe('DIV')
-    expect(rootElem).toHaveClass('g-content-cta')
+    expect(rootElem).toHaveClass(className)
   })
 
   it('should display simple heading and content strings and links', () => {

packages/content-cta/props.js

@@ -12,6 +12,10 @@ module.exports = {
   product: {
     ...baseProps.product,
   },
+  className: {
+    type: 'string',
+    description: 'Optional className to add to the root element',
+  },
   links: {
     type: 'array',
     properties: [

packages/content-cta/style.module.css

@@ -0,0 +1,44 @@
+.root {
+  padding: 28px;
+
+  &.hasTheme {
+    --link-color: var(--brand-link);
+
+    background: var(--brand-secondary);
+  }
+}
+
+.heading {
+  composes: g-type-display-4 from global;
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.content {
+  composes: g-type-body from global;
+
+  & p {
+    margin: 0;
+    max-width: 30em;
+    color: var(--gray-2);
+
+    & a {
+      color: var(--link-color);
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.links {
+  margin-top: 28px;
+}
+
+.firstLink {
+  margin-right: 16px;
+
+  @media (max-width: 468px) {
+    margin-bottom: 16px;
+  }
+}

pages/global.css

@@ -8,7 +8,6 @@
 @import '../packages/call-to-action/style.css';
 @import '../packages/product-features-list/style.css';
 @import '../packages/enterprise-alert/style.css';
-@import '../packages/content-cta/style.css';
 @import '../packages/toggle/style.css';
 @import '../packages/text-input/style.css';
 @import '../packages/logo-grid/style.css';