@octaviaflow/mdx-components 1.1.3

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

@@ -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 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 { PageTable } from "./page-table";
+
+const stories = {
+  title: "Components/MDX Components/Markdown/PageTable",
+  component: PageTable,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+};
+
+export default stories;
+
+const Template = (args) => (
+  <PageTable {...args}>
+    <thead>
+      <tr>
+        <th>Header 1</th>
+        <th>Header 2</th>
+        <th>Header 3</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Cell 1-1</td>
+        <td>Cell 1-2</td>
+        <td>Cell 1-3</td>
+      </tr>
+      <tr>
+        <td>Cell 2-1</td>
+        <td>Cell 2-2</td>
+        <td>Cell 2-3</td>
+      </tr>
+    </tbody>
+  </PageTable>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/page-table/page-table.tsx

@@ -0,0 +1,88 @@
+/**
+ * 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 PropTypes from "prop-types";
+import React, { ReactNode } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+interface PageTableProps {
+  children: ReactNode[];
+}
+
+/**
+ * For MDX files, steer away from using JSX components
+ * for tables in favor of standard markdown syntax:
+ *
+ *```
+ * | Header 1 | Header 2 | Header 3 |
+ * | ---- | ---- | ----------- |
+ * | Cell 1-1 | Cell 1-2 | Cell 1-3 |
+ * | Cell 2-1 | Cell 2-2 | Cell 2-3 |
+ * ```
+ */
+export const PageTable: MdxComponent<PageTableProps> = (props) => {
+  const { children } = props;
+
+  if (!children[1]) {
+    return null;
+  }
+  if (typeof children[1] === "string") {
+    return null;
+  }
+  if (typeof children[1] === "boolean") {
+    return null;
+  }
+  if (typeof children[1] === "number") {
+    return null;
+  }
+  if (!("props" in children[1])) {
+    return null;
+  }
+
+  let gridSize;
+  if (Array.isArray(children[1].props.children)) {
+    gridSize = children[1].props.children[0].props.children.length;
+  } else {
+    gridSize = children[1].props.children.props.children.length;
+  }
+
+  let lg;
+  if (gridSize > 3) {
+    lg = 12;
+  } else {
+    lg = 8;
+  }
+
+  return (
+    <Grid condensed className={withPrefix("page-table-container")}>
+      <Column sm={4} md={8} lg={lg}>
+        <div>
+          <table className={withPrefix("page-table")}>{children}</table>
+        </div>
+      </Column>
+    </Grid>
+  );
+};
+
+PageTable.propTypes = {
+  /** Provide the contents of the PageTable */
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+};
+
+export default PageTable;

package/components/preview/_preview.scss

@@ -0,0 +1,16 @@
+/*
+ * 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/theme' as theme;
+@use '@carbon/react/scss/spacing' as spacing;
+@use '../utils' as *;
+
+.#{with-prefix('preview')} {
+  border: 1px solid theme.$border-subtle;
+  inline-size: 100%;
+  margin-block-start: spacing.$spacing-07;
+}

package/components/preview/preview.stories.jsx

@@ -0,0 +1,41 @@
+/**
+ * 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 { Preview } from "./preview";
+
+export default {
+  title: "Components/MDX Components/Preview",
+  component: Preview,
+  parameters: {},
+  argTypes: {
+    title: {
+      control: false,
+    },
+  },
+};
+
+const Template = (args) => (
+  <Preview
+    {...args}
+    height="400"
+    title="Carbon Tutorial Step 5"
+    src="https://react-step-6--carbon-tutorial.netlify.com"
+  />
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/preview/preview.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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 from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+/**
+ * The `<Preview>` component is a simple wrapper for an `<iframe />` with
+ * styling added to allow it to display responsively within the Platform.
+ */
+interface PreviewProps {
+  className?: string | null;
+  title?: string | null;
+  height?: string | null;
+  src?: string | null;
+  style?: object | null;
+}
+
+export const Preview: MdxComponent<PreviewProps> = ({
+  className,
+  title,
+  height,
+  src,
+  style,
+}) => (
+  <iframe
+    src={src!}
+    loading="lazy"
+    title={title!}
+    height={height!}
+    frameBorder="no"
+    className={clsx(className, withPrefix("preview"))}
+    style={style!}
+    sandbox="allow-forms allow-scripts allow-same-origin"
+  />
+);
+
+Preview.propTypes = {
+  /**
+   * Specify a custom class
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide the height for the iframe
+   */
+  height: PropTypes.string,
+
+  /**
+   * Provide the url for the iframe
+   */
+  src: PropTypes.string,
+
+  /**
+   * Provide custom inline styles for the iframe
+   */
+  style: PropTypes.object,
+
+  /**
+   * Provide the title for the iframe
+   */
+  title: PropTypes.string,
+};

package/components/resource-card/_resource-card.scss

@@ -0,0 +1,165 @@
+/*
+ * 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 '@carbon/react/scss/motion' as motion;
+@use '@carbon/react/scss/utilities/convert' as convert;
+
+@use '../utils' as *;
+
+.#{with-prefix('resource-card')} {
+  //override carbon aspect ratio styles
+  .ods--aspect-ratio--object {
+    position: absolute;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  //override carbon tile
+  .ods--tile {
+    position: relative;
+    padding: spacing.$spacing-05 25% spacing.$spacing-05 spacing.$spacing-05;
+    block-size: 100%;
+    text-decoration: none;
+    transition: background motion.$duration-fast-01;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .#{with-prefix('title')} {
+    @include type.type-style('heading-03');
+
+    color: theme.$text-primary;
+    text-decoration: none;
+  }
+
+  .#{with-prefix('subtitle')} {
+    @include type.type-style('heading-01');
+    @include line-clamp(3);
+
+    color: theme.$text-primary;
+    font-weight: 400;
+    text-decoration: none;
+  }
+
+  .#{with-prefix('icon-img')} {
+    position: absolute;
+    display: flex;
+    align-items: flex-end;
+    inline-size: convert.rem(32px);
+    inset-block-end: spacing.$spacing-05;
+    inset-inline-start: spacing.$spacing-05;
+    max-block-size: convert.rem(32px);
+
+    img {
+      inline-size: convert.rem(32px);
+      max-block-size: convert.rem(32px);
+    }
+
+    img[class*='image'] {
+      background: transparent;
+    }
+  }
+
+  .#{with-prefix('icon-action')} {
+    position: absolute;
+    block-size: convert.rem(20px);
+    inline-size: convert.rem(20px);
+    inset-block-end: spacing.$spacing-05;
+    inset-inline-end: spacing.$spacing-05;
+  }
+
+  .#{with-prefix('icon-action')} svg {
+    fill: theme.$icon-primary;
+  }
+
+  // Disabled
+  // override carbon tile
+  &.#{with-prefix('disabled')} .ods--tile:hover {
+    background: theme.$layer-01;
+    cursor: not-allowed;
+  }
+
+  &.#{with-prefix('disabled')} .#{with-prefix('title')},
+  &.#{with-prefix('disabled')} .#{with-prefix('subtitle')} {
+    color: theme.$text-on-color-disabled;
+  }
+
+  &.#{with-prefix('disabled')} .#{with-prefix('icon-action')} svg {
+    fill: theme.$icon-disabled;
+  }
+
+  &.#{with-prefix('disabled')} .#{with-prefix('icon-img')} {
+    filter: grayscale(100%);
+    opacity: 0.5;
+  }
+
+  .#{with-prefix('card-with-title')} {
+    .#{with-prefix('subtitle')} {
+      @include type.type-style('body-compact-01');
+
+      color: theme.$text-secondary;
+    }
+
+    .#{with-prefix('title')} {
+      @include type.type-style('body-compact-02');
+      @include line-clamp(2);
+    }
+  }
+
+  .#{with-prefix('child-component')} {
+    position: absolute;
+    inset-block-start: spacing.$spacing-05;
+    inset-inline-end: spacing.$spacing-05;
+  }
+
+  .#{with-prefix('card-with-component')} {
+    padding-inline-end: 50%;
+  }
+}
+
+// Resource card group
+// Add border only in between group of cards
+// Forces 3rd card to start new "row"
+// override carbon grid styles
+// this is a class used by users, doesn't need with-prefix
+.resource-card-group {
+  .ods--css-grid-column {
+    margin-block-end: 0;
+  }
+  // items: 3,5,7,9...
+  [class*='ods--lg:col-span-4']:nth-child(2n + 3) {
+    @include breakpoint.breakpoint('lg') {
+      grid-column-start: 1;
+    }
+  }
+
+  .#{with-prefix('resource-card')} {
+    border-block-start: 1px solid theme.$border-subtle;
+  }
+
+  [class*='ods--lg:col-span-4']:first-child .#{with-prefix('resource-card')} {
+    border-block-start: 0 solid transparent;
+  }
+
+  [class*='ods--lg:col-span-4']:nth-child(2) .#{with-prefix('resource-card')} {
+    @include breakpoint.breakpoint('md') {
+      border-block-start: 0 solid transparent;
+    }
+  }
+
+  [class*='ods--lg:col-span-4']:nth-child(even)
+    .#{with-prefix('resource-card')} {
+    @include breakpoint.breakpoint('md') {
+      box-shadow: -1px 0 0 0 theme.$border-subtle;
+    }
+  }
+}

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

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