@octaviaflow/mdx-components 1.1.3

package/components/caption/caption.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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, Grid } 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 CaptionProps {
+  children: ReactNode;
+  className?: string | null;
+}
+
+/**
+ * The `<Caption>` component is typically used below images or videos.
+ */
+export const Caption: MdxComponent<CaptionProps> = ({
+  children,
+  className,
+}) => (
+  <Grid className={clsx(className, withPrefix("caption-container"))}>
+    <Column sm={4} md={6} lg={6}>
+      <p className={withPrefix("caption")}>{children}</p>
+    </Column>
+  </Grid>
+);
+
+Caption.propTypes = {
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  className: PropTypes.string,
+};

package/components/card-group/_card-group.scss

@@ -0,0 +1,44 @@
+/*
+ * 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/breakpoint' as breakpoint;
+@use '@carbon/react/scss/theme' as theme;
+@use '@carbon/react/scss/spacing' as spacing;
+
+@use '../utils' as *;
+
+.#{with-prefix('card-group')} {
+  margin-block-start: spacing.$spacing-07;
+
+  .#{with-prefix('header')} + & {
+    margin-block-start: spacing.$spacing-06;
+  }
+}
+
+// Sets gray border on the inset-block-start of cards at the smallest breakpoint and
+// removes the margin set by the <Column> in the Grid component.
+.#{with-prefix('card-group')} [class*='column'] {
+  border-block-start: 1px solid theme.$border-subtle;
+  margin-block-end: 0;
+}
+
+.#{with-prefix('card-group')} [class*='column']:first-child {
+  border-block-start: 0 solid transparent;
+}
+
+// Borders for cards at the medium breakpoint
+.#{with-prefix('card-group')} [class*='column']:nth-child(-n + 2) {
+  @include breakpoint.breakpoint('md') {
+    border-block-start: 0 solid transparent;
+  }
+}
+
+.#{with-prefix('card-group')} [class*='column']:nth-child(even) {
+  @include breakpoint.breakpoint('md') {
+    box-shadow: -1px 0 0 0 theme.$border-subtle;
+  }
+}

package/components/card-group/card-group.stories.jsx

@@ -0,0 +1,85 @@
+/**
+ * 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 "@carbon/react";
+
+import { CardGroup } from "./card-group";
+import { ResourceCard } from "../resource-card/resource-card";
+import sketchIconPng from "./sketch-icon.png";
+
+export default {
+  title: "Components/MDX Components/Cards/CardGroup",
+  component: CardGroup,
+  argTypes: {
+    children: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+  },
+};
+
+const Template = (args) => (
+  <CardGroup>
+    <Column lg={4}>
+      <ResourceCard
+        subTitle="With subtitle"
+        title="Title"
+        aspectRatio="2:1"
+        actionIcon="arrowRight"
+        href="https://www.carbondesignsystem.com"
+        {...args}
+      >
+        <img src={sketchIconPng} alt="sketch" />
+      </ResourceCard>
+    </Column>
+    <Column lg={4}>
+      <ResourceCard
+        subTitle="With subtitle"
+        title="Title"
+        href="https://www.carbondesignsystem.com"
+        {...args}
+      >
+        <img src={sketchIconPng} alt="sketch" />
+      </ResourceCard>
+    </Column>
+    <Column lg={4}>
+      <ResourceCard
+        title="Title"
+        aspectRatio="2:1"
+        actionIcon="arrowRight"
+        href="https://www.carbondesignsystem.com"
+        {...args}
+      >
+        <img src={sketchIconPng} alt="sketch" />
+      </ResourceCard>
+    </Column>
+    <Column lg={4}>
+      <ResourceCard
+        subTitle="With subtitle"
+        title="Title"
+        href="https://www.carbondesignsystem.com"
+        {...args}
+      >
+        <img src={sketchIconPng} alt="sketch" />
+      </ResourceCard>
+    </Column>
+  </CardGroup>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/card-group/card-group.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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, Grid } from "@octaviaflow/react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { ReactNode } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { mediaQueries, useMatchMedia, withPrefix } from "../utils";
+
+interface CardGroupProps {
+  children: ReactNode;
+  className?: string | null;
+}
+
+/**
+ * The `<CardGroup>` component is used in lieu of a  `<Grid>` container
+ * when laying out a set of `<ResourceCard>` components on a page. It
+ * allows the cards to align in a grid at 8 columns at medium and
+ * above breakpoints, and set the grid to condensed at the small
+ * breakpoint.
+ */
+export const CardGroup: MdxComponent<CardGroupProps> = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const isSm = useMatchMedia(mediaQueries.sm);
+
+  return (
+    <Grid
+      className={clsx(className, withPrefix("card-group"))}
+      condensed={isSm}
+      {...rest}
+    >
+      <Column lg={8} md={8} sm={4}>
+        <Grid condensed>{children}</Grid>
+      </Column>
+    </Grid>
+  );
+};
+
+CardGroup.propTypes = {
+  /**
+   * Provide the contents of your `Card`.
+   */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /**
+   * Optional container class name.
+   */
+  className: PropTypes.string,
+};

