@elliemae/ds-breadcrumb 2.0.0-next.9 → 2.0.0-rc.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,6 +6,13 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
6
  var _jsx = require('@babel/runtime/helpers/jsx');
7
7
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
8
  require('core-js/modules/web.dom-collections.iterator.js');
9
+ require('core-js/modules/esnext.async-iterator.map.js');
10
+ require('core-js/modules/esnext.iterator.map.js');
11
+ require('core-js/modules/esnext.async-iterator.filter.js');
12
+ require('core-js/modules/esnext.iterator.constructor.js');
13
+ require('core-js/modules/esnext.iterator.filter.js');
14
+ require('core-js/modules/esnext.async-iterator.for-each.js');
15
+ require('core-js/modules/esnext.iterator.for-each.js');
9
16
  var React = require('react');
10
17
  var reactDesc = require('react-desc');
11
18
  var DSBreadcrumbItem = require('./DSBreadcrumbItem.js');
@@ -2,6 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ require('core-js/modules/esnext.async-iterator.filter.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.filter.js');
8
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
+ require('core-js/modules/esnext.iterator.for-each.js');
5
10
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
11
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
12
  require('react');
package/cjs/styles.js CHANGED
@@ -14,35 +14,53 @@ const handleColor = (theme, isActive, color, isTitle) => {
14
14
 
15
15
  const StyledList = /*#__PURE__*/styled__default["default"].ol.withConfig({
16
16
  componentId: "sc-12gvmg4-0"
17
- })(["width:100%;list-style:none;display:flex;padding:0;li:first-child *{margin-left:0;}"]);
17
+ })(["width:100%;list-style:none;display:flex;padding:0;margin:0;li:first-child *{margin-left:0;}"]);
18
18
  const StyledCrumbWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
19
19
  componentId: "sc-12gvmg4-1"
20
- })(["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;}", ""], ({
21
- theme,
22
- isTitle,
23
- trailingSlash
24
- }) => 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 "));
20
+ })(["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 => {
21
+ let {
22
+ theme,
23
+ isTitle,
24
+ trailingSlash
25
+ } = _ref;
26
+ 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 ");
27
+ });
25
28
  const StyledContainer = /*#__PURE__*/styled__default["default"].nav.withConfig({
26
29
  componentId: "sc-12gvmg4-2"
27
30
  })(["display:flex;align-items:center;padding:0;"]);
28
31
  const StyledLink = /*#__PURE__*/styled__default["default"].a.withConfig({
29
32
  componentId: "sc-12gvmg4-3"
30
- })(["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;}"], ({
31
- theme
32
- }) => theme.fontWeights.regular, ({
33
- theme,
34
- isActive,
35
- color,
36
- isTitle
37
- }) => handleColor(theme, isActive, color, isTitle), ({
38
- theme,
39
- color
40
- }) => color ? color : theme.colors.brand[800], ({
41
- theme,
42
- color
43
- }) => "-webkit-text-stroke: 0.4px ".concat(color ? color : theme.colors.brand[800]), ({
44
- theme
45
- }) => "border: 2px solid ".concat(theme.colors.brand[700], ";"));
33
+ })(["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 => {
34
+ let {
35
+ theme
36
+ } = _ref2;
37
+ return theme.fontWeights.regular;
38
+ }, _ref3 => {
39
+ let {
40
+ theme,
41
+ isActive,
42
+ color,
43
+ isTitle
44
+ } = _ref3;
45
+ return handleColor(theme, isActive, color, isTitle);
46
+ }, _ref4 => {
47
+ let {
48
+ theme,
49
+ color
50
+ } = _ref4;
51
+ return color ? color : theme.colors.brand[800];
52
+ }, _ref5 => {
53
+ let {
54
+ theme,
55
+ color
56
+ } = _ref5;
57
+ return "-webkit-text-stroke: 0.4px ".concat(color ? color : theme.colors.brand[800]);
58
+ }, _ref6 => {
59
+ let {
60
+ theme
61
+ } = _ref6;
62
+ return "border: 2px solid ".concat(theme.colors.brand[700], ";");
63
+ });
46
64
 
47
65
  exports.StyledContainer = StyledContainer;
