@octaviaflow/mdx-components 1.1.3

package/components/divider/divider.stories.jsx

@@ -0,0 +1,74 @@
+/**
+ * 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 { Divider } from "./divider";
+
+export default {
+  title: "Components/MDX Components/Divider",
+  component: Divider,
+  argTypes: {
+    children: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+  },
+};
+
+const Template = (args) => (
+  <>
+    <Divider {...args}>
+      <Grid>
+        <Column sm={4} md={2} lg={4}>
+          <h2>Heading</h2>
+        </Column>
+        <Column sm={4} md={6} lg={8}>
+          <p>
+            The sites first major release will help system users discover and
+            learn about all the assets and libraries in the system with
+            confidence in their completeness, who maintains them, and how to use
+            them. System users can access documentation for all indexed assets
+            and libraries without leaving the platform.
+          </p>
+        </Column>
+      </Grid>
+    </Divider>
+    <Divider {...args}>
+      <Grid>
+        <Column sm={4} md={2} lg={4}>
+          <h2>Heading</h2>
+        </Column>
+        <Column sm={4} md={6} lg={8}>
+          <p>
+            The sites first major release will help system users discover and
+            learn about all the assets and libraries in the system with
+            confidence in their completeness, who maintains them, and how to use
+            them. System users can access documentation for all indexed assets
+            and libraries without leaving the platform.
+          </p>
+        </Column>
+      </Grid>
+    </Divider>
+    <Divider />
+  </>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/divider/divider.tsx

@@ -0,0 +1,54 @@
+/**
+ * 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, { ReactNode } from "react";
+
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+interface DividerProps {
+  children: ReactNode;
+  className?: string | null;
+}
+
+/**
+ * The `<Divider>` component is a wrapper that adds a top border
+ * and spacing to divide sections of content. It can a also be
+ * used without children `<Divider />` to provide a horizontal
+ * rule with correct spacing.
+ */
+export const Divider: MdxComponent<DividerProps> = ({
+  children,
+  className,
+}) => {
+  const classNames = clsx(className, withPrefix("divider"), {
+    [withPrefix("divider--empty")]: children === undefined,
+  });
+  return <div className={classNames}>{children}</div>;
+};
+
+Divider.propTypes = {
+  /**
+   * Pass in the children that will be rendered within the divider
+   */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /**
+   * Optional class name on the divider.
+   */
+  className: PropTypes.string,
+};

package/components/do-dont/_do-dont.scss

