@citygross/components 0.18.4 → 0.19.0

package/build/@types/components/PartnerOffer/PartnerOffer.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export declare type TPartnerOfferImage = {
+    altText?: string;
+    desktopImage: string;
+    mobileImage?: string;
+};
+export declare type TPartnerOfferBody = {
+    enabled?: boolean;
+    text?: React.ReactNode;
+};
+export declare type TPartnerOfferLink = {
+    internal?: boolean;
+    target?: '_self' | '_blank';
+    url: string;
+};
+export declare type TPartnerOffer = {
+    body?: TPartnerOfferBody;
+    headline?: string;
+    image?: TPartnerOfferImage;
+    link?: TPartnerOfferLink;
+    linkText?: string;
+} & React.HTMLAttributes<HTMLElement>;
+export declare const PartnerOffer: ({ body, headline, image, link, linkText, ...props }: TPartnerOffer) => React.JSX.Element;

package/build/@types/components/PartnerOffer/PartnerOffer.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const PartnerOffer: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {}, never>;
+export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Picture: import("styled-components").StyledComponent<"picture", import("styled-components").DefaultTheme, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Link: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/index.d.ts

@@ -61,6 +61,7 @@ export * from './components/MobileTable';
 export * from './components/Modal/Modal';
 export * from './components/NavMainLink/NavMainLink';
 export * from './components/Pagination/Pagination';
+export * from './components/PartnerOffer/PartnerOffer';
 export * from './components/Pill/Pill';
 export * from './components/PersonalCouponCard/PersonalCouponCard';
 export * from './components/PriceStripe/PriceStripe';

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js

@@ -80,6 +80,7 @@ require('../MobileTable/MobileTable.styles.js');
 require('../Modal/Modal.js');
 require('../NavMainLink/NavMainLink.styled.js');
 require('../Pagination/Pagination.styles.js');
