fix: Add Warp component-classes to the box component (#19)

docs/src/Main.tsx

@@ -10,9 +10,9 @@ import Alert from '../../packages/alert/docs/Alert.mdx';
 import Button from '../../packages/button/docs/Button.mdx';
 import TextField from '../../packages/textfield/docs/TextField.mdx';
 import TextArea from '../../packages/textarea/docs/TextArea.mdx';
+import Box from '../../packages/box/docs/Box.mdx';
 
 /*
-import Box from '../../packages/box/docs/Box.mdx';
 import Breadcrumbs from '../../packages/breadcrumbs/docs/Breadcrumbs.mdx';
 import Pill from '../../packages/pill/docs/Pill.mdx';
 import Card from '../../packages/card/docs/Card.mdx';
@@ -67,6 +67,10 @@ const App = () => {
             <TextArea />
           </Route>
 
+          <Route path="/box">
+            <Box />
+          </Route>
+
           {/*
           <Route path="/modal">
             <Modal />
@@ -101,10 +105,6 @@ const App = () => {
             <Pill />
           </Route>
 
-          <Route path="/box">
-            <Box />
-          </Route>
-
           <Route path="/expandable">
             <Expandable />
           </Route>

package.json

@@ -101,7 +101,7 @@
   },
   "dependencies": {
     "@chbphone55/classnames": "^2.0.0",
-    "@warp-ds/component-classes": "^1.0.0-alpha.32",
+    "@warp-ds/component-classes": "^1.0.0-alpha.35",
     "@warp-ds/core": "^1.0.0",
     "react-focus-lock": "^2.5.2",
     "resize-observer-polyfill": "^1.5.1",

packages/box/docs/Box.mdx

@@ -22,6 +22,15 @@ import { Box } from '@warp-ds/react';
 </Box>
 ```
 
+### Neutral
+
+```jsx example
+<Box neutral>
+  <h1>Neutral example</h1>
+  <p>Box contents go here.</p>
+</Box>
+```
+
 ### Info
 
 ```jsx example
@@ -40,10 +49,10 @@ import { Box } from '@warp-ds/react';
 </Box>
 ```
 
-### Clickable (using button)
+### Clickable - Neutral (using button)
 
 ```jsx example
-<Box info clickable>
+<Box neutral clickable>
   <h1>
     <Clickable className="font-bold" onClick={() => alert('hey')}>
       Clickable example
@@ -53,7 +62,7 @@ import { Box } from '@warp-ds/react';
 </Box>
 ```
 
-### Clickable (using anchor)
+### Clickable - Info (using anchor)
 
 ```jsx example
 <Box info clickable>
@@ -70,11 +79,19 @@ import { Box } from '@warp-ds/react';
 </Box>
 ```
 
-### Neutral
+### Clickable - Bordered (using anchor)
 
 ```jsx example
-<Box neutral>
-  <h1>Neutral example</h1>
+<Box bordered clickable>
+  <h1>
+    <Clickable
+      className="font-bold text-gray-700 hover:no-underline"
+      href="https://finn.no"
+      target="_blank"
+    >
+      Clickable example
+    </Clickable>
+  </h1>
   <p>Box contents go here.</p>
 </Box>
 ```

packages/box/src/component.tsx

@@ -1,5 +1,5 @@
 import { classNames } from '@chbphone55/classnames';
-import { box } from '@warp-ds/component-classes';
+import { box as ccBox } from '@warp-ds/component-classes';
 import React from 'react';
 import { BoxProps } from './props';
 
@@ -20,15 +20,15 @@ export function Box(props: BoxProps) {
     {
       ...(rest as Omit<BoxProps, 'children'> as {}),
       className: classNames(
-        box.box,
+        ccBox.box,
         {
-          [box.bleed]: bleed,
-          [box.clickable]: clickable,
-          'bg-aqua-50': info,
-          'hover:bg-aqua-100 active:bg-aqua-200': info && clickable,
-          'bg-bluegray-100': neutral,
-          'hover:bg-bluegray-200 active:bg-bluegray-300': neutral && clickable,
-          'border-2 border-bluegray-300': bordered,
+          [ccBox.bleed]: bleed,
+          [ccBox.info]: info,
+          [ccBox.neutral]: neutral,
+          [ccBox.bordered]: bordered,
+          [ccBox.infoClickable]:clickable && info,
+          [ccBox.neutralClickable]: clickable && neutral,
+          [ccBox.borderedClickable]: clickable && bordered,
         },
         props.className,
       ),