48
66
  exports.StyledCrumbWrapper = StyledCrumbWrapper;
@@ -2,6 +2,13 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
2
  import _jsx from '@babel/runtime/helpers/esm/jsx';
3
3
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
4
  import 'core-js/modules/web.dom-collections.iterator.js';
5
+ import 'core-js/modules/esnext.async-iterator.map.js';
6
+ import 'core-js/modules/esnext.iterator.map.js';
7
+ import 'core-js/modules/esnext.async-iterator.filter.js';
8
+ import 'core-js/modules/esnext.iterator.constructor.js';
9
+ import 'core-js/modules/esnext.iterator.filter.js';
10
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
11
+ import 'core-js/modules/esnext.iterator.for-each.js';
5
12
  import React, { useMemo, cloneElement } from 'react';
6
13
  import { PropTypes, describe } from 'react-desc';
7
14
  import { DSBreadcrumbItem } from './DSBreadcrumbItem.js';
@@ -1,3 +1,8 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
6
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
7
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
8
  import 'react';
package/esm/styles.js CHANGED
@@ -6,34 +6,52 @@ const handleColor = (theme, isActive, color, isTitle) => {
6
6
 
7
7
  const StyledList = /*#__PURE__*/styled.ol.withConfig({
8
8
  componentId: "sc-12gvmg4-0"
9
- })(["width:100%;list-style:none;display:flex;padding:0;li:first-child *{margin-left:0;}"]);
9
+ })(["width:100%;list-style:none;display:flex;padding:0;margin:0;li:first-child *{margin-left:0;}"]);
10
10
  const StyledCrumbWrapper = /*#__PURE__*/styled.li.withConfig({
11
11
  componentId: "sc-12gvmg4-1"
12
- })(["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;}", ""], ({
13
- theme,
14
- isTitle,
15
- trailingSlash
16
- }) => 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 "));
12
+ })(["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 => {
13
+ let {
14
+ theme,
15
+ isTitle,
16
+ trailingSlash
17
+ } = _ref;
18
+ 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 ");
19
+ });
17
20
  const StyledContainer = /*#__PURE__*/styled.nav.withConfig({
18
21
  componentId: "sc-12gvmg4-2"
19
22
  })(["display:flex;align-items:center;padding:0;"]);
20
23
  const StyledLink = /*#__PURE__*/styled.a.withConfig({
21
24
  componentId: "sc-12gvmg4-3"
22
- })(["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;}"], ({
23
- theme
24
- }) => theme.fontWeights.regular, ({
25
- theme,
26
- isActive,
27
- color,
28
- isTitle
29
- }) => handleColor(theme, isActive, color, isTitle), ({
30
- theme,
31
- color
32
- }) => color ? color : theme.colors.brand[800], ({
33
- theme,
34
- color
35
- }) => "-webkit-text-stroke: 0.4px ".concat(color ? color : theme.colors.brand[800]), ({
36
- theme
37
- }) => "border: 2px solid ".concat(theme.colors.brand[700], ";"));
25
+ })(["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 => {
26
+ let {
27
+ theme
28
+ } = _ref2;
29
+ return theme.fontWeights.regular;
30
+ }, _ref3 => {
31
+ let {
32
+ theme,
33
+ isActive,
34
+ color,
35
+ isTitle
36
+ } = _ref3;
37
+ return handleColor(theme, isActive, color, isTitle);
38
+ }, _ref4 => {
39
+ let {
40
+ theme,
41
+ color
42
+ } = _ref4;
43
+ return color ? color : theme.colors.brand[800];
44
+ }, _ref5 => {
45
+ let {
46
+ theme,
47
+ color
48
+ } = _ref5;
49
+ return "-webkit-text-stroke: 0.4px ".concat(color ? color : theme.colors.brand[800]);
50
+ }, _ref6 => {
51
+ let {
52
+ theme
53
+ } = _ref6;
54
+ return "border: 2px solid ".concat(theme.colors.brand[700], ";");
55
+ });
38
56
 
39
57
  export { StyledContainer, StyledCrumbWrapper, StyledLink, StyledList };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-breadcrumb",
