@luscii-healthtech/web-ui 0.7.2 → 0.8.2

package/package.json

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

package/src/components/ButtonV2/ButtonProps.type.ts

@@ -1,17 +1,36 @@
 import { IconProps } from "../Icons/types/IconProps.type";
 import { TextColor, TextHoverColor } from "../Text/Text";
 
+/**
+ * Properties that are present in all variants of the button
+ *
+ */
 export interface BaseButtonProps
   extends React.HTMLAttributes<HTMLButtonElement> {
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   text?: string;
-  textColor?: TextColor;
-  textHoverColor?: TextHoverColor;
   icon?: React.FunctionComponent<IconProps>;
   isDisabled?: boolean;
   className?: string;
 }
 
-export interface ButtonProps extends BaseButtonProps {
+/**
+ * Extra properties that can be set when the variant of the button
+ * supports the pending state
+ *
+ */
+export interface ButtonWithPendingStateProps extends BaseButtonProps {
   isPending?: boolean;
 }
+
+/**
+ * All properties of BaseButtonProps and ButtonWithPendingStateProps,
+ * plus other properties that are assigned internally by the button variants.
+ *
+ */
+export interface ButtonProps
+  extends BaseButtonProps,
+    ButtonWithPendingStateProps {
+  textColor?: TextColor;
+  textHoverColor?: TextHoverColor;
+}

package/src/components/ButtonV2/PrimaryButton.tsx

@@ -2,9 +2,11 @@ import classNames from "classnames";
 import React from "react";
 
 import { ButtonV2 } from "./ButtonV2";
-import { ButtonProps } from "./ButtonProps.type";
+import { ButtonWithPendingStateProps } from "./ButtonProps.type";
 
-export const PrimaryButton = (props: ButtonProps): JSX.Element => {
+export const PrimaryButton = (
+  props: ButtonWithPendingStateProps
+): JSX.Element => {
   return (
     <ButtonV2
       {...props}

package/src/components/Section/Section.tsx

@@ -12,20 +12,23 @@ import "./Section.scss";
 export interface SectionProps extends RestPropped {
   title?: string;
   buttons?: ButtonProps[];
+  footer?: React.ReactNode;
   className?: string;
   isLoading?: boolean;
   loadingIndicatorProps?: LoadingIndicatorProps;
+  children?: React.ReactNode;
 }
 
 export function Section({
   title,
   buttons,
+  footer,
   children,
   className,
   isLoading = false,
   loadingIndicatorProps,
   ...restProps
-}: React.PropsWithChildren<SectionProps>): JSX.Element {
+}: SectionProps): JSX.Element {
   return (
     <div
       {...restProps}
@@ -56,6 +59,8 @@ export function Section({
       )}
 
       <div className="cweb-section-content w-full">{!isLoading && children}</div>
+
+      {footer && <div className="cweb-section-footer">{footer}</div>}
     </div>
   );
 }

package/src/components/Timeline/Timeline.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { SecondaryButton } from "../ButtonV2/SecondaryButton";
+import { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
+
+import { TimelineStep, TimelineStepProps } from "./TimelineStep";
+
+export interface TimelineProps {
+  steps: TimelineStepProps[];
+  loadMoreButtonProps?: BaseButtonProps;
+}
+
+export const Timeline = (props: TimelineProps): JSX.Element => (
+  <>
+    {/* Needs a container around TimelineSteps as last one should be styled differently */}
+    <div>
+      {props.steps.map(step => <TimelineStep {...step} />)}
+    </div>
+    {props.loadMoreButtonProps && (
+      <SecondaryButton
+        className={"mt-6 mx-auto"}
+        {...props.loadMoreButtonProps}
+      />
+    )}
+  </>
+);
+
+export default Timeline;

package/src/components/Timeline/TimelineStep.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import classNames from "classnames";
+
+import { SmallCircleIcon } from "../Icons/SmallCircleIcon";
+
+export interface TimelineStepProps {
+  key: string | number;
+  type?: "wide" | "base";
+  content: React.ReactNode;
+}
+
+export const TimelineStep = ({
+  content,
+  type,
+}: TimelineStepProps): JSX.Element => {
+  const isWideStep = type === "wide";
+  const borderClassNames = "ml-4 pl-6 border-blue-800 border-l-2";
+  const containerClassNames = classNames("relative", {
+    [borderClassNames]: !isWideStep,
+    "pt-3": !isWideStep,
+    "bg-white rounded-lg overflow-hidden": isWideStep,
+  });
+
+  return (
+    <>
+      <div className={containerClassNames}>
+        {content}
+        {!isWideStep && (
+          <SmallCircleIcon
+            className={"text-blue-800 absolute top-3 -left-3 -ml-px"}
+          />
+        )}
+      </div>
+      <div className={classNames(borderClassNames, "h-6 last:h-0")} />
+    </>
+  );
+};
+
+TimelineStep.defaultProps = {
+  type: "base" as TimelineStepProps["type"],
+};

package/src/index.tsx

@@ -6,7 +6,7 @@ export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Badge } from "./components/Badge/Badge";
 export {
   BaseButtonProps as NonPrimaryButtonProps,
-  ButtonProps as PrimaryButtonProps,
+  ButtonWithPendingStateProps as PrimaryButtonProps,
 } from "./components/ButtonV2/ButtonProps.type";
 export { PrimaryButton } from "./components/ButtonV2/PrimaryButton";
 export { SecondaryButton } from "./components/ButtonV2/SecondaryButton";
@@ -84,6 +84,7 @@ export { default as TextEditor } from "./components/TextEditor/TextEditor";
 export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";
 export { TextLink, TextLinkProps } from "./components/TextLink/TextLink";
 export { Title, TitleStyle } from "./components/Title/Title";
+export { Timeline } from "./components/Timeline/Timeline";
 export { ViewItem, ViewItemProps } from "./components/ViewItem/ViewItem";
 
 export { default as Text } from "./components/Text/Text";