Merge remote-tracking branch 'origin/main' into disabled-qr

Cognigy · Dec 12, 2023 · a69f0df · a69f0df
2 parents 7b5a7ac + 454c82e
commit a69f0df
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 54 deletions.
diff --git a/src/common/ActionButtons/ActionButton.module.css b/src/common/ActionButtons/ActionButton.module.css
@@ -14,21 +14,6 @@ a.button {
 	outline: none;
 }
 
-button.button span,
-a.button span {
-	font-weight: 600;
-	font-size: 14px;
-	line-height: 160%;
-	font-family: inherit;
-}
-
-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,

diff --git a/src/common/ActionButtons/ActionButton.tsx b/src/common/ActionButtons/ActionButton.tsx
@@ -6,7 +6,7 @@ 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";
+import { MessageProps, Typography } from "src/index";
 
 interface ActionButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 	action?: ActionButtonsProps["action"];
@@ -116,15 +116,18 @@ const ActionButton: FC<ActionButtonProps> = props => {
 			className={classnames(
 				classes.button,
 				isWebURL && classes.url,
-				size === "large" && classes.large,
 				props.className,
 				disabled && classes.disabled,
 			)}
 			aria-label={ariaLabel}
 			aria-disabled={disabled}
 			role={isWebURL ? "link" : undefined}
 		>
-			<span dangerouslySetInnerHTML={{ __html }} />
+			<Typography
+				variant={size === "large" ? "title1-regular" : "cta-semibold"}
+				component="span"
+				dangerouslySetInnerHTML={{ __html }}
+			/>
 			{renderIcon()}
 		</Component>
 	);