package/components/code/_code.scss

@@ -0,0 +1,110 @@
+/*
+ * 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 '@carbon/react/scss/type' as type;
+@use '@carbon/react/scss/theme' as theme;
+@use '@carbon/react/scss/motion' as motion;
+
+@use '../utils' as *;
+
+// override carbon inline code snippet styles
+.ods--snippet--inline {
+  padding: 0;
+  border: none;
+  background-color: theme.$layer-accent;
+  vertical-align: baseline;
+
+  code {
+    font-size: 0.875rem;
+    letter-spacing: normal;
+  }
+}
+
+.#{with-prefix('code')} {
+  .ods--popover-content,
+  .ods--popover-caret {
+    // Override carbon tooltip colors
+    background: theme.$layer-accent-01;
+    color: theme.$text-primary;
+  }
+}
+
+// scoped to div code to override global reset styles
+.#{with-prefix('code')}.ods--snippet--multi {
+  margin-block-start: spacing.$spacing-07;
+  max-inline-size: none;
+
+  .ods--snippet-container {
+    // override carbon snippet container inline-size
+    inline-size: 100%;
+    // override carbon snippet minimum block-size
+    /* stylelint-disable-next-line declaration-no-important */
+    min-block-size: auto !important;
+
+    pre {
+      // remove prism-added tabindex border around code blocks
+      outline: none;
+      // override carbon snippet pre padding
+      padding-block-end: 0;
+    }
+  }
+
+  code {
+    @include type.type-style('code-02');
+  }
+}
+
+.#{with-prefix('path-container')} {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: theme.$layer-01;
+  block-size: 3rem;
+  border-block-end: 1px solid theme.$border-subtle;
+  inline-size: 100%;
+  margin-block-start: spacing.$spacing-07;
+  padding-inline: spacing.$spacing-05 spacing.$spacing-03;
+}
+
+.#{with-prefix('path-container')} + .#{with-prefix('code')} {
+  margin-block-start: 0;
+}
+
+.#{with-prefix('path')} {
+  @include type.type-style('code-02');
+
+  overflow: hidden;
+  color: theme.$text-primary;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{with-prefix('icon')} {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  block-size: 32px;
+  cursor: pointer;
+  font-size: 0;
+  inline-size: 32px;
+  outline-offset: -2px;
+  transition: background motion.$duration-fast-02;
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  &:hover {
+    background-color: theme.$layer-hover-01;
+  }
+
+  svg {
+    fill: theme.$icon-primary;
+  }
+}

package/components/code/code.stories.jsx

@@ -0,0 +1,32 @@
+/**
+ * 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 { Code } from "./code";
+
+export default {
+  title: "Components/MDX Components/Markdown/Code",
+  component: Code,
+};
+
+const Template = (args) => (
+  <Code {...args}>
+    <code>const a = 16</code>
+  </Code>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/code/code.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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 { CodeSnippet, Column, Grid, Theme } from "@octaviaflow/react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { ReactElement, ReactPortal } from "react";
+
+import { MdxComponent, NonScalarNode } from "../interfaces";
+import { withPrefix } from "../utils";
+import { Path } from "./path";
+
+interface CodeProps {
+  children: Exclude<NonScalarNode, Array<ReactElement | ReactPortal>>;
+}
+/**
+ *
+ * For MDX files, steer away from using JSX components
+ * for code in favor of standard markdown syntax.
+ *
+ *````
+ * ```
+ * const a = 16;
+ * ```
+ *````
+ */
+export const Code: MdxComponent<CodeProps> = ({ children }) => {
+  const code = children.props.children;
+  const path = children.props.path;
+  const src = children.props.src;
+  const language = children.props.className || "language-plain";
+
+  return (
+    <Grid condensed>
+      <Column sm={4} md={8} lg={8}>
+        <Theme theme={"g100"}>
+          {path && (
+            <Path src={src} path={path}>
+              {children}
+            </Path>
+          )}
+
+          <CodeSnippet
+            type="multi"
+            feedback="Copied!"
+            className={clsx(withPrefix("code"), language)}
+          >
+            {code}
+          </CodeSnippet>
+        </Theme>
+      </Column>
+    </Grid>
+  );
+};
+
+Code.propTypes = {
+  /** Provide the contents of Code */
+  children: PropTypes.element.isRequired,
+};

