@vodafone_de/brix-components 3.0.0 → 3.0.2

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,8 +1,7 @@
 {
   "name": "@vodafone_de/brix-components",
   "description": "Brix is the digital design system for vodafone.de",
-  "version": "3.0.0",
-  "private": false,
+  "version": "3.0.2",
   "exports": {
     "./components/*": {
       "import": "./dist/components/*/index.js",

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
-};

package/dist/index-DRj4iUs9.js

@@ -1,117 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import parse from "html-react-parser";
-import styled from "styled-components";
-import { g as getCssVar, a as getBodySize } from "./index-BoPDwZgt.js";
-const spacingNone = "None";
-const spacingSm = "Sm";
-const spacingMd = "Md";
-const textBodyMd = "md";
-const textBodySm = "sm";
-const renderInlineRichTextFromOpenText = (fromCms) => {
-  if (typeof fromCms === "string") {
-    return parse(fromCms);
-  }
-  if (Array.isArray(fromCms)) {
-    return fromCms.map(renderInlineRichTextFromOpenText);
-  }
-  return fromCms;
-};
-const getSpacing = (spacing) => getCssVar(`spacing${spacing}`);
-const getBottomSpacing = ({
-  bottomSpacing
-}) => {
-  if (!bottomSpacing) {
-    return {};
-  }
-  return {
-    marginBottom: getSpacing(bottomSpacing)
-  };
-};
-const baseWeight300 = "fontWeightLight";
-const baseWeight400 = "fontWeightRegular";
-const baseWeight700 = "fontWeightBold";
-const fontWeights = {
-  light: baseWeight300,
-  regular: baseWeight400,
-  bold: baseWeight700
-};
-const getFontWeight = (weight) => getCssVar(fontWeights[weight]);
-const fontWeightBold = "bold";
-const propsNotPassToDomDefault = ["accordionType", "activeId", "activeIndex", "setActiveId", "align", "animated", "appearance", "aspectRatio", "autoLayout", "apiKey", "badge", "borderBottom", "bottomSpacing", "buttonLink", "buttons", "coloringMode", "colorSwatch", "component", "corners", "description", "expanded", "filterItems", "gapSpacing", "grow", "handleOnClick", "handleOnToogle", "hasOverlay", "heading", "heightSm", "heightMd", "heightLg", "horizontalAlignment", "icon", "iconAlign", "iconName", "iconPosition", "images", "isActive", "isChecked", "isDisabled", "isFullscreen", "isOpen", "isOrdered", "isSelected", "isTransparentBackground", "items", "jumpToClickedItem", "justify", "justifyHorizontal", "lg", "loadingSpinnerChild", "mapId", "md", "message", "more", "nextAriaLabel", "notificationType", "objectFit", "objectPosition", "offset", "onUpdate", "openMultiple", "orientation", "padding", "prefix", "prefixWeight", "prevAriaLabel", "price", "productId", "promoPrice", "screenReaderInstruction", "showList", "size", "sm", "spacing", "spinnerType", "status", "stretch", "strikePrice", "suffix", "tag", "textContent", "uid", "variant", "verticalPadding", "viewportHeight", "weight", "width"];
-const filterProps = (propsNotPassToDom = []) => {
-  const shouldForwardProp = (prop) => {
-    if ("string" !== typeof prop) {
-      return false;
-    }
-    return ![...propsNotPassToDom, ...propsNotPassToDomDefault].includes(prop);
-  };
-  return shouldForwardProp;
-};
-const BodyStyled = styled.p.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "BodyStyled",
-  componentId: "sc-1n7n7pv-0"
-})({
-  outline: "none",
-  color: "inherit",
-  verticalAlign: "baseline"
-}, ({
-  size = textBodyMd
-}) => getBodySize(size), ({
-  weight,
-  tag
-}) => {
-  if ("strong" === tag) {
-    return {
-      fontWeight: getFontWeight(fontWeightBold)
-    };
-  }
-  if (!weight) {
-    return {};
-  }
-  return {
-    fontWeight: getFontWeight(weight)
-  };
-}, ({
-  tag
-}) => {
-  if ("sup" === tag) {
-    return {
-      verticalAlign: "super",
-      fontSize: "smaller"
-    };
-  }
-  if ("span" === tag) {
-    return {
-      display: "inline-block"
-    };
-  }
-  return {};
-}, ({
-  align
-}) => ({
-  textAlign: align
-}), getBottomSpacing);
-const bodyAlignLeft = "left";
-const bodyAlignCenter = "center";
-const bodyAlignRight = "right";
-const Body = ({
-  tag = "p",
-  bottomSpacing,
-  ...props
-}) => {
-  if (!bottomSpacing) {
-    bottomSpacing = textBodySm === props.size ? spacingSm : spacingMd;
-  }
-  return /* @__PURE__ */ jsx(BodyStyled, { ...props, bottomSpacing, as: tag, tag, children: renderInlineRichTextFromOpenText(props.children) });
-};
-export {
-  Body as B,
-  getSpacing as a,
-  bodyAlignLeft as b,
-  bodyAlignCenter as c,
-  bodyAlignRight as d,
-  filterProps as f,
-  getBottomSpacing as g,
-  spacingNone as s
-};