@licklist/design 0.44.486-dev.74 → 0.44.486-dev.75

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 (8) hide show
  1. package/dist/iframe/activity-card/ActivityCard.d.ts +1 -3
  2. package/dist/iframe/activity-card/ActivityCard.d.ts.map +1 -1
  3. package/dist/iframe/activity-card/ActivityCard.js +1 -1
  4. package/dist/styles/activity-card/GridActivitiesCard.scss +0 -8
  5. package/package.json +1 -1
  6. package/src/iframe/activity-card/ActivityCard.stories.tsx +27 -51
  7. package/src/iframe/activity-card/ActivityCard.tsx +2 -13
  8. package/src/styles/activity-card/GridActivitiesCard.scss +0 -8
package/dist/iframe/activity-card/ActivityCard.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { ReactNode } from "react";
2
- import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
3
2
  export declare const LAYOUT_GRID = "grid";
4
3
  export declare const LAYOUT_LIST = "list";
5
4
  type Layout = typeof LAYOUT_GRID | typeof LAYOUT_LIST;
@@ -7,11 +6,10 @@ export type ActivityCardProps = {
7
6
  title: ReactNode;
8
7
  duration: ReactNode;
9
8
  price: ReactNode;
10
- image?: Image | null;
11
9
  onSelect: () => void;
12
10
  isSelected: boolean;
13
11
  layout?: Layout;
14
12
  };
15
- export declare const ActivityCard: ({ title, duration, price, image, onSelect, isSelected, layout, }: ActivityCardProps) => JSX.Element;
13
+ export declare const ActivityCard: ({ title, duration, price, onSelect, isSelected, layout, }: ActivityCardProps) => JSX.Element;
16
14
  export {};
17
15
  //# sourceMappingURL=ActivityCard.d.ts.map
package/dist/iframe/activity-card/ActivityCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActivityCard.d.ts","sourceRoot":"","sources":["../../../src/iframe/activity-card/ActivityCard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;AAE7E,eAAO,MAAM,WAAW,SAAS,CAAC;AAClC,eAAO,MAAM,WAAW,SAAS,CAAC;AAElC,KAAK,MAAM,GAAG,OAAO,WAAW,GAAG,OAAO,WAAW,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,YAAY,qEAQtB,iBAAiB,gBAiDnB,CAAC"}
1
+ {"version":3,"file":"ActivityCard.d.ts","sourceRoot":"","sources":["../../../src/iframe/activity-card/ActivityCard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,eAAO,MAAM,WAAW,SAAS,CAAC;AAClC,eAAO,MAAM,WAAW,SAAS,CAAC;AAElC,KAAK,MAAM,GAAG,OAAO,WAAW,GAAG,OAAO,WAAW,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,YAAY,8DAQtB,iBAAiB,gBAwCnB,CAAC"}
package/dist/iframe/activity-card/ActivityCard.js CHANGED
@@ -1 +1 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),a=e(require("clsx")),l="grid";exports.ActivityCard=function(e){var c=e.title,i=e.duration,r=e.price,n=e.image,s=e.onSelect,m=e.isSelected,d=e.layout;return(void 0===d?l:d)===l?t.createElement("button",{type:"button",className:a("activity-card",m&&"active"),onClick:s},n&&t.createElement("img",{className:"activity-card-image",alt:"",src:n.url}),t.createElement("div",{className:a("d-flex","flex-column",!n&&"no-image")},t.createElement("div",{className:"activity-card-title"},c),i&&t.createElement("div",null,i),r&&t.createElement("div",null,r))):t.createElement("div",{role:"button",onClick:s,onKeyPress:s,tabIndex:0},t.createElement("div",{className:a("list-activity-card",{active:m})},t.createElement("div",{className:"description"},t.createElement("div",{className:"title"},c),i&&t.createElement("div",null,t.createElement("p",null,i)),r&&t.createElement("div",null,r)),n&&t.createElement("div",{className:"image-container"},t.createElement("img",{className:"image",src:n.url,alt:""}))),t.createElement("hr",{className:"list-activity-card-hr"}))},exports.LAYOUT_GRID=l,exports.LAYOUT_LIST="list";
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")),l=e(require("clsx")),a="grid";exports.ActivityCard=function(e){var c=e.title,i=e.duration,r=e.price,n=e.onSelect,s=e.isSelected,d=e.layout;return(void 0===d?a:d)===a?t.createElement("button",{type:"button",className:l("activity-card",s&&"active"),onClick:n},t.createElement("div",{className:l("d-flex","flex-column")},t.createElement("div",{className:"activity-card-title"},c),i&&t.createElement("div",null,i),r&&t.createElement("div",null,r))):t.createElement("div",{role:"button",onClick:n,onKeyPress:n,tabIndex:0},t.createElement("div",{className:l("list-activity-card",{active:s})},t.createElement("div",{className:"description"},t.createElement("div",{className:"title"},c),i&&t.createElement("div",null,t.createElement("p",null,i)),r&&t.createElement("div",null,r))),t.createElement("hr",{className:"list-activity-card-hr"}))},exports.LAYOUT_GRID=a,exports.LAYOUT_LIST="list";
package/dist/styles/activity-card/GridActivitiesCard.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  color: $snippet-elements-body-color;
7
7
  border-radius: 0.5rem;
8
8
  padding: 0.375rem;
9
- min-height: 12.5rem;
10
9
  width: 11.5rem;
11
10
  word-wrap: break-word;
12
11
  background-color: #fff;
@@ -21,13 +20,6 @@
21
20
  border: 2px solid #0e8be1;
22
21
  }
23
22
 
24
- &-image {
25
- width: 100%;
26
- height: 6.3rem;
27
- margin-bottom: 0.5rem;
28
- border-radius: 0.3rem;
29
- }
30
-
31
23
  &-title {
32
24
  font-weight: 600;
33
25
  line-height: 1.25rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.44.486-dev.74",
3
+ "version": "0.44.486-dev.75",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
package/src/iframe/activity-card/ActivityCard.stories.tsx CHANGED
@@ -1,75 +1,51 @@
1
1
  import React from "react";
2
2
  import { Meta, Story } from "@storybook/react";
3
- import { ActivityCard, ActivityCardProps, LAYOUT_LIST } from "./ActivityCard";
3
+ import {
4
+ ActivityCard,
5
+ ActivityCardProps,
6
+ LAYOUT_GRID,
7
+ LAYOUT_LIST,
8
+ } from "./ActivityCard";
4
9
 
5
10
  export default {
6
11
  title: "Iframe/ActivityCard",
7
12
  component: ActivityCard,
8
13
  } as Meta;
9
14
 
10
- export const Default: Story<ActivityCardProps> = (props) => {
11
- return <ActivityCard {...props} />;
12
- };
15
+ export const GridView: Story<ActivityCardProps> = (props) => {
16
+ const [isSelected, setIsSelected] = React.useState(false);
13
17
 
14
- Default.args = {
15
- title: "Clay Pigeons & Axe Thowing",
16
- duration: "60 mins",
17
- price: "from £20",
18
- image: {
19
- hash: "0b37b130e22aa2d3",
20
- id: 195,
21
- imageType: "cover",
22
- imageableId: 25,
23
- imageableType: "zone",
24
- path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
25
- // eslint-disable-next-line max-len
26
- url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
27
- },
28
- onSelect: () => null,
29
- isSelected: false,
18
+ return (
19
+ <ActivityCard
20
+ {...props}
21
+ isSelected={isSelected}
22
+ onSelect={() => setIsSelected(true)}
23
+ />
24
+ );
30
25
  };
31
26
 
32
- export const Selected: Story<ActivityCardProps> = (props) => {
33
- return <ActivityCard {...props} />;
34
- };
35
-
36
- Selected.args = {
27
+ GridView.args = {
28
+ layout: LAYOUT_GRID,
37
29
  title: "Clay Pigeons & Axe Thowing",
38
30
  duration: "60 mins",
39
31
  price: "from £20",
40
- image: {
41
- hash: "0b37b130e22aa2d3",
42
- id: 195,
43
- imageType: "cover",
44
- imageableId: 25,
45
- imageableType: "zone",
46
- path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
47
- // eslint-disable-next-line max-len
48
- url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
49
- },
50
- onSelect: () => null,
51
- isSelected: true,
52
32
  };
53
33
 
54
34
  export const ListView: Story<ActivityCardProps> = (props) => {
55
- return <ActivityCard {...props} />;
35
+ const [isSelected, setIsSelected] = React.useState(false);
36
+
37
+ return (
38
+ <ActivityCard
39
+ {...props}
40
+ isSelected={isSelected}
41
+ onSelect={() => setIsSelected(true)}
42
+ />
43
+ );
56
44
  };
57
45
 
58
- Default.args = {
46
+ ListView.args = {
59
47
  layout: LAYOUT_LIST,
60
48
  title: "Clay Pigeons & Axe Thowing",
61
49
  duration: "60 mins",
62
50
  price: "from £20",
63
- image: {
64
- hash: "0b37b130e22aa2d3",
65
- id: 195,
66
- imageType: "cover",
67
- imageableId: 25,
68
- imageableType: "zone",
69
- path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
70
- // eslint-disable-next-line max-len
71
- url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
72
- },
73
- onSelect: () => null,
74
- isSelected: false,
75
51
  };
package/src/iframe/activity-card/ActivityCard.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { ReactNode } from "react";
2
2
  import clsx from "clsx";
3
- import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
4
3
 
5
4
  export const LAYOUT_GRID = "grid";
6
5
  export const LAYOUT_LIST = "list";
@@ -11,7 +10,6 @@ export type ActivityCardProps = {
11
10
  title: ReactNode;
12
11
  duration: ReactNode;
13
12
  price: ReactNode;
14
- image?: Image | null;
15
13
  onSelect: () => void;
16
14
  isSelected: boolean;
17
15
  layout?: Layout;
@@ -21,7 +19,7 @@ export const ActivityCard = ({
21
19
  title,
22
20
  duration,
23
21
  price,
24
- image,
22
+ // image,
25
23
  onSelect,
26
24
  isSelected,
27
25
  layout = LAYOUT_GRID,
@@ -33,10 +31,7 @@ export const ActivityCard = ({
33
31
  className={clsx("activity-card", isSelected && "active")}
34
32
  onClick={onSelect}
35
33
  >
36
- {image && (
37
- <img className="activity-card-image" alt="" src={image.url} />
38
- )}
39
- <div className={clsx("d-flex", "flex-column", !image && "no-image")}>
34
+ <div className={clsx("d-flex", "flex-column")}>
40
35
  <div className="activity-card-title">{title}</div>
41
36
 
42
37
  {duration && <div>{duration}</div>}
@@ -64,12 +59,6 @@ export const ActivityCard = ({
64
59
 
65
60
  {price && <div>{price}</div>}
66
61
  </div>
67
-
68
- {image && (
69
- <div className="image-container">
70
- <img className="image" src={image.url} alt="" />
71
- </div>
72
- )}
73
62
  </div>
74
63
  <hr className="list-activity-card-hr" />
75
64
  </div>
package/src/styles/activity-card/GridActivitiesCard.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  color: $snippet-elements-body-color;
7
7
  border-radius: 0.5rem;
8
8
  padding: 0.375rem;
9
- min-height: 12.5rem;
10
9
  width: 11.5rem;
11
10
  word-wrap: break-word;
12
11
  background-color: #fff;
@@ -21,13 +20,6 @@
21
20
  border: 2px solid #0e8be1;
22
21
  }
23
22
 
24
- &-image {
25
- width: 100%;
26
- height: 6.3rem;
27
- margin-bottom: 0.5rem;
28
- border-radius: 0.3rem;
29
- }
30
-
31
23
  &-title {
32
24
  font-weight: 600;
33
25
  line-height: 1.25rem;