@dbcdk/react-components 0.0.126 → 0.0.128

package/dist/components/environment-banner/EnvironmentBanner.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
 import type { Severity } from '../../constants/severity.types';
-type Environment = 'production' | 'staging' | 'test';
+export type Environment = 'production' | 'staging' | 'test';
 export type EnvironmentBannerProps = {
     environment: Environment;
     customLabel?: never;
@@ -11,4 +11,3 @@ export type EnvironmentBannerProps = {
     customSeverity: Severity;
 };
 export declare function EnvironmentBanner(props: EnvironmentBannerProps): JSX.Element;
-export {};

package/dist/components/page-layout/PageLayout.cjs

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var EnvironmentBanner = require('../../components/environment-banner/EnvironmentBanner');
 var styles = require('./PageLayout.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -13,6 +14,17 @@ function getMaxWidthClass(value, styles2) {
   if (value === "sm") return styles2.maxWidthSm;
   return styles2.maxWidthMd;
 }
+const VALID_ENVIRONMENTS = ["production", "staging", "test"];
+function resolveEnvBanner(environment, customEnv, customEnvSeverity) {
+  if (customEnv != null && customEnvSeverity != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { customLabel: customEnv, customSeverity: customEnvSeverity });
+  }
+  const normalised = environment == null ? void 0 : environment.toLowerCase();
+  if (normalised != null && VALID_ENVIRONMENTS.includes(normalised)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { environment: normalised });
+  }
+  return null;
+}
 function getSlotName(el) {
   var _a;
   const t = el.type;
@@ -71,19 +83,24 @@ PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = "Footer";
 const PageLayoutBase = ({
   children,
   containScrolling = false,
-  orientation = "vertical"
+  orientation = "vertical",
+  environment,
+  customEnv,
+  customEnvSeverity
 }) => {
-  var _a;
+  var _a, _b;
   const { slots, rest } = splitSlots(children);
+  const envBanner = resolveEnvBanner(environment, customEnv, customEnvSeverity);
   const content = (_a = slots.Content) != null ? _a : rest.length ? /* @__PURE__ */ jsxRuntime.jsx(PageLayoutContent, { maxWidth: "md", children: rest }) : void 0;
   const rootClass = [
     styles__default.default.root,
     orientation === "vertical" ? styles__default.default.vertical : styles__default.default.horizontal,
     containScrolling ? styles__default.default.containScrolling : styles__default.default.documentScrolling,
-    slots.Banner ? styles__default.default.hasBanner : ""
+    slots.Banner || envBanner ? styles__default.default.hasBanner : ""
   ].filter(Boolean).join(" ");
+  const banner = (_b = slots.Banner) != null ? _b : envBanner;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClass, children: [
-    slots.Banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.banner, children: slots.Banner }) : null,
+    banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.banner, children: banner }) : null,
     slots.Sidebar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sidebar, children: slots.Sidebar }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.mainColumn, children: [
       slots.Header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: slots.Header }) : null,

package/dist/components/page-layout/PageLayout.d.ts

@@ -1,4 +1,5 @@
 import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
 type Orientation = 'vertical' | 'horizontal';
 export type PageLayoutMaxWidth = boolean | 'sm' | 'md';
 export interface PageLayoutProps extends PropsWithChildren {
@@ -9,6 +10,13 @@ export interface PageLayoutProps extends PropsWithChildren {
      */
     containScrolling?: boolean;
     orientation?: Orientation;
+    /** Pass a deployment environment string (e.g. process.env.DEPLOYMENT_ENV).
+     *  Renders a banner for 'production', 'staging', or 'test'. Ignored for unknown values or undefined. */
+    environment?: string;
+    /** Custom banner label — requires customEnvSeverity. */
+    customEnv?: string;
+    /** Severity for the custom banner. */
+    customEnvSeverity?: Severity;
 }
 export interface PageLayoutHeaderProps {
     maxWidth?: PageLayoutMaxWidth;

package/dist/components/page-layout/PageLayout.js

@@ -1,5 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Children, isValidElement } from 'react';
+import { EnvironmentBanner } from '../../components/environment-banner/EnvironmentBanner';
 import styles from './PageLayout.module.css';
 
 function getMaxWidthClass(value, styles2) {
@@ -7,6 +8,17 @@ function getMaxWidthClass(value, styles2) {
   if (value === "sm") return styles2.maxWidthSm;
   return styles2.maxWidthMd;
 }
+const VALID_ENVIRONMENTS = ["production", "staging", "test"];
+function resolveEnvBanner(environment, customEnv, customEnvSeverity) {
+  if (customEnv != null && customEnvSeverity != null) {
+    return /* @__PURE__ */ jsx(EnvironmentBanner, { customLabel: customEnv, customSeverity: customEnvSeverity });
+  }
+  const normalised = environment == null ? void 0 : environment.toLowerCase();
+  if (normalised != null && VALID_ENVIRONMENTS.includes(normalised)) {
+    return /* @__PURE__ */ jsx(EnvironmentBanner, { environment: normalised });
+  }
+  return null;
+}
 function getSlotName(el) {
   var _a;
   const t = el.type;
@@ -65,19 +77,24 @@ PageLayoutFooter.__PAGE_LAYOUT_SLOT__ = "Footer";
 const PageLayoutBase = ({
   children,
   containScrolling = false,
-  orientation = "vertical"
+  orientation = "vertical",
+  environment,
+  customEnv,
+  customEnvSeverity
 }) => {
-  var _a;
+  var _a, _b;
   const { slots, rest } = splitSlots(children);
+  const envBanner = resolveEnvBanner(environment, customEnv, customEnvSeverity);
   const content = (_a = slots.Content) != null ? _a : rest.length ? /* @__PURE__ */ jsx(PageLayoutContent, { maxWidth: "md", children: rest }) : void 0;
   const rootClass = [
     styles.root,
     orientation === "vertical" ? styles.vertical : styles.horizontal,
     containScrolling ? styles.containScrolling : styles.documentScrolling,
-    slots.Banner ? styles.hasBanner : ""
+    slots.Banner || envBanner ? styles.hasBanner : ""
   ].filter(Boolean).join(" ");
+  const banner = (_b = slots.Banner) != null ? _b : envBanner;
   return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
-    slots.Banner ? /* @__PURE__ */ jsx("div", { className: styles.banner, children: slots.Banner }) : null,
+    banner ? /* @__PURE__ */ jsx("div", { className: styles.banner, children: banner }) : null,
     slots.Sidebar ? /* @__PURE__ */ jsx("div", { className: styles.sidebar, children: slots.Sidebar }) : null,
     /* @__PURE__ */ jsxs("div", { className: styles.mainColumn, children: [
       slots.Header ? /* @__PURE__ */ jsx("div", { className: styles.header, children: slots.Header }) : null,

package/dist/components/page-layout/PageLayout.module.css

@@ -148,6 +148,10 @@
   overflow: visible;
 }
 
+.vertical .content {
+  padding: var(--spacing-lg) var(--spacing-md);
+}
+
 .footer {
   min-width: 0;
   background: var(--color-bg-surface-subtle);

package/package.json

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