@dbcdk/react-components 0.0.124 → 0.0.126

package/dist/client.cjs

@@ -14,6 +14,7 @@ var Tabs = require('./components/tabs/Tabs');
 var Headline = require('./components/headline/Headline');
 var CollapsibleHeadline = require('./components/headline/CollapsibleHeadline');
 var PageLayout = require('./components/page-layout/PageLayout');
+var EnvironmentBanner = require('./components/environment-banner/EnvironmentBanner');
 var Footer = require('./components/page-layout/components/footer/Footer');
 var Input = require('./components/forms/input/Input');
 var SearchBox = require('./components/search-box/SearchBox');
@@ -168,6 +169,12 @@ Object.keys(PageLayout).forEach(function (k) {
 		get: function () { return PageLayout[k]; }
 	});
 });
+Object.keys(EnvironmentBanner).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return EnvironmentBanner[k]; }
+	});
+});
 Object.keys(Footer).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -11,6 +11,7 @@ export * from './components/tabs/Tabs';
 export * from './components/headline/Headline';
 export * from './components/headline/CollapsibleHeadline';
 export * from './components/page-layout/PageLayout';
+export * from './components/environment-banner/EnvironmentBanner';
 export * from './components/page-layout/components/footer/Footer';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';

package/dist/client.js

@@ -12,6 +12,7 @@ export * from './components/tabs/Tabs';
 export * from './components/headline/Headline';
 export * from './components/headline/CollapsibleHeadline';
 export * from './components/page-layout/PageLayout';
+export * from './components/environment-banner/EnvironmentBanner';
 export * from './components/page-layout/components/footer/Footer';
 export * from './components/forms/input/Input';
 export * from './components/search-box/SearchBox';

package/dist/components/chip/Chip.module.css

@@ -107,7 +107,7 @@
 /* Status variants */
 
 .neutral {
-  --chip-bg: var(--color-bg-toolbar);
+  --chip-bg: var(--color-neutral);
   --chip-fg: var(--color-fg-default);
   --chip-border: transparent;
   --chip-outlined-border: var(--color-border-subtle);

package/dist/components/environment-banner/EnvironmentBanner.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./EnvironmentBanner.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const PRESETS = {
+  production: { label: "Produktionsmilj\xF8", severity: "success" },
+  staging: { label: "Staging-milj\xF8", severity: "warning" },
+  test: { label: "Test-milj\xF8", severity: "info" }
+};
+function EnvironmentBanner(props) {
+  const { label, severity } = props.environment != null ? PRESETS[props.environment] : { label: props.customLabel, severity: props.customSeverity };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.banner, "data-severity": severity, role: "status", "aria-label": label, children: label });
+}
+
+exports.EnvironmentBanner = EnvironmentBanner;

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

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

package/dist/components/environment-banner/EnvironmentBanner.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './EnvironmentBanner.module.css';
+
+const PRESETS = {
+  production: { label: "Produktionsmilj\xF8", severity: "success" },
+  staging: { label: "Staging-milj\xF8", severity: "warning" },
+  test: { label: "Test-milj\xF8", severity: "info" }
+};
+function EnvironmentBanner(props) {
+  const { label, severity } = props.environment != null ? PRESETS[props.environment] : { label: props.customLabel, severity: props.customSeverity };
+  return /* @__PURE__ */ jsx("div", { className: styles.banner, "data-severity": severity, role: "status", "aria-label": label, children: label });
+}
+
+export { EnvironmentBanner };

package/dist/components/environment-banner/EnvironmentBanner.module.css

