@telus-uds/components-web 2.0.0 → 2.2.0
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 +30 -2
- package/README.md +40 -1
- package/component-docs.json +13513 -0
- package/lib/Card/Card.js +0 -1
- package/lib/Table/Cell.js +13 -5
- package/lib/VideoPicker/VideoPicker.js +21 -3
- package/lib/VideoPicker/VideoPickerPlayer.js +8 -3
- package/lib/index.js +7 -0
- package/lib/utils/index.js +16 -2
- package/lib/utils/ssr.js +50 -0
- package/lib-module/Card/Card.js +0 -1
- package/lib-module/Table/Cell.js +13 -5
- package/lib-module/VideoPicker/VideoPicker.js +21 -3
- package/lib-module/VideoPicker/VideoPickerPlayer.js +7 -3
- package/lib-module/index.js +1 -0
- package/lib-module/utils/index.js +3 -2
- package/lib-module/utils/ssr.js +41 -0
- package/package.json +8 -7
- package/src/Card/Card.jsx +1 -6
- package/src/Table/Cell.jsx +12 -4
- package/src/VideoPicker/VideoPicker.jsx +28 -4
- package/src/VideoPicker/VideoPickerPlayer.jsx +7 -3
- package/src/index.js +2 -0
- package/src/utils/index.js +4 -1
- package/src/utils/ssr.js +37 -0
- package/types/BlockQuote.d.ts +16 -0
- package/types/Box.d.ts +38 -0
- package/types/BreadcrumbItem.d.ts +11 -0
- package/types/Breadcrumbs.d.ts +21 -0
- package/types/ComponentTypeWithForwardRef.d.ts +5 -0
- package/types/MultiSelectFilter.d.ts +27 -0
- package/types/QuantitySelector.d.ts +20 -0
- package/types/ReactNative.d.ts +256 -0
- package/types/Tooltip.d.ts +17 -0
- package/types/TooltipButton.d.ts +12 -0
- package/types/Typography.d.ts +27 -0
- package/types/WebVideo.d.ts +17 -0
- package/types/common.d.ts +162 -0
- package/types/index.d.ts +244 -0
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { StackView, Typography } from '@telus-uds/components-base'
|
|
3
|
+
import PropTypes from 'prop-types'
|
|
3
4
|
import WebVideo from '../WebVideo/WebVideo'
|
|
4
5
|
import { VideoPropType, RefPropType } from './videoPropType'
|
|
5
6
|
|
|
6
|
-
const VideoPickerPlayer = ({ video = {}, videoPlayerRef }) => (
|
|
7
|
+
const VideoPickerPlayer = ({ video = {}, videoPlayerRef, onStartVideo = () => {} }) => (
|
|
7
8
|
<StackView space={3} tokens={{ flexShrink: 1 }}>
|
|
8
|
-
<div ref={videoPlayerRef}>
|
|
9
|
+
<div ref={videoPlayerRef}>
|
|
10
|
+
{video.videoId && <WebVideo {...video} onStart={() => onStartVideo(video)} />}
|
|
11
|
+
</div>
|
|
9
12
|
<StackView space={2}>
|
|
10
13
|
<Typography variant={{ size: 'h2', colour: 'secondary' }}>{video.title}</Typography>
|
|
11
14
|
<Typography>{video.description}</Typography>
|
|
@@ -15,7 +18,8 @@ const VideoPickerPlayer = ({ video = {}, videoPlayerRef }) => (
|
|
|
15
18
|
|
|
16
19
|
VideoPickerPlayer.propTypes = {
|
|
17
20
|
video: VideoPropType,
|
|
18
|
-
videoPlayerRef: RefPropType
|
|
21
|
+
videoPlayerRef: RefPropType,
|
|
22
|
+
onStartVideo: PropTypes.func
|
|
19
23
|
}
|
|
20
24
|
|
|
21
25
|
export default VideoPickerPlayer
|
package/src/index.js
CHANGED
package/src/utils/index.js
CHANGED
|
@@ -1,17 +1,20 @@
|
|
|
1
|
+
import { warn, deprecate } from './logger'
|
|
1
2
|
import { transformGradient } from './transforms'
|
|
2
3
|
import useTypographyTheme from './useTypographyTheme'
|
|
3
4
|
import htmlAttrs from './htmlAttrs'
|
|
4
|
-
import { warn } from './logger'
|
|
5
5
|
import media from './media'
|
|
6
|
+
import ssrStyles from './ssr'
|
|
6
7
|
import renderStructuredContent from './renderStructuredContent'
|
|
7
8
|
import useOverlaidPosition from './useOverlaidPosition'
|
|
8
9
|
|
|
9
10
|
export {
|
|
11
|
+
deprecate,
|
|
10
12
|
htmlAttrs,
|
|
11
13
|
transformGradient,
|
|
12
14
|
useTypographyTheme,
|
|
13
15
|
warn,
|
|
14
16
|
media,
|
|
15
17
|
renderStructuredContent,
|
|
18
|
+
ssrStyles,
|
|
16
19
|
useOverlaidPosition
|
|
17
20
|
}
|
package/src/utils/ssr.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { ServerStyleSheet } from 'styled-components'
|
|
2
|
+
import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base'
|
|
3
|
+
/**
|
|
4
|
+
* Returns object with `renderApp` and `getStyles` functions.
|
|
5
|
+
* Weave these into your app's server-side render process:
|
|
6
|
+
*
|
|
7
|
+
* - Call `renderApp` first to do the actual server-side render
|
|
8
|
+
* - After the render is complete, call `getStyles`
|
|
9
|
+
* - Include the style tags returned by `getStyles` in the SSR <head>
|
|
10
|
+
*
|
|
11
|
+
* This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
|
|
12
|
+
*
|
|
13
|
+
* @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
|
|
14
|
+
* @param {object} [options] -
|
|
15
|
+
* - `styleGetters`: optional array of additional style getter functions to call after render
|
|
16
|
+
* - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
|
|
17
|
+
* @param {boolean} [options.styleGetters]
|
|
18
|
+
* @param {(ReactElement) => ReactElement} [options.collectStyles]
|
|
19
|
+
*/
|
|
20
|
+
const ssrStyles = (
|
|
21
|
+
appName = 'Allium app',
|
|
22
|
+
{ styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {}
|
|
23
|
+
) => {
|
|
24
|
+
const sheet = new ServerStyleSheet()
|
|
25
|
+
const getStyledComponentsStyles = () => {
|
|
26
|
+
const styles = sheet.getStyleElement()
|
|
27
|
+
sheet.seal()
|
|
28
|
+
return styles
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return baseSsrStyles(appName, {
|
|
32
|
+
styleGetters: [getStyledComponentsStyles, ...styleGetters],
|
|
33
|
+
collectStyles: (renderedApp) => collectStyles(sheet.collectStyles(renderedApp))
|
|
34
|
+
})
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export default ssrStyles
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { ComponentType, ElementType, ReactNode } from 'react'
|
|
2
|
+
import type { HTMLAttrs } from './common'
|
|
3
|
+
|
|
4
|
+
export interface BlockQuoteProps extends HTMLAttrs {
|
|
5
|
+
children: ReactNode
|
|
6
|
+
link?: string
|
|
7
|
+
linkHref?: string
|
|
8
|
+
additionalInfo?: string
|
|
9
|
+
textStyle?: 'large' | 'heading'
|
|
10
|
+
LinkRouter?: ElementType
|
|
11
|
+
linkRouterProps?: Record<string, any>
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
declare const BlockQuote: ComponentType<BlockQuoteProps>
|
|
15
|
+
|
|
16
|
+
export default BlockQuote
|
package/types/Box.d.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { ReactNode } from 'react'
|
|
2
|
+
import type { A11yProps, LayoutTag, Tokens, Variant, ViewProps } from './common'
|
|
3
|
+
import { ComponentTypeWithForwardRef } from './ComponentTypeWithForwardRef'
|
|
4
|
+
|
|
5
|
+
export interface SpacingObjectProps {
|
|
6
|
+
xs?: number
|
|
7
|
+
sm?: number
|
|
8
|
+
md?: number
|
|
9
|
+
lg?: number
|
|
10
|
+
xl?: number
|
|
11
|
+
space?: number
|
|
12
|
+
options?: {
|
|
13
|
+
variant?: Variant
|
|
14
|
+
size?: number
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export interface BoxProps extends A11yProps, ViewProps {
|
|
19
|
+
variant?: Variant
|
|
20
|
+
tokens?: Tokens
|
|
21
|
+
space?: number | SpacingObjectProps
|
|
22
|
+
vertical?: number | SpacingObjectProps
|
|
23
|
+
horizontal?: number | SpacingObjectProps
|
|
24
|
+
bottom?: number | SpacingObjectProps
|
|
25
|
+
left?: number | SpacingObjectProps
|
|
26
|
+
right?: number | SpacingObjectProps
|
|
27
|
+
top?: number | SpacingObjectProps
|
|
28
|
+
flex?: number
|
|
29
|
+
scroll?: boolean | Record<string, any>
|
|
30
|
+
tag?: LayoutTag
|
|
31
|
+
testID?: string
|
|
32
|
+
dataSet?: Record<string, any>
|
|
33
|
+
children: ReactNode
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare const Box: ComponentTypeWithForwardRef<BoxProps, any>
|
|
37
|
+
|
|
38
|
+
export default Box
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { ComponentType, ReactNode } from 'react'
|
|
2
|
+
import type { HTMLAttrs } from './common'
|
|
3
|
+
import BreadcrumbItem from './BreadcrumbItem'
|
|
4
|
+
|
|
5
|
+
export interface BreadcrumbRouteProps {
|
|
6
|
+
path?: string
|
|
7
|
+
breadcrumbName?: string
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export interface BreadcrumbsProps extends HTMLAttrs {
|
|
11
|
+
routes?: BreadcrumbRouteProps[]
|
|
12
|
+
baseUrl?: string
|
|
13
|
+
params?: Record<string, any>
|
|
14
|
+
children?: ReactNode
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
declare const Breadcrumbs: ComponentType<BreadcrumbsProps> & {
|
|
18
|
+
Item: typeof BreadcrumbItem
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export default Breadcrumbs
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react'
|
|
2
|
+
|
|
3
|
+
// declare const ComponentTypeWithForwardRef: ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
|
|
4
|
+
export interface ComponentTypeWithForwardRef<P, T>
|
|
5
|
+
extends ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { ComponentType } from 'react'
|
|
2
|
+
|
|
3
|
+
interface MultiSelectFilterItem {
|
|
4
|
+
label: string
|
|
5
|
+
id?: string
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export interface MultiSelectFilterProps {
|
|
9
|
+
label: string
|
|
10
|
+
subtitle?: string
|
|
11
|
+
id?: string
|
|
12
|
+
variant?: string
|
|
13
|
+
tokens?: []
|
|
14
|
+
items: MultiSelectFilterItem[]
|
|
15
|
+
values?: string[]
|
|
16
|
+
initialValues?: string[]
|
|
17
|
+
maxValues?: number
|
|
18
|
+
onChange?: (e: string[]) => void
|
|
19
|
+
copy?: 'en' | 'fr'
|
|
20
|
+
readOnly?: string
|
|
21
|
+
inactive?: string
|
|
22
|
+
rowLimit?: number
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
declare const MultiSelectFilter: ComponentType<MultiSelectFilterProps>
|
|
26
|
+
|
|
27
|
+
export default MultiSelectFilter
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { ComponentType } from 'react'
|
|
2
|
+
import type { HTMLAttrs, InputSupportsProps, Tokens } from './common'
|
|
3
|
+
|
|
4
|
+
export interface QuantitySelectorProps
|
|
5
|
+
extends HTMLAttrs,
|
|
6
|
+
Omit<InputSupportsProps, 'feedback' | 'validation'> {
|
|
7
|
+
minNumber?: number
|
|
8
|
+
maxNumber?: number
|
|
9
|
+
onChange?: (value: number, event: any) => void
|
|
10
|
+
defaultValue?: number
|
|
11
|
+
accessibilityLabel?: string
|
|
12
|
+
variant?: {
|
|
13
|
+
alternative: boolean
|
|
14
|
+
}
|
|
15
|
+
tokens?: Tokens
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
declare const QuantitySelector: ComponentType<QuantitySelectorProps>
|
|
19
|
+
|
|
20
|
+
export default QuantitySelector
|
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
// These types are copied out of react-native because web projects don't have that dependency.
|
|
2
|
+
export type AccessibilityActionName =
|
|
3
|
+
/**
|
|
4
|
+
* Generated when a screen reader user double taps the component.
|
|
5
|
+
*/
|
|
6
|
+
| 'activate'
|
|
7
|
+
/**
|
|
8
|
+
* Generated when a screen reader user increments an adjustable component.
|
|
9
|
+
*/
|
|
10
|
+
| 'increment'
|
|
11
|
+
/**
|
|
12
|
+
* Generated when a screen reader user decrements an adjustable component.
|
|
13
|
+
*/
|
|
14
|
+
| 'decrement'
|
|
15
|
+
/**
|
|
16
|
+
* Generated when a TalkBack user places accessibility focus on the component and double taps and holds one finger on the screen.
|
|
17
|
+
* @platform android
|
|
18
|
+
*/
|
|
19
|
+
| 'longpress'
|
|
20
|
+
/**
|
|
21
|
+
* Generated when a VoiceOver user places focus on or inside the component and double taps with two fingers.
|
|
22
|
+
* @platform ios
|
|
23
|
+
* */
|
|
24
|
+
| 'magicTap'
|
|
25
|
+
/**
|
|
26
|
+
* Generated when a VoiceOver user places focus on or inside the component and performs a two finger scrub gesture (left, right, left).
|
|
27
|
+
* @platform ios
|
|
28
|
+
* */
|
|
29
|
+
| 'escape'
|
|
30
|
+
|
|
31
|
+
export type AccessibilityActionInfo = Readonly<{
|
|
32
|
+
name: AccessibilityActionName | string
|
|
33
|
+
label?: string | undefined
|
|
34
|
+
}>
|
|
35
|
+
|
|
36
|
+
export type AccessibilityRole =
|
|
37
|
+
| 'none'
|
|
38
|
+
| 'button'
|
|
39
|
+
| 'togglebutton'
|
|
40
|
+
| 'link'
|
|
41
|
+
| 'search'
|
|
42
|
+
| 'image'
|
|
43
|
+
| 'keyboardkey'
|
|
44
|
+
| 'text'
|
|
45
|
+
| 'adjustable'
|
|
46
|
+
| 'imagebutton'
|
|
47
|
+
| 'header'
|
|
48
|
+
| 'summary'
|
|
49
|
+
| 'alert'
|
|
50
|
+
| 'checkbox'
|
|
51
|
+
| 'combobox'
|
|
52
|
+
| 'menu'
|
|
53
|
+
| 'menubar'
|
|
54
|
+
| 'menuitem'
|
|
55
|
+
| 'progressbar'
|
|
56
|
+
| 'radio'
|
|
57
|
+
| 'radiogroup'
|
|
58
|
+
| 'scrollbar'
|
|
59
|
+
| 'spinbutton'
|
|
60
|
+
| 'switch'
|
|
61
|
+
| 'tab'
|
|
62
|
+
| 'tabbar'
|
|
63
|
+
| 'tablist'
|
|
64
|
+
| 'timer'
|
|
65
|
+
| 'list'
|
|
66
|
+
| 'toolbar'
|
|
67
|
+
|
|
68
|
+
export interface AccessibilityState {
|
|
69
|
+
/**
|
|
70
|
+
* When true, informs accessible tools if the element is disabled
|
|
71
|
+
*/
|
|
72
|
+
disabled?: boolean | undefined
|
|
73
|
+
/**
|
|
74
|
+
* When true, informs accessible tools if the element is selected
|
|
75
|
+
*/
|
|
76
|
+
selected?: boolean | undefined
|
|
77
|
+
/**
|
|
78
|
+
* For items like Checkboxes and Toggle switches, reports their state to accessible tools
|
|
79
|
+
*/
|
|
80
|
+
checked?: boolean | 'mixed' | undefined
|
|
81
|
+
/**
|
|
82
|
+
* When present, informs accessible tools if the element is busy
|
|
83
|
+
*/
|
|
84
|
+
busy?: boolean | undefined
|
|
85
|
+
/**
|
|
86
|
+
* When present, informs accessible tools the element is expanded or collapsed
|
|
87
|
+
*/
|
|
88
|
+
expanded?: boolean | undefined
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export interface AccessibilityValue {
|
|
92
|
+
/**
|
|
93
|
+
* The minimum value of this component's range. (should be an integer)
|
|
94
|
+
*/
|
|
95
|
+
min?: number | undefined
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* The maximum value of this component's range. (should be an integer)
|
|
99
|
+
*/
|
|
100
|
+
max?: number | undefined
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* The current value of this component's range. (should be an integer)
|
|
104
|
+
*/
|
|
105
|
+
now?: number | undefined
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* A textual description of this component's value. (will override minimum, current, and maximum if set)
|
|
109
|
+
*/
|
|
110
|
+
text?: string | undefined
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
export interface AccessibilityPropsAndroid {
|
|
114
|
+
/**
|
|
115
|
+
* Indicates to accessibility services whether the user should be notified when this view changes.
|
|
116
|
+
* Works for Android API >= 19 only.
|
|
117
|
+
* See http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion for references.
|
|
118
|
+
* @platform android
|
|
119
|
+
*/
|
|
120
|
+
accessibilityLiveRegion?: 'none' | 'polite' | 'assertive' | undefined
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* Controls how view is important for accessibility which is if it fires accessibility events
|
|
124
|
+
* and if it is reported to accessibility services that query the screen.
|
|
125
|
+
* Works for Android only. See http://developer.android.com/reference/android/R.attr.html#importantForAccessibility for references.
|
|
126
|
+
*
|
|
127
|
+
* Possible values:
|
|
128
|
+
* 'auto' - The system determines whether the view is important for accessibility - default (recommended).
|
|
129
|
+
* 'yes' - The view is important for accessibility.
|
|
130
|
+
* 'no' - The view is not important for accessibility.
|
|
131
|
+
* 'no-hide-descendants' - The view is not important for accessibility, nor are any of its descendant views.
|
|
132
|
+
*/
|
|
133
|
+
importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants' | undefined
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
type NodeHandle = number
|
|
137
|
+
|
|
138
|
+
export interface TargetedEvent {
|
|
139
|
+
target: number
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
interface TextLayoutLine {
|
|
143
|
+
ascender: number
|
|
144
|
+
capHeight: number
|
|
145
|
+
descender: number
|
|
146
|
+
height: number
|
|
147
|
+
text: string
|
|
148
|
+
width: number
|
|
149
|
+
x: number
|
|
150
|
+
xHeight: number
|
|
151
|
+
y: number
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
export interface TextLayoutEventData extends TargetedEvent {
|
|
155
|
+
lines: TextLayoutLine[]
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// Similar to React.SyntheticEvent except for nativeEvent
|
|
159
|
+
export interface NativeSyntheticEvent<T>
|
|
160
|
+
extends React.BaseSyntheticEvent<T, NodeHandle, NodeHandle> {}
|
|
161
|
+
|
|
162
|
+
export type AccessibilityActionEvent = NativeSyntheticEvent<
|
|
163
|
+
Readonly<{
|
|
164
|
+
actionName: string
|
|
165
|
+
}>
|
|
166
|
+
>
|
|
167
|
+
|
|
168
|
+
export interface LayoutRectangle {
|
|
169
|
+
x: number
|
|
170
|
+
y: number
|
|
171
|
+
width: number
|
|
172
|
+
height: number
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// @see TextProps.onLayout
|
|
176
|
+
export type LayoutChangeEvent = NativeSyntheticEvent<{ layout: LayoutRectangle }>
|
|
177
|
+
|
|
178
|
+
export interface AccessibilityPropsIOS {
|
|
179
|
+
/**
|
|
180
|
+
* A Boolean value indicating whether the accessibility elements contained within this accessibility element
|
|
181
|
+
* are hidden to the screen reader.
|
|
182
|
+
* @platform ios
|
|
183
|
+
*/
|
|
184
|
+
accessibilityElementsHidden?: boolean | undefined
|
|
185
|
+
|
|
186
|
+
/**
|
|
187
|
+
* A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
|
|
188
|
+
* @platform ios
|
|
189
|
+
*/
|
|
190
|
+
accessibilityViewIsModal?: boolean | undefined
|
|
191
|
+
|
|
192
|
+
/**
|
|
193
|
+
* When accessibile is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers).
|
|
194
|
+
* @platform ios
|
|
195
|
+
*/
|
|
196
|
+
onAccessibilityEscape?: (() => void) | undefined
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gesture.
|
|
200
|
+
* @platform ios
|
|
201
|
+
*/
|
|
202
|
+
onAccessibilityTap?: (() => void) | undefined
|
|
203
|
+
|
|
204
|
+
/**
|
|
205
|
+
* When accessible is true, the system will invoke this function when the user performs the magic tap gesture.
|
|
206
|
+
* @platform ios
|
|
207
|
+
*/
|
|
208
|
+
onMagicTap?: (() => void) | undefined
|
|
209
|
+
|
|
210
|
+
/**
|
|
211
|
+
* https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios
|
|
212
|
+
* @platform ios
|
|
213
|
+
*/
|
|
214
|
+
accessibilityIgnoresInvertColors?: boolean | undefined
|
|
215
|
+
}
|
|
216
|
+
export interface AccessibilityProps extends AccessibilityPropsAndroid, AccessibilityPropsIOS {
|
|
217
|
+
/**
|
|
218
|
+
* When true, indicates that the view is an accessibility element.
|
|
219
|
+
* By default, all the touchable elements are accessible.
|
|
220
|
+
*/
|
|
221
|
+
accessible?: boolean | undefined
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* Provides an array of custom actions available for accessibility.
|
|
225
|
+
*/
|
|
226
|
+
accessibilityActions?: ReadonlyArray<AccessibilityActionInfo> | undefined
|
|
227
|
+
|
|
228
|
+
/**
|
|
229
|
+
* Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
|
|
230
|
+
* label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
|
|
231
|
+
*/
|
|
232
|
+
accessibilityLabel?: string | undefined
|
|
233
|
+
|
|
234
|
+
/**
|
|
235
|
+
* Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.
|
|
236
|
+
*/
|
|
237
|
+
accessibilityRole?: AccessibilityRole | undefined
|
|
238
|
+
/**
|
|
239
|
+
* Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on.
|
|
240
|
+
*/
|
|
241
|
+
accessibilityState?: AccessibilityState | undefined
|
|
242
|
+
/**
|
|
243
|
+
* An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.
|
|
244
|
+
*/
|
|
245
|
+
accessibilityHint?: string | undefined
|
|
246
|
+
/**
|
|
247
|
+
* Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars,
|
|
248
|
+
* it contains range information (minimum, current, and maximum).
|
|
249
|
+
*/
|
|
250
|
+
accessibilityValue?: AccessibilityValue | undefined
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom action.
|
|
254
|
+
*/
|
|
255
|
+
onAccessibilityAction?: ((event: AccessibilityActionEvent) => void) | undefined
|
|
256
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ComponentType, ReactNode } from 'react'
|
|
2
|
+
import type { A11yProps, CopyLang, PressableState, Tokens, Variant, ViewProps } from './common'
|
|
3
|
+
|
|
4
|
+
type TooltipPosition = 'auto' | 'above' | 'right' | 'below' | 'left'
|
|
5
|
+
|
|
6
|
+
export interface TooltipProps extends A11yProps, ViewProps {
|
|
7
|
+
children?: ReactNode | ((state: PressableState) => React.ReactNode)
|
|
8
|
+
content?: ReactNode
|
|
9
|
+
copy?: CopyLang
|
|
10
|
+
position?: TooltipPosition
|
|
11
|
+
tokens?: Tokens
|
|
12
|
+
variant?: Variant
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
declare const Tooltip: ComponentType<TooltipProps>
|
|
16
|
+
|
|
17
|
+
export default Tooltip
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ComponentType } from 'react'
|
|
2
|
+
import type { A11yProps, PressableState, Tokens, Variant, ViewProps } from './common'
|
|
3
|
+
|
|
4
|
+
export interface TooltipButtonProps extends A11yProps, ViewProps {
|
|
5
|
+
pressableState?: Partial<PressableState>
|
|
6
|
+
tokens?: Tokens
|
|
7
|
+
variant?: Variant
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
declare const TooltipButton: ComponentType<TooltipButtonProps>
|
|
11
|
+
|
|
12
|
+
export default TooltipButton
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { ComponentType, ReactNode } from 'react'
|
|
2
|
+
import type {
|
|
3
|
+
A11yProps,
|
|
4
|
+
SkeletonProps,
|
|
5
|
+
TextAlign,
|
|
6
|
+
TextProps,
|
|
7
|
+
Tokens,
|
|
8
|
+
Variant,
|
|
9
|
+
ViewProps
|
|
10
|
+
} from './common'
|
|
11
|
+
|
|
12
|
+
type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
|
13
|
+
|
|
14
|
+
export interface TypographyProps extends A11yProps, TextProps, ViewProps {
|
|
15
|
+
tokens?: Tokens
|
|
16
|
+
variant?: Variant
|
|
17
|
+
heading?: HeadingTag | true
|
|
18
|
+
tag?: 'blockquote' | 'code' | 'del' | 'em' | 'ins' | 'li' | 'strong' | 'label' | HeadingTag
|
|
19
|
+
block?: boolean
|
|
20
|
+
align?: TextAlign
|
|
21
|
+
children?: ReactNode
|
|
22
|
+
skeleton?: SkeletonProps
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
declare const Typography: ComponentType<TypographyProps>
|
|
26
|
+
|
|
27
|
+
export default Typography
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ComponentType } from 'react'
|
|
2
|
+
import type { HTMLAttrs } from './common'
|
|
3
|
+
|
|
4
|
+
export interface WebVideoProps extends HTMLAttrs {
|
|
5
|
+
videoId: string
|
|
6
|
+
posterSrc: string
|
|
7
|
+
aspectRatio?: '16:9' | '4:3' | '1:1'
|
|
8
|
+
defaultVolume?: number
|
|
9
|
+
beginMuted?: boolean
|
|
10
|
+
videoLength: number
|
|
11
|
+
copy: 'en' | 'fr'
|
|
12
|
+
onStart: () => void
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
declare const WebVideo: ComponentType<WebVideoProps>
|
|
16
|
+
|
|
17
|
+
export default WebVideo
|