@octaviaflow/mdx-components 1.1.3

package/components/markdown/p.stories.jsx

@@ -0,0 +1,36 @@
+/**
+ * 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 { P } from "./p";
+
+const stories = {
+  title: "Components/MDX Components/Markdown/P",
+  component: P,
+};
+
+export default stories;
+
+const Template = (args) => (
+  <P {...args}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat ex
+    massa, in tincidunt ipsum tempor in. Maecenas ultrices sem nec blandit
+    dictum. Fermentum ullamcorper pretium. Duis turpis elit.
+  </P>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/markdown/p.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 { withPrefix } from "../utils";
+
+interface ParagraphProps {
+  children: ReactNode;
+  className?: string | null;
+  large?: boolean | null;
+}
+
+export const P: MdxComponent<ParagraphProps> = ({
+  children,
+  className,
+  large,
+  ...rest
+}) => {
+  const classNames = clsx(withPrefix("paragraph"), {
+    [withPrefix("paragraph--large")]: large,
+  });
+
+  return (
+    <Grid
+      className={clsx(className, withPrefix("paragraph-container"))}
+      {...rest}
+    >
+      <Column sm={4} md={8} lg={8}>
+        <p className={classNames}>{children}</p>
+      </Column>
+    </Grid>
+  );
+};
+
+P.propTypes = {
+  /**
+   * `Paragraph text.
+   */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /**
+   * Optional class name on the wrapper grid.
+   */
+  className: PropTypes.string,
+  /**
+   * Display large font size.
+   */
+  large: PropTypes.bool,
+};

package/components/markdown/ul.stories.jsx

@@ -0,0 +1,46 @@
+/**
+ * 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 { LI } from "./li";
+import { UL } from "./ul";
+
+const stories = {
+  title: "Components/MDX Components/Markdown/UL",
+  component: UL,
+  argTypes: {
+    children: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+  },
+};
+
+export default stories;
+
+const Template = (args) => (
+  <div style={{ paddingLeft: "1rem" }}>
+    <UL {...args}>
+      <LI>list item 1</LI>
+      <LI>list item 2</LI>
+      <LI>list item 3</LI>
+    </UL>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/markdown/ul.tsx

@@ -0,0 +1,93 @@
+/**
+ * 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, UnorderedList } from "@octaviaflow/react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { ReactElement } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+import { LiConsumer } from "./li";
+
+interface UlProps {
+  children: ReactElement | ReactElement[]; // This is how the types would be in TypeScript
+  className?: string | null;
+  [otherProp: string]: unknown;
+}
+
+/**
+ * For MDX files, steer away from using JSX components
+ * for lists in favor of standard markdown syntax.
+ *
+ *```
+ * - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ * - dolore magna aliqua. Pharetra massa massa ultricies mi quis.
+ * - Massa eget egestas purus viverra accumsan in nisl nisi.
+ * - Dolor sit amet consectetur adipiscing.
+ * ```
+ */
+export const UL: MdxComponent<UlProps> = ({ children, className, ...rest }) => {
+  return (
+    <LiConsumer>
+      {(value) => {
+        if (value.hasListItemParent) {
+          return (
+            <UnorderedList
+              isExpressive
+              className={clsx(className, withPrefix("list"), withPrefix("ul"))}
+              nested
+              {...rest}
+            >
+              {children}
+            </UnorderedList>
+          );
+        } else {
+          return (
+            <Grid className={withPrefix("list-container")}>
+              <Column sm={4} md={8} lg={8}>
+                <UnorderedList
+                  isExpressive
+                  className={clsx(
+                    className,
+                    withPrefix("list"),
+                    withPrefix("ul"),
+                  )}
+                  {...rest}
+                >
+                  {children}
+                </UnorderedList>
+              </Column>
+            </Grid>
+          );
+        }
+      }}
+    </LiConsumer>
+  );
+};
+
+UL.propTypes = {
+  /**
+   * Child LI elements
+   */
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element.isRequired).isRequired,
+    PropTypes.element.isRequired,
+  ]).isRequired,
+  /**
+   * Specify optional className for container element
+   */
+  className: PropTypes.string,
+};

package/components/mini-card/_mini-card.scss

