@citygross/components_v2 0.0.19 → 0.0.21

package/dist/components/BoxArrow/BoxArrow.js

@@ -1,6 +1,7 @@
 import { Icons } from '@citygross/icons_v2';
 import React from 'react';
 import { boxArrowContainer } from './BoxArrow.css.vanilla.js';
+import { palette } from '@citygross/design-tokens_v2';
 
 const BoxArrow = ({
   arrowPlacement,
@@ -16,7 +17,7 @@ const BoxArrow = ({
         offsetRight: arrowPlacement === "right" ? arrowSpacing : void 0
       })
     },
-    /* @__PURE__ */ React.createElement(Icons.BoxArrow, { width: 17, height: 8, color: background })
+    /* @__PURE__ */ React.createElement(Icons.BoxArrow, { width: 17, height: 8, color: palette[background] })
   );
 };
 

package/dist/components/Header/Header.css.ts.vanilla.css

@@ -26,8 +26,28 @@
   justify-content: space-between;
   padding: 12px;
 }
+.Header_desktopLogo__11gdejs5 {
+  display: none;
+  visibility: hidden;
+}
+.Header_mobileLogo__11gdejs6 {
+  display: block;
+  visibility: visible;
+}
 @media screen and (min-width: 960px) {
   .Header_headerWrapper__11gdejs1 {
     padding: 20px 24px;
   }
+  .Header_menuIconContainer__11gdejs3 {
+    display: none;
+    visibility: visible;
+  }
+  .Header_desktopLogo__11gdejs5 {
+    display: block;
+    visibility: visible;
+  }
+  .Header_mobileLogo__11gdejs6 {
+    display: none;
+    visibility: hidden;
+  }
 }

package/dist/components/Header/Header.css.vanilla.js

@@ -1,8 +1,10 @@
 import './Header.css.ts.vanilla.css';
 
+var desktopLogo = "Header_desktopLogo__11gdejs5";
 var headerContainer = "Header_headerContainer__11gdejs2";
 var headerWrapper = "Header_headerWrapper__11gdejs1";
 var menuIconContainer = "Header_menuIconContainer__11gdejs3";
+var mobileLogo = "Header_mobileLogo__11gdejs6";
 var wrapper = "Header_wrapper__11gdejs0";
 
-export { headerContainer, headerWrapper, menuIconContainer, wrapper };
+export { desktopLogo, headerContainer, headerWrapper, menuIconContainer, mobileLogo, wrapper };

package/dist/components/Header/Header.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Button } from '../Button/Button.js';
 import { Icons } from '@citygross/icons_v2';
-import { wrapper, headerWrapper, headerContainer, menuIconContainer } from './Header.css.vanilla.js';
-import { breakpoints } from '@citygross/design-tokens_v2';
+import { wrapper, headerWrapper, headerContainer, mobileLogo, desktopLogo, menuIconContainer } from './Header.css.vanilla.js';
 
 const Header = ({
   btnLabel,
@@ -11,15 +10,22 @@ const Header = ({
   sideModal,
   headerLink
 }) => {
-  const isMobile = window.innerWidth < (breakpoints?.lg ?? 960);
-  return /* @__PURE__ */ React.createElement("div", { className: wrapper }, headerLink && headerLink, /* @__PURE__ */ React.createElement("div", { className: headerWrapper }, /* @__PURE__ */ React.createElement("div", { className: headerContainer }, isMobile ? /* @__PURE__ */ React.createElement(Icons.LogoFlat, null) : /* @__PURE__ */ React.createElement(Icons.Logo, null), isMobile ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: wrapper }, headerLink && headerLink, /* @__PURE__ */ React.createElement("div", { className: headerWrapper }, /* @__PURE__ */ React.createElement("div", { className: headerContainer }, /* @__PURE__ */ React.createElement("span", { className: mobileLogo }, /* @__PURE__ */ React.createElement(Icons.LogoFlat, null)), /* @__PURE__ */ React.createElement("span", { className: desktopLogo }, /* @__PURE__ */ React.createElement(Icons.Logo, null)), /* @__PURE__ */ React.createElement(
     "div",
     {
       className: menuIconContainer,
       onClick: () => onMenuClick && onMenuClick()
     },
     /* @__PURE__ */ React.createElement(Icons.Menu, null)
-  ) : btnLabel && /* @__PURE__ */ React.createElement(Button, { onClick: btnOnClick, variant: "secondary" }, btnLabel))), sideModal);
+  ), btnLabel && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      className: desktopLogo,
+      onClick: btnOnClick,
+      variant: "secondary"
+    },
+    btnLabel
+  ))), sideModal);
 };
 
 export { Header };

package/dist/components/Modal/Modal.css.ts.vanilla.css

