@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.
- package/dist/date-time-button/DateTimeButton.d.ts +12 -0
- package/dist/date-time-button/DateTimeButton.d.ts.map +1 -0
- package/dist/date-time-button/DateTimeButton.js +1 -0
- package/dist/date-time-button/index.d.ts +2 -0
- package/dist/date-time-button/index.d.ts.map +1 -0
- package/dist/iframe/activity-cards/activity-card/ActivityCard.d.ts +12 -0
- package/dist/iframe/activity-cards/activity-card/ActivityCard.d.ts.map +1 -0
- package/dist/iframe/activity-cards/activity-card/ActivityCard.js +1 -0
- package/dist/iframe/activity-cards/index.d.ts +3 -0
- package/dist/iframe/activity-cards/index.d.ts.map +1 -0
- package/dist/iframe/activity-cards/list-activity-card/ListActivityCard.d.ts +12 -0
- package/dist/iframe/activity-cards/list-activity-card/ListActivityCard.d.ts.map +1 -0
- package/dist/iframe/activity-cards/list-activity-card/ListActivityCard.js +1 -0
- package/dist/iframe/index.d.ts +2 -3
- package/dist/iframe/index.d.ts.map +1 -1
- package/dist/iframe/order-process/components/CategoryProduct/CategoryProduct.js +1 -1
- package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts +2 -2
- package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts.map +1 -1
- package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.js +1 -1
- package/dist/iframe/order-process/components/NavigationSteps/NavigationSteps.d.ts +7 -6
- package/dist/iframe/order-process/components/NavigationSteps/NavigationSteps.d.ts.map +1 -1
- package/dist/iframe/order-process/components/NavigationSteps/index.d.ts +1 -1
- package/dist/iframe/order-process/components/NavigationSteps/index.d.ts.map +1 -1
- package/dist/iframe/order-process/index.d.ts +1 -2
- package/dist/iframe/order-process/index.d.ts.map +1 -1
- package/dist/iframe/page/components/PageBody/PageBody.d.ts +1 -1
- package/dist/iframe/page/components/PageBody/PageBody.js +1 -1
- package/dist/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.d.ts +2 -2
- package/dist/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.d.ts.map +1 -1
- package/dist/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.js +1 -1
- package/dist/iframe/payment/payment-page/PaymentPage.js +1 -1
- package/dist/iframe/payment/payment-page/PaymentTimer.js +1 -1
- package/dist/iframe/payment/payment-status-page/PaymentStatusPage.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/snippet/snippet-template/preview/Preview.js +1 -1
- package/dist/styles/iframe-customers-journey/ActivitiesCard.scss +17 -35
- package/dist/styles/iframe-customers-journey/ActivitiesSelectedCard.scss +48 -43
- package/dist/styles/iframe-customers-journey/DateTimeButton.scss +84 -0
- package/dist/styles/iframe-customers-journey/_index.scss +1 -1
- package/dist/styles/iframe-order-process/IframeOrderProcess.scss +5 -0
- package/dist/types/iframe.d.ts +1 -1
- package/dist/types/iframe.d.ts.map +1 -1
- package/dist/zone/form/components/ZoneRecurrencesControl.js +1 -1
- package/package.json +1 -1
- package/src/date-time-button/DateTimeButton.stories.tsx +68 -0
- package/src/date-time-button/DateTimeButton.tsx +106 -0
- package/src/date-time-button/index.ts +1 -0
- package/src/iframe/activity-cards/activity-card/ActivityCard.stories.tsx +52 -0
- package/src/iframe/activity-cards/activity-card/ActivityCard.tsx +38 -0
- package/src/iframe/activity-cards/index.ts +2 -0
- package/src/iframe/activity-cards/list-activity-card/ListActivityCard.stories.tsx +52 -0
- package/src/iframe/activity-cards/list-activity-card/ListActivityCard.tsx +49 -0
- package/src/iframe/index.ts +2 -7
- package/src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx +1 -1
- package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx +4 -4
- package/src/iframe/order-process/components/NavigationSteps/NavigationSteps.tsx +8 -6
- package/src/iframe/order-process/components/NavigationSteps/index.ts +1 -1
- package/src/iframe/order-process/index.ts +1 -2
- package/src/iframe/page/components/PageBody/PageBody.tsx +1 -1
- package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx +4 -4
- package/src/index.ts +1 -0
- package/src/product-set/product/constants.ts +1 -1
- package/src/sortable-fields/index.ts +1 -1
- package/src/styles/iframe-customers-journey/ActivitiesCard.scss +17 -35
- package/src/styles/iframe-customers-journey/ActivitiesSelectedCard.scss +48 -43
- package/src/styles/iframe-customers-journey/DateTimeButton.scss +84 -0
- package/src/styles/iframe-customers-journey/_index.scss +1 -1
- package/src/styles/iframe-order-process/IframeOrderProcess.scss +5 -0
- package/src/types/iframe.ts +1 -1
- package/src/zone/form/components/ZoneRecurrencesControl.tsx +1 -1
- package/dist/assets/iframe/dateInfo/available.svg.js +0 -1
- package/dist/assets/iframe/dateInfo/limited.svg.js +0 -1
- package/dist/assets/iframe/dateInfo/soldOut.svg.js +0 -1
- package/dist/iframe/activities-card-page/components/activities-card/ActivitiesCard.d.ts +0 -8
- package/dist/iframe/activities-card-page/components/activities-card/ActivitiesCard.d.ts.map +0 -1
- package/dist/iframe/activities-card-page/components/activities-card/ActivitiesCard.js +0 -1
- package/dist/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.d.ts +0 -9
- package/dist/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.d.ts.map +0 -1
- package/dist/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.js +0 -1
- package/dist/iframe/activities-card-page/index.d.ts +0 -3
- package/dist/iframe/activities-card-page/index.d.ts.map +0 -1
- package/dist/iframe/data-time-view-selector/DateAndTimeAndCalendar.d.ts +0 -8
- package/dist/iframe/data-time-view-selector/DateAndTimeAndCalendar.d.ts.map +0 -1
- package/dist/iframe/data-time-view-selector/constants.d.ts +0 -7
- package/dist/iframe/data-time-view-selector/constants.d.ts.map +0 -1
- package/dist/iframe/data-time-view-selector/constants.js +0 -1
- package/dist/iframe/data-time-view-selector/index.d.ts +0 -2
- package/dist/iframe/data-time-view-selector/index.d.ts.map +0 -1
- package/dist/iframe/order-process/components/Category/Category.d.ts +0 -13
- package/dist/iframe/order-process/components/Category/Category.d.ts.map +0 -1
- package/dist/iframe/order-process/components/Category/Category.js +0 -1
- package/dist/iframe/order-process/components/Category/index.d.ts +0 -2
- package/dist/iframe/order-process/components/Category/index.d.ts.map +0 -1
- package/dist/iframe/select-date-time/SelectDateAndTimeList.d.ts +0 -3
- package/dist/iframe/select-date-time/SelectDateAndTimeList.d.ts.map +0 -1
- package/dist/iframe/select-date-time/SelectDateAndTimeList.js +0 -1
- package/dist/iframe/select-date-time/SelectDateOrTimeList.d.ts +0 -8
- package/dist/iframe/select-date-time/SelectDateOrTimeList.d.ts.map +0 -1
- package/dist/iframe/select-date-time/SelectDateOrTimeList.js +0 -1
- package/dist/iframe/select-date-time/component/date-container/DateTimeSelector.d.ts +0 -10
- package/dist/iframe/select-date-time/component/date-container/DateTimeSelector.d.ts.map +0 -1
- package/dist/iframe/select-date-time/component/date-container/DateTimeSelector.js +0 -1
- package/dist/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.d.ts +0 -11
- package/dist/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.d.ts.map +0 -1
- package/dist/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.js +0 -1
- package/dist/iframe/select-date-time/constants.d.ts +0 -6
- package/dist/iframe/select-date-time/constants.d.ts.map +0 -1
- package/dist/iframe/select-date-time/constants.js +0 -1
- package/dist/iframe/select-date-time/index.d.ts +0 -4
- package/dist/iframe/select-date-time/index.d.ts.map +0 -1
- package/dist/styles/iframe-customers-journey/SelectDateAndTime.scss +0 -126
- package/src/iframe/activities-card-page/components/activities-card/ActivitiesCard.tsx +0 -68
- package/src/iframe/activities-card-page/components/activities-card/ActivitiesCardList.stories.tsx +0 -120
- package/src/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.stories.tsx +0 -67
- package/src/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.tsx +0 -57
- package/src/iframe/activities-card-page/index.ts +0 -2
- package/src/iframe/data-time-view-selector/DateAndTimeAndCalendar.tsx +0 -37
- package/src/iframe/data-time-view-selector/constants.ts +0 -6
- package/src/iframe/data-time-view-selector/index.ts +0 -1
- package/src/iframe/order-process/components/Category/Category.stories.tsx +0 -118
- package/src/iframe/order-process/components/Category/Category.tsx +0 -51
- package/src/iframe/order-process/components/Category/index.ts +0 -1
- package/src/iframe/select-date-time/SelectDateAndTimeList.tsx +0 -39
- package/src/iframe/select-date-time/SelectDateOrTimeList.tsx +0 -42
- package/src/iframe/select-date-time/component/date-container/DateTimeSelector.tsx +0 -79
- package/src/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.stories.tsx +0 -164
- package/src/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.tsx +0 -41
- package/src/iframe/select-date-time/constants.ts +0 -5
- package/src/iframe/select-date-time/index.ts +0 -4
- package/src/styles/iframe-customers-journey/SelectDateAndTime.scss +0 -126
|
@@ -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
|
package/dist/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.d.ts.map
DELETED
|
@@ -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 +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 +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
|
-
};
|
package/src/iframe/activities-card-page/components/activities-card/ActivitiesCardList.stories.tsx
DELETED
|
@@ -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,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 +0,0 @@
|
|
|
1
|
-
export { DateAndTimeAndCalendar } from "./DateAndTimeAndCalendar";
|