@department-of-veterans-affairs/caseflow-frontend-toolkit - npm Package Compare versions

Comparing version 2.5.0 to 2.5.1

__snapshots__/Breadcrumbs.md

@@ -8,2 +8,3 @@ # `Breadcrumbs`
   getBreadcrumbLabel={[Function]}
+  renderAllCrumbs={false}
   shouldDrawCaretBeforeFirstCrumb={true}
@@ -114,2 +115,3 @@ styling={
   getBreadcrumbLabel={[Function]}
+  renderAllCrumbs={false}
   shouldDrawCaretBeforeFirstCrumb={false}
@@ -217,1 +219,137 @@ styling={
 ```
+
+#### `renders an array of crumbs regardless of route`
+
+```
+<Breadcrumbs
+  elements={
+    Array [
+      Object {
+        "breadcrumb": "Your Queue",
+        "path": "/",
+      },
+      Object {
+        "breadcrumb": "Vet. E Ran",
+        "path": "/tasks/:vacolsId",
+      },
+      Object {
+        "breadcrumb": "Select Dispositions",
+        "path": "/tasks/:vacolsId/dispositions",
+      },
+      Object {
+        "breadcrumb": "Submit Draft Decision",
+        "path": "/tasks/:vacolsId/submit",
+      },
+    ]
+  }
+  getBreadcrumbLabel={[Function]}
+  renderAllCrumbs={true}
+  shouldDrawCaretBeforeFirstCrumb={false}
+  styling={
+    Object {
+      "data-css-c6mfa5": "",
+    }
+  }
+>
+  <div
+    data-css-c6mfa5=""
+  >
+    <Link
+      classNames={
+        Array [
+          "cf-btn-link",
+        ]
+      }
+      id="cf-logo-link"
+      to="/"
+    >
+      <Link
+        replace={false}
+        to="/"
+        type={null}
+      >
+        <a
+          href="/"
+          onClick={[Function]}
+          type={null}
+        >
+          Your Queue
+        </a>
+      </Link>
+    </Link>
+      &gt;  
+    <Link
+      classNames={
+        Array [
+          "cf-btn-link",
+        ]
+      }
+      id="cf-logo-link"
+      to="/tasks/:vacolsId"
+    >
+      <Link
+        replace={false}
+        to="/tasks/:vacolsId"
+        type={null}
+      >
+        <a
+          href="/tasks/:vacolsId"
+          onClick={[Function]}
+          type={null}
+        >
+          Vet. E Ran
+        </a>
+      </Link>
+    </Link>
+      &gt;  
+    <Link
+      classNames={
+        Array [
+          "cf-btn-link",
+        ]
+      }
+      id="cf-logo-link"
+      to="/tasks/:vacolsId/dispositions"
+    >
+      <Link
+        replace={false}
+        to="/tasks/:vacolsId/dispositions"
+        type={null}
+      >
+        <a
+          href="/tasks/:vacolsId/dispositions"
+          onClick={[Function]}
+          type={null}
+        >
+          Select Dispositions
+        </a>
+      </Link>
+    </Link>
+      &gt;  
+    <Link
+      classNames={
+        Array [
+          "cf-btn-link",
+        ]
+      }
+      id="cf-logo-link"
+      to="/tasks/:vacolsId/submit"
+    >
+      <Link
+        replace={false}
+        to="/tasks/:vacolsId/submit"
+        type={null}
+      >
+        <a
+          href="/tasks/:vacolsId/submit"
+          onClick={[Function]}
+          type={null}
+        >
+          Submit Draft Decision
+        </a>
+      </Link>
+    </Link>
+  </div>
+</Breadcrumbs>
+```
+

components/Breadcrumbs.jsx

@@ -28,3 +28,3 @@ import React from 'react';
 export default class Breadcrumbs extends React.Component {
-  renderBreadcrumb = (props, route, idx) => {
+  renderBreadcrumbContent = (props, route, idx) => {
     const { shouldDrawCaretBeforeFirstCrumb } = this.props;
@@ -41,2 +41,15 @@ const caret = <React.Fragment>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</React.Fragment>;
 
+  getCrumb = (route, idx) => {
+    if (this.props.renderAllCrumbs) {
+      return <React.Fragment>
+        {this.renderBreadcrumbContent({ match: { url: route.path } }, route, idx)}
+      </React.Fragment>;
+    }
+
+    return <Route
+      key={route.breadcrumb}
+      path={route.path}
+      render={(props) => this.renderBreadcrumbContent(props, route, idx)} />;
+  };
+
   render() {
@@ -48,11 +61,4 @@ const {
     const children = elements || getElementsWithBreadcrumbs(this);
+    const breadcrumbComponents = _.sortBy(children, 'length').map(this.getCrumb);
 
-    const breadcrumbComponents = _.sortBy(children, 'length').
-      map((route, idx) =>
-        <Route
-          key={route.breadcrumb}
-          path={route.path}
-          render={(props) => this.renderBreadcrumb(props, route, idx)} />
-      );
-
     return <div {...styling}>{breadcrumbComponents}</div>;
@@ -70,3 +76,4 @@ }
   styling: PropTypes.object,
-  shouldDrawCaretBeforeFirstCrumb: PropTypes.bool
+  shouldDrawCaretBeforeFirstCrumb: PropTypes.bool,
+  renderAllCrumbs: PropTypes.bool
 };
@@ -77,3 +84,4 @@
   shouldDrawCaretBeforeFirstCrumb: true,
-  styling: STYLES.APPLICATION_TITLE
+  styling: STYLES.APPLICATION_TITLE,
+  renderAllCrumbs: false
 };

package.json

 {
   "name": "@department-of-veterans-affairs/caseflow-frontend-toolkit",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Build tools and React components for the Caseflow frontends",
@@ -5,0 +5,0 @@ "main": "index.js",

test/karma/components/Breadcrumbs-test.jsx

@@ -35,3 +35,3 @@ import React from 'react';
           <Breadcrumbs
-            getBreadcrumbLabel={((route) => route.breadcrumb)}
+            getBreadcrumbLabel={(route) => route.breadcrumb}
             shouldDrawCaretBeforeFirstCrumb={false}
@@ -57,2 +57,33 @@ styling={css({
   );
+
+  it('renders an array of crumbs regardless of route', () =>
+    expect(
+      toJson(mount(
+        <MemoryRouter initialEntries={['/vacolsId/documents/docId']}>
+          <Breadcrumbs
+            getBreadcrumbLabel={(route) => route.breadcrumb}
+            shouldDrawCaretBeforeFirstCrumb={false}
+            renderAllCrumbs
+            styling={css({
+              marginTop: '-1.5rem',
+              marginBottom: '-1.5rem'
+            })}
+            elements={[{
+              breadcrumb: 'Your Queue',
+              path: '/'
+            }, {
+              breadcrumb: 'Vet. E Ran',
+              path: '/tasks/:vacolsId'
+            }, {
+              breadcrumb: 'Select Dispositions',
+              path: '/tasks/:vacolsId/dispositions'
+            }, {
+              breadcrumb: 'Submit Draft Decision',
+              path: '/tasks/:vacolsId/submit'
+            }]}
+          />
+        </MemoryRouter>
+      ).find(Breadcrumbs))
+    ).to.matchSnapshot()
+  );
 });

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

291910

increased by4.43%

Number of package files

46

increased by12.2%

Lines of code

1183

increased by3.23%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes