@licklist/design 0.44.486-dev.5 → 0.44.486-dev.51

package/src/assets/logo/favicon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0"?>
+<svg width="200" height="201" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.1">
+    <title>Single Colour - Light Blue Light</title>
+    <g class="layer">
+        <title>Layer 1</title>
+        <g fill="none" fill-rule="evenodd" id="Page-1">
+            <g fill="#0E8CE2" fill-rule="nonzero" id="Logo-Export" transform="translate(0 -1835)">
+                <path d="m52.59,1861.52c16.49,-16.49 24.18,-20.75 33.43,-23.55c9.25,-2.8 18.71,-2.8 27.95,0c9.25,2.8 16.95,7.06 33.43,23.55l26.95,26.94c16.48,16.49 20.74,24.18 23.54,33.43c2.81,9.25 2.81,18.71 0,27.95c-2.8,9.25 -7.06,16.95 -23.54,33.43l-26.95,26.95c-16.48,16.48 -24.18,20.74 -33.43,23.54c-9.24,2.81 -18.7,2.81 -27.95,0c-9.25,-2.8 -16.94,-7.06 -33.43,-23.54l-26.94,-26.95c-16.49,-16.48 -20.75,-24.18 -23.55,-33.43c-2.8,-9.24 -2.8,-18.7 0,-27.95c2.8,-9.25 7.06,-16.94 23.55,-33.43l26.94,-26.94zm14.82,14.04l-27.33,27.33c-12.85,12.85 -16.37,18.05 -18.45,24.92c-1.63,5.39 -1.63,10.73 0,16.11c2.06,6.8 5.53,11.97 18.06,24.54l27.72,27.71c12.57,12.54 17.73,16 24.53,18.06c5.39,1.64 10.73,1.64 16.11,0c6.87,-2.08 12.07,-5.59 24.92,-18.44l26.95,-26.95c12.85,-12.85 16.36,-18.05 18.44,-24.92c1.64,-5.38 1.64,-10.72 0,-16.11c-2.08,-6.87 -5.59,-12.07 -18.44,-24.92l-26.95,-26.94c-12.85,-12.85 -18.05,-16.37 -24.92,-18.45c-5.38,-1.63 -10.72,-1.63 -16.11,0c-6.8,2.06 -11.96,5.53 -24.53,18.06zm67.18,50.6c5.48,-5.47 14.37,-5.47 19.85,0c5.47,5.48 5.47,14.37 0,19.85l-44.2,44.19c-5.48,5.48 -14.36,5.48 -19.84,0l-6.45,-6.45c-1.21,-1.21 -1.52,-1.77 -1.72,-2.45c-0.21,-0.68 -0.21,-1.37 0,-2.05c0.2,-0.67 0.51,-1.24 1.72,-2.44l50.64,-50.65zm-73.77,24.53c1.32,-1.32 3.11,-2.06 4.97,-2.05l25.82,0.06c1.4,0 2.54,1.15 2.54,2.55c0,0.67 -0.26,1.3 -0.72,1.78l-1.36,1.4l-16.1,15.95c-1.49,1.48 -3.91,1.48 -5.4,-0.01l-9.75,-9.76c-2.74,-2.74 -2.74,-7.18 0,-9.92" id="Single-Colour---Light-Blue-Light"/>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/logo/licklist.svg

