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

package/src/pages/Version/DetailSidebar/DetailSidebar.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import React, { useContext } from 'react';
-
 import ActionBar from 'verdaccio-ui/components/ActionBar';
 import Author from 'verdaccio-ui/components/Author';
 import Paper from 'verdaccio-ui/components/Paper';
@@ -8,7 +7,6 @@ import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 import { DetailContext } from '..';
 import loadable from '../../../App/utils/loadable';
-
 import DetailSidebarFundButton from './DetailSidebarFundButton';
 import DetailSidebarTitle from './DetailSidebarTitle';
 import Developers from './Developers';

package/src/pages/Version/DetailSidebar/DetailSidebarFundButton.test.tsx

@@ -1,11 +1,9 @@
 import _ from 'lodash';
 import React from 'react';
-
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { DetailContext } from '../context';
 import { DetailContextProps } from '../version-config';
-
 import DetailSidebarFundButton from './DetailSidebarFundButton';
 
 const ComponentToBeRendered: React.FC<{ contextValue: DetailContextProps }> = ({

package/src/pages/Version/DetailSidebar/DetailSidebarFundButton.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import Favorite from '@material-ui/icons/Favorite';
+import Favorite from '@mui/icons-material/Favorite';
 import React, { useContext } from 'react';
 import { Trans } from 'react-i18next';
-
 import Button from 'verdaccio-ui/components/Button';
 import Link from 'verdaccio-ui/components/Link';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';

package/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Box from 'verdaccio-ui/components/Box';
 import Heading from 'verdaccio-ui/components/Heading';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';

package/src/pages/Version/DetailSidebar/Developers/Developers.test.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-
-import { render, cleanup, fireEvent } from 'verdaccio-ui/utils/test-react-testing-library';
+import { cleanup, fireEvent, render } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { DetailContextProvider } from '../../context';
-
 import Developers from './Developers';
 import { DeveloperType } from './DevelopersTitle';
 
@@ -111,7 +109,7 @@ describe('test Developers', () => {
     expect(wrapper.getByText('Contributors')).toBeInTheDocument();
     fireEvent.click(wrapper.getByTestId('fab'));
 
-    expect(wrapper.getByTitle(packageMeta.latest.contributors[0].name)).toBeInTheDocument();
-    expect(wrapper.getByTitle(packageMeta.latest.contributors[1].name)).toBeInTheDocument();
+    expect(wrapper.getByLabelText(packageMeta.latest.contributors[0].name)).toBeInTheDocument();
+    expect(wrapper.getByLabelText(packageMeta.latest.contributors[1].name)).toBeInTheDocument();
   });
 });

package/src/pages/Version/DetailSidebar/Developers/Developers.tsx

@@ -1,16 +1,14 @@
 import styled from '@emotion/styled';
-import Avatar from '@material-ui/core/Avatar';
-import Add from '@material-ui/icons/Add';
-import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
+import Add from '@mui/icons-material/Add';
+import Avatar from '@mui/material/Avatar';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Box from 'verdaccio-ui/components/Box';
 import FloatingActionButton from 'verdaccio-ui/components/FloatingActionButton';
 import Tooltip from 'verdaccio-ui/components/Tooltip';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 import { DetailContext } from '../..';
-
 import DevelopersTitle from './DevelopersTitle';
 import getUniqueDeveloperValues from './get-unique-developer-values';
 

package/src/pages/Version/DetailSidebar/Developers/DevelopersTitle.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 

package/src/pages/Version/DetailSidebar/Developers/__snapshots__/Developers.test.tsx.snap

