@octaviaflow/mdx-components 1.1.3

package/components/resource-card/resource-card.tsx

@@ -0,0 +1,201 @@
+/**
+ * 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 { AspectRatio, Theme } from "@octaviaflow/react";
+import {
+  ArrowRight,
+  Calendar,
+  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 { mediaQueries, useMatchMedia, withPrefix } from "../utils";
+
+type Color = "light" | "dark";
+type ActionIcon = "launch" | "arrowRight" | "download" | "email" | "calendar";
+type AspectRatio = "2:1" | "1:1" | "16:9" | "4:3";
+
+interface ResourceCardProps {
+  children: ReactNode;
+  component?: ReactNode | null;
+  className?: string | null;
+  href?: string | null;
+  subTitle?: string | null;
+  title?: string | null;
+  color?: Color | null;
+  disabled?: boolean | null;
+  actionIcon?: ActionIcon | null;
+  aspectRatio?: AspectRatio | null;
+}
+
+/**
+ * The `<ResourceCard>` component should be wrapped within the `<CardGroup>` component,
+ * this grid wrapper component will add correct spacing and borders between cards.
+ *
+ *```
+ * <CardGroup>
+ * <Column lg={4}>
+ * <ResourceCard props>
+ *
+ * ![](img.png)
+ *
+ * </ResourceCard>
+ * </Column>
+ * </CardGroup>
+ * ```
+ */
+export const ResourceCard: MdxComponent<ResourceCardProps> = (props) => {
+  const {
+    children,
+    href,
+    subTitle,
+    title,
+    color,
+    disabled,
+    aspectRatio: aspectRatioProp,
+    actionIcon,
+    className,
+    component,
+    ...rest
+  } = props;
+
+  const isLg = useMatchMedia(mediaQueries.lg);
+  const isXlg = useMatchMedia(mediaQueries.xlg);
+
+  const ResourceCardClassNames = clsx(className, withPrefix("resource-card"), {
+    [withPrefix("disabled")]: disabled,
+  });
+
+  // if aspectRatio is not specified and it's a card with title displaying at Lg breakpoint,
+  // default aspectRatio to 16:9, all other cases default to 2:1
+  const aspectRatio =
+    aspectRatioProp || (!!title && isLg && !isXlg ? "16:9" : "2:1");
+
+  const carbonTileclassNames = clsx(["ods--tile"], {
+    "ods--tile--clickable": href !== undefined,
+    [withPrefix("card-with-title")]: !!title,
+    [withPrefix("card-with-component")]: !!component,
+  });
+
+  const cardContent = (
+    <>
+      {subTitle && <h5 className={withPrefix("subtitle")}>{subTitle}</h5>}
+      {title && <h4 className={withPrefix("title")}>{title}</h4>}
+      {component && (
+        <div className={withPrefix("child-component")}>{component}</div>
+      )}
+      <div className={withPrefix("icon-img")}>{children}</div>
+      <div className={withPrefix("icon-action")}>
+        {!disabled &&
+          actionIcon &&
+          {
+            launch: <Launch size={20} aria-label="Open resource" />,
+            arrowRight: <ArrowRight size={20} aria-label="Open resource" />,
+            download: <Download size={20} aria-label="Download" />,
+            email: <Email size={20} aria-label="Email" />,
+            calendar: <Calendar size={20} aria-label="Calendar" />,
+            disabled: <Error size={20} aria-label="disabled" />,
+          }[actionIcon]}
+        {disabled === true && <Error size={20} aria-label="disabled" />}
+      </div>
+    </>
+  );
+
+  let cardContainer;
+  if (disabled === true || href === undefined) {
+    cardContainer = <div className={carbonTileclassNames}>{cardContent}</div>;
+  } else {
+    cardContainer = (
+      <a href={href!} className={carbonTileclassNames} {...rest}>
+        {cardContent}
+      </a>
+    );
+  }
+
+  return (
+    <Theme theme={color === "dark" ? "g100" : "g10"}>
+      <div className={ResourceCardClassNames}>
+        {/* @ts-ignore -- output string equals type */}
+        <AspectRatio ratio={`${aspectRatio.replace(":", "x")}`}>
+          <div className="ods--aspect-ratio--object">{cardContainer}</div>
+        </AspectRatio>
+      </div>
+    </Theme>
+  );
+};
+
+ResourceCard.propTypes = {
+  /**
+   * Action icon
+   */
+  actionIcon: PropTypes.oneOf<ActionIcon>([
+    "launch",
+    "arrowRight",
+    "download",
+    "email",
+    "calendar",
+  ]).isRequired,
+  /**
+   * Set card aspect ratio
+   */
+  aspectRatio: PropTypes.oneOf<AspectRatio>(["2:1", "1:1", "16:9", "4:3"]),
+  /**
+   * Add an image to display in lower left
+   */
+  children: PropTypes.node as unknown as React.Validator<React.ReactNode>,
+  /**
+   * Optional class name
+   */
+  className: PropTypes.string,
+  /**
+   * set to "dark" for dark background card
+   */
+  color: PropTypes.oneOf<Color>(["light", "dark"]),
+
+  /**
+   * Optional component to render in top right
+   */
+  component: PropTypes.element,
+
+  /**
+   * Use for disabled card
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Set url for card
+   */
+  href: PropTypes.string,
+  /**
+   * Smaller heading
+   */
+  subTitle: PropTypes.string,
+  /**
+   * Large heading
+   */
+  title: PropTypes.string,
+};
+
+ResourceCard.defaultProps = {
+  color: "light",
+  disabled: false,
+  actionIcon: "launch",
+};