@@ -0,0 +1,49 @@
+.banner {
+  --env-banner-bg: var(--color-bg-toolbar);
+  --env-banner-fg: var(--color-fg-default);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-block: var(--spacing-2xs);
+  padding-inline: var(--spacing-md);
+  background-color: var(--env-banner-bg);
+  color: var(--env-banner-fg);
+
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  line-height: var(--line-height-normal);
+  user-select: none;
+}
+
+.banner[data-severity='success'] {
+  --env-banner-bg: var(--color-status-success);
+  --env-banner-fg: var(--color-status-success-bg);
+}
+
+.banner[data-severity='warning'] {
+  --env-banner-bg: var(--color-status-warning);
+  --env-banner-fg: var(--color-status-warning-bg);
+}
+
+.banner[data-severity='error'] {
+  --env-banner-bg: var(--color-status-error);
+  --env-banner-fg: var(--color-status-error-bg);
+}
+
+.banner[data-severity='info'] {
+  --env-banner-bg: var(--color-status-info);
+  --env-banner-fg: var(--color-status-info-bg);
+}
+
+.banner[data-severity='brand'] {
+  --env-banner-bg: var(--color-brand);
+  --env-banner-fg: var(--color-fg-on-brand);
+}
+
+.banner[data-severity='neutral'] {
+  --env-banner-bg: var(--color-neutral);
+  --env-banner-fg: var(--color-fg-default);
+}

package/dist/components/page/Page.cjs

