@aegov/design-system-react/dist/components/Breadcrumbs/Breadcrumbs.stories.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithMicrodata = exports.WithHomeIcon = exports.WithCustomLink = exports.WithCustomIcons = exports.WithCustomElements = exports.WithCaretSeparator = exports.MixedUsage = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
var _react2 = require("@phosphor-icons/react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// Mock Next.js Link component for demonstration
const Link = /*#__PURE__*/_react.default.forwardRef(({
  href,
  children,
  className
}, ref) => /*#__PURE__*/_react.default.createElement("a", {
  ref: ref,
  href: href,
  className: className
}, children));
Link.displayName = 'Link';

// Custom link component for demonstration
const CustomLink = /*#__PURE__*/_react.default.forwardRef(({
  href,
  children,
  className
}, ref) => /*#__PURE__*/_react.default.createElement("a", {
  ref: ref,
  href: href,
  className: className,
  onClick: e => {
    e.preventDefault();
    console.log('Custom link clicked:', href);
  }
}, children));
CustomLink.displayName = 'CustomLink';
var _default = exports.default = {
  title: 'Components/Breadcrumbs',
  component: _Breadcrumbs.default,
  parameters: {
    layout: 'padded'
  }
};
const Template = args => /*#__PURE__*/_react.default.createElement(_Breadcrumbs.default, args);

// Basic breadcrumbs with slash separator
const Default = exports.Default = Template.bind({});
Default.args = {
  items: [{
    label: 'Home',
    href: '#'
  }, {
    label: 'Media centre',
    href: '#'
  }, {
    label: 'News',
    href: '#'
  }, {
    label: 'Press release and features',
    href: '#'
  }, {
    label: 'A really long page name that must be affected'
  }]
};

// Breadcrumbs with home icon
const WithHomeIcon = exports.WithHomeIcon = Template.bind({});
WithHomeIcon.args = {
  items: [{
    label: 'Home',
    href: '#'
  }, {
    label: 'Media centre',
    href: '#'
  }, {
    label: 'News',
    href: '#'
  }, {
    label: 'Press release',
    href: '#'
  }, {
    label: 'A really long page name that must be affected'
  }],
  showHomeIcon: true
};

// Breadcrumbs with caret separator
const WithCaretSeparator = exports.WithCaretSeparator = Template.bind({});
WithCaretSeparator.args = {
  items: [{
    label: 'Home',
    href: '#'
  }, {
    label: 'Media centre',
    href: '#'
  }, {
    label: 'News',
    href: '#'
  }, {
    label: 'Press release',
    href: '#'
  }, {
    label: 'A really long page name that must be affected'
  }],
  separator: 'caret'
};

// Breadcrumbs with custom icons
const WithCustomIcons = exports.WithCustomIcons = Template.bind({});
WithCustomIcons.args = {
  items: [{
    label: 'Dashboard',
    href: '#',
    icon: /*#__PURE__*/_react.default.createElement(_react2.Table, {
      className: "size-4"
    })
  }, {
    label: 'Notifications',
    href: '#',
    icon: /*#__PURE__*/_react.default.createElement(_react2.Bell, {
      className: "size-4"
    })
  }, {
    label: 'News',
    href: '#',
    icon: /*#__PURE__*/_react.default.createElement(_react2.Newspaper, {
      className: "size-4"
    })
  }, {
    label: 'Current Page'
  }],
  separator: 'caret'
};

// Breadcrumbs with custom Link component (e.g. Next.js Link)
const WithCustomLink = exports.WithCustomLink = Template.bind({});
WithCustomLink.args = {
  ...WithHomeIcon.args,
  items: [{
    label: 'Home',
    href: '/'
  }, {
    label: 'Media centre',
    href: '/media'
  }, {
    label: 'News',
    href: '/news'
  }, {
    label: 'Current Page'
  }],
  linkComponent: Link
};

// Breadcrumbs with schema.org microdata example
const WithMicrodata = exports.WithMicrodata = Template.bind({});
WithMicrodata.args = {
  items: [{
    label: 'Home',
    href: '/'
  }, {
    label: 'Products',
    href: '/products'
  }, {
    label: 'Electronics',
    href: '/products/electronics'
  }, {
    label: 'Smartphones'
  }],
  showHomeIcon: true
};
WithMicrodata.parameters = {
  docs: {
    description: {
      story: 'The Breadcrumbs component automatically includes Schema.org BreadcrumbList microdata attributes for better SEO. This includes proper itemScope, itemType, itemProp, and position metadata.'
    }
  }
};

// Breadcrumbs with custom elements
const WithCustomElements = exports.WithCustomElements = Template.bind({});
WithCustomElements.args = {
  items: [/*#__PURE__*/_react.default.createElement(CustomLink, {
    key: "home",
    href: "/"
  }, "Home"), /*#__PURE__*/_react.default.createElement(CustomLink, {
    key: "media",
    href: "/media"
  }, "Media centre"), /*#__PURE__*/_react.default.createElement(CustomLink, {
    key: "news",
    href: "/news"
  }, "News"), /*#__PURE__*/_react.default.createElement("span", {
    key: "current"
  }, "Current Page")],
  separator: 'caret'
};
WithCustomElements.parameters = {
  docs: {
    description: {
      story: 'You can pass custom elements directly as items. The Breadcrumbs component will apply its styles while maintaining the element\'s functionality.'
    }
  }
};

// Mixed usage example
const MixedUsage = exports.MixedUsage = Template.bind({});
MixedUsage.args = {
  items: [{
    label: 'News',
    href: '/',
    icon: /*#__PURE__*/_react.default.createElement(_react2.Newspaper, {
      className: "size-4"
    })
  }, /*#__PURE__*/_react.default.createElement(CustomLink, {
    key: "media",
    href: "/media"
  }, "Media centre"), {
    label: 'News',
    href: '/news'
  }, /*#__PURE__*/_react.default.createElement("span", {
    key: "current"
  }, "Current Page")],
  separator: 'caret'
};
MixedUsage.parameters = {
  docs: {
    description: {
      story: 'You can mix both object items and custom elements in the same breadcrumb.'
    }
  }
};