Merge pull request #9 from DolbyIO/RC-0.5.11

RC-0.5.11
voxeet · Aug 31, 2022 · 67a4921 · 67a4921
2 parents 3f37f9d + cb263fe
commit 67a4921
Show file tree

Hide file tree

Showing 196 changed files with 3,796 additions and 1,804 deletions.
diff --git a/README.md b/README.md
diff --git a/__mocks__/MediaStream.mock.ts b/__mocks__/MediaStream.mock.ts
@@ -69,3 +69,5 @@ Object.defineProperty(global.navigator, 'mediaDevices', {
  enumerateDevices: mockEnumerateDevices,
  },
 });
+
+export default {};
diff --git a/__mocks__/WindowOrientation.mock.ts b/__mocks__/WindowOrientation.mock.ts
@@ -0,0 +1,5 @@
+Object.defineProperty(window, 'innerWidth', {
+ value: {
+ innerWidth: 1024,
+ },
+});
diff --git a/...mentation/components/SpeakingIndicator.md → ...entation/components/AnimationIndicator.md b/...mentation/components/SpeakingIndicator.md → ...entation/components/AnimationIndicator.md
@@ -1,13 +1,14 @@
-# SpeakingIndicator
+# AnimationIndicator
 
-The SpeakingIndicator component is responsible for indicating if a participant is actively talking.
+The AnimationIndicator component is responsible for indicating status update by playing a specific animation.
 
 ## Props
 
 | Name | Type | Default | Description |
 | -------------------- | ----------------------- | ------- | --------------------------------------------------------- |
 | `backgroundColor`? | ColorKey | - | The background color of the indicator. |
-| `iconColor` ? | ColorKey | - | The color of the displayed speaking icon. |
+| `contentColor` ? | ColorKey | - | The color of the animation content. |
+| `animationData` | Record<string, unknown> | - | The animation data which could be played by lottie-web
 | `size` ? | 's' , 'm' | 'm' | The size of the indicator. |
 | `testID` ? | string | - | The unique E2E test handler. |
 | `...HTMLDivElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the div element. |
@@ -17,5 +18,6 @@ The SpeakingIndicator component is responsible for indicating if a participant i
 ### React
 
 ```javascript
-return <SpeakingIndicator size="small" />;
+import animationData from '<your lottie animation data path>'
+return <AnimationIndicator animationData={animationData} />;
 ```
diff --git a/documentation/components/Badge.md b/documentation/components/Badge.md
@@ -4,13 +4,13 @@ The Badge component generates a small label that can contain additional descript
 
 ## Props
 
-| Name | Type | Default | Description |
-| -------------------- | ----------------------- | ---------- | --------------------------------------------------------- |
-| `content`? | ReactNode  | - | The content of the badge. |
-| `backgroundColor`? | ColorKey | 'grey.700' | The background color of the badge. |
-| `contentColor`? | ColorKey | 'white' | The color of the badge's content. |
-| `testID`? | string | | The unique E2E test handler. |
-| `...HTMLDivElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the div element. |
+| Name | Type  | Default | Description |
+| -------------------- | ------------------------- | ---------- | --------------------------------------------------------- |
+| `content`? | string | number | boolean | - | The content of the badge. |
+| `backgroundColor`? | ColorKey  | 'grey.700' | The background color of the badge. |
+| `contentColor`? | ColorKey  | 'white' | The color of the badge's content. |
+| `testID`? | string  | | The unique E2E test handler. |
+| `...HTMLDivElement`? | Partial(HTMLDivElement)  | - | Props that will be passed to the root of the div element. |
 
 ## Examples
 

diff --git a/documentation/components/CopyConferenceLinkButton.md b/documentation/components/CopyConferenceLinkButton.md
@@ -4,15 +4,15 @@ The CopyConferenceLinkButton component is responsible for copying the conference
 
 ## Props
 
