@dbcdk/react-components 0.0.63 → 0.0.65

package/dist/components/nav-bar/NavBar.js

@@ -25,5 +25,5 @@ export function NavBar({ logo, items, productName, addition, activeLink, size, }
         };
         return (_jsx("li", { className: styles.navItem, role: "listitem", children: Component ? (_jsxs(Component, { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) : (_jsxs("a", { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) }, id));
     });
-    return (_jsx(AppHeader, { size: size, children: _jsxs("nav", { ref: navRef, className: styles.container, "aria-label": productName ? `${productName} navigation` : 'Main navigation', children: [(logo || productName) && (_jsxs("div", { className: styles.logoRow, children: [logo, productName && (_jsxs("span", { className: styles.productName, children: [_jsx(Logo, {}), _jsx(Headline, { disableMargin: true, size: 1, children: productName })] }))] })), _jsx("div", { className: styles.navContent, children: _jsx("ul", { className: styles.navItems, role: "list", children: navLinks }) }), addition && !isMobile && _jsx("div", { className: styles.addition, children: addition }), isMobile && (_jsx(Popover, { open: mobileOpen, onOpenChange: setMobileOpen, matchTriggerWidth: true, fullWidth: false, autoFocusContent: true, anchorRef: navRef, trigger: (toggle, _icon, open) => (_jsx("button", { type: "button", className: styles.burgerButton, "aria-label": open ? 'Close navigation menu' : 'Open navigation menu', "aria-expanded": open, onClick: toggle, children: open ? _jsx(X, { size: 20 }) : _jsx(MenuIcon, { size: 20 }) })), children: close => (_jsxs("div", { className: styles.mobileMenu, children: [_jsx("ul", { className: styles.mobileNavItems, role: "list", onClick: close, children: navLinks }), addition && _jsx("div", { className: styles.mobileAddition, children: addition })] })) }))] }) }));
+    return (_jsx(AppHeader, { size: size, children: _jsxs("nav", { ref: navRef, className: styles.container, "aria-label": productName ? `${productName} navigation` : 'Main navigation', children: [(logo || productName) && (_jsxs("div", { className: styles.logoRow, children: [logo, productName && (_jsxs("span", { className: styles.productName, children: [_jsx(Logo, {}), _jsx(Headline, { disableMargin: true, size: 1, children: productName })] }))] })), (navLinks === null || navLinks === void 0 ? void 0 : navLinks.length) > 0 && (_jsx("div", { className: styles.navContent, children: _jsx("ul", { className: styles.navItems, role: "list", children: navLinks }) })), addition && !isMobile && _jsx("div", { className: styles.addition, children: addition }), isMobile && (_jsx(Popover, { open: mobileOpen, onOpenChange: setMobileOpen, matchTriggerWidth: true, fullWidth: false, autoFocusContent: true, anchorRef: navRef, trigger: (toggle, _icon, open) => (_jsx("button", { type: "button", className: styles.burgerButton, "aria-label": open ? 'Close navigation menu' : 'Open navigation menu', "aria-expanded": open, onClick: toggle, children: open ? _jsx(X, { size: 20 }) : _jsx(MenuIcon, { size: 20 }) })), children: close => (_jsxs("div", { className: styles.mobileMenu, children: [_jsx("ul", { className: styles.mobileNavItems, role: "list", onClick: close, children: navLinks }), addition && _jsx("div", { className: styles.mobileAddition, children: addition })] })) }))] }) }));
 }

package/dist/components/overlay/fade-overlay/FadeOverlay.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+export interface FadeOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Which edge should have the solid background color.
+     * Defaults to bottom, which fits preview/paywall-style fades.
+     */
+    edge?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * How far the fade reaches into the container.
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function FadeOverlay({ edge, size, className, 'aria-hidden': ariaHidden, ...rest }: FadeOverlayProps): ReactElement;

package/dist/components/overlay/fade-overlay/FadeOverlay.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './FadeOverlay.module.css';
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+export function FadeOverlay({ edge = 'bottom', size = 'md', className, 'aria-hidden': ariaHidden = true, ...rest }) {
+    return (_jsx("div", { "aria-hidden": ariaHidden, className: cx(styles.overlay, styles[edge], styles[size], className), ...rest }));
+}

package/dist/components/overlay/fade-overlay/FadeOverlay.module.css

@@ -0,0 +1,54 @@
+.overlay {
+  --fade-overlay-color: var(--color-bg-surface);
+  --fade-overlay-size: 65%;
+
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.bottom {
+  background: linear-gradient(
+    to top,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.top {
+  background: linear-gradient(
+    to bottom,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.left {
+  background: linear-gradient(
+    to right,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.right {
+  background: linear-gradient(
+    to left,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.sm {
+  --fade-overlay-size: 40%;
+}
+
+.md {
+  --fade-overlay-size: 65%;
+}
+
+.lg {
+  --fade-overlay-size: 85%;
+}

package/dist/components/page-layout/components/layout-footer/LayoutFooter.module.css

@@ -1,6 +1,7 @@
 .footer {
   inline-size: 100%;
   background: var(--color-bg-surface-subtle);
+  line-height: var(--line-height-normal);
 }
 
 .inner {
@@ -37,7 +38,7 @@
   font-style: normal;
   margin: 0;
   color: var(--color-fg-subtle);
-  line-height: var(--line-height-tight);
+  line-height: var(--line-height-normal);
   display: flex;
   flex-direction: column;
   gap: 1px;
@@ -52,6 +53,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0;
+  line-height: var(--line-height-normal);
 }
 
 .linkGroup {

package/dist/index.d.ts

@@ -54,6 +54,7 @@ export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
 export * from './components/forms/checkbox-group/CheckboxGroup';
 export * from './components/overlay/side-panel/SidePanel';
 export * from './components/overlay/side-panel/useSidePanel';
+export * from './components/overlay/fade-overlay/FadeOverlay';
 export * from './components/forms/input-container/InputContainer';
 export * from './components/hyperlink/Hyperlink';
 export * from './components/overlay/tooltip/Tooltip';

package/dist/index.js

@@ -54,6 +54,7 @@ export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
 export * from './components/forms/checkbox-group/CheckboxGroup';
 export * from './components/overlay/side-panel/SidePanel';
 export * from './components/overlay/side-panel/useSidePanel';
+export * from './components/overlay/fade-overlay/FadeOverlay';
 export * from './components/forms/input-container/InputContainer';
 export * from './components/hyperlink/Hyperlink';
 export * from './components/overlay/tooltip/Tooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",