@datalayer/primer-addons 0.0.9 → 0.0.11

package/README.md

@@ -14,12 +14,12 @@ This project has been [shared in a discussion](https://github.com/primer/react/d
 
 ## Current Addons
 
-- [x] Slider
-- [x] Toolbar
-- [ ] ClosableFlash
-- [ ] Skeleton
 - [ ] Card
+- [ ] ClosableFlash
 - [ ] MasonryBox
+- [ ] Skeleton
+- [x] Slider
+- [x] Toolbar
 
 <div align="center" style="text-align: center">
   <img alt="Primer React Addons" src="https://datalayer-examples.s3.amazonaws.com/primer-addons-example.png" />

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { BoxProps } from "@primer/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>;

package/lib/components/card/Card.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@primer/react";
+const roundedVals = {
+    "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)',
+};
+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]
+            } : {
+                borderRadius: props.rounded
+            } : undefined),
+            ...(border ? {
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: 'border.default'
+            } : undefined),
+            ...(shadow ? {
+                boxShadow: shadowVals[shadow]
+            } : {
+                boxShadow: shadowVals['small']
+            })
+        }, className: "color-shadow-medium", ...otherProps, children: children }));
+};

package/lib/components/closeableflash/CloseableFlash.d.ts

@@ -1,5 +1,9 @@
 import React from "react";
 import { FlashProps } from "@primer/react";
-type CloseableFlashProps = FlashProps;
+import { Icon } from "@primer/octicons-react";
+type CloseableFlashProps = FlashProps & {
+    onClose: () => void;
+    leadingIcon: Icon | null;
+};
 export declare const CloseableFlash: React.FC<CloseableFlashProps>;
 export {};

package/lib/components/closeableflash/CloseableFlash.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Box, Flash } from "@primer/react";
+import { Box, Flash, StyledOcticon, Text } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
 export const CloseableFlash = (props) => {
+    const { leadingIcon, variant, ...otherProps } = props;
     const [isVisible, setIsVisible] = useState(true);
     const handleClose = () => {
+        props.onClose();
         setIsVisible(false);
     };
     if (!isVisible) {
         return null;
     }
-    return (_jsx(Flash, { ...props, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsx(Box, { children: props.children }), _jsx(Box, { onClick: handleClose, sx: { cursor: "pointer" }, children: _jsx(XIcon, { size: 20 }) })] }) }));
+    return (_jsx(Flash, { variant: variant, ...otherProps, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { sx: { flexGrow: 1 }, children: [leadingIcon && _jsx(StyledOcticon, { icon: leadingIcon }), _jsx(Text, { color: `${variant === "default" ? "accent" : (variant === "warning" ? "attention" : variant)}.fg`, children: props.children })] }), _jsx(Box, { onClick: handleClose, sx: { cursor: "pointer" }, children: _jsx(XIcon, { size: 20 }) })] }) }));
 };

package/lib/components/slider/Slider.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface CommonProps {
     name?: string;
     id?: string;

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./components/card/Card";
 export * from "./components/closeableflash/CloseableFlash";
 export * from "./components/slider/Slider";
 export * from "./components/toolbar/Toolbar";

package/lib/index.js

@@ -1,3 +1,4 @@
+export * from "./components/card/Card";
 export * from "./components/closeableflash/CloseableFlash";
 export * from "./components/slider/Slider";
 export * from "./components/toolbar/Toolbar";

package/package.json

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