@@ -0,0 +1,55 @@
+/*
+ * 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/utilities/convert' as convert;
+@use '@carbon/react/scss/motion' as motion;
+
+@use '../utils' as *;
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .#{with-prefix('mini-card')} {
+    transition: none;
+  }
+}
+
+.#{with-prefix('mini-card')} {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: theme.$layer-01;
+  block-size: convert.rem(64px);
+  transition: background motion.$duration-fast-02;
+
+  &:hover {
+    background: theme.$background-hover;
+  }
+
+  .#{with-prefix('wrapper')} {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: spacing.$spacing-05 spacing.$spacing-05;
+  }
+
+  .#{with-prefix('title')} {
+    @include type.type-style('body-short-01');
+  }
+
+  .#{with-prefix('image')},
+  .#{with-prefix('image')} [class*='mdx-icon'],
+  .#{with-prefix('image')} [class*='mdx-icon'] svg {
+    block-size: convert.rem(20px);
+    inline-size: convert.rem(20px);
+  }
+
+  .#{with-prefix('icon')} {
+    padding-block-start: spacing.$spacing-02;
+  }
+}

package/components/mini-card/mini-card.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 { CardGroup } from "../card-group/card-group";
+import { MiniCard } from "./mini-card";
+
+// TODO: add MdxIcon when migrated
+// import MdxIcon from '@/components/mdx-icon'
+
+const stories = {
+  title: "Components/MDX Components/Cards/MiniCard",
+  component: MiniCard,
+  parameters: {},
+  argTypes: {
+    children: {
+      control: false,
+    },
+    href: {
+      control: false,
+    },
+    actionIcon: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+    linkProps: {
+      control: false,
+    },
+    title: {
+      control: false,
+    },
+  },
+};
+
+export default stories;
+
+const Template = (args) => (
+  <CardGroup {...args}>
+    <MiniCard
+      title="Tree view component"
+      href="https://carbon-website-git-fork-designertyler-treeview03092020.carbon-design-system.now.sh/components/tree-view/usage"
+      actionIcon="arrowRight"
+    />
+    <MiniCard title="Angular tutorial" href="">
+      {/* <MdxIcon name="angular" /> */}
+    </MiniCard>
+    <MiniCard
+      title="Tree view component"
+      href="https://carbon-website-git-fork-designertyler-treeview03092020.carbon-design-system.now.sh/components/tree-view/usage"
+      actionIcon="launch"
+    />
+    <MiniCard title="React tutorial" href="">
+      {/* <MdxIcon name="react" /> */}
+    </MiniCard>
+  </CardGroup>
+);
+
+export const Default = Template.bind({});

package/components/mini-card/mini-card.tsx