@@ -3,32 +3,102 @@
 exports[`test Developers should render the component for contributors with items 1`] = `
 Object {
   "asFragment": [Function],
-  "baseElement": .emotion-0 {
+  "baseElement": .emotion-1 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75;
   font-weight: 700;
   margin-bottom: 10px;
 }
 
-.emotion-2>* {
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: 10px 0 10px 0;
+}
+
+.emotion-3>* {
   margin: 5px;
 }
 
+.emotion-4 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: 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;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-size: 1.25rem;
+  line-height: 1;
+  border-radius: 50%;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  color: #fff;
+  background-color: #bdbdbd;
+}
+
+.emotion-5 {
+  -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;
+  width: 75%;
+  height: 75%;
+}
+
 <body>
     <div>
       <span
-        class="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+        class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
       >
         Contributors
       </span>
       <div
-        class="MuiBox-root MuiBox-root-2 emotion-2 emotion-3"
+        class="emotion-2 MuiBox-root emotion-3"
       >
         <div
-          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-          title="dmethvin"
+          aria-label="dmethvin"
+          class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault emotion-4"
+          data-mui-internal-clone-element="true"
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiAvatar-fallback"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback emotion-5"
+            data-testid="PersonIcon"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -38,12 +108,14 @@ Object {
           </svg>
         </div>
         <div
-          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-          title="mgol"
+          aria-label="mgol"
+          class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault emotion-4"
+          data-mui-internal-clone-element="true"
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiAvatar-fallback"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback emotion-5"
+            data-testid="PersonIcon"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -55,31 +127,101 @@ Object {
       </div>
     </div>
   </body>,
-  "container": .emotion-0 {
+  "container": .emotion-1 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75;
   font-weight: 700;
   margin-bottom: 10px;
 }
 
-.emotion-2>* {
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: 10px 0 10px 0;
+}
+
+.emotion-3>* {
   margin: 5px;
 }
 
+.emotion-4 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: 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;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-size: 1.25rem;
+  line-height: 1;
+  border-radius: 50%;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  color: #fff;
+  background-color: #bdbdbd;
+}
+
+.emotion-5 {
+  -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;
+  width: 75%;
+  height: 75%;
+}
+
 <div>
     <span
-      class="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+      class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
     >
       Contributors
     </span>
     <div
-      class="MuiBox-root MuiBox-root-2 emotion-2 emotion-3"
+      class="emotion-2 MuiBox-root emotion-3"
     >
       <div
-        class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-        title="dmethvin"
+        aria-label="dmethvin"
+        class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault emotion-4"
+        data-mui-internal-clone-element="true"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiAvatar-fallback"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback emotion-5"
+          data-testid="PersonIcon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -89,12 +231,14 @@ Object {
         </svg>
       </div>
       <div
-        class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-        title="mgol"
+        aria-label="mgol"
+        class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault emotion-4"
+        data-mui-internal-clone-element="true"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiAvatar-fallback"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback emotion-5"
+          data-testid="PersonIcon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -162,32 +306,102 @@ Object {
 exports[`test Developers should render the component for maintainers with items 1`] = `
 Object {
   "asFragment": [Function],
-  "baseElement": .emotion-0 {
+  "baseElement": .emotion-1 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75;
   font-weight: 700;
   margin-bottom: 10px;
 }
 
-.emotion-2>* {
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: 10px 0 10px 0;
+}
+
+.emotion-3>* {
   margin: 5px;
 }
 
+.emotion-4 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: 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;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-size: 1.25rem;
+  line-height: 1;
+  border-radius: 50%;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  color: #fff;
+  background-color: #bdbdbd;
+}
+
+.emotion-5 {
+  -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;
+  width: 75%;
+  height: 75%;
+}
+
 <body>
     <div>
       <span
-        class="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+        class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
       >
         Maintainers
       </span>
       <div
-        class="MuiBox-root MuiBox-root-1 emotion-2 emotion-3"
+        class="emotion-2 MuiBox-root emotion-3"
       >
         <div
-          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-          title="dmethvin"
+          aria-label="dmethvin"
+          class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault emotion-4"
+          data-mui-internal-clone-element="true"
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiAvatar-fallback"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback emotion-5"
+            data-testid="PersonIcon"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -197,12 +411,14 @@ Object {
           </svg>
         </div>
         <div
-          class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-          title="mgol"
+          aria-label="mgol"
+          class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault emotion-4"
+          data-mui-internal-clone-element="true"
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiAvatar-fallback"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback emotion-5"
+            data-testid="PersonIcon"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -214,31 +430,101 @@ Object {
       </div>
     </div>
   </body>,
-  "container": .emotion-0 {
+  "container": .emotion-1 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75;
   font-weight: 700;
   margin-bottom: 10px;
 }
 
-.emotion-2>* {
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: 10px 0 10px 0;
+}
+
+.emotion-3>* {
   margin: 5px;
 }
 
+.emotion-4 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: 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;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-size: 1.25rem;
+  line-height: 1;
+  border-radius: 50%;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  color: #fff;
+  background-color: #bdbdbd;
+}
+
+.emotion-5 {
+  -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;
+  width: 75%;
+  height: 75%;
+}
+
 <div>
     <span
-      class="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+      class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
     >
       Maintainers
     </span>
     <div
-      class="MuiBox-root MuiBox-root-1 emotion-2 emotion-3"
+      class="emotion-2 MuiBox-root emotion-3"
     >
       <div
-        class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-        title="dmethvin"
+        aria-label="dmethvin"
+        class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault emotion-4"
+        data-mui-internal-clone-element="true"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiAvatar-fallback"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback emotion-5"
+          data-testid="PersonIcon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -248,12 +534,14 @@ Object {
         </svg>
       </div>
       <div
-        class="MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault"
-        title="mgol"
+        aria-label="mgol"
+        class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault emotion-4"
+        data-mui-internal-clone-element="true"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiAvatar-fallback"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiAvatar-fallback emotion-5"
+          data-testid="PersonIcon"
           focusable="false"
           viewBox="0 0 24 24"
         >

package/src/pages/Version/DetailSidebar/Developers/styles.ts

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 import FloatingActionButton from 'verdaccio-ui/components/FloatingActionButton';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';

package/src/pages/Version/DetailSidebar/Dist/Dist.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 '../../context';
-
 import Dist from './Dist';
 
 const withDistComponent = (

package/src/pages/Version/DetailSidebar/Dist/Dist.tsx

@@ -1,13 +1,11 @@
 import React, { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import List from 'verdaccio-ui/components/List';
 import fileSizeSI from 'verdaccio-ui/utils/file-size';
 import { formatLicense } from 'verdaccio-ui/utils/package';
 
 import { DetailContext } from '../../context';
-
-import { StyledText, DistListItem, DistChips } from './styles';
+import { DistChips, DistListItem, StyledText } from './styles';
 
 const DistChip: FC<{ name: string }> = ({ name, children }) =>
   children ? (