Adding snaps authorship pill (#12740)

* added npm icon

* added snaps-authorship-pill component and story

* updated npm icon

* added classname

* added comments

* changed label to an h7

* updated default label, removed unnecessary font-weight prop

* moved npm icon to flask/icons and added storybook file

* added hover/focus logic

* updated hover logic

* updated hover logic

* added authorship pill scss to app-components, removed unnecessary handlers

* removed npm icon, added font-awesome icon, added font-awesome brands to scss imports

* removed icons directory, updated scss file to use the proper color for npm icon, updated component with correct size and added class to change color

* fixed linter errors

* added link to pill and its story, changed title of story

* changed link to open in new tab, moved classname to root element and made it inline-block

* fixed proptype comment

* fixed linter error

ui/components/app/app-components.scss

@@ -19,6 +19,7 @@
 @import 'edit-gas-fee-popover/edit-gas-item/index';
 @import 'edit-gas-fee-popover/network-status/index';
 @import 'edit-gas-fee-popover/network-status/status-slider/index';
+@import 'flask/snaps-authorship-pill/index';
 @import 'gas-customization/gas-modal-page-container/index';
 @import 'gas-customization/gas-price-button-group/index';
 @import 'gas-customization/index';

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

@@ -0,0 +1 @@
+export { default } from './snaps-authorship-pill';

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

@@ -0,0 +1,16 @@
+@import "design-system";
+
+.snaps-authorship-pill {
+  display: inline-block;
+
+  &:hover,
+  &:focus {
+    .chip {
+      background-color: $ui-1;
+    }
+  }
+}
+
+.snaps-authorship-icon {
+  color: $ui-4;
+}

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Chip from '../../../ui/chip';
+import Box from '../../../ui/box';
+import Typography from '../../../ui/typography';
+import {
+  COLORS,
+  TYPOGRAPHY,
+} from '../../../../helpers/constants/design-system';
+
+const SnapsAuthorshipPill = ({ packageName, className, url }) => {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={classnames(className, `snaps-authorship-pill`)}
+    >
+      <Chip
+        leftIcon={
+          <Box paddingLeft={2}>
+            <i className="fab fa-npm fa-lg snaps-authorship-icon" />
+          </Box>
+        }
+        backgroundColor={COLORS.WHITE}
+      >
+        <Typography
+          className="chip__label"
+          variant={TYPOGRAPHY.H7}
+          tag="span"
+          color={COLORS.UI4}
+        >
+          {packageName}
+        </Typography>
+      </Chip>
+    </a>
+  );
+};
+
+SnapsAuthorshipPill.propTypes = {
+  /**
+   * NPM package name of the snap
+   */
+  packageName: PropTypes.string,
+  /**
+   * The className of the SnapsAuthorshipPill
+   */
+  className: PropTypes.string,
+  /**
+   * The url of the snap's package
+   */
+  url: PropTypes.string,
+};
+
+export default SnapsAuthorshipPill;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import SnapsAuthorshipPill from '.';
+
+export default {
+  title: 'Components/App/Flask/SnapsAuthorshipPill',
+  id: __filename,
+  component: SnapsAuthorshipPill,
+  argTypes: {
+    packageName: {
+      control: 'text',
+    },
+    url: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <SnapsAuthorshipPill {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  packageName: 'npm-package-name',
+  url: 'https://www.npmjs.com/package/@airswap/protocols',
+};

ui/css/design-system/typography.scss

@@ -1,6 +1,7 @@
 $fa-font-path: '/fonts/fontawesome';
 
 @import '../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
+@import '../../../node_modules/@fortawesome/fontawesome-free/scss/brands';
 @import '../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
 @import '../../../node_modules/@fortawesome/fontawesome-free/scss/regular';