feat: migrates Alert to css modules (#231)

* migrates alert to css modules

* update test

* remove usage of g-alert

* migrate to TS

* updates props file

* adds graphql type declaration

* remove unnecessary file

package.json

@@ -63,9 +63,6 @@
     }
   },
   "lint-staged": {
-    "*.+(js|jsx|ts|tsx)": [
-      "next-hashicorp format",
-      "next-hashicorp lint"
-    ]
+    "*.+(js|jsx|ts|tsx)": ["next-hashicorp format", "next-hashicorp lint"]
   }
 }

packages/accordion/package.json

@@ -3,9 +3,7 @@
   "description": "A block that displays a set of title + content items, with content collapsed by default, but expandable to view. Also includes an optional heading for the block.",
   "version": "2.0.2",
   "author": "HashiCorp",
-  "contributors": [
-    "Zach Shilton"
-  ],
+  "contributors": ["Zach Shilton"],
   "dependencies": {
     "@hashicorp/react-inline-svg": "^1.0.2"
   },

packages/alert-banner/package.json

@@ -4,11 +4,7 @@
   "version": "6.2.0",
   "author": "HashiCorp",
   "bugs": "https://github.com/hashicorp/react-components/issues?q=is:issue+%22alert-banner%22",
-  "contributors": [
-    "Zach Shilton",
-    "Jeff Escalante",
-    "Kendall Strautman"
-  ],
+  "contributors": ["Zach Shilton", "Jeff Escalante", "Kendall Strautman"],
   "dependencies": {
     "@hashicorp/platform-product-meta": "^0.1.0",
     "@hashicorp/react-inline-svg": "^6.0.2",

packages/alert/index.test.js

@@ -9,11 +9,16 @@ describe('<Alert />', () => {
   test('renders correctly', () => {
     const { container } = render(<Alert {...defaultProps} />)
     const rootElem = container.firstChild
-    expect(rootElem).toHaveClass('g-alert')
     expect(rootElem).toHaveClass(defaultProps.product)
     expect(rootElem).toHaveClass(defaultProps.textColor)
     expect(rootElem).toHaveAttribute('href', defaultProps.url)
     expect(screen.getByTestId('tag')).toHaveTextContent(defaultProps.tag)
     expect(screen.getByTestId('text')).toHaveTextContent(defaultProps.text)
   })
+
+  test('accepts a className prop', () => {
+    const { container } = render(<Alert {...defaultProps} className="alert" />)
+    const rootElem = container.firstChild
+    expect(rootElem).toHaveClass('alert')
+  })
 })

packages/alert/index.js → packages/alert/index.tsx

@@ -1,13 +1,28 @@
 import classNames from 'classnames'
-import useProductMeta from '@hashicorp/platform-product-meta'
+import useProductMeta, { Products } from '@hashicorp/platform-product-meta'
 import fragment from './fragment.graphql'
+import s from './style.module.css'
 
-function Alert({ product, url, tag, text, state, textColor }) {
+function Alert({
+  product,
+  url,
+  tag,
+  text,
+  state,
+  textColor,
+  className,
+}: AlertProps): React.ReactElement {
   const { themeClass } = useProductMeta(product)
   return (
     <a
       href={url}
-      className={classNames('g-alert', themeClass, state, textColor)}
+      className={classNames(
+        s.alertRoot,
+        themeClass,
+        state ? s[state] : false,
+        textColor ? s[textColor] : false,
+        className
+      )}
     >
       <span className="g-type-tag-label" data-testid="tag">
         {tag}
@@ -48,3 +63,13 @@ function ArrowIcon() {
 Alert.fragmentSpec = { fragment }
 
 export default Alert
+
+interface AlertProps {
+  product: Products
+  url: string
+  tag: string
+  text: string
+  state: 'success' | 'warning' | 'error'
+  textColor: 'dark' | 'light'
+  className?: string
+}

packages/alert/package.json

@@ -4,9 +4,7 @@
   "version": "5.0.1",
   "author": "HashiCorp",
   "bugs": "https://github.com/hashicorp/react-components/issues?q=is:issue+%22alert%22",
-  "contributors": [
-    "Jeff Escalante"
-  ],
+  "contributors": ["Jeff Escalante"],
   "homepage": "https://github.com/hashicorp/react-components/tree/master/packages/alert",
   "license": "MPL-2.0",
   "main": "index.jsx",

packages/alert/props.js

@@ -39,4 +39,9 @@ module.exports = {
     options: ['dark', 'light'],
     testValue: 'dark',
   },
+  className: {
+    description: 'class to apply to the root element',
+    control: { type: 'text' },
+    type: 'string',
+  },
 }

packages/alert/style.css → packages/alert/style.module.css

@@ -1,4 +1,4 @@
-.g-alert {
+.alertRoot {
   display: inline-flex;
   align-items: flex-start;
 

packages/button/package.json

@@ -3,9 +3,7 @@
   "description": "A clickable text box that allows a user to take an action.",
   "version": "5.3.0",
   "author": "HashiCorp",
-  "contributors": [
-    "Jeff Escalante"
-  ],
+  "contributors": ["Jeff Escalante"],
   "dependencies": {
     "@hashicorp/platform-product-meta": "^0.1.0",
     "@hashicorp/react-inline-svg": "^1.0.0",

packages/call-to-action/package.json

@@ -3,20 +3,14 @@
   "description": "Display a title, content, and links in a call-to-action format",
   "version": "3.1.3",
   "author": "HashiCorp",
-  "contributors": [
-    "Zach Shilton"
-  ],
+  "contributors": ["Zach Shilton"],
   "dependencies": {
     "@hashicorp/react-button": "^5.3.0"
   },
   "peerDependencies": {
     "@hashicorp/mktg-global-styles": ">=3.x"
   },
-  "keywords": [
-    "call to action",
-    "component",
-    "react"
-  ],
+  "keywords": ["call to action", "component", "react"],
   "license": "MPL-2.0",
   "publishConfig": {
     "access": "public"

packages/callouts/package.json

@@ -3,9 +3,7 @@
   "description": "Display a set of items, each with a title, description, option links, and an optional icon.",
   "version": "7.1.3",
   "author": "HashiCorp",
-  "contributors": [
-    "Zach Shilton"
-  ],
+  "contributors": ["Zach Shilton"],
   "dependencies": {
     "@hashicorp/platform-product-meta": "^0.1.0",
     "@hashicorp/react-button": "^5.3.0",