@octaviaflow/mdx-components 1.1.3

package/components/art-direction/art-direction.tsx

@@ -0,0 +1,63 @@
+/**
+ * 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 PropTypes from "prop-types";
+import React, { Children, ReactNode } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { mediaQueries, useMatchMedia } from "../utils";
+
+interface ArtDirectionProps {
+  children: ReactNode;
+}
+
+/**
+ * On the web, art direction refers to changing the image rendered at different
+ * display sizes. The `ArtDirection `component allows you to provide multiple images
+ * achieve this goal.
+ *
+ * You can place up to three images inside of the ArtDirection component. The first
+ * will be used for mobile, the second for tablet, and the third for desktop. If only
+ * two images are provided, the second image will be used for both tablet and desktop.
+ */
+export const ArtDirection: MdxComponent<ArtDirectionProps> = ({ children }) => {
+  const isMd = useMatchMedia(mediaQueries.md);
+  const isLg = useMatchMedia(mediaQueries.lg);
+
+  const childrenArray = Children.toArray(children);
+
+  if ((!isMd && !isLg) || !childrenArray[1]) {
+    return <div>{childrenArray[0]}</div>;
+  }
+
+  if ((isMd && !isLg) || !childrenArray[2]) {
+    return <div>{childrenArray[1]}</div>;
+  }
+
+  return <div>{childrenArray[2]}</div>;
+};
+
+ArtDirection.propTypes = {
+  /**
+   * You can place up to three images inside of the ArtDirection component. The first
+   * will be used for mobile, the second for tablet, and the third for desktop. If only
+   * two images are provided, the second image will be used for both tablet and desktop.
+   */
+  children: PropTypes.oneOfType([
+    PropTypes.element.isRequired,
+    PropTypes.arrayOf(PropTypes.element).isRequired,
+  ]).isRequired,
+};

package/components/article-card/_article-card.scss

