Move custom branding out of in-progress and into beta builds (#3968)

Author: JamesBurnside

change-beta/@azure-communication-react-0228f556-3eeb-4eb0-a2bf-5c662038a560.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Custom Branding",
+  "comment": "Include ability to set background image and logo in CallComposites in beta packages",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-0228f556-3eeb-4eb0-a2bf-5c662038a560.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Custom Branding",
+  "comment": "Include ability to set background image and logo in CallComposites in beta packages",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

common/config/babel/features.js

@@ -99,8 +99,6 @@ module.exports = {
     "gallery-layout-composite",
     // feature for hiding attendee name in the teams meeting
     "hide-attendee-name",
-    // custom branding for the composites
-    "custom-branding",
     // Feature for sounds during different calling events
     "calling-sounds",
     // Feature for end of call survey

packages/storybook/stories/CallComposite/CallCompositeDocs.tsx

@@ -35,13 +35,15 @@ const callParticipantsLocatorSnippet = `
 
 const customBrandingSnippet = `
 <CallComposite options={{
-  logo: {
-    url: 'https://...',
-    alt: 'My company logo',
-    shape: 'circle'
-  },
-  backgroundImage: {
-    url: 'https://...'
+  branding: {
+    logo: {
+      url: 'https://...',
+      alt: 'My company logo',
+      shape: 'circle'
+    },
+    backgroundImage: {
+      url: 'https://...'
+    }
   }
 }} />
 `;
@@ -190,7 +192,7 @@ export const Docs: () => JSX.Element = () => {
       </div>
 
       <Heading>Custom Branding</Heading>
-      <SingleLineBetaBanner version="1.12.0-beta.1" />
+      <SingleLineBetaBanner version="1.13.0-beta.1" />
       <Description>
         Along with applying a Fluent Theme to style the composites, you can also inject your own custom branding. You
         can inject a background and logo into the Composite configuration page to present to your users. This is done by

packages/storybook/stories/CallWithChatComposite/CallWithChatCompositeDocs.tsx

@@ -32,13 +32,15 @@ options={{
 
 const customBrandingSnippet = `
 <CallWithChatComposite options={{
-  logo: {
-    url: 'https://...',
-    alt: 'My company logo',
-    shape: 'circle'
-  },
-  backgroundImage: {
-    url: 'https://...'
+  branding: {
+    logo: {
+      url: 'https://...',
+      alt: 'My company logo',
+      shape: 'circle'
+    },
+    backgroundImage: {
+      url: 'https://...'
+    }
   }
 }} />
 `;
@@ -146,7 +148,7 @@ export const Docs: () => JSX.Element = () => {
       </Description>
 
       <Heading>Custom Branding</Heading>
-      <SingleLineBetaBanner version="1.12.0-beta.1" />
+      <SingleLineBetaBanner version="1.13.0-beta.1" />
       <Description>
         Along with applying a Fluent Theme to style the composites, you can also inject your own custom branding. You
         can inject a background and logo into the Composite configuration page to present to your users. This is done by