@octaviaflow/mdx-components 1.1.3

package/components/gif-player/gif-player.tsx

@@ -0,0 +1,150 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright OctaviaFlow 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {
+  PauseOutline,
+  PauseOutlineFilled,
+  PlayOutline,
+  PlayOutlineFilled,
+} from "@octaviaflow/icons-react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { Children, ReactNode, useState } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+type Color = "light" | "dark";
+
+interface GifPlayerProps {
+  children: ReactNode;
+  className?: string | null;
+  color?: Color | null;
+  isInDialog?: boolean | null;
+}
+
+const Pause = ({ hovering }: { hovering: boolean }) =>
+  hovering ? <PauseOutlineFilled size={24} /> : <PauseOutline size={24} />;
+
+const Play = ({ hovering }: { hovering: boolean }) =>
+  hovering ? <PlayOutlineFilled size={24} /> : <PlayOutline size={24} />;
+
+const ToggleIcon = ({
+  paused,
+  hovering,
+}: {
+  hovering: boolean;
+  paused: boolean;
+}) => (paused ? <Play hovering={hovering} /> : <Pause hovering={hovering} />);
+/**
+ * The `<GifPlayer>` component is used to pause and play images that are gif’s.
+ * It works by replacing the gif with a static image on pause.
+ */
+export const GifPlayer: MdxComponent<GifPlayerProps> = ({
+  children,
+  color,
+  className,
+  isInDialog,
+}) => {
+  const [paused, setPaused] = useState(false);
+
+  const [hovering, setHovering] = useState(false);
+  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setPaused(!paused);
+  };
+
+  const controlsClassNames = clsx(withPrefix("controls"), {
+    [withPrefix("dark")]: color === "dark",
+  });
+
+  const containerClassNames = clsx(
+    className,
+    withPrefix("gif-player-container"),
+    {
+      [withPrefix("gif-in-dialog")]: isInDialog,
+    },
+  );
+
+  const staticImageClassNames = clsx(withPrefix("img-hidden"), {
+    [withPrefix("img-displayed")]: paused,
+  });
+
+  const gifClassNames = clsx(withPrefix("gif-displayed"), {
+    [withPrefix("gif-hidden")]: paused,
+  });
+
+  const childrenArray = Children.toArray(children);
+
+  const labelText = paused
+    ? "Toggleable animation paused"
+    : "Toggleable animation playing";
+
+  return (
+    <div className={containerClassNames}>
+      <div className={gifClassNames} aria-hidden={paused ? "true" : false}>
+        {childrenArray[0]}
+      </div>
+      <div
+        className={staticImageClassNames}
+        aria-hidden={paused ? false : "true"}
+      >
+        {childrenArray[1]}
+      </div>
+      <button
+        aria-pressed={paused ? "true" : "false"}
+        type="button"
+        aria-label={labelText}
+        className={controlsClassNames}
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+        onClick={onClick}
+        onKeyDown={(e) => {
+          // Stop keyDown event from propagating to ImageGalleryImage component.
+          e.stopPropagation();
+        }}
+      >
+        <ToggleIcon hovering={hovering} paused={paused} />
+      </button>
+    </div>
+  );
+};
+
+GifPlayer.propTypes = {
+  /**
+   * Only pass in the 2 images to be rendered, first must be gif, second must be static image
+   */
+  children: PropTypes.oneOfType([
+    PropTypes.element.isRequired,
+    PropTypes.arrayOf(PropTypes.element.isRequired),
+  ]).isRequired,
+  /**
+   * Specify optional className
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if icon color should be "dark" or "light"
+   */
+  color: PropTypes.oneOf<Color>(["light", "dark"]),
+  /**
+   * Specify if the gifPlayer is inside the expanded ImageGallery
+   */
+  isInDialog: PropTypes.bool,
+};
+
+GifPlayer.defaultProps = {
+  color: "light",
+  isInDialog: false,
+};

package/components/grid-transform/_grid.scss

