@sikka/hawa 0.0.240 → 0.0.241

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.240",
+  "version": "0.0.241",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/BackToTop.tsx

@@ -0,0 +1,85 @@
+import React, { FunctionComponent, ReactNode, useState, useEffect } from "react"
+import { clsx } from "clsx"
+
+type ComponentTypes = {
+  paddingX?: number // Horizontal padding relative to the attached corner
+  paddingY?: number // Vertical padding relative to the attached corner
+  paddingThreshold?: number // Increase to the threshold of the scroll value that has to be passed for the button to appear
+  corner?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+  anchor: React.RefObject<HTMLInputElement>
+}
+
+export const BackToTop: FunctionComponent<ComponentTypes> = ({ ...props }) => {
+  const [visible, setVisible] = useState<boolean>(false)
+
+  const getCoords = () => {
+    let anchor = props.anchor.current
+    return [anchor.scrollTop, anchor.scrollLeft]
+  }
+
+  const onScroll = () => {
+    let [scrollTop, scrollLeft] = getCoords()
+
+    let rect = props.anchor.current.getBoundingClientRect()
+
+    setVisible(scrollTop >= rect.height + (props.paddingThreshold || 100))
+  }
+
+  const backToTop = () => {
+    props.anchor.current.scrollTo(0, 0)
+  }
+
+  useEffect(() => {
+    props.anchor.current.addEventListener("scroll", onScroll)
+
+    return () => {
+      props.anchor.current.removeEventListener("scroll", onScroll)
+    }
+  }, [])
+
+  // // Reference to tailwind classes of corners
+  // const corners = {
+  //   "top-left": ["top-0 left-0", "ml", "mt"],
+  //   "top-right": ["top-0 right-0", "mr", "mt"],
+  //   "bottom-left": ["bottom-0 left-0", "ml", "mb"],
+  //   "bottom-right": ["bottom-0 right-0", "mr", "mb"],
+  // }
+
+  // const getClasses = () => {
+  //   let [corner, horizontal, vertical] = corners[props.corner || "bottom-right"]
+
+  //   return clsx(
+  //     `${horizontal}-[${props.paddingX || 100}px]`,
+  //     `${vertical}-[${props.paddingY || 0}px]`,
+  //     `${corner}`,
+  //     `${visible ? "block" : "hidden"}`
+  //   )
+  // }
+
+  // Had to use react styles because tailwind didn't update top & left
+  const getStyles = () => {
+    let corner = props.corner || "bottom-right"
+    let [vertical, horizontal] = corner.split("-")
+
+    let style = {}
+
+    style[vertical] = props.paddingY || 15
+    style[horizontal] = props.paddingX || 30
+
+    return style
+  }
+
+  return (
+    <div
+      className={clsx(
+        "fixed rounded bg-blue-300 p-2 text-black transition-all hover:bg-blue-500",
+        `${visible ? "block" : "hidden"}`
+        // getClasses()
+      )}
+      style={getStyles()}
+      onClick={backToTop}
+    >
+      Back to top
+    </div>
+  )
+}

package/src/elements/index.ts

@@ -34,6 +34,7 @@ export * from "./UserFeedback"
 export * from "./ArrowCarousel"
 export * from "./FloatingComment"
 export * from "./FloatingCommentSlate"
+export * from "./BackToTop"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/styles.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -167,6 +167,8 @@ optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
@@ -304,6 +306,13 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */
@@ -1035,6 +1044,9 @@ video {
   width: -moz-min-content;
   width: min-content;
 }
+.w-screen {
+  width: 100vw;
+}
 .min-w-\[24px\] {
   min-width: 24px;
 }
@@ -1286,6 +1298,9 @@ video {
 .overflow-y-clip {
   overflow-y: clip;
 }
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1606,6 +1621,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
+.bg-red-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+}
 .bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -2201,6 +2220,11 @@ body {
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-buttonPrimary-500:hover {
   background-color: var(--button-primary-500);
 }