@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="118"
-        height="28"
         viewBox="0 0 118 28"
         version="1.1"
         id="svg2">

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -0,0 +1,59 @@
+import React, { ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+import { ReactComponent as AvailableIcon } from "../assets/iframe/available.svg";
+import { ReactComponent as LimitedIcon } from "../assets/iframe/limited.svg";
+import { ReactComponent as SoldOutIcon } from "../assets/iframe/soldOut.svg";
+
+const LOTS_OF_SPACE_LIMIT = 0.2;
+const LIMITED_LIMIT = 0.8;
+
+const getIconsAndLabels = (
+  booked: number,
+  total: number
+): { label: string; icon: ReactElement } => {
+  if (booked === total) {
+    return { label: "soldOut", icon: <SoldOutIcon className="logo" /> };
+  }
+
+  // lots of space if less than 80% booked
+  if (booked / total <= LOTS_OF_SPACE_LIMIT) {
+    return { label: "lotsOfSpace", icon: <AvailableIcon className="logo" /> };
+  }
+
+  if (booked / total >= LIMITED_LIMIT) {
+    return { label: "limited", icon: <LimitedIcon className="logo" /> };
+  }
+
+  return { label: "available", icon: <AvailableIcon className="logo" /> };
+};
+
+type AvailabilityIndicatorProps = {
+  booked: number;
+  total: number;
+  notAvailable?: boolean;
+};
+
+export const AvailabilityIndicator = ({
+  booked,
+  total,
+  notAvailable,
+}: AvailabilityIndicatorProps) => {
+  const { t } = useTranslation("Design");
+  const { icon, label } = getIconsAndLabels(booked, total);
+
+  if (notAvailable) {
+    return (
+      <div className="availability-indicator">
+        <SoldOutIcon className="logo" />
+        <div>{t("notAvailable")}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="availability-indicator">
+      {icon}
+      <div>{t(label)}</div>
+    </div>
+  );
+};

package/src/availability-indicator/index.ts

@@ -0,0 +1 @@
+export * from "./AvailabilityIndicator";

package/src/calendar/Calendar.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { DateTime } from "luxon";
+import { Meta, Story } from "@storybook/react";
+import { Calendar, CalendarProps } from "./Calendar";
+
+export default {
+  title: "Iframe/Event/Calendar",
+  component: Calendar,
+} as Meta;
+
+export const Default: Story<CalendarProps> = (args) => {
+  return (
+    <div style={{ backgroundColor: "white" }}>
+      <Calendar {...args} />
+    </div>
+  );
+};
+
+const now = DateTime.now().set({
+  hour: 0,
+  second: 0,
+  millisecond: 0,
+  minute: 0,
+});
+
+Default.args = {
+  disabledDates: [now.minus({ day: 2 }), now, now.plus({ day: 2 })],
+  isLoading: false,
+  fromPrice: "from £10",
+  selectedDate: null,
+  setSelectedDate: () => null,
+  calendarDates: [],
+};

package/src/calendar/Calendar.tsx

@@ -0,0 +1,46 @@
+import React, { Dispatch, ReactElement, SetStateAction } from "react";
+import { DateTime } from "luxon";
+import { CalendarButtons } from "./components/CalendarButtons";
+import { CalendarDates } from "./components/CalendarDates";
+
+export const defaultStartDay = DateTime.now().set({
+  millisecond: 0,
+  second: 0,
+  hour: 0,
+  minute: 0,
+});
+
+export type CalendarProps = {
+  currentDate: DateTime;
+  setCurrentDate: Dispatch<SetStateAction<DateTime>>;
+  calendarDates: DateTime[];
+  disabledDates?: DateTime[];
+  selectedDate: DateTime | null;
+  setSelectedDate: Dispatch<SetStateAction<DateTime | null>>;
+  fromPrice?: string | ReactElement | null;
+  isLoading?: boolean;
+  initialDate?: DateTime;
+  getAvailability?: (
+    date: DateTime
+  ) => { booked: number; total: number } | undefined;
+  includeAvailability?: boolean;
+};
+
+export const Calendar = ({
+  disabledDates = [],
+  initialDate = defaultStartDay,
+  ...props
+}: CalendarProps) => {
+  return (
+    <div className="calendar-wrapper">
+      <div className="calendar">
+        <CalendarButtons
+          disabledDates={disabledDates}
+          initialDate={initialDate}
+          {...props}
+        />
+        <CalendarDates disabledDates={disabledDates} {...props} />
+      </div>
+    </div>
+  );
+};

package/src/{iframe/event/event-calendar → calendar}/components/CalendarButtons/CalendarButtons.tsx

@@ -1,36 +1,53 @@
-import React, { useContext, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { range } from "lodash";
-import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
-import { ReactComponent as SelectArrow } from "../../../../../assets/iframe/selectArrow.svg";
+import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
 import { CalendarSelect } from "../CalendarSelect";
-import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
+import { CalendarProps } from "../../Calendar";
 
-type CalendarButtonsProps = CalendarBaseProps;
+type CalendarButtonsProps = Pick<
+  CalendarProps,
+  | "isLoading"
+  | "disabledDates"
+  | "initialDate"
+  | "currentDate"
+  | "setCurrentDate"
+  | "setSelectedDate"
+>;
 
 export const CalendarButtons = ({
   disabledDates = [],
   isLoading = false,
+  initialDate,
+  currentDate,
+  setCurrentDate,
+  setSelectedDate,
 }: CalendarButtonsProps) => {
-  const {
-    initialDate,
-    currentDate,
-    canMoveBack,
-    onSelectPreviousMonth,
-    onSelectNextMonth,
-    setCurrentDate,
-    setSelectedDate,
-  } = useContext(EventCalendarContext);
   const { t } = useTranslation("Design");
 
+  const onSelectNextMonth = useCallback(() => {
+    setCurrentDate((prevDate) => prevDate.plus({ months: 1 }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onSelectPreviousMonth = useCallback(() => {
+    setCurrentDate((prevDate) => prevDate.minus({ month: 1 }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const yearOptions = useMemo(() => {
     return range(initialDate.year, initialDate.year + 5, 1).map((year) => {
       return { label: String(year), value: year };
     });
   }, [initialDate]);
 
+  const canMoveBack = useMemo(
+    () => currentDate > initialDate,
+    [currentDate, initialDate]
+  );
+
   const onSelectYear = (value: string) => {
     const selectedYear = Number(value);
     const nextDateTime = currentDate.set({ year: selectedYear });

package/src/{iframe/event/event-calendar → calendar}/components/CalendarDates/CalendarDates.tsx

@@ -1,23 +1,26 @@
-import React, { ReactElement, useContext, useMemo } from "react";
+import React, { useMemo } from "react";
 import { DateTime } from "luxon";
-import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
+import { DAY_NUMBER } from "@licklist/core/dist/Config";
+import { DateTimeButton } from "../../../date-time-button";
 import { CalendarWeekdays } from "../CalendarWeekdays";
-import { CalendarDate } from "../CalendarDate";
-import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
+import { CalendarProps } from "../../Calendar";
 
-export type CalendarDatesProps = CalendarBaseProps & {
-  fromPrice?: string | ReactElement | null;
-};
+export type CalendarDatesProps = Omit<
+  CalendarProps,
+  "currentDate" | "setCurrentDate" | "initialDate"
+>;
 
 export const CalendarDates = ({
   disabledDates = [],
   isLoading = false,
+  calendarDates,
+  selectedDate,
+  setSelectedDate,
   fromPrice,
+  getAvailability,
+  includeAvailability,
 }: CalendarDatesProps) => {
-  const { calendarDates, initialDate, selectedDate, setSelectedDate } =
-    useContext(EventCalendarContext);
-
   const fillCalendarDates = useMemo(() => {
     let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
 
@@ -40,22 +43,24 @@ export const CalendarDates = ({
       <CalendarWeekdays />
       <div className="calendar-dates">
         {fillCalendarDates.map((date: DateTime | null) => {
-          if (date === null) {
-            return <div />;
-          }
+          if (date === null) return <div />;
 
           const isDisabled =
             isLoading || isSelectedDateDisabled(date, disabledDates);
 
           return (
-            <CalendarDate
+            <DateTimeButton
               key={+date}
-              currentDate={date}
-              initialDate={initialDate}
-              selectedDate={selectedDate}
-              setSelectedDate={setSelectedDate}
               isDisabled={isDisabled}
-              fromPrice={fromPrice}
+              isSelected={
+                selectedDate ? date.hasSame(selectedDate, "day") : undefined
+              }
+              date={date.toFormat(DAY_NUMBER)}
+              onSelect={() => setSelectedDate(date)}
+              price={fromPrice}
+              resources={getAvailability?.(date)}
+              showResources={includeAvailability}
+              calendarView
             />
           );
         })}

package/src/{iframe/event/event-calendar → calendar}/components/CalendarSelect/CalendarSelect.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { Form } from "react-bootstrap";
 import clsx from "clsx";
-import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../../page/components/PageBody/constants";
+import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../iframe/page/components/PageBody/constants";
 
 export type CalendarSelectOption = {
   label: string;

package/src/calendar/index.ts

@@ -0,0 +1,3 @@
+export * from "./Calendar";
+export * from "./components/CalendarSelect";
+export * from "./utils";

package/src/calendar/utils/index.ts

@@ -0,0 +1,28 @@
+import { DateTime, Interval } from "luxon";
+import isEqual from "lodash/isEqual";
+
+export const isSelectedDateDisabled = (
+  selectedDate: DateTime,
+  disabledDates: DateTime[] = []
+) => {
+  return !!disabledDates.find((disabledDate) =>
+    isEqual(disabledDate.toObject(), selectedDate.toObject())
+  );
+};
+
+export const getMonthCalendarDates = (initialDate: DateTime): DateTime[] => {
+  const startOfMonth = initialDate.startOf("month");
+  const endOfMonth = initialDate.endOf("month");
+
+  return Interval.fromDateTimes(startOfMonth, endOfMonth)
+    .splitBy({ day: 1 })
+    .map((d) => d.start);
+};
+
+export const getWeekCalendarDates = (initialDate: DateTime): DateTime[] => {
+  const lastDay = initialDate.plus({ days: 7 });
+
+  return Interval.fromDateTimes(initialDate, lastDay)
+    .splitBy({ day: 1 })
+    .map((d) => d.start);
+};

package/src/date-time-button/DateTimeButton.stories.tsx

@@ -78,3 +78,20 @@ WithPrice.args = {
   isOnlyTimeContainer: false,
   price: "from $8000",
 };
+
+export const WithAvailability: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+WithAvailability.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+  isOnlyTimeContainer: false,
+  price: "from $8000",
+  resources: {
+    booked: 1,
+    total: 3,
+  },
+};

package/src/date-time-button/DateTimeButton.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
+import { AvailabilityIndicator } from "../availability-indicator";
 import { DateContent } from "./DateContent";
 
 export type DateTimeButtonProps<T = DateTime | string> = {
@@ -10,31 +11,30 @@ export type DateTimeButtonProps<T = DateTime | string> = {
   onSelect: (date: T) => void;
   isOnlyTimeContainer?: boolean;
   price?: string | number | ReactElement | null;
+  resources?: {
+    booked: number;
+    total: number;
+  };
+  calendarView?: boolean;
+  showResources?: boolean;
 };
 
 export const DateTimeButton = <T extends DateTime | string>({
   date,
-  isDisabled,
+  isDisabled: _isDisabled,
   isSelected,
   onSelect,
   isOnlyTimeContainer,
   price,
+  resources,
+  calendarView,
+  showResources,
 }: DateTimeButtonProps<T>) => {
-  // const infoLogo = useMemo(() => {
-  //   if (info?.logo === infoLogoType.LIMIT) {
-  //     return <LimitedSvg />;
-  //   }
-  //   if (info?.logo === infoLogoType.AVAILABLE) {
-  //     return <AvailableSvg />;
-  //   }
-  //   if (info?.logo === infoLogoType.SOLD_OUT) {
-  //     return <SoldOutSvg />;
-  //   }
-  //   return null;
-  // }, [info]);
-
   const isTimeVariant = typeof date === "string";
 
+  const isDisabled =
+    _isDisabled || (resources && resources.booked === resources.total);
+
   return (
     <button
       type="button"
@@ -46,7 +46,8 @@ export const DateTimeButton = <T extends DateTime | string>({
         isSelected && "selected",
         isTimeVariant && "time-button",
         isOnlyTimeContainer && "only-time-container",
-        !isTimeVariant && "today"
+        !isTimeVariant && "today",
+        calendarView && "calendar-view"
       )}
     >
       {isTimeVariant ? (
@@ -61,13 +62,9 @@ export const DateTimeButton = <T extends DateTime | string>({
 
       {price && !isDisabled && <div className="price">{price}</div>}
 
-      {/* TODO uncomment when adding availability */}
-      {/* {info && (
-        <div className="info">
-          {info.logo && <Logo className="logo" logo={infoLogo} />}
-          <div>{info.description}</div>
-        </div>
-      )} */}
+      {showResources && resources && (
+        <AvailabilityIndicator {...resources} notAvailable={_isDisabled} />
+      )}
     </button>
   );
 };

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -168,6 +168,9 @@ export function IntervalInput({
                 value={value}
                 onChange={onChange}
                 date={start}
+                minDate={DateTime.fromISO(start)
+                  .plus({ day: 1 })
+                  .toFormat("yyyy-MM-dd")}
                 disabled={disabled}
               />
             )}

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.stories.tsx

@@ -60,7 +60,6 @@ const contextValue = {
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -126,7 +125,6 @@ const contextValue = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -144,7 +142,6 @@ const contextValue = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -713,7 +710,6 @@ const defaultProductSets = [
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -779,7 +775,6 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -797,7 +792,6 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -906,7 +900,6 @@ const defaultProductSets = [
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -972,7 +965,6 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -990,7 +982,6 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -1,6 +1,7 @@
 import {
   DEFAULT_OPERATIONAL_COST_TYPE,
   DEFAULT_PRODUCT_SET_TYPE,
+  DEFAULT_RELY_ON_PEOPLE_TYPE,
   ProductSet,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { getFilteredTemplates } from "../../../product-set/utils/index";
@@ -15,6 +16,7 @@ export const getDefaultValues = (
   type: productSet?.type ?? DEFAULT_PRODUCT_SET_TYPE,
   termsAndConditions: productSet?.termsAndConditions ?? "",
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,
+  relyOnPeopleType: productSet?.relyOnPeopleType ?? DEFAULT_RELY_ON_PEOPLE_TYPE,
   thankYouPageUrl: productSet?.thankYouPageUrl ?? "",
   isDefault: productSet?.isDefault ?? false,
   fieldSetId: productSet?.fieldSetId,
@@ -24,7 +26,7 @@ export const getDefaultValues = (
       : undefined,
   smsTemplates:
     productSet?.smsTemplates && productSet?.smsTemplates?.length > 0
-      ? getFilteredTemplates(productSet?.mailTemplates)
+      ? getFilteredTemplates(productSet?.smsTemplates)
       : undefined,
   steps:
     productSet?.steps?.map(({ productCategories, ...step }) => ({

package/src/events/event-venue-map/hooks/useImage.tsx

@@ -12,21 +12,30 @@ export const useImage = (
     height: 0,
   });
 
+  const setImageEventHandler = function setImageEventHandler(
+    this: HTMLImageElement
+  ) {
+    imageRef.current = this;
+
+    setImageAttributes({
+      width: this.naturalWidth,
+      height: this.naturalHeight,
+    });
+  };
+
   const loadImage = useCallback((imageUrl?: string) => {
     imageRef.current = new window.Image();
     imageRef.current.src = imageUrl;
-    imageRef.current.addEventListener("load", function () {
-      imageRef.current = this;
-
-      setImageAttributes({
-        width: this.naturalWidth,
-        height: this.naturalHeight,
-      });
-    });
+    imageRef.current.addEventListener("load", setImageEventHandler);
   }, []);
 
   useEffect(() => {
     loadImage(url);
+
+    return () => {
+      imageRef.current.removeEventListener("load", setImageEventHandler);
+      imageRef.current = undefined;
+    };
   }, [url, loadImage]);
 
   const memoizedImageAttributes = useMemo(() => {

package/src/file-upload/FileUpload.tsx

@@ -175,7 +175,9 @@ export const useFileUpload = ({
     const filesArray = Array.from(uploadedFiles);
     filesArray.forEach((file) => {
       const fileExtension = file.name.split(".").pop();
-      const extensionIndex = allowedExtensions.indexOf(fileExtension);
+      const extensionIndex = allowedExtensions.indexOf(
+        fileExtension.toLowerCase()
+      );
       const isExtensionValid = extensionIndex !== -1;
 
       if (isExtensionValid) {

package/src/iframe/{activity-cards/activity-card → activity-card}/ActivityCard.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
-import { ActivityCard, ActivityCardProps } from "./ActivityCard";
+import { ActivityCard, ActivityCardProps, LAYOUT_LIST } from "./ActivityCard";
 
 export default {
   title: "Iframe/ActivityCard",
@@ -50,3 +50,26 @@ Selected.args = {
   onSelect: () => null,
   isSelected: true,
 };
+
+export const ListView: Story<ActivityCardProps> = (props) => {
+  return <ActivityCard {...props} />;
+};
+
+Default.args = {
+  layout: LAYOUT_LIST,
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+  image: {
+    hash: "0b37b130e22aa2d3",
+    id: 195,
+    imageType: "cover",
+    imageableId: 25,
+    imageableType: "zone",
+    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+    // eslint-disable-next-line max-len
+    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+  },
+  onSelect: () => null,
+  isSelected: false,
+};