Include snap version in pill (#14803)

* Include snap version in pill

* snaps authorship styling

* styling

* Fix linting

* Fix linting

Co-authored-by: eriknson <eriks@mail.se>

ui/components/app/flask/snaps-authorship-pill/index.scss

@@ -3,6 +3,10 @@
 .snaps-authorship-pill {
   display: inline-block;
 
+  .chip {
+    padding-right: 8px;
+  }
+
   &:hover,
   &:focus {
     .chip {
@@ -12,5 +16,14 @@
 }
 
 .snaps-authorship-icon {
-  color: var(--color-icon-default);
+  color: var(--color-icon-alternative);
+}
+
+.snaps-authorship-version {
+  border-radius: 100px;
+  line-height: 100%;
+}
+
+.snaps-authorship-version > span {
+  vertical-align: middle;
 }

ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js

@@ -7,11 +7,13 @@ import Typography from '../../../ui/typography';
 import {
   COLORS,
   TYPOGRAPHY,
+  TEXT_ALIGN,
 } from '../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
 
 const snapIdPrefixes = ['npm:', 'local:'];
 
-const SnapsAuthorshipPill = ({ snapId, className }) => {
+const SnapsAuthorshipPill = ({ snapId, version, className }) => {
   // @todo Use getSnapPrefix from snaps-skunkworks when possible
   const snapPrefix = snapIdPrefixes.find((prefix) => snapId.startsWith(prefix));
   const packageName = snapId.replace(snapPrefix, '');
@@ -20,6 +22,7 @@ const SnapsAuthorshipPill = ({ snapId, className }) => {
     ? `https://www.npmjs.com/package/${packageName}`
     : packageName;
   const icon = isNPM ? 'fab fa-npm fa-lg' : 'fas fa-code';
+  const t = useI18nContext();
   return (
     <a
       href={url}
@@ -33,6 +36,26 @@ const SnapsAuthorshipPill = ({ snapId, className }) => {
             <i className={`${icon} snaps-authorship-icon`} />
           </Box>
         }
+        rightIcon={
+          version && (
+            <Box
+              className="snaps-authorship-version"
+              backgroundColor={COLORS.PRIMARY_DEFAULT}
+              paddingLeft={2}
+              paddingRight={2}
+            >
+              <Typography
+                color={COLORS.PRIMARY_INVERSE}
+                variant={TYPOGRAPHY.H7}
+                align={TEXT_ALIGN.CENTER}
+                tag="span"
+                className="version"
+              >
+                {t('shorthandVersion', [version])}
+              </Typography>
+            </Box>
+          )
+        }
         backgroundColor={COLORS.BACKGROUND_DEFAULT}
       >
         <Typography
@@ -53,6 +76,10 @@ SnapsAuthorshipPill.propTypes = {
    * The id of the snap
    */
   snapId: PropTypes.string,
+  /**
+   * The version of the snap
+   */
+  version: PropTypes.string,
   /**
    * The className of the SnapsAuthorshipPill
    */

ui/components/app/permissions-connect-header/permissions-connect-header.component.js

@@ -5,15 +5,9 @@ import Box from '../../ui/box';
 import {
   FLEX_DIRECTION,
   JUSTIFY_CONTENT,
-  ///: BEGIN:ONLY_INCLUDE_IN(flask)
-  COLORS,
-  TYPOGRAPHY,
-  TEXT_ALIGN,
-  ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/design-system';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 import SnapsAuthorshipPill from '../flask/snaps-authorship-pill';
-import Typography from '../../ui/typography';
 ///: END:ONLY_INCLUDE_IN
 
 export default class PermissionsConnectHeader extends Component {
@@ -82,9 +76,6 @@ export default class PermissionsConnectHeader extends Component {
       isSnapInstall,
       ///: END:ONLY_INCLUDE_IN
     } = this.props;
-    ///: BEGIN:ONLY_INCLUDE_IN(flask)
-    const { t } = this.context;
-    ///: END:ONLY_INCLUDE_IN
     return (
       <Box
         className="permissions-connect-header"
@@ -96,24 +87,8 @@ export default class PermissionsConnectHeader extends Component {
         <div className="permissions-connect-header__title">{headerTitle}</div>
         {
           ///: BEGIN:ONLY_INCLUDE_IN(flask)
-          isSnapInstall && <SnapsAuthorshipPill snapId={siteOrigin} />
+          isSnapInstall && (
-          ///: END:ONLY_INCLUDE_IN
+            <SnapsAuthorshipPill snapId={siteOrigin} version={snapVersion} />
-        }
-        {
-          ///: BEGIN:ONLY_INCLUDE_IN(flask)
-          snapVersion && (
-            <Typography
-              boxProps={{
-                margin: [2, 0],
-              }}
-              color={COLORS.TEXT_MUTED}
-              variant={TYPOGRAPHY.H7}
-              align={TEXT_ALIGN.CENTER}
-              tag="span"
-              className="version"
-            >
-              {t('shorthandVersion', [snapVersion])}
-            </Typography>
           )
           ///: END:ONLY_INCLUDE_IN
         }

ui/pages/permissions-connect/flask/snap-install/index.scss

@@ -22,10 +22,6 @@
     }
   }
 
-  .version {
-    font-family: monospace;
-  }
-
   .page-container__footer {
     width: 100%;
     margin-top: 12px;