diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index d29d3538de2..c598cf832fc 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -61,6 +61,10 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
name="twitter:creator"
content="@_carbondesign"
/>,
+ ,
]);
setPostBodyComponents([
diff --git a/src/components/KalturaVideo/KalturaVideo.js b/src/components/KalturaVideo/KalturaVideo.js
new file mode 100644
index 00000000000..7793ca3cebb
--- /dev/null
+++ b/src/components/KalturaVideo/KalturaVideo.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+/**
+ * KalturaVideo component: A video player container for Kaltura videos.
+ *
+ * @param {object} videoProps - KalturaVideo component props
+ * @param {string} videoProps.videoid - The ID of the Kaltura video to be played.
+ * @param {boolean} videoProps.hideCaption - Determines if caption should be hidden.
+ * @returns {JSX.Element} JSX element containing the video player container.
+ */
+const KalturaVideo = ({ videoid, hideCaption = false }) => {
+ let videoProps = {
+ 'video-id': videoid,
+ }
+
+ if (hideCaption) {
+ videoProps['hide-caption'] = true;
+ }
+
+ return (
+
+
+
+ );
+};
+
+/**
+ * @typedef {object} KalturaVideoProps
+ *
+ * @property {string} videoid - The ID of the Kaltura video to be played.
+ */
+KalturaVideo.propTypes = {
+ hideCaption: PropTypes.bool,
+ videoid: PropTypes.string.isRequired,
+};
+
+/**
+ * @type {{hideCaption: boolean}}
+ */
+KalturaVideo.defaultProps = {
+ hideCaption: false,
+}
+
+export default KalturaVideo;
diff --git a/src/components/KalturaVideo/index.js b/src/components/KalturaVideo/index.js
new file mode 100644
index 00000000000..2e0c6962167
--- /dev/null
+++ b/src/components/KalturaVideo/index.js
@@ -0,0 +1,3 @@
+import KalturaVideo from './KalturaVideo';
+
+export default KalturaVideo;
diff --git a/src/pages/all-about-carbon/what-is-carbon.mdx b/src/pages/all-about-carbon/what-is-carbon.mdx
index 248681d729b..00d9ef87cca 100755
--- a/src/pages/all-about-carbon/what-is-carbon.mdx
+++ b/src/pages/all-about-carbon/what-is-carbon.mdx
@@ -6,6 +6,8 @@ description:
consists of working code, design tools, and more.
---
+import KalturaVideo from 'components/KalturaVideo';
+
Carbon is IBM's open source design system for products and digital experiences.
@@ -52,7 +54,7 @@ Learn about Carbon and its history. This video covers how the IBM Design
Language is applied to Carbon, how Carbon interacts with domain level guidance,
and what it means to be an open source design system.
-
+
## How Carbon works
diff --git a/src/pages/elements/2x-grid/overview.mdx b/src/pages/elements/2x-grid/overview.mdx
index 25b0847f15a..9c77fb19fa0 100644
--- a/src/pages/elements/2x-grid/overview.mdx
+++ b/src/pages/elements/2x-grid/overview.mdx
@@ -6,6 +6,8 @@ description:
tabs: ['Overview', 'Usage', 'Code']
---
+import KalturaVideo from 'components/KalturaVideo';
+
It’s fundamental to everything we design. The 2x Grid is the geometric
@@ -25,7 +27,7 @@ creative decision-making.
-
+
## Mini unit
@@ -42,7 +44,7 @@ Margin and padding are always applied in fixed mini unit multiples. Boxes are
sized by applying a sizing scale based on either fixed mini units or fluid
column widths, along with a core set of aspect ratios.
-
+
## 2x Grid fundamentals
@@ -158,7 +160,7 @@ for more information.
For best results, test designs and code at each of these standard breakpoints.
-
+
## Grid behaviors
@@ -193,7 +195,7 @@ ratios. Margin and padding are fixed multiples of mini units. In between
breakpoints, actual column width is a percentage of the grid area, not a mini
unit multiple. Content scales fluidly.
-
+
### Fixed boxes
@@ -201,7 +203,7 @@ A grid can be formed with fixed boxes by arranging tiles in an inline block,
icons in toolbars, etc. Column count grows with browser width. Tiles wrap to the
next line, or are sometimes truncated with an overflow scroll.
-
+
First choose a base size from the [sizing scale](#sizing-scale), then build up
each box in multiples of the base size, following recommended
@@ -219,7 +221,7 @@ Use the [sizing scale](#sizing-scale) to size a fixed dimension. Use
column-width multiples to size a grid-fluid dimension. Aspect ratios do not
apply.
-
+
Here are some common UI behaviors:
@@ -285,7 +287,7 @@ The collapsed Flexible Panel expands when the user hovers over any portion of
it. When flexible panels expand, they either condense both the content and the
grid or they push content beyond the edge of the browser.
-
+
@@ -295,7 +297,7 @@ grid or they push content beyond the edge of the browser.
Fixed panels maintain a static width, cannot be collapsed, and also exist
outside of the responsive grid.
-
+
@@ -306,7 +308,7 @@ This panel style floats above the primary content area and does not affect the
responsive grid. Floating panels conceal any UI elements below them and must be
dismissible by the user. Inline menus, dropdowns and tooltips also float.
-
+
## Sizing scale
@@ -361,7 +363,7 @@ etc. Check out the [breakpoints table](#breakpoints) for pixel sizings.
After determining your base size, multiply it as needed for each use. For box
sizing, apply an [aspect ratio](#aspect-ratio) too.
-
+
### Aspect ratio
@@ -389,7 +391,7 @@ it by 4 in width and 2 in height, for a fixed box size of 320 by 160.
Use the fixed sizing scale to set vertical spacing between sections, by adding
it to the top or bottom margin of a box:
-
+
+
diff --git a/src/pages/elements/2x-grid/usage.mdx b/src/pages/elements/2x-grid/usage.mdx
index c06fc467816..576e27ae1f3 100644
--- a/src/pages/elements/2x-grid/usage.mdx
+++ b/src/pages/elements/2x-grid/usage.mdx
@@ -8,6 +8,7 @@ tabs: ['Overview', 'Usage', 'Code']
import { IbmSecurity } from '@carbon/icons-react';
import { gridTable } from './Grid.module.scss';
+import KalturaVideo from 'components/KalturaVideo';
@@ -281,7 +282,7 @@ navigation panel the most common example of a grid influencer in our ecosystem.
When opening and closing the left-hand navigation, the number of columns remains
the same but responds fluidly to the allotted space.
-
+
#### Slide-in side panels
diff --git a/src/pages/elements/color/overview.mdx b/src/pages/elements/color/overview.mdx
index 78222319ca0..54e6c70bb6a 100755
--- a/src/pages/elements/color/overview.mdx
+++ b/src/pages/elements/color/overview.mdx
@@ -8,6 +8,7 @@ tabs: ['Overview', 'Usage', 'Tokens', 'Code']
import ColorBlock from 'components/ColorBlock';
import ColorGrid from 'components/ColorGrid';
+import KalturaVideo from 'components/KalturaVideo';
@@ -31,7 +32,7 @@ harmony through our User Interface design.
-
+
diff --git a/src/pages/elements/motion/choreography.mdx b/src/pages/elements/motion/choreography.mdx
index 600ef781a3f..28cfbb99cac 100644
--- a/src/pages/elements/motion/choreography.mdx
+++ b/src/pages/elements/motion/choreography.mdx
@@ -7,6 +7,8 @@ description:
tabs: ['Overview', 'Choreography', 'Code']
---
+import KalturaVideo from 'components/KalturaVideo';
+
Paths
@@ -22,7 +24,7 @@ which never run diagonally.
-
+
@@ -32,7 +34,7 @@ which never run diagonally.
-
+
@@ -42,12 +44,12 @@ which never run diagonally.
-
+
-
+
@@ -55,12 +57,12 @@ which never run diagonally.
-
+
-
+
@@ -88,7 +90,7 @@ to their difference in size.
-
+
@@ -102,7 +104,7 @@ to clarify their respective spatial locations.
-
+
@@ -110,7 +112,7 @@ to clarify their respective spatial locations.
-
+
@@ -125,12 +127,12 @@ motion signals cancellation.
-
+
-
+
@@ -144,7 +146,7 @@ buttons, to create a graceful transition.
-
+
@@ -152,7 +154,7 @@ buttons, to create a graceful transition.
-
+
@@ -170,7 +172,7 @@ delay should be adjusted to ensure that total time is still within 500 ms.
-
+
@@ -183,7 +185,7 @@ user’s attention on them.
-
+
diff --git a/src/pages/elements/motion/overview.mdx b/src/pages/elements/motion/overview.mdx
index 4ec1b6cd4db..1ad1ede194f 100644
--- a/src/pages/elements/motion/overview.mdx
+++ b/src/pages/elements/motion/overview.mdx
@@ -8,6 +8,7 @@ tabs: ['Overview', 'Choreography', 'Code']
---
import { Tab } from '@carbon/react';
+import KalturaVideo from 'components/KalturaVideo';
@@ -28,7 +29,7 @@ make progress.
-
+
## Carbon in motion
@@ -70,13 +71,13 @@ user’s attention and offer a rhythmic break to the productive experience.
-
+
-
+
@@ -102,7 +103,7 @@ for expressive motion.
-
+
@@ -117,7 +118,7 @@ accelerations in motion. We commonly use one of these three types of easing.
-
+
@@ -131,7 +132,7 @@ possible.
-
+
@@ -145,14 +146,14 @@ of a motion. Expanding tiles and the sorting of table rows are good examples.
-
+
-
+
@@ -174,14 +175,14 @@ opening or toggle switching should also use this style.
-
+
-
+
@@ -207,14 +208,14 @@ that it would come to rest just outside the view, and ready to be recalled.
-
+
-
+
@@ -258,7 +259,7 @@ longer the animation takes.
-
+