@citygross/components_v2 0.0.21 → 0.0.23

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

@@ -0,0 +1,14 @@
+.Accordion_accordionContainer__1fnaf7h0 {
+  display: grid;
+  transition: grid-template-rows 0.3s ease-in-out;
+  overflow: hidden;
+}
+.Accordion_accordionContainer_open_true__1fnaf7h1 {
+  grid-template-rows: 1fr;
+}
+.Accordion_accordionContainer_open_false__1fnaf7h2 {
+  grid-template-rows: 0fr;
+}
+.Accordion_accordionContent__1fnaf7h3 {
+  overflow: hidden;
+}

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

@@ -0,0 +1,7 @@
+import './Accordion.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var accordionContainer = createRuntimeFn({ defaultClassName: "Accordion_accordionContainer__1fnaf7h0", variantClassNames: { open: { true: "Accordion_accordionContainer_open_true__1fnaf7h1", false: "Accordion_accordionContainer_open_false__1fnaf7h2" } }, defaultVariants: { open: false }, compoundVariants: [] });
+var accordionContent = "Accordion_accordionContent__1fnaf7h3";
+
+export { accordionContainer, accordionContent };

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+declare type TAccordion = {
+    children: React.ReactNode;
+    open: boolean;
+    className?: string;
+};
+declare const Accordion: ({ children, open, className }: TAccordion) => JSX.Element;
+
+export { Accordion, TAccordion };

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { accordionContainer, accordionContent } from './Accordion.css.vanilla.js';
+
+const Accordion = ({ children, open, className }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: `${accordionContainer({ open })} ${className}` }, /* @__PURE__ */ React.createElement("div", { className: accordionContent }, children));
+};
+
+export { Accordion };

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

@@ -1,6 +1,4 @@
 .Divider_divider__1ibthdh0 {
   width: 100%;
   height: 1px;
-  margin: 16px 0;
-  background: #E8E8E8;
 }

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

@@ -1,7 +1,8 @@
+import './../../cssUtils/color.css.ts.vanilla.css';
 import './../../cssUtils/spacings.css.ts.vanilla.css';
 import './Divider.css.ts.vanilla.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var divider = createRuntimeFn({ defaultClassName: "Divider_divider__1ibthdh0", variantClassNames: { marginVertical: { xxxs: "spacings_marginVertical_xxxs__e0awtzo", xxs: "spacings_marginVertical_xxs__e0awtzp", xxs2: "spacings_marginVertical_xxs2__e0awtzq", xs: "spacings_marginVertical_xs__e0awtzr", xs2: "spacings_marginVertical_xs2__e0awtzs", sm: "spacings_marginVertical_sm__e0awtzt", sm2: "spacings_marginVertical_sm2__e0awtzu", md: "spacings_marginVertical_md__e0awtzv", lg: "spacings_marginVertical_lg__e0awtzw", xl: "spacings_marginVertical_xl__e0awtzx", xxl: "spacings_marginVertical_xxl__e0awtzy", false: "spacings_marginVertical_false__e0awtzz" } }, defaultVariants: {}, compoundVariants: [] });