+require('../PartnerOffer/PartnerOffer.js');
 require('../Pill/Pill.styles.js');
 require('styled-components');
 require('../PersonalCouponCard/PersonalCouponCard.styles.js');

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/PartnerOffer/PartnerOffer.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var React = require('react');
+var designTokens = require('@citygross/design-tokens');
+var typography = require('@citygross/typography');
+var DivAsButton = require('../CgButton/DivAsButton/DivAsButton.js');
+var PartnerOffer_styles = require('./PartnerOffer.styles.js');
+var CgButton_types = require('../CgButton/CgButton.types.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _a;
+var mobileImageMediaQuery = "(max-width: ".concat((_a = designTokens.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md, "px)");
+var PartnerOffer = function (_a) {
+    var _b, _c;
+    var body = _a.body, headline = _a.headline, image = _a.image, link = _a.link, _d = _a.linkText, linkText = _d === void 0 ? 'Till erbjudandet' : _d, props = _tslib.__rest(_a, ["body", "headline", "image", "link", "linkText"]);
+    var hasText = (body === null || body === void 0 ? void 0 : body.enabled) !== false && Boolean(body === null || body === void 0 ? void 0 : body.text);
+    return (React__default["default"].createElement(PartnerOffer_styles.PartnerOffer, _tslib.__assign({}, props),
+        (image === null || image === void 0 ? void 0 : image.desktopImage) && (React__default["default"].createElement(PartnerOffer_styles.ImageWrapper, null,
+            React__default["default"].createElement(PartnerOffer_styles.Picture, null,
+                image.mobileImage && (React__default["default"].createElement("source", { media: mobileImageMediaQuery, srcSet: image.mobileImage })),
+                React__default["default"].createElement(PartnerOffer_styles.Image, { alt: (_b = image.altText) !== null && _b !== void 0 ? _b : '', src: image.desktopImage })))),
+        React__default["default"].createElement(PartnerOffer_styles.Content, null,
+            headline && React__default["default"].createElement(typography.H2, null, headline),
+            hasText && React__default["default"].createElement(typography.BodyText, null, body === null || body === void 0 ? void 0 : body.text),
+            (link === null || link === void 0 ? void 0 : link.url) && (React__default["default"].createElement(PartnerOffer_styles.Link, { href: link.url, target: (_c = link.target) !== null && _c !== void 0 ? _c : (link.internal === false ? '_blank' : '_self') },
+                React__default["default"].createElement(DivAsButton.DivAsButton, { size: CgButton_types.EButtonSize.large, variant: CgButton_types.EButtonVariant.primary }, linkText))))));
+};
+
+exports.PartnerOffer = PartnerOffer;
+//# sourceMappingURL=PartnerOffer.js.map

package/build/cjs/components/src/components/PartnerOffer/PartnerOffer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PartnerOffer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/PartnerOffer/PartnerOffer.styles.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var PartnerOffer = styled__default["default"].article(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
+});
+var ImageWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  aspect-ratio: 27 / 9;\n  border-radius: ", ";\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n"], ["\n  aspect-ratio: 27 / 9;\n  border-radius: ", ";\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n"])), function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return "".concat((_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small, "px ").concat((_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.small, "px 0 0");
+});
+var Picture = styled__default["default"].picture(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: block;\n  height: 100%;\n  width: 100%;\n"], ["\n  display: block;\n  height: 100%;\n  width: 100%;\n"])));
+var Image = styled__default["default"].img(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: block;\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n"], ["\n  display: block;\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n"])));
+var Content = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n  padding: ", ";\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, "px");
+});
+var Link = styled__default["default"].a(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  text-decoration: none;\n"], ["\n  display: inline-flex;\n  text-decoration: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+exports.Content = Content;
+exports.Image = Image;
+exports.ImageWrapper = ImageWrapper;
+exports.Link = Link;
+exports.PartnerOffer = PartnerOffer;
+exports.Picture = Picture;
+//# sourceMappingURL=PartnerOffer.styles.js.map

package/build/cjs/components/src/components/PartnerOffer/PartnerOffer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PartnerOffer.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/index.js

@@ -68,6 +68,7 @@ var MobileTable_styles = require('./components/MobileTable/MobileTable.styles.js
 var Modal = require('./components/Modal/Modal.js');
 var NavMainLink = require('./components/NavMainLink/NavMainLink.js');
 var Pagination = require('./components/Pagination/Pagination.js');
+var PartnerOffer = require('./components/PartnerOffer/PartnerOffer.js');
 var Pill = require('./components/Pill/Pill.js');
 var PersonalCouponCard = require('./components/PersonalCouponCard/PersonalCouponCard.js');
 var PriceStripe = require('./components/PriceStripe/PriceStripe.js');
@@ -236,6 +237,7 @@ Object.defineProperty(exports, 'EModalVariant', {
 exports.Modal = Modal.Modal;
 exports.NavMainLink = NavMainLink.NavMainLink;
 exports.Pagination = Pagination.Pagination;
+exports.PartnerOffer = PartnerOffer.PartnerOffer;
 exports.Pill = Pill.Pill;
 exports.PersonalCouponCard = PersonalCouponCard.PersonalCouponCard;
 exports.PriceStripe = PriceStripe.PriceStripe;

package/build/cjs/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/AddressBlock/AddressBlock.js

@@ -76,6 +76,7 @@ import '../MobileTable/MobileTable.styles.js';
 import '../Modal/Modal.js';
 import '../NavMainLink/NavMainLink.styled.js';
 import '../Pagination/Pagination.styles.js';
+import '../PartnerOffer/PartnerOffer.js';
 import '../Pill/Pill.styles.js';
 import 'styled-components';
 import '../PersonalCouponCard/PersonalCouponCard.styles.js';

package/build/es/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/PartnerOffer/PartnerOffer.js

@@ -0,0 +1,28 @@
+import { __rest, __assign } from '../../../../_virtual/_tslib.js';
+import React from 'react';
+import { theme } from '@citygross/design-tokens';
+import { H2, BodyText } from '@citygross/typography';
+import { DivAsButton } from '../CgButton/DivAsButton/DivAsButton.js';
+import { PartnerOffer as PartnerOffer$1, ImageWrapper, Picture, Image, Content, Link } from './PartnerOffer.styles.js';
+import { EButtonSize, EButtonVariant } from '../CgButton/CgButton.types.js';
+
+var _a;
+var mobileImageMediaQuery = "(max-width: ".concat((_a = theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md, "px)");
+var PartnerOffer = function (_a) {
+    var _b, _c;
+    var body = _a.body, headline = _a.headline, image = _a.image, link = _a.link, _d = _a.linkText, linkText = _d === void 0 ? 'Till erbjudandet' : _d, props = __rest(_a, ["body", "headline", "image", "link", "linkText"]);
+    var hasText = (body === null || body === void 0 ? void 0 : body.enabled) !== false && Boolean(body === null || body === void 0 ? void 0 : body.text);
+    return (React.createElement(PartnerOffer$1, __assign({}, props),
+        (image === null || image === void 0 ? void 0 : image.desktopImage) && (React.createElement(ImageWrapper, null,
+            React.createElement(Picture, null,
+                image.mobileImage && (React.createElement("source", { media: mobileImageMediaQuery, srcSet: image.mobileImage })),
+                React.createElement(Image, { alt: (_b = image.altText) !== null && _b !== void 0 ? _b : '', src: image.desktopImage })))),
+        React.createElement(Content, null,
+            headline && React.createElement(H2, null, headline),
+            hasText && React.createElement(BodyText, null, body === null || body === void 0 ? void 0 : body.text),
+            (link === null || link === void 0 ? void 0 : link.url) && (React.createElement(Link, { href: link.url, target: (_c = link.target) !== null && _c !== void 0 ? _c : (link.internal === false ? '_blank' : '_self') },
+                React.createElement(DivAsButton, { size: EButtonSize.large, variant: EButtonVariant.primary }, linkText))))));
+};
+
+export { PartnerOffer };
+//# sourceMappingURL=PartnerOffer.js.map

package/build/es/components/src/components/PartnerOffer/PartnerOffer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PartnerOffer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/PartnerOffer/PartnerOffer.styles.js

@@ -0,0 +1,33 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var PartnerOffer = styled.article(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
+});
+var ImageWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  aspect-ratio: 27 / 9;\n  border-radius: ", ";\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n"], ["\n  aspect-ratio: 27 / 9;\n  border-radius: ", ";\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n"])), function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return "".concat((_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small, "px ").concat((_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.small, "px 0 0");
+});
+var Picture = styled.picture(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  height: 100%;\n  width: 100%;\n"], ["\n  display: block;\n  height: 100%;\n  width: 100%;\n"])));
+var Image = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n"], ["\n  display: block;\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n"])));
+var Content = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n  padding: ", ";\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, "px");
+});
+var Link = styled.a(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-flex;\n  text-decoration: none;\n"], ["\n  display: inline-flex;\n  text-decoration: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { Content, Image, ImageWrapper, Link, PartnerOffer, Picture };
+//# sourceMappingURL=PartnerOffer.styles.js.map

package/build/es/components/src/components/PartnerOffer/PartnerOffer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PartnerOffer.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/index.js

@@ -64,6 +64,7 @@ export { MobileLabel, MobileTable, MobileTd } from './components/MobileTable/Mob
 export { EModalSize, EModalVariant, Modal } from './components/Modal/Modal.js';
 export { NavMainLink } from './components/NavMainLink/NavMainLink.js';
 export { Pagination } from './components/Pagination/Pagination.js';
+export { PartnerOffer } from './components/PartnerOffer/PartnerOffer.js';
 export { Pill } from './components/Pill/Pill.js';
 export { PersonalCouponCard } from './components/PersonalCouponCard/PersonalCouponCard.js';
 export { PriceStripe } from './components/PriceStripe/PriceStripe.js';

package/build/es/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.18.4",
+  "version": "0.19.0",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "e1449effff8d2d99758111f17dd17ba473dd2819"
+  "gitHead": "6c7fef55bdf5172c3c787a0fea9fb4edc751233b"
 }