npm - @verdaccio/ui-theme - Versions diffs - 6.0.0-6-next.12 → 6.0.0-6-next.13 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (246) hide show

package/src/pages/Version/DetailContainer/UpLinks/__snapshots__/UpLinks.test.tsx.snap CHANGED Viewed

@@ -3,18 +3,36 @@
 exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `
 Object {
   "asFragment": [Function],
-  "baseElement": <body>
+  "baseElement": .emotion-0 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75;
+  margin-bottom: 0.35em;
+}
+<body>
     <div>
       <span
-        class="MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom"
+        class="MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom emotion-0"
       >
         verdaccio has no uplinks.
       </span>
     </div>
   </body>,
-  "container": <div>
+  "container": .emotion-0 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.75;
+  margin-bottom: 0.35em;
+}
+<div>
     <span
-      class="MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom"
+      class="MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom emotion-0"
     >
       verdaccio has no uplinks.
     </span>
@@ -76,11 +94,72 @@ Object {
 exports[`<UpLinks /> component should render the component with uplinks 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;
 }
 .emotion-2 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: left;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.emotion-3.Mui-focusVisible {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+.emotion-3.Mui-selected {
+  background-color: rgba(75, 94, 64, 0.08);
+}
+.emotion-3.Mui-selected.Mui-focusVisible {
+  background-color: rgba(75, 94, 64, 0.2);
+}
+.emotion-3.Mui-disabled {
+  opacity: 0.38;
+}
+.emotion-5 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-top: 4px;
+  margin-bottom: 4px;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -88,11 +167,20 @@ Object {
   opacity: 0.6;
 }
-.emotion-4 {
+.emotion-6 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  display: block;
+}
+.emotion-7 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
-  border-bottom: 1px dotted rgba(0,0,0,0.2);
+  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
   white-space: nowrap;
   height: 0.5em;
 }
@@ -100,33 +188,33 @@ Object {
 <body>
     <div>
       <span
-        class="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+        class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
       >
         Uplinks
       </span>
       <ul
-        class="MuiList-root MuiList-padding"
+        class="MuiList-root MuiList-padding emotion-2"
       >
         <li
-          class="MuiListItem-root MuiListItem-gutters"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-3"
         >
           <div
-            class="MuiListItemText-root emotion-2 emotion-3"
+            class="MuiListItemText-root emotion-4 emotion-5"
           >
             <span
-              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-6"
             >
               npmjs
             </span>
           </div>
           <div
-            class="emotion-4 emotion-5"
+            class="emotion-7 emotion-8"
           />
           <div
-            class="MuiListItemText-root emotion-2 emotion-3"
+            class="MuiListItemText-root emotion-4 emotion-5"
           >
             <span
-              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-6"
             >
               3 years ago
             </span>
@@ -135,11 +223,72 @@ Object {
       </ul>
     </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;
 }
 .emotion-2 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: left;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.emotion-3.Mui-focusVisible {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+.emotion-3.Mui-selected {
+  background-color: rgba(75, 94, 64, 0.08);
+}
+.emotion-3.Mui-selected.Mui-focusVisible {
+  background-color: rgba(75, 94, 64, 0.2);
+}
+.emotion-3.Mui-disabled {
+  opacity: 0.38;
+}
+.emotion-5 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-top: 4px;
+  margin-bottom: 4px;
   -webkit-flex: none;
   -ms-flex: none;
   flex: none;
@@ -147,44 +296,53 @@ Object {
   opacity: 0.6;
 }
-.emotion-4 {
+.emotion-6 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  display: block;
+}
+.emotion-7 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
-  border-bottom: 1px dotted rgba(0,0,0,0.2);
+  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
   white-space: nowrap;
   height: 0.5em;
 }
 <div>
     <span
-      class="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+      class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
     >
       Uplinks
     </span>
     <ul
-      class="MuiList-root MuiList-padding"
+      class="MuiList-root MuiList-padding emotion-2"
     >
       <li
-        class="MuiListItem-root MuiListItem-gutters"
+        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding emotion-3"
       >
         <div
-          class="MuiListItemText-root emotion-2 emotion-3"
+          class="MuiListItemText-root emotion-4 emotion-5"
         >
           <span
-            class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-6"
           >
             npmjs
           </span>
         </div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-7 emotion-8"
         />
         <div
-          class="MuiListItemText-root emotion-2 emotion-3"
+          class="MuiListItemText-root emotion-4 emotion-5"
         >
           <span
-            class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-6"
           >
             3 years ago
           </span>

package/src/pages/Version/DetailContainer/UpLinks/styles.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
 import { default as MuiListItemText } from 'verdaccio-ui/components/ListItemText';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
@@ -11,7 +10,7 @@ export const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
 export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   flex: '1 1 auto',
   borderBottom: `1px dotted ${
-    theme?.palette.type == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
+    theme?.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
   } `,
   whiteSpace: 'nowrap',
   height: '0.5em',
@@ -19,6 +18,6 @@ export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
 export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
   flex: 'none',
-  color: theme?.palette.type == 'light' ? theme?.palette.black : theme?.palette.white,
+  color: theme?.palette.mode == 'light' ? theme?.palette.black : theme?.palette.white,
   opacity: 0.6,
 }));

