@luscii-healthtech/web-ui 2.3.1 → 2.5.0

package/src/index.tsx

@@ -1,7 +1,9 @@
 export {
-  default as Acknowledgement,
-  ACKNOWLEDGEMENT_TYPE_OPTIONS,
-} from "./components/Acknowledgement/Acknowledgement";
+  default as Toaster,
+  TOASTER_TYPE_OPTIONS,
+} from "./components/Toaster/Toaster";
+export { toast } from "./components/Toaster/toast";
+
 export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Badge } from "./components/Badge/Badge";
 export {
@@ -44,7 +46,7 @@ export {
 } from "./components/List/List";
 export {
   CheckboxList,
-    CheckboxListProps,
+  CheckboxListProps,
 } from "./components/CheckboxList/CheckboxList";
 
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";
@@ -67,6 +69,11 @@ export {
 export { default as PreviewPhone } from "./components/PreviewPhone/PreviewPhone";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
+export { RadioProps, RadioV2 } from "./components/Radio/RadioV2";
+export {
+  RadioGroupProps,
+  RadioGroupV2,
+} from "./components/RadioGroup/RadioGroupV2";
 export { default as Section } from "./components/Section/Section";
 export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
 export {
@@ -74,6 +81,7 @@ export {
   SectionItemProps,
 } from "./components/Section/SectionItem";
 //export { default as Select } from "./components/Select/Select";
+export { SelectProps, Select } from "./components/Select/SelectV2";
 export {
   SettingsMenuButton,
   SettingsMenuButtonProps,
@@ -113,8 +121,8 @@ export { default as Text } from "./components/Text/Text";
 
 export { SearchInput, SearchInputProps } from "./components/Input/SearchInput";
 
-export { Form } from "./components/Form/Form";
-export { FormProps } from "./components/Form/form.types";
+export { GenericForm, Form } from "./components/Form/Form";
+export { GenericFormProps, FormProps } from "./components/Form/form.types";
 
 export { IconProps } from "./components/Icons/types/IconProps.type";
 export { AddIcon } from "./components/Icons/AddIcon";

package/dist/components/Acknowledgement/Acknowledgement.d.ts

@@ -1,22 +0,0 @@
-export namespace ACKNOWLEDGEMENT_TYPE_OPTIONS {
-    export const SUCCESS: string;
-    export const FAILURE: string;
-}
-export default Acknowledgement;
-declare function Acknowledgement({ message, type, isVisible, hasIcon, className, }: {
-    message?: string | undefined;
-    type?: string | undefined;
-    isVisible?: boolean | undefined;
-    hasIcon?: boolean | undefined;
-    className?: string | undefined;
-}): JSX.Element;
-declare namespace Acknowledgement {
-    export const propTypes: {
-        message: PropTypes.Requireable<string>;
-        type: PropTypes.Requireable<string>;
-        hasIcon: PropTypes.Requireable<boolean>;
-        isVisible: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-    };
-}
-import PropTypes from "prop-types";

package/src/components/Acknowledgement/Acknowledgement.js

@@ -1,61 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import { Text } from "../Text/Text";
-import successIcon from "../../assets/success-icon.svg";
-import failureIcon from "../../assets/error-icon.svg";
-
-import "./Acknowledgement.scss";
-
-export const ACKNOWLEDGEMENT_TYPE_OPTIONS = {
-  SUCCESS: "success",
-  FAILURE: "failure",
-};
-
-Acknowledgement.propTypes = {
-  message: PropTypes.string,
-  type: PropTypes.oneOf([ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS, ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE]),
-  hasIcon: PropTypes.bool,
-  isVisible: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-function Acknowledgement({
-  message = "",
-  type = ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS,
-  isVisible = false,
-  hasIcon = false,
-  className = "",
-}) {
-  const containerClassName = classNames("cweb-acknowledgement", className, {
-    "type-success": type === ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS,
-    "type-failure": type === ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE,
-    "is-visible": isVisible,
-  });
-
-  const iconContainerClasses = classNames("acknowledgement-icon-container", {
-    hidden: !hasIcon,
-  });
-
-  const successIconClasses = classNames("icon success-icon acknowledgement-icon", {
-    hidden: type !== ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS,
-  });
-
-  const failureIconClasses = classNames("icon failure-icon acknowledgement-icon", {
-    hidden: type !== ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE,
-  });
-
-  return (
-    <div id="application-acknowledgement" data-test-id={`acknowledgement-panel-${type}`} className={containerClassName}>
-      <div className={iconContainerClasses}>
-        <img src={successIcon} className={successIconClasses} alt="Success icon" />
-        <img src={failureIcon} className={failureIconClasses} alt="Failure icon" />
-      </div>
-
-      <Text data-test-id="acknowledgement-message" text={message} />
-    </div>
-  );
-}
-
-export default Acknowledgement;

package/src/components/Acknowledgement/Acknowledgement.scss

@@ -1,49 +0,0 @@
-@import "../../styles/layout";
-@import "../../styles/colors";
-
-.cweb-acknowledgement {
-  @include horizontal-static-position(fixed, 10000);
-  @include flexbox-vertical(center, center);
-
-  $horizontal-margin: 6px;
-  $max-width: 360px - $horizontal-margin;
-
-  top: 0;
-  margin: 0 auto;
-  opacity: 0;
-  width: $max-width;
-  max-width: calc(100% - #{$horizontal-margin});
-  box-shadow: 0 0 20px 0 rgba(106, 191, 165, 0.2);
-  padding: 16px;
-  border-radius: 8px;
-
-  transform: translateY(-100%);
-  transition: transform ease-out 400ms, opacity 1ms linear 500ms;
-
-  > .acknowledgement-icon-container {
-    width: 48px;
-    height: 48px;
-
-    margin-bottom: 12px;
-
-     > .acknowledgement-icon {
-       width: 100%;
-       height: 100%;
-     }
-  }
-
-  &.type-success {
-    background: $color-positive-support;
-  }
-
-  &.type-failure {
-    background: $color-negative-support;
-  }
-
-  &.is-visible {
-    opacity: 1;
-    transform: translateY(32px);
-    transition: transform ease-in 150ms;
-  }
-}
-