@licklist/design 0.58.3-dev.0 → 0.58.3-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -16,7 +16,8 @@ interface IframeEventCardProps {
16
16
  titleId?: string;
17
17
  descriptionId?: string;
18
18
  imageClassName?: string;
19
+ showMoreInfo?: boolean;
19
20
  }
20
- export declare function IframeEventCard({ title, type, cost, date, imageSrc, colour, goToDetails, description, isListView, className, shortDate, titleId, descriptionId, imageClassName, }: IframeEventCardProps): JSX.Element;
21
+ export declare function IframeEventCard({ title, type, cost, date, imageSrc, colour, goToDetails, description, isListView, className, shortDate, titleId, descriptionId, imageClassName, showMoreInfo, }: IframeEventCardProps): JSX.Element;
21
22
  export {};
22
23
  //# sourceMappingURL=IframeEventCard.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"IframeEventCard.d.ts","sourceRoot":"","sources":["../../../../src/iframe/event/event-card/IframeEventCard.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,OAAO,EAAE,MAAM,2DAA2D,CAAC;AASpF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,cAAc,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAW,EACX,UAAkB,EAClB,SAAS,EACT,SAAS,EACT,OAAO,EACP,aAAa,EACb,cAAc,GACf,EAAE,oBAAoB,eA6FtB"}
