Add more items to Theming story, add card story

package.json

@@ -9,7 +9,7 @@
     "build": "node generate_translations.js && NODE_ENV=production vite build --base=/static/",
     "lint": "tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
     "start": "node generate_translations.js && vite --port 4444 --open",
-    "storybook": "start-storybook"
+    "storybook": "start-storybook -p 9009"
   },
   "keywords": [],
   "dependencies": {

src/custom.css

@@ -730,3 +730,6 @@ a.text-body {
   border-bottom-left-radius: 0;
 }
 
+button:hover [type="button"]:hover {
+  cursor: pointer;
+}

src/stories/Button.stories.tsx

@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
-import { Box,  Label,
+import {
+  Box,
+  Label,
   Input,
   Select,
   Textarea,
   Radio,
   Flex,
   Checkbox,
-  Slider, } from 'theme-ui';
+  Slider,
+} from 'theme-ui';
 import Button from '../components/elements/Button';
 import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
 import { themes } from '../theme';
@@ -21,16 +24,28 @@ export const Basic = () => {
           <ThemeSystemProvider key={theme} initialTheme={theme}>
             <Box bg="background" p={2}>
               <Button mx={1}>Primary</Button>
-              <Button variant="secondary" mx={1}>Secondary</Button>
-              <Button variant="highlight" mx={1}>Highlight</Button>
-              <Button variant="muted" mx={1}>Muted</Button>
-              <Button disabled mx={1}>Disabled</Button>
-              <Button variant="danger" mx={1}>Danger</Button>
-              <Button variant="outline" mx={1}>Outline</Button>
+              <Button variant="secondary" mx={1}>
+                Secondary
+              </Button>
+              <Button variant="highlight" mx={1}>
+                Highlight
+              </Button>
+              <Button variant="muted" mx={1}>
+                Muted
+              </Button>
+              <Button disabled mx={1}>
+                Disabled
+              </Button>
+              <Button variant="danger" mx={1}>
+                Danger
+              </Button>
+              <Button variant="outline" mx={1}>
+                Outline
+              </Button>
             </Box>
           </ThemeSystemProvider>
-        )
+        );
       })}
     </div>
-  )
-}
+  );
+};

src/stories/Card.stories.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { Box, Heading } from 'theme-ui';
+import Card from '../components/elements/Card';
+import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
+import { ThemeSelector } from '../theme';
+
+export default {
+  title: 'Card',
+};
+
+export const Basic = () => {
+  const [theme, setTheme] = useState('chapo');
+
+  return (
+    <ThemeSystemProvider>
+      <Box m={4}>
+        <ThemeSelector
+          value={theme}
+          onChange={newTheme => setTheme(newTheme)}
+        />
+      </Box>
+      <Box m={4}>
+        <Card>
+          <div className="card-body">
+            <Heading as="h4">
+              Trending{' '}
+              <a className="text-body" href="/communities">
+                communities
+              </a>
+            </Heading>
+            <ul className="list-inline">
+              <li className="list-inline-item">
+                <a href="/c/nullcom">nullcom</a>
+              </li>
+              <li className="list-inline-item">
+                <a href="/c/chapotraphouse">chapotraphouse</a>
+              </li>
+              <li className="list-inline-item">
+                <a href="/c/mls">mls</a>
+              </li>
+              <li className="list-inline-item">
+                <a href="/c/readonly_test">readonly_test</a>
+              </li>
+              <li className="list-inline-item">
+                <a href="/c/dad">dad</a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h5>
+              Subscribed to{' '}
+              <a className="text-body" href="/communities">
+                communities
+              </a>
+            </h5>
+            <ul className="list-inline">
+              <li className="list-inline-item">
+                <a href="/c/bug_reports">bug_reports</a>
+              </li>
+              <li className="list-inline-item">
+                <a href="/c/tacobell">tacobell</a>
+              </li>
+            </ul>
+          </div>
+          <div className="css-4cffwv">
+            <a className="css-18q9lsw" href="/create_community">
+              Create a Community
+            </a>
+          </div>
+        </Card>
+      </Box>
+    </ThemeSystemProvider>
+  );
+};

src/stories/Theming.stories.tsx

@@ -1,93 +1,101 @@
 import React, { useState } from 'react';
-import { Box,  Label,
+import {
+  Box,
+  Label,
   Input,
   Select,
   Textarea,
   Radio,
   Flex,
   Checkbox,
-  Slider, } from 'theme-ui';
+  Slider,
+  Heading,
+  Spinner,
+  Badge,
+  Alert,
+} from 'theme-ui';
 import Button from '../components/elements/Button';
 import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
 import { ThemeSelector } from '../theme';
 // import { Button } from '@storybook/react/demo';
 
