@octaviaflow/mdx-components 1.1.3

package/components/inline-notification/inline-notification.stories.jsx

@@ -0,0 +1,67 @@
+/**
+ * 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 { InlineNotification } from "./inline-notification";
+
+const stories = {
+  title: "Components/MDX Components/InlineNotification",
+  component: InlineNotification,
+  argTypes: {
+    children: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+  },
+};
+
+export default stories;
+
+const Template = (args) => (
+  <InlineNotification {...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.
+  </InlineNotification>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  kind: "warning",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  kind: "info",
+};
+
+// Note: This is a lowercase "e" so it doesn't collide with the built-in JS Error class
+export const error = Template.bind({});
+error.args = {
+  kind: "error",
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  kind: "success",
+};

package/components/inline-notification/inline-notification.tsx

@@ -0,0 +1,98 @@
+/**
+ * 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 {
+  CheckmarkFilled,
+  ErrorFilled,
+  InformationFilled,
+  WarningFilled,
+} 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";
+
+const iconTypes = {
+  error: ErrorFilled,
+  success: CheckmarkFilled,
+  warning: WarningFilled,
+  info: InformationFilled,
+};
+
+type Kind = "error" | "info" | "success" | "warning";
+
+interface InlineNotificationProps {
+  children?: ReactNode;
+  className?: string | null;
+  kind: Kind;
+}
+/**
+ * The `<InlineNotification>` component is used to communicate important information to a user.
+ */
+export const InlineNotification: MdxComponent<InlineNotificationProps> = ({
+  children,
+  className,
+  kind = "info",
+}) => {
+  const containerClassName = clsx(className, {
+    "ods--inline-notification": true,
+    "ods--inline-notification--low-contrast": true,
+    [`ods--inline-notification--${kind}`]: kind,
+    "ods--inline-notification--hide-close-button": true,
+  });
+  const IconForKind = iconTypes[kind];
+
+  return (
+    <Grid>
+      <Column
+        sm={4}
+        md={8}
+        lg={8}
+        className={clsx(withPrefix("notification"), className)}
+      >
+        <div className={containerClassName}>
+          <div className="ods--inline-notification__details">
+            <IconForKind className="ods--inline-notification__icon" size={20}>
+              <title>{`${kind} icon`}</title>
+            </IconForKind>
+            <div className="ods--inline-notification__text-wrapper">
+              <div className={withPrefix("content")}>{children}</div>
+            </div>
+          </div>
+        </div>
+      </Column>
+    </Grid>
+  );
+};
+
+InlineNotification.propTypes = {
+  /**
+   * Provide the contents of the InlineNotification
+   */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+  /**
+   * Notification kind
+   */
+  kind: PropTypes.oneOf<Kind>(["error", "info", "success", "warning"])
+    .isRequired,
+};

package/components/interfaces.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { Validator } from "prop-types";
+import { ReactElement, ReactPortal } from "react";
+
+interface MdxComponent<Props> {
+  (props: Props): ReactElement<Props> | null;
+  propTypes: { [prop in keyof Props]: Validator<Props[prop]> };
+  defaultProps?: { [prop in keyof Props]?: Props[prop] };
+  displayName?: string;
+}
+
+type NonScalarNode =
+  | ReactElement
+  | ReactPortal
+  | Array<ReactElement | ReactPortal>;
+
+export type { MdxComponent, NonScalarNode };

package/components/link/_link.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 '../utils' as *;
+
+.#{with-prefix('link')} {
+  /* stylelint-disable-next-line declaration-no-important */
+  font-size: inherit !important;
+}

package/components/link/link.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 { Link } from "./link";
+
+export default {
+  title: "Components/MDX Components/Markdown/Link",
+  component: Link,
+  argTypes: {
+    className: {
+      control: false,
+    },
+  },
+};
+
+const Template = (args) => (
+  <Link href="https://platform.carbondesignsystem.com" {...args}>
+    Carbon Platform Storybook
+  </Link>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/link/link.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 { Link as CarbonLink } from "@octaviaflow/react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+interface LinkProps {
+  className?: string | null;
+  [otherProp: string]: unknown;
+}
+
+/**
+ * For MDX files, steer away from using JSX components
+ * for link in favor of standard markdown syntax.
+ *
+ * ```
+ * > [Carbon Platform Storybook](https://platform.carbondesignsystem.com)
+ * ```
+ */
+export const Link: MdxComponent<LinkProps> = ({ className, ...rest }) => (
+  <CarbonLink
+    inline
+    {...rest}
+    className={clsx(className, withPrefix("link"))}
+  />
+);
+
+Link.propTypes = {
+  /**
+   * Specify optional className
+   */
+  className: PropTypes.string,
+};