1
+ {"version":3,"file":"IframeEventCard.d.ts","sourceRoot":"","sources":["../../../../src/iframe/event/event-card/IframeEventCard.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,OAAO,EAAE,MAAM,2DAA2D,CAAC;AASpF,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,cAAc,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAW,EACX,UAAkB,EAClB,SAAS,EACT,SAAS,EACT,OAAO,EACP,aAAa,EACb,cAAc,EACd,YAAY,GACb,EAAE,oBAAoB,eA8FtB"}
@@ -1 +1 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),a=require("react-i18next"),r=require("react-bootstrap"),i=e(require("clsx")),c=require("react-intl"),l=require("../../../tiptap-editor/TipTapEditor.js"),s=require("../../../events/event-card/utils.js"),n=require("../../../assets/iframe/clock.svg.js"),m=require("../../../assets/iframe/calendar.svg.js"),d=require("../../../assets/iframe/ticket.svg.js");exports.IframeEventCard=function(e){var o=e.title,v=e.type,u=e.cost,p=e.date,f=e.imageSrc,E=e.colour,N=e.goToDetails,g=e.description,C=e.isListView,b=void 0!==C&&C,x=e.className,_=e.shortDate,w=e.titleId,T=e.descriptionId,q=e.imageClassName,y=c.useIntl().formatNumber,j=a.useTranslation("Design").t;return t.createElement(r.Card,{style:{"--card-colour":E},className:i("iframe-event-card",{"list-view":b},x),onClick:N?function(){N&&N()}:void 0},f&&t.createElement(r.Card.Img,{className:null!=q?q:"card-image",variant:"top",as:"div",style:{backgroundImage:'url("'.concat(f,'")')}}),t.createElement(r.Card.Body,{className:i("d-flex","flex-column",!f&&"no-image")},t.createElement(r.Card.Title,{className:"iframe-event-card__title",id:w},o),t.createElement("div",{className:"flex-grow-1 iframe-event-card__description"},t.createElement(r.Card.Text,{as:"div"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(m.ReactComponent,null)),t.createElement("p",{className:"iframe-event-card__bold m-0 list-view-hided"},p),t.createElement("p",{className:"iframe-event-card__bold m-0 grid-view-hided"},_))),v&&t.createElement(r.Card.Text,{as:"div",className:"list-view-hided"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(n.ReactComponent,null)),t.createElement("p",{className:"iframe-event-card__bold m-0"},v))),"number"==typeof u&&t.createElement(r.Card.Text,{as:"div"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(d.ReactComponent,null)),t.createElement("p",{className:"iframe-event-card__bold m-0"},j("from")," ",y(u,{style:"currency",currency:"GBP"})))),g&&t.createElement(r.Card.Text,{as:"div",className:"list-view-hided"},t.createElement(l.TipTapEditor,{viewMode:!0,disabled:!0,content:s.formatContent(g,150),id:T})))))};
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),a=require("react-i18next"),r=require("react-bootstrap"),i=e(require("clsx")),c=require("react-intl"),s=require("../../../tiptap-editor/TipTapEditor.js"),l=require("../../../events/event-card/utils.js"),n=require("../../../assets/iframe/clock.svg.js"),m=require("../../../assets/iframe/calendar.svg.js"),d=require("../../../assets/iframe/ticket.svg.js");exports.IframeEventCard=function(e){var o=e.title,v=e.type,u=e.cost,f=e.date,p=e.imageSrc,E=e.colour,N=e.goToDetails,g=e.description,_=e.isListView,C=void 0!==_&&_,b=e.className,x=e.shortDate,w=e.titleId,T=e.descriptionId,q=e.imageClassName,y=e.showMoreInfo,j=c.useIntl().formatNumber,I=a.useTranslation("Design").t;return t.createElement(r.Card,{style:{"--card-colour":E},className:i("iframe-event-card",{"list-view":C},b),onClick:N?function(){N&&N()}:void 0},y&&t.createElement("div",{className:"iframe-event-card__info-icon"},"i"),p&&t.createElement(r.Card.Img,{className:null!=q?q:"card-image",variant:"top",as:"div",style:{backgroundImage:'url("'.concat(p,'")')}}),t.createElement(r.Card.Body,{className:i("d-flex","flex-column",!p&&"no-image")},t.createElement(r.Card.Title,{className:"iframe-event-card__title",id:w},o),t.createElement("div",{className:"flex-grow-1 iframe-event-card__description"},t.createElement(r.Card.Text,{as:"div"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(m.ReactComponent,null)),t.createElement("p",{className:"iframe-event-card__bold m-0 list-view-hided"},f),t.createElement("p",{className:"iframe-event-card__bold m-0 grid-view-hided"},x))),v&&t.createElement(r.Card.Text,{as:"div",className:"list-view-hided"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(n.ReactComponent,null)),t.createElement("p",{className:"iframe-event-card__bold m-0"},v))),"number"==typeof u&&t.createElement(r.Card.Text,{as:"div"},t.createElement("div",{className:"d-flex align-items-center mb-3"},t.createElement("div",{className:"icon-wrapper"},t.createElement(d.ReactComponent,null)),t.createElement("p",{className:"iframe-event-card__bold m-0"},I("from")," ",j(u,{style:"currency",currency:"GBP"})))),g&&t.createElement(r.Card.Text,{as:"div",className:"list-view-hided"},t.createElement(s.TipTapEditor,{viewMode:!0,disabled:!0,content:l.formatContent(g,150),id:T})))))};
@@ -1 +1 @@
1
- {"version":3,"file":"LeftBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5E,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C;IACE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,cAAc,CAAC,cAAc,CAAC,CACnC,CAAC;AAEF,eAAO,MAAM,SAAS,+EAOnB,cAAc,gBA6BhB,CAAC"}
1
+ {"version":3,"file":"LeftBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5E,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C;IACE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,cAAc,CAAC,cAAc,CAAC,CACnC,CAAC;AAEF,eAAO,MAAM,SAAS,+EAOnB,cAAc,gBA+BhB,CAAC"}
@@ -1 +1 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),l=e(require("react")),a=e(require("clsx")),s=require("@licklist/plugins/dist/context/page/PageContext"),r=require("../../constants.js"),i=require("../../hooks/useResizePageBody.js");exports.LeftBlock=function(e){var n=e.pageTitle,c=e.children,o=e.className,u=e.component,d=e.childrenClassName,m=t.__rest(e,["pageTitle","children","className","component","childrenClassName"]),f=i.useResizePageBody(),g=f.leftBlockStyles,p=f.leftBlockContainerSizes;return l.createElement("div",t.__assign({className:a("left-block",o)},m),l.createElement("div",{className:"navigation"},n&&l.createElement(l.Fragment,null,"string"==typeof n?l.createElement("div",{className:"title"},n):n),u),l.createElement("div",{className:a("left-block-container",d),style:g,id:r.PAGE_LEFT_BLOCK_CONTAINER_ID},l.createElement(s.PageContextProvider,{leftBlockContainerSizes:p},c)))};
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),l=e(require("react")),a=e(require("clsx")),i=require("@licklist/plugins/dist/context/page/PageContext"),s=require("../../constants.js"),n=require("../../hooks/useResizePageBody.js");exports.LeftBlock=function(e){var r=e.pageTitle,c=e.children,o=e.className,u=e.component,d=e.childrenClassName,m=t.__rest(e,["pageTitle","children","className","component","childrenClassName"]),f=n.useResizePageBody(),g=f.leftBlockStyles,p=f.leftBlockContainerSizes;return l.createElement("div",t.__assign({className:a("left-block",o)},m),l.createElement("div",{className:"navigation"},r&&l.createElement(l.Fragment,null,"string"==typeof r?l.createElement("div",{className:"title",id:"navigation-title"},r):r),u),l.createElement("div",{className:a("left-block-container",d),style:g,id:s.PAGE_LEFT_BLOCK_CONTAINER_ID},l.createElement(i.PageContextProvider,{leftBlockContainerSizes:p},c)))};
@@ -1,4 +1,5 @@
1
1
  @import "../snippet-templates/snippetVariables";
2
+ @import "../themes//bookedit/variables";
2
3
 