@@ -39,7 +39,7 @@ function Page({
             Headline.Headline,
             {
               disableMargin: true,
-              size: 1,
+              size: 2,
               severity,
               icon: headerIcon,
               subheader,

package/dist/components/page/Page.js

@@ -33,7 +33,7 @@ function Page({
             Headline,
             {
               disableMargin: true,
-              size: 1,
+              size: 2,
               severity,
               icon: headerIcon,
               subheader,

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

@@ -35,6 +35,12 @@ function splitSlots(children) {
   });
   return { slots, rest };
 }
+const PageLayoutBanner = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+PageLayoutBanner.__PAGE_LAYOUT_SLOT__ = "Banner";
 const PageLayoutSidebar = ({
   children
 }) => {
@@ -73,9 +79,11 @@ const PageLayoutBase = ({
   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
+    containScrolling ? styles__default.default.containScrolling : styles__default.default.documentScrolling,
+    slots.Banner ? styles__default.default.hasBanner : ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClass, children: [
+    slots.Banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.banner, children: slots.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,
@@ -88,6 +96,7 @@ const PageLayoutBase = ({
   ] });
 };
 const PageLayout = Object.assign(PageLayoutBase, {
+  Banner: PageLayoutBanner,
   Sidebar: PageLayoutSidebar,
   Header: PageLayoutHeader,
   Content: PageLayoutContent,

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

@@ -22,10 +22,14 @@ export interface PageLayoutFooterProps {
     maxWidth?: PageLayoutMaxWidth;
     children: ReactNode;
 }
+export interface PageLayoutBannerProps {
+    children: ReactNode;
+}
 export interface PageLayoutSidebarProps {
     children: ReactNode;
 }
 export declare const PageLayout: FC<PageLayoutProps> & {
+    Banner: FC<PageLayoutBannerProps>;
     Sidebar: FC<PageLayoutSidebarProps>;
     Header: FC<PageLayoutHeaderProps>;
     Content: FC<PageLayoutContentProps>;

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

@@ -29,6 +29,12 @@ function splitSlots(children) {
   });
   return { slots, rest };
 }
+const PageLayoutBanner = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+PageLayoutBanner.__PAGE_LAYOUT_SLOT__ = "Banner";
 const PageLayoutSidebar = ({
   children
 }) => {
@@ -67,9 +73,11 @@ const PageLayoutBase = ({
   const rootClass = [
     styles.root,
     orientation === "vertical" ? styles.vertical : styles.horizontal,
-    containScrolling ? styles.containScrolling : styles.documentScrolling
+    containScrolling ? styles.containScrolling : styles.documentScrolling,
+    slots.Banner ? styles.hasBanner : ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
+    slots.Banner ? /* @__PURE__ */ jsx("div", { className: styles.banner, children: slots.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,
@@ -82,6 +90,7 @@ const PageLayoutBase = ({
   ] });
 };
 const PageLayout = Object.assign(PageLayoutBase, {
+  Banner: PageLayoutBanner,
   Sidebar: PageLayoutSidebar,
   Header: PageLayoutHeader,
   Content: PageLayoutContent,

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

@@ -31,6 +31,18 @@
   grid-template-columns: minmax(0, 1fr);
 }
 
+/* Banner: spans both sidebar and main columns */
+.banner {
+  grid-column: 1 / -1;
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+/* In contained mode, allocate banner height then give the rest to sidebar+main */
+.containScrolling.hasBanner {
+  grid-template-rows: auto 1fr;
+}
+
 /* Sidebar */
 .sidebar {
   min-width: 0;
@@ -132,7 +144,7 @@
   align-items: center;
 
   background: var(--color-bg-surface);
-  padding: var(--spacing-lg) var(--spacing-xl);
+  padding: var(--spacing-xl) var(--spacing-xl);
   overflow: visible;
 }
 

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -12,10 +12,10 @@
   --progress-fill-progress: color-mix(in srgb, var(--color-fg-default) 6%, transparent);
   --progress-fill-missing: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
   --progress-fill-neutral: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
-  --progress-fill-success: color-mix(in srgb, var(--color-status-success) 32%, transparent);
-  --progress-fill-info: color-mix(in srgb, var(--color-status-info) 32%, transparent);
-  --progress-fill-warning: color-mix(in srgb, var(--color-status-warning) 32%, transparent);
-  --progress-fill-error: color-mix(in srgb, var(--color-status-error) 32%, transparent);
+  --progress-fill-success: color-mix(in srgb, var(--color-status-success) 95%, transparent);
+  --progress-fill-info: color-mix(in srgb, var(--color-status-info) 70%, transparent);
+  --progress-fill-warning: color-mix(in srgb, var(--color-status-warning) 70%, transparent);
+  --progress-fill-error: color-mix(in srgb, var(--color-status-error) 75%, transparent);
 
   position: relative;
   width: 100%;

package/dist/components/tabs/Tabs.cjs

@@ -124,8 +124,12 @@ function Tabs({
     header ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: [styles__default.default.headerContainer, disableTopPadding ? styles__default.default.disableTopPadding : ""].filter(Boolean).join(" "),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, subheader, addition, children: header })
+        className: [
+          styles__default.default.headerContainer,
+          variant === "outlined" ? styles__default.default.headerContainerOutlined : "",
+          disableTopPadding ? styles__default.default.disableTopPadding : ""
+        ].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }
     ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tabs} ${styles__default.default[variant]} ${panelStyle ? styles__default.default.panelStyle : ""}`, children: [

package/dist/components/tabs/Tabs.js

@@ -118,8 +118,12 @@ function Tabs({
     header ? /* @__PURE__ */ jsx(
       "div",
       {
-        className: [styles.headerContainer, disableTopPadding ? styles.disableTopPadding : ""].filter(Boolean).join(" "),
-        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, subheader, addition, children: header })
+        className: [
+          styles.headerContainer,
+          variant === "outlined" ? styles.headerContainerOutlined : "",
+          disableTopPadding ? styles.disableTopPadding : ""
+        ].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }
     ) : null,
     /* @__PURE__ */ jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ""}`, children: [

package/dist/components/tabs/Tabs.module.css

@@ -183,10 +183,19 @@
    Outlined variant
    ========================= */
 
-.outlined {
+.tabs.outlined {
   gap: var(--spacing-lg);
 }
 
+.headerContainerOutlined {
+  padding-block-start: var(--spacing-sm);
+  padding-block-end: var(--spacing-sm);
+}
+
+.headerContainerOutlined.disableTopPadding {
+  padding-block-start: 0;
+}
+
 .outlined .tab {
   color: var(--color-fg-muted);
   border-block-end: 2px solid var(--color-border-default);

package/dist/index.css

@@ -18,6 +18,7 @@
 @import './components/code-block/CodeBlock.module.css';
 @import './components/copy-button/CopyButton.module.css';
 @import './components/datetime-picker/DateTimePicker.module.css';
+@import './components/environment-banner/EnvironmentBanner.module.css';
 @import './components/filter-field/FilterField.module.css';
 @import './components/filtering/chip-multi-toggle/ChipMultiToggle.module.css';
 @import './components/forms/checkbox-group/CheckboxGroup.module.css';

package/package.json

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