@luscii-healthtech/web-ui 2.2.0 → 2.4.0

package/src/styles/_skeleton.scss

@@ -0,0 +1,63 @@
+@mixin skeleton() {
+  .skeleton-box {
+    display: inline-block;
+    height: 1em;
+    position: relative;
+    overflow: hidden;
+    background-color: #cbd5e1; //slate 300
+    border-radius: 3px;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(
+                      90deg,
+                      rgba(#fff, 0) 0,
+                      rgba(#fff, 0.2) 20%,
+                      rgba(#fff, 0.5) 60%,
+                      rgba(#fff, 0)
+      );
+
+      animation: shimmer 800ms infinite;
+      content: "";
+    }
+
+    &.is-circle {
+      border-radius: 50%;
+    }
+
+    &.is-button {
+      background-color: #e2e8f0; //secondary button color
+      border-radius: 9999px;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transform: translateX(-100%);
+        background-image: linear-gradient(
+                        90deg,
+                        rgba(#ddd, 0) 0,
+                        rgba(#ddd, 0.2) 20%,
+                        rgba(#ddd, 0.5) 60%,
+                        rgba(#ddd, 0)
+        );
+
+        animation: shimmer 800ms infinite;
+        content: "";
+      }
+    }
+
+    @keyframes shimmer {
+      100% {
+        transform: translateX(100%);
+      }
+    }
+  }
+}

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;
-  }
-}
-