3
4
  .iframe-event-card {
4
5
  position: relative;
@@ -26,6 +27,18 @@
26
27
  padding: 0.5rem 0 0.875rem;
27
28
  }
28
29
 
30
+ &__info-icon {
31
+ position: absolute;
32
+ right: 1rem;
33
+ top: 1rem;
34
+ background-color: "#ffffff";
35
+ border-radius: 1.5rem;
36
+ padding: 0 0.5rem;
37
+ font-size: 0.75rem;
38
+ font-weight: $white;
39
+ border: 1px solid $black;
40
+ }
41
+
29
42
  &__title {
30
43
  transition: $color-transition;
31
44
  color: $snippet-elements-body-color;
@@ -33,7 +46,7 @@
33
46
  line-height: 1.25rem;
34
47
  cursor: pointer;
35
48
  margin-bottom: 0.5rem;
36
- font-size: 1.125rem;
49
+ font-size: 0.95rem;
37
50
  }
38
51
 
39
52
  &__label {
@@ -82,7 +95,8 @@
82
95
  color: $snippet-elements-button-color;
83
96
  border: none;
84
97
  background-color: $snippet-elements-button-background-color;
85
- box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
98
+ box-shadow: 0 0 0 $input-btn-focus-width
99
+ $snippet-elements-button-background-color;
86
100
  }
87
101
 
88
102
  &:disabled {
@@ -95,14 +109,14 @@
95
109
  &:focus,
96
110
  &.focus {
97
111
  &:not(:disabled) {
98
- opacity: .7;
112
+ opacity: 0.7;
99
113
  }
100
114
  }
101
115
 
102
116
  &:active,
103
117
  &.active {
104
118
  &:not(:disabled) {
105
- opacity: .8;
119
+ opacity: 0.8;
106
120
  }
107
121
  }
108
122
  }
@@ -123,7 +137,7 @@
123
137
  }
124
138
 
125
139
  .card-text {
126
- font-size: 0.875rem;
140
+ font-size: 0.82rem;
127
141
  }
128
142
 