package/components/storybook-demo/_storybook-demo.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/spacing' as spacing;
+@use '@carbon/react/scss/theme' as theme;
+@use '@carbon/react/scss/type' as type;
+@use '@carbon/react/scss/utilities/convert' as convert;
+
+@use '../utils' as *;
+
+.#{with-prefix('demo-dropdowns')} {
+  // override carbon, label inset-inline-start padding
+  .ods--label {
+    padding-inline-start: spacing.$spacing-05;
+  }
+
+  .ods--dropdown {
+    border-block-end: 1px solid theme.$layer-selected-01;
+  }
+}
+
+.#{with-prefix('theme-selector')} {
+  :global(.ods--dropdown)::after {
+    position: absolute;
+    display: block;
+    background-color: theme.$layer-selected;
+    block-size: convert.rem(40px);
+    content: '';
+    inline-size: 1px;
+    inset-block-start: 0;
+    inset-inline-end: -1px;
+  }
+}
+
+.#{with-prefix('storybook-demo')} {
+  padding: spacing.$spacing-03;
+  background: theme.$layer-01;
+  block-size: convert.rem(320px);
+}
+
+.#{with-prefix('tall')},
+.#{with-prefix('wide')} {
+  block-size: convert.rem(480px);
+}
+
+.#{with-prefix('wide')}.#{with-prefix('tall')} {
+  block-size: convert.rem(640px);
+}
+
+.#{with-prefix('iframe')} {
+  block-size: 100%;
+  inline-size: 100%;
+}

package/components/storybook-demo/storybook-demo.stories.jsx

