@defra/interactive-map 0.0.46-alpha → 0.0.46-fmp-2

package/src/App/hooks/useLayoutMeasurements.test.js

@@ -10,13 +10,23 @@ jest.mock('../store/appContext.js')
 jest.mock('../store/mapContext.js')
 jest.mock('../../utils/getSafeZoneInset.js')
 
-const el = (props = {}) => {
+const el = ({ rect, ...props } = {}) => {
   const e = document.createElement('div')
   e.style.setProperty = jest.fn()
   Object.entries(props).forEach(([k, v]) => Object.defineProperty(e, k, { value: v, configurable: true }))
+  if (rect) {
+    e.getBoundingClientRect = () => ({ top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0, ...rect })
+  }
   return e
 }
 
+// For firstElementChild-based reads (logo column width, attribution text natural width).
+const appendChild = (parent, props = {}) => {
+  const child = el(props)
+  parent.appendChild(child)
+  return child
+}
+
 const refs = (o = {}) => ({
   appContainerRef: { current: o.appContainer || el() },
   mainRef: { current: o.main === null ? null : el({ offsetHeight: 500, ...o.main }) },
@@ -105,19 +115,19 @@ describe('useLayoutMeasurements', () => {
 
   test.each([
     [
-      'no actions (height 0) — uses base gap',
+      'no actions (height 0) — clears the bottom row',
       { main: { offsetHeight: 500 }, bottom: { offsetTop: 400 }, actions: { offsetTop: 450, offsetHeight: 0 } },
-      '100px' // baseBottom = 500 - 400 - 0 = 100
+      '108px' // clearsBottomRow = 500 - 400 + dividerGap (8) = 108
     ],
     [
-      'actions floating above base gap (tablet/desktop) — uses actionsOffset + dividerGap',
+      'actions floating above the row (tablet/desktop) — uses actionsOffset + dividerGap',
       { main: { offsetHeight: 500 }, bottom: { offsetTop: 440, offsetHeight: 20 }, actions: { offsetTop: 408, offsetHeight: 60 } },
-      '100px' // actionsOffset = 500 - 408 = 92, 92 + 8 = 100 > baseBottom (40)
+      '100px' // actionsOffset = 500 - 408 = 92, 92 + 8 = 100 > clearsBottomRow (68)
     ],
     [
-      'base gap already larger than actionsOffset (mobile in-flow) — base gap wins',
+      'row clearance already larger than actionsOffset (mobile in-flow) — row clearance wins',
       { main: { offsetHeight: 500 }, bottom: { offsetTop: 350 }, actions: { offsetTop: 430, offsetHeight: 40 } },
-      '150px' // baseBottom = 150 > actionsOffset (70) + dividerGap (8) = 78
+      '158px' // clearsBottomRow = 500 - 350 + 8 = 158 > actionsOffset (70) + dividerGap (8) = 78
     ]
   ])('calculates --hint-bottom for %s', (_, refOverrides, expected) => {
     const { layoutRefs } = setup({ refs: refOverrides })
@@ -129,8 +139,8 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     layoutRefs.actionsRef.current = null
     renderHook(() => useLayoutMeasurements())
-    // actionsHeight = 0, falls back to baseBottom = 500 - 400 - 0 = 100
-    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--hint-bottom', '100px')
+    // actionsHeight = 0, falls back to clearsBottomRow = 500 - 400 + dividerGap (8) = 108
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--hint-bottom', '108px')
   })
 
   test.each([
@@ -200,6 +210,41 @@ describe('useLayoutMeasurements', () => {
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--left-offset-top', '48px')
   })
 
+  test('keeps attributions docked beside the logo when the natural text width fits', () => {
+    const { layoutRefs } = setup({ refs: { bottom: { rect: { left: 0 } } } })
+    appendChild(layoutRefs.bottomRef.current, {}) // logo column
+    appendChild(layoutRefs.bottomRef.current, { offsetWidth: 192, rect: { left: 115 } }) // bottom-right column
+    layoutRefs.bottomRef.current.appendChild(layoutRefs.attributionsRef.current) // sibling of both columns
+    appendChild(layoutRefs.attributionsRef.current, { scrollWidth: 150 }) // attribution text, fits
+    renderHook(() => useLayoutMeasurements())
+    expect(layoutRefs.attributionsRef.current.classList.contains('im-o-app__attributions--stacked')).toBe(false)
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--attributions-left', '115px')
+    // docked: attributions.offsetHeight (16) + dividerGap (8) - primaryGap (8) = 16 — the
+    // bled attribution creeps 16px back up into the row, so bottom-right needs pushing clear
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--bottom-right-clearance', '16px')
+  })
+
+  test('stacks attributions onto their own row when the text is wider than the space beside the logo', () => {
+    const { layoutRefs } = setup({ refs: { bottom: { rect: { left: 0 } } } })
+    appendChild(layoutRefs.bottomRef.current, {}) // logo column
+    appendChild(layoutRefs.bottomRef.current, { offsetWidth: 192, rect: { left: 115 } }) // bottom-right column
+    layoutRefs.bottomRef.current.appendChild(layoutRefs.attributionsRef.current) // sibling of both columns
+    appendChild(layoutRefs.attributionsRef.current, { scrollWidth: 250 }) // attribution text, too wide to fit
+    renderHook(() => useLayoutMeasurements())
+    expect(layoutRefs.attributionsRef.current.classList.contains('im-o-app__attributions--stacked')).toBe(true)
+    // stacked already has its own clearance (the stacked rule's own margin-top), so none needed here
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--bottom-right-clearance', '0px')
+  })
+
+  test('never gives bottom-right negative clearance when attributions is shorter than the bleed', () => {
+    const { layoutRefs } = setup({ refs: { bottom: { rect: { left: 0 } }, attributions: { offsetHeight: 0 } } })
+    appendChild(layoutRefs.bottomRef.current, {}) // logo column
+    appendChild(layoutRefs.bottomRef.current, { offsetWidth: 192, rect: { left: 115 } }) // bottom-right column
+    layoutRefs.bottomRef.current.appendChild(layoutRefs.attributionsRef.current) // sibling of both columns
+    renderHook(() => useLayoutMeasurements())
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--bottom-right-clearance', '0px')
+  })
+
   test('uses 0 when bottomRightRef current is null', () => {
     const { layoutRefs } = setup()
     layoutRefs.bottomRightRef.current = null
@@ -324,7 +369,7 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     expect(useResizeObserver).toHaveBeenCalledWith(
-      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.headerRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.bottomRef, layoutRefs.bottomRightRef, layoutRefs.leftTopRef, layoutRefs.leftBottomRef, layoutRefs.rightTopRef, layoutRefs.rightBottomRef, layoutRefs.drawerRef, layoutRefs.leftRef, layoutRefs.rightRef],
+      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.headerRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.bottomRef, layoutRefs.bottomRightRef, layoutRefs.attributionsRef, layoutRefs.leftTopRef, layoutRefs.leftBottomRef, layoutRefs.rightTopRef, layoutRefs.rightBottomRef, layoutRefs.drawerRef, layoutRefs.leftRef, layoutRefs.rightRef],
       expect.any(Function)
     )
     layoutRefs.appContainerRef.current.style.setProperty.mockClear()

package/src/App/layout/Layout.jsx

@@ -97,9 +97,13 @@ export const Layout = () => {
               <div className='im-o-app__bottom-right' ref={layoutRefs.bottomRightRef}>
                 <SlotRenderer slot={layoutSlots.BOTTOM_RIGHT} />
               </div>
-              <div className='im-o-app__attributions' ref={layoutRefs.attributionsRef}>
-                <Attributions />
-              </div>
+            </div>
+            {/* A sibling of both bottom-cols (not nested in one) so a stacked attribution
+                (useLayoutMeasurements) can wrap onto its own full row and genuinely grow
+                .im-o-app__bottom, pushing the logo up — nesting it in a column can't do that,
+                since only .im-o-app__bottom's own flex-wrap can force a new line. */}
+            <div className='im-o-app__attributions' ref={layoutRefs.attributionsRef}>
+              <Attributions />
             </div>
           </div>
           <div className='im-o-app__drawer' ref={layoutRefs.drawerRef}>

package/src/App/layout/layout.module.scss

@@ -261,7 +261,9 @@
 // ---------------------------------------------------
 
 .im-o-app__bottom {
+  position: relative; // anchor for the docked (absolutely-positioned) attributions
   display: flex;
+  flex-wrap: wrap; // lets a stacked attributions row wrap onto its own line
   justify-content: space-between;
   align-items: flex-end;
   z-index: -2; // Support masking the viewport
@@ -279,7 +281,9 @@
   gap: var(--divider-gap);
 }
 
-.im-o-app__bottom-col:last-child {
+// :nth-child, not :last-child — .im-o-app__attributions (Layout.jsx) is a third sibling
+// after both bottom-cols, so this is no longer literally the last child.
+.im-o-app__bottom-col:nth-child(2) {
   position: relative; // anchor for absolutely-positioned attributions
   flex: 1 1 auto;
   flex-direction: column;
@@ -297,20 +301,45 @@
 
 .im-o-app__bottom-right {
   justify-content: flex-end;
+  // Docked attributions (below) bleeds past the row's own bottom edge and can grow back up
+  // into it — --bottom-right-clearance (useLayoutMeasurements) keeps this content clear.
+  margin-bottom: var(--bottom-right-clearance, 0);
 }
 
 // ---------------------------------------------------
 // Attributions:
 // ---------------------------------------------------
+//
+// Docked (default): absolutely positioned against .im-o-app__bottom (not the bottom-right
+// column it's a DOM sibling of — see Layout.jsx), so it can bleed flush into the corner
+// past .im-o-app__main's padding on bottom/right. `left` (--attributions-left, computed in
+// useLayoutMeasurements from the bottom-right column's own measured position) caps it to
+// that column's width, so it never overlaps the logo — long text wraps within that width.
+//
+// Stacked (im-o-app__attributions--stacked, toggled in useLayoutMeasurements when the
+// copyright text no longer fits beside the logo at its natural width): back in normal flex
+// flow as .im-o-app__bottom's third (wrapped) item, `flex-basis` forces it onto its own
+// full-width row below both columns — genuinely growing .im-o-app__bottom's height, which
+// (being bottom-pinned) pushes the logo and bottom-right buttons up rather than squeezing
+// the text into an ever-narrower column. The oversized flex-basis plus negative
+// right/bottom/left margin bleeds that row flush to the true edges the same way the docked
+// box's absolute offsets do above.
 
 .im-o-app__attributions:not(:empty) {
   position: absolute;
   bottom: calc(var(--primary-gap) * -1);
   right: calc(var(--primary-gap) * -1);
+  left: var(--attributions-left, 0);
   display: flex;
   justify-content: flex-end;
 }
 
+.im-o-app__attributions--stacked:not(:empty) {
+  position: static;
+  flex-basis: calc(100% + var(--primary-gap) * 2);
+  margin: var(--divider-gap) calc(var(--primary-gap) * -1) calc(var(--primary-gap) * -1) calc(var(--primary-gap) * -1);
+}
+
 // ---------------------------------------------------
 // Drawer:
 // ---------------------------------------------------

package/src/types.js

@@ -394,6 +394,11 @@
  * @property {string} [attribution]
  * Attribution text.
  *
+ * @property {boolean} [showAttributionOnMobile]
+ * Some basemap providers' terms require attribution to remain visible on all devices, while
+ * others are content for it to be hidden on mobile to save space. Attribution is hidden on
+ * mobile by default; set to `true` to keep it visible on mobile for this style.
+ *
  * @property {string} [backgroundColor]
  * CSS background color. Allows the viewport background to matche the background layer of the style.
  *