129
143
  &.event-info {
@@ -202,7 +216,6 @@
202
216
 
203
217
  @media (max-width: 576px) {
204
218
  &.list-view {
205
-
206
219
  .card-image {
207
220
  margin-right: 0.5rem;
208
221
  }
@@ -21,6 +21,7 @@
21
21
 
22
22
  @include media-breakpoint-down(sm) {
23
23
  height: 100svh;
24
+ min-width: auto;
24
25
  }
25
26
 
26
27
  .header-block {
@@ -29,15 +29,16 @@
29
29
  .navigation {
30
30
  font-size: 1.125rem;
31
31
  font-weight: 500;
32
- margin-bottom: 1.25rem;
32
+ padding-bottom: 2.625rem;
33
33
  display: flex;
34
34
  align-items: flex-start;
35
35
  justify-content: space-between;
36
+ margin-top: 0.125rem;
36
37
 
37
38
  .title {
39
+ position: absolute;
38
40
  color: $snippet-elements-body-color;
39
41
  margin: 0;
40
- margin-top: 0.125rem;
41
42
  }
42
43
 
43
44
  @include media-breakpoint-down(sm) {
@@ -64,7 +65,7 @@
64
65
  overflow-x: hidden;
65
66
  scrollbar-width: thin;
66
67
  .iframe-event-card {
67
- border-bottom: 2px solid $separator-color;
68
+ border-bottom: 1px solid $separator-color;
68
69
  }
69
70
 
70
71
  @include media-breakpoint-down(sm) {
@@ -115,7 +116,7 @@
115
116
  }
116
117
 
117
118
  .collapse {
118
- max-height: calc(100vh - 19rem);
119
+ max-height: calc(100vh - 15rem);
119
120
  transition: none 0s ease 0s;
120
121
 
121
122
  &.show {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.58.3-dev.0",
3
+ "version": "0.58.3-dev.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -16,6 +16,7 @@ export function Default() {
16
16
  return (
17
17
  <div>
18
18
  <IframeEventCard
19
+ showMoreInfo
19
20
  imageSrc={
20
21
  showImage
21
22
  ? // eslint-disable-next-line max-len
@@ -29,6 +29,7 @@ interface IframeEventCardProps {
29
29
  titleId?: string;
30
30
  descriptionId?: string;
31
31
  imageClassName?: string;
32
+ showMoreInfo?: boolean;
32
33
  }
33
34
 
34
35
  export function IframeEventCard({
@@ -46,6 +47,7 @@ export function IframeEventCard({
46
47
  titleId,
47
48
  descriptionId,
48
49
  imageClassName,
50
+ showMoreInfo,
49
51
  }: IframeEventCardProps) {
50
52
  const { formatNumber } = useIntl();
51
53
  const { t } = useTranslation("Design");
@@ -70,6 +72,7 @@ export function IframeEventCard({
70
72
  )}
71
73
  onClick={goToDetails ? onClick : undefined}
72
74
  >
75
+ {showMoreInfo && <div className="iframe-event-card__info-icon">i</div>}
73
76
  {imageSrc && (
74
77
  <Card.Img
75
78
  className={imageClassName ?? "card-image"}
@@ -28,7 +28,9 @@ export const LeftBlock = ({
28
28
  {pageTitle && (
29
29
  <>
30
30
  {typeof pageTitle === "string" ? (
31
- <div className="title">{pageTitle}</div>
31
+ <div className="title" id="navigation-title">
32
+ {pageTitle}
33
+ </div>
32
34
  ) : (
33
35
  pageTitle
34
36
  )}
@@ -1,4 +1,5 @@
1
1
  @import "../snippet-templates/snippetVariables";
2
+ @import "../themes//bookedit/variables";
2
3
 
3
4
  .iframe-event-card {
4
5
  position: relative;
@@ -26,6 +27,18 @@
26
27
  padding: 0.5rem 0 0.875rem;
27
28
  }
28
29
 
30
+ &__info-icon {
31
+ position: absolute;
32
+ right: 1rem;
33
+ top: 1rem;
34
+ background-color: "#ffffff";
35
+ border-radius: 1.5rem;
36
+ padding: 0 0.5rem;
37
+ font-size: 0.75rem;
38
+ font-weight: $white;
39
+ border: 1px solid $black;
40
+ }
41
+
29
42
  &__title {
30
43
  transition: $color-transition;
31
44
  color: $snippet-elements-body-color;
@@ -33,7 +46,7 @@
33
46
  line-height: 1.25rem;
34
47
  cursor: pointer;
35
48
  margin-bottom: 0.5rem;
36
- font-size: 1.125rem;
49
+ font-size: 0.95rem;
37
50
  }
38
51
 
39
52
  &__label {
@@ -82,7 +95,8 @@
82
95
  color: $snippet-elements-button-color;
83
96
  border: none;
84
97
  background-color: $snippet-elements-button-background-color;
85
- box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
98
+ box-shadow: 0 0 0 $input-btn-focus-width
99
+ $snippet-elements-button-background-color;
86
100
  }
87
101
 
88
102
  &:disabled {
@@ -95,14 +109,14 @@
95
109
  &:focus,
96
110
  &.focus {
97
111
  &:not(:disabled) {
98
- opacity: .7;
112
+ opacity: 0.7;
99
113
  }
100
114
  }
101
115
 
102
116
  &:active,
103
117
  &.active {
104
118
  &:not(:disabled) {
105
- opacity: .8;
119
+ opacity: 0.8;
106
120
  }
107
121
  }
108
122
  }
@@ -123,7 +137,7 @@
123
137
  }
124
138
 
125
139
  .card-text {
126
- font-size: 0.875rem;
140
+ font-size: 0.82rem;
127
141
  }
128
142
 
129
143
  &.event-info {
@@ -202,7 +216,6 @@
202
216
 
203
217
  @media (max-width: 576px) {
204
218
  &.list-view {
205
-
206
219
  .card-image {
207
220
  margin-right: 0.5rem;
208
221
  }
@@ -21,6 +21,7 @@
21
21
 
22
22
  @include media-breakpoint-down(sm) {
23
23
  height: 100svh;
24
+ min-width: auto;
24
25
  }
25
26
 
26
27
  .header-block {
@@ -29,15 +29,16 @@
29
29
  .navigation {
30
30
  font-size: 1.125rem;
31
31
  font-weight: 500;
32
- margin-bottom: 1.25rem;
32
+ padding-bottom: 2.625rem;
33
33
  display: flex;
34
34
  align-items: flex-start;
35
35
  justify-content: space-between;
36
+ margin-top: 0.125rem;
36
37
 
37
38
  .title {
39
+ position: absolute;
38
40
  color: $snippet-elements-body-color;
39
41
  margin: 0;
40
- margin-top: 0.125rem;
41
42
  }
42
43
 
43
44
  @include media-breakpoint-down(sm) {
@@ -64,7 +65,7 @@
64
65
  overflow-x: hidden;
65
66
  scrollbar-width: thin;
66
67
  .iframe-event-card {
67
- border-bottom: 2px solid $separator-color;
68
+ border-bottom: 1px solid $separator-color;
68
69
  }
69
70
 
70
71
  @include media-breakpoint-down(sm) {
@@ -115,7 +116,7 @@
115
116
  }
116
117
 
117
118
  .collapse {
118
- max-height: calc(100vh - 19rem);
119
+ max-height: calc(100vh - 15rem);
119
120
  transition: none 0s ease 0s;
120
121
 
121
122
  &.show {