Changes to convert project from standard website to using CSS Modules

Master_CSSModule.diff

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c33be6e..0988112 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import './button.css';
+import styles from './button.module.css';
 
 interface ButtonProps {
   /**
@@ -34,11 +34,11 @@ export const Button = ({
   label,
   ...props
 }: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary ? styles['storybook-button--primary'] : styles['storybook-button--secondary'];
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={`${styles['storybook-button']} ${styles['storybook-button--' + size]} ${mode}`}
       style={{ backgroundColor }}
       {...props}
     >
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c806ddf..9207d8a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
 import { Button } from './Button';
-import './header.css';
+import styles from './header.module.css';
+
+console.log('styles', styles)
 
 type User = {
   name: string;
@@ -16,7 +18,7 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="storybook-header">
+    <div className={styles["storybook-header"]}>
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
@@ -39,7 +41,7 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
       <div>
         {user ? (
           <>
-            <span className="welcome">
+            <span className={styles["welcome"]}>
               Welcome, <b>{user.name}</b>!
             </span>
             <Button size="small" onClick={onLogout} label="Log out" />
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 1727063..38fd973 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import logo from './assets/logo.svg';
 import { Header } from './Header';
-import './page.css';
+import styles from './page.module.css';
 
 type User = {
   name: string;
@@ -19,13 +19,13 @@ export const Page: React.FC = () => {
         onLogout={() => setUser(undefined)}
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
-      <section className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+      <section className={styles["App-header"]}>
+        <img src={logo} className={styles["App-logo"]} alt="logo" />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
         <a
-          className="App-link"
+          className={styles["App-link"]}
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
@@ -33,7 +33,7 @@ export const Page: React.FC = () => {
           Learn React
         </a>
       </section>
-      <section className="storybook-page">
+      <section className={styles["storybook-page"]}>
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
@@ -68,8 +68,8 @@ export const Page: React.FC = () => {
           </a>
           .
         </p>
-        <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+        <div className={styles["tip-wrapper"]}>
+          <span className={styles.tip}>Tip</span> Adjust the width of the canvas with the{' '}
           <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
             <g fill="none" fillRule="evenodd">
               <path
diff --git a/src/components/button.css b/src/components/button.module.css
similarity index 100%
rename from src/components/button.css
rename to src/components/button.module.css
diff --git a/src/components/header.css b/src/components/header.module.css
similarity index 100%
rename from src/components/header.css
rename to src/components/header.module.css
diff --git a/src/components/page.css b/src/components/page.module.css
similarity index 100%
rename from src/components/page.css
rename to src/components/page.module.css