@elliemae/ds-breadcrumb 2.2.0-alpha.1 → 2.2.0-alpha.5

package/esm/styles.js

@@ -1,57 +1,78 @@
-import styled from 'styled-components';
-
+import * as React from "react";
+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];
+  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 };
+const StyledList = styled.ol`
+  width: 100%;
+  list-style: none;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  li:first-child * {
+    margin-left: 0;
+  }
+`;
+const StyledCrumbWrapper = styled.li`
+  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;
+  }
+  ${({ theme, isTitle, trailingSlash }) => isTitle || !trailingSlash ? `&:not(:last-child):after {
+    display: inline-block;
+    content: '/';
+    color: ${theme.colors.neutral[700]};
+  }
+  ` : `&:after {
+    display: inline-block;
+    content: '/';
+    color: ${theme.colors.neutral[700]};
+  }
+  `}
+`;
+const StyledContainer = styled.nav`
+  display: flex;
+  align-items: center;
+  padding: 0;
+`;
+const StyledLink = styled.a`
+  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: ${({ theme }) => theme.fontWeights.regular};
+  color: ${({ theme, isActive, color, isTitle }) => handleColor(theme, isActive, color, isTitle)};
+  &:hover {
+    color: ${({ theme, color }) => color ? color : theme.colors.brand[800]};
+    cursor: pointer;
+    ${({ theme, color }) => `-webkit-text-stroke: 0.4px ${color ? color : theme.colors.brand[800]}`};
+  }
+  &:focus {
+    ${({ theme }) => `border: 2px solid ${theme.colors.brand[700]};`}
+    border-radius: 2px;
+  }
+`;
+export {
+  StyledContainer,
+  StyledCrumbWrapper,
+  StyledLink,
+  StyledList
+};
+//# sourceMappingURL=styles.js.map

package/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { Theme } from '@elliemae/pui-theme';\nimport styled from 'styled-components';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\n\nconst handleColor = (theme: Theme, isActive: boolean, color: string, isTitle: boolean): string => {\n  if (isActive) return theme.colors.neutral[800];\n  else if (color) return color;\n  else if (isTitle) return theme.colors.neutral[700];\n  else return theme.colors.brand[600];\n};\n\nconst StyledList = styled.ol`\n  width: 100%;\n  list-style: none;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  li:first-child * {\n    margin-left: 0;\n  }\n`;\n\nconst StyledCrumbWrapper = styled.li<Partial<DSBreadcrumbItemPropsT>>`\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 20;\n  transition: flex-shrink 0.1s cubic-bezier(0.64, 0, 0.35, 1);\n  height: 16px;\n  min-width: 10px;\n  &:hover {\n    flex-shrink: 0;\n  }\n  ${({ theme, isTitle, trailingSlash }) =>\n    isTitle || !trailingSlash\n      ? `&:not(:last-child):after {\n    display: inline-block;\n    content: '/';\n    color: ${theme.colors.neutral[700]};\n  }\n  `\n      : `&:after {\n    display: inline-block;\n    content: '/';\n    color: ${theme.colors.neutral[700]};\n  }\n  `}\n`;\n\nconst StyledContainer = styled.nav`\n  display: flex;\n  align-items: center;\n  padding: 0;\n`;\n\nconst StyledLink = styled.a<Partial<DSBreadcrumbItemPropsT>>`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-decoration: none;\n  font-size: 12px;\n  outline: none;\n  margin: 0 2px;\n  border: 2px solid transparent;\n  -webkit-text-stroke: 0.4px transparent;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme, isActive, color, isTitle }) => handleColor(theme, isActive, color, isTitle)};\n  &:hover {\n    color: ${({ theme, color }) => (color ? color : theme.colors.brand[800])};\n    cursor: pointer;\n    ${({ theme, color }) => `-webkit-text-stroke: 0.4px ${color ? color : theme.colors.brand[800]}`};\n  }\n  &:focus {\n    ${({ theme }) => `border: 2px solid ${theme.colors.brand[700]};`}\n    border-radius: 2px;\n  }\n`;\n\nexport { StyledList, StyledCrumbWrapper, StyledContainer, StyledLink };\n"],
+  "mappings": "AAAA;ACCA;AAGA,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ;AAAA,WACjC;AAAO,WAAO;AAAA,WACd;AAAS,WAAO,MAAM,OAAO,QAAQ;AAAA;AACzC,WAAO,MAAM,OAAO,MAAM;AAAA;AAGjC,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU9B,CAAC,EAAE,OAAO,SAAS,oBACnB,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ;AAAA;AAAA,MAG1B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKlC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM/B,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUT,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,UAAU,OAAO,cAAc,YAAY,OAAO,UAAU,OAAO;AAAA;AAAA,aAE3E,CAAC,EAAE,OAAO,YAAa,QAAQ,QAAQ,MAAM,OAAO,MAAM;AAAA;AAAA,MAEjE,CAAC,EAAE,OAAO,YAAY,8BAA8B,QAAQ,QAAQ,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,MAGvF,CAAC,EAAE,YAAY,qBAAqB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-breadcrumb",
-  "version": "2.2.0-alpha.1",
+  "version": "2.2.0-alpha.5",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Breadcrumb",
   "module": "./esm/index.js",
@@ -48,18 +48,18 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-system": "2.2.0-alpha.1",
+    "@elliemae/ds-system": "2.2.0-alpha.5",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "@elliemae/pui-theme": "~2.2.5",
-    "@testing-library/jest-dom": "~5.15.0",
+    "@elliemae/pui-theme": "~2.3.0",
+    "@testing-library/jest-dom": "~5.16.1",
     "@testing-library/react": "~12.1.2",
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "^2.2.5",
+    "@elliemae/pui-theme": "^2.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.3"