@vodafone_de/brix-components 3.0.1 → 3.0.2

package/dist/styled-FNJyDkPV.js

@@ -0,0 +1,165 @@
+import { IconLoader } from "@vfde-react/inline-icon-library";
+import styled from "styled-components";
+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-BummoQ1-.js";
+import { a as borderWidthFocus, d as borderWidthSelected } from "./BorderWidth-DfOlyKK7.js";
+import { f as colorObjectNeutral, c as colorObjectBrand, a as colorObjectInverse } from "./ObjectColor-BZDBuV8H.js";
+import { g as getForegroundColor } from "./colorUtils-uLZF5UIN.js";
+import { v as viewport } from "./index-Ck2bCrhT.js";
+import { getBodySize } from "./foundations/token/getBodySize/index.js";
+import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
+import { getOpacity } from "./foundations/token/getOpacity/index.js";
+import { getSpacing } from "./foundations/token/getSpacing/index.js";
+import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
+import { b as fontWeightRegular } from "./FontWeight-CR22KTex.js";
+import { a as opacityDisabled } from "./Opacity-smkGiwsf.js";
+import { s as spacingMd, a as spacingXs, d as spacingXl, b as spacingNone } from "./Spacing-D0HQH9YJ.js";
+import { t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
+import { f as filterProps } from "./filterProps-Cewck8OH.js";
+const leftPosition = "left";
+const ButtonAppearanceColor = {
+  primary: colorObjectBrand,
+  secondary: colorObjectNeutral,
+  tertiary: colorObjectNeutral
+};
+const getButtonAppearance = (appearance) => {
+  const background = getObjectColor(ButtonAppearanceColor[appearance]);
+  const color = getForegroundColor(ButtonAppearanceColor[appearance]);
+  const hoverBackgroundColor = getHoverColor(ButtonAppearanceColor[appearance]);
+  const pressedBackgroundColor = getPressColor(ButtonAppearanceColor[appearance]);
+  const focusColor = getBorderColor(colorBorderFocus);
+  let style = {
+    ...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": {
+      ...forcedColors({
+        outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`,
+        background: "ButtonFace",
+        color: "ButtonText"
+      }),
+      boxShadow: `${focusColor} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+      color,
+      background: hoverBackgroundColor,
+      outline: "none"
+    }
+  };
+  if ("tertiary" === appearance) {
+    const color2 = getForegroundColor(colorObjectInverse);
+    style = {
+      ...style,
+      color: color2,
+      background: "transparent",
+      boxShadow: `inset ${background} 0px 0px 0px ${getBorderWidth(borderWidthSelected)}`,
+      "&:visited": {
+        color: color2,
+        background: "transparent"
+      }
+    };
+  }
+  return style;
+};
+const primaryAppearance = "primary";
+const tertiaryAppearance = "tertiary";
+const buttonHeight = "44px";
+const ButtonIconStyled = styled(IconLoader).withConfig({
+  displayName: "ButtonIconStyled",
+  componentId: "sc-6d4at9-0"
+})(({
+  iconPosition
+}) => ({
+  order: iconPosition === leftPosition ? -1 : 0
+}));
+const ButtonStyled = styled.button.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ButtonStyled",
+  componentId: "sc-6d4at9-1"
+})({
+  appearance: "none",
+  display: "flex",
+  flexWrap: "nowrap",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+  padding: `${getSpacing(spacingXs)} ${getSpacing(spacingXl)}`,
+  borderRadius: getBorderRadius(borderRadiusMd),
+  fontWeight: getFontWeight(fontWeightRegular),
+  height: buttonHeight
+}, getBodySize(textBodyMd), ({
+  width = "auto"
+}) => ({
+  width: "100%",
+  ...viewport.md({
+    width: "full" === width ? "100%" : "fit-content"
+  })
+}), ({
+  appearance = primaryAppearance
+}) => getButtonAppearance(appearance), ({
+  disabled
+}) => {
+  if (disabled) {
+    return {
+      pointerEvents: "none",
+      opacity: getOpacity(opacityDisabled)
+    };
+  }
+  return {};
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+export {
+  ButtonStyled as B,
+  ButtonAppearanceColor as a,
+  buttonHeight as b,
+  ButtonIconStyled as c,
+  getButtonAppearance as g,
+  leftPosition as l,
+  primaryAppearance as p,
+  tertiaryAppearance as t
+};

package/dist/styled-Wlt68LfQ.js

@@ -0,0 +1,133 @@
+import styled from "styled-components";
+import { C as CardStyled } from "./styled-BpvuD699.js";
+import { D as DemoBoxStyled } from "./styled-CXSdomF5.js";
+import { v as viewport } from "./index-Ck2bCrhT.js";
+import { getSpacing } from "./foundations/token/getSpacing/index.js";
+import { s as spacingMd } from "./Spacing-D0HQH9YJ.js";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { f as filterProps } from "./filterProps-Cewck8OH.js";
+const getColumnWidth = ({
+  sm,
+  md,
+  lg,
+  spacing
+}) => {
+  const calculateFlexBasis = (value) => {
+    const gap = getSpacing(spacing || spacingMd);
+    const columns = 12 / value;
+    return `calc(${100 / columns}% - ${gap} * (${columns} - 1) / ${columns})`;
+  };
+  let style = {};
+  if (sm) {
+    style = {
+      flexBasis: calculateFlexBasis(sm)
+    };
+  }
+  if (md) {
+    style = {
+      ...style,
+      ...viewport.md({
+        flexBasis: calculateFlexBasis(md)
+      })
+    };
+  }
+  if (lg) {
+    style = {
+      ...style,
+      ...viewport.lg({
+        flexBasis: calculateFlexBasis(lg)
+      })
+    };
+  }
+  return style;
+};
+const getOffset = ({
+  sm,
+  md,
+  lg
+}, spacing) => {
+  const calculateMarginLeft = (value) => {
+    const gap = getSpacing(spacing);
+    const columns = 12 / value;
+    return `calc(${100 / columns}% + ${gap} * ${value} / 12)`;
+  };
+  let style = {};
+  if (sm) {
+    style = {
+      marginLeft: calculateMarginLeft(sm)
+    };
+  }
+  if (md) {
+    style = {
+      ...style,
+      ...viewport.md({
+        marginLeft: calculateMarginLeft(md)
+      })
+    };
+  }
+  if (lg) {
+    style = {
+      ...style,
+      ...viewport.lg({
+        marginLeft: calculateMarginLeft(lg)
+      })
+    };
+  }
+  return style;
+};
+const getFlexProperty = (align) => {
+  if (!align) {
+    return;
+  }
+  if ("right" === align) {
+    return "flex-end";
+  }
+  if ("center" === align) {
+    return "center";
+  }
+  if ("left" === align) {
+    return "flex-start";
+  }
+};
+const getCardAlignment = (align) => {
+  const nestedStyles = {};
+  const cardSelector = CardStyled.toString();
+  const demoBoxSelector = DemoBoxStyled.toString();
+  nestedStyles[cardSelector] = {
+    alignItems: getFlexProperty(align)
+  };
+  nestedStyles[demoBoxSelector] = {
+    alignItems: getFlexProperty(align)
+  };
+  return nestedStyles;
+};
+const GridItemStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "GridItemStyled",
+  componentId: "sc-kv0kb7-0"
+})({
+  flexGrow: 0,
+  flexShrink: 0,
+  display: "flex",
+  flexDirection: "column",
+  // This is a highly sophisticated solution that prevents GridItems to be bigger than its supposed column width
+  minWidth: 0
+}, (props) => getColumnWidth(props), ({
+  offset,
+  spacing = spacingMd
+}) => {
+  if (!offset) return {};
+  return {
+    ...getOffset(offset, spacing)
+  };
+}, ({
+  align
+}) => ({
+  textAlign: align,
+  alignItems: getFlexProperty(align)
+}), ({
+  align
+}) => getCardAlignment(align), getBottomSpacing);
+export {
+  GridItemStyled as G
+};