@@ -0,0 +1,69 @@
+.Modal_modalOverlay__mwif0x0 {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  z-index: 5;
+  background: rgba(0, 0, 0, 0.6);
+}
+.Modal_modalContainer__mwif0x1 {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  max-height: 100vh;
+  max-width: 100%;
+  border-radius: 5px;
+}
+.Modal_modalContainer_maxWidth_confirm__mwif0x1d {
+  max-width: 480px;
+}
+.Modal_modalContainer_maxWidth_regular__mwif0x1e {
+  max-width: 615px;
+}
+.Modal_modalHeaderContainer__mwif0x1f {
+  padding-bottom: 24px;
+}
+.Modal_modalHeader__mwif0x1g {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 16px;
+  align-items: center;
+}
+.Modal_closeButtonWrapper__mwif0x1h {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 16px;
+}
+.Modal_childrenWrapper__mwif0x1i {
+  display: flex;
+  flex-direction: column;
+  min-height: 64px;
+  gap: 24px;
+}
+.Modal_footerWrapper__mwif0x1j {
+  display: flex;
+  gap: 8px;
+}
+@media (min-width: 8px) {
+  .Modal_modalOverlay__mwif0x0 {
+    padding: 32px;
+  }
+  .Modal_modalContainer__mwif0x1 {
+    padding: 32px;
+    width: 100%;
+    max-height: 90vh;
+  }
+}
+@media (min-width: 16px) {
+  .Modal_modalHeaderContainer__mwif0x1f {
+    padding-top: 8px;
+  }
+}

package/dist/components/Modal/Modal.css.vanilla.js

@@ -0,0 +1,13 @@
+import './../../cssUtils/color.css.ts.vanilla.css';
+import './Modal.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var childrenWrapper = "Modal_childrenWrapper__mwif0x1i";
+var closeButtonWrapper = "Modal_closeButtonWrapper__mwif0x1h";
+var footerWrapper = "Modal_footerWrapper__mwif0x1j";
+var modalContainer = createRuntimeFn({ defaultClassName: "Modal_modalContainer__mwif0x1", variantClassNames: { backgroundColor: { primary: "color_backgroundColor_primary__13rr0b21b", secondary: "color_backgroundColor_secondary__13rr0b21c", brandYellow: "color_backgroundColor_brandYellow__13rr0b21d", brandBlue: "color_backgroundColor_brandBlue__13rr0b21e", brandPurple: "color_backgroundColor_brandPurple__13rr0b21f", brandPrio: "color_backgroundColor_brandPrio__13rr0b21g", yellowLighter: "color_backgroundColor_yellowLighter__13rr0b21h", yellowLight: "color_backgroundColor_yellowLight__13rr0b21i", blueLight: "color_backgroundColor_blueLight__13rr0b21j", blueLighter: "color_backgroundColor_blueLighter__13rr0b21k", blueMedium: "color_backgroundColor_blueMedium__13rr0b21l", greenLight: "color_backgroundColor_greenLight__13rr0b21m", greenMedium: "color_backgroundColor_greenMedium__13rr0b21n", redLight: "color_backgroundColor_redLight__13rr0b21o", recipeVego: "color_backgroundColor_recipeVego__13rr0b21p", recipeLactose: "color_backgroundColor_recipeLactose__13rr0b21q", recipeGluten: "color_backgroundColor_recipeGluten__13rr0b21r", link: "color_backgroundColor_link__13rr0b21s", white: "color_backgroundColor_white__13rr0b21t", black: "color_backgroundColor_black__13rr0b21u", lightest: "color_backgroundColor_lightest__13rr0b21v", lighter: "color_backgroundColor_lighter__13rr0b21w", light: "color_backgroundColor_light__13rr0b21x", medium: "color_backgroundColor_medium__13rr0b21y", mediumDark: "color_backgroundColor_mediumDark__13rr0b21z", dark: "color_backgroundColor_dark__13rr0b220", darker: "color_backgroundColor_darker__13rr0b221", darkest: "color_backgroundColor_darkest__13rr0b222", buttonGray: "color_backgroundColor_buttonGray__13rr0b223", disabledGray: "color_backgroundColor_disabledGray__13rr0b224", disabledDarkGray: "color_backgroundColor_disabledDarkGray__13rr0b225", placeholder: "color_backgroundColor_placeholder__13rr0b226", border: "color_backgroundColor_border__13rr0b227", boxShadow: "color_backgroundColor_boxShadow__13rr0b228", boxShadowActive: "color_backgroundColor_boxShadowActive__13rr0b229", alertRed: "color_backgroundColor_alertRed__13rr0b22a", alertBlue: "color_backgroundColor_alertBlue__13rr0b22b", alertGreen: "color_backgroundColor_alertGreen__13rr0b22c", darkOverlay: "color_backgroundColor_darkOverlay__13rr0b22d", transparent: "color_backgroundColor_transparent__13rr0b22e", brandBlueHover: "color_backgroundColor_brandBlueHover__13rr0b22f", brandYellowHover: "color_backgroundColor_brandYellowHover__13rr0b22g", brandPrioHover: "color_backgroundColor_brandPrioHover__13rr0b22h", brandBlueActive: "color_backgroundColor_brandBlueActive__13rr0b22i", brandYellowActive: "color_backgroundColor_brandYellowActive__13rr0b22j", brandPrioActive: "color_backgroundColor_brandPrioActive__13rr0b22k", none: "color_backgroundColor_none__13rr0b22l" }, maxWidth: { confirm: "Modal_modalContainer_maxWidth_confirm__mwif0x1d", regular: "Modal_modalContainer_maxWidth_regular__mwif0x1e" } }, defaultVariants: {}, compoundVariants: [] });
+var modalHeader = "Modal_modalHeader__mwif0x1g";
+var modalHeaderContainer = "Modal_modalHeaderContainer__mwif0x1f";
+var modalOverlay = "Modal_modalOverlay__mwif0x0";
+
+export { childrenWrapper, closeButtonWrapper, footerWrapper, modalContainer, modalHeader, modalHeaderContainer, modalOverlay };

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TPaletteKeys } from '@citygross/design-tokens_v2';
+
+declare type TModal = {
+    onBackdropClick?: () => void;
+    children?: React.ReactNode;
+    title?: string;
+    subTitle?: string;
+    hideCancel?: boolean;
+    querySelector?: string;
+    footer?: JSX.Element;
+    background?: TPaletteKeys;
+    isConfirm?: boolean;
+    className?: string;
+};
+declare const Modal: ({ onBackdropClick, children, title, subTitle, hideCancel, isConfirm, background, querySelector, footer, className }: TModal) => React.ReactPortal;
+
+export { Modal, TModal };