@@ -0,0 +1,70 @@
+/**
+ * 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 { StorybookDemo } from "./storybook-demo";
+
+export default {
+  title: "Components/MDX Components/StorybookDemo",
+  component: StorybookDemo,
+};
+
+const Template = (args) => (
+  <StorybookDemo
+    {...args}
+    themeSelector={true}
+    wide
+    tall
+    url="https://react.carbondesignsystem.com"
+    variants={[
+      {
+        label: "Button",
+        variant: "components-button--default",
+      },
+      {
+        label: "Secondary",
+        variant: "components-button--secondary",
+      },
+      {
+        label: "Tertiary",
+        variant: "components-button--tertiary",
+      },
+      {
+        label: "Ghost",
+        variant: "components-button--ghost",
+      },
+      {
+        label: "Danger",
+        variant: "components-button--danger",
+      },
+      {
+        label: "Icon button",
+        variant: "components-button--icon-button",
+      },
+      {
+        label: "Set of buttons",
+        variant: "components-button--set-of-buttons",
+      },
+      {
+        label: "Skeleton",
+        variant: "components-button--skeleton",
+      },
+    ]}
+  />
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/components/storybook-demo/storybook-demo.tsx

@@ -0,0 +1,190 @@
+/**
+ * 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, Dropdown, Grid, Link } from "@octaviaflow/react";
+import { clsx } from "clsx";
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+
+import { Caption } from "../caption/caption";
+import { MdxComponent } from "../interfaces";
+import { withPrefix } from "../utils";
+
+interface StorybookDemoProps {
+  tall?: boolean | null;
+  themeSelector?: boolean | null;
+  wide?: boolean | null;
+  url: string;
+  variants?: Array<{
+    label: string;
+    variant: string;
+  }> | null;
+}
+
+/**
+ * The `<StorybookDemo>` component displays an iframe embed for the storybook story
+ * for a component. It has the option to show different variants and themes. It also has a
+ * `wide` prop to span the full width, and `tall` for larger components. If you would like
+ * to use the theme selector, please use the Carbon React Storybook url,
+ * https://react.carbondesignsystem.com/?path=/story/components-button--default&globals=theme:g10
+ *  as an example. The `themeSelector` appends `&globals=theme:g10` to the url.
+ */
+export const StorybookDemo: MdxComponent<StorybookDemoProps> = ({
+  tall,
+  themeSelector,
+  wide,
+  url,
+  variants,
+}) => {
+  const themeItems = [
+    {
+      id: "white",
+      label: "White",
+      src: "white",
+    },
+    {
+      id: "g10",
+      label: "Gray 10",
+      src: "g10",
+    },
+    {
+      id: "g90",
+      label: "Gray 90",
+      src: "g90",
+    },
+    {
+      id: "g100",
+      label: "Gray 100",
+      src: "g100",
+    },
+  ];
+
+  const columnWidth = wide ? 12 : 8;
+
+  const demoClassNames = clsx(withPrefix("storybook-demo"), {
+    [withPrefix("tall")]: tall,
+    [withPrefix("wide")]: wide,
+  });
+
+  const [theme, setTheme] = useState(themeItems[0]!.src);
+  const onThemeChange = (item: {
+    selectedItem: { src: React.SetStateAction<string> };
+  }) => {
+    setTheme(item.selectedItem.src);
+  };
+
+  const multipleVariants = variants && variants.length > 1;
+
+  const [variant, setVariant] = useState(variants?.[0]?.variant);
+
+  const onVariantChange = (item: { selectedItem: { variant: string } }) => {
+    setVariant(item.selectedItem.variant);
+  };
+
+  const iframeUrl =
+    url + "/iframe.html?id=" + variant + "&globals=theme:" + theme;
+
+  // Only add border when theme and variant selectors are being displayed
+  const border = clsx({
+    [withPrefix("theme-selector")]: multipleVariants,
+  });
+
+  return (
+    <>
+      <Grid condensed className={withPrefix("demo-dropdowns")}>
+        {themeSelector && (
+          <Column sm={2} md={4}>
+            <Dropdown
+              id="theme-selector"
+              titleText="Theme selector"
+              label="theme"
+              items={themeItems}
+              onChange={onThemeChange}
+              initialSelectedItem={themeItems[0]}
+              className={border}
+            />
+          </Column>
+        )}
+        {multipleVariants && (
+          <Column sm={2} md={4}>
+            <Dropdown
+              id="variant-selector"
+              titleText="Variant selector"
+              label="variant"
+              items={variants}
+              initialSelectedItem={{ variant: variants[0]?.label }}
+              onChange={onVariantChange}
+            />
+          </Column>
+        )}
+      </Grid>
+      <Grid condensed>
+        <Column sm={4} md={8} lg={columnWidth} className={demoClassNames}>
+          <iframe
+            title="Component demo"
+            className={withPrefix("iframe")}
+            src={iframeUrl}
+            frameBorder="no"
+            sandbox="allow-forms allow-scripts allow-same-origin"
+          />
+        </Column>
+      </Grid>
+      <Grid>
+        <Column sm={4} md={7}>
+          <Caption>
+            This live demo contains only a preview of functionality and styles
+            available for this component. View the{" "}
+            <Link
+              href={`${url}/?path=/story/${variant}&globals=theme:${theme}`}
+            >
+              full demo
+            </Link>{" "}
+            on Storybook for additional information such as its version,
+            controls, and API documentation.
+          </Caption>
+        </Column>
+      </Grid>
+    </>
+  );
+};
+
+StorybookDemo.propTypes = {
+  /**
+   * Storybook demo height
+   */
+  tall: PropTypes.bool,
+  /**
+   * Storybook demo display or hide theme selector
+   */
+  themeSelector: PropTypes.bool,
+  /**
+   * Storybook demo url to change themes and variants
+   */
+  url: PropTypes.string.isRequired,
+  /**
+   * Storybook demo variants for the specified component
+   */
+  variants: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      variant: PropTypes.string.isRequired,
+    }).isRequired,
+  ),
+  /**
+   * Storybook demo width
+   */
+  wide: PropTypes.bool,
+};

