@royaloperahouse/chord 2.4.10 → 2.5.0-b-chord-development
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/CHANGELOG.md +213 -7
- package/README.md +250 -40
- package/dist/chord.cjs.development.js +531 -274
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +529 -275
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/AriaAlternativeDescription/AriaAlternative.d.ts +5 -0
- package/dist/components/atoms/AriaAlternativeDescription/AriaAlternative.style.d.ts +3 -0
- package/dist/components/atoms/AriaAlternativeDescription/index.d.ts +2 -0
- package/dist/components/atoms/Grid/GridItemLegacy.d.ts +8 -0
- package/dist/components/atoms/Grid/index.d.ts +2 -1
- package/dist/components/atoms/Icons/SvgIcons/index.d.ts +75 -75
- package/dist/components/atoms/ToggleButton/ToggleButton.d.ts +29 -0
- package/dist/components/atoms/ToggleButton/ToggleButton.style.d.ts +5 -0
- package/dist/components/atoms/Typography/Typography.d.ts +2 -2
- package/dist/components/atoms/index.d.ts +3 -2
- package/dist/components/index.d.ts +3 -3
- package/dist/components/molecules/PageHeading/index.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +1 -0
- package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +1 -0
- package/dist/components/molecules/Table/Table.style.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +1 -1
- package/dist/components/organisms/FilterToggles/FilterToggles.d.ts +26 -0
- package/dist/components/organisms/FilterToggles/FilterToggles.style.d.ts +2 -0
- package/dist/components/organisms/FilterToggles/index.d.ts +23 -0
- package/dist/components/organisms/index.d.ts +2 -1
- package/dist/index.d.ts +3 -2
- package/dist/types/ariaAlternative.d.ts +34 -0
- package/dist/types/formTypes.d.ts +12 -9
- package/dist/types/toggleButtonTypes.d.ts +26 -0
- package/dist/types/types.d.ts +4 -0
- package/dist/types/typography.d.ts +4 -0
- package/package.json +1 -1
- package/README.GIT +0 -277
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { IAriaAlternativeProps, IAriaHideProps } from '../../../types/ariaAlternative';
|
|
3
|
+
/** A temporary screen-reader accessibility workaround for components with issues that can't be resolved quickly. Allows us to use aria-hidden on components with stuctural HTML markup issues until they can be rebuilt to be screen-reader compatible, or on components whose data does not translate well to screen-reader users. **/
|
|
4
|
+
export declare const AriaHide: FunctionComponent<IAriaHideProps>;
|
|
5
|
+
export declare const AriaAlternative: FunctionComponent<IAriaAlternativeProps>;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { IAriaHideProps } from '../../../types/ariaAlternative';
|
|
2
|
+
export declare const AriaAlternativeDescription: import("styled-components").StyledComponent<"a", any, {}, never>;
|
|
3
|
+
export declare const AriaHideOnDevice: import("styled-components").StyledComponent<"div", any, IAriaHideProps, never>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { IGridItemProps } from '../../../types/types';
|
|
2
|
+
/**
|
|
3
|
+
* # IMPORTANT
|
|
4
|
+
* Please use the `<GridItem />` component instead of this component if possible.
|
|
5
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
6
|
+
*/
|
|
7
|
+
declare const GridItemLegacy: import("styled-components").StyledComponent<"div", any, IGridItemProps, never>;
|
|
8
|
+
export default GridItemLegacy;
|
|
@@ -1,79 +1,79 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const IconLibrary: {
|
|
3
|
-
AddToMyList: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
4
|
-
Arrow: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
5
|
-
AudioDescription: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
6
|
-
Back10: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
7
|
-
BalletAndDance: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
8
|
-
Basket: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
9
|
-
BasketFull: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
10
|
-
BookTickets: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
11
|
-
CarouselArrow: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
12
|
-
ChooseDates: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
13
|
-
Cinema: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
14
|
-
Clips: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
15
|
-
Clock: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
16
|
-
Close: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
17
|
-
Confirm: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
18
|
-
CreditCard: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
19
|
-
Delete: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
20
|
-
Detract: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
21
|
-
DropdownArrow: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
22
|
-
EditMyList: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
23
|
-
Email: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
24
|
-
Expand: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
25
|
-
Expand12px: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
26
|
-
ExternalLink: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
27
|
-
Facebook: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
28
|
-
Favourite: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
29
|
-
FavouriteFull: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
30
|
-
Filter: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
31
|
-
FindAScreening: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
32
|
-
Forward10: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
33
|
-
FullScreen: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
34
|
-
GridView: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
35
|
-
Home: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
36
|
-
Info: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
37
|
-
Instagram: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
38
|
-
List: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
39
|
-
ListView: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
40
|
-
LiveStream: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
41
|
-
Location: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
42
|
-
Menu: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
43
|
-
Minimise: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
44
|
-
Muted: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
45
|
-
OnMyList: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
46
|
-
OperaAndMusic: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
47
|
-
Pause: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
48
|
-
PDF: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
49
|
-
Phone: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
50
|
-
Play: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
51
|
-
Print: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
52
|
-
Refresh: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
53
|
-
Reminder: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
54
|
-
Remove: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
55
|
-
Remove12px: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
56
|
-
Restart: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
57
|
-
Search: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
58
|
-
Seat: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
59
|
-
Secure: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
60
|
-
Settings: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
61
|
-
Shift: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
62
|
-
Space: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
63
|
-
Standing: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
64
|
-
Star: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
65
|
-
Subscribe: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
66
|
-
Subtitles: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
67
|
-
Tick: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
68
|
-
Tickets: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
69
|
-
Tiktok: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
70
|
-
Trailer: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
71
|
-
Twitter: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
72
|
-
User: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
73
|
-
UserSignedIn: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
74
|
-
Volume: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
75
|
-
Watch: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
3
|
+
AddToMyList: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
4
|
+
Arrow: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
5
|
+
AudioDescription: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
6
|
+
Back10: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
7
|
+
BalletAndDance: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
8
|
+
Basket: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
9
|
+
BasketFull: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
10
|
+
BookTickets: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
11
|
+
CarouselArrow: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
12
|
+
ChooseDates: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
13
|
+
Cinema: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
14
|
+
Clips: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
15
|
+
Clock: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
16
|
+
Close: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
17
|
+
Confirm: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
18
|
+
CreditCard: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
19
|
+
Delete: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
20
|
+
Detract: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
21
|
+
DropdownArrow: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
22
|
+
EditMyList: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
23
|
+
Email: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
24
|
+
Expand: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
25
|
+
Expand12px: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
26
|
+
ExternalLink: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
27
|
+
Facebook: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
28
|
+
Favourite: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
29
|
+
FavouriteFull: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
30
|
+
Filter: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
31
|
+
FindAScreening: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
32
|
+
Forward10: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
33
|
+
FullScreen: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
34
|
+
GridView: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
35
|
+
Home: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
36
|
+
Info: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
37
|
+
Instagram: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
38
|
+
List: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
39
|
+
ListView: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
40
|
+
LiveStream: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
41
|
+
Location: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
42
|
+
Menu: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
43
|
+
Minimise: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
44
|
+
Muted: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
45
|
+
OnMyList: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
46
|
+
OperaAndMusic: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
47
|
+
Pause: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
48
|
+
PDF: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
49
|
+
Phone: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
50
|
+
Play: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
51
|
+
Print: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
52
|
+
Refresh: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
53
|
+
Reminder: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
54
|
+
Remove: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
55
|
+
Remove12px: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
56
|
+
Restart: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
57
|
+
Search: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
58
|
+
Seat: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
59
|
+
Secure: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
60
|
+
Settings: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
61
|
+
Shift: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
62
|
+
Space: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
63
|
+
Standing: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
64
|
+
Star: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
65
|
+
Subscribe: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
66
|
+
Subtitles: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
67
|
+
Tick: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
68
|
+
Tickets: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
69
|
+
Tiktok: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
70
|
+
Trailer: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
71
|
+
Twitter: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
72
|
+
User: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
73
|
+
UserSignedIn: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
74
|
+
Volume: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
75
|
+
Watch: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
76
76
|
Wheelchair: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
77
|
-
X: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
78
|
-
Youtube: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
77
|
+
X: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
78
|
+
Youtube: ({ color, ariaLabel }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
|
|
79
79
|
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { IToggleProps } from '../../../types/toggleButtonTypes';
|
|
3
|
+
/**
|
|
4
|
+
* A ToggleButton component that renders a toggleable button with an icon and label.
|
|
5
|
+
*
|
|
6
|
+
* # Usage
|
|
7
|
+
* The primary use case this component was written for is to be used within a group of
|
|
8
|
+
* toggles for filtering content displayed on page. One such implementation can be found in
|
|
9
|
+
* Filter Toggles component. However, this component can be used anywhere a toggle
|
|
10
|
+
* button is needed.
|
|
11
|
+
* Toggle Button requires the toggling logic to be handled by the parent component
|
|
12
|
+
* and passed down to it as isToggleOn, onFilterItemClick, and onKeyDownHandler props.
|
|
13
|
+
*
|
|
14
|
+
* # Props
|
|
15
|
+
* - `isToggleOn`: Boolean indicating if the toggle is on.
|
|
16
|
+
* - `onFilterItemClick`: Function to handle the click event on the toggle button.
|
|
17
|
+
* - `onKeyDownHandler`: Function to handle the keydown event on the toggle button.
|
|
18
|
+
* - `item`: Object representing the item associated with the toggle button.
|
|
19
|
+
* - `ariaLabelledBy`: Recommended when used as part of a group of toggles under a common
|
|
20
|
+
* label or title. A string which should be identical to the id of the label or title.
|
|
21
|
+
*
|
|
22
|
+
* # Design and Accessibility
|
|
23
|
+
* - aria-labelledby is used to associate the toggle button with a label or title when
|
|
24
|
+
* used as part of a group of toggles.
|
|
25
|
+
* - The component is designed to be keyboard-navigable.
|
|
26
|
+
* - aria-selected is used to indicate the selected state of the toggle button.
|
|
27
|
+
*/
|
|
28
|
+
declare const ToggleButton: FunctionComponent<IToggleProps>;
|
|
29
|
+
export default ToggleButton;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { IAltHeaderProps, IBodyTextProps, IHeaderProps, IOverlineProps, IStyledTag, ISubtitleProps } from '../../../types/typography';
|
|
2
|
-
export declare const StyledTag: ({ tag, typography, children, level }: IStyledTag) => JSX.Element;
|
|
2
|
+
export declare const StyledTag: ({ tag, typography, children, level, id }: IStyledTag) => JSX.Element;
|
|
3
3
|
export declare const AltHeader: ({ semanticLevel, level, children }: IAltHeaderProps) => JSX.Element;
|
|
4
4
|
export declare const BodyText: ({ level, children, tag }: IBodyTextProps) => JSX.Element;
|
|
5
5
|
export declare const Header: ({ semanticLevel, level, children }: IHeaderProps) => JSX.Element;
|
|
6
|
-
export declare const Overline: ({ level, children, tag }: IOverlineProps) => JSX.Element;
|
|
6
|
+
export declare const Overline: ({ level, children, tag, id }: IOverlineProps) => JSX.Element;
|
|
7
7
|
export declare const Subtitle: ({ level, children, tag }: ISubtitleProps) => JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CinemaBadge, StreamBadge } from './Badge';
|
|
2
2
|
import { PrimaryButton, SecondaryButton, TertiaryButton } from './Buttons';
|
|
3
3
|
import ControlledDropdown from './ControlledDropdown';
|
|
4
|
-
import { Grid, GridItem } from './Grid';
|
|
4
|
+
import { Grid, GridItem, GridItemLegacy } from './Grid';
|
|
5
5
|
import { Icon } from './Icons';
|
|
6
6
|
import ImageAspectRatioWrapper from './ImageAspectRatioWrapper';
|
|
7
7
|
import Progress from './Progress';
|
|
@@ -25,4 +25,5 @@ import TypeTags from './TypeTags';
|
|
|
25
25
|
import { AltHeader, BodyText, Header, Overline, Subtitle } from './Typography';
|
|
26
26
|
import VideoControls from './VideoControls';
|
|
27
27
|
import { Stepper } from './Stepper';
|
|
28
|
-
|
|
28
|
+
import ToggleButton from './ToggleButton/ToggleButton';
|
|
29
|
+
export { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, GridItemLegacy, Header, Icon, ImageAspectRatioWrapper, Overline, Progress, PrimaryButton, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SponsorLogo, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, VideoControls, ToggleButton, };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, Progress, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, VideoControls } from './atoms';
|
|
2
|
-
import { AnchorTabBar, Footer, LiveChat, Navigation, StickyBar, TitleWithCTA, UpsellSection } from './organisms';
|
|
1
|
+
import { AltHeader, BodyText, CinemaBadge, ControlledDropdown, Grid, GridItem, GridItemLegacy, Header, Icon, ImageAspectRatioWrapper, Overline, PrimaryButton, Progress, Radio, Radio2, RotatorButtons, SecondaryButton, SecondaryLogo, TertiaryButton, SectionSplitter, Sponsorship, Stepper, StreamBadge, Subtitle, Tab, TabLink, TextLogo, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, VideoControls, ToggleButton } from './atoms';
|
|
2
|
+
import { AnchorTabBar, Footer, LiveChat, Navigation, StickyBar, TitleWithCTA, UpsellSection, FilterToggles } from './organisms';
|
|
3
3
|
import { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, Table, Tabs, TextOnly, UpsellCard, Quote, VideoWithControls } from './molecules';
|
|
4
4
|
import ThemeProvider from '../styles/ThemeProvider';
|
|
5
5
|
import GlobalStyles from '../styles/GlobalStyles';
|
|
6
|
-
export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, LiveChat, VideoControls, VideoWithControls, };
|
|
6
|
+
export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, ContactCard, ContentSummary, CinemaBadge, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, GridItemLegacy, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SecondaryButton, SecondaryLogo, StatusBanner, SearchBar, SectionTitle, Select, Select2, Select2Async, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, SectionSplitter, Tab, TabLink, Table, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, TextLogo, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, LiveChat, VideoControls, VideoWithControls, FilterToggles, ToggleButton, };
|
|
@@ -4,4 +4,4 @@ import PageHeadingImpact from './Impact';
|
|
|
4
4
|
import PageHeadingPanel from './Panel';
|
|
5
5
|
import PageHeadingStream from './Stream';
|
|
6
6
|
import PageHeadingCompact from './Compact/Compact';
|
|
7
|
-
export { PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PageHeadingCompact,
|
|
7
|
+
export { PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PageHeadingCompact, };
|
|
@@ -5,3 +5,4 @@ export declare const CreditListingWrapper: import("styled-components").StyledCom
|
|
|
5
5
|
export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
6
|
export declare const RoleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
7
|
export declare const CreditWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
+
export declare const CreditBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -4,3 +4,4 @@ export declare const HeadshotWrapper: import("styled-components").StyledComponen
|
|
|
4
4
|
export declare const RoleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
5
|
export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
6
|
export declare const PersonLink: import("styled-components").StyledComponent<"a", any, {}, never>;
|
|
7
|
+
export declare const ReplacementWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
@@ -16,4 +16,4 @@ export declare const PageNumber: import("styled-components").StyledComponent<"bu
|
|
|
16
16
|
}, never>;
|
|
17
17
|
export declare const Next: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
18
18
|
export declare const ScrollButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
19
|
-
export declare const AriaDescription: import("styled-components").StyledComponent<"
|
|
19
|
+
export declare const AriaDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -27,8 +27,8 @@ import ImageWithCaption from './ImageWithCaption';
|
|
|
27
27
|
import Quote from './Quote';
|
|
28
28
|
import MiniCard from './MiniCard';
|
|
29
29
|
import ReadMore from './ReadMore';
|
|
30
|
-
import AuxiliaryNav from './AuxiliaryNav';
|
|
31
30
|
import PasswordStrength from './PasswordStrength';
|
|
31
|
+
import AuxiliaryNav from './AuxiliaryNav';
|
|
32
32
|
import Table from './Table';
|
|
33
33
|
import VideoWithControls from './VideoWithControls';
|
|
34
34
|
export { Accordion, Accordions, AnnouncementBanner, AuxiliaryNav, Card, Cards, ContactCard, ContentSummary, CreditListing, Editorial, ImageWithCaption, Information, MiniCard, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, PasswordStrength, Pagination, PeopleListing, PromoWithTags, PromoWithTitle, RadioGroup, RadioGroup2, ReadMore, Quote, StatusBanner, SectionTitle, SearchBar, Select, Select2, Select2Async, Tabs, Table, TextOnly, UpsellCard, VideoWithControls, };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Props } from '.';
|
|
3
|
+
/**
|
|
4
|
+
* A FilterToggles component that renders a labelled group of toggle buttons
|
|
5
|
+
* for filtering page content.
|
|
6
|
+
*
|
|
7
|
+
* # Usage
|
|
8
|
+
* This component is designed to be used within a filter context, where multiple items
|
|
9
|
+
* can be toggled on or off. The parent component should handle the toggling and filtering logic.
|
|
10
|
+
* toggling logic and state should be passed to filter Toggles as onclickHandler and selectedItems props.
|
|
11
|
+
*
|
|
12
|
+
* # Props
|
|
13
|
+
* - `filterItems`: Array of filter items to be displayed as toggle buttons. Each item should
|
|
14
|
+
* be an object with a param string, label string, and disableIfActive array containing
|
|
15
|
+
* params of items to be untoggled when the given item is toggled on.
|
|
16
|
+
* - `onClickHandler`: Function to handle the click event on each toggle button.
|
|
17
|
+
* - `selectedItems`: Array of selected filter item parameters. Likely to be a piece of state
|
|
18
|
+
* mutated by onClickHandler in the parent component.
|
|
19
|
+
* - `title`: String for the title of the filter section.
|
|
20
|
+
*
|
|
21
|
+
* # Design and Accessibility
|
|
22
|
+
* - aria-labelledby is used to associate the filter section with a label.
|
|
23
|
+
* - The component is designed to be keyboard-navigable.
|
|
24
|
+
*/
|
|
25
|
+
export declare const FilterToggles: ({ filterItems, onClickHandler, selectedItems, title, }: Props) => React.ReactElement;
|
|
26
|
+
export default FilterToggles;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import FilterToggles from './FilterToggles';
|
|
2
|
+
import { FilterConfig } from '../../../types/toggleButtonTypes';
|
|
3
|
+
export interface Props {
|
|
4
|
+
/**
|
|
5
|
+
* Array of filter configurations.
|
|
6
|
+
* @type {FilterConfig[]}
|
|
7
|
+
*/
|
|
8
|
+
filterItems: FilterConfig[];
|
|
9
|
+
/**
|
|
10
|
+
* Handler function to be called when a filter item is clicked.
|
|
11
|
+
* @param filter - The filter configuration that was clicked.
|
|
12
|
+
*/
|
|
13
|
+
onClickHandler: (filter: FilterConfig) => void;
|
|
14
|
+
/**
|
|
15
|
+
* Array of selected item identifiers.
|
|
16
|
+
*/
|
|
17
|
+
selectedItems: string[];
|
|
18
|
+
/**
|
|
19
|
+
* Optional title for the component.
|
|
20
|
+
*/
|
|
21
|
+
title?: string;
|
|
22
|
+
}
|
|
23
|
+
export default FilterToggles;
|
|
@@ -6,4 +6,5 @@ import UpsellSection from './UpsellSection';
|
|
|
6
6
|
import { LiveChat } from './LiveChat';
|
|
7
7
|
import StickyBar from './StickyBar';
|
|
8
8
|
import ModalWindow from './ModalWindow';
|
|
9
|
-
|
|
9
|
+
import FilterToggles from './FilterToggles';
|
|
10
|
+
export { AnchorTabBar, Footer, LiveChat, ModalWindow, Navigation, StickyBar, TitleWithCTA, UpsellSection, FilterToggles, };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship,
|
|
1
|
+
import { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryNav, BodyText, Card, Cards, CinemaBadge, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, GridItemLegacy, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, TertiaryButton, TextOnly, ThemeProvider, TitleWithCTA, Tab, Table, TabLink, Tabs, TextArea, TextField, TextFieldLegacy, TextLink, Tickbox, Tickbox2, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, FilterToggles, ToggleButton } from './components';
|
|
2
2
|
import { devices, breakpoints } from './styles/viewports';
|
|
3
3
|
import zIndexes from './styles/zIndexes';
|
|
4
4
|
import { AspectRatio, ButtonType, CarouselType, Colors, IconNameType, IntegratedTimerProps, ITimerProps, TickboxMode, ThemeType, EditorialLink, IInformationTitleProps, IInformationCTAProps, IInformationBackgroundColour } from './types';
|
|
5
5
|
import { MiniCard } from './components/molecules';
|
|
6
|
+
import { BrandingStyle } from './types/impactHeader';
|
|
6
7
|
import { ModalWindow } from './components/organisms';
|
|
7
8
|
import AuxiliaryButton from './components/atoms/Buttons/Auxiliary/AuxiliaryButton';
|
|
8
|
-
export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationBackgroundColour, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship,
|
|
9
|
+
export { Accordion, Accordions, AnnouncementBanner, AltHeader, AnchorTabBar, AuxiliaryButton, AuxiliaryNav, AspectRatio, BodyText, BrandingStyle, breakpoints, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, devices, Editorial, EditorialLink, Footer, GlobalStyles, Grid, GridItem, GridItemLegacy, Header, Icon, IconNameType, ImageAspectRatioWrapper, ImageWithCaption, Information, IInformationBackgroundColour, IInformationCTAProps, IInformationTitleProps, ITimerProps, IntegratedTimerProps, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, StatusBanner, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Select2, Select2Async, Sponsorship, Stepper, StickyBar, StreamBadge, Subtitle, Tab, Table, TabLink, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeProvider, ThemeType, TitleWithCTA, Tickbox, Tickbox2, TickboxMode, Timer, TypeTags, UpsellCard, UpsellSection, Quote, VideoControls, VideoWithControls, zIndexes, FilterToggles, ToggleButton, };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
export interface IAriaAlternativeProps {
|
|
2
|
+
/**
|
|
3
|
+
* A temporary screen-reader accessibility workaround for components with issues that can't be resolved quickly.
|
|
4
|
+
* Allows us to use aria-hidden on components with stuctural HTML markup issues until they can be rebuilt to be screen-reader compatible.
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Description of the content being communicated by this component.
|
|
8
|
+
*/
|
|
9
|
+
description: string;
|
|
10
|
+
/**
|
|
11
|
+
* originalContent - parse in the data from the original component / response object.
|
|
12
|
+
*/
|
|
13
|
+
originalContent: Array<{
|
|
14
|
+
key: string;
|
|
15
|
+
value: string;
|
|
16
|
+
}>;
|
|
17
|
+
/**
|
|
18
|
+
* speechValues - input contextual speech values here to build a sentence, e.g. "you have" , "tickets for" , etc.
|
|
19
|
+
*/
|
|
20
|
+
speechValues: Array<{
|
|
21
|
+
key: string;
|
|
22
|
+
value: string;
|
|
23
|
+
}>;
|
|
24
|
+
/**
|
|
25
|
+
* Disable this component (for testing purposes).
|
|
26
|
+
*/
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
}
|
|
29
|
+
export interface IAriaHideProps {
|
|
30
|
+
/**
|
|
31
|
+
* Inert - disables all focusable child elements, necessary if using aria-hidden
|
|
32
|
+
*/
|
|
33
|
+
inert: boolean;
|
|
34
|
+
}
|
|
@@ -265,17 +265,8 @@ export interface IStepperProps {
|
|
|
265
265
|
step?: number;
|
|
266
266
|
/** An error message to be shown below the stepper.
|
|
267
267
|
*
|
|
268
|
-
* Default: `undefined`
|
|
269
268
|
*/
|
|
270
269
|
error?: string;
|
|
271
|
-
/**
|
|
272
|
-
* A style prop that allows us to change what colours to
|
|
273
|
-
* use for light or dark mode (e.g. text color, border color, etc...)
|
|
274
|
-
* based on the background color.
|
|
275
|
-
*
|
|
276
|
-
* Defaults to `false`.
|
|
277
|
-
*/
|
|
278
|
-
darkMode?: boolean;
|
|
279
270
|
/**
|
|
280
271
|
* Set disapled state
|
|
281
272
|
*/
|
|
@@ -284,6 +275,18 @@ export interface IStepperProps {
|
|
|
284
275
|
* Minimum value allowed in the stepper
|
|
285
276
|
*/
|
|
286
277
|
min?: number;
|
|
278
|
+
/**
|
|
279
|
+
* A style prop that allows us to change what colours to
|
|
280
|
+
* use for light or dark mode (e.g. text color, border color, etc...)
|
|
281
|
+
* based on the background color.
|
|
282
|
+
*
|
|
283
|
+
* Defaults to `false`.
|
|
284
|
+
* Specify whether or not the containing element has a dark background.
|
|
285
|
+
* This property affects the border colours for focused and error states.
|
|
286
|
+
*
|
|
287
|
+
* Default: `false`
|
|
288
|
+
*/
|
|
289
|
+
darkMode?: boolean;
|
|
287
290
|
/**
|
|
288
291
|
* Maximum value allowed in the stepper
|
|
289
292
|
*/
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { AnchorHTMLAttributes } from 'react';
|
|
2
|
+
export interface FilterConfig {
|
|
3
|
+
/**
|
|
4
|
+
* Parameter associated with the filter item. Won't be displayed to the user.
|
|
5
|
+
*/
|
|
6
|
+
param: string;
|
|
7
|
+
/**
|
|
8
|
+
* Label for the filter. Will be displayed to the user.
|
|
9
|
+
*/
|
|
10
|
+
label: string;
|
|
11
|
+
/**
|
|
12
|
+
* Array of params of fitler items which will be disabled when this item is toggled on.
|
|
13
|
+
*/
|
|
14
|
+
disableIfActive: string[];
|
|
15
|
+
/**
|
|
16
|
+
* Optional: id for use in filtering logic in parent component. Not used in the component itself.
|
|
17
|
+
*/
|
|
18
|
+
id?: string;
|
|
19
|
+
}
|
|
20
|
+
export interface IToggleProps extends AnchorHTMLAttributes<HTMLElement> {
|
|
21
|
+
isToggleOn: boolean;
|
|
22
|
+
onFilterItemClick: (filter: FilterConfig) => void;
|
|
23
|
+
onKeyDownHandler: (e: React.KeyboardEvent<HTMLElement>, filter: FilterConfig) => void;
|
|
24
|
+
item: FilterConfig;
|
|
25
|
+
ariaLabelledBy?: string;
|
|
26
|
+
}
|
package/dist/types/types.d.ts
CHANGED