Shared MDX Component Library

This page documents the reusable React/MDX components and partials available across all SMDS documentation domains. Import any component from @site/src/components.

---

Components

DomainBadge

Renders a colour-coded pill badge identifying the SMDS domain a page belongs to.

Available domains: customer · vendor · facility · vessel · geography · commodity · resources

import DomainBadge from '@site/src/components/DomainBadge';

<DomainBadge domain="customer" />
<DomainBadge domain="vendor" label="Vendor Domain" />

Customer Vendor Facility Vessel Geography Commodity Resources

---

DocCard + DocCardGrid

Clickable card linking to another doc. Use DocCardGrid to arrange multiple cards responsively.

import DocCard, { DocCardGrid } from '@site/src/components/DocCard';

<DocCardGrid columns={2}>
  <DocCard
    title="Customer HLD"
    description="High-level architecture overview for the Customer domain."
    href="/docs-customer/architecture/hld"
    domain="customer"
    icon="🏗️"
  />
  <DocCard
    title="Facility Integration"
    description="How facility data flows from ingestion to CMD."
    href="/docs-facility/architecture/hld"
    domain="facility"
    icon="🏭"
  />
</DocCardGrid>

🏗️Customer HLDCustomer

High-level architecture overview for the Customer domain.

🤝Vendor DomainVendor

Vendor data management and ingestion flows.

🏭Facility OverviewFacility

Facility data ingestion, validation and storage.

📚ResourcesResources

Developer guides, devops, architecture and integration patterns.

---

ApiEndpoint

Displays a styled REST API endpoint with method badge, path, summary and auth label.

import ApiEndpoint from '@site/src/components/ApiEndpoint';

<ApiEndpoint
  method="GET"
  path="/api/v1/customers/{customerId}"
  summary="Fetch a customer record by its unique ID"
  auth="Bearer token (Maersk IAM)"
/>

<ApiEndpoint
  method="POST"
  path="/api/v1/customers"
  summary="Create a new customer"
  auth="Bearer token (Maersk IAM)"
/>

<ApiEndpoint
  method="DELETE"
  path="/api/v1/customers/{customerId}"
  summary="Remove a customer (soft-delete)"
  auth="Bearer token — admin scope required"
  deprecated
/>

GET/api/v1/customers/{customerId}

Fetch a customer record by its unique ID🔒 Bearer token (Maersk IAM)

POST/api/v1/customers

Create a new customer🔒 Bearer token (Maersk IAM)

DELETE/api/v1/customers/{customerId}deprecated

Remove a customer (soft-delete)🔒 Bearer token — admin scope required

---

InfoBanner

A styled notification banner. Variants: info · warning · danger · success · tip

import InfoBanner from '@site/src/components/InfoBanner';

<InfoBanner variant="warning" title="Breaking Change">
  The `/v1/customers` endpoint signature changed in release 3.2.
  Update your integration before the cutover date.
</InfoBanner>

<InfoBanner variant="success" title="Production Ready">
  This feature is fully available in all environments.
</InfoBanner>

ℹ️

Info Banner

This is an info banner. Useful for callouts, notes, or context-setting.

⚠️

Warning Banner

This is a warning banner. Use for deprecation notices or critical caveats.

🚨

Danger Banner

This is a danger banner. Use for security alerts or breaking changes.

✅

Success Banner

This is a success banner. Use for confirming feature availability.

💡

Tip Banner

This is a tip banner. Great for best practices and helpful hints.

---

MDX Partials

Partials live in docs-resources/_partials/. Import them directly into any MDX file.

migration-disclaimer.mdx

A standard admonition noting that the page was migrated from Confluence.

import MigrationDisclaimer from '@site/docs-resources/_partials/migration-disclaimer.mdx';

<MigrationDisclaimer />

images-not-migrated.mdx

Use on pages where Confluence attachment images could not be migrated.

import ImagesNotMigrated from '@site/docs-resources/_partials/images-not-migrated.mdx';

<ImagesNotMigrated />

tbd-placeholder.mdx

Replace hand-written TBD notes with this standard placeholder.

import TbdPlaceholder from '@site/docs-resources/_partials/tbd-placeholder.mdx';

<TbdPlaceholder />

active-development.mdx

Note that a service/feature is under active development and APIs may change.

import ActiveDevelopment from '@site/docs-resources/_partials/active-development.mdx';

<ActiveDevelopment />

---

Quick Reference

Component	Import path	Key props
DomainBadge	@site/src/components/DomainBadge	domain, label
DocCard	@site/src/components/DocCard	title, href, description, domain, icon
DocCardGrid	@site/src/components/DocCard (named export)	columns (1–4)
ApiEndpoint	@site/src/components/ApiEndpoint	method, path, summary, auth, deprecated
InfoBanner	@site/src/components/InfoBanner	variant, title, children, showIcon