diff --git a/src/common/MessageHeader.module.css b/src/common/MessageHeader.module.css
@@ -11,8 +11,6 @@ article .header.ongoing {
 }
 
 article .header .headerMeta {
-	font-size: 12px;
-	line-height: 140%;
 	display: flex;
 	gap: 8px;
 	align-items: center;

diff --git a/src/common/MessageHeader.tsx b/src/common/MessageHeader.tsx
@@ -4,6 +4,7 @@ import classnames from "classnames";
 import { useMessageContext } from "src/messages/hooks";
 import Avatar from "./Avatar";
 import { HeaderEllipsis } from "src/assets/svg";
+import Typography from "./Typography/Typography";
 
 interface MessageHeaderProps {
 	enableAvatar?: boolean;
@@ -32,7 +33,7 @@ const MessageHeader: FC<MessageHeaderProps> = props => {
 	return (
 		<header className={className} data-testid="message-header">
 			{props.enableAvatar && <Avatar />}
-			<div className={classes.headerMeta}>
+			<Typography variant="title2-regular" component="div" className={classes.headerMeta}>
 				{!isUserMessage && (
 					<>
 						<span className={classes["avatar-name"]}>
@@ -49,7 +50,7 @@ const MessageHeader: FC<MessageHeaderProps> = props => {
 						})}
 					</time>
 				</span>
-			</div>
+			</Typography>
 		</header>
 	);
 };

diff --git a/src/common/Typography/Typography.tsx b/src/common/Typography/Typography.tsx
@@ -2,11 +2,14 @@ import { CSSProperties, FC, ReactNode } from "react";
 import classes from "./Typography.module.css";
 import classnames from "classnames";
 
-interface TypographyProps extends CSSProperties {
+export interface TypographyProps extends CSSProperties {
 	variant?: TagVariants;
-	children: ReactNode;
+	children?: ReactNode;
 	className?: string;
+	style?: CSSProperties;
 	component?: keyof JSX.IntrinsicElements;
+	dangerouslySetInnerHTML?: { __html: string | TrustedHTML } | undefined;
+	id?: string;
 }
 
 type TagVariants =
@@ -45,14 +48,26 @@ const colorsMapping: Record<ColorVariants, string> = {
 };
 
 const Typography: FC<TypographyProps> = props => {
-	const { variant = "body-regular", children, component, className, color, ...restProps } = props;
+	const {
+		variant = "body-regular",
+		children,
+		component,
+		className,
+		style,
+		color,
+		dangerouslySetInnerHTML,
+		id,
+		...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 }}
+			style={{ color: typographyColor, ...style, ...restProps }}
+			dangerouslySetInnerHTML={dangerouslySetInnerHTML}
+			id={id}
 		>
 			{children}
 		</Component>

diff --git a/src/index.ts b/src/index.ts
@@ -2,7 +2,7 @@ import { match } from "./matcher";
 import ActionButtons from "./common/ActionButtons/ActionButtons";
 import Message, { MessageProps } from "./messages/Message";
 import TypingIndicator from "./common/TypingIndicator";
-import Typography from "./common/Typography/Typography";
+import Typography, { TypographyProps } from "./common/Typography/Typography";
 
 import "@fontsource/figtree/400.css";
 import "@fontsource/figtree/400-italic.css";
@@ -15,4 +15,4 @@ import "@fontsource/figtree/700-italic.css";
 
 export { Message, match, ActionButtons, TypingIndicator, Typography };
 
-export type { MessageProps };
+export type { MessageProps, TypographyProps };
diff --git a/src/messages/Gallery/Gallery.module.css b/src/messages/Gallery/Gallery.module.css
@@ -52,18 +52,12 @@
 	margin: 0px;
 	left: 8px;
 	bottom: 10px;
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 130%;
 	color: var(--white);
 }
 
 .slideItem .bottom p {
 	padding: 0px;
 	margin: 0px;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 140%;
 }
 
 /* 

diff --git a/src/messages/Gallery/GalleryItem.tsx b/src/messages/Gallery/GalleryItem.tsx
@@ -8,6 +8,7 @@ import ActionButtons from "src/common/ActionButtons/ActionButtons";
 import { sanitizeHTML } from "src/sanitize";
 import { getRandomId } from "src/utils";
 import { sanitizeUrl } from "@braintree/sanitize-url";
+import { Typography } from "src/index";
 
 export interface GallerySlideProps {
 	slide: IWebchatAttachmentElement;
@@ -50,7 +51,9 @@ const GalleryItem: FC<GallerySlideProps> = props => {
 	return (
 		<div className={classnames("webchat-carousel-template-frame", classes.slideItem)}>
 			<div className={classnames(classes.top, hasExtraInfo && classes.hasExtraInfo)}>
-				<h2
+				<Typography
+					variant="body-semibold"
+					component="h2"
 					dangerouslySetInnerHTML={{ __html: titleHtml }}
 					className="webchat-carousel-template-title"
 					id={titleId}
@@ -78,7 +81,8 @@ const GalleryItem: FC<GallerySlideProps> = props => {
 					aria-label={default_action?.url ? `${titleHtml}. Opens in new tab` : undefined}
 				>
 					{subtitle && (
-						<p
+						<Typography
+							variant="body-regular"
 							dangerouslySetInnerHTML={{ __html: subtitleHtml }}
 							id={subtitleId}
 							className="webchat-carousel-template-subtitle"

diff --git a/src/messages/List/List.module.css b/src/messages/List/List.module.css
@@ -34,32 +34,19 @@ article .wrapper {
 	color: var(--white);
 }
 
-.itemTitleHeader {
-	margin-top: 0px;
-	margin-bottom: 0px;
-	font-size: 18px;
-	font-weight: 600;
-	line-height: 130%;
-}
-
 .itemTitle {
 	margin-top: 0px;
 	margin-bottom: 0px;
-	font-size: 16px;
-	font-weight: 600;
-	line-height: 140%;
 }
 
 .itemTitleWithSubtitle {
+	margin-top: 0px;
 	margin-bottom: 8px;
 }
 
 .itemSubtitle {
 	margin-top: 0px;
 	margin-bottom: 0px;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 140%;
 }
 
 .itemSubtitle.ignoreWS {

diff --git a/src/messages/List/ListItem.tsx b/src/messages/List/ListItem.tsx
@@ -8,6 +8,7 @@ import { PrimaryButton, SecondaryButton } from "src/common/ActionButtons";
 import classnames from "classnames";
 import { sanitizeUrl } from "@braintree/sanitize-url";
 import { IWebchatAttachmentElement } from "@cognigy/socket-client";
+import { Typography } from "src/index";
 
 const ListItem: FC<{ element: IWebchatAttachmentElement; isHeaderElement?: boolean }> = props => {
 	const { action, config } = useMessageContext();
@@ -62,19 +63,21 @@ const ListItem: FC<{ element: IWebchatAttachmentElement; isHeaderElement?: boole
 		return (
 			<>
 				{titleHtml && (
-					<h2
+					<Typography
+						variant={isHeaderElement ? "h2-semibold" : "title1-semibold"}
+						component="h2"
 						dangerouslySetInnerHTML={{ __html: titleHtml }}
 						className={classnames(
 							isHeaderElement
 								? "webchat-list-template-header-title"
 								: "webchat-list-template-element-title",
-							isHeaderElement ? classes.itemTitleHeader : classes.itemTitle,
-							subtitleHtml && classes.itemTitleWithSubtitle,
+							subtitleHtml ? classes.itemTitleWithSubtitle : classes.itemTitle,
 						)}
 					/>
 				)}
 				{subtitleHtml && (
-					<p
+					<Typography
+						variant="body-regular"
 						dangerouslySetInnerHTML={{ __html: subtitleHtml }}
 						id={subtitleId}
 						className={classnames(