-| Name | Type | Default | Description |
-| --------------------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------- |
-| `url` | string | - | The conference URL that will be copied to clipboard after clicking. |
-| `tooltipText`  | string | - | The informative text to display inside the Tooltip component. |
-| `successText`  | string | - | The text to display for one second in the Tooltip component after a successful completion of the copy action. |
-| `tooltipPosition`? | TooltipProps['position'] | top | The position of the Tooltip element. |
-| `...IconButtonProps`? | Partial(IconButtonProps) | - | Props to pass to the IconButton component. |
-| `testID` ? | string | - | The unique E2E test handler. |
-
+| Name | Type | Default | Description  |
+|-----------------------|--------------------------|---------|-----------------------------------------------------------------------------------------------------------------------------------|
+| `url` | string | - | The conference URL that will be copied to clipboard after clicking.  |
+| `tooltipText`? | string | - | The informative text to display inside the Tooltip component.  |
+| `successText`? | string | - | The text to display for one second in the Tooltip component after a successful completion of the copy action.  |
+| `tooltipPosition`? | TooltipProps['position'] | top | The position of the Tooltip element.  |
+| `...IconButtonProps`? | Partial(IconButtonProps) | - | Props to pass to the IconButton component.  |
+| `testID` ? | string | - | The unique E2E test handler.  |
+| `children`? | ReactNode | - | Children prop for labeled copy button - while using children component is rendered as a regular button with share functionalities |
 ## Examples
 
 ### React

diff --git a/documentation/components/DeviceInfo.md b/documentation/components/DeviceInfo.md
diff --git a/documentation/components/Icon.md b/documentation/components/Icon.md
@@ -4,39 +4,39 @@ The Icon component is responsible for displaying icon files in SVG format.
 
 ## Props
 
