Migrate Button to css-modules (hacky version)

Khan · May 18, 2024 · 44e311a · 44e311a
1 parent 6e0558c
commit 44e311a
Show file tree

Hide file tree

Showing 10 changed files with 1,261 additions and 364 deletions.
diff --git a/__docs__/wonder-blocks-button/button.stories.module.css b/__docs__/wonder-blocks-button/button.stories.module.css
@@ -0,0 +1,28 @@
+.row {
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: var(--wb-spacing-xSmall_8);
+}
+
+.button {
+    margin-right: var(--wb-spacing-xSmall_8);
+}
+
+.truncatedButton {
+    max-width: 200px;
+    margin-bottom: var(--wb-spacing-medium_16);
+}
+
+.fillSpace {
+    min-width: 140px;
+}
+
+.example {
+    background: var(--wb-color-offWhite);
+    padding: var(--wb-spacing-medium_16);
+}
+
+.label {
+    margin-top: var(--wb-spacing-large_24);
+    margin-bottom: var(--wb-spacing-xSmall_8);
+}
diff --git a/__docs__/wonder-blocks-button/button.stories.tsx b/__docs__/wonder-blocks-button/button.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
+// import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 import {expect, fireEvent, userEvent, within} from "@storybook/test";
 
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 
-import type {StyleDeclaration} from "aphrodite";
+// import type {StyleDeclaration} from "aphrodite";
 
 import pencilSimple from "@phosphor-icons/core/regular/pencil-simple.svg";
 import pencilSimpleBold from "@phosphor-icons/core/bold/pencil-simple-bold.svg";
@@ -27,6 +27,8 @@ import ComponentInfo from "../../.storybook/components/component-info";
 import ButtonArgTypes from "./button.argtypes";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
 
+import styles from "./button.stories.module.css";
+
 /**
  * Reusable button component.
  *
@@ -132,31 +134,31 @@ export const Tertiary: StoryComponentType = {
     },
 };
 
-export const styles: StyleDeclaration = StyleSheet.create({
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-        marginBottom: spacing.xSmall_8,
-    },
-    button: {
-        marginRight: spacing.xSmall_8,
-    },
-    truncatedButton: {
-        maxWidth: 200,
-        marginBottom: spacing.medium_16,
-    },
-    fillSpace: {
-        minWidth: 140,
-    },
-    example: {
-        background: color.offWhite,
-        padding: spacing.medium_16,
-    },
-    label: {
-        marginTop: spacing.large_24,
-        marginBottom: spacing.xSmall_8,
-    },
-});
+// export const styles: StyleDeclaration = StyleSheet.create({
+//     row: {
+//         flexDirection: "row",
+//         alignItems: "center",
+//         marginBottom: spacing.xSmall_8,
+//     },
+//     button: {
+//         marginRight: spacing.xSmall_8,
+//     },
+//     truncatedButton: {
+//         maxWidth: 200,
+//         marginBottom: spacing.medium_16,
+//     },
+//     fillSpace: {
+//         minWidth: 140,
+//     },
+//     example: {
+//         background: color.offWhite,
+//         padding: spacing.medium_16,
+//     },
+//     label: {
+//         marginTop: spacing.large_24,
+//         marginBottom: spacing.xSmall_8,
+//     },
+// });
 
 export const Variants: StoryComponentType = () => (
     <View style={{padding: spacing.medium_16, gap: spacing.medium_16}}>

diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "babel-loader": "^8.2.3",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "chromatic": "^6.0.4",
+    "class-variance-authority": "^0.7.0",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",

diff --git a/packages/wonder-blocks-button/package.json b/packages/wonder-blocks-button/package.json
@@ -31,6 +31,7 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "^1.0.0"
+    "@khanacademy/wb-dev-build-settings": "^1.0.0",
+    "class-variance-authority": "^0.7.0"
   }
 }