@@ -0,0 +1,191 @@
+/*
+ * 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/breakpoint' as breakpoint;
+@use '@carbon/react/scss/type' as type;
+@use '@carbon/react/scss/theme' as theme;
+@use '@carbon/react/scss/utilities/convert' as convert;
+
+@use '../utils' as *;
+
+// Row
+.#{with-prefix('do-dont-row')} {
+  margin-block-start: spacing.$spacing-07;
+}
+
+.#{with-prefix('do-dont-row')} [class*='grid'] {
+  @include breakpoint.breakpoint('md') {
+    margin-block-end: 0;
+  }
+}
+
+.#{with-prefix('do-dont-row')} [class*='markdown_paragraph-container'] {
+  margin-block-start: 0;
+}
+
+.#{with-prefix('do-dont')} {
+  // Caption and title
+  .#{with-prefix('caption')} {
+    padding: spacing.$spacing-05 0 0 0;
+    color: theme.$text-primary;
+    inline-size: 100%;
+
+    @include breakpoint.breakpoint('md') {
+      inline-size: 75%;
+      margin-block-end: 0;
+    }
+  }
+
+  .#{with-prefix('title')} {
+    @include type.type-style('body-compact-01');
+
+    margin: 0;
+    color: theme.$text-primary;
+    font-weight: 600;
+
+    @media (orientation: landscape) {
+      padding: 0 25% 0 0;
+    }
+
+    @include breakpoint.breakpoint('md') {
+      padding: 0 25% 0 0;
+    }
+  }
+
+  .#{with-prefix('description')} {
+    @include type.type-style('body-compact-01');
+
+    padding: 0;
+    margin: 0;
+  }
+
+  // Icons
+  .#{with-prefix('icon')} {
+    position: absolute;
+    z-index: 10;
+    display: block;
+    block-size: convert.rem(24px);
+    inline-size: convert.rem(24px);
+    inset-block-start: calc(1rem - 1px);
+    inset-inline-start: calc(1rem - 1px);
+  }
+
+  .#{with-prefix('icon-correct')} {
+    fill: theme.$support-success;
+  }
+
+  .#{with-prefix('icon-incorrect')} {
+    fill: theme.$support-error;
+  }
+
+  .#{with-prefix('icon')} path[dataIconPath='inner-path'],
+  .#{with-prefix('icon')}path[data-icon-path='inner-path'] {
+    fill: theme.$icon-on-color;
+    opacity: 1;
+  }
+
+  // Example
+  .#{with-prefix('example')} {
+    inline-size: 100%;
+  }
+
+  // Example card
+  .#{with-prefix('card')} {
+    position: relative;
+    background: theme.$layer-01;
+    color: theme.$text-primary;
+    inline-size: 100%;
+  }
+
+  .#{with-prefix('ratio1x1')} .#{with-prefix('card')} {
+    padding-block-start: 100%;
+  }
+
+  .#{with-prefix('ratio4x3')} .#{with-prefix('card')} {
+    padding-block-start: 75%;
+  }
+
+  .#{with-prefix('ratio3x4')} .#{with-prefix('card')} {
+    padding-block-start: 133.3333%;
+  }
+
+  .#{with-prefix('ratio2x1')} .#{with-prefix('card')} {
+    padding-block-start: 50%;
+  }
+
+  .#{with-prefix('ratio1x2')} .#{with-prefix('card')} {
+    padding-block-start: 150%;
+  }
+
+  .#{with-prefix('ratio9x16')} .#{with-prefix('card')} {
+    padding-block-start: 177.7778%;
+  }
+
+  .#{with-prefix('ratio16x9')} .#{with-prefix('card')} {
+    padding-block-start: 56.25%;
+  }
+
+  .#{with-prefix('card')}::before {
+    position: absolute;
+    z-index: 1;
+    block-size: convert.rem(3px);
+    content: '';
+    inline-size: 100%;
+    inset-block-start: convert.rem(-1px);
+    inset-inline-start: 0;
+  }
+
+  .#{with-prefix('correct')} .#{with-prefix('card')}::before {
+    background: theme.$support-success;
+  }
+
+  .#{with-prefix('incorrect')} .#{with-prefix('card')}::before {
+    background: theme.$support-error;
+  }
+
+  // Example content
+  .#{with-prefix('content')} {
+    font-size: 1.25rem;
+    font-weight: 300;
+    inline-size: 100%;
+  }
+
+  .#{with-prefix('text')} {
+    padding: 10%;
+    font-size: 1.5rem;
+    font-weight: 300;
+    line-height: 1.25;
+  }
+
+  .#{with-prefix('example')} .#{with-prefix('card-content')} {
+    position: relative;
+  }
+
+  .#{with-prefix('ratio')} .#{with-prefix('card-content')} {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inset-block: 0 0;
+    inset-inline: 0 0;
+  }
+
+  // Images
+  .#{with-prefix('content')} img {
+    display: block;
+    inline-size: 100%;
+    margin-block-end: 0;
+  }
+
+  .#{with-prefix('image')} {
+    display: block;
+    padding: 0;
+    margin: 0;
+    inline-size: 100%;
+  }
+}

package/components/do-dont/do-dont-row.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 { 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 DoDontRowProps {
+  children: ReactNode;
+  className?: string | null;
+}
+
+/**
+ * The `<DoDont>` component includes built in columns and is used within
+ * the `<DoDontRow>` component. You can provide an image or video as children,
+ * or text using the `text` prop.
+ */
+export const DoDontRow: MdxComponent<DoDontRowProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <Grid className={clsx(className, withPrefix("do-dont-row"))}>
+      {children}
+    </Grid>
+  );
+};
+
+DoDontRow.propTypes = {
+  /** set children */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /** set optional custom class */
+  className: PropTypes.string,
+};

