@vodafone_de/brix-components 3.0.1 → 3.0.3

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.3",
   "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
-};