@loadsmart/loadsmart-ui 5.3.2 → 5.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [
@@ -103,7 +103,6 @@
     "@testing-library/react-hooks": "5.1.2",
     "@testing-library/user-event": "13.1.9",
     "@types/chance": "1.1.1",
-    "@types/enzyme": "3.10.8",
     "@types/jest": "26.0.23",
     "@types/lodash.debounce": "4.0.6",
     "@types/lodash.flatten": "4.4.6",
@@ -117,7 +116,6 @@
     "@types/styled-components": "5.1.9",
     "@typescript-eslint/eslint-plugin": "4.22.1",
     "@typescript-eslint/parser": "4.22.1",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.1",
     "@zerollup/ts-transform-paths": "1.7.18",
     "autoprefixer": "9",
     "babel-jest": "26.6.3",
@@ -130,7 +128,6 @@
     "commitizen": "4.2.4",
     "cross-env": "7.0.3",
     "cz-conventional-changelog": "3.3.0",
-    "enzyme": "3.11.0",
     "eslint": "7.26.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-jest-dom": "3.8.1",

package/src/components/Breadcrumbs/Breadbrumbs.test.tsx

@@ -14,7 +14,7 @@ describe('<Breadcrumbs />', () => {
 
     setup({ entries })
 
-    expect(screen.getByTestId('breadcrumbs')).not.toBeEmptyDOMElement()
+    expect(screen.getByRole('list')).not.toBeEmptyDOMElement()
 
     for (let i = 0; i < entries.length; i++) {
       screen.getByText(entries[i].label)
@@ -26,7 +26,7 @@ describe('<Breadcrumbs />', () => {
 
     setup({ entries })
 
-    expect(screen.getByTestId('breadcrumbs')).toBeEmptyDOMElement()
+    expect(screen.getByRole('list')).toBeEmptyDOMElement()
   })
 
   it('renders active breadcrumb correctly', () => {
@@ -36,13 +36,15 @@ describe('<Breadcrumbs />', () => {
       ({ index }) => ({
         label: generator.word(),
         active: index === activeIndex,
+        url: '/',
       }),
       9
     )
 
     setup({ entries })
 
-    expect(screen.getAllByTestId('breadcrumb')[activeIndex]).toHaveClass('is-active')
+    expect(screen.getAllByRole('listitem')[activeIndex]).toHaveClass('is-active')
+    expect(screen.getAllByRole('link')[activeIndex]).toHaveAttribute('aria-current', 'page')
   })
 
   it('render non-url and non-onClick breadcrumb correctly', () => {
@@ -114,6 +116,10 @@ describe('<Breadcrumbs />', () => {
 
     setup({ entries, onBack: jest.fn() })
 
-    expect(screen.getByTestId('breadcrumbs-back')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', {
+        name: 'Back to previous page',
+      })
+    ).toBeInTheDocument()
   })
 })

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -47,22 +47,30 @@ const StyledLi = styled.li<BreadcrumbProps>`
     position: absolute;
     left: calc(100% + 14px);
 
-    font-weight: normal;
+    font-weight: ${token('font-weight-bold')};
     font-size: ${token('breadcrumbs-font-size')};
 
+    line-height: ${token('breadcrumbs-font-height')};
+
     content: '/';
   }
 `
 
 function getWrappedLabel(props: Partial<BreadcrumbProps>) {
-  const { url, label, onClick, ...rest } = props
+  const { url, label, onClick, active, ...rest } = props
 
   if (isNil(url) && !onClick) {
     return label
   }
 
   return (
-    <StyledLink href={url} target="_self" onClick={onClick} {...rest}>
+    <StyledLink
+      href={url}
+      target="_self"
+      onClick={onClick}
+      {...(active && {'aria-current': 'page'})}
+      {...rest}
+    >
       {label}
     </StyledLink>
   )
@@ -76,7 +84,7 @@ function Breadcrumb({ active, label, url, ...rest }: BreadcrumbProps): JSX.Eleme
       data-testid="breadcrumb"
       active={active}
     >
-      {getWrappedLabel({ label, url, ...rest })}
+      {getWrappedLabel({ label, url, active, ...rest })}
     </StyledLi>
   )
 }

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -12,12 +12,12 @@ export interface BreadcrumbsProps {
   onBack?: (e: MouseEvent<HTMLButtonElement>) => void
 }
 
-const StyledWrapper = styled.div`
+const StyledWrapper = styled.nav`
   display: flex;
   flex-direction: row;
 `
 
-const StyledUl = styled.ul`
+const StyledOl = styled.ol`
   display: flex;
   flex-direction: row;
   margin: 0;
@@ -31,18 +31,23 @@ const StyledBackButton = styled(BackButton)`
   margin: 0 ${token('space-m')} 0 0;
 `
 
-function Breadcrumbs({ entries, onBack, disabled, ...others }: BreadcrumbsProps): JSX.Element {
+function Breadcrumbs({ entries = [], onBack, disabled, ...others }: BreadcrumbsProps): JSX.Element {
   return (
-    <StyledWrapper {...others}>
+    <StyledWrapper aria-label="Breadcrumb" {...others}>
       {onBack && (
-        <StyledBackButton data-testid="breadcrumbs-back" onClick={onBack} disabled={disabled} />
+        <StyledBackButton
+          data-testid="breadcrumbs-back"
+          onClick={onBack}
+          disabled={disabled}
+          aria-label="Back to previous page"
+        />
       )}
 
-      <StyledUl data-testid="breadcrumbs">
-        {(entries || []).map((entry: BreadcrumbProps) => {
+      <StyledOl data-testid="breadcrumbs">
+        {entries.map((entry: BreadcrumbProps) => {
           return <Breadcrumb key={entry.label} {...entry} />
         })}
-      </StyledUl>
+      </StyledOl>
     </StyledWrapper>
   )
 }