feat: added the videocarousel (#1500)

README.md

@@ -1889,6 +1889,58 @@ Use `theme` to match the text color to your color scheme. Defaults to `dark`.
 
 Use `repeat` to define how many code sections are part of the carousel.
 
+### VideoCarousel
+
+VideoCarousel is used to show the information along with videos and buttons.
+
+![Carousel](docs/images/videoCarousel.png)
+
+Use `slots` to identify the markdown content:
+
+- `heading` (optional)
+- `text` (required)
+- `buttons`(optional)
+
+Use `videos` give the imported video varaiables in an array example `videos={[video1,video2,...]}`
+
+Use `position` to position the video left/right. By default it position to left.
+
+Use `variant` to specify full width or half width values are fullWidth,halfWidth. By default it is fullWidth.
+
+Use `enableNavigation` to display navigation icon. By default it is in false. If you want naviagtion set it to true
+
+Use `navigationIconColor` to change the icon color. By default it is black.
+
+```
+import video1 from './video1.mp4'
+import video2 from "./video2.mp4"
+import video3 from "./video3.mp4"
+
+<VideoCarousel slots="heading, text, buttons" repeat="3" theme="lightest" videos={[video1,video2,video3]} isCenter position="right" variant = 'fullWidth' enableNavigation={true} navigationIconColor="#1473E6"/>
+
+#### Acrobat on web and desktop 
+
+The Adobe Express full editor allows users to edit images and quickly create eye-catching cover and divider pages within Acrobat.
+
+* [Learn more](../guides)
+* [View docs](../guides)
+
+#### Breakout EDU 
+
+Breakout EDU is an educational game platform for teachers and students that enables users to bring more creativity to virtual games with the Adobe Express full editor.
+
+* [Learn more](../guides)
+* [View docs](../guides)
+
+### Letter 
+
+Letter is an email newsletter tool that helps content creators, designers, and developers make standout communications with the Adobe Express full editor.
+
+* [Learn more](../guides)
+* [View docs](../guides)
+
+```
+
 ### TeaserBlock
 
 Teaser component is used to place the text over the background image/color

example/src/pages/accordion/accordion.md

@@ -0,0 +1,2 @@
+### Accordion
+

example/src/pages/index.md

@@ -26,6 +26,7 @@ import AddAnalyticsUnity from './add-analytics/unity.md'
 import AddAnalyticsReactNative from './add-analytics/react-native.md'
 import AddAnalyticsXamarin from './add-analytics/xamarin.md'
 import TeaserComp from './teaser/teasercomp.md'
+import VideoCarouselComp from './videoCarousel/videoCarousel.md'
 import blackbg from "./teaser/black_power.jpg"
 
 <Hero slots="image, heading, text" background="rgb(64, 34, 138)" hideBreadcrumbNav={false}/>
@@ -149,12 +150,13 @@ Accordion item is to expand and collapse the content by clicking the icon. By de
 
    <AccordionItem header="AccordionItemDefaultOpen" isOpen>
 
-   AccordionItem default expand
+      AccordionItem default expand
 
    </AccordionItem>    
 
 </Accordion>
 
+<VideoCarouselComp />
 
 ## Inline Alerts {#Categories}
 

example/src/pages/videoCarousel/videoCarousel.md

@@ -0,0 +1,21 @@
+import video1 from './video1.mp4'
+import video2 from "./video2.mp4"
+import video3 from "./video3.mp4"
+
+## VideoCarousel
+
+Videocarousel is used to display the information with video and text. We can position the video using position attribute
+
+<VideoCarousel slots="heading, text" repeat="3" theme="lightest" videos={[video1,video2,video3]} isCenter position="right" variant = 'fullWidth' enableNavigation={true} navigationIconColor="#1473E6" />
+
+### Acrobat on web and desktop 
+
+The Adobe Express full editor allows users to edit images and quickly create eye-catching cover and divider pages within Acrobat.
+
+### Breakout EDU 
+
+Breakout EDU is an educational game platform for teachers and students that enables users to bring more creativity to virtual games with the Adobe Express full editor.
+
+### Letter 
+
+Letter is an email newsletter tool that helps content creators, designers, and developers make standout communications with the Adobe Express full editor.

packages/gatsby-theme-aio/src/components/MDXFilter/MDXBlocks.js

@@ -43,6 +43,7 @@ import { OldProductCardGrid } from '../OldProductCardGrid';
 import { AnchorButtonGroup } from '../AnchorButtonGroup';
 import { DCSummaryBlock } from '../DCSummaryBlock';
 import {TeaserBlock} from "../TeaserBlock";
+import { VideoCarousel } from '../VideoCarousel';
 export const MDXBlocks = {
   Hero,
   DiscoverBlock,
@@ -76,5 +77,6 @@ export const MDXBlocks = {
   ),
   Carousel,
   AnchorButtonGroup,
-  DCSummaryBlock
+  DCSummaryBlock,
+  VideoCarousel
 };

packages/gatsby-theme-aio/src/components/TeaserBlock/index.js

@@ -87,13 +87,13 @@ const TeaserBlock = ({
 
 TeaserBlock.propTypes = {
     theme: PropTypes.string,
-    bgURL: PropTypes.element,
+    bgURL: PropTypes.string,
     heading: PropTypes.element,
     textColor: PropTypes.string,
     backgroundColor: PropTypes.string,
     text: PropTypes.element,
     buttons: PropTypes.element,
-    position: PropTypes.element,
+    position: PropTypes.string,
     variant: PropTypes.element
 };