chore: update styling method to use clsx and camel case

chanzuckerberg · Mar 26, 2021 · 7ed3d73 · 7ed3d73
1 parent 8c34ef1
commit 7ed3d73
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 46 deletions.
diff --git a/packages/components/src/TestComponent/TestComponent.module.css b/packages/components/src/TestComponent/TestComponent.module.css
@@ -1,13 +1,7 @@
-.testComponent--container {
-  @apply text-body leading-body;
-  @apply text-brand-700;
+.container {
   @apply w-full;
 }
 
-.testComponent--align-left {
-  @apply text-left;
-}
-
-.testComponent--align-right {
+.alignRight {
   @apply text-right;
 }
diff --git a/packages/components/src/TestComponent/TestComponent.tsx b/packages/components/src/TestComponent/TestComponent.tsx
@@ -1,10 +1,8 @@
 import React, { ReactNode } from "react";
 
-import classNames from "classnames/bind";
+import clsx from "clsx";
 import styles from "./TestComponent.module.css";
 
-const cx = classNames.bind(styles);
-
 type Props = {
   /**
    * Child node(s) that can be nested inside component.
@@ -17,16 +15,13 @@ type Props = {
 };
 
 /**
- * This component is a replica of the template created by plop found in plop-templates.
- * TODO: Find a way to keep these 2 files in sync.
+ * A super cool component that does a really awesome thing.
+ * TODO: Update to describe your component!
  */
 function TestComponent({ children, align }: Props) {
   return (
     <div
-      className={cx(
-        "testComponent--container",
-        `testComponent--align-${align}`
-      )}
+      className={clsx(styles.container, align === "right" && styles.alignRight)}
     >
       {children}
     </div>

diff --git a/packages/components/src/TestComponent/__snapshots__/TestComponent.spec.tsx.snap b/packages/components/src/TestComponent/__snapshots__/TestComponent.spec.tsx.snap
diff --git a/plop-templates/Component/Component.module.css.hbs b/plop-templates/Component/Component.module.css.hbs
@@ -1,13 +1,7 @@
-.{{camelCase name}}--container {
-  @apply text-body leading-body;
-  @apply text-brand-700;
+.container {
   @apply w-full;
 }
 
-.{{camelCase name}}--align-left {
-  @apply text-left;
-}
-
-.{{camelCase name}}--align-right {
+.alignRight {
   @apply text-right;
 }
diff --git a/plop-templates/Component/Component.tsx.hbs b/plop-templates/Component/Component.tsx.hbs
@@ -1,10 +1,8 @@
 import React, { ReactNode } from "react";
 
-import classNames from "classnames/bind";
+import clsx from "clsx";
 import styles from "./{{pascalCase name}}.module.css";
 
-const cx = classNames.bind(styles);
-
 type Props = {
   /**
    * Child node(s) that can be nested inside component.
@@ -22,7 +20,12 @@ type Props = {
  */
 function {{pascalCase name}}({ children, align }: Props) {
   return (
-    <div className={cx("{{camelCase name}}--container", `{{camelCase name}}--align-${align}`)}>
+    <div
+      className={clsx(
+        styles.container,
+        align === "right" && styles.alignRight,
+      )}
+    >
       {children}
     </div>
   );