package/components/do-dont/do-dont.stories.jsx

@@ -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 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 { DoDont } from "./do-dont";
+import { DoDontRow } from "./do-dont-row";
+import lightTheme from "./light-theme.jpg";
+
+export default {
+  title: "Components/MDX Components/DoDont",
+  component: DoDontRow,
+  subcomponents: { DoDont },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+  },
+};
+
+const Template = (args) => (
+  <DoDontRow>
+    <DoDont
+      aspectRatio="1:1"
+      text="DoDont example"
+      captionTitle="Caption title"
+      caption="This is a caption."
+      type="do"
+      {...args}
+    ></DoDont>
+    <DoDont aspectRatio="1:1" type="dont" {...args}>
+      <img alt="Use markdown in mdx files. ![](dodont.png)" src={lightTheme} />
+    </DoDont>
+  </DoDontRow>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/do-dont/do-dont.tsx

@@ -0,0 +1,161 @@
+/**
+ * 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, Theme } from "@octaviaflow/react";
+import { CheckmarkFilled, Misuse } 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";
+
+interface DoDontProps {
+  children: ReactNode;
+  caption?: string | null;
+  captionTitle?: string | null;
+  text?: string | null;
+  aspectRatio?: string | null;
+  color?: string | null;
+  type: "do" | "dont";
+  className?: string | null;
+  colLg?: number | null;
+  colMd?: number | null;
+}
+
+/**
+ * The `<DoDont>` component includes built in columns and is used within
+ * the `<DoDontRow>` component. You can provide an image or video as children,
+ * or text using the `text` prop.
+ */
+export const DoDont: MdxComponent<DoDontProps> = ({
+  children,
+  caption,
+  captionTitle,
+  text,
+  aspectRatio,
+  color,
+  type,
+  className,
+  colLg,
+  colMd,
+}) => {
+  const iconClassNames = clsx(withPrefix("icon"), {
+    [withPrefix("icon-correct")]: type === "do",
+    [withPrefix("icon-incorrect")]: type === "dont",
+  });
+
+  const aspectRatios = ["1:1", "2:1", "1:2", "4:3", "3:4", "9:16", "16:9"];
+
+  const wrapperClassNames = clsx(className, withPrefix("example"), {
+    [withPrefix("correct")]: type === "do",
+    [withPrefix("incorrect")]: type === "dont",
+    [withPrefix("ratio")]: aspectRatio && aspectRatios.includes(aspectRatio),
+    [withPrefix("ratio1x1")]: aspectRatio === "1:1",
+    [withPrefix("ratio2x1")]: aspectRatio === "2:1",
+    [withPrefix("ratio1x2")]: aspectRatio === "1:2",
+    [withPrefix("ratio4x3")]: aspectRatio === "4:3",
+    [withPrefix("ratio3x4")]: aspectRatio === "3:4",
+    [withPrefix("ratio9x16")]: aspectRatio === "9:16",
+    [withPrefix("ratio16x9")]: aspectRatio === "16:9",
+  });
+
+  let colLarge = 4;
+  if (colLg) colLarge = Number(colLg);
+
+  let colMedium = 4;
+  if (colMd) colMedium = Number(colMd);
+
+  const renderCaption = (
+    caption?: string | null,
+    captionTitle?: string | null,
+  ) => {
+    if (caption || captionTitle) {
+      return (
+        <div className={withPrefix("caption")}>
+          {captionTitle && (
+            <p className={withPrefix("title")}>{captionTitle}</p>
+          )}
+          {caption && <p className={withPrefix("description")}>{caption}</p>}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Column sm={4} md={colMedium} lg={colLarge}>
+      <Theme theme={color === "dark" ? "g100" : undefined}>
+        <div className={withPrefix("do-dont")}>
+          <div className={wrapperClassNames}>
+            <div className={withPrefix("card")}>
+              <div className={withPrefix("card-content")}>
+                {type === "do" && (
+                  <CheckmarkFilled size={24} className={iconClassNames} />
+                )}
+                {type !== "do" && (
+                  <Misuse size={24} className={iconClassNames} />
+                )}
+                <div className={withPrefix("content")}>
+                  {children}
+                  {text ? <p className={withPrefix("text")}>{text}</p> : null}
+                </div>
+              </div>
+            </div>
+            {renderCaption(caption, captionTitle)}
+          </div>
+        </div>
+      </Theme>
+    </Column>
+  );
+};
+
+DoDont.defaultProps = {
+  colLg: 4,
+  colMd: 4,
+  color: "light",
+};
+
+DoDont.propTypes = {
+  /** Set the aspect ratio */
+  aspectRatio: PropTypes.oneOf([
+    "2:1",
+    "1:1",
+    "1:2",
+    "16:9",
+    "9:16",
+    "4:3",
+    "3:4",
+  ]),
+  /** caption (optional) */
+  caption: PropTypes.string,
+  /** title for the card caption (optional) */
+  captionTitle: PropTypes.string,
+  /** Provide the contents of the DoDont, can be an image or video */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /** set optional custom class */
+  className: PropTypes.string,
+  /** set how many columns wide at large breakpoint  */
+  colLg: PropTypes.number,
+  /** set how many columns wide at medium breakpoint  */
+  colMd: PropTypes.number,
+  /** set to "dark" for dark background card */
+  color: PropTypes.oneOf(["light", "dark"]),
+  /** text displayed in the example card */
+  text: PropTypes.string,
+  /** set card type */
+  type: PropTypes.oneOf<DoDontProps["type"]>(["do", "dont"]).isRequired,
+};

package/components/gif-player/_gif-player.scss

@@ -0,0 +1,64 @@
+/*
+ * 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('gif-player-container')} {
+  position: relative;
+
+  .#{with-prefix('controls')} {
+    position: absolute;
+    padding: 0;
+    border: none;
+    background: transparent;
+    block-size: 1.5rem;
+    inline-size: 1.5rem;
+    inset-block-end: spacing.$spacing-05;
+    inset-inline-start: spacing.$spacing-05;
+    outline: none;
+  }
+
+  .#{with-prefix('controls')} svg {
+    fill: theme.$icon-inverse;
+  }
+
+  .#{with-prefix('dark')} svg {
+    fill: theme.$icon-primary;
+  }
+
+  .#{with-prefix('controls')}:focus svg {
+    outline: 2px solid theme.$focus;
+    outline-offset: -2px;
+  }
+
+  //toggle static image
+  .#{with-prefix('img-hidden')} {
+    display: none;
+  }
+
+  .#{with-prefix('img-displayed')} {
+    display: block;
+  }
+
+  //toggle gif
+  .#{with-prefix('gif-displayed')} {
+    display: block;
+  }
+
+  .#{with-prefix('gif-hidden')} {
+    display: none;
+  }
+
+  //styles for gif player in image gallery
+  &.#{with-prefix('gif-in-dialog')} {
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+}

package/components/gif-player/gif-player.stories.jsx

@@ -0,0 +1,45 @@
+/**
+ * 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 { GifPlayer } from "./gif-player";
+import cloudGif from "./cloud.gif";
+import cloudJpg from "./cloud.jpg";
+
+const stories = {
+  title: "Components/MDX Components/Images & Video/GifPlayer",
+  component: GifPlayer,
+  argTypes: {
+    children: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+  },
+};
+
+export default stories;
+
+const Template = (args) => (
+  <GifPlayer {...args}>
+    <img alt="animated" src={cloudGif} />
+    <img alt="static" src={cloudJpg} />
+  </GifPlayer>
+);
+
+export const Default = Template.bind({});
+Default.args = {};