willba-component-library 0.3.10 → 0.3.12
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/lib/assets/IconsSvg.d.ts +1 -2
- package/lib/components/Button/Button.d.ts +6 -6
- package/lib/components/FilterBar/FilterBar.d.ts +1 -2
- package/lib/components/FilterBar/FilterBarTypes.d.ts +3 -13
- package/lib/components/FilterBar/components/buttons/select-button/SelectButton.d.ts +1 -2
- package/lib/components/FilterBar/components/buttons/tab-button/TabButton.d.ts +1 -2
- package/lib/components/FilterBar/components/cards/image-card/ImageCard.d.ts +1 -2
- package/lib/components/FilterBar/components/categories/Categories.d.ts +1 -2
- package/lib/components/FilterBar/components/common/FilterSectionHeader.d.ts +2 -2
- package/lib/components/FilterBar/components/dates/Dates.d.ts +5 -4
- package/lib/components/FilterBar/components/divider/Divider.d.ts +1 -2
- package/lib/components/FilterBar/components/guests/Guests.d.ts +1 -2
- package/lib/components/FilterBar/components/locations/Locations.d.ts +1 -2
- package/lib/components/FilterBar/utils/index.d.ts +1 -1
- package/lib/components/FilterBar/utils/parseLocations.d.ts +1 -2
- package/lib/components/FilterCalendar/FilterCalendar.d.ts +1 -2
- package/lib/components/FilterCalendar/components/Footer.d.ts +1 -2
- package/lib/core/components/buttons/close-button/CloseButton.d.ts +1 -2
- package/lib/core/components/buttons/submit-button/SubmitButton.d.ts +2 -2
- package/lib/core/components/calendar/Calendar.d.ts +1 -2
- package/lib/index.d.ts +11 -19
- package/lib/index.esm.js +346 -359
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +431 -444
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +433 -447
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/rollup.config.mjs +1 -1
- package/src/assets/IconsSvg.tsx +0 -2
- package/src/components/Button/Button.stories.tsx +15 -16
- package/src/components/Button/Button.tsx +15 -15
- package/src/components/FilterBar/FilterBar.css +1 -1
- package/src/components/FilterBar/FilterBar.stories.tsx +14 -50
- package/src/components/FilterBar/FilterBar.tsx +44 -13
- package/src/components/FilterBar/FilterBarTypes.ts +3 -14
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.tsx +13 -2
- package/src/components/FilterBar/components/buttons/tab-button/TabButton.tsx +0 -2
- package/src/components/FilterBar/components/cards/image-card/ImageCard.css +0 -1
- package/src/components/FilterBar/components/cards/image-card/ImageCard.tsx +1 -1
- package/src/components/FilterBar/components/categories/Categories.tsx +2 -1
- package/src/components/FilterBar/components/common/FilterSectionHeader.css +1 -0
- package/src/components/FilterBar/components/common/FilterSectionHeader.tsx +2 -1
- package/src/components/FilterBar/components/dates/Dates.css +3 -0
- package/src/components/FilterBar/components/dates/Dates.tsx +5 -4
- package/src/components/FilterBar/components/divider/Divider.tsx +0 -2
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx +1 -1
- package/src/components/FilterBar/components/guests/Guests.css +1 -1
- package/src/components/FilterBar/components/guests/Guests.tsx +11 -2
- package/src/components/FilterBar/components/locations/Locations.css +1 -1
- package/src/components/FilterBar/components/locations/Locations.tsx +16 -36
- package/src/components/FilterBar/utils/calculateDropdownPosition.tsx +106 -0
- package/src/components/FilterBar/utils/index.tsx +1 -1
- package/src/components/FilterBar/utils/parseLocations.tsx +3 -7
- package/src/components/FilterCalendar/FilterCalendar.stories.tsx +1 -1
- package/src/components/FilterCalendar/FilterCalendar.tsx +0 -1
- package/src/components/FilterCalendar/components/Footer.tsx +0 -1
- package/src/core/components/buttons/close-button/CloseButton.tsx +0 -1
- package/src/core/components/buttons/submit-button/SubmitButton.tsx +1 -1
- package/src/core/components/calendar/Calendar.tsx +7 -4
- package/stories/Button.tsx +14 -11
- package/stories/Header.tsx +27 -14
- package/stories/Page.tsx +39 -21
- package/src/components/FilterBar/utils/getLocalizedContent.tsx +0 -21
package/lib/assets/IconsSvg.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
type Icon = 'spinner' | 'warning';
|
|
3
2
|
type Props = {
|
|
4
3
|
fill?: string;
|
|
5
4
|
size?: number;
|
|
6
5
|
icon: Icon;
|
|
7
6
|
};
|
|
8
|
-
export declare const IconsSvg: ({ fill, size, icon }: Props) =>
|
|
7
|
+
export declare const IconsSvg: ({ fill, size, icon }: Props) => import("react/jsx-runtime").JSX.Element | null;
|
|
9
8
|
export {};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
|
+
import './button.css';
|
|
3
3
|
export interface ButtonProps {
|
|
4
4
|
/**
|
|
5
5
|
* Is this the principal call to action on the page?
|
|
6
6
|
*/
|
|
7
|
-
type?:
|
|
7
|
+
type?: 'primary' | 'secondary';
|
|
8
8
|
/**
|
|
9
9
|
* What background color to use
|
|
10
10
|
*/
|
|
@@ -12,7 +12,7 @@ export interface ButtonProps {
|
|
|
12
12
|
/**
|
|
13
13
|
* How large should the button be?
|
|
14
14
|
*/
|
|
15
|
-
size?:
|
|
15
|
+
size?: 'small' | 'medium' | 'large';
|
|
16
16
|
/**
|
|
17
17
|
* Button contents
|
|
18
18
|
*/
|
|
@@ -20,10 +20,10 @@ export interface ButtonProps {
|
|
|
20
20
|
/**
|
|
21
21
|
* Optional click handler
|
|
22
22
|
*/
|
|
23
|
-
onClick?: (event:
|
|
23
|
+
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
24
24
|
}
|
|
25
25
|
/**
|
|
26
26
|
* Primary UI component for user interaction
|
|
27
27
|
*/
|
|
28
|
-
declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) =>
|
|
28
|
+
declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
29
|
export default Button;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import '../../themes/Default.css';
|
|
3
2
|
import { FilterBarTypes } from './FilterBarTypes';
|
|
4
3
|
import './FilterBar.css';
|
|
5
|
-
export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes):
|
|
4
|
+
export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): import("react/jsx-runtime").JSX.Element;
|
|
@@ -44,20 +44,11 @@ export declare enum Pages {
|
|
|
44
44
|
EVENTS = "/events",
|
|
45
45
|
SALES = "/sales"
|
|
46
46
|
}
|
|
47
|
-
type Translations = {
|
|
48
|
-
en: string;
|
|
49
|
-
fi: string;
|
|
50
|
-
[key: string]: string;
|
|
51
|
-
};
|
|
52
|
-
export type LocaleTranslation = Array<{
|
|
53
|
-
content: string;
|
|
54
|
-
locale: string;
|
|
55
|
-
}>;
|
|
56
47
|
export type Tab = {
|
|
57
48
|
path: string;
|
|
58
49
|
default?: boolean;
|
|
59
50
|
order: number;
|
|
60
|
-
label?:
|
|
51
|
+
label?: string;
|
|
61
52
|
};
|
|
62
53
|
export type Locations = {
|
|
63
54
|
multiSelect: boolean;
|
|
@@ -66,8 +57,7 @@ export type Locations = {
|
|
|
66
57
|
};
|
|
67
58
|
export type Location = {
|
|
68
59
|
id: number;
|
|
69
|
-
label:
|
|
70
|
-
description?:
|
|
60
|
+
label: string;
|
|
61
|
+
description?: string | null;
|
|
71
62
|
imageUrl?: string | null;
|
|
72
63
|
};
|
|
73
|
-
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import './SelectButton.css';
|
|
3
2
|
type Props = {
|
|
4
3
|
label: string;
|
|
@@ -9,5 +8,5 @@ type Props = {
|
|
|
9
8
|
ariaExpanded?: boolean;
|
|
10
9
|
ariaControls?: string;
|
|
11
10
|
};
|
|
12
|
-
export declare const SelectButton:
|
|
11
|
+
export declare const SelectButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
|
|
13
12
|
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import './TabButton.css';
|
|
3
2
|
type Props = {
|
|
4
3
|
onClick?: () => void;
|
|
@@ -6,5 +5,5 @@ type Props = {
|
|
|
6
5
|
active?: boolean;
|
|
7
6
|
mode?: string;
|
|
8
7
|
};
|
|
9
|
-
export declare const TabButton: ({ onClick, label, active, mode }: Props) =>
|
|
8
|
+
export declare const TabButton: ({ onClick, label, active, mode }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
10
9
|
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import './ImageCard.css';
|
|
3
2
|
type Props = {
|
|
4
3
|
title?: string;
|
|
@@ -7,5 +6,5 @@ type Props = {
|
|
|
7
6
|
isSelected: boolean;
|
|
8
7
|
onClick?: () => void;
|
|
9
8
|
};
|
|
10
|
-
export declare const ImageCard:
|
|
9
|
+
export declare const ImageCard: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
|
|
11
10
|
export {};
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import './Categories.css';
|
|
3
2
|
type Props = {
|
|
4
3
|
categories: any;
|
|
5
4
|
setCategories: any;
|
|
6
5
|
};
|
|
7
|
-
export declare const Categories: ({ categories, setCategories }: Props) =>
|
|
6
|
+
export declare const Categories: ({ categories, setCategories }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
8
7
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
import './FilterSectionHeader.css';
|
|
3
3
|
type Props = {
|
|
4
4
|
title: string;
|
|
5
5
|
action?: ReactNode;
|
|
6
6
|
};
|
|
7
|
-
export declare const FilterSectionHeader: ({ title, action }: Props) =>
|
|
7
|
+
export declare const FilterSectionHeader: ({ title, action }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export {};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
2
|
import { DateRange } from 'react-day-picker';
|
|
3
3
|
import { DisableCalendarDates } from '../../../../core/components/calendar/CalendarTypes';
|
|
4
|
+
import './Dates.css';
|
|
4
5
|
type Props = {
|
|
5
|
-
ref:
|
|
6
|
+
ref: RefObject<HTMLDivElement>;
|
|
6
7
|
onClose?: () => void;
|
|
7
8
|
autoFocus?: boolean;
|
|
8
9
|
calendarRange: DateRange | undefined;
|
|
@@ -10,7 +11,7 @@ type Props = {
|
|
|
10
11
|
disableCalendarDates?: DisableCalendarDates;
|
|
11
12
|
selectedPath?: string;
|
|
12
13
|
language?: string;
|
|
13
|
-
filtersRef?:
|
|
14
|
+
filtersRef?: RefObject<HTMLDivElement>;
|
|
14
15
|
};
|
|
15
|
-
export declare const Dates:
|
|
16
|
+
export declare const Dates: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
17
|
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import { AgeCategoryCount, AgeCategoryType } from '../../FilterBarTypes';
|
|
3
2
|
import './Guests.css';
|
|
4
3
|
type Props = {
|
|
@@ -8,5 +7,5 @@ type Props = {
|
|
|
8
7
|
autoFocus?: boolean;
|
|
9
8
|
onClose?: () => void;
|
|
10
9
|
};
|
|
11
|
-
export declare const Guests:
|
|
10
|
+
export declare const Guests: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
11
|
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import './Locations.css';
|
|
3
2
|
import { Location } from '../../FilterBarTypes';
|
|
4
3
|
type Props = {
|
|
@@ -10,5 +9,5 @@ type Props = {
|
|
|
10
9
|
multiSelect?: boolean;
|
|
11
10
|
onClose?: () => void;
|
|
12
11
|
};
|
|
13
|
-
export declare const Locations:
|
|
12
|
+
export declare const Locations: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
|
|
14
13
|
export {};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { Location } from '../FilterBarTypes';
|
|
2
2
|
type Props = {
|
|
3
3
|
selectedLocations: Location[];
|
|
4
|
-
language: string;
|
|
5
4
|
locationsPlaceholder: string;
|
|
6
5
|
locationsSelectedLabel?: string;
|
|
7
6
|
};
|
|
8
|
-
export declare const parseLocations: ({ selectedLocations,
|
|
7
|
+
export declare const parseLocations: ({ selectedLocations, locationsPlaceholder, locationsSelectedLabel, }: Props) => string;
|
|
9
8
|
export {};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import '../../themes/Default.css';
|
|
3
2
|
import { FilterCalendarTypes } from './FilterCalendarTypes';
|
|
4
3
|
import './FilterCalendar.css';
|
|
5
|
-
export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes):
|
|
4
|
+
export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import { DateRange } from 'react-day-picker';
|
|
3
2
|
import { Palette } from '../../../themes/useTheme';
|
|
4
3
|
export declare const Footer: ({ calendarHasError, calendarRange, handleClearDates, language, palette, }: {
|
|
@@ -7,4 +6,4 @@ export declare const Footer: ({ calendarHasError, calendarRange, handleClearDate
|
|
|
7
6
|
handleClearDates: () => void;
|
|
8
7
|
language?: string;
|
|
9
8
|
palette: Palette;
|
|
10
|
-
}) =>
|
|
9
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import './CloseButton.css';
|
|
3
2
|
interface CloseButtonPropsType {
|
|
4
3
|
handleClose: () => void;
|
|
5
4
|
}
|
|
6
|
-
export declare const CloseButton: ({ handleClose }: CloseButtonPropsType) =>
|
|
5
|
+
export declare const CloseButton: ({ handleClose }: CloseButtonPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
7
6
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
import './SubmitButton.css';
|
|
3
3
|
type SubmitButtonVariant = 'text' | 'full';
|
|
4
4
|
type Props = {
|
|
@@ -9,5 +9,5 @@ type Props = {
|
|
|
9
9
|
isLoading?: boolean;
|
|
10
10
|
variant?: SubmitButtonVariant;
|
|
11
11
|
};
|
|
12
|
-
export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, variant, }: Props) =>
|
|
12
|
+
export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
export {};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import { CalendarTypes } from './CalendarTypes';
|
|
3
2
|
import 'react-day-picker/dist/style.css';
|
|
4
3
|
import './Calendar.css';
|
|
5
|
-
export declare const Calendar:
|
|
4
|
+
export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarTypes & import("react").RefAttributes<HTMLDivElement>>;
|
package/lib/index.d.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { MouseEvent } from 'react';
|
|
2
3
|
import { DateRange, Matcher } from 'react-day-picker';
|
|
3
4
|
|
|
4
5
|
interface ButtonProps {
|
|
5
6
|
/**
|
|
6
7
|
* Is this the principal call to action on the page?
|
|
7
8
|
*/
|
|
8
|
-
type?:
|
|
9
|
+
type?: 'primary' | 'secondary';
|
|
9
10
|
/**
|
|
10
11
|
* What background color to use
|
|
11
12
|
*/
|
|
@@ -13,7 +14,7 @@ interface ButtonProps {
|
|
|
13
14
|
/**
|
|
14
15
|
* How large should the button be?
|
|
15
16
|
*/
|
|
16
|
-
size?:
|
|
17
|
+
size?: 'small' | 'medium' | 'large';
|
|
17
18
|
/**
|
|
18
19
|
* Button contents
|
|
19
20
|
*/
|
|
@@ -21,12 +22,12 @@ interface ButtonProps {
|
|
|
21
22
|
/**
|
|
22
23
|
* Optional click handler
|
|
23
24
|
*/
|
|
24
|
-
onClick?: (event:
|
|
25
|
+
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
25
26
|
}
|
|
26
27
|
/**
|
|
27
28
|
* Primary UI component for user interaction
|
|
28
29
|
*/
|
|
29
|
-
declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) =>
|
|
30
|
+
declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
30
31
|
|
|
31
32
|
type Palette = {
|
|
32
33
|
primary: string;
|
|
@@ -102,20 +103,11 @@ type AgeCategoryType = {
|
|
|
102
103
|
type Filters = {
|
|
103
104
|
[key: string]: string;
|
|
104
105
|
};
|
|
105
|
-
type Translations = {
|
|
106
|
-
en: string;
|
|
107
|
-
fi: string;
|
|
108
|
-
[key: string]: string;
|
|
109
|
-
};
|
|
110
|
-
type LocaleTranslation = Array<{
|
|
111
|
-
content: string;
|
|
112
|
-
locale: string;
|
|
113
|
-
}>;
|
|
114
106
|
type Tab = {
|
|
115
107
|
path: string;
|
|
116
108
|
default?: boolean;
|
|
117
109
|
order: number;
|
|
118
|
-
label?:
|
|
110
|
+
label?: string;
|
|
119
111
|
};
|
|
120
112
|
type Locations = {
|
|
121
113
|
multiSelect: boolean;
|
|
@@ -124,12 +116,12 @@ type Locations = {
|
|
|
124
116
|
};
|
|
125
117
|
type Location = {
|
|
126
118
|
id: number;
|
|
127
|
-
label:
|
|
128
|
-
description?:
|
|
119
|
+
label: string;
|
|
120
|
+
description?: string | null;
|
|
129
121
|
imageUrl?: string | null;
|
|
130
122
|
};
|
|
131
123
|
|
|
132
|
-
declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes):
|
|
124
|
+
declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): react_jsx_runtime.JSX.Element;
|
|
133
125
|
|
|
134
126
|
interface FilterCalendarTypes extends Partial<CalendarTypes> {
|
|
135
127
|
palette: Palette;
|
|
@@ -138,6 +130,6 @@ interface FilterCalendarTypes extends Partial<CalendarTypes> {
|
|
|
138
130
|
setToggleCalendar: (val: boolean) => void;
|
|
139
131
|
}
|
|
140
132
|
|
|
141
|
-
declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes):
|
|
133
|
+
declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): react_jsx_runtime.JSX.Element;
|
|
142
134
|
|
|
143
135
|
export { Button, FilterBar, FilterBarTypes, FilterCalendar, FilterCalendarTypes };
|