-| Name | Type | Default | Description |
-| -------------------- | ---------------------------- | --------- | --------------------------------------------------------- |
-| `name` | IconsKeys  | - | The name of the icon file. |
-| `color`? | ColorKey | - | The color of the icon. |
-| `colorTone`? | 'light' / 'default' / 'dark' | 'default' | The color tone of the icon. |
-| `size`? | 'xxs' / 'xs' / 's' / 'm'   | 'm' | The size of the icon. |
-| `testID`? | string | - | The unique E2E test handler. |
-| `...HTMLDivElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the div element. |
+| Name | Type  | Default | Description |
+| -------------------- | ------------------------------ | --------- | --------------------------------------------------------- |
+| `name` | IconComponentName | - | The name of the icon file. |
+| `color`? | ColorKey  | - | The color of the icon. |
+| `colorTone`? | 'light' / 'default' / 'dark'  | 'default' | The color tone of the icon. |
+| `size`? | 'xxs' / 'xs' / 's' / 'm' / 'l' | 'm' | The size of the icon. |
+| `testID`? | string  | - | The unique E2E test handler. |
+| `...HTMLDivElement`? | Partial(HTMLDivElement)  | - | Props that will be passed to the root of the div element. |
 
 ## Available icons
 
 | Name | Icon |
 | --------------- | ----------------------------------------------------------------------- |
-| camera | ![Alt text](../../packages/common/src/assets/icons/camera.svg) |
-| camera-off | ![Alt text](../../packages/common/src/assets/icons/camera-off.svg) |
-| camera-reverse | ![Alt text](../../packages/common/src/assets/icons/camera-reverse.svg) |
-| chat | ![Alt text](../../packages/common/src/assets/icons/chat.svg) |
-| copy | ![Alt text](../../packages/common/src/assets/icons/copy.svg) |
-| dots-horizontal | ![Alt text](../../packages/common/src/assets/icons/dots-horizontal.svg) |
-| dots-vertical | ![Alt text](../../packages/common/src/assets/icons/dots-vertical.svg) |
-| handset | ![Alt text](../../packages/common/src/assets/icons/handset.svg) |
-| headphones | ![Alt text](../../packages/common/src/assets/icons/headphones.svg) |
-| info | ![Alt text](../../packages/common/src/assets/icons/info.svg) |
-| microphone | ![Alt text](../../packages/common/src/assets/icons/microphone.svg) |
-| microphone-off | ![Alt text](../../packages/common/src/assets/icons/microphone-off.svg) |
-| participants | ![Alt text](../../packages/common/src/assets/icons/participants.svg) |
-| pin | ![Alt text](../../packages/common/src/assets/icons/pin.svg) |
-| present | ![Alt text](../../packages/common/src/assets/icons/present.svg) |
-| record | ![Alt text](../../packages/common/src/assets/icons/record.svg) |
-| send-message | ![Alt text](../../packages/common/src/assets/icons/send-message.svg) |
-| settings | ![Alt text](../../packages/common/src/assets/icons/settings.svg) |
-| speaker | ![Alt text](../../packages/common/src/assets/icons/speaker.svg) |
-| speaker-off | ![Alt text](../../packages/common/src/assets/icons/speaker-off.svg) |
+| camera | ![Alt text](./IconComponents/Camera.tsx) |
+| camera-off | ![Alt text](./IconComponents/CameraOff.tsx) |
+| camera-reverse | ![Alt text](./IconComponents/CameraReverse.tsx) |
+| chat | ![Alt text](./IconComponents/Chat.tsx) |
+| copy | ![Alt text](./IconComponents/Copy.tsx) |
+| dots-horizontal | ![Alt text](./IconComponents/DotsHorizontal.tsx) |
+| dots-vertical | ![Alt text](./IconComponents/DotsVertical.tsx) |
+| handset | ![Alt text](./IconComponents/Handset.tsx) |
+| headphones | ![Alt text](./IconComponents/Headphones.tsx) |
+| info | ![Alt text](./IconComponents/info.tsx) |
+| microphone | ![Alt text](./IconComponents/Microphone.tsx) |
+| microphone-off | ![Alt text](./IconComponents/Microphone-off.tsx) |
+| participants | ![Alt text](./IconComponents/Participants.tsx) |
+| pin | ![Alt text](./IconComponents/Pin.tsx) |
+| present | ![Alt text](./IconComponents/Present.tsx) |
+| record | ![Alt text](./IconComponents/Record.tsx) |
+| send-message | ![Alt text](./IconComponents/Send-message.tsx) |
+| settings | ![Alt text](./IconComponents/Settings.tsx) |
+| speaker | ![Alt text](./IconComponents/Speaker.tsx) |
+| speaker-off | ![Alt text](./IconComponents/Speaker-off.tsx) |
 
 ## Examples
 

diff --git a/documentation/components/IconButton.md b/documentation/components/IconButton.md
@@ -4,22 +4,22 @@ The IconButton component is responsible for rectangular buttons that contain ico
 
 ## Props
 
-| Name | Type | Default | Description |
-| ----------------------- | --------------------------------- | -------- | ------------------------------------------------------------------------------------------------------ |
-| `variant` ? | 'square', 'rectangular', 'circle' | 'square' | The variant of style that allows you to distinguish between actions of different importance in the UI. |
-| `backgroundColor` ? | ColorKey , [ColorKey, ColorKey] | - | The background color of the button. |
-| `iconColor` ? | ColorKey | - | The color of the icon. |
-| `badge` ? | boolean  | false | The small circular indicator that appears at the top of the button. |
-| `badgeColor` ? | ColorKey | - | The color of the badge. |
-| `badgeContentColor` ? | ColorKey | - | The color of text that appears is in the badge. |
-| `strokeColor` ? | ColorKey | - | The color of the button's border. |
-| `size` ? | 'xxs' , 'xs' , 's' , 'm'  | 'm' | The size of the button. |
-| `disabled` ? | boolean | false | The activity state. |
-| `icon` | Icon | - | The name of the icon. |
-| `onClick` | Function | - | The event handler property for processing click events on the button. |
-| `testID` ? | string | - | The unique E2E test handler. |
-| `style` ? | CSSProperties | - | The style of the layout. |
-| `...HTMLButtonElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the button element. |
+| Name | Type  | Default | Description |
+| ----------------------- | ------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------ |
+| `variant` ? | 'square', 'rectangular', 'circle'  | 'square' | The variant of style that allows you to distinguish between actions of different importance in the UI. |
+| `backgroundColor` ? | ColorKey , [ColorKey, ColorKey]  | - | The background color of the button. |
+| `iconColor` ? | ColorKey  | - | The color of the icon. |
+| `badge` ? | string | number | boolean | false | The small circular indicator that appears at the top of the button. |
+| `badgeColor` ? | ColorKey  | - | The color of the badge. |
+| `badgeContentColor` ? | ColorKey  | - | The color of text that appears is in the badge. |
+| `strokeColor` ? | ColorKey  | - | The color of the button's border. |
+| `size` ? | 'xxs' , 'xs' , 's' , 'm', "l" | 'm' | The size of the button. |
+| `disabled` ? | boolean  | false | The activity state. |
+| `icon` | Icon  | - | The name of the icon. |
+| `onClick` | Function  | - | The event handler property for processing click events on the button. |
+| `testID` ? | string  | - | The unique E2E test handler. |
+| `style` ? | CSSProperties  | - | The style of the layout. |
+| `...HTMLButtonElement`? | Partial(HTMLDivElement)  | - | Props that will be passed to the root of the button element. |
 
 ## Examples