package/dist/styled-ZpQohvyx.js

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { getSpacing } from "./foundations/token/getSpacing/index.js";
+import { s as spacingMd } from "./Spacing-D0HQH9YJ.js";
+import { f as filterProps } from "./filterProps-Cewck8OH.js";
+const GridStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "GridStyled",
+  componentId: "sc-1ydkxh9-0"
+})({
+  boxSizing: "border-box",
+  display: "flex",
+  flexWrap: "wrap"
+}, ({
+  align = "left"
+}) => ({
+  justifyContent: align
+}), ({
+  stretch = false
+}) => ({
+  alignItems: stretch ? "stretch" : "flex-start"
+}), ({
+  spacing = spacingMd
+}) => ({
+  gap: getSpacing(spacing)
+}), getBottomSpacing);
+export {
+  GridStyled as G
+};

package/dist/tags-DI6H1biK.js

@@ -0,0 +1,29 @@
+const h1TagName = "h1";
+const h2TagName = "h2";
+const h3TagName = "h3";
+const h4TagName = "h4";
+const h5TagName = "h5";
+const h6TagName = "h6";
+const headingHtmlTags = [h1TagName, h2TagName, h3TagName, h4TagName, h5TagName, h6TagName];
+const divTagName = "div";
+const spanTagName = "span";
+const strongTagName = "strong";
+const supTagName = "sup";
+const ulTagName = "ul";
+const olTagName = "ol";
+const liTagName = "li";
+export {
+  h4TagName as a,
+  h3TagName as b,
+  h2TagName as c,
+  divTagName as d,
+  h1TagName as e,
+  headingHtmlTags as f,
+  strongTagName as g,
+  h5TagName as h,
+  supTagName as i,
+  liTagName as l,
+  olTagName as o,
+  spanTagName as s,
+  ulTagName as u
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vodafone_de/brix-components",
   "description": "Brix is the digital design system for vodafone.de",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "exports": {
     "./components/*": {
       "import": "./dist/components/*/index.js",
@@ -19,6 +19,7 @@
   "peerDependencies": {
     "@af-utils/scrollend-polyfill": "^0.0.14",
     "@vis.gl/react-google-maps": "^1.5.1",
+    "html-react-parser": "^5.2.2",
     "polished": "^4.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/dist/index-BoPDwZgt.js

@@ -1,18 +0,0 @@
-const getCssVar = (cssVarName) => {
-  return `var(--${cssVarName})`;
-};
-const bodySizes = {
-  md: {
-    fontSize: getCssVar("bodyMdFontSize"),
-    lineHeight: getCssVar("bodyMdLineHeight")
-  },
-  sm: {
-    fontSize: getCssVar("bodySmFontSize"),
-    lineHeight: getCssVar("bodySmLineHeight")
-  }
-};
-const getBodySize = (size) => bodySizes[size];
-export {
-  getBodySize as a,
-  getCssVar as g
-};