package/components/code/inline-code.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 { CodeSnippet } from "@octaviaflow/react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { ReactElement, ReactPortal } from "react";
+
+import { MdxComponent, NonScalarNode } from "../interfaces";
+import { withPrefix } from "../utils";
+
+interface CodeProps {
+  children: Exclude<NonScalarNode, Array<ReactElement | ReactPortal>>;
+}
+/**
+ *
+ * For MDX files, steer away from using JSX components
+ * for code in favor of standard markdown syntax.
+ *
+ *````
+ * ```
+ * const a = 16;
+ * ```
+ *````
+ */
+export const InlineCode: MdxComponent<CodeProps> = ({ children }) => {
+  const language = children?.props?.className || "language-plain";
+
+  return (
+    <CodeSnippet
+      type="inline"
+      feedback="Copied!"
+      className={clsx(withPrefix("code"), language)}
+    >
+      {children}
+    </CodeSnippet>
+  );
+};
+
+InlineCode.propTypes = {
+  /** Provide the contents of Code */
+  children: PropTypes.element.isRequired,
+};

package/components/code/path.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 { Launch } from "@octaviaflow/icons-react";
+import PropTypes from "prop-types";
+import React, { ReactNode } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+interface PathProps {
+  src?: string | null;
+  path?: string | null;
+  children: ReactNode;
+}
+
+export const Path: MdxComponent<PathProps> = ({ src, path }) => {
+  if (!path) return null;
+  return (
+    <div className={withPrefix("path-container")}>
+      <span className={withPrefix("path")}>{path}</span>
+
+      {src && (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          title="View source"
+          className={withPrefix("icon")}
+          href={src}
+        >
+          <Launch title="View source" />
+        </a>
+      )}
+    </div>
+  );
+};
+
+Path.propTypes = {
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /** Provide path */
+  path: PropTypes.string,
+  /** Provide src link */
+  src: PropTypes.string,
+};

package/components/divider/_divider.scss

@@ -0,0 +1,67 @@
+/*
+ * 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 '@carbon/react/scss/theme' as theme;
+@use '@carbon/react/scss/breakpoint' as breakpoint;
+
+@use '../utils' as *;
+
+.#{with-prefix('divider')} {
+  position: relative;
+  margin-block-start: spacing.$spacing-09;
+  padding-block-start: spacing.$spacing-06;
+
+  @include breakpoint.breakpoint(md) {
+    margin-block-start: spacing.$spacing-10;
+    padding-block-start: spacing.$spacing-07;
+  }
+
+  @include breakpoint.breakpoint(lg) {
+    margin-inline-end: -(spacing.$spacing-05);
+  }
+
+  &::after {
+    position: absolute;
+    z-index: 1;
+    background: theme.$border-strong;
+    block-size: 1px;
+    content: '';
+    inline-size: calc(100% - 2rem);
+    inset-block-start: 0;
+    inset-inline-start: 1rem;
+  }
+}
+
+.#{with-prefix('divider--empty')} {
+  padding: 0;
+  block-size: 1px;
+}
+
+.#{with-prefix('divider--empty')} + div {
+  margin-block-start: spacing.$spacing-06;
+
+  @include breakpoint.breakpoint(md) {
+    margin-block-start: spacing.$spacing-07;
+  }
+}
+
+.#{with-prefix('divider')} > [class*='grid'] {
+  margin-block-start: 0;
+}
+
+.#{with-prefix('divider')} > [class*='grid'] > *:not(:first-child) {
+  margin-block-start: spacing.$spacing-06;
+
+  @include breakpoint.breakpoint(lg) {
+    margin-block-start: 0;
+  }
+}
+
+.#{with-prefix('divider')} [class*='column'] > *:first-child {
+  margin-block-start: 0;
+}