-
 export default { title: 'Themes' };
 
 function Form() {
   return (
-    <Box
-  as='form'
-  onSubmit={e => e.preventDefault()}>
-  <Label htmlFor='username'>Username</Label>
-  <Input
-    name='username'
-    id='username'
-    mb={3}
-  />
-  <Label htmlFor='password'>Password</Label>
-  <Input
-    type='password'
-    name='password'
-    id='password'
-    mb={3}
-  />
-  <Box>
-    <Label mb={3}>
-      <Checkbox />
-      Remember me
-    </Label>
-  </Box>
-  <Label htmlFor='sound'>Sound</Label>
-  <Select name='sound' id='sound' mb={3}>
-    <option>Beep</option>
-    <option>Boop</option>
-    <option>Blip</option>
-  </Select>
-  <Label htmlFor='comment'>Comment</Label>
-  <Textarea
-    name='comment'
-    id='comment'
-    rows='6'
-    mb={3}
-  />
-  <Flex mb={3}>
-    <Label>
-      <Radio name='letter' /> Alpha
-    </Label>
-    <Label>
-      <Radio name='letter' /> Bravo
-    </Label>
-    <Label>
-      <Radio name='letter' /> Charlie
-    </Label>
-  </Flex>
-  <Label>
-    Slider
-  </Label>
-  <Slider mb={3} />
-  <Button variant="primary">
-        Submit
-  </Button>
-  <Button variant='secondary'>
-    Cancel
-  </Button>
-</Box>
-  )
+    <Box as="form" onSubmit={e => e.preventDefault()}>
+      <Label htmlFor="username">Username</Label>
+      <Input name="username" id="username" mb={3} />
+      <Box>
+        <Label mb={3}>
+          <Checkbox />
+          Remember me
+        </Label>
+      </Box>
+      <Label htmlFor="comment">Comment</Label>
+      <Textarea name="comment" id="comment" rows="6" mb={3} />
+      <Flex mb={3}>
+        <Label>
+          <Radio name="letter" /> Alpha
+        </Label>
+        <Label>
+          <Radio name="letter" /> Bravo
+        </Label>
+        <Label>
+          <Radio name="letter" /> Charlie
+        </Label>
+      </Flex>
+      <Label>Slider</Label>
+      <Slider mb={3} />
+      <Button variant="primary">Submit</Button>
+      <Button variant="secondary">Cancel</Button>
+    </Box>
+  );
 }
 
+const Badges = () => (
+  <Box my={3}>
+    <Heading>Badges</Heading>
+    <Badge mr={2}>Badge 1</Badge>
+    <Badge variant="outline">Badge 2</Badge>
+  </Box>
+);
+
+const Alerts = () => (
+  <Box my={3}>
+    <Heading>Alerts</Heading>
+    <Alert variant="primary" mb={2}>
+      Primary
+    </Alert>
+    <Alert variant="secondary" mb={2}>
+      Secondary
+    </Alert>
+    <Alert variant="muted" mb={2}>
+      Muted
+    </Alert>
+  </Box>
+);
+
 export const Basic = () => {
   const [theme, setTheme] = useState('chapo');
 
   return (
     <ThemeSystemProvider>
-      <Box m={4}>
+      <Box m={4} css={{ maxWidth: '700px' }}>
         <Box mb={2}>
-          <ThemeSelector value={theme} onChange={newTheme => setTheme(newTheme)} />
+          <Label>Theme</Label>
+          <ThemeSelector
+            value={theme}
+            onChange={newTheme => setTheme(newTheme)}
+          />
         </Box>
         <Form />
+        <Box my={3}>
+          <Spinner />
+          <Badges />
+          <Alerts />
+        </Box>
       </Box>
     </ThemeSystemProvider>
-  )
-};
+  );
+};

src/theme.tsx

@@ -16,21 +16,23 @@ export const variants = {
       cursor: 'pointer',
       '&:hover': {
         textDecoration: 'none',
+        cursor: 'pointer',
       },
       '&:disabled': {
         opacity: 0.5,
         cursor: 'not-allowed',
       },
     },
-    muted: {
-      bg: 'muted',
-      color: 'text',
-    },
     secondary: {
       color: 'background',
       bg: 'secondary',
     },
+    muted: {
+      bg: 'muted',
+      color: 'text',
+    },
     highlight: {
+      bg: 'highlight',
       color: 'text',
       '&:hover': {
         backgroundColor: 'muted',
@@ -54,6 +56,16 @@ export const variants = {
       color: 'text',
     },
   },
+  alerts: {
+    primary: {
+      color: 'background',
+      bg: 'primary',
+    },
+    muted: {
+      color: 'text',
+      bg: 'muted',
+    },
+  },
 };
 
 const defaultTheme: ThemeProviderProps<Theme> = {
@@ -72,14 +84,37 @@ const defaultTheme: ThemeProviderProps<Theme> = {
     primary: {
       ...variants.buttons.primary,
       color: 'text',
-      bg: 'primary'
+      bg: 'primary',
     },
     secondary: {
       ...variants.buttons.secondary,
       color: 'text',
       bg: 'secondary',
-    }
-  }
+    },
+    highlight: {
+      ...variants.buttons.highlight,
+      color: 'text',
+      bg: lighten('muted', 0.1),
+    },
+  },
+  alerts: {
+    ...variants.alerts,
+    primary: {
+      ...variants.alerts.primary,
+      color: 'text',
+      bg: 'primary',
+    },
+    secondary: {
+      ...variants.alerts.secondary,
+      color: 'text',
+      bg: 'secondary',
+    },
+    highlight: {
+      ...variants.alerts.highlight,
+      color: 'text',
+      bg: lighten('muted', 0.1),
+    },
+  },
 };
 
 export const themes = {