diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 823b04a5785..b55fe6a2950 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -52,6 +52,10 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
key="fathom"
defer
/>,
+ ,
]);
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/case-studies/ibm-commerce-platform.mdx b/src/pages/case-studies/ibm-commerce-platform.mdx
index 43eff86f2b4..b8d49561b93 100755
--- a/src/pages/case-studies/ibm-commerce-platform.mdx
+++ b/src/pages/case-studies/ibm-commerce-platform.mdx
@@ -5,6 +5,8 @@ description:
of the new self-service purchase experience on IBM.com.
---
+import KalturaVideo from 'components/KalturaVideo';
+
Learn about how the IBM.com team adopted Carbon for the design and development
@@ -192,7 +194,8 @@ passes, users may not have even noticed that the experience had changed and
returning users did not have to relearn the interface. Also, mixing the
experiences meant that got the team to their final result faster.
-
+
+
New modal sitting on the original page
### Iterating, iterating, iterating
diff --git a/src/pages/designing/tutorials.mdx b/src/pages/designing/tutorials.mdx
index d1f512e0693..e47675340dc 100644
--- a/src/pages/designing/tutorials.mdx
+++ b/src/pages/designing/tutorials.mdx
@@ -7,6 +7,7 @@ description:
import { Button } from 'carbon-components-react';
import { ArrowRight16 } from '@carbon/icons-react';
+import KalturaVideo from 'components/KalturaVideo';
@@ -29,7 +30,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.
-
+
For further learning, check out
[All about Carbon](/all-about-carbon/what-is-carbon),
@@ -42,7 +43,7 @@ This video covers how to design with components and type styles, and where to
find relevant guidance and resources while designing. It also goes through the
steps of getting set up with the Carbon Sketch kits and grid template.
-
+
To learn more about our Sketch kits, head over to
[Design kits](/designing/kits/sketch).
@@ -53,7 +54,7 @@ Learn about the fundamentals of using our 2x Grid. This video gives an overview
of basic grid terminology, breakpoints, the three grid modes, and some resources
to get started designing with the 2x Grid.
-
+
You can find detailed grid guidance on the
[2x Grid](/guidelines/2x-grid/overview) page.
diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx
index 8926259c969..be36e46f0f8 100644
--- a/src/pages/guidelines/2x-grid/implementation.mdx
+++ b/src/pages/guidelines/2x-grid/implementation.mdx
@@ -6,6 +6,8 @@ description:
tabs: ['Overview', 'Implementation']
---
+import KalturaVideo from 'components/KalturaVideo';
+
The IBM 2x Grid system is a fully responsive, robust, 16 column layout system
@@ -946,7 +948,7 @@ 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.
-
+
## Alignments
diff --git a/src/pages/guidelines/2x-grid/overview.mdx b/src/pages/guidelines/2x-grid/overview.mdx
index 8766fb17c69..c9585f50356 100644
--- a/src/pages/guidelines/2x-grid/overview.mdx
+++ b/src/pages/guidelines/2x-grid/overview.mdx
@@ -6,6 +6,8 @@ description:
tabs: ['Overview', 'Implementation']
---
+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.
-
+
## Resources
@@ -79,7 +81,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
@@ -194,7 +196,7 @@ for more information.
For best results, test designs and code at each of these standard breakpoints.
-
+
## Grid behaviors
@@ -229,7 +231,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
@@ -237,7 +239,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
@@ -255,7 +257,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:
@@ -321,7 +323,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.
-
+
@@ -331,7 +333,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.
-
+
@@ -342,7 +344,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
@@ -397,7 +399,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
@@ -425,7 +427,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/guidelines/color/overview.mdx b/src/pages/guidelines/color/overview.mdx
index 6c9d7e7bacd..ff95d75b7ff 100755
--- a/src/pages/guidelines/color/overview.mdx
+++ b/src/pages/guidelines/color/overview.mdx
@@ -8,6 +8,7 @@ tabs: ['Overview', 'Usage', 'Code']
import ColorBlock from 'components/ColorBlock';
import ColorGrid from 'components/ColorGrid';
+import KalturaVideo from 'components/KalturaVideo';
@@ -28,7 +29,7 @@ harmony through our User Interface design.
-
+
diff --git a/src/pages/guidelines/motion/choreography.mdx b/src/pages/guidelines/motion/choreography.mdx
index 7e779738f79..76038b705ce 100644
--- a/src/pages/guidelines/motion/choreography.mdx
+++ b/src/pages/guidelines/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/guidelines/motion/overview.mdx b/src/pages/guidelines/motion/overview.mdx
index f4e376beaa1..dfd8e33c791 100644
--- a/src/pages/guidelines/motion/overview.mdx
+++ b/src/pages/guidelines/motion/overview.mdx
@@ -8,6 +8,7 @@ tabs: ['Overview', 'Choreography', 'Code']
---
import { Tab } from 'carbon-components-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.
-
+
-
+
@@ -101,7 +102,7 @@ for expressive motion.
-
+
@@ -116,7 +117,7 @@ accelerations in motion. We commonly use one of these three types of easing.
-
+
@@ -130,7 +131,7 @@ possible.
-
+
@@ -144,14 +145,14 @@ of a motion. Expanding tiles and the sorting of table rows are good examples.
-
+
-
+
@@ -173,14 +174,14 @@ opening or toggle switching should also use this style.
-
+
-
+
@@ -206,14 +207,14 @@ that it would come to rest just outside the view, and ready to be recalled.
-
+
-
+
@@ -257,7 +258,7 @@ longer the animation takes.
-
+