fix: add card element

packages/components/src/atoms/button/Button.tsx

@@ -11,7 +11,7 @@ import { InteractableProps, Text, IconProps } from '../../primal';
 import { StyledInteractable, iconOrientations, iconMargins } from './styled';
 
 export interface Props
-  extends InteractableProps,
+  extends Omit<InteractableProps, 'size'>,
     Partial<
       Omit<
         HTMLButtonElement,
@@ -23,6 +23,7 @@ export interface Props
   variant?: string;
   intent?: string;
   strong?: boolean;
+  size?: 'sm' | 'md' | 'lg';
 }
 
 const Button = ({
@@ -33,6 +34,7 @@ const Button = ({
   testid,
   variant = 'default',
   type = 'button',
+  size = 'md',
   ...rest
 }: Props) => {
   const hasChildren = useMemo(
@@ -48,6 +50,7 @@ const Button = ({
       typography='button'
       variant={variant}
       type={type}
+      size={size}
       {...rest}
       {...iconOrientations[iconPosition]}
     >

packages/components/src/atoms/button/__test__/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Button /> renders default correctly 1`] = `
 <DocumentFragment>
   <button
-    class="sc-dkrFOg gplgkt sc-eDvSVe jSWqrL"
+    class="sc-dkrFOg gplgkt sc-eDvSVe kqFDGW"
     data-testid="Default_button"
     type="button"
   >
@@ -20,7 +20,7 @@ exports[`<Button /> renders default correctly 1`] = `
 exports[`<Button /> renders icon correctly 1`] = `
 <DocumentFragment>
   <button
-    class="sc-dkrFOg gplgkt sc-eDvSVe jSWqrL"
+    class="sc-dkrFOg gplgkt sc-eDvSVe kqFDGW"
     data-testid="Secondary_button"
     type="button"
   >
@@ -58,7 +58,7 @@ exports[`<Button /> renders icon correctly 1`] = `
 exports[`<Button /> renders icon only correctly 1`] = `
 <DocumentFragment>
   <button
-    class="sc-dkrFOg gplgkt sc-eDvSVe jSWqrL"
+    class="sc-dkrFOg gplgkt sc-eDvSVe kqFDGW"
     data-testid="_button"
     type="button"
   >
@@ -94,7 +94,7 @@ exports[`<Button /> renders icon only correctly 1`] = `
 exports[`<Button /> renders primary correctly 1`] = `
 <DocumentFragment>
   <button
-    class="sc-dkrFOg gplgkt sc-eDvSVe gptbGy"
+    class="sc-dkrFOg gplgkt sc-eDvSVe fjiZwj"
     data-testid="Primary_button"
     type="button"
   >
@@ -111,7 +111,7 @@ exports[`<Button /> renders primary correctly 1`] = `
 exports[`<Button /> renders secondary correctly 1`] = `
 <DocumentFragment>
   <button
-    class="sc-dkrFOg gplgkt sc-eDvSVe fNsqqk"
+    class="sc-dkrFOg gplgkt sc-eDvSVe gjEOOZ"
     data-testid="Secondary_button"
     type="button"
   >

packages/components/src/atoms/button/styled.ts

@@ -65,6 +65,10 @@ export const StyledInteractable = styled(Interactable)<{ strong?: boolean }>`
   ${variant({
     key: 'buttons.variants',
   })}
+  ${variant({
+    key: 'buttons.size',
+    prop: 'size',
+  })}
   ${variant({
     prop: 'intent',
     key: 'buttons.intents',

packages/components/src/atoms/card/Actions.tsx

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+
+import { Box, BoxProps } from '../../primal';
+import { DefaultThemeWithDefaultStyles } from '../../utils';
+
+export type Props = BoxProps;
+export const Actions = ({ children, ...rest }: Props) => {
+  const theme = useContext<DefaultThemeWithDefaultStyles>(ThemeContext);
+  return (
+    <Box {...theme.defaultStyles?.cardActions} {...rest}>
+      {children}
+    </Box>
+  );
+};
+
+export default Actions;

packages/components/src/atoms/card/Card.tsx

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+
+import { Box, BoxProps } from '../../primal';
+import { DefaultThemeWithDefaultStyles } from '../../utils';
+
+export type Props = BoxProps;
+
+export const Card = ({ children, ...rest }: Props) => {
+  const theme = useContext<DefaultThemeWithDefaultStyles>(ThemeContext);
+
+  return (
+    <Box {...theme.defaultStyles?.card} {...rest}>
+      {children}
+    </Box>
+  );
+};
+
+export default Card;

packages/components/src/atoms/card/Content.tsx

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+
+import { Box, BoxProps } from '../../primal';
+import { DefaultThemeWithDefaultStyles } from '../../utils';
+
+export type Props = BoxProps;
+export const Content = ({ children, ...rest }: Props) => {
+  const theme = useContext<DefaultThemeWithDefaultStyles>(ThemeContext);
+
+  return (
+    <Box {...theme.defaultStyles?.cardContent} {...rest}>
+      {children}
+    </Box>
+  );
+};
+
+export default Content;

packages/components/src/atoms/card/index.ts

@@ -0,0 +1,14 @@
+import { default as CardAction, Props as CardActionProps } from './Actions';
+import Card, { Props as CardProps } from './Card';
+import { default as CardContent, Props as CardContentProps } from './Content';
+
+export {
+  Card,
+  CardProps,
+  CardContent,
+  CardContentProps,
+  CardAction,
+  CardActionProps,
+};
+
+export default Card;

packages/components/src/atoms/card/story.tsx

@@ -0,0 +1,32 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import Button from '../button';
+
+import { Card } from './Card';
+
+import { CardAction, CardContent } from './index';
+
+export default {
+  title: 'Components / Atoms / Card',
+  component: Card,
+} as ComponentMeta<typeof Card>;
+
+const Template: ComponentStory<typeof Card> = args => <Card {...args} />;
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  children: (
+    <>
+      <CardContent>
+        <p>Word of the day</p>
+        <p>be•nev•o•lent</p>
+        <p>adjective</p>
+        <p>well meaning and kindly. a benevolent smile</p>
+      </CardContent>
+      <CardAction>
+        <Button size='sm'>Test Button</Button>
+      </CardAction>
+    </>
+  ),
+};

packages/components/src/atoms/index.ts

@@ -3,3 +3,4 @@ export * from './grid';
 export * from './input';
 export * from './divider';
 export * from './table';
+export * from './card';

packages/theme/src/theme/default/color/dark_mode.json

@@ -5,6 +5,9 @@
         "text": {
           "value": "rgba(255, 255, 255, 0.9)"
         },
+        "!text": {
+          "value": "rgba(25, 25, 25, 0.9)"
+        },
         "highlight": {
           "value": "#009fe3"
         },

packages/theme/src/theme/default/color/light_mode.json

@@ -5,6 +5,9 @@
         "text": {
           "value": "rgba(25, 25, 25, 0.9)"
         },
+        "!text": {
+          "value": "rgba(255, 255, 255, 0.9)"
+        },
         "highlight": {
           "value": "#009fe3"
         },

packages/theme/src/theme/default/defaultStyles.json

@@ -56,6 +56,21 @@
         "_first": {
           "borderLeft": "0"
         }
+      },
+      "card": {
+        "bg": "neutrals.0",
+        "color": "text",
+        "transition": "card",
+        "borderRadius": "1",
+        "boxShadow": "card",
+        "overflow": "hidden",
+        "minWidth": "18"
+      },
+      "cardContent": {
+        "p": "5"
+      },
+      "cardActions":{
+        "p": "4"
       }
     }
   }

packages/theme/src/theme/default/shadows-elevation.json

@@ -27,6 +27,9 @@
     },
     "7": {
       "value": "0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)"
+    },
+    "card": {
+      "value": "rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px"
     }
   },
   "zIndices": {

packages/theme/src/theme/default/time.json

@@ -16,6 +16,9 @@
       "4": {
         "value": "600ms"
       },
+      "card": {
+        "value": "box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
+      },
       "default": {
         "value": "{time.transition.2.value}"
       }

packages/theme/ts/defaultVariants.ts

@@ -161,6 +161,19 @@ const variants = {
         },
       },
     },
+    size: {
+      sm: {
+        bg: 'unset',
+        color: 'highlights.0',
+        p: '3',
+        _hover: {
+          bg: 'unset',
+          color: 'highlights.1',
+        },
+      },
+      md: {},
+      lg: {},
+    },
   },
 };