@geoinsight/react-components 1.0.2 → 1.0.5

package/dist/esm/index.css

@@ -53,6 +53,9 @@
     cubic-bezier(0.1, 0.2, 0.3, 0.4);
   --transition-box-shadow-cubic-bezier: box-shadow 500ms
     cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-border-cubic-bezier: border 250ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+
 
   --color-dark-base: #2e3440;
   --color-dark-bright: #3b4252;
@@ -262,9 +265,11 @@ h6 {
   cursor: pointer;
   display: flex;
   gap: var(--spacing-8);
+  height: var(--spacing-40);
   justify-content: flex-end;
   padding: var(--spacing-4) var(--spacing-16);
   margin: var(--spacing-4) 0;
+  text-decoration: none;
 }
 
 /* .menu-button > svg {
@@ -321,7 +326,8 @@ h6 {
   background-color: var(--color-primary-darker);
 }
 
-.button {
+.button,
+.link {
   align-items: center;
   border-radius: var(--spacing-32);
   border: none;
@@ -351,19 +357,46 @@ h6 {
     var(--transition-box-shadow-cubic-bezier);
 }
 
-.button__link {
+
+.button__primary {
+  background-color: var(--color-primary-bright);
+  border: 3px solid var(--color-primary-base);
+}
+
+.button__secondary,
+.link__secondary {
+  background-color: var(--color-main-background);
+  border: 3px solid var(--color-primary-base);
+  border-radius: var(--spacing-32);
+  text-decoration: unset;
+}
+
+.button__secondary:hover {
+  box-shadow: unset;
+  border: 3px solid var(--color-primary-base);
+}
+
+.button__icon {
+  background-color: var(--color-primary-bright);
+}
+
+.button__icon:hover {
+  border: unset;
+}
+
+.link__primary {
   background-color: unset !important;
   color: var(--color-primary-base) !important;
   text-decoration: underline 1px var(--color-primary-base);
   text-underline-offset: var(--spacing-4);
 }
 
-[data-theme="light"] .button__link {
+[data-theme="light"] .link__primary {
   color: var(--color-primary-darker) !important;
   text-decoration: underline 1px var(--color-primary-darker);
 }
 
-.button__link:hover {
+.link__primary:hover {
   border: unset;
   box-shadow: unset;
   color: var(--color-primary-dark) !important;
@@ -373,29 +406,48 @@ h6 {
     var(--transition-text-underline-offset-cubic-bezier);
 }
 
-.button__primary {
-  background-color: var(--color-primary-bright);
+.link__secondary:hover {
+  background-color: var(--color-primary-dark);
   border: 3px solid var(--color-primary-base);
+  box-shadow: unset;
+  transition: var(--transition-bg-cubic-bezier),
+    var(--transition-box-shadow-cubic-bezier);
 }
 
-.button__secondary {
-  background-color: var(--color-main-background);
-  border: 3px solid var(--color-primary-base);
-  border-radius: var(--spacing-32);
-  text-decoration: unset;
+.link__icon {
+  background-color: unset !important;
+  color: var(--color-primary-base) !important;
 }
 
-.button__secondary:hover {
-  box-shadow: unset;
-  border: 3px solid var(--color-primary-base);
+.link > a {
+  text-decoration: inherit;
+  color: inherit;
 }
 
-.button__icon {
-  background-color: var(--color-primary-bright);
+.link__icon svg {
+  border: 2px solid transparent;
+  border-bottom: 2px solid var(--color-primary-base);
+  border-radius: 2px;
+  padding: var(--spacing-4);
 }
 
-.button__icon:hover {
+[data-theme="light"] .link__icon {
+  color: var(--color-primary-darker) !important;
+}
+
+[data-theme="light"] .link__icon svg {
+  border-bottom: 2px solid var(--color-primary-darker);
+}
+
+.link__icon:hover {
   border: unset;
+  box-shadow: unset;
+}
+
+.link__icon:hover svg {
+  color: var(--color-main-color) !important;
+  border: 2px solid var(--color-primary-dark);
+  transition: var(--transition-color-cubic-bezier), var(--transition-border-cubic-bezier);
 }
 
 .button__small {
@@ -410,11 +462,6 @@ h6 {
   padding: var(--spacing-16);
 }
 
-.button__link > a {
-  text-decoration: inherit;
-  color: inherit;
-}
-
 .button__icon.button__medium {
   padding: var(--spacing-8) var(--spacing-12);
 }
@@ -796,6 +843,8 @@ h6 {
   padding-bottom: var(--spacing-16);
 }
 
+@import url("mapbox-gl/dist/mapbox-gl.css");
+
 .map {
   position: relative;
   height: 100%;

package/dist/esm/index.js

@@ -11,7 +11,6 @@ import * as Layers from '@deck.gl/layers';
 import { Popup, Map, Source, Layer } from 'react-map-gl';
 import maplibregl from 'maplibre-gl';
 import { FiSun, FiMoon } from 'react-icons/fi';
-import 'mapbox-gl/dist/mapbox-gl.css';
 
 const ALLOWED_CHILD_COMPONENT$1 = ["MenuItem"];
 function MenuWrapper({ children }) {
@@ -59,7 +58,14 @@ function useMenu() {
     return MenuContext;
 }
 
-function MenuButton({ children, nested, subnested, dropdown, isLink, isSelected, handleCallbackClick, ...props }) {
+const Anchor = ({ Custom, children, ...rest }) => {
+    return Custom ? (jsx(Custom, { ...rest, children: children })) : (jsx("a", { ...rest, children: children }));
+};
+function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
+    return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, `link__${mode}`, `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
+}
+
+function MenuButton({ anchor, children, buttonClassName, nested, subnested, dropdown, isLink, isSelected, handleCallbackClick, ...props }) {
     const { toggle } = useContext(useMenu());
     const [isToggled, setIsToggled] = useState(false);
     const menuId = useMemo(() => props["data-menu-id"], [props]);
@@ -68,13 +74,19 @@ function MenuButton({ children, nested, subnested, dropdown, isLink, isSelected,
         setIsToggled(!isToggled);
         handleCallbackClick && handleCallbackClick();
     };
-    return (jsxs("div", { role: "button", className: clsx("menu-button", {
+    return anchor ? (jsxs(Anchor, { className: clsx("menu-button", {
             "menu-button-dropdown": dropdown,
             "menu-button-nested": nested,
             "menu-button-subnested": subnested,
             "menu-button-is-link": isLink,
             "menu-button-is-selected": isSelected,
-        }), onClick: handleClick, ...props, children: [children, dropdown ? (isToggled ? (jsx(TfiAngleDown, { size: "1rem" })) : (jsx(TfiAngleUp, { size: "1rem" }))) : null] }));
+        }, buttonClassName), ...anchor, children: [children, dropdown ? (isToggled ? (jsx(TfiAngleDown, { size: "1rem" })) : (jsx(TfiAngleUp, { size: "1rem" }))) : null] })) : (jsxs("div", { role: "button", className: clsx("menu-button", {
+            "menu-button-dropdown": dropdown,
+            "menu-button-nested": nested,
+            "menu-button-subnested": subnested,
+            "menu-button-is-link": isLink,
+            "menu-button-is-selected": isSelected,
+        }, buttonClassName), onClick: handleClick, ...props, children: [children, dropdown ? (isToggled ? (jsx(TfiAngleDown, { size: "1rem" })) : (jsx(TfiAngleUp, { size: "1rem" }))) : null] }));
 }
 
 function MenuContent({ children, ...props }) {
@@ -122,13 +134,6 @@ const Menu = {
     Content: MenuContent,
 };
 
-const Anchor = ({ Custom, children, ...rest }) => {
-    return Custom ? (jsx(Custom, { ...rest, children: children })) : (jsx("a", { ...rest, children: children }));
-};
-function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
-    return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
-}
-
 // how do I solve reseting the form outside the form
 function Form({ children, onSubmit, submitButton = {
     label: "Submit",