@verdaccio/ui-theme 6.0.0-6-next.9 → 6.0.0-6-next.13

package/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap

@@ -2,121 +2,266 @@
 
 exports[`<ActionBar /> component should render the component in default state 1`] = `
 .emotion-0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 14px;
+}
+
+.emotion-1 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.emotion-3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+  min-height: 36px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 50%;
+  padding: 0;
+  min-width: 0;
+  width: 40px;
+  height: 40px;
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #e0e0e0;
   background-color: #4b5e40;
   color: #fff;
   margin-right: 10px;
 }
 
-.emotion-0:hover {
+.emotion-3::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-3.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-3 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+
+.emotion-3:active {
+  box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
+}
+
+.emotion-3:hover {
+  background-color: #f5f5f5;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+@media (hover: none) {
+  .emotion-3:hover {
+    background-color: #e0e0e0;
+  }
+}
+
+.emotion-3.Mui-focusVisible {
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
+}
+
+.emotion-3.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+  box-shadow: none;
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.emotion-3:hover {
   color: #4b5e40;
   background: #fff;
 }
 
+.emotion-4 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.5rem;
+}
+
+.emotion-5 {
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+}
+
 <div
-  class="MuiBox-root MuiBox-root-1"
+  class="MuiBox-root emotion-0"
 >
   <a
+    aria-label="Visit homepage"
     class=""
+    data-mui-internal-clone-element="true"
     href="https://verdaccio.org"
     rel="noopener noreferrer"
     target="_blank"
-    title="Visit homepage"
   >
     <span
-      class="MuiTypography-root MuiTypography-subtitle1"
+      class="MuiTypography-root MuiTypography-subtitle1 emotion-1"
     >
       <button
-        class="MuiButtonBase-root MuiFab-root emotion-0 emotion-1 MuiFab-sizeSmall"
+        class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall emotion-2 emotion-3"
         data-testid="fab"
         tabindex="0"
         type="button"
       >
-        <span
-          class="MuiFab-label"
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-4"
+          data-testid="HomeIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+          />
+        </svg>
         <span
-          class="MuiTouchRipple-root"
+          class="MuiTouchRipple-root emotion-5"
         />
       </button>
     </span>
   </a>
   <a
+    aria-label="Open an issue"
     class=""
+    data-mui-internal-clone-element="true"
     href="https://github.com/verdaccio/monorepo/issues"
     rel="noopener noreferrer"
     target="_blank"
-    title="Open an issue"
   >
     <span
-      class="MuiTypography-root MuiTypography-subtitle1"
+      class="MuiTypography-root MuiTypography-subtitle1 emotion-1"
     >
       <button
-        class="MuiButtonBase-root MuiFab-root emotion-0 emotion-1 MuiFab-sizeSmall"
+        class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall emotion-2 emotion-3"
         data-testid="fab"
         tabindex="0"
         type="button"
       >
-        <span
-          class="MuiFab-label"
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-4"
+          data-testid="BugReportIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"
+          />
+        </svg>
         <span
-          class="MuiTouchRipple-root"
+          class="MuiTouchRipple-root emotion-5"
         />
       </button>
     </span>
   </a>
   <button
-    class="MuiButtonBase-root MuiFab-root  emotion-0 emotion-1 MuiFab-sizeSmall"
+    aria-label="Download tarball"
+    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall  emotion-2 emotion-3"
+    data-mui-internal-clone-element="true"
     data-testid="fab"
     tabindex="0"
-    title="Download tarball"
     type="button"
   >
-    <span
-      class="MuiFab-label"
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-4"
+      data-testid="CloudDownloadIcon"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-        />
-      </svg>
-    </span>
+      <path
+        d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
+      />
+    </svg>
     <span
-      class="MuiTouchRipple-root"
+      class="MuiTouchRipple-root emotion-5"
     />
   </button>
 </div>
 `;
 
 exports[`<ActionBar /> component when there is no action bar data 1`] = `
+.emotion-0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 14px;
+}
+
 <div
-  class="MuiBox-root MuiBox-root-2"
+  class="MuiBox-root emotion-0"
 />
 `;

package/src/components/AppBar.tsx

@@ -1,4 +1,4 @@
-import { default as MaterialUIAppBar, AppBarProps } from '@material-ui/core/AppBar';
+import { AppBarProps, default as MaterialUIAppBar } from '@mui/material/AppBar';
 import React, { forwardRef } from 'react';
 
 type AppBarRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];

package/src/components/Author/Author.test.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-
-import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+import { cleanup, render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { DetailContext } from '../../pages/Version';
-
 import Authors from './Author';
 
 const withAuthorComponent = (
@@ -51,7 +49,6 @@ describe('<Author /> component', () => {
     };
 
     const wrapper = render(withAuthorComponent(packageMeta));
-    wrapper.debug();
     expect(wrapper.queryAllByText('verdaccio')).toHaveLength(0);
   });
 

package/src/components/Author/Author.tsx

@@ -1,14 +1,12 @@
-import Avatar from '@material-ui/core/Avatar';
+import Avatar from '@mui/material/Avatar';
 import React, { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import { getAuthorName } from 'verdaccio-ui/utils/package';
 import { isEmail } from 'verdaccio-ui/utils/url';
 
 import { DetailContext } from '../../pages/Version';
 import List from '../List';
-
-import { StyledText, AuthorListItem, AuthorListItemText } from './styles';
+import { AuthorListItem, AuthorListItemText, StyledText } from './styles';
 
 const Author: FC = () => {
   const { packageMeta } = useContext(DetailContext);