@@ -0,0 +1,98 @@
+/*
+ * 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/type' as type;
+@use '@carbon/react/scss/motion' as motion;
+
+@use '../utils' as *;
+
+.#{with-prefix('article-card')} {
+  background: theme.$layer-01;
+  transition: background motion.$duration-fast-01;
+
+  &:hover {
+    background: theme.$layer-hover-01;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  .ods--tile {
+    position: relative;
+    padding: 0;
+    background: transparent;
+    block-size: 100%;
+    margin-block-end: spacing.$spacing-06;
+    text-decoration: none;
+
+    img {
+      max-inline-size: 100%;
+    }
+  }
+
+  .#{with-prefix('tile')} {
+    padding: spacing.$spacing-05 25% spacing.$spacing-05 spacing.$spacing-05;
+  }
+
+  .#{with-prefix('title')} {
+    @include type.type-style('body-compact-02');
+
+    color: theme.$text-primary;
+    text-decoration: none;
+  }
+
+  .#{with-prefix('subtitle')} {
+    @include type.type-style('heading-01');
+
+    color: theme.$text-primary;
+    font-weight: 400;
+  }
+
+  .#{with-prefix('info')} {
+    position: absolute;
+    color: theme.$text-secondary;
+    inset-block-end: spacing.$spacing-05;
+    inset-inline-start: spacing.$spacing-05;
+    @include type.type-style('label-01');
+  }
+
+  .#{with-prefix('icon-action')} {
+    position: absolute;
+    inset-block-end: spacing.$spacing-05;
+    inset-inline-end: spacing.$spacing-05;
+  }
+
+  .#{with-prefix('icon-action')} svg {
+    fill: theme.$icon-primary;
+  }
+}
+
+// carbon override, disabled state
+.#{with-prefix('disabled')}.#{with-prefix('article-card')},
+.#{with-prefix('disabled')} .ods--tile {
+  cursor: not-allowed;
+}
+
+.#{with-prefix('disabled')}:hover {
+  background: theme.$layer-01;
+  cursor: not-allowed;
+}
+
+.#{with-prefix('disabled')} .#{with-prefix('title')},
+.#{with-prefix('disabled')} .#{with-prefix('subtitle')},
+.#{with-prefix('disabled')} .#{with-prefix('info')} {
+  color: theme.$text-on-color-disabled;
+}
+
+.#{with-prefix('disabled')}
+  .#{with-prefix('action-icon')}
+  .#{with-prefix('svg')} {
+  fill: theme.$icon-on-color-disabled;
+}

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

@@ -0,0 +1,59 @@
+/**
+ * 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, Grid } from "@carbon/react";
+
+import { ArticleCard } from "./article-card";
+import article06 from "./article06.png";
+
+const stories = {
+  title: "Components/MDX Components/Cards/ArticleCard",
+  component: ArticleCard,
+  argTypes: {
+    children: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+  },
+};
+
+export default stories;
+
+const Template = (args) => (
+  <Grid narrow>
+    <Column lg={4}>
+      <ArticleCard
+        subTitle="Sub title"
+        title="Title"
+        author="Author"
+        date="July 4, 1975"
+        readTime="Read time: 5 min"
+        href="/"
+        {...args}
+      >
+        <img
+          src={article06}
+          alt="Use markdown for images in mdx files. ![](img.png)"
+        />
+      </ArticleCard>
+    </Column>
+  </Grid>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/article-card/article-card.tsx

@@ -0,0 +1,208 @@
+/**
+ * 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 { Theme } from "@octaviaflow/react";
+import {
+  ArrowRight,
+  Download,
+  Email,
+  Error,
+  Launch,
+} from "@octaviaflow/icons-react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { ReactNode } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+type Color = "light" | "dark";
+type ActionIcon = "launch" | "arrowRight" | "download" | "email" | "disabled";
+
+interface ArticleCardProps {
+  children?: ReactNode;
+  href?: string | null;
+  title?: string | null;
+  subTitle?: string | null;
+  author?: string | null;
+  date?: string | null;
+  readTime?: string | null;
+  color?: Color;
+  disabled?: boolean | null;
+  actionIcon?: ActionIcon | null;
+  className?: string | null;
+}
+
+/**
+ * The `<ArticleCard>` component should generally be used inside of
+ * `<Grid narrow>` and`<Column>` components.
+ *
+ * ```
+ * <Grid narrow>
+ * <Column lg={4}>
+ * <ArticleCard props>
+ *
+ * ![](img.png)
+ *
+ * </ArticleCard>
+ * </Column>
+ * </Grid>
+ * ```
+ */
+export const ArticleCard: MdxComponent<ArticleCardProps> = (props) => {
+  const {
+    children,
+    href,
+    title,
+    subTitle,
+    author,
+    date,
+    readTime,
+    color,
+    disabled,
+    actionIcon,
+    className,
+    ...rest
+  } = props;
+
+  const ArticleCardClassNames = clsx(className, withPrefix("article-card"), {
+    [withPrefix("disabled")]: disabled,
+  });
+
+  const aspectRatioClassNames = clsx(
+    "ods--aspect-ratio",
+    "ods--aspect-ratio--2x1",
+  );
+
+  const cardContentClassNames = clsx("ods--tile", "ods--tile--clickable");
+
+  const cardContent = (
+    <>
+      <div className={withPrefix("img")}>{children}</div>
+      <div className={aspectRatioClassNames}>
+        <div className={clsx("ods--aspect-ratio--object", withPrefix("tile"))}>
+          {subTitle && <h5 className={withPrefix("subtitle")}>{subTitle}</h5>}
+          {title && <h4 className={withPrefix("title")}>{title}</h4>}
+          <div className={withPrefix("info")}>
+            {author && <p>{author}</p>}
+            {date && <p>{date}</p>}
+            {readTime && <p>{readTime}</p>}
+          </div>
+          <div className={withPrefix("icon-action")}>
+            {actionIcon === "launch" && !disabled && (
+              <Launch size={20} aria-label="Open" />
+            )}
+            {actionIcon === "arrowRight" && !disabled && (
+              <ArrowRight size={20} aria-label="Open" />
+            )}
+            {actionIcon === "download" && !disabled && (
+              <Download size={20} aria-label="Download" />
+            )}
+            {actionIcon === "email" && !disabled && (
+              <Email size={20} aria-label="Email" />
+            )}
+            {actionIcon === "disabled" ||
+              (disabled === true && <Error size={20} aria-label="disabled" />)}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+
+  let cardContainer;
+  if (disabled === true) {
+    cardContainer = <div className={cardContentClassNames}>{cardContent}</div>;
+  } else {
+    cardContainer = (
+      <a href={href!} className={cardContentClassNames} {...rest}>
+        {cardContent}
+      </a>
+    );
+  }
+
+  return (
+    <Theme theme={color === "dark" ? "g100" : undefined}>
+      <div className={ArticleCardClassNames}>{cardContainer}</div>
+    </Theme>
+  );
+};
+
+ArticleCard.defaultProps = {
+  color: "light",
+  disabled: false,
+};
+
+ArticleCard.propTypes = {
+  /**
+   * Action icon
+   */
+  actionIcon: PropTypes.oneOf<ActionIcon>([
+    "launch",
+    "arrowRight",
+    "download",
+    "email",
+    "disabled",
+  ]),
+  /**
+   * Author
+   */
+  author: PropTypes.string,
+
+  /**
+   * Provide an image to display above card
+   */
+  children: PropTypes.element,
+
+  /**
+   * Specify a custom class
+   */
+  className: PropTypes.string,
+
+  /**
+   * set to "dark" for dark background card
+   */
+  color: PropTypes.oneOf<Color>(["light", "dark"]).isRequired,
+
+  /**
+   * date
+   */
+  date: PropTypes.string,
+
+  /**
+   * Use for disabled card
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Set url for card
+   */
+  href: PropTypes.string,
+
+  /**
+   * Reat time of article
+   */
+  readTime: PropTypes.string,
+
+  /**
+   * sub title
+   */
+  subTitle: PropTypes.string,
+
+  /**
+   * Title
+   */
+  title: PropTypes.string,
+};

package/components/aside/_aside.scss

@@ -0,0 +1,56 @@
+/*
+ * 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/spacing' as spacing;
+@use '@carbon/react/scss/theme' as theme;
+@use '@carbon/react/scss/type' as type;
+
+@use '../utils' as *;
+
+.#{with-prefix('aside')} {
+  @include type.type-style('body-01');
+
+  position: relative;
+  color: theme.$text-primary;
+  inset-block-start: -(spacing.$spacing-04);
+
+  @include breakpoint.breakpoint('lg') {
+    padding-block-start: spacing.$spacing-04;
+  }
+
+  @include breakpoint.breakpoint('lg') {
+    //spacing values came from IDL site design
+    padding-inline-end: 26%;
+  }
+
+  > div,
+  > div ol:first-child {
+    margin-block-start: 0;
+  }
+
+  p,
+  li {
+    @include type.type-style('body-01');
+  }
+
+  @include breakpoint.breakpoint('md') {
+    &::before {
+      position: absolute;
+      background: theme.$border-inverse;
+      block-size: 1px;
+      content: '';
+      inline-size: 40%;
+      inset-block-start: 0;
+      inset-inline-start: -(spacing.$spacing-05);
+    }
+  }
+}
+
+.#{with-prefix('aside--no-rule')}::before {
+  content: none;
+}

package/components/aside/aside.stories.jsx

@@ -0,0 +1,50 @@
+/**
+ * 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, Grid } from "@carbon/react";
+
+import { Aside } from "./aside";
+
+export default {
+  title: "Components/MDX Components/Aside",
+  component: Aside,
+  argTypes: {
+    children: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+  },
+};
+
+const Template = (args) => (
+  <Grid>
+    <Column lg={4}>
+      <Aside aria-label="Example aside" {...args}>
+        Lorem ipsum: dolor sit amet, elit. Curabitur ac odio arcu. Vestibulum
+        egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque.
+        Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a
+        tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
+        non vel quam.
+      </Aside>
+    </Column>
+  </Grid>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/aside/aside.tsx

@@ -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 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 AsideProps {
+  children: ReactNode;
+  className?: string | null;
+  hideRule?: boolean | null;
+}
+
+/**
+ * The `<Aside>` component is a wrapper component that adds styling to make the text display
+ *  smaller than the default body text with a one column offset. It is designed to be used on
+ * the side of the page within grid components. Add an aria-label for a11y.
+ */
+export const Aside: MdxComponent<AsideProps> = ({
+  children,
+  className,
+  hideRule,
+  ...rest
+}) => {
+  const asideClasses = clsx(withPrefix("aside"), className, {
+    [withPrefix("aside--no-rule")]: !!hideRule,
+  });
+
+  return (
+    <Grid>
+      <Column sm={4} md={{ span: 2, offset: 1 }} lg={{ span: 4, offset: 1 }}>
+        <aside className={asideClasses} {...rest}>
+          {children}
+        </aside>
+      </Column>
+    </Grid>
+  );
+};
+
+Aside.propTypes = {
+  /**
+   * Child of the Aside.
+   */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+
+  /**
+   * Optional class name.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Hide the rule above the text.
+   */
+  hideRule: PropTypes.bool,
+};

package/components/caption/_caption.scss

@@ -0,0 +1,30 @@
+/*
+ * 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 '../utils' as *;
+
+.#{with-prefix('caption-container')} {
+  margin-block-start: spacing.$spacing-05;
+
+  .#{with-prefix('header')} + & {
+    margin-block-start: spacing.$spacing-06;
+  }
+}
+
+.#{with-prefix('caption')},
+.#{with-prefix('caption')} p,
+.#{with-prefix('caption')} div {
+  @include type.type-style('body-short-01');
+
+  color: theme.$text-primary;
+
+  margin-block-start: 0;
+}

package/components/caption/caption.stories.jsx

@@ -0,0 +1,33 @@
+/**
+ * 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 { Caption } from "./caption";
+
+export default {
+  title: "Components/MDX Components/Caption",
+  component: Caption,
+  argTypes: {},
+};
+
+const Template = (args) => (
+  <Caption {...args}>
+    Lorem ipsum dolor sit amet Lorem Lorem Lorem Lorem Lorem Lorem ipsum.
+  </Caption>
+);
+
+export const Default = Template.bind({});
+Default.args = {};