sparkgeo · atweedie · Jan 27, 2026 · Jan 22, 2026 · Jan 26, 2026 · Jan 26, 2026
diff --git a/dist/index.css b/dist/index.css
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -140,7 +140,7 @@ export declare namespace LayerButtonReel {
     }
 }
 
-export declare function LayerCard({ layerName, isActive, onChange, attribution, description, children }: {
+export declare function LayerCard({ layerName, isActive, onChange, attribution, description, children, }: {
     layerName: any;
     isActive: any;
     onChange: any;

diff --git a/dist/spk-library.es.js b/dist/spk-library.es.js
@@ -1332,7 +1332,7 @@ Mr.propTypes = {
   onChange: s.func.isRequired,
   disabled: s.bool
 };
-const Qn = "_layerCard_mw8v9_1", et = "_layerCardAttributionWrapper_mw8v9_11", rt = "_layerCardAttribution_mw8v9_11", nt = "_layerCardHeader_mw8v9_25", tt = "_layerCardTextWrapper_mw8v9_34", at = "_layerCardTitle_mw8v9_42", ot = "_layerCardDescription_mw8v9_50", it = "_layerCardControls_mw8v9_59", st = "_layerCardToggle_mw8v9_64", lt = "_layerCardContent_mw8v9_69", ct = "_layerCardInfoIcon_mw8v9_85", fe = {
+const Qn = "_layerCard_1hhfw_1", et = "_layerCardAttributionWrapper_1hhfw_11", rt = "_layerCardAttribution_1hhfw_11", nt = "_layerCardHeader_1hhfw_23", tt = "_layerCardTextWrapper_1hhfw_32", at = "_layerCardTitle_1hhfw_40", ot = "_layerCardDescription_1hhfw_48", it = "_layerCardControls_1hhfw_55", st = "_layerCardToggle_1hhfw_60", lt = "_layerCardContent_1hhfw_65", ct = "_layerCardInfoIcon_1hhfw_83", fe = {
   layerCard: Qn,
   layerCardAttributionWrapper: et,
   layerCardAttribution: rt,
@@ -1344,14 +1344,35 @@ const Qn = "_layerCard_mw8v9_1", et = "_layerCardAttributionWrapper_mw8v9_11", r
   layerCardToggle: st,
   layerCardContent: lt,
   layerCardInfoIcon: ct
-}, ut = ({ layerName: n, isActive: r, onChange: i, attribution: c, description: y, children: v }) => {
-  const [g, h] = de(!1), m = c && !!c.text && (r || g);
+}, ut = ({
+  layerName: n,
+  isActive: r,
+  onChange: i,
+  attribution: c,
+  description: y,
+  children: v
+}) => {
+  const [g, h] = de(!1), m = c && !!c.text;
   return /* @__PURE__ */ t.jsxs("div", { className: fe.layerCard, children: [
     /* @__PURE__ */ t.jsxs("div", { className: fe.layerCardHeader, children: [
       /* @__PURE__ */ t.jsx("div", { className: fe.layerCardTextWrapper, children: /* @__PURE__ */ t.jsx("span", { className: fe.layerCardTitle, children: n }) }),
       /* @__PURE__ */ t.jsxs(gn, { delay: 300, children: [
         /* @__PURE__ */ t.jsx(bn, { children: "Toggle layer description" }),
-        /* @__PURE__ */ t.jsx(Ne, { className: fe.layerCardInfoIcon, onClick: () => h(!g), children: /* @__PURE__ */ t.jsx(je, { size: "xs", fontWeight: "bold", icon: kr }) })
+        (y || m) && /* @__PURE__ */ t.jsx(
+          Ne,
+          {
+            className: fe.layerCardInfoIcon,
+            onClick: () => h(!g),
+            children: /* @__PURE__ */ t.jsx(
+              je,
+              {
+                size: "xs",
+                fontWeight: "bold",
+                icon: kr
+              }
+            )
+          }
+        )
       ] }),
       i && /* @__PURE__ */ t.jsx(
         Mr,
@@ -1362,10 +1383,11 @@ const Qn = "_layerCard_mw8v9_1", et = "_layerCardAttributionWrapper_mw8v9_11", r
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: fe.layerCardContent, children: [
-      y && g && /* @__PURE__ */ t.jsx("span", { className: fe.layerCardDescription, children: y }),
+    g && /* @__PURE__ */ t.jsxs("div", { className: fe.layerCardContent, children: [
+      y && /* @__PURE__ */ t.jsx("span", { className: fe.layerCardDescription, children: y }),
       m && /* @__PURE__ */ t.jsx("div", { className: fe.layerCardAttributionWrapper, children: /* @__PURE__ */ t.jsxs("span", { className: fe.layerCardAttribution, children: [
-        "Source: ",
+        "Source:",
+        " ",
         /* @__PURE__ */ t.jsx("a", { href: c.url, children: c.text })
       ] }) }),
       v && v

diff --git a/dist/spk-library.umd.js b/dist/spk-library.umd.js
diff --git a/src/components/composite/LayerCard.jsx b/src/components/composite/LayerCard.jsx
@@ -6,11 +6,18 @@ import { Button, Tooltip, TooltipTrigger } from "react-aria-components";
 import { LayerToggle } from "../core/LayerToggle";
 import styles from "./LayerCard.module.css";
 
-
-export const LayerCard = ({ layerName, isActive, onChange, attribution, description, children }) => {
+export const LayerCard = ({
+    layerName,
+    isActive,
+    onChange,
+    attribution,
+    description,
+    children,
+}) => {
     const [showLayerInfo, setShowLayerInfo] = useState(false);
 
-    const shouldShowAttribution = attribution && Boolean(attribution.text) && (isActive || showLayerInfo)
+    const hasAttribution = attribution && Boolean(attribution.text);
+
     return (
         <div className={styles.layerCard}>
             <div className={styles.layerCardHeader}>
@@ -19,29 +26,45 @@ export const LayerCard = ({ layerName, isActive, onChange, attribution, descript
                 </div>
                 <TooltipTrigger delay={300}>
                     <Tooltip>Toggle layer description</Tooltip>
-                    <Button className={styles.layerCardInfoIcon} onClick={() => setShowLayerInfo(!showLayerInfo)}>
-                        <FontAwesomeIcon size="xs" fontWeight="bold" icon={faInfo} />
-                    </Button>
+                    {(description || hasAttribution) && (
+                        <Button
+                            className={styles.layerCardInfoIcon}
+                            onClick={() => setShowLayerInfo(!showLayerInfo)}
+                        >
+                            <FontAwesomeIcon
+                                size="xs"
+                                fontWeight="bold"
+                                icon={faInfo}
+                            />
+                        </Button>
+                    )}
                 </TooltipTrigger>
-                { onChange &&
+                {onChange && (
                     <LayerToggle
                         layerName={layerName}
                         isActive={isActive}
                         onChange={onChange}
                     />
-                }
-            </div>
-            <div className={styles.layerCardContent}>
-                {description && showLayerInfo && (<span className={styles.layerCardDescription}>{description}</span>)}
-                {shouldShowAttribution && (
-                    <div className={styles.layerCardAttributionWrapper}>
-                        <span className={styles.layerCardAttribution}>
-                            Source: <a href={attribution.url}>{attribution.text}</a>
-                        </span>
-                    </div>
                 )}
-                {children && (children)}
             </div>
+            {showLayerInfo && (
+                <div className={styles.layerCardContent}>
+                    {description && (
+                        <span className={styles.layerCardDescription}>
+                            {description}
+                        </span>
+                    )}
+                    {hasAttribution && (
+                        <div className={styles.layerCardAttributionWrapper}>
+                            <span className={styles.layerCardAttribution}>
+                                Source:{" "}
+                                <a href={attribution.url}>{attribution.text}</a>
+                            </span>
+                        </div>
+                    )}
+                    {children && children}
+                </div>
+            )}
         </div>
     );
 };
@@ -53,10 +76,10 @@ LayerCard.propTypes = {
     description: PropTypes.string,
     attribution: PropTypes.objectOf({
         url: PropTypes.string,
-        text: PropTypes.string
+        text: PropTypes.string,
     }),
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
-    ])
-};
+    ]),
+};
diff --git a/src/components/composite/LayerCard.module.css b/src/components/composite/LayerCard.module.css
@@ -9,11 +9,9 @@
 }
 
 .layerCardAttributionWrapper {
-    margin-top: 4px;
     font-size: 0.7rem;
     font-style: italic;
-    align-self: center;
-    width: 90%;
+    align-self: flex-start;
 }
 
 .layerCardAttribution {
@@ -48,28 +46,25 @@
 }
 
 .layerCardDescription {
-    padding: var(--spacing-medium);
-    align-self: center;
-    width: 90%;
+    align-self: flex-start;
     text-wrap: pretty;
     word-wrap: break-word;
     font-size: var(--text-size-small);
 }
 
 .layerCardControls {
     grid-area: controls;
-    justify-self: end
+    justify-self: end;
 }
 
 .layerCardToggle {
     grid-area: toggle;
-    justify-self: end
+    justify-self: end;
 }
 
 .layerCardContent {
     display: flex;
     flex-direction: column;
-    width: 90%;
     overflow: hidden;
     justify-content: center;
     justify-self: center;
@@ -80,6 +75,9 @@
     color: var(--text-color-secondary);
     font-size: var(--font-size-small);
     margin-bottom: var(--spacing-large);
+    padding: var(--spacing-medium);
+    margin: var(--spacing-medium);
+    gap: 0.5rem;
 }
 
 .layerCardInfoIcon {
@@ -104,5 +102,5 @@
 }
 
 .layerCardContent:empty {
-    margin-bottom: 0; 
+    margin-bottom: 0;
 }
diff --git a/src/stories/LayerCard.stories.js b/src/stories/LayerCard.stories.js
@@ -7,8 +7,6 @@ export default {
     // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
     tags: ["autodocs"],
     parameters: {
-        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-        layout: "fullscreen",
     },
 };
 
@@ -26,3 +24,19 @@ export const Default = {
         },
     },
 };
+
+export const WithAttribution = {
+    args: {
+        layerName: "Example Layer",
+        description: "This is an example layercard that can optionally contain a descriptive text string for the layer",
+        attribution: { text: "This is attribution text" },
+        isActive: true,
+        onChange: fn(),
+        buttons: {
+            fill: fn(),
+            filter: fn(),
+            info: fn(),
+            trash: fn(),
+        },
+    },
+};