package/components/tabs/_tabs.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/motion' as motion;
+@use '@carbon/react/scss/breakpoint' as breakpoint;
+@use '@carbon/react/scss/type' as type;
+@use '@carbon/react/scss/theme' as theme;
+
+@use '../utils' as *;
+
+.#{with-prefix('tab-dropdown')},
+.#{with-prefix('tab-list')} {
+  margin-block-start: spacing.$spacing-06;
+}
+
+.#{with-prefix('tab-list')} {
+  display: flex;
+  border-block-end: 1px solid theme.$border-subtle-01;
+  max-inline-size: min-content;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  @include breakpoint.breakpoint('md') {
+    overflow: visible;
+  }
+}
+
+.#{with-prefix('tab-panel')} {
+  padding: spacing.$spacing-05;
+  background: theme.$layer-01;
+
+  color: theme.$text-primary;
+  margin-block-start: 0;
+  padding-block-end: spacing.$spacing-08;
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.#{with-prefix('tab')} {
+  @include type.type-style('body-short-01');
+
+  position: relative;
+  display: inline-block;
+  align-items: center;
+  padding: spacing.$spacing-03 spacing.$spacing-05;
+  border: none;
+  margin: 0;
+  background-color: theme.$layer-01;
+  block-size: 3rem;
+  border-inline-end: 1px solid theme.$layer-03;
+  color: theme.$text-primary;
+
+  cursor: pointer;
+  min-inline-size: 0;
+  outline-color: transparent;
+  text-align: start;
+  transition: color motion.$duration-fast-02,
+    background-color motion.$duration-fast-02,
+    border-color motion.$duration-fast-02,
+    outline-color motion.$duration-fast-02;
+  white-space: nowrap;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:focus {
+    // allows overflow to be above subsequent tab
+    z-index: 1;
+    border-inline-end: 1px solid theme.$border-inverse;
+    outline: 1px solid theme.$focus-inverse;
+    outline-offset: -4px;
+  }
+
+  &:hover {
+    background-color: theme.$background-hover;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.#{with-prefix('tab')}[aria-selected='true'] {
+  background-color: theme.$layer-selected-inverse;
+  color: theme.$focus-inset;
+}
+
+.#{with-prefix('tab-list')} li:last-of-type #{with-prefix('.tab')} {
+  border-inline-end: none;
+}

package/components/tabs/select.tsx

@@ -0,0 +1,60 @@
+/**
+ * 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 { Dropdown } from "@octaviaflow/react";
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
+
+import { MdxComponent, NonScalarNode } from "../interfaces";
+import { withPrefix } from "../utils";
+import { TabContext } from "./tabs";
+
+interface SelectProps {
+  _id: string;
+  children: NonScalarNode;
+}
+
+export const Select: MdxComponent<SelectProps> = ({ children, _id }) => {
+  const { setActiveTab } = useContext(TabContext);
+  const items = React.Children.map(children, (child, index) => ({
+    index,
+    label: child.props.label,
+  }));
+
+  return (
+    // @ts-ignore
+    <Dropdown
+      size="md"
+      onChange={({ selectedItem }: { selectedItem: { index: number } }) =>
+        setActiveTab(selectedItem.index)
+      }
+      initialSelectedItem={items?.[0]}
+      label="tab selection"
+      items={items}
+      id={_id}
+      className={withPrefix("tab-dropdown")}
+    />
+  );
+};
+
+Select.propTypes = {
+  _id: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.element.isRequired,
+    PropTypes.arrayOf(PropTypes.element.isRequired).isRequired,
+  ]).isRequired,
+};
+
+export default Select;