3
- "version": "2.0.0-next.9",
3
+ "version": "2.0.0-rc.12",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Breadcrumb",
6
6
  "module": "./esm/index.js",
@@ -48,12 +48,21 @@
48
48
  "build": "node ../../scripts/build/build.js"
49
49
  },
50
50
  "dependencies": {
51
- "@elliemae/ds-classnames": "2.0.0-next.9",
52
- "react-desc": "^4.1.3"
51
+ "@elliemae/ds-system": "2.0.0-rc.12",
52
+ "react-desc": "~4.1.3"
53
+ },
54
+ "devDependencies": {
55
+ "@elliemae/pui-theme": "~2.2.5",
56
+ "@testing-library/jest-dom": "~5.15.0",
57
+ "@testing-library/react": "~12.1.2",
58
+ "@testing-library/user-event": "~13.5.0",
59
+ "styled-components": "~5.3.3"
53
60
  },
54
61
  "peerDependencies": {
62
+ "@elliemae/pui-theme": "^2.2.5",
55
63
  "react": "^17.0.2",
56
- "react-dom": "^17.0.2"
64
+ "react-dom": "^17.0.2",
65
+ "styled-components": "^5.3.3"
57
66
  },
58
67
  "publishConfig": {
59
68
  "access": "public",
@@ -1,3 +1,4 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  import React from 'react';
2
3
  import DSBreadcrumbItem from './DSBreadcrumbItem';
3
4
  import type { DSBreadcrumbPropsT } from './index.d';
@@ -7,25 +8,49 @@ declare const DSBreadcrumb: {
7
8
  Item: typeof DSBreadcrumbItem;
8
9
  propTypes: {
9
10
  /** props injected to breadcrumb wrapper */
10
- containerProps: any;
11
+ containerProps: {
12
+ defaultValue<T = unknown>(arg: T): {
13
+ deprecated: import("react-desc").PropTypesDescValidator;
14
+ };
15
+ isRequired: import("react-desc").PropTypesDescValidator;
16
+ };
11
17
  /**
12
18
  * Type of element you want the main container to be:
13
19
  * 'nav', 'div', 'header', 'footer', 'main'
14
20
  */
15
- as: any;
21
+ as: {
22
+ defaultValue<T = unknown>(arg: T): {
23
+ deprecated: import("react-desc").PropTypesDescValidator;
24
+ };
25
+ isRequired: import("react-desc").PropTypesDescValidator;
26
+ };
16
27
  /**
17
28
  * Whether to show the last element of the breadcrumb as a title
18
29
  * Also removes trailing slash to show last element as title
19
30
  */
20
- isTitle: any;
31
+ isTitle: {
32
+ defaultValue<T = unknown>(arg: T): {
33
+ deprecated: import("react-desc").PropTypesDescValidator;
34
+ };
35
+ isRequired: import("react-desc").PropTypesDescValidator;
36
+ };
21
37
  /** breadcrumb label */
22
- label: any;
38
+ label: {
39
+ defaultValue<T = unknown>(arg: T): {
40
+ deprecated: import("react-desc").PropTypesDescValidator;
41
+ };
42
+ isRequired: import("react-desc").PropTypesDescValidator;
43
+ };
23
44
  /**
24
45
  * Container items to wrap
25
46
  */
26
47
  children: any;
27
48
  };
28
49
  };
29
- declare const DSBreadcrumbWithSchema: any;
50
+ declare const DSBreadcrumbWithSchema: {
51
+ (props?: DSBreadcrumbPropsT | undefined): JSX.Element;
52
+ propTypes: unknown;
53
+ toTypescript: () => import("react-desc").TypescriptSchema;
54
+ };
30
55
  export { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };
31
56
  export default DSBreadcrumb;
@@ -1,28 +1,78 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  import React from 'react';
2
3
  import type { DSBreadcrumbItemPropsT } from './index.d';
3
4
  declare function DSBreadcrumbItem({ active, as, href, isTitle, onClick, label, color, addRef, childIndex, trailingSlash, onKeyDown, ...rest }: DSBreadcrumbItemPropsT): React.ReactElement;
4
5
  declare namespace DSBreadcrumbItem {
5
6
  var propTypes: {
6
7
  /** inject props to wrapper */
7
- containerComponent: any;
8
+ containerComponent: {
9
+ defaultValue<T = unknown>(arg: T): {
10
+ deprecated: import("react-desc").PropTypesDescValidator;
11
+ };
12
+ isRequired: import("react-desc").PropTypesDescValidator;
13
+ };
8
14
  /** render as any html node */
9
- as: any;
15
+ as: {
16
+ defaultValue<T = unknown>(arg: T): {
17
+ deprecated: import("react-desc").PropTypesDescValidator;
18
+ };
19
+ isRequired: import("react-desc").PropTypesDescValidator;
20
+ };
10
21
  /** active item */
11
- active: any;
22
+ active: {
23
+ defaultValue<T = unknown>(arg: T): {
24
+ deprecated: import("react-desc").PropTypesDescValidator;
25
+ };
26
+ isRequired: import("react-desc").PropTypesDescValidator;
27
+ };
12
28
  /** href link */
13
- href: any;
29
+ href: {
30
+ defaultValue<T = unknown>(arg: T): {
31
+ deprecated: import("react-desc").PropTypesDescValidator;
32
+ };
33
+ isRequired: import("react-desc").PropTypesDescValidator;
34
+ };
14
35
  /** on click handler */
15
- onClick: any;
36
+ onClick: {
37
+ defaultValue<T = unknown>(arg: T): {
38
+ deprecated: import("react-desc").PropTypesDescValidator;
39
+ };
40
+ isRequired: import("react-desc").PropTypesDescValidator;
41
+ };
16
42
  /** style item as title */
17
- isTitle: any;
43
+ isTitle: {
44
+ defaultValue<T = unknown>(arg: T): {
45
+ deprecated: import("react-desc").PropTypesDescValidator;
46
+ };
47
+ isRequired: import("react-desc").PropTypesDescValidator;
48
+ };
18
49
  /** add trailing slash */
19
- trailingSlash: any;
50
+ trailingSlash: {
51
+ defaultValue<T = unknown>(arg: T): {
52
+ deprecated: import("react-desc").PropTypesDescValidator;
53
+ };
54
+ isRequired: import("react-desc").PropTypesDescValidator;
55
+ };
20
56
  /** item label */
21
- label: any;
57
+ label: {
58
+ defaultValue<T = unknown>(arg: T): {
59
+ deprecated: import("react-desc").PropTypesDescValidator;
60
+ };
61
+ isRequired: import("react-desc").PropTypesDescValidator;
62
+ };
22
63
  /** link color */
23
- color: any;
64
+ color: {
65
+ defaultValue<T = unknown>(arg: T): {
66
+ deprecated: import("react-desc").PropTypesDescValidator;
67
+ };
68
+ isRequired: import("react-desc").PropTypesDescValidator;
69
+ };
24
70
  };
25
71
  }
26
- declare const DSBreadcrumbItemWithSchema: any;
72
+ declare const DSBreadcrumbItemWithSchema: {
73
+ (props?: DSBreadcrumbItemPropsT | undefined): JSX.Element;
74
+ propTypes: unknown;
75
+ toTypescript: () => import("react-desc").TypescriptSchema;
76
+ };
27
77
  export { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };
28
78
  export default DSBreadcrumbItem;
package/types/styles.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { DSBreadcrumbItemPropsT } from './index.d';
2
- declare const StyledList: import("styled-components").StyledComponent<"ol", any, {}, never>;
3
- declare const StyledCrumbWrapper: import("styled-components").StyledComponent<"li", any, Partial<DSBreadcrumbItemPropsT>, never>;
4
- declare const StyledContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;
5
- declare const StyledLink: import("styled-components").StyledComponent<"a", any, Partial<DSBreadcrumbItemPropsT>, never>;
2
+ declare const StyledList: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
3
+ declare const StyledCrumbWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, Partial<DSBreadcrumbItemPropsT>, never>;
4
+ declare const StyledContainer: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
5
+ declare const StyledLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Partial<DSBreadcrumbItemPropsT>, never>;
6
6
  export { StyledList, StyledCrumbWrapper, StyledContainer, StyledLink };