package/src/pages/Version/DetailContainer/Versions/Versions.test.tsx CHANGED Viewed

@@ -1,14 +1,12 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+import { cleanup, render } from 'verdaccio-ui/utils/test-react-testing-library';
 import translationEN from '../../../../i18n/crowdin/ui.json';
 import { DetailContext } from '../../context';
 import { DetailContextProps } from '../../version-config';
-import data from './__partials__/data.json';
 import Versions from './Versions';
+import data from './__partials__/data.json';
 const detailContextValue: Partial<DetailContextProps> = {
   packageName: 'foo',

package/src/pages/Version/DetailContainer/Versions/Versions.tsx CHANGED Viewed

@@ -3,10 +3,9 @@ import { useTranslation } from 'react-i18next';
 import { DIST_TAGS } from '../../../../../lib/constants';
 import { DetailContext } from '../../context';
-import { StyledText } from './styles';
 import VersionsHistoryList from './VersionsHistoryList';
 import VersionsTagList from './VersionsTagList';
+import { StyledText } from './styles';
 const Versions: React.FC = () => {
   const detailContext = useContext(DetailContext);

package/src/pages/Version/DetailContainer/Versions/VersionsHistoryList.tsx CHANGED Viewed

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import List from 'verdaccio-ui/components/List';
 import ListItem from 'verdaccio-ui/components/ListItem';
 import { formatDateDistance } from 'verdaccio-ui/utils/package';
-import { Versions, Time } from '../../../../../types/packageMeta';
-import { Spacer, ListItemText, StyledLink } from './styles';
+import { Time, Versions } from '../../../../../types/packageMeta';
+import { ListItemText, Spacer, StyledLink } from './styles';
 interface Props {
   versions: Versions;

package/src/pages/Version/DetailContainer/Versions/VersionsTagList.tsx CHANGED Viewed

@@ -1,11 +1,9 @@
 import React from 'react';
 import List from 'verdaccio-ui/components/List';
 import ListItem from 'verdaccio-ui/components/ListItem';
 import { DistTags } from '../../../../../types/packageMeta';
-import { Spacer, ListItemText } from './styles';
+import { ListItemText, Spacer } from './styles';
 interface Props {
   tags: DistTags;

package/src/pages/Version/DetailContainer/Versions/styles.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
 import Link from 'verdaccio-ui/components/Link';
 import { default as MuiListItemText } from 'verdaccio-ui/components/ListItemText';
 import Text from 'verdaccio-ui/components/Text';
@@ -12,7 +11,7 @@ export const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
 export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   flex: '1 1 auto',
   borderBottom: `1px dotted ${
-    theme?.palette.type == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
+    theme?.palette.mode == 'light' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)'
   } `,
   whiteSpace: 'nowrap',
   height: '0.5em',
@@ -22,7 +21,7 @@ export const Spacer = styled('div')<{ theme?: Theme }>(({ theme }) => ({
 export const ListItemText = styled(MuiListItemText)<{ theme?: Theme }>(({ theme }) => ({
   flex: 'none',
   opacity: 0.6,
-  color: theme?.palette.type == 'light' ? theme?.palette.black : theme?.palette.white,
+  color: theme?.palette.mode == 'light' ? theme?.palette.black : theme?.palette.white,
 }));
 export const StyledLink = styled(Link)({

package/src/pages/Version/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap CHANGED Viewed

@@ -2,99 +2,233 @@
 exports[`DetailContainer renders correctly 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding: 16px;
+}
+.emotion-2 {
+  overflow: hidden;
+  min-height: 48px;
+  -webkit-overflow-scrolling: touch;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   margin-bottom: 16px;
 }
+@media (max-width:599.95px) {
+  .emotion-2 .MuiTabs-scrollButtons {
+    display: none;
+  }
+}
+.emotion-3 {
+  position: relative;
+  display: inline-block;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow-x: hidden;
+  width: 100%;
+}
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.emotion-5 {
+  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.25;
+  text-transform: uppercase;
+  max-width: none;
+  min-width: 90px;
+  position: relative;
+  min-height: 48px;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  padding: 12px 16px;
+  overflow: hidden;
+  white-space: normal;
+  text-align: center;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  color: rgba(0, 0, 0, 0.6);
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 0;
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+}
+.emotion-5::-moz-focus-inner {
+  border-style: none;
+}
+.emotion-5.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+@media print {
+  .emotion-5 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+.emotion-5.Mui-selected {
+  color: #4b5e40;
+}
+.emotion-5.Mui-disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+.emotion-6 {
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+}
+.emotion-13 {
+  position: absolute;
+  height: 2px;
+  bottom: 0;
+  width: 100%;
+  -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: #4b5e40;
+}
 <div
-  class="MuiBox-root MuiBox-root-1"
+  class="MuiBox-root emotion-0"
 >
   <div
-    class="MuiTabs-root emotion-0 emotion-1"
+    class="MuiTabs-root emotion-1 emotion-2"
     color="primary"
   >
     <div
-      class="MuiTabs-scroller MuiTabs-fixed"
-      style="overflow: hidden;"
+      class="MuiTabs-scroller MuiTabs-fixed emotion-3"
+      style="overflow: hidden; margin-bottom: 0px;"
     >
       <div
-        class="MuiTabs-flexContainer"
+        class="MuiTabs-flexContainer emotion-4"
         role="tablist"
       >
         <button
           aria-selected="true"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-selected MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth Mui-selected emotion-5"
           data-testid="readme-tab"
           id="readme-tab"
           role="tab"
           tabindex="0"
           type="button"
         >
+          Readme
           <span
-            class="MuiTab-wrapper"
-          >
-            Readme
-          </span>
-          <span
-            class="MuiTouchRipple-root"
+            class="MuiTouchRipple-root emotion-6"
           />
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth emotion-5"
           data-testid="dependencies-tab"
           id="dependencies-tab"
           role="tab"
           tabindex="-1"
           type="button"
         >
+          Dependencies
           <span
-            class="MuiTab-wrapper"
-          >
-            Dependencies
-          </span>
-          <span
-            class="MuiTouchRipple-root"
+            class="MuiTouchRipple-root emotion-6"
           />
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth emotion-5"
           data-testid="versions-tab"
           id="versions-tab"
           role="tab"
           tabindex="-1"
           type="button"
         >
+          Versions
           <span
-            class="MuiTab-wrapper"
-          >
-            Versions
-          </span>
-          <span
-            class="MuiTouchRipple-root"
+            class="MuiTouchRipple-root emotion-6"
           />
         </button>
         <button
           aria-selected="false"
-          class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
+          class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth emotion-5"
           data-testid="uplinks-tab"
           id="uplinks-tab"
           role="tab"
           tabindex="-1"
           type="button"
         >
+          Uplinks
           <span
-            class="MuiTab-wrapper"
-          >
-            Uplinks
-          </span>
-          <span
-            class="MuiTouchRipple-root"
+            class="MuiTouchRipple-root emotion-6"
           />
         </button>
       </div>
       <span
-        class="PrivateTabIndicator-root-2 PrivateTabIndicator-colorPrimary-3 MuiTabs-indicator"
+        class="MuiTabs-indicator emotion-13"
         style="left: 0px; width: 0px;"
       />
     </div>