@geoinsight/react-components 1.0.4 → 1.0.5

package/dist/cjs/components/button/index.stories.d.ts

@@ -3,14 +3,17 @@ import { Button } from "./index";
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
-export declare const PrimaryMedium: Story;
-export declare const PrimaryLarge: Story;
-export declare const PrimarySmall: Story;
-export declare const SecondaryColor: Story;
-export declare const SecondaryButtonLink: Story;
-export declare const PrimaryButtonDisabled: Story;
-export declare const SecondaryButtonDisabled: Story;
-export declare const IconButton: Story;
-export declare const PrimaryButtonLink: Story;
+export declare const ButtonPrimaryMedium: Story;
+export declare const ButtonPrimaryLarge: Story;
+export declare const ButtonPrimarySmall: Story;
+export declare const ButtonPrimaryDisabled: Story;
+export declare const ButtonPrimaryWithIcon: Story;
+export declare const ButtonSecondary: Story;
+export declare const ButtonSecondaryWithIcon: Story;
+export declare const ButtonSecondaryDisabled: Story;
+export declare const ButtonIcon: Story;
+export declare const LinkPrimary: Story;
+export declare const LinkSecondary: Story;
+export declare const LinkIcon: Story;
 export declare const LinkOutsideButton: Story;
 export declare const LinkOutsideButtonAsPureLink: Story;

package/dist/cjs/components/map/map-mapbox.d.ts

@@ -1,5 +1,4 @@
 import { Viewport } from "maplibre-gl";
-import "mapbox-gl/dist/mapbox-gl.css";
 import { MapAsMapbox } from "./index.types";
 export interface MapboxMapProps {
     basemap?: string;

package/dist/cjs/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;
@@ -323,7 +326,8 @@ h6 {
   background-color: var(--color-primary-darker);
 }
 
-.button {
+.button,
+.link {
   align-items: center;
   border-radius: var(--spacing-32);
   border: none;
@@ -353,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;
@@ -375,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 {
@@ -412,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);
 }
@@ -798,6 +843,8 @@ h6 {
   padding-bottom: var(--spacing-16);
 }
 
+@import url("mapbox-gl/dist/mapbox-gl.css");
+
 .map {
   position: relative;
   height: 100%;

package/dist/cjs/index.js

@@ -13,7 +13,6 @@ var Layers = require('@deck.gl/layers');
 var reactMapGl = require('react-map-gl');
 var maplibregl = require('maplibre-gl');
 var fi = require('react-icons/fi');
-require('mapbox-gl/dist/mapbox-gl.css');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -84,7 +83,7 @@ const Anchor = ({ Custom, children, ...rest }) => {
     return Custom ? (jsxRuntime.jsx(Custom, { ...rest, children: children })) : (jsxRuntime.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" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, mode === "secondary" ? `button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
+    return as === "link" ? (jsxRuntime.jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, `link__${mode}`, `button__${size}`), ...rest, children: [children, icon] })) : (jsxRuntime.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 }) {