Reusable action buttons

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cognigy/chat-components",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"type": "module",
 	"exports": "./dist/chat-components.js",
 	"files": [

src/common/ActionButtons/ActionButton.module.css

@@ -1,5 +1,5 @@
-article button.button,
-article a.button {
+button.button,
+a.button {
 	border-radius: 19px;
 	padding: 8px 10px;
 	cursor: pointer;
@@ -8,20 +8,43 @@ article a.button {
 	justify-content: center;
 	gap: 10px;
 	text-decoration: none;
+	background: var(--primary-color);
+	color: var(--white);
+	border: none;
+	outline: none;
 }
 
-article button.button span,
-article a.button span {
+button.button span,
+a.button span {
 	font-weight: 600;
 	font-size: 14px;
 	line-height: 160%;
 	font-family: inherit;
 }
 
-article button.button svg,
-article a.button svg,
-article button.button path,
-article a.button svg path {
+button.button.large span,
+a.button.large span {
+	font-size: 16px;
+	font-style: normal;
+	line-height: 140%;
+}
+
+button.button svg,
+a.button svg,
+button.button path,
+a.button svg path {
 	fill: var(--white);
 	width: 12px;
 }
+
+button.button:hover,
+a.button:hover,
+button.button:focus,
+a.button:focus {
+	background: var(--primary-color-hover);
+}
+
+button.button:disabled,
+a.button[disabled] {
+	background: var(--primary-color-disabled);
+}

src/common/ActionButtons/ActionButton.tsx

@@ -1,12 +1,12 @@
 import { FC, ReactElement } from "react";
 import classnames from "classnames";
 import { ActionButtonsProps } from "./ActionButtons";
-import { useMessageContext } from "src/messages/hooks";
 import { getWebchatButtonLabel } from "src/utils";
 import { sanitizeHTML } from "src/sanitize";
 import { sanitizeUrl } from "@braintree/sanitize-url";
 import classes from "./ActionButton.module.css";
 import { LinkIcon } from "src/assets/svg";
+import { MessageProps } from "src/index";
 
 interface ActionButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 	action?: ActionButtonsProps["action"];
@@ -17,14 +17,26 @@ interface ActionButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 	disabled?: boolean;
 	customIcon?: ReactElement;
 	showUrlIcon?: boolean;
+	config: MessageProps["config"];
+	onEmitAnalytics: MessageProps["onEmitAnalytics"];
+	size?: "small" | "large";
 }
 
 /**
  * Postback, phone number, and URL buttons
  */
 const ActionButton: FC<ActionButtonProps> = props => {
-	const { button, disabled, total, position, showUrlIcon, customIcon } = props;
-	const { config, onEmitAnalytics } = useMessageContext();
+	const {
+		button,
+		disabled,
+		total,
+		position,
+		showUrlIcon,
+		customIcon,
+		config,
+		onEmitAnalytics,
+		size,
+	} = props;
 
 	const buttonType =
 		"type" in button ? button.type : "content_type" in button ? button.content_type : null;
@@ -93,9 +105,14 @@ const ActionButton: FC<ActionButtonProps> = props => {
 
 	return (
 		<Component
-			aria-label={ariaLabel}
-			className={classnames(classes.button, isWebURL && classes.url, props.className)}
 			onClick={onClick}
+			className={classnames(
+				classes.button,
+				isWebURL && classes.url,
+				size === "large" && classes.large,
+				props.className,
+			)}
+			aria-label={ariaLabel}
 			aria-disabled={disabled}
 			role={isWebURL ? "link" : undefined}
 		>

src/common/ActionButtons/ActionButtons.tsx

@@ -3,7 +3,7 @@ import { ActionButton } from ".";
 import classnames from "classnames";
 
 import classes from "./ActionButtons.module.css";
-import { FC, ReactElement } from "react";
+import { ReactElement } from "react";
 import { MessageProps } from "src/messages/Message";
 
 export interface ActionButtonsProps {
@@ -13,10 +13,23 @@ export interface ActionButtonsProps {
 	buttonClassName?: string;
 	customIcon?: ReactElement;
 	showUrlIcon?: boolean;
+	config: MessageProps["config"];
+	onEmitAnalytics: MessageProps["onEmitAnalytics"];
+	size?: "small" | "large";
 }
 
-const ActionButtons: FC<ActionButtonsProps> = props => {
-	const { payload, buttonClassName, containerClassName, action, customIcon, showUrlIcon } = props;
+export const ActionButtons = (props: ActionButtonsProps) => {
+	const {
+		payload,
+		buttonClassName,
+		containerClassName,
+		action,
+		customIcon,
+		showUrlIcon,
+		config,
+		onEmitAnalytics,
+		size,
+	} = props;
 
 	if (!payload || payload?.length === 0) return null;
 
@@ -41,6 +54,9 @@ const ActionButtons: FC<ActionButtonsProps> = props => {
 			disabled={action === undefined}
 			customIcon={customIcon}
 			showUrlIcon={showUrlIcon}
+			config={config}
+			onEmitAnalytics={onEmitAnalytics}
+			size={size ? size : "small"}
 		/>
 	));
 

src/common/ActionButtons/PrimaryButton.tsx

@@ -3,6 +3,7 @@ import classes from "./SingleButtons.module.css";
 import classnames from "classnames";
 import ActionButtons, { ActionButtonsProps } from "./ActionButtons";
 import { IWebchatButton } from "@cognigy/socket-client";
+import { useMessageContext } from "src/messages/hooks";
 
 interface PrimaryButtonProps extends HTMLAttributes<HTMLDivElement> {
 	action?: ActionButtonsProps["action"];
@@ -14,6 +15,9 @@ interface PrimaryButtonProps extends HTMLAttributes<HTMLDivElement> {
 
 const PrimaryButton: FC<PrimaryButtonProps> = props => {
 	const { button, customIcon, containerClassName, buttonClassName, action } = props;
+
+	const { config, onEmitAnalytics } = useMessageContext();
+
 	if (!button) return null;
 
 	return (
@@ -23,6 +27,8 @@ const PrimaryButton: FC<PrimaryButtonProps> = props => {
 			payload={[button]}
 			action={action}
 			customIcon={customIcon}
+			config={config}
+			onEmitAnalytics={onEmitAnalytics}
 		/>
 	);
 };

src/common/ActionButtons/SecondaryButton.tsx

@@ -3,6 +3,7 @@ import classes from "./SingleButtons.module.css";
 import classnames from "classnames";
 import ActionButtons, { ActionButtonsProps } from "./ActionButtons";
 import { IWebchatButton } from "@cognigy/socket-client";
+import { useMessageContext } from "src/messages/hooks";
 
 interface SecondaryButtonProps extends HTMLAttributes<HTMLDivElement> {
 	action?: ActionButtonsProps["action"];
@@ -14,6 +15,9 @@ interface SecondaryButtonProps extends HTMLAttributes<HTMLDivElement> {
 
 const SecondaryButton: FC<SecondaryButtonProps> = props => {
 	const { button, customIcon, containerClassName, buttonClassName, action } = props;
+
+	const { config, onEmitAnalytics } = useMessageContext();
+
 	if (!button) return null;
 
 	return (
@@ -23,6 +27,8 @@ const SecondaryButton: FC<SecondaryButtonProps> = props => {
 			payload={[button]}
 			action={action}
 			customIcon={customIcon}
+			config={config}
+			onEmitAnalytics={onEmitAnalytics}
 		/>
 	);
 };

src/common/ActionButtons/SingleButtons.module.css

@@ -35,11 +35,13 @@ article a.secondaryButton:hover,
 article a.secondaryButton:focus {
 	color: var(--secondary-color-hover);
 	border: 1px solid var(--secondary-color-hover);
+	background-color: var(--white);
 }
 article button.secondaryButton:disabled,
 article button.secondaryButton[disabled] {
 	color: var(--secondary-color-disabled);
 	border: 1px solid var(--secondary-color-disabled);
+	background-color: var(--white);
 }
 
 article button.secondaryButton svg,

src/common/Typography/Typography.module.css

@@ -3,47 +3,47 @@
 	font-size: 34px;
 	font-style: normal;
 	font-weight: 600;
-	line-height: 40.8px
+	line-height: 40.8px;
 }
 
 .h2-regular {
 	font-family: Figtree;
 	font-size: 18px;
 	font-style: normal;
 	font-weight: 400;
-	line-height: 23.4px
+	line-height: 23.4px;
 }
 
 .h2-semibold {
 	font-family: Figtree;
 	font-size: 18px;
 	font-style: normal;
 	font-weight: 600;
-	line-height: 23.4px
+	line-height: 23.4px;
 }
 
 .title1-regular {
 	font-family: Figtree;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 400;
-	line-height: 22.4px
+	line-height: 22.4px;
 }
 
 .title1-semibold {
 	font-family: Figtree;
 	font-size: 16px;
 	font-style: normal;
 	font-weight: 600;
-	line-height: 22.4px
+	line-height: 22.4px;
 }
 
 .title2-regular {
 	font-family: Figtree;
 	font-size: 12px;
 	font-style: normal;
 	font-weight: 400;
-	line-height: 16.8px
+	line-height: 16.8px;
 }
 
 .title2-semibold {
@@ -84,4 +84,4 @@
 	font-style: normal;
 	font-weight: 600;
 	line-height: 18.2px;
-}
+}

src/common/Typography/Typography.tsx

@@ -2,25 +2,25 @@ import { CSSProperties, FC, ReactNode } from "react";
 import classes from "./Typography.module.css";
 import classnames from "classnames";
 
-interface TypographyProps extends CSSProperties{
-	variant?: TagVariants,
-	children: ReactNode,
-	className?: string,
-	component?: keyof JSX.IntrinsicElements,
+interface TypographyProps extends CSSProperties {
+	variant?: TagVariants;
+	children: ReactNode;
+	className?: string;
+	component?: keyof JSX.IntrinsicElements;
 }
 
-type TagVariants = 
-	"h1-semibold" |
-	"h2-regular" |
-	"h2-semibold" |
-	"title1-semibold" |
-	"title1-regular" |
-	"title2-semibold" |
-	"title2-regular" |
-	"body-regular" |
-	"body-semibold" |
-	"copy-medium" |
-	"cta-semibold";
+type TagVariants =
+	| "h1-semibold"
+	| "h2-regular"
+	| "h2-semibold"
+	| "title1-semibold"
+	| "title1-regular"
+	| "title2-semibold"
+	| "title2-regular"
+	| "body-regular"
+	| "body-semibold"
+	| "copy-medium"
+	| "cta-semibold";
 
 type ColorVariants = "primary" | "secondary";
 
@@ -44,19 +44,19 @@ const colorsMapping: Record<ColorVariants, string> = {
 	secondary: "var(--secondary-color)",
 };
 
-const Typography: FC<TypographyProps> = (props) => {
-	const { variant="body-regular", children, component, className, color, ...restProps } = props;
+const Typography: FC<TypographyProps> = props => {
+	const { variant = "body-regular", children, component, className, color, ...restProps } = props;
 	const Component = component ?? variantsMapping[variant];
 	const typographyColor = colorsMapping[color as ColorVariants] ?? color;
 
 	return (
-		<Component 
-			className={classnames(classes[variant], className, color)} 
-			style={{color: typographyColor, ...restProps}}
+		<Component
+			className={classnames(classes[variant], className, color)}
+			style={{ color: typographyColor, ...restProps }}
 		>
 			{children}
 		</Component>
 	);
 };
 
-export default Typography;
+export default Typography;

src/demo.css

@@ -3,8 +3,19 @@ body {
 }
 #root {
 	background-color: #d9d9d9;
-	font-family: Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+	font-family:
+		Figtree,
+		system-ui,
+		-apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
+		Roboto,
+		Oxygen,
+		Ubuntu,
+		Cantarell,
+		"Open Sans",
+		"Helvetica Neue",
+		sans-serif;
 	margin-inline: auto;
 	width: 375px;
 	height: 620px;