@soul-refiner/design-system 0.2.2 → 0.2.3

package/dist/components/actions/button/button.d.ts

@@ -9,6 +9,7 @@ export interface ButtonProps extends NativeProps, React.PropsWithChildren {
     as?: React.ElementType;
     disabled?: boolean;
     fluid?: boolean;
+    href?: string;
     icon?: React.ReactElement | undefined;
     isDropdownOpen?: boolean;
     roundness?: ButtonShape;
@@ -16,5 +17,5 @@ export interface ButtonProps extends NativeProps, React.PropsWithChildren {
     sx?: string;
     type?: ButtonTypes;
 }
-export declare const Button: ({ as, children, disabled, fluid, icon, isDropdownOpen, roundness, size, sx, type, ...props }: ButtonProps) => React.JSX.Element;
+export declare const Button: ({ as, children, disabled, fluid, href, icon, isDropdownOpen, roundness, size, sx, type, ...props }: ButtonProps) => React.JSX.Element;
 export {};

package/dist/components/actions/button/button.js

@@ -14,7 +14,7 @@ const SM_ICON_SIZE = 16;
 const SM_FONT_SIZE = 14;
 const SM_PADDING = '5px 15px';
 const SM_PADDING_WO_CHILDREN = '7px';
-export const Button = ({ as = 'button', children, disabled, fluid = false, icon, isDropdownOpen, roundness = 'large', size = 'large', sx, type = 'primary', ...props }) => {
+export const Button = ({ as = 'button', children, disabled, fluid = false, href, icon, isDropdownOpen, roundness = 'large', size = 'large', sx, type = 'primary', ...props }) => {
     const Component = Components()[type];
     const buttonIcon = React.Children.map(icon, (item) => {
         if (React.isValidElement(item))
@@ -37,7 +37,7 @@ export const Button = ({ as = 'button', children, disabled, fluid = false, icon,
         : size === 'large'
             ? LG_PADDING_WO_CHILDREN
             : SM_PADDING_WO_CHILDREN;
-    return (React.createElement(Component, { as: as, disabled: disabled, "$align": "center", "$display": "flex", "$fluid": fluid, "$gap": size === 'large' ? 12 : 8, "$hasChildren": !!children, "$justify": "center", "$padding": padding, "$roundness": roundness, "$size": size, "$sx": sx, ...props },
+    return (React.createElement(Component, { as: as, disabled: disabled, href: href, "$align": "center", "$display": "flex", "$fluid": fluid, "$gap": size === 'large' ? 12 : 8, "$hasChildren": !!children, "$justify": "center", "$padding": padding, "$roundness": roundness, "$size": size, "$sx": sx, ...props },
         buttonIcon,
         children && (React.createElement(P, { as: "span", "$mediumBold": true, "$fontSize": size === 'large' ? LG_FONT_SIZE : SM_FONT_SIZE, "$color": "inherit" }, children)),
         !!children && dropdownIcon));

package/dist/components/card/action/action.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 export interface ActionCardProps {
     actions: React.ReactElement | React.ReactElement[];
     content: string;
+    href?: string;
     image: string;
     logo: React.ReactElement;
     subtitle: string;
     sx?: string;
     title: string;
 }
-export declare const ActionCard: ({ actions, content, image, logo, subtitle, sx, title, }: ActionCardProps) => React.JSX.Element;
+export declare const ActionCard: ({ actions, content, href, image, logo, subtitle, sx, title, }: ActionCardProps) => React.JSX.Element;

package/dist/components/card/action/action.js

@@ -2,16 +2,19 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box, H, P } from '../../';
-export const ActionCard = ({ actions, content, image, logo, subtitle, sx, title, }) => {
-    return (React.createElement(Action, { "$backgroundImage": image, "$sx": sx },
-        React.createElement("img", { src: image, alt: "" }),
-        React.createElement(Figcaption, null,
-            React.createElement(LogoWrapper, null, logo),
-            React.createElement(H, { as: "span", "$mediumBold": true, "$color": "grey-2", "$fontSize": 18, "$lineHeight": 26 }, title),
-            React.createElement(P, { as: "span", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle),
-            React.createElement(P, { as: "span", "$color": "grey-3", "$fontSize": 14, "$lineHeight": 20, "$textAlign": "center", sx: "margin-top: 12px;" }, content),
-            React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 8px; width: 100%;" }, React.Children.toArray(actions)))));
+export const ActionCard = ({ actions, content, href, image, logo, subtitle, sx, title, }) => {
+    const isAnchor = !!href;
+    return (React.createElement(Wrapper, { as: isAnchor ? 'a' : 'div' },
+        React.createElement(Action, { "$backgroundImage": image, "$sx": sx },
+            React.createElement("img", { src: image, alt: "" }),
+            React.createElement(Figcaption, null,
+                React.createElement(LogoWrapper, null, logo),
+                React.createElement(H, { as: "span", "$mediumBold": true, "$color": "grey-2", "$fontSize": 18, "$lineHeight": 26 }, title),
+                React.createElement(P, { as: "span", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle),
+                React.createElement(P, { as: "span", "$color": "grey-3", "$fontSize": 14, "$lineHeight": 20, "$textAlign": "center", sx: "margin-top: 12px;" }, content),
+                React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 8px; width: 100%;" }, React.Children.toArray(actions))))));
 };
+const Wrapper = styled.div ``;
 const Action = styled.figure `
   position: relative;
   aspect-ratio: 310 / 374;
@@ -29,6 +32,8 @@ const Action = styled.figure `
     border-radius: 16px 16px 0px 0px;
   }
 
+  ${({ as }) => (as === 'a' ? 'cursor: pointer;' : '')}
+
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
 const Figcaption = styled.figcaption `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {