@datalayer/primer-addons 0.0.12 → 0.0.13

package/README.md

@@ -14,8 +14,8 @@ This project has been [shared in a discussion](https://github.com/primer/react/d
 
 ## Current Addons
 
-- [ ] Card
-- [ ] ClosableFlash
+- [x] Card
+- [x] ClosableFlash
 - [ ] MasonryBox
 - [ ] Skeleton
 - [x] Slider

package/lib/components/card/Card.d.ts

@@ -1,8 +1,30 @@
 import React from "react";
 import { BoxProps } from "@primer/react";
+import { Icon } from "@primer/octicons-react";
 export type CardProps = Omit<BoxProps, 'border'> & {
     rounded?: 'small' | 'medium' | 'large' | 'full' | number;
     border?: boolean;
     shadow?: 'small' | 'medium' | 'large' | 'extraLarge';
 };
-export declare const Card: React.FC<CardProps>;
+export type CardHeaderProps = {
+    title?: string;
+    description?: string;
+    leadingIcon?: Icon;
+    action?: React.ReactNode;
+};
+export type CardImageProps = {
+    image: string;
+    height: number;
+};
+export type CardContentProps = {
+    children: React.ReactNode;
+};
+export type CardActionsProps = {
+    children: React.ReactNode;
+};
+export declare const Card: React.FC<CardProps> & {
+    Header: React.FC<CardHeaderProps>;
+    Image: React.FC<CardImageProps>;
+    Content: React.FC<CardContentProps>;
+    Actions: React.FC<CardActionsProps>;
+};

package/lib/components/card/Card.js

@@ -1,23 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from "@primer/react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, StyledOcticon, Text } from "@primer/react";
 const roundedVals = {
-    "small": "3px",
-    "medium": "6px",
-    "large": "12px",
-    "full": "100vh",
+    small: "3px",
+    medium: "6px",
+    large: "12px",
+    full: "100vh",
 };
 const shadowVals = {
-    "small": '0 1px 0 rgba(31,35,40,0.04)',
-    "medium": '0 3px 6px rgba(140,149,159,0.15)',
-    "large": '0 8px 24px rgba(140,149,159,0.2)',
-    "extraLarge": '0 12px 28px rgba(140,149,159,0.3)',
+    small: '0 1px 0 rgba(31,35,40,0.04)',
+    medium: '0 3px 6px rgba(140,149,159,0.15)',
+    large: '0 8px 24px rgba(140,149,159,0.2)',
+    extraLarge: '0 12px 28px rgba(140,149,159,0.3)',
 };
 export const Card = (props) => {
     const { sx, rounded, border, shadow, children, ...otherProps } = props;
     return (_jsx(Box, { sx: {
             ...(sx ? sx : undefined),
-            display: 'flex',
-            alignItems: 'center',
             ...(rounded ? typeof rounded === "string" ? {
                 borderRadius: roundedVals[rounded]
             } : {
@@ -33,5 +31,18 @@ export const Card = (props) => {
             } : {
                 boxShadow: shadowVals['small']
             })
-        }, className: "color-shadow-medium", ...otherProps, children: children }));
+        }, ...otherProps, children: children }));
+};
+Card.Header = (props) => {
+    const { title, description, leadingIcon, action } = props;
+    return _jsxs(Box, { display: "flex", alignItems: "center", sx: { p: 3 }, children: [leadingIcon && _jsx(Box, { sx: { mr: 3 }, children: _jsx(StyledOcticon, { size: "medium", icon: leadingIcon }) }), _jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(Text, { display: "block", children: title }), _jsx(Text, { display: "block", color: "fg.muted", children: description })] }), action && _jsx(Box, { children: action })] });
+};
+Card.Image = ({ image, height }) => {
+    return _jsx(Box, { display: "block", width: "100%", height: `${height}px`, backgroundImage: `url(${image})`, sx: { backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center", objectFit: "cover" } });
+};
+Card.Content = ({ children }) => {
+    return _jsx(Box, { display: "block", sx: { p: 3 }, children: children });
+};
+Card.Actions = ({ children }) => {
+    return _jsx(Box, { display: "block", sx: { p: 3 }, children: children });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",