@@ -0,0 +1,13 @@
+/*
+ * Copyright OctaviaFlow 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@use '@carbon/react/scss/spacing' as spacing;
+
+@use '../utils' as *;
+
+.#{with-prefix('grid')} {
+  margin-block-start: spacing.$spacing-06;
+}

package/components/grid-transform/column.tsx

@@ -0,0 +1,102 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright OctaviaFlow 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column as CarbonColumn } from "@octaviaflow/react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { ReactNode } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+interface ColumnProps {
+  children: ReactNode;
+  className?: string | null;
+  colSm?: number | null;
+  colMd?: number | null;
+  colLg?: number | null;
+  colXl?: number | null;
+  colMax?: number | null;
+  offsetSm?: number | null;
+  offsetMd?: number | null;
+  offsetLg?: number | null;
+  offsetXl?: number | null;
+  offsetMax?: number | null;
+  [otherProp: string]: unknown;
+}
+
+export const Column: MdxComponent<ColumnProps> = ({
+  children,
+  className,
+  colSm,
+  colMd,
+  colLg,
+  colXl,
+  colMax,
+  offsetSm,
+  offsetMd,
+  offsetLg,
+  offsetXl,
+  offsetMax,
+  ...props
+}) => {
+  const colSizes = {
+    sm: offsetSm ? { span: colSm, offset: offsetSm } : colSm,
+    md: offsetMd ? { span: colMd, offset: offsetMd } : colMd,
+    lg: offsetLg ? { span: colLg, offset: offsetLg } : colLg,
+    xlg: offsetXl ? { span: colXl, offset: offsetXl } : colXl,
+    max: offsetMax ? { span: colMax, offset: offsetMax } : colMax,
+  };
+
+  // remove 'noGutter' props to avoid react console error
+  for (const key in Object.keys(props)) {
+    if (key.startsWith("noGutter")) {
+      delete props[key];
+    }
+  }
+
+  return (
+    // @ts-ignore -- TS thinks this is null
+    <CarbonColumn
+      {...colSizes}
+      {...props}
+      className={clsx(withPrefix("column"), className)}
+    >
+      {children}
+    </CarbonColumn>
+  );
+};
+
+Column.defaultProps = {
+  colSm: 4,
+  colMd: 8,
+  colLg: 12,
+};
+
+Column.propTypes = {
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  className: PropTypes.string,
+  colLg: PropTypes.number.isRequired,
+  colMax: PropTypes.number,
+  colMd: PropTypes.number.isRequired,
+  colSm: PropTypes.number.isRequired,
+  colXl: PropTypes.number,
+  offsetLg: PropTypes.number,
+  offsetMax: PropTypes.number,
+  offsetMd: PropTypes.number,
+  offsetSm: PropTypes.number,
+  offsetXl: PropTypes.number,
+};

package/components/grid-transform/grid.stories.jsx

@@ -0,0 +1,72 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright IBM Corp. 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import { Column } from "./column";
+import { Grid } from "./grid";
+import { Row } from "./row";
+
+export default {
+  title: "Components/MDX Components/Grid",
+  component: Grid,
+  argTypes: {
+    children: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+  },
+};
+
+const Template = () => (
+  <Grid>
+    <Column sm={4} md={4} lg={4}>
+      Span 4
+    </Column>
+    <Column sm={4} md={4} lg={4}>
+      Span 4
+    </Column>
+    <Column sm={4} md={4} lg={4}>
+      Span 4
+    </Column>
+    <Column sm={4} md={4} lg={4}>
+      Span 4
+    </Column>
+  </Grid>
+);
+
+const GatsbyTemplate = () => (
+  <Row>
+    <Column sm={4} md={4} lg={4}>
+      Span 4
+    </Column>
+    <Column sm={4} md={4} lg={4}>
+      Span 4
+    </Column>
+    <Column sm={4} md={4} lg={4}>
+      Span 4
+    </Column>
+    <Column sm={4} md={4} lg={4}>
+      Span 4
+    </Column>
+  </Row>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Gatsby = GatsbyTemplate.bind({});

package/components/grid-transform/grid.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright OctaviaFlow 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Grid as CarbonGrid } from "@octaviaflow/react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { ReactNode } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+interface GridProps {
+  children: ReactNode;
+  className?: string | null;
+}
+
+/**
+ * The carbon-labs MDX package allows for easy use of the Carbon `<Grid>` and `<Column>`
+ * components. See full docs in the Carbon React Storybook.
+ * https://react.carbondesignsystem.com/?path=/story/elements-grid--default
+ *
+ * Additionally, this package also supports the Gatsby theme's `<Row>` and `<Column>`.
+ * See full docs in the Carbon theme Gatsby website.
+ * https://gatsby.carbondesignsystem.com/components/Grid/
+ */
+export const Grid: MdxComponent<GridProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <CarbonGrid {...props} className={clsx(withPrefix("grid"), className)}>
+    {children}
+  </CarbonGrid>
+);
+
+Grid.propTypes = {
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  className: PropTypes.string,
+};

package/components/grid-transform/row.tsx

@@ -0,0 +1,92 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright OctaviaFlow 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Grid } from "@octaviaflow/react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { Children, ReactNode } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { mediaQueries, useMatchMedia, withPrefix } from "../utils";
+
+interface RowProps {
+  children: ReactNode;
+  className?: string | null;
+}
+
+export const Row: MdxComponent<RowProps> = ({ children, className }) => {
+  const arrayChildren = Children.toArray(children);
+
+  const isSm = useMatchMedia(mediaQueries.sm);
+  const isMd = useMatchMedia(mediaQueries.md);
+  const isLg = useMatchMedia(mediaQueries.lg);
+  const isXlg = useMatchMedia(mediaQueries.xlg);
+  const isMax = useMatchMedia(mediaQueries.max);
+
+  const sizeMappings = {
+    Sm: isSm,
+    Md: isMd,
+    Lg: isLg,
+    Xl: isXlg,
+    Max: isMax,
+  };
+
+  let narrow = false;
+  let condensed = false;
+
+  Children.map(arrayChildren, (child) => {
+    if (typeof child === "string") {
+      return;
+    }
+    if (typeof child === "number") {
+      return;
+    }
+    if (!("props" in child)) {
+      return;
+    }
+    const condensedProps = Object.keys(child.props).filter(
+      (prop) => prop.startsWith("noGutter") && !prop.endsWith("Left"),
+    );
+    condensedProps.forEach((prop) => {
+      const size = prop.replace("noGutter", "") as keyof typeof sizeMappings;
+      condensed = sizeMappings[size] ?? false;
+    });
+    const narrowProps = Object.keys(child.props).filter(
+      (prop) => prop.startsWith("noGutter") && prop.endsWith("Left"),
+    );
+    narrowProps.forEach((prop) => {
+      const size = prop
+        .replace("noGutter", "")
+        .replace("Left", "") as keyof typeof sizeMappings;
+      narrow = sizeMappings[size] ?? false;
+    });
+  });
+
+  return (
+    <Grid
+      narrow={narrow}
+      condensed={condensed}
+      className={clsx(withPrefix("grid"), className)}
+    >
+      {children}
+    </Grid>
+  );
+};
+
+Row.propTypes = {
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  className: PropTypes.string,
+};