package/dist/components/Modal/Modal.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Icons } from '@citygross/icons_v2';
+import { Spacer } from '../Spacer/Spacer.js';
+import { modalOverlay, modalContainer, modalHeaderContainer, modalHeader, closeButtonWrapper, childrenWrapper, footerWrapper } from './Modal.css.vanilla.js';
+import { H2 } from '../../typography/H2/H2.js';
+import { BodyText } from '../../typography/BodyText/BodyText.js';
+
+const Modal = ({
+  onBackdropClick,
+  children,
+  title,
+  subTitle,
+  hideCancel = true,
+  isConfirm,
+  background = "white",
+  querySelector = "#root",
+  footer,
+  className
+}) => {
+  const domSafe = typeof document !== "undefined";
+  return domSafe ? createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: modalOverlay,
+        onClick: () => onBackdropClick && onBackdropClick()
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${modalContainer({
+            backgroundColor: background,
+            maxWidth: isConfirm ? "confirm" : "regular"
+          })} ${className}`,
+          onClick: (e) => e.stopPropagation()
+        },
+        title && /* @__PURE__ */ React.createElement("div", { className: modalHeaderContainer }, /* @__PURE__ */ React.createElement("div", { className: modalHeader }, /* @__PURE__ */ React.createElement(H2, null, title), !hideCancel && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: closeButtonWrapper,
+            onClick: () => onBackdropClick && onBackdropClick()
+          },
+          /* @__PURE__ */ React.createElement(Icons.Cross, null)
+        )), /* @__PURE__ */ React.createElement(BodyText, null, subTitle)),
+        children && /* @__PURE__ */ React.createElement("div", { className: childrenWrapper }, children),
+        footer && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Spacer, null), /* @__PURE__ */ React.createElement("div", { className: footerWrapper }, footer))
+      )
+    ),
+    document.querySelector(querySelector) || document.body
+  ) : null;
+};
+
+export { Modal };

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { FormControl, TFormControl, TScreenWidth } from './components/FormContro
 export { Header, THeader } from './components/Header/Header.js';
 export { Input, TInput } from './components/Input/Input.js';
 export { EListItemAlignment, ListItem, TItem, TListItem } from './components/ListItem/ListItem.js';
+export { Modal, TModal } from './components/Modal/Modal.js';
 export { BorderPosition, borderStyle, orderTable, orderTd, orderTh, orderThead, orderTr } from './components/OrderTable/OrderTable.css.js';
 export { MobileOrderLine } from './components/OrderTableMobile/OrderTableMobile.js';
 export { Pagination, TPagination } from './components/Pagination/Pagination.js';

package/dist/index.js

@@ -10,6 +10,7 @@ export { FormControl, TScreenWidth } from './components/FormControl/FormControl.
 export { Header } from './components/Header/Header.js';
 export { Input } from './components/Input/Input.js';
 export { EListItemAlignment, ListItem } from './components/ListItem/ListItem.js';
+export { Modal } from './components/Modal/Modal.js';
 export { BorderPosition, borderStyle, orderTable, orderTd, orderTh, orderThead, orderTr } from './components/OrderTable/OrderTable.css.vanilla.js';
 export { MobileOrderLine } from './components/OrderTableMobile/OrderTableMobile.js';
 export { Pagination } from './components/Pagination/Pagination.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components_v2",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "license": "ISC",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@citygross/design-tokens_v2": "^0.0.4",
-    "@citygross/icons_v2": "^0.0.1",
+    "@citygross/icons_v2": "^0.0.2",
     "@citygross/react-use-bg-wizard": "^0.0.8",
     "@citygross/typography": "^0.0.89",
     "@citygross/utils": "^0.0.39",
@@ -79,5 +79,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "566d7b7b19a74421ca9d193c087ae5b8c529bec1"
+  "gitHead": "82e0858adcb2ec5d714a568a3cfa71ee75e4a022"
 }