orcs-design-system/es/components/Breadcrumbs/index.js

TeamForm's Design System, aka: ORCS

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { space, layout, typography } from "styled-system";
import { themeGet } from "@styled-system/theme-get";
import StyledLink from "../StyledLink";
import Popover from "../Popover";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const BreadcrumbsWrapper = styled("nav").attrs({
  "aria-label": "breadcrumb"
}).withConfig({
  displayName: "Breadcrumbs__BreadcrumbsWrapper",
  componentId: "sc-qbw4kn-0"
})(["", " ", ""], space, layout);
const List = styled("ol").withConfig({
  shouldForwardProp: prop => !["variant"].includes(prop)
}).withConfig({
  displayName: "Breadcrumbs__List",
  componentId: "sc-qbw4kn-1"
})(["display:flex;flex-direction:", ";flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px;text-shadow:", ";", ""], _ref => {
  let {
    showAsIconTooltip
  } = _ref;
  return showAsIconTooltip ? "column" : "row";
}, _ref2 => {
  let {
    variant
  } = _ref2;
  return variant === "white" ? "0 0px 5px rgba(0,0,0,0.2)" : "none";
}, space);
const Item = styled("li").withConfig({
  shouldForwardProp: prop => !["variant", "isLast"].includes(prop)
}).withConfig({
  displayName: "Breadcrumbs__Item",
  componentId: "sc-qbw4kn-2"
})(["display:flex;gap:5px;align-items:center;color:", ";font-size:", ";line-height:1.5;font-weight:", ";& > a{color:inherit;text-decoration:none;&:hover{text-decoration:underline;}}", ""], _ref3 => {
  let {
    variant,
    theme
  } = _ref3;
  return variant === "white" ? themeGet("colors.white")({
    theme
  }) : themeGet("colors.greyDarker")({
    theme
  });
}, themeGet("fontSizes.0"), _ref4 => {
  let {
    isLast
  } = _ref4;
  return isLast ? themeGet("fontWeights.2") : "normal";
}, typography);
const Breadcrumbs = _ref5 => {
  let {
    config,
    variant = "default",
    showAsIconTooltip,
    ...props
  } = _ref5;
  if (showAsIconTooltip) {
    return /*#__PURE__*/_jsx(Popover, {
      text: /*#__PURE__*/_jsx(List, {
        variant: variant,
        showAsIconTooltip: showAsIconTooltip,
        children: config.map((item, idx) => {
          const isLast = idx === config.length - 1;
          return /*#__PURE__*/_jsxs(Item, {
            variant: variant,
            isLast: isLast,
            "aria-current": isLast ? "page" : undefined,
            children: [isLast ? /*#__PURE__*/_jsx("span", {
              children: item.label
            }) : /*#__PURE__*/_jsx(StyledLink, {
              fontSize: "0",
              to: item.to,
              white: variant === "white",
              children: item.label
            }), !isLast && /*#__PURE__*/_jsx("span", {
              children: "/"
            })]
          }, item.id || item.to || idx);
        })
      }),
      width: "fit-content",
      direction: "top",
      inlineBlock: true,
      children: showAsIconTooltip
    });
  }
  return /*#__PURE__*/_jsx(BreadcrumbsWrapper, {
    ...props,
    children: /*#__PURE__*/_jsx(List, {
      variant: variant,
      children: config.map((item, idx) => {
        const isLast = idx === config.length - 1;
        return /*#__PURE__*/_jsxs(Item, {
          variant: variant,
          isLast: isLast,
          "aria-current": isLast ? "page" : undefined,
          children: [isLast ? /*#__PURE__*/_jsx("span", {
            children: item.label
          }) : /*#__PURE__*/_jsx(StyledLink, {
            fontSize: "0",
            to: item.to,
            white: variant === "white",
            children: item.label
          }), !isLast && /*#__PURE__*/_jsx("span", {
            children: "/"
          })]
        }, item.id || item.to || idx);
      })
    })
  });
};
Breadcrumbs.propTypes = {
  /** Array of breadcrumb items: { label, to, id } */
  config: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.node.isRequired,
    to: PropTypes.string,
    id: PropTypes.string
  })).isRequired,
  /** Variant for text color: 'default' (grey) or 'white' */
  variant: PropTypes.oneOf(["default", "white"]),
  /** If provided, renders the popover-with-icon variant using this icon */
  showAsIconTooltip: PropTypes.node
};
Breadcrumbs.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Breadcrumbs",
  "props": {
    "variant": {
      "defaultValue": {
        "value": "\"default\"",
        "computed": false
      },
      "description": "Variant for text color: 'default' (grey) or 'white'",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"default\"",
          "computed": false
        }, {
          "value": "\"white\"",
          "computed": false
        }]
      },
      "required": false
    },
    "config": {
      "description": "Array of breadcrumb items: { label, to, id }",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "label": {
              "name": "node",
              "required": true
            },
            "to": {
              "name": "string",
              "required": false
            },
            "id": {
              "name": "string",
              "required": false
            }
          }
        }
      },
      "required": true
    },
    "showAsIconTooltip": {
      "description": "If provided, renders the popover-with-icon variant using this icon",
      "type": {
        "name": "node"
      },
      "required": false
    }
  }
};
export default Breadcrumbs;