@elliemae/ds-breadcrumb 2.3.0-next.0 → 3.0.0-alpha.0

package/esm/DSBreadcrumb.js

@@ -1,88 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import React, { useMemo, cloneElement } from 'react';
-import { PropTypes, describe } from 'react-desc';
-import { DSBreadcrumbItem } from './DSBreadcrumbItem.js';
-import { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
-import { StyledContainer, StyledList } from './styles.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["containerProps", "as", "label", "isTitle", "children", "trailingSlash"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const htmlElements = ['nav', 'div', 'header', 'footer', 'main'];
-
-const DSBreadcrumb = _ref => {
-  let {
-    containerProps = {},
-    as = 'nav',
-    label = 'Breadcrumb',
-    isTitle = false,
-    children,
-    trailingSlash = true
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const [addRef, onKeyDown] = useKeyboardNavigation();
-  const safeElement = useMemo(() => htmlElements.indexOf(as) > -1 ? as : 'nav', [as]);
-  return /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread(_objectSpread({
-    "aria-label": label,
-    "data-testid": "breadcrumb-nav-container"
-  }, rest), containerProps), {}, {
-    as: safeElement,
-    children: /*#__PURE__*/_jsx(StyledList, {
-      "data-testid": "list-container"
-    }, void 0, React.Children.map(children, (child, childIndex) => childIndex < children.length - 1 ? /*#__PURE__*/cloneElement(child, {
-      childIndex,
-      addRef,
-      onKeyDown
-    }) : /*#__PURE__*/cloneElement(child, {
-      childIndex,
-      addRef,
-      onKeyDown,
-      trailingSlash,
-      isTitle
-    })))
-  }));
-};
-
-DSBreadcrumb.Item = DSBreadcrumbItem;
-const props = {
-  /** props injected to breadcrumb wrapper */
-  containerProps: PropTypes.object.description('props injected to breadcrumb wrapper'),
-
-  /**
-   * Type of element you want the main container to be:
-   * 'nav', 'div', 'header', 'footer', 'main'
-   */
-  as: PropTypes.string.description("Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'"),
-
-  /**
-   * Whether to show the last element of the breadcrumb as a title
-   * Also removes trailing slash to show last element as title
-   */
-  isTitle: PropTypes.bool.description('Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title'),
-
-  /** breadcrumb label */
-  label: PropTypes.string.description('breadcrumb label'),
-
-  /**
-   * Container items to wrap
-   */
-  children: PropTypes.arrayOf(DSBreadcrumbItem).isRequired.description('Container items to wrap')
-};
-const DSBreadcrumbWithSchema = describe(DSBreadcrumb);
-DSBreadcrumbWithSchema.propTypes = props;
-
-export { DSBreadcrumb, DSBreadcrumbWithSchema, DSBreadcrumb as default, htmlElements };

package/esm/DSBreadcrumbItem.js

@@ -1,87 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import { StyledCrumbWrapper, StyledLink } from './styles.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["active", "as", "href", "isTitle", "onClick", "label", "color", "addRef", "childIndex", "trailingSlash", "onKeyDown"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function DSBreadcrumbItem(_ref) {
-  let {
-    active = false,
-    as = 'a',
-    href = undefined,
-    isTitle,
-    onClick = () => null,
-    label = '',
-    color = null,
-    addRef,
-    childIndex,
-    trailingSlash,
-    onKeyDown = () => null
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/jsx(StyledCrumbWrapper, _objectSpread(_objectSpread({
-    "aria-current": active ? 'page' : undefined,
-    "data-testid": "breadcrumb-item-container",
-    isTitle: isTitle,
-    trailingSlash: trailingSlash
-  }, rest), {}, {
-    children: /*#__PURE__*/jsx(StyledLink, {
-      as: as,
-      href: href,
-      onClick: onClick,
-      ref: addRef,
-      tabIndex: 0,
-      isActive: active,
-      onKeyDown: e => onKeyDown(e, childIndex, onClick),
-      isTitle: isTitle,
-      color: color,
-      children: label
-    })
-  }));
-}
-
-const props = {
-  /** inject props to wrapper */
-  containerComponent: PropTypes.string.description('inject props to wrapper'),
-
-  /** render as any html node */
-  as: PropTypes.string.description('render as any html node'),
-
-  /** active item */
-  active: PropTypes.bool.description('active item'),
-
-  /** href link */
-  href: PropTypes.string.description('href link'),
-
-  /** on click handler */
-  onClick: PropTypes.func.description('on click handler'),
-
-  /** style item as title */
-  isTitle: PropTypes.bool.description('style item as title'),
-
-  /** add trailing slash */
-  trailingSlash: PropTypes.bool.description('add trailing slash'),
-
-  /** item label */
-  label: PropTypes.string.description('item label'),
-
-  /** link color */
-  color: PropTypes.string.description('link color')
-};
-const DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);
-DSBreadcrumbItemWithSchema.propTypes = props;
-
-export { DSBreadcrumbItem, DSBreadcrumbItemWithSchema, DSBreadcrumbItem as default };