+var divider = createRuntimeFn({ defaultClassName: "Divider_divider__1ibthdh0", variantClassNames: { marginVertical: { xxxs: "spacings_marginVertical_xxxs__e0awtzo", xxs: "spacings_marginVertical_xxs__e0awtzp", xxs2: "spacings_marginVertical_xxs2__e0awtzq", xs: "spacings_marginVertical_xs__e0awtzr", xs2: "spacings_marginVertical_xs2__e0awtzs", sm: "spacings_marginVertical_sm__e0awtzt", sm2: "spacings_marginVertical_sm2__e0awtzu", md: "spacings_marginVertical_md__e0awtzv", lg: "spacings_marginVertical_lg__e0awtzw", xl: "spacings_marginVertical_xl__e0awtzx", xxl: "spacings_marginVertical_xxl__e0awtzy", false: "spacings_marginVertical_false__e0awtzz" }, 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" } }, defaultVariants: { backgroundColor: "lightest" }, compoundVariants: [] });
 
 export { divider };

package/dist/components/Divider/Divider.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { TSpacingKeys } from '@citygross/design-tokens_v2';
+import { TSpacingKeys, TPaletteKeys } from '@citygross/design-tokens_v2';
 
 declare type TDivider = {
     marginVertical?: TSpacingKeys;
+    color?: TPaletteKeys;
 };
 declare const Divider: React.FunctionComponent<TDivider>;
 

package/dist/components/Divider/Divider.js

@@ -2,9 +2,10 @@ import React from 'react';
 import { divider } from './Divider.css.vanilla.js';
 
 const Divider = ({
-  marginVertical
+  marginVertical,
+  color
 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: divider({ marginVertical }) });
+  return /* @__PURE__ */ React.createElement("div", { className: divider({ marginVertical, backgroundColor: color }) });
 };
 
 export { Divider };

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

@@ -0,0 +1,80 @@
+.LinkButton_linkBase__1exysai0 {
+  outline: none;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  border-radius: 2px;
+  background-color: transparent;
+}
+.LinkButton_linkBase__1exysai0:focus-visible:not(:hover) {
+  outline: none;
+  box-shadow: 0 0 0 2px #fff,0 0 0 4px #000,0 0 0 6px #fff;
+  transition: all 0.1s ease-in-out;
+}
+.LinkButton_linkBase__1exysai0:disabled {
+  cursor: default;
+}
+.LinkButton_linkVariant_primary__1exysai1 {
+  color: #0069AE;
+  text-decoration: underline;
+}
+.LinkButton_linkVariant_primary__1exysai1:hover:not(:disabled) {
+  color: #005C99;
+}
+.LinkButton_linkVariant_primary__1exysai1:active:not(:disabled) {
+  color: #004D80;
+}
+.LinkButton_linkVariant_primary__1exysai1:disabled {
+  color: #92B9D3;
+}
+.LinkButton_linkVariant_secondary__1exysai2 {
+  color: #333333;
+}
+.LinkButton_linkVariant_secondary__1exysai2:hover:not(:disabled) {
+  text-decoration: underline;
+}
+.LinkButton_linkVariant_secondary__1exysai2:active:not(:disabled) {
+  text-decoration: underline;
+}
+.LinkButton_linkVariant_secondary__1exysai2:disabled {
+  color: #B8B8B8;
+}
+.LinkButton_linkVariant_tertiary__1exysai3 {
+  color: #333333;
+  text-decoration: underline;
+}
+.LinkButton_linkVariant_tertiary__1exysai3:disabled {
+  color: #B8B8B8;
+}
+.LinkButton_linkVariant_primaryInverted__1exysai4 {
+  color: #FFFFFF;
+  text-decoration: underline;
+}
+.LinkButton_linkVariant_primaryInverted__1exysai4:hover:not(:disabled) {
+  color: #FFFFFF;
+}
+.LinkButton_linkVariant_primaryInverted__1exysai4:active:not(:disabled) {
+  color: #B8B8B8;
+}
+.LinkButton_linkVariant_primaryInverted__1exysai4:disabled {
+  color: #5c5c5c;
+}
+.LinkButton_linkVariant_secondaryInverted__1exysai5 {
+  color: #FFFFFF;
+}
+.LinkButton_linkVariant_secondaryInverted__1exysai5:hover:not(:disabled) {
+  text-decoration: underline;
+}
+.LinkButton_linkVariant_secondaryInverted__1exysai5:active:not(:disabled) {
+  text-decoration: underline;
+  color: #B8B8B8;
+}
+.LinkButton_linkVariant_secondaryInverted__1exysai5:disabled {
+  color: #5c5c5c;
+}
+.LinkButton_linkStyle_size_small__1exysaic {
+  font-size: 13px;
+}
+.LinkButton_linkStyle_size_default__1exysaid {
+  font-size: 15px;
+}

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

@@ -0,0 +1,6 @@
+import './LinkButton.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var linkStyle = createRuntimeFn({ defaultClassName: "LinkButton__1exysai6 LinkButton_linkBase__1exysai0", variantClassNames: { linkVariant: { primary: "LinkButton_linkVariant_primary__1exysai1", secondary: "LinkButton_linkVariant_secondary__1exysai2", tertiary: "LinkButton_linkVariant_tertiary__1exysai3", primaryInverted: "LinkButton_linkVariant_primaryInverted__1exysai4", secondaryInverted: "LinkButton_linkVariant_secondaryInverted__1exysai5" }, size: { small: "LinkButton_linkStyle_size_small__1exysaic", "default": "LinkButton_linkStyle_size_default__1exysaid" } }, defaultVariants: { size: "default", linkVariant: "primary" }, compoundVariants: [] });
+
+export { linkStyle };

package/dist/components/LinkButton/LinkButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+declare type TLinkButton = {
+    children?: React.ReactNode;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'primaryInverted' | 'secondaryInverted';
+    disabled?: boolean;
+    onClick?: () => void;
+};
+declare const LinkButton: ({ onClick, children, variant, disabled }: TLinkButton) => JSX.Element;
+
+export { LinkButton, TLinkButton };

package/dist/components/LinkButton/LinkButton.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { linkStyle } from './LinkButton.css.vanilla.js';
+
+const LinkButton = ({
+  onClick,
+  children,
+  variant,
+  disabled
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: linkStyle({ linkVariant: variant }),
+      disabled,
+      onClick: () => onClick && onClick()
+    },
+    children
+  );
+};
+
+export { LinkButton };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { AlertBox, TAlertBox } from './components/AlertBox/AlertBox.js';
+export { Accordion, TAccordion } from './components/Accordion/Accordion.js';
 export { Box, TBox } from './components/Box/Box.js';
 export { BoxArrow, TBoxArrow } from './components/BoxArrow/BoxArrow.js';
 export { Button, TCgButton } from './components/Button/Button.js';
@@ -9,6 +10,7 @@ export { Dot, TDot } from './components/Dot/Dot.js';
 export { FormControl, TFormControl, TScreenWidth } from './components/FormControl/FormControl.js';
 export { Header, THeader } from './components/Header/Header.js';
 export { Input, TInput } from './components/Input/Input.js';
+export { LinkButton, TLinkButton } from './components/LinkButton/LinkButton.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';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { AlertBox } from './components/AlertBox/AlertBox.js';
+export { Accordion } from './components/Accordion/Accordion.js';
 export { Box } from './components/Box/Box.js';
 export { BoxArrow } from './components/BoxArrow/BoxArrow.js';
 export { Button } from './components/Button/Button.js';
@@ -9,6 +10,7 @@ export { Dot } from './components/Dot/Dot.js';
 export { FormControl, TScreenWidth } from './components/FormControl/FormControl.js';
 export { Header } from './components/Header/Header.js';
 export { Input } from './components/Input/Input.js';
+export { LinkButton } from './components/LinkButton/LinkButton.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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components_v2",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "license": "ISC",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -79,5 +79,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "82e0858adcb2ec5d714a568a3cfa71ee75e4a022"
+  "gitHead": "f9b821bd7da7f6175f96fd6c9c3e8e8f76dee538"
 }