@agilant/toga-blox 1.0.21 → 1.0.22

package/dist/components/Badge/Badge.d.ts

@@ -1,6 +1,4 @@
 import React from "react";
 import { BadgeTypes } from "./Badge.types";
-declare const Badge: React.FC<BadgeTypes & {
-    styles?: React.CSSProperties;
-}>;
+declare const Badge: React.FC<BadgeTypes>;
 export default Badge;

package/dist/components/Badge/Badge.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Badge = ({ borderColor, borderWidth, borderRadius, backgroundColor, hasMobileStyle, mobileIcon, mobileIconLabel, iconSize, hasLeftIcon, hasRightIcon, icon, image, text, badgeContainerClasses, styles, }) => {
+const Badge = ({ borderColor, borderWidth, borderRadius, backgroundColor, hasMobileStyle, mobileIcon, mobileIconLabel, iconSize, hasLeftIcon, hasRightIcon, icon, image, text, badgeContainerClasses, styles, onClick, }) => {
     const iconClasses = `${iconSize}`;
     const badgeBackgroundClasses = `${backgroundColor}`;
     const badgeBorderClasses = `${borderWidth} ${borderColor} ${borderRadius}`;
     const badgeClasses = `inline-flex items-center ${badgeBorderClasses} ${badgeBackgroundClasses} ${badgeContainerClasses}`;
-    return (_jsxs("span", { "data-testid": "badge-test-id", className: badgeClasses, style: styles, children: [image && _jsx("span", { className: "mr-2", children: image }), icon && hasLeftIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden mr-2`, children: icon })), mobileIcon && hasMobileStyle && (_jsx("span", { className: `${iconClasses} hidden max-md:flex max-md:p-0 mr-2`, "aria-hidden": "false", "aria-label": mobileIconLabel, children: mobileIcon })), _jsx("div", { className: `${hasMobileStyle ? "max-md:hidden" : ""}`, children: text }), icon && hasRightIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden ml-2`, children: icon }))] }));
+    return (_jsxs("span", { onClick: onClick, "data-testid": "badge-test-id", className: badgeClasses, style: styles, children: [image && _jsx("span", { className: "mr-2", children: image }), icon && hasLeftIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden mr-2`, children: icon })), mobileIcon && hasMobileStyle && (_jsx("span", { className: `${iconClasses} hidden max-md:flex max-md:p-0 mr-2`, "aria-hidden": "false", "aria-label": mobileIconLabel, children: mobileIcon })), _jsx("div", { className: `${hasMobileStyle ? "max-md:hidden" : ""}`, children: text }), icon && hasRightIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden ml-2`, children: icon }))] }));
 };
 export default Badge;

package/dist/components/Badge/Badge.stories.d.ts

@@ -7,4 +7,4 @@ export declare const BadgeWithRightIcon: any;
 export declare const CommerceBadge: any;
 export declare const DeskBadge: any;
 export declare const SupplyBadge: any;
-export declare const StylesBadge: any;
+export declare const StylesBadgeWithClick: any;

package/dist/components/Badge/Badge.stories.js

@@ -122,6 +122,10 @@ export default {
             control: "none",
             description: "Sets the inline styles of the badge using direct inline styles",
         },
+        onClick: {
+            control: "none",
+            description: "Function to be executed when the badge is clicked",
+        },
     },
     tags: ["autodocs"],
     parameters: {
@@ -230,8 +234,8 @@ SupplyBadge.parameters = {
         },
     },
 };
-export const StylesBadge = Template.bind({});
-StylesBadge.args = {
+export const StylesBadgeWithClick = Template.bind({});
+StylesBadgeWithClick.args = {
     backgroundColor: "bg-gray-300",
     borderRadius: "rounded-full",
     badgeContainerClasses: "px-3 py-1",
@@ -239,9 +243,10 @@ StylesBadge.args = {
     icon: getFontAwesomeIcon("calculator"),
     hasLeftIcon: true,
     styles: { background: "#F8F8F9", padding: "1.5rem" },
+    onClick: () => alert("Clicked!"),
     text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Closed", tag: "span", size: "text-sm" })),
 };
-StylesBadge.parameters = {
+StylesBadgeWithClick.parameters = {
     docs: {
         description: {
             story: "The badges using the styles prop",

package/dist/components/GenericList/GenericList.js

@@ -27,20 +27,29 @@ const GenericList = ({ data, renderItem, itemHeight, containerHeight, containerC
             switch (listType) {
                 case "ordered":
                     return (_jsx("ol", { ref: parentRef, style: hasVirtualization
-                            ? { height: containerHeight, overflow: "scroll" }
+                            ? {
+                                height: containerHeight,
+                                overflow: "scroll",
+                            }
                             : {}, className: `${listClasses} ${containerClasses}`, children: hasVirtualization
                             ? virtualItems.map((virtualItem) => (_jsx("li", { style: { height: itemHeight }, children: renderItem(data[virtualItem.index]) }, virtualItem.index)))
                             : nonVirtualItems.map((item) => (_jsx("li", { children: renderItem(item) }, item.id))) }));
                 case "unordered":
                     return (_jsx("ul", { ref: parentRef, style: hasVirtualization
-                            ? { height: containerHeight, overflow: "scroll" }
+                            ? {
+                                height: containerHeight,
+                                overflow: "scroll",
+                            }
                             : {}, className: `${listClasses} ${containerClasses}`, children: hasVirtualization
                             ? virtualItems.map((virtualItem) => (_jsx("li", { style: { height: itemHeight }, children: renderItem(data[virtualItem.index]) }, virtualItem.index)))
                             : nonVirtualItems.map((item) => (_jsx("li", { children: renderItem(item) }, item.id))) }));
                 case "none":
                 default:
                     return (_jsx("div", { ref: parentRef, style: hasVirtualization
-                            ? { height: containerHeight, overflow: "scroll" }
+                            ? {
+                                height: containerHeight,
+                                overflow: "scroll",
+                            }
                             : {}, className: `${listClasses} ${containerClasses}`, children: hasVirtualization
                             ? virtualItems.map((virtualItem) => (_jsx("div", { style: { height: itemHeight }, children: renderItem(data[virtualItem.index]) }, virtualItem.index)))
                             : nonVirtualItems.map((item) => (_jsx("div", { children: renderItem(item) }, item.id))) }));

package/dist/components/PageSection/PageSection.stories.js

@@ -9,6 +9,7 @@ import CompassCardTemplate from "../Card/templates/CompassCardTemplate";
 export default {
     title: "Components/Section",
     component: Section,
+    tags: ["autodocs"],
     argTypes: {
         children: {
             control: {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.21",
+	"version": "1.0.22",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",