@licklist/design 0.44.485-dev.87 → 0.44.485-dev.89

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.
Files changed (132) hide show
  1. package/dist/date-time-button/DateTimeButton.d.ts +12 -0
  2. package/dist/date-time-button/DateTimeButton.d.ts.map +1 -0
  3. package/dist/date-time-button/DateTimeButton.js +1 -0
  4. package/dist/date-time-button/index.d.ts +2 -0
  5. package/dist/date-time-button/index.d.ts.map +1 -0
  6. package/dist/iframe/activity-cards/activity-card/ActivityCard.d.ts +12 -0
  7. package/dist/iframe/activity-cards/activity-card/ActivityCard.d.ts.map +1 -0
  8. package/dist/iframe/activity-cards/activity-card/ActivityCard.js +1 -0
  9. package/dist/iframe/activity-cards/index.d.ts +3 -0
  10. package/dist/iframe/activity-cards/index.d.ts.map +1 -0
  11. package/dist/iframe/activity-cards/list-activity-card/ListActivityCard.d.ts +12 -0
  12. package/dist/iframe/activity-cards/list-activity-card/ListActivityCard.d.ts.map +1 -0
  13. package/dist/iframe/activity-cards/list-activity-card/ListActivityCard.js +1 -0
  14. package/dist/iframe/index.d.ts +2 -3
  15. package/dist/iframe/index.d.ts.map +1 -1
  16. package/dist/iframe/order-process/components/CategoryProduct/CategoryProduct.js +1 -1
  17. package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts +2 -2
  18. package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts.map +1 -1
  19. package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.js +1 -1
  20. package/dist/iframe/order-process/components/NavigationSteps/NavigationSteps.d.ts +7 -6
  21. package/dist/iframe/order-process/components/NavigationSteps/NavigationSteps.d.ts.map +1 -1
  22. package/dist/iframe/order-process/components/NavigationSteps/index.d.ts +1 -1
  23. package/dist/iframe/order-process/components/NavigationSteps/index.d.ts.map +1 -1
  24. package/dist/iframe/order-process/index.d.ts +1 -2
  25. package/dist/iframe/order-process/index.d.ts.map +1 -1
  26. package/dist/iframe/page/components/PageBody/PageBody.d.ts +1 -1
  27. package/dist/iframe/page/components/PageBody/PageBody.js +1 -1
  28. package/dist/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.d.ts +2 -2
  29. package/dist/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.d.ts.map +1 -1
  30. package/dist/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.js +1 -1
  31. package/dist/iframe/payment/payment-page/PaymentPage.js +1 -1
  32. package/dist/iframe/payment/payment-page/PaymentTimer.js +1 -1
  33. package/dist/iframe/payment/payment-status-page/PaymentStatusPage.js +1 -1
  34. package/dist/index.d.ts +1 -0
  35. package/dist/index.d.ts.map +1 -1
  36. package/dist/index.js +1 -1
  37. package/dist/snippet/snippet-template/preview/Preview.js +1 -1
  38. package/dist/styles/iframe-customers-journey/ActivitiesCard.scss +17 -35
  39. package/dist/styles/iframe-customers-journey/ActivitiesSelectedCard.scss +48 -43
  40. package/dist/styles/iframe-customers-journey/DateTimeButton.scss +84 -0
  41. package/dist/styles/iframe-customers-journey/_index.scss +1 -1
  42. package/dist/styles/iframe-order-process/IframeOrderProcess.scss +5 -0
  43. package/dist/types/iframe.d.ts +1 -1
  44. package/dist/types/iframe.d.ts.map +1 -1
  45. package/dist/zone/form/components/ZoneRecurrencesControl.js +1 -1
  46. package/package.json +1 -1
  47. package/src/date-time-button/DateTimeButton.stories.tsx +68 -0
  48. package/src/date-time-button/DateTimeButton.tsx +106 -0
  49. package/src/date-time-button/index.ts +1 -0
  50. package/src/iframe/activity-cards/activity-card/ActivityCard.stories.tsx +52 -0
  51. package/src/iframe/activity-cards/activity-card/ActivityCard.tsx +38 -0
  52. package/src/iframe/activity-cards/index.ts +2 -0
  53. package/src/iframe/activity-cards/list-activity-card/ListActivityCard.stories.tsx +52 -0
  54. package/src/iframe/activity-cards/list-activity-card/ListActivityCard.tsx +49 -0
  55. package/src/iframe/index.ts +2 -7
  56. package/src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx +1 -1
  57. package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx +4 -4
  58. package/src/iframe/order-process/components/NavigationSteps/NavigationSteps.tsx +8 -6
  59. package/src/iframe/order-process/components/NavigationSteps/index.ts +1 -1
  60. package/src/iframe/order-process/index.ts +1 -2
  61. package/src/iframe/page/components/PageBody/PageBody.tsx +1 -1
  62. package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx +4 -4
  63. package/src/index.ts +1 -0
  64. package/src/product-set/product/constants.ts +1 -1
  65. package/src/sortable-fields/index.ts +1 -1
  66. package/src/styles/iframe-customers-journey/ActivitiesCard.scss +17 -35
  67. package/src/styles/iframe-customers-journey/ActivitiesSelectedCard.scss +48 -43
  68. package/src/styles/iframe-customers-journey/DateTimeButton.scss +84 -0
  69. package/src/styles/iframe-customers-journey/_index.scss +1 -1
  70. package/src/styles/iframe-order-process/IframeOrderProcess.scss +5 -0
  71. package/src/types/iframe.ts +1 -1
  72. package/src/zone/form/components/ZoneRecurrencesControl.tsx +1 -1
  73. package/dist/assets/iframe/dateInfo/available.svg.js +0 -1
  74. package/dist/assets/iframe/dateInfo/limited.svg.js +0 -1
  75. package/dist/assets/iframe/dateInfo/soldOut.svg.js +0 -1
  76. package/dist/iframe/activities-card-page/components/activities-card/ActivitiesCard.d.ts +0 -8
  77. package/dist/iframe/activities-card-page/components/activities-card/ActivitiesCard.d.ts.map +0 -1
  78. package/dist/iframe/activities-card-page/components/activities-card/ActivitiesCard.js +0 -1
  79. package/dist/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.d.ts +0 -9
  80. package/dist/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.d.ts.map +0 -1
  81. package/dist/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.js +0 -1
  82. package/dist/iframe/activities-card-page/index.d.ts +0 -3
  83. package/dist/iframe/activities-card-page/index.d.ts.map +0 -1
  84. package/dist/iframe/data-time-view-selector/DateAndTimeAndCalendar.d.ts +0 -8
  85. package/dist/iframe/data-time-view-selector/DateAndTimeAndCalendar.d.ts.map +0 -1
  86. package/dist/iframe/data-time-view-selector/constants.d.ts +0 -7
  87. package/dist/iframe/data-time-view-selector/constants.d.ts.map +0 -1
  88. package/dist/iframe/data-time-view-selector/constants.js +0 -1
  89. package/dist/iframe/data-time-view-selector/index.d.ts +0 -2
  90. package/dist/iframe/data-time-view-selector/index.d.ts.map +0 -1
  91. package/dist/iframe/order-process/components/Category/Category.d.ts +0 -13
  92. package/dist/iframe/order-process/components/Category/Category.d.ts.map +0 -1
  93. package/dist/iframe/order-process/components/Category/Category.js +0 -1
  94. package/dist/iframe/order-process/components/Category/index.d.ts +0 -2
  95. package/dist/iframe/order-process/components/Category/index.d.ts.map +0 -1
  96. package/dist/iframe/select-date-time/SelectDateAndTimeList.d.ts +0 -3
  97. package/dist/iframe/select-date-time/SelectDateAndTimeList.d.ts.map +0 -1
  98. package/dist/iframe/select-date-time/SelectDateAndTimeList.js +0 -1
  99. package/dist/iframe/select-date-time/SelectDateOrTimeList.d.ts +0 -8
  100. package/dist/iframe/select-date-time/SelectDateOrTimeList.d.ts.map +0 -1
  101. package/dist/iframe/select-date-time/SelectDateOrTimeList.js +0 -1
  102. package/dist/iframe/select-date-time/component/date-container/DateTimeSelector.d.ts +0 -10
  103. package/dist/iframe/select-date-time/component/date-container/DateTimeSelector.d.ts.map +0 -1
  104. package/dist/iframe/select-date-time/component/date-container/DateTimeSelector.js +0 -1
  105. package/dist/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.d.ts +0 -11
  106. package/dist/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.d.ts.map +0 -1
  107. package/dist/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.js +0 -1
  108. package/dist/iframe/select-date-time/constants.d.ts +0 -6
  109. package/dist/iframe/select-date-time/constants.d.ts.map +0 -1
  110. package/dist/iframe/select-date-time/constants.js +0 -1
  111. package/dist/iframe/select-date-time/index.d.ts +0 -4
  112. package/dist/iframe/select-date-time/index.d.ts.map +0 -1
  113. package/dist/styles/iframe-customers-journey/SelectDateAndTime.scss +0 -126
  114. package/src/iframe/activities-card-page/components/activities-card/ActivitiesCard.tsx +0 -68
  115. package/src/iframe/activities-card-page/components/activities-card/ActivitiesCardList.stories.tsx +0 -120
  116. package/src/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.stories.tsx +0 -67
  117. package/src/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.tsx +0 -57
  118. package/src/iframe/activities-card-page/index.ts +0 -2
  119. package/src/iframe/data-time-view-selector/DateAndTimeAndCalendar.tsx +0 -37
  120. package/src/iframe/data-time-view-selector/constants.ts +0 -6
  121. package/src/iframe/data-time-view-selector/index.ts +0 -1
  122. package/src/iframe/order-process/components/Category/Category.stories.tsx +0 -118
  123. package/src/iframe/order-process/components/Category/Category.tsx +0 -51
  124. package/src/iframe/order-process/components/Category/index.ts +0 -1
  125. package/src/iframe/select-date-time/SelectDateAndTimeList.tsx +0 -39
  126. package/src/iframe/select-date-time/SelectDateOrTimeList.tsx +0 -42
  127. package/src/iframe/select-date-time/component/date-container/DateTimeSelector.tsx +0 -79
  128. package/src/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.stories.tsx +0 -164
  129. package/src/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.tsx +0 -41
  130. package/src/iframe/select-date-time/constants.ts +0 -5
  131. package/src/iframe/select-date-time/index.ts +0 -4
  132. package/src/styles/iframe-customers-journey/SelectDateAndTime.scss +0 -126
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const SelectDateAndTimeList: () => JSX.Element;
3
- //# sourceMappingURL=SelectDateAndTimeList.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectDateAndTimeList.d.ts","sourceRoot":"","sources":["../../../src/iframe/select-date-time/SelectDateAndTimeList.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,qBAAqB,mBAiCjC,CAAC"}
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),i=require("../../assets/iframe/calendar.svg.js"),l=require("./component/date-container/SelectorDateAndTimeList.js");exports.SelectDateAndTimeList=function(){var e=t.__read(a.useState(),2),c=e[0],s=e[1],d=t.__read(a.useState(),2),o=d[0],m=d[1],u=n.useTranslation(["Design"]).t;return r.createElement("div",null,r.createElement("div",{className:"date-time-icon-container"},r.createElement("div",{className:"icon-wrapper"},r.createElement(i.ReactComponent,{className:"icon"})),r.createElement("h5",null,u("selectDate"))),r.createElement("div",null,r.createElement(l.SelectorDateAndTimeList,{title:u("selectDateAndTime"),dateList:[],selectedDateId:c,onSelectDate:s})),r.createElement("div",null,r.createElement(l.SelectorDateAndTimeList,{title:u("selectYourTime"),isTimeContainer:!0,dateList:[],selectedDateId:o,onSelectDate:m})))};
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- import { viewType } from "../data-time-view-selector/constants";
3
- type SelectDateOrTimeListProps = {
4
- view: viewType.DATE | viewType.TIME;
5
- };
6
- export declare const SelectDateOrTimeList: ({ view }: SelectDateOrTimeListProps) => JSX.Element;
7
- export {};
8
- //# sourceMappingURL=SelectDateOrTimeList.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectDateOrTimeList.d.ts","sourceRoot":"","sources":["../../../src/iframe/select-date-time/SelectDateOrTimeList.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAGhE,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,aAAc,yBAAyB,gBA+BvE,CAAC"}
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-i18next"),n=require("../../assets/iframe/calendar.svg.js"),s=require("./component/date-container/SelectorDateAndTimeList.js"),c=require("../data-time-view-selector/constants.js");exports.SelectDateOrTimeList=function(e){var l=e.view,o=t.__read(a.useState(),2),m=o[0],d=o[1],u=i.useTranslation("Design").t,v=l===c.viewType.TIME,p=u(v?"selectorTime":"selectDate"),T=[];return r.createElement("div",null,!v&&r.createElement("div",{className:"date-time-icon-container"},r.createElement("div",{className:"icon-wrapper"},r.createElement(n.ReactComponent,{className:"icon"})),r.createElement("h5",null,u("selectDate"))),r.createElement("div",null,r.createElement(s.SelectorDateAndTimeList,{title:p,dateList:T,isTimeContainer:v,selectedDateId:m,onSelectDate:d,isOnlyTimeContainer:v})))};
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- export type DateAndTimeProps = {
3
- date: any;
4
- selected: boolean;
5
- onSelectDate?: (id: number) => void;
6
- isTimeContainer?: boolean;
7
- isOnlyTimeContainer?: boolean;
8
- };
9
- export declare const DateTimeSelector: ({ date, isTimeContainer, selected, onSelectDate, isOnlyTimeContainer, }: DateAndTimeProps) => JSX.Element;
10
- //# sourceMappingURL=DateTimeSelector.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DateTimeSelector.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/select-date-time/component/date-container/DateTimeSelector.tsx"],"names":[],"mappings":";AAQA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,4EAM1B,gBAAgB,gBAwDlB,CAAC"}
@@ -1 +0,0 @@
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("react"),o=e(t),n=require("../../../../logo/Logo.js"),l=e(require("clsx")),i=require("../../../../assets/iframe/dateInfo/limited.svg.js"),a=require("../../../../assets/iframe/dateInfo/available.svg.js"),s=require("../../../../assets/iframe/dateInfo/soldOut.svg.js"),r=require("../../constants.js");exports.DateTimeSelector=function(e){var c=e.date,d=e.isTimeContainer,u=e.selected,m=e.onSelectDate,f=e.isOnlyTimeContainer,v=c.title,g=c.disabled,p=c.info,E=c.description,b=c.id,y=c.time,L=function(){g||m(b)},T=t.useMemo((function(){return(null==p?void 0:p.logo)===r.infoLogoType.LIMIT?o.createElement(i.ReactComponent,null):(null==p?void 0:p.logo)===r.infoLogoType.AVAILABLE?o.createElement(a.ReactComponent,null):(null==p?void 0:p.logo)===r.infoLogoType.SOLD_OUT?o.createElement(s.ReactComponent,null):null}),[p]);return o.createElement("div",{role:"button",onClick:L,onKeyPress:L,className:l("date-set",g&&"disabled",u&&"selected",d&&"time-container",f&&"only-time-container"),tabIndex:0},v,y&&o.createElement("div",{className:"time"},y),E&&o.createElement("div",{className:l("descriptions",u&&"selected",g&&"disabled")},E),p&&o.createElement("div",{className:"info"},p.logo&&o.createElement(n.default,{className:"logo",logo:T}),o.createElement("div",null,p.description)))};
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- export type SelectorDateAndTimeListProps = {
3
- selectedDateId?: number;
4
- onSelectDate?: (id: number) => void;
5
- dateList: any[];
6
- title?: string;
7
- isTimeContainer?: boolean;
8
- isOnlyTimeContainer?: boolean;
9
- };
10
- export declare const SelectorDateAndTimeList: ({ selectedDateId, onSelectDate, dateList, title, isTimeContainer, isOnlyTimeContainer, }: SelectorDateAndTimeListProps) => JSX.Element;
11
- //# sourceMappingURL=SelectorDateAndTimeList.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectorDateAndTimeList.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.tsx"],"names":[],"mappings":";AAIA,MAAM,MAAM,4BAA4B,GAAG;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,uBAAuB,6FAOjC,4BAA4B,gBAoB9B,CAAC"}
@@ -1 +0,0 @@
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")),i=e(require("clsx")),n=require("./DateTimeSelector.js");exports.SelectorDateAndTimeList=function(e){var r=e.selectedDateId,a=e.onSelectDate,l=e.dateList,c=e.title,o=e.isTimeContainer,s=e.isOnlyTimeContainer;return t.createElement(t.Fragment,null,t.createElement("h5",null,c),t.createElement("div",{className:i("date-list",o&&"time-container")},l.map((function(e){return t.createElement(n.DateTimeSelector,{key:e.id,date:e,isTimeContainer:o,selected:r===e.id,onSelectDate:a,isOnlyTimeContainer:s})}))))};
@@ -1,6 +0,0 @@
1
- export declare enum infoLogoType {
2
- LIMIT = "limit",
3
- AVAILABLE = "available",
4
- SOLD_OUT = "soldOut"
5
- }
6
- //# sourceMappingURL=constants.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/iframe/select-date-time/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY;IACpB,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,QAAQ,YAAY;CACrB"}
@@ -1 +0,0 @@
1
- "use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),(e=exports.infoLogoType||(exports.infoLogoType={})).LIMIT="limit",e.AVAILABLE="available",e.SOLD_OUT="soldOut";
@@ -1,4 +0,0 @@
1
- export { DateTimeSelector } from "./component/date-container/DateTimeSelector";
2
- export { SelectDateAndTimeList } from "./SelectDateAndTimeList";
3
- export { SelectDateOrTimeList } from "./SelectDateOrTimeList";
4
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/iframe/select-date-time/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
@@ -1,126 +0,0 @@
1
- .date-time-selector-container {
2
- background-color: $snippet-page-background-color;
3
- height: 35rem;
4
- padding: 1rem;
5
- }
6
-
7
- .date-time-icon-container {
8
- display: flex;
9
- justify-content: end;
10
- position: relative;
11
- top: 2rem;
12
-
13
- .icon-wrapper {
14
- display: flex;
15
- flex-direction: row;
16
- align-items: center;
17
- width: 1rem;
18
- height: 1.1rem;
19
-
20
- .icon {
21
- fill: $snippet-calendar-active-button-background-color;
22
- }
23
-
24
- }
25
-
26
- h5 {
27
- font-size: 1rem;
28
- margin-left: .5rem;
29
- text-transform: uppercase;
30
- }
31
- }
32
-
33
- .date-list {
34
- display: flex;
35
- align-items: center;
36
- justify-content: start;
37
- grid-gap: 1rem;
38
- margin: 1rem 0;
39
- flex-wrap: wrap;
40
-
41
- .date-set {
42
- display: flex;
43
- align-items: center;
44
- justify-content: center;
45
- flex-direction: column;
46
- font-size: .82rem;
47
- line-height: 1.3rem;
48
- font-weight: 600;
49
- background-color: $snippet-calendar-button-background-color;
50
- border-radius: .4rem;
51
- text-align: center;
52
- border: 2px solid $snippet-calendar-button-border-color;
53
- color: $snippet-calendar-button-font-color;
54
- flex-grow: 1;
55
- transition: $color-transition;
56
- min-width: 6rem;
57
- max-width: 7.25rem;
58
- min-height: 3.3rem;
59
- max-height: 8.375rem;
60
-
61
-
62
- &.disabled {
63
- border: 2px solid $snippet-calendar-disabled-button-border-color;
64
- background-color: $snippet-calendar-disabled-button-background-color;
65
- color: $snippet-calendar-disabled-button-font-color;
66
-
67
- .descriptions {
68
- color: $snippet-calendar-disabled-button-font-color;
69
- }
70
- }
71
-
72
- &.selected {
73
- border: 2px solid $snippet-calendar-active-button-border-color;
74
- background-color: $snippet-calendar-active-button-background-color;
75
- color: $snippet-calendar-active-button-font-color;
76
- transition: $color-transition;
77
-
78
- .descriptions {
79
- color: $snippet-calendar-active-button-font-color;
80
- background-color: $snippet-calendar-active-button-background-color;
81
- font-weight: 600;
82
- transition: $color-transition;
83
- }
84
-
85
- .time {
86
- font-weight: 600;
87
- }
88
- }
89
-
90
- &.time-container {
91
- min-width: 4.75rem;
92
- max-width: 4.75rem;
93
- min-height: 2.75rem;
94
- }
95
-
96
- &.only-time-container {
97
- min-width: 5.3rem;
98
- max-width: 5.3rem;
99
- min-height: 2.75rem;
100
- }
101
- }
102
-
103
- .time {
104
- font-size: .875rem;
105
- font-weight: 300;
106
- }
107
-
108
- .descriptions {
109
- font-size: .7rem;
110
- line-height: 1.03rem;
111
- font-weight: 300;
112
- color: $snippet-calendar-button-font-color;
113
- }
114
-
115
- .info {
116
- display: flex;
117
- justify-content: center;
118
- font-weight: 300;
119
- flex-direction: row;
120
-
121
- .logo {
122
- width: .5rem;
123
- margin-right: .5rem;
124
- }
125
- }
126
- }
@@ -1,68 +0,0 @@
1
- import React from "react";
2
- import clsx from "clsx";
3
- import { useTranslation } from "react-i18next";
4
- import { useIntl } from "react-intl";
5
-
6
- export interface ActivitiesCardProps {
7
- card: any;
8
- onSelectCardId?: (productSetId: number) => void;
9
- isActive: boolean;
10
- }
11
-
12
- export const ActivitiesCard = ({
13
- card,
14
- onSelectCardId,
15
- isActive,
16
- }: ActivitiesCardProps) => {
17
- const { formatNumber } = useIntl();
18
- const { t } = useTranslation("Design");
19
- const { imageSrc, title, time, cost } = card;
20
-
21
- const onClick = () => {
22
- onSelectCardId(card);
23
- };
24
-
25
- return (
26
- <div
27
- id={card.id}
28
- role="button"
29
- className={clsx("iframe-activities-card", isActive && "active")}
30
- onClick={onClick}
31
- onKeyPress={onClick}
32
- tabIndex={0}
33
- >
34
- {imageSrc && (
35
- <div
36
- className="card-image"
37
- style={{
38
- backgroundImage: `url("${imageSrc}")`,
39
- }}
40
- />
41
- )}
42
- <div className={clsx("d-flex", "flex-column", !imageSrc && "no-image")}>
43
- <div className="title">{title}</div>
44
-
45
- {time && (
46
- <div className="cost">
47
- <div className="d-flex align-items-center">
48
- <p className="m-0">
49
- {time} {t("Mins")}
50
- </p>
51
- </div>
52
- </div>
53
- )}
54
-
55
- {typeof cost === "number" && cost && (
56
- <div className="label">
57
- <div className="d-flex align-items-center mb-3">
58
- <p className="m-0">
59
- {t("from")}{" "}
60
- {formatNumber(cost, { style: "currency", currency: "GBP" })}
61
- </p>
62
- </div>
63
- </div>
64
- )}
65
- </div>
66
- </div>
67
- );
68
- };
@@ -1,120 +0,0 @@
1
- import React, { useState } from "react";
2
- import { useTranslation } from "react-i18next";
3
- import { Meta } from "@storybook/react";
4
- import { ActivitiesCard } from "./ActivitiesCard";
5
-
6
-
7
- export default {
8
- title: "Iframe/Activities Card/ActivitiesCardList",
9
- component: Default,
10
- } as Meta;
11
-
12
- const currentCard = [
13
- {
14
- id: 1,
15
- imageSrc:
16
- "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
17
- goToDetails: true,
18
- title: "TEST CARD",
19
- time: "45",
20
- cost: 200,
21
- },
22
- {
23
- id: 3,
24
- imageSrc:
25
- "https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=873&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 873w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1173&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1173w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1473&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1473w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1746&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1746w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1773&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1773w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2073w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2346&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2346w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2373&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2373w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2673&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2673w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2946&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2946w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2973&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2973w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=3008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3008w",
26
- goToDetails: true,
27
- title: "Clay Pigeons & Axe NEW CARD",
28
- time: "45",
29
- cost: 200,
30
- },
31
- {
32
- id: 2,
33
- imageSrc:
34
- "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
35
- goToDetails: false,
36
- title: "TEST CARD",
37
- time: "45",
38
- cost: 200,
39
- },
40
- {
41
- id: 4,
42
- imageSrc:
43
- "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
44
- goToDetails: true,
45
- title: "Clay Pigeons & Axe NEW CARD",
46
- time: "45",
47
- cost: 200,
48
- },
49
- {
50
- id: 5,
51
- imageSrc:
52
- "https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 435w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 735w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 870w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1035&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1035w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1335&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1335w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1470w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1635w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1935w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2070w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2235w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2535w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2670w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2835w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3135&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3135w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3270w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3435w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3735&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3735w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3870w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4035&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4035w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4335&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4335w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4470w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4635w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4935w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5070w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5235w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5535w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5670w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5835w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=6135&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 6135w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=6240&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 6240w",
53
- goToDetails: true,
54
- title: "Clay Pigeons & Axe NEW CARD",
55
- time: "45",
56
- cost: 200,
57
- },
58
- {
59
- id: 6,
60
- imageSrc:
61
- "https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 774w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1074w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1374w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1548&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1548w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1674w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1974w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2148&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2148w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2274&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2274w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2574w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2748&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2748w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2874w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3174&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3174w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3348w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3474w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3774w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3948&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3948w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4074w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4374w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4548&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4548w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4674w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4974w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5148&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5148w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5274&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5274w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5574w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5748&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5748w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5874w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=6000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 6000w",
62
- goToDetails: true,
63
- title: "Clay Pigeons & Axe NEW CARD",
64
- time: "45",
65
- cost: 200,
66
- },
67
- {
68
- id: 9,
69
- imageSrc:
70
- "https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=873&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 873w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1173&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1173w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1473&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1473w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1746&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1746w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1773&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1773w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2073w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2346&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2346w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2373&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2373w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2673&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2673w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2946&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2946w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2973&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2973w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=3008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3008w",
71
- goToDetails: true,
72
- title: "Clay Pigeons & Axe NEW CARD",
73
- time: "45",
74
- cost: 200,
75
- },
76
- ];
77
-
78
-
79
- export function Default(props) {
80
-
81
- const { t } = useTranslation("Design");
82
-
83
- const [selectedCard, onSelectCardId] = useState<any | null>(null);
84
-
85
- const onSelectCard = (item: number) => {
86
- onSelectCardId(item);
87
- };
88
-
89
- return (
90
- <div>
91
- <h5 className="d-flex align-items-center justify-content-start w-100">
92
- {t("selectActivities")}
93
- </h5>
94
- <div
95
- style={{
96
- display: "grid",
97
- gridTemplateColumns: "repeat(auto-fill, 15rem)",
98
- gridGap: "1rem",
99
- justifyContent: "center",
100
- padding: "1rem",
101
- }}
102
- >
103
- {currentCard.map((card) => (
104
- <ActivitiesCard
105
- key={card.id}
106
- card={card}
107
- isActive={selectedCard?.id === card.id}
108
- onSelectCardId={onSelectCard}
109
- />
110
- ))}
111
- </div>
112
- </div>
113
- );
114
- }
115
-
116
- Default.args = {
117
- isLoading: false,
118
- data: currentCard,
119
- showBottomBlock: true,
120
- };
@@ -1,67 +0,0 @@
1
- import React from "react";
2
- import { Meta, Story } from "@storybook/react";
3
- import { ActivitiesSelectedCard } from "./ActivitiesSelectedCard";
4
-
5
- export default {
6
- title: "Iframe/Activities Selected Card/ActivitiesSelectedCard",
7
- component: ActivitiesSelectedCard,
8
- } as Meta;
9
-
10
- export type ActiveCard = {
11
- id: number;
12
- imageSrc: string;
13
- goToDetails: boolean;
14
- title: string;
15
- time: number;
16
- cost: number;
17
- };
18
-
19
- export const Default: Story<any> = () => {
20
- const currentCard = [
21
- {
22
- id: 1,
23
- imageSrc:
24
- "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
25
- title: "TEST CARD",
26
- time: "45",
27
- cost: 200,
28
- },
29
- {
30
- id: 3,
31
- imageSrc:
32
- "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
33
- title: "Clay Pigeons & Axe NEW CARD",
34
- time: "45",
35
- cost: 200,
36
- },
37
- {
38
- id: 2,
39
- imageSrc:
40
- "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
41
- title: "People Item / Title",
42
- time: "45",
43
- cost: 200,
44
- },
45
- ];
46
-
47
- return (
48
- <div
49
- style={{
50
- display: "flex",
51
- flexWrap: "wrap",
52
- flexDirection: "column",
53
- padding: "0 1rem",
54
- }}
55
- >
56
- {currentCard.map((card) => (
57
- <ActivitiesSelectedCard
58
- key={card.id}
59
- imageSrc={card.imageSrc}
60
- title={card.title}
61
- cost={card.cost}
62
- time={card.time}
63
- />
64
- ))}
65
- </div>
66
- );
67
- };
@@ -1,57 +0,0 @@
1
- import React from "react";
2
- import clsx from "clsx";
3
- import { useTranslation } from "react-i18next";
4
- import { useIntl } from "react-intl";
5
-
6
- export interface ActivitiesSelectedCardProps {
7
- imageSrc: string;
8
- title: string;
9
- time: string;
10
- cost: number;
11
- }
12
-
13
- export const ActivitiesSelectedCard = ({
14
- imageSrc,
15
- title,
16
- time,
17
- cost,
18
- }: ActivitiesSelectedCardProps) => {
19
- const { t } = useTranslation("Design");
20
- const { formatNumber } = useIntl();
21
-
22
- return (
23
- <div>
24
- <div className={clsx("selected-activities-card")}>
25
- <div className="description">
26
- <div className="title">{title}</div>
27
- {time && (
28
- <div>
29
- <p>
30
- {time} {t("Mins")}{" "}
31
- </p>
32
- </div>
33
- )}
34
-
35
- {typeof cost === "number" && cost && (
36
- <div>
37
- <p>
38
- {t("from")}{" "}
39
- {formatNumber(cost, { style: "currency", currency: "GBP" })}
40
- </p>
41
- </div>
42
- )}
43
- </div>
44
-
45
- {imageSrc && (
46
- <div className="image-container">
47
- <div
48
- className="image"
49
- style={{ backgroundImage: `url("${imageSrc}")` }}
50
- />
51
- </div>
52
- )}
53
- </div>
54
- <hr className="selected-activities-card-hr" />
55
- </div>
56
- );
57
- };
@@ -1,2 +0,0 @@
1
- export { ActivitiesSelectedCard } from "./components/activities-selected-card/ActivitiesSelectedCard";
2
- export { ActivitiesCard } from "./components/activities-card/ActivitiesCard";
@@ -1,37 +0,0 @@
1
- import React, { useMemo } from "react";
2
- import { EventCalendar } from "../event";
3
- import { viewType } from "./constants";
4
- import {
5
- SelectDateAndTimeList,
6
- SelectDateOrTimeList,
7
- } from "../select-date-time";
8
-
9
- interface SelectorDateAndTimeForViewProps {
10
- view: viewType;
11
- }
12
-
13
- export const DateAndTimeAndCalendar = ({
14
- view,
15
- }: SelectorDateAndTimeForViewProps) => {
16
- const isLoading = false;
17
-
18
- const correctSelectorPage = useMemo(() => {
19
- const disabledDates = [];
20
- if (view === viewType.CALENDAR) {
21
- return (
22
- <EventCalendar disabledDates={disabledDates} isLoading={isLoading} />
23
- );
24
- }
25
- if (view === viewType.DATE_AND_TIME) {
26
- return <SelectDateAndTimeList />;
27
- }
28
- if (view === viewType.DATE || view === viewType.TIME) {
29
- return <SelectDateOrTimeList view={view} />;
30
- }
31
- return <></>;
32
- }, [view, isLoading]);
33
-
34
- return (
35
- <div className="date-time-selector-container">{correctSelectorPage}</div>
36
- );
37
- };
@@ -1,6 +0,0 @@
1
- export enum viewType {
2
- DATE = "date",
3
- DATE_AND_TIME = "date-time",
4
- TIME = "time",
5
- CALENDAR = "calendar",
6
- }
@@ -1 +0,0 @@
1
- export { DateAndTimeAndCalendar } from "./DateAndTimeAndCalendar";