package/components/markdown/_markdown.scss

@@ -0,0 +1,140 @@
+/*
+ * 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/styles/scss/themes' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/react/scss/spacing' as spacing;
+@use '@carbon/react/scss/type' as type;
+
+@use '../utils' as *;
+@use './autolink-header/autolink-header';
+
+/*  Spacing */
+.#{with-prefix('h1-container')} + *,
+.#{with-prefix('h2-container')} + *,
+.#{with-prefix('h3-container')} + *,
+.#{with-prefix('paragraph-container')} + * {
+  margin-block-start: spacing.$spacing-06;
+}
+
+.#{with-prefix('h4-container')} + *,
+.#{with-prefix('h4-container')} + div {
+  margin-block-start: 0;
+}
+
+.#{with-prefix('h1-container')} {
+  margin-block-start: spacing.$spacing-12;
+}
+
+.#{with-prefix('h2-container')},
+.#{with-prefix('paragraph-container')} + .#{with-prefix('h2-container')} {
+  margin-block-start: spacing.$spacing-09;
+
+  @include breakpoint.breakpoint(md) {
+    margin-block-start: spacing.$spacing-11;
+  }
+}
+
+.#{with-prefix('h3-container')},
+.#{with-prefix('paragraph-container')} + .#{with-prefix('h3-container')} {
+  margin-block-start: spacing.$spacing-10;
+}
+
+.#{with-prefix('h4-container')},
+.#{with-prefix('paragraph-container')} + .#{with-prefix('h4-container')} {
+  margin-block-start: spacing.$spacing-07;
+}
+
+.#{with-prefix('h5-container')},
+.#{with-prefix('h6-container')} {
+  margin-block-start: 0;
+}
+
+.#{with-prefix('paragraph-container')} {
+  margin-block-start: spacing.$spacing-06;
+}
+
+/* Spacing List */
+.#{with-prefix('list-container')} {
+  margin-block-start: spacing.$spacing-06;
+}
+
+.#{with-prefix('list')} .#{with-prefix('list')} {
+  margin-block-start: 0;
+}
+
+.#{with-prefix('ul')} {
+  /* override carbon remove hanging bullet */
+  /* stylelint-disable-next-line declaration-no-important */
+  margin-inline-start: spacing.$spacing-05 !important;
+}
+
+.#{with-prefix('ol')} {
+  /*  override carbon remove hanging bullet */
+  /* stylelint-disable-next-line declaration-no-important */
+  margin-inline-start: spacing.$spacing-06 !important;
+}
+
+/* Headings */
+.#{with-prefix('h1')} {
+  @include type.type-style('fluid-heading-05', true);
+}
+
+.#{with-prefix('h2')} {
+  @include type.type-style('fluid-heading-04', true);
+}
+
+.#{with-prefix('h3')} {
+  @include type.type-style('fluid-heading-03', true);
+}
+
+.#{with-prefix('h4')} {
+  @include type.type-style('heading-02');
+}
+
+.#{with-prefix('h5')},
+.#{with-prefix('h6')} {
+  @include type.type-style('heading-01');
+}
+
+/* Paragraph */
+.#{with-prefix('paragraph')} {
+  @include type.type-style('body-long-02');
+}
+
+.#{with-prefix('paragraph--large')} {
+  @include type.type-style('fluid-heading-03', true);
+}
+
+/*  Blockquote */
+.#{with-prefix('blockquote')} {
+  margin: spacing.$spacing-08 0;
+  margin-inline-start: spacing.$spacing-05;
+  padding-inline-start: 1ch;
+
+  @include breakpoint.breakpoint('md') {
+    margin-inline-start: spacing.$spacing-08;
+  }
+}
+
+.#{with-prefix('blockquote')} .#{with-prefix('paragraph')} {
+  @include type.type-style('fluid-heading-03', true);
+
+  font-style: italic;
+}
+
+.#{with-prefix('blockquote')} cite {
+  @include type.type-style('body-long-01');
+
+  display: block;
+  font-style: italic;
+  margin-block-start: spacing.$spacing-02;
+  padding-inline-start: spacing.$spacing-07;
+  text-indent: 0;
+}

package/components/markdown/autolink-header/_autolink-header.scss

