@luscii-healthtech/web-ui 2.6.0 → 2.7.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.6.0",
+  "version": "2.7.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/CenteredHero/CenteredHero.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import classNames from "classnames";
+
+import Button from "../Button/Button";
+import { ButtonProps } from "../Button/Button.types";
+import Text from "../Text/Text";
+import { Title } from "../Title/Title";
+
+export type BackgroundColor = "white" | "slate-50";
+
+export interface CenteredHeroProps {
+  title: string;
+  text: string;
+  image: string;
+  buttons: ButtonProps[];
+  background?: BackgroundColor;
+}
+
+const CenteredHero = ({
+  title,
+  text,
+  image,
+  buttons,
+  background = "slate-50",
+}: CenteredHeroProps): JSX.Element => {
+  return (
+    <div
+      className={classNames(
+        "p-6 flex flex-col items-center align-center w-full",
+        {
+          "bg-white": background === "white",
+          "bg-slate-50": background === "slate-50",
+        }
+      )}
+    >
+      {image && <img src={image} className="h-36 w-36 mb-4" />}
+      {title && <Title text={title} type={"base"} />}
+      {text && <Text text={text} />}
+
+      {buttons?.length > 0 && (
+        <div className="flex flex-row mt-4">
+          {buttons
+            .filter(
+              (button) => button.title && button.handleOnClick && button.type
+            )
+            .map((button) => (
+              <Button
+                className="mr-4 last:mr-0"
+                key={button.title}
+                role={button.role}
+                type={button.type}
+                title={button.title}
+                text={button.text}
+                onClick={button.handleOnClick}
+              />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CenteredHero;

package/src/components/CenteredHero/CenteredHero.js

@@ -1,50 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import Button, { BUTTON_ROLES } from "../Button/Button";
-import Text from "../Text/Text";
-import { Title } from "../Title/Title";
-
-CenteredHero.propTypes = {
-  title: PropTypes.string,
-  text: PropTypes.string,
-  image: PropTypes.string,
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      handleOnClick: PropTypes.func.isRequired,
-      type: PropTypes.oneOf([BUTTON_ROLES.PRIMARY, BUTTON_ROLES.SECONDARY]).isRequired,
-    })
-  ),
-  className: PropTypes.string,
-};
-
-function CenteredHero({ title, text, image, buttons, className }) {
-  return (
-    <div className={classNames(className, "p-6 my-6 flex flex-col items-center w-200 ml-auto mr-auto")}>
-      {image && <img src={image} />}
-      {title && <Title className="mt-8 mb-2" text={title} type={"base"} />}
-      {text && <Text text={text} />}
-
-      {buttons?.length > 0 && (
-        <div className="flex flex-row mt-8">
-          {buttons
-            .filter((button) => button.title && button.handleOnClick && button.type)
-            .map((button) => (
-              <Button
-                className="mr-4 last:mr-0"
-                key={button.title}
-                role={button.type}
-                title={button.title}
-                text={button.title}
-                onClick={button.handleOnClick}
-              />
-            ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default CenteredHero;