package/esm/index.d.js

@@ -1 +0,0 @@
-

package/esm/index.js

@@ -1,2 +0,0 @@
-export { DSBreadcrumb, DSBreadcrumbWithSchema, DSBreadcrumb as default, htmlElements } from './DSBreadcrumb.js';
-export { DSBreadcrumbItem, DSBreadcrumbItemWithSchema } from './DSBreadcrumbItem.js';

package/esm/styles.js

@@ -1,57 +0,0 @@
-import styled from 'styled-components';
-
-const handleColor = (theme, isActive, color, isTitle) => {
-  if (isActive) return theme.colors.neutral[800];else if (color) return color;else if (isTitle) return theme.colors.neutral[700];else return theme.colors.brand[600];
-};
-
-const StyledList = /*#__PURE__*/styled.ol.withConfig({
-  componentId: "sc-12gvmg4-0"
-})(["width:100%;list-style:none;display:flex;padding:0;margin:0;li:first-child *{margin-left:0;}"]);
-const StyledCrumbWrapper = /*#__PURE__*/styled.li.withConfig({
-  componentId: "sc-12gvmg4-1"
-})(["display:inline-flex;align-items:center;flex-shrink:20;transition:flex-shrink 0.1s cubic-bezier(0.64,0,0.35,1);height:16px;min-width:10px;&:hover{flex-shrink:0;}", ""], _ref => {
-  let {
-    theme,
-    isTitle,
-    trailingSlash
-  } = _ref;
-  return isTitle || !trailingSlash ? "&:not(:last-child):after {\n    display: inline-block;\n    content: '/';\n    color: ".concat(theme.colors.neutral[700], ";\n  }\n  ") : "&:after {\n    display: inline-block;\n    content: '/';\n    color: ".concat(theme.colors.neutral[700], ";\n  }\n  ");
-});
-const StyledContainer = /*#__PURE__*/styled.nav.withConfig({
-  componentId: "sc-12gvmg4-2"
-})(["display:flex;align-items:center;padding:0;"]);
-const StyledLink = /*#__PURE__*/styled.a.withConfig({
-  componentId: "sc-12gvmg4-3"
-})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;font-size:12px;outline:none;margin:0 2px;border:2px solid transparent;-webkit-text-stroke:0.4px transparent;font-weight:", ";color:", ";&:hover{color:", ";cursor:pointer;", ";}&:focus{", " border-radius:2px;}"], _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.fontWeights.regular;
-}, _ref3 => {
-  let {
-    theme,
-    isActive,
-    color,
-    isTitle
-  } = _ref3;
-  return handleColor(theme, isActive, color, isTitle);
-}, _ref4 => {
-  let {
-    theme,
-    color
-  } = _ref4;
-  return color ? color : theme.colors.brand[800];
-}, _ref5 => {
-  let {
-    theme,
-    color
-  } = _ref5;
-  return "-webkit-text-stroke: 0.4px ".concat(color ? color : theme.colors.brand[800]);
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return "border: 2px solid ".concat(theme.colors.brand[700], ";");
-});
-
-export { StyledContainer, StyledCrumbWrapper, StyledLink, StyledList };