@@ -0,0 +1,57 @@
+/*
+ * 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/motion' as motion;
+@use '@carbon/react/scss/theme' as theme;
+@use '@carbon/react/scss/spacing' as spacing;
+@use '@carbon/react/scss/breakpoint' as breakpoint;
+
+@use '../../utils' as *;
+
+.#{with-prefix('header')} {
+  position: relative;
+
+  .#{with-prefix('anchor')} {
+    opacity: 0;
+
+    transition: opacity motion.$duration-fast-01 motion.$standard-easing;
+
+    &:hover,
+    &:active,
+    &:focus {
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: 2px solid theme.$focus;
+    }
+
+    svg {
+      fill: theme.$link-primary;
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .#{with-prefix('left-anchor')} {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(#{spacing.$spacing-06} * -1);
+  }
+
+  .#{with-prefix('right-anchor')} {
+    margin-inline-start: spacing.$spacing-03;
+    white-space: nowrap;
+  }
+
+  &:hover .#{with-prefix('anchor')} {
+    @include breakpoint.breakpoint('md') {
+      opacity: 1;
+    }
+  }
+}

package/components/markdown/autolink-header/autolink-header.tsx

@@ -0,0 +1,107 @@
+/**
+ * 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 { Link } from "@octaviaflow/icons-react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { ReactNode } from "react";
+import slugify from "slugify";
+
+import { MdxComponent } from "../../interfaces";
+import { mediaQueries, useMatchMedia, withPrefix } from "../../utils";
+
+interface AutolinkHeaderProps {
+  is: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  className?: string | null;
+  children: ReactNode;
+  [otherProp: string]: unknown;
+}
+
+const Anchor = ({
+  id,
+  ariaLabel,
+  position,
+}: {
+  id: string;
+  ariaLabel: string;
+  position: "left" | "right";
+}) => {
+  const anchorClasses = clsx(withPrefix("anchor"), {
+    [withPrefix("left-anchor")]: position === "left",
+    [withPrefix("right-anchor")]: position === "right",
+  });
+
+  return (
+    <a
+      className={anchorClasses}
+      href={`#${id}`}
+      aria-label={`${ariaLabel} permalink`}
+    >
+      <Link size={20} />
+    </a>
+  );
+};
+
+const AutolinkHeader: MdxComponent<AutolinkHeaderProps> = ({
+  is: Component,
+  className,
+  children,
+  ...props
+}) => {
+  const isSm = useMatchMedia(mediaQueries.sm);
+
+  const ariaLabel = React.Children.toArray(children).join("");
+
+  const id = `${slugify(ariaLabel, { lower: true })}`;
+
+  const anchorPosition = () => (isSm ? "left" : "right");
+
+  return (
+    <Component
+      className={clsx(withPrefix("header"), className)}
+      {...props}
+      id={id}
+    >
+      {children}
+      <Anchor id={id} ariaLabel={ariaLabel} position={anchorPosition()} />
+    </Component>
+  );
+};
+
+AutolinkHeader.propTypes = {
+  /**
+   * String title for Header
+   */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /**
+   * Specify optional className
+   */
+  className: PropTypes.string,
+  /**
+   * is: element to render as
+   */
+  is: PropTypes.oneOf<AutolinkHeaderProps["is"]>([
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+  ]).isRequired,
+};
+
+AutolinkHeader.defaultProps = { is: "h2" };
+
+export default AutolinkHeader;

package/components/markdown/blockquote.stories.jsx

@@ -0,0 +1,38 @@
+/**
+ * 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 { Blockquote } from "./blockquote";
+import { P } from "./p";
+
+export default {
+  title: "Components/MDX Components/Markdown/Blockquote",
+  component: Blockquote,
+};
+
+const Template = (args) => (
+  <Blockquote {...args}>
+    <P>
+      Without aesthetic, design is either the humdrum repetition of familiar
+      clichés or a wild scramble for novelty. Without aesthetic, the computer is
+      but a mindless speed machine, producing effects without substance, form
+      without relevant content, or content without meaningful form.
+    </P>
+    <cite>– Paul Rand</cite>
+  </Blockquote>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/markdown/blockquote.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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";
+
+interface BlockquoteProps {
+  className?: string | null;
+  [otherProp: string]: unknown;
+}
+
+/**
+ * For MDX files, steer away from using JSX components
+ * for blockquote in favor of standard markdown syntax.
+ *
+ *```
+ * > Without aesthetic, design is either the humdrum repetition of familiar clichés
+ * > or a wild scramble for novelty. Without aesthetic, the computer is but a
+ * > mindless speed machine, producing effects without substance, form without
+ * > relevant content, or content without meaningful form.
+ * >
+ * > <cite>– Paul Rand</cite>
+ * ```
+ */
+export const Blockquote: MdxComponent<BlockquoteProps> = ({
+  className,
+  ...rest
+}) => (
+  <blockquote className={clsx(className, withPrefix("blockquote"))} {...rest} />
+);
+
+Blockquote.propTypes = {
+  /**
+   * Specify optional className for container element
+   */
+  className: PropTypes.string,
+};