@vodafone_de/publish-test 0.0.1 → 53.0.0

package/README.md

@@ -1,8 +1,115 @@
-# @vodafone_de/publish-test
+[![npm latest package](https://img.shields.io/npm/v/@vodafone_de/brix-components/latest.svg)](https://www.npmjs.com/package/@vodafone_de/brix-components)
 
-Test package to verify publishing in the `@vodafone_de` scope.
+# brix-pattern-library  
 
-```js
-const { hello } = require('@vodafone_de/publish-test');
-console.log(hello()); // Hello, world! (@vodafone_de/publish-test)
+Vodafone Germany's React component library — 96 components built with TypeScript, styled-components, and Zod validation for CMS integration.
+
+[Storybook](https://www.vodafone.de/simplicity/pattern/) · [npm](https://www.npmjs.com/package/@vodafone_de/brix-components)
+
+## Using BRIX in your project
+
+Install the published package:
+
+```bash
+npm install @vodafone_de/brix-components react react-dom styled-components
+```
+
+Add `GlobalStyle` at your app root and start using components:
+
+```tsx
+import { GlobalStyle, Button, Heading } from '@vodafone_de/brix-components';
+
+function App() {
+    return (
+        <>
+            <GlobalStyle />
+            <Heading
+                tag="h1"
+                size="h2"
+            >
+                Hello BRIX
+            </Heading>
+            <Button
+                appearance="primary"
+                onClick={() => alert('It works!')}
+            >
+                Click me
+            </Button>
+        </>
+    );
+}
+```
+
+For full setup instructions (peer dependencies, font loading, tree-shaking, design tokens), see the [package README on npm](https://www.npmjs.com/package/@vodafone_de/brix-components).
+
+## Contributing
+
+### Prerequisites
+
+- [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) for Node version management
+
+### Setup
+
+```bash
+git clone https://github.vodafone.com/VFDE-Digital/brix-pattern-library.git
+cd brix-pattern-library
+nvm install     # or: fnm install
+npm i
+```
+
+### Development
+
+```bash
+npm run storybook    # Component dev with hot reload
+npm run test         # Vitest
+npm run lint         # ESLint
+npm run coverage     # Test coverage report
+```
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for the full guide on adding components, conventions, and PR checklist.
+
+## Documentation
+
+| Document                                     | Description                                          |
+| -------------------------------------------- | ---------------------------------------------------- |
+| [Architecture](./docs/ARCHITECTURE.md)       | System overview, patterns, component structure       |
+| [Contributing](./CONTRIBUTING.md)            | How to add components, conventions, PR checklist     |
+| [CMS Integration](./docs/CMS_INTEGRATION.md) | Contentful & OpenText integration guide              |
+| [Layout System](./docs/LAYOUT_SYSTEM.md)     | Responsive layout props, breakpoints, spacing tokens |
+| [ADRs](./docs/adr/README.md)                 | Architecture Decision Records                        |
+
+### Documentation build
+
+Component docs are maintained as a single source of truth in `src/component-docs/{name}/` and transformed into multiple output formats:
+
+```
+src/component-docs/{name}/
+├── meta.yaml    # Structured metadata (aliases, links, imports)
+└── content.md   # Props, patterns, guidelines
 ```
+
+| Command                    | Output                            | Purpose                                    |
+| -------------------------- | --------------------------------- | ------------------------------------------ |
+| `npm run docs:build`       | `.agents/skills/{name}/skill.md`  | Agent-consumable skills with frontmatter   |
+| `npm run docs:build:human` | `.agents/skills/{name}/README.md` | Human-readable docs (GitHub/docs site)     |
+| `npm run docs:build:figma` | `dist/figma-make/`                | Figma Make AI kit (gitignored, local only) |
+| `npm run docs:build:all`   | All three targets                 | One-command rebuild                        |
+| `npm run docs:check`       | —                                 | Verify agent skills match source (CI gate) |
+
+## Architecture
+
+See [docs/ARCHITECTURE.md](./docs/ARCHITECTURE.md) for full details.
+
+| Layer         | Technology                                |
+| ------------- | ----------------------------------------- |
+| Components    | React (FC pattern)                        |
+| Styling       | styled-components + CSS custom properties |
+| Types         | TypeScript (strict)                       |
+| Validation    | Zod (runtime CMS prop validation)         |
+| Testing       | Vitest + React Testing Library            |
+| Documentation | Storybook                                 |
+| Package       | npm (`@vodafone_de/brix-components`)      |
+
+## License
+
+CC-BY-ND-4.0

package/dist/Appearance-CIB-YW3f.js

@@ -0,0 +1,6 @@
+const primaryAppearance = "primary";
+const secondaryAppearance = "secondary";
+export {
+  primaryAppearance as p,
+  secondaryAppearance as s
+};

package/dist/BackgroundColor-Ba4D10TC.js

@@ -0,0 +1,14 @@
+const colorBackgroundBrand = "colorBackgroundBrand";
+const colorBackgroundBrandGradient = "colorBackgroundBrandGradient";
+const colorBackgroundNeutral = "colorBackgroundNeutral";
+const colorBackgroundSubtle = "colorBackgroundSubtle";
+const colorBackgroundOverlay = "colorBackgroundOverlay";
+const colorBackgroundOverlayStatic = "colorBackgroundOverlayStatic";
+export {
+  colorBackgroundNeutral as a,
+  colorBackgroundBrand as b,
+  colorBackgroundBrandGradient as c,
+  colorBackgroundSubtle as d,
+  colorBackgroundOverlay as e,
+  colorBackgroundOverlayStatic as f
+};

package/dist/BorderColor-BACbvI20.js

@@ -0,0 +1,24 @@
+const colorBorderBrand = "colorBorderBrand";
+const colorBorderNeutral = "colorBorderNeutral";
+const colorBorderSubtle = "colorBorderSubtle";
+const colorBorderInverse = "colorBorderInverse";
+const colorBorderSuccess = "colorBorderSuccess";
+const colorBorderCritical = "colorBorderCritical";
+const colorBorderWarning = "colorBorderWarning";
+const colorBorderInformation = "colorBorderInformation";
+const colorBorderUnselected = "colorBorderUnselected";
+const colorBorderSelected = "colorBorderSelected";
+const colorBorderFocus = "colorBorderFocus";
+export {
+  colorBorderNeutral as a,
+  colorBorderUnselected as b,
+  colorBorderFocus as c,
+  colorBorderSuccess as d,
+  colorBorderCritical as e,
+  colorBorderSubtle as f,
+  colorBorderBrand as g,
+  colorBorderInverse as h,
+  colorBorderSelected as i,
+  colorBorderWarning as j,
+  colorBorderInformation as k
+};

package/dist/BorderRadius-0jhn76gB.js

@@ -0,0 +1,10 @@
+const borderRadiusNone = "borderRadiusNone";
+const borderRadiusSm = "borderRadiusSm";
+const borderRadiusMd = "borderRadiusMd";
+const borderRadiusFull = "borderRadiusFull";
+export {
+  borderRadiusNone as a,
+  borderRadiusMd as b,
+  borderRadiusSm as c,
+  borderRadiusFull as d
+};

package/dist/BorderWidth-CwrNKc0Q.js

@@ -0,0 +1,16 @@
+const borderWidthNone = "None";
+const borderWidthDivider = "Divider";
+const borderWidthUnselected = "Unselected";
+const borderWidthSelected = "Selected";
+const borderWidthFocus = "Focus";
+const borderWidthSm = "Sm";
+const borderWidthMd = "Md";
+export {
+  borderWidthUnselected as a,
+  borderWidthFocus as b,
+  borderWidthSelected as c,
+  borderWidthSm as d,
+  borderWidthDivider as e,
+  borderWidthMd as f,
+  borderWidthNone as g
+};

package/dist/ButtonAppearanceHelper-Hf0OlfFd.js

@@ -0,0 +1,102 @@
+import forcedColors from "./foundations/media-query/forcedColors/index.js";
+import { e as ease_in_sine } from "./easing-Dm-pO8SY.js";
+import { getBorderColor } from "./foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "./foundations/token/getBorderWidth/index.js";
+import { getHoverColor } from "./foundations/token/getHoverColor/index.js";
+import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
+import { getPressColor } from "./foundations/token/getPressColor/index.js";
+import { c as colorBorderFocus } from "./BorderColor-BACbvI20.js";
+import { b as borderWidthFocus, c as borderWidthSelected } from "./BorderWidth-CwrNKc0Q.js";
+import { a as colorObjectNeutral, d as colorObjectBrand, e as colorObjectInverse } from "./ObjectColor-CSHEae46.js";
+import { g as getForegroundColor } from "./colorUtils-DiOpGumx.js";
+const ButtonAppearanceColor = {
+  primary: colorObjectBrand,
+  secondary: colorObjectNeutral,
+  tertiary: colorObjectNeutral
+};
+const getButtonAppearanceColors = (appearance) => ({
+  background: getObjectColor(ButtonAppearanceColor[appearance]),
+  color: getForegroundColor(ButtonAppearanceColor[appearance]),
+  hoverBackgroundColor: getHoverColor(ButtonAppearanceColor[appearance]),
+  pressedBackgroundColor: getPressColor(ButtonAppearanceColor[appearance]),
+  focusColor: getBorderColor(colorBorderFocus)
+});
+const buildBaseButtonStyle = ({
+  background,
+  color,
+  hoverBackgroundColor,
+  pressedBackgroundColor,
+  focusColor
+}) => ({
+  ...forcedColors({
+    background: "ButtonFace",
+    color: "ButtonText"
+  }),
+  border: "unset",
+  background,
+  color,
+  transitionProperty: "background, color, box-shadow",
+  transitionDuration: "0.2s",
+  transitionTimingFunction: ease_in_sine,
+  /* No visible box-shadow. as transition endpoint for focus */
+  boxShadow: `inset transparent 0px 0px 0px ${hoverBackgroundColor}`,
+  "&:visited": {
+    ...forcedColors({
+      background: "ButtonFace",
+      color: "ButtonText"
+    }),
+    color,
+    background
+  },
+  "&:hover": {
+    ...forcedColors({
+      background: "ButtonFace",
+      color: "ButtonText"
+    }),
+    color,
+    background: hoverBackgroundColor,
+    /* No visible box-shadow. as transition point for focus and from tertiary */
+    boxShadow: `inset transparent 0px 0px 0px`
+  },
+  "&:active": {
+    ...forcedColors({
+      background: "ButtonFace",
+      color: "ButtonText"
+    }),
+    color,
+    backgroundColor: pressedBackgroundColor
+  },
+  "&:focus-visible, &:focus-within": {
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`,
+      background: "ButtonFace",
+      color: "ButtonText"
+    }),
+    boxShadow: `${focusColor} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+    color,
+    background: hoverBackgroundColor,
+    outline: "none"
+  }
+});
+const applyTertiaryAppearance = (style, background) => {
+  const color = getForegroundColor(colorObjectInverse);
+  return {
+    ...style,
+    color,
+    background: "transparent",
+    boxShadow: `inset ${background} 0px 0px 0px ${getBorderWidth(borderWidthSelected)}`,
+    "&:visited": {
+      color,
+      background: "transparent"
+    }
+  };
+};
+const getButtonAppearance = (appearance) => {
+  const colors = getButtonAppearanceColors(appearance);
+  const style = buildBaseButtonStyle(colors);
+  return "tertiary" === appearance ? applyTertiaryAppearance(style, colors.background) : style;
+};
+export {
+  ButtonAppearanceColor as B,
+  getButtonAppearance as g
+};

package/dist/ButtonAppearances-BEMZJMeh.js

@@ -0,0 +1,10 @@
+const primaryAppearance = "primary";
+const secondaryAppearance = "secondary";
+const tertiaryAppearance = "tertiary";
+const buttonAppearances = [primaryAppearance, secondaryAppearance, tertiaryAppearance];
+export {
+  buttonAppearances as b,
+  primaryAppearance as p,
+  secondaryAppearance as s,
+  tertiaryAppearance as t
+};

package/dist/ButtonWidthBehavior-DuO_4JKC.js

@@ -0,0 +1,13 @@
+const consentVariantVideo = "video";
+const consentVariantMap = "maps";
+const consentVariants = [consentVariantVideo, consentVariantMap];
+const buttonWidthFull = "full";
+const buttonWidthAuto = "auto";
+const buttonWidthBehaviors = [buttonWidthFull, buttonWidthAuto];
+export {
+  consentVariantVideo as a,
+  consentVariants as b,
+  consentVariantMap as c,
+  buttonWidthAuto as d,
+  buttonWidthBehaviors as e
+};

package/dist/CornerStyle-n77nckhh.js

@@ -0,0 +1,7 @@
+const cornerStraight = "straight";
+const cornerRounded = "rounded";
+const cornerStyles = [cornerStraight, cornerRounded];
+export {
+  cornerStyles as a,
+  cornerRounded as c
+};

package/dist/FontWeight-C8c-UnWu.js

@@ -0,0 +1,10 @@
+const fontWeightLight = "light";
+const fontWeightRegular = "regular";
+const fontWeightBold = "bold";
+const fontWeights = [fontWeightLight, fontWeightRegular, fontWeightBold];
+export {
+  fontWeightBold as a,
+  fontWeightLight as b,
+  fontWeights as c,
+  fontWeightRegular as f
+};

package/dist/HeadingSize-O__w72MO.js

@@ -0,0 +1,14 @@
+const textHeadingXl = "xl";
+const textHeadingLg = "lg";
+const textHeadingMd = "md";
+const textHeadingSm = "sm";
+const textHeadingXs = "xs";
+const textHeadingSizes = [textHeadingXl, textHeadingLg, textHeadingMd, textHeadingSm, textHeadingXs];
+export {
+  textHeadingSm as a,
+  textHeadingMd as b,
+  textHeadingLg as c,
+  textHeadingXl as d,
+  textHeadingSizes as e,
+  textHeadingXs as t
+};

package/dist/IconColor-CtC9WUgr.js

@@ -0,0 +1,10 @@
+const colorIconBrand = "colorIconBrand";
+const colorIconInverse = "colorIconInverse";
+const colorIconSuccess = "colorIconSuccess";
+const colorIconCritical = "colorIconCritical";
+export {
+  colorIconCritical as a,
+  colorIconBrand as b,
+  colorIconSuccess as c,
+  colorIconInverse as d
+};

package/dist/IconSize-Da9zhR76.js

@@ -0,0 +1,30 @@
+const iconSize2xs = "2xs";
+const iconSizeXs = "xs";
+const iconSizeSm = "sm";
+const iconSizeMd = "md";
+const iconSizeLg = "lg";
+const iconSizeXl = "xl";
+const iconSize2xl = "2xl";
+const iconSize3xl = "3xl";
+const iconSize4xl = "4xl";
+const iconSize5xl = "5xl";
+const iconSize6xl = "6xl";
+const iconSize7xl = "7xl";
+const iconSize8xl = "8xl";
+const iconSize9xl = "9xl";
+export {
+  iconSizeXl as a,
+  iconSize2xl as b,
+  iconSize3xl as c,
+  iconSize4xl as d,
+  iconSize5xl as e,
+  iconSize2xs as f,
+  iconSizeXs as g,
+  iconSizeMd as h,
+  iconSizeSm as i,
+  iconSizeLg as j,
+  iconSize6xl as k,
+  iconSize7xl as l,
+  iconSize8xl as m,
+  iconSize9xl as n
+};

package/dist/ObjectColor-CSHEae46.js

@@ -0,0 +1,22 @@
+const colorObjectBrand = "colorObjectBrand";
+const colorObjectNeutral = "colorObjectNeutral";
+const colorObjectInverse = "colorObjectInverse";
+const colorObjectAccent = "colorObjectAccent";
+const colorObjectSuccess = "colorObjectSuccess";
+const colorObjectCritical = "colorObjectCritical";
+const colorObjectWarning = "colorObjectWarning";
+const colorObjectInformation = "colorObjectInformation";
+const colorObjectSelected = "colorObjectSelected";
+const colorObjectUnselected = "colorObjectUnselected";
+export {
+  colorObjectNeutral as a,
+  colorObjectAccent as b,
+  colorObjectSuccess as c,
+  colorObjectBrand as d,
+  colorObjectInverse as e,
+  colorObjectSelected as f,
+  colorObjectUnselected as g,
+  colorObjectCritical as h,
+  colorObjectWarning as i,
+  colorObjectInformation as j
+};

package/dist/Opacity-smkGiwsf.js

@@ -0,0 +1,6 @@
+const opacityOverlay = "Overlay";
+const opacityDisabled = "Disabled";
+export {
+  opacityDisabled as a,
+  opacityOverlay as o
+};

package/dist/PositionType-BIdZQO2H.js

@@ -0,0 +1,11 @@
+const leftPosition = "left";
+const rightPosition = "right";
+const topPosition = "top";
+const bottomPosition = "bottom";
+const positionTypes = [leftPosition, rightPosition, topPosition, bottomPosition];
+export {
+  leftPosition as l,
+  positionTypes as p,
+  rightPosition as r,
+  topPosition as t
+};

package/dist/SizeTypes-Ck_RdzIf.js

@@ -0,0 +1,8 @@
+const smallSize = "sm";
+const largeSize = "lg";
+const mediumSize = "md";
+export {
+  largeSize as l,
+  mediumSize as m,
+  smallSize as s
+};

package/dist/Spacing-Dj-qX3Z5.js

@@ -0,0 +1,25 @@
+const spacingNone = "none";
+const spacing2Xs = "2xs";
+const spacingXs = "xs";
+const spacingSm = "sm";
+const spacingMd = "md";
+const spacingLg = "lg";
+const spacingXl = "xl";
+const spacing2Xl = "2xl";
+const spacing3Xl = "3xl";
+const spacing4Xl = "4xl";
+const spacing5Xl = "5xl";
+const spacing6Xl = "6xl";
+const spacing7Xl = "7xl";
+const spacings = [spacingNone, spacing2Xs, spacingXs, spacingSm, spacingMd, spacingLg, spacingXl, spacing2Xl, spacing3Xl, spacing4Xl, spacing5Xl, spacing6Xl, spacing7Xl, "None", "2Xs", "Xs", "Sm", "Md", "Lg", "Xl", "2Xl", "3Xl", "4Xl", "5Xl", "6Xl", "7Xl"];
+export {
+  spacingXs as a,
+  spacingNone as b,
+  spacingSm as c,
+  spacingXl as d,
+  spacing5Xl as e,
+  spacing2Xs as f,
+  spacingLg as g,
+  spacings as h,
+  spacingMd as s
+};

package/dist/TextBodySize-CP9q4gRv.js

@@ -0,0 +1,8 @@
+const textBodyMd = "md";
+const textBodySm = "sm";
+const textBodySize = [textBodyMd, textBodySm];
+export {
+  textBodySm as a,
+  textBodySize as b,
+  textBodyMd as t
+};

package/dist/TextColor-DsntmDNw.js

@@ -0,0 +1,16 @@
+const colorTextBrand = "colorTextBrand";
+const colorTextNeutral = "colorTextNeutral";
+const colorTextNeutralStatic = "colorTextNeutralStatic";
+const colorTextInverse = "colorTextInverse";
+const colorTextInverseStatic = "colorTextInverseStatic";
+const colorTextCritical = "colorTextCritical";
+const colorTextPlaceholder = "colorTextPlaceholder";
+export {
+  colorTextNeutral as a,
+  colorTextInverseStatic as b,
+  colorTextPlaceholder as c,
+  colorTextNeutralStatic as d,
+  colorTextInverse as e,
+  colorTextBrand as f,
+  colorTextCritical as g
+};

package/dist/Theme-B6kzt-0D.js

@@ -0,0 +1,8 @@
+const themeLight = "light";
+const themeDark = "dark";
+const themes = [themeLight, themeDark];
+export {
+  themeLight as a,
+  themes as b,
+  themeDark as t
+};

package/dist/ToggleButtonContext-TOVux5cw.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const ToggleButtonContext = createContext(null);
+const useToggleButtonContext = () => {
+  const context = useContext(ToggleButtonContext);
+  if (!context) {
+    throw new Error("useToggleButtonContext must be used within <ToggleButtonProvider>");
+  }
+  return context;
+};
+export {
+  ToggleButtonContext as T,
+  useToggleButtonContext as u
+};