package/components/image-wrapper/_image-wrapper.scss

@@ -0,0 +1,32 @@
+/*
+ * Copyright OctaviaFlow 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* stylelint-disable declaration-no-important */
+@use '@carbon/react/scss/theme' as theme;
+@use '@carbon/react/scss/spacing' as spacing;
+@use '@carbon/react/scss/utilities/convert' as convert;
+
+@use '../utils' as *;
+
+.#{with-prefix('fixed')},
+.image--fixed {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: theme.$layer-01;
+  margin-block-start: spacing.$spacing-07;
+
+  div {
+    display: flex;
+    inline-size: initial !important;
+    max-inline-size: 100%;
+  }
+
+  span {
+    inline-size: convert.rem(736px) !important;
+  }
+}

package/components/image-wrapper/image-wrapper.stories.jsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright IBM Corp. 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import { ImageWrapper } from "./image-wrapper";
+import accordionStyle3Png from "./accordion-style-3.png";
+
+const stories = {
+  title: "Components/MDX Components/Images & Video/ImageWrapper",
+  component: ImageWrapper,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+};
+
+export default stories;
+
+const Template = (args) => (
+  <ImageWrapper type="fixed" {...args}>
+    <img alt="fixed demo" src={accordionStyle3Png} />
+  </ImageWrapper>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/image-wrapper/image-wrapper.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright OctaviaFlow
+ * Author: Vishal Kumar
+ * Created: 11/November/2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright OctaviaFlow 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { ReactNode } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+type ImageType = "fixed";
+
+interface ImageWrapperProps {
+  children: ReactNode;
+  className?: string | null;
+  type: ImageType;
+}
+
+/**
+ * The `<ImageWrapper>` component allows the user to set a `type='fixed'`
+ * which forces a fixed max width inside the container, and scales down
+ * to smaller sizes at tablet and mobile.
+ */
+export const ImageWrapper: MdxComponent<ImageWrapperProps> = ({
+  children,
+  className,
+  type,
+}) => {
+  const wrapperClassNames = clsx(className, {
+    [withPrefix("fixed")]: type === "fixed",
+  });
+
+  return <div className={wrapperClassNames}>{children}</div>;
+};
+
+ImageWrapper.propTypes = {
+  /** set children */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /** set optional custom class */
+  className: PropTypes.string,
+  /** set type */
+  type: PropTypes.oneOf<ImageType>(["fixed"]).isRequired,
+};

package/components/index.scss

@@ -0,0 +1,31 @@
+/*
+ * Copyright OctaviaFlow 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Putting this at the inset-block-start allows individual components to override markdown-specific styles
+@use './markdown/markdown';
+
+@use './accordion/accordion';
+@use './anchor-links/anchor-links';
+@use './article-card/article-card';
+@use './aside/aside';
+@use './caption/caption';
+@use './card-group/card-group';
+@use './code/code';
+@use './divider/divider';
+@use './do-dont/do-dont';
+@use './gif-player/gif-player';
+@use './grid-transform/grid';
+@use './image-wrapper/image-wrapper';
+@use './inline-notification/inline-notification';
+@use './link/link';
+@use './mini-card/mini-card';
+@use './preview/preview';
+@use './page-description/page-description';
+@use './page-table/page-table';
+@use './resource-card/resource-card';
+@use './storybook-demo/storybook-demo';
+@use './tabs/tabs';
+@use './video/video';

package/components/inline-notification/_inline-notification.scss

@@ -0,0 +1,29 @@
+/*
+ * Copyright OctaviaFlow 2022, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/react/scss/type' as type;
+@use '@carbon/react/scss/spacing' as spacing;
+
+@use '../utils' as *;
+
+.#{with-prefix('notification')} {
+  margin-block-start: spacing.$spacing-05;
+
+  // override carbon, notification inline-size
+  &.#{with-prefix('notification')} .ods--inline-notification {
+    max-inline-size: 100%;
+  }
+
+  .#{with-prefix('content')} div {
+    margin-block-start: 0;
+  }
+
+  .#{with-prefix('content')},
+  .#{with-prefix('content')} p {
+    @include type.type-style('body-compact-01');
+  }
+}