@@ -0,0 +1,132 @@
+/**
+ * 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 } from "@octaviaflow/react";
+import {
+  ArrowRight,
+  Calendar,
+  Download,
+  Email,
+  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 ActionIcon = "arrowRight" | "download" | "email" | "calendar" | "launch";
+
+interface MiniCardProps {
+  children?: ReactNode | null;
+  href?: string | null;
+  title: string | null;
+  actionIcon?: ActionIcon | null;
+  linkProps?: object | null;
+  className?: string | null;
+}
+
+const getIcon = ({ actionIcon }: { actionIcon: ActionIcon }) => {
+  switch (actionIcon) {
+    case "arrowRight":
+      return <ArrowRight size={20} aria-label="Open resource" />;
+    case "download":
+      return <Download size={20} aria-label="Download" />;
+    case "email":
+      return <Email size={20} aria-label="Email" />;
+    case "calendar":
+      return <Calendar size={20} aria-label="Calendar" />;
+    default:
+      return <Launch size={20} aria-label="Open resource" />;
+  }
+};
+
+/**
+ *The `<MiniCard>` component can be used in place of a `<ResourceCard>` if your content
+ allows it. Unless it is sitting beside your main content, it should always be wrapped
+ inside of a `<CardGroup>`. This allows the correct gutter and border placement between
+ a group of cards
+*
+ Although the mini-resource card has a similar geometry to the button component, they
+ should not be used in place of a button. Buttons encourage action from the user and
+ affect the website's front-end or back-end. The resource cards, both large and mini
+ are essentially links. They are used for navigation and actions that do not affect
+ the website.
+ **/
+export const MiniCard: MdxComponent<MiniCardProps> = ({
+  children,
+  href,
+  title,
+  actionIcon,
+  className,
+  linkProps,
+  ...rest
+}) => {
+  const cardContent = (
+    <div className={clsx(className, withPrefix("mini-card"))}>
+      <div className={withPrefix("wrapper")}>
+        <div className={withPrefix("title")}>{title}</div>
+        {children === undefined && actionIcon && (
+          <div className={withPrefix("icon")}>{getIcon({ actionIcon })}</div>
+        )}
+        {children !== undefined && (
+          <div className={withPrefix("image")}>{children}</div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <Column md={4} lg={4} sm={4} {...rest}>
+      <a href={href!} className={"ods--tile--clickable"} {...linkProps}>
+        {cardContent}
+      </a>
+    </Column>
+  );
+};
+
+MiniCard.propTypes = {
+  /**
+   * Action icon to render.
+   */
+  actionIcon: PropTypes.oneOf<ActionIcon>([
+    "arrowRight",
+    "download",
+    "email",
+    "calendar",
+    "launch",
+  ]),
+  /**
+   * Use 32x32 image as child, will display in right-hand corner of the card
+   */
+  children: PropTypes.element,
+  /**
+   * Optional container class name.
+   */
+  className: PropTypes.string,
+  /**
+   * url to link to on click
+   */
+  href: PropTypes.string,
+  /**
+   * Props to pass onto Link component.
+   */
+  linkProps: PropTypes.object,
+  /**
+   * Provide the title of your `Card`.
+   */
+  title: PropTypes.string.isRequired,
+};

package/components/page-description/_page-description.scss

@@ -0,0 +1,38 @@
+/*
+ * 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('page-description')} {
+  color: theme.$text-primary;
+  margin-block-start: spacing.$spacing-07;
+}
+
+.#{with-prefix('page-description')},
+.#{with-prefix('page-description')} p,
+.#{with-prefix('page-description')} .ods--link {
+  @include type.type-style('fluid-heading-03', true);
+
+  display: inline;
+}
+
+.#{with-prefix('page-description')} > * {
+  margin-block-start: 0;
+}
+
+.#{with-prefix('page-description')} > * + * {
+  margin-block-start: spacing.$spacing-06;
+}
+
+.#{with-prefix('page-description')} code {
+  font-size: 1.125rem;
+  line-height: 1.25;
+}

package/components/page-description/page-description.stories.jsx

@@ -0,0 +1,36 @@
+/**
+ * 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 { PageDescription } from "./page-description";
+
+const stories = {
+  title: "Components/MDX Components/PageDescription",
+  component: PageDescription,
+};
+
+export default stories;
+
+const Template = (args) => (
+  <PageDescription {...args}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat ex
+    massa, in tincidunt ipsum tempor in. Maecenas ultrices sem nec blandit
+    dictum. Fermentum ullamcorper pretium. Duis turpis elit.
+  </PageDescription>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/page-description/page-description.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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 PageDescriptionProps {
+  children: ReactNode;
+  className?: string | null;
+}
+
+/**
+ * The `<PageDescription>` component is generally used for intro text at the top
+ * of the page using the type token `fluid-heading-03`.
+ */
+export const PageDescription: MdxComponent<PageDescriptionProps> = ({
+  children,
+  className,
+  ...rest
+}) => (
+  <Grid>
+    <Column
+      sm={4}
+      md={8}
+      lg={8}
+      className={clsx(withPrefix("page-description"), className)}
+      {...rest}
+    >
+      {children}
+    </Column>
+  </Grid>
+);
+
+PageDescription.propTypes = {
+  /**
+   * Provide the contents of PageDescription
+   */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /**
+   * Optional class name.
+   */
+  className: PropTypes.string,
+};

package/components/page-table/_page-table.scss

@@ -0,0 +1,51 @@
+/*
+ * 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('page-table-container')} {
+  margin-block-start: spacing.$spacing-06;
+  overflow-x: auto;
+
+  .#{with-prefix('page-table')} {
+    inline-size: 100%;
+
+    thead th {
+      @include type.type-style('heading-01');
+
+      padding: spacing.$spacing-05;
+      background: theme.$layer-01;
+      text-align: start;
+      white-space: nowrap;
+    }
+
+    tbody tr {
+      border-block-end: 1px solid theme.$border-subtle;
+    }
+
+    tbody tr td {
+      @include type.type-style('body-compact-01');
+
+      padding: spacing.$spacing-05;
+
+      /* stylelint-disable max-nesting-depth */
+      @include breakpoint.breakpoint('lg') {
+        min-inline-size: 6.25rem;
+      }
+
+      @include breakpoint.breakpoint('xlg') {
+        min-inline-size: 9.375rem;
+      }
+      /* stylelint-enable max-nesting-depth */
+    }
+  }
+}