Un 522 Tag

package.json

@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "2.12.76",
+    "@appquality/unguess-design-system": "2.12.79",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

src/common/components/BugDetail/BugDuplicates/BugItem.tsx

@@ -1,7 +1,6 @@
 import { BugCard } from 'src/common/components/BugCard/BugCardWithIcon';
 import { theme as globalTheme } from 'src/app/theme';
-import { Pill } from 'src/common/components/pills/Pill';
-import { Span } from '@appquality/unguess-design-system';
+import { Span, Tag } from '@appquality/unguess-design-system';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
@@ -63,7 +62,7 @@ export const BugItem = ({
             {pills ? (
               <BugCard.Footer>
                 {pills.map((pill) => (
-                  <Pill>{pill}</Pill>
+                  <Tag>{pill}</Tag>
                 ))}
               </BugCard.Footer>
             ) : null}

src/common/components/BugDetail/DetailsItems.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { theme as globalTheme } from 'src/app/theme';
-import { SeverityPill } from 'src/common/components/pills/SeverityPill';
+import { SeverityTag } from 'src/common/components/tag/SeverityTag';
 import { Bug, BugAdditionalField } from 'src/features/api';
 import { MD, Span } from '@appquality/unguess-design-system';
 import { Trans, useTranslation } from 'react-i18next';
@@ -72,7 +72,8 @@ export default ({
         <Label style={{ marginBottom: globalTheme.space.xs }}>
           {t('__BUGS_PAGE_BUG_DETAIL_DETAILS_BUG_SEVERITY_LABEL')}
         </Label>
-        <SeverityPill
+        <SeverityTag
+          hasBackground
           severity={bug.severity.name.toLowerCase() as Severities}
         />
       </DetailsItem>

src/common/components/BugDetail/Meta/NeedReviewPill.tsx

@@ -1,7 +1,7 @@
-import { SM, Tooltip } from '@appquality/unguess-design-system';
-import { IconPill } from 'src/common/components/pills/IconPill';
+import { SM, Tooltip, Tag } from '@appquality/unguess-design-system';
 import { ReactComponent as NeedReviewIcon } from 'src/assets/icons/pill-icon-need-review.svg';
 import { useTranslation } from 'react-i18next';
+import { theme } from 'src/app/theme';
 
 export const NeedReviewPill = () => {
   const { t } = useTranslation();
@@ -11,14 +11,14 @@ export const NeedReviewPill = () => {
       type="light"
       content={t('__BUGS_PAGE_BUG_DETAIL_NEED_REVIEW_TOOLTIP')}
     >
-      <span>
-        <IconPill
-          size="medium"
-          iconPosition="right"
-          title={<SM>{t('__BUGS_PAGE_BUG_DETAIL_NEED_REVIEW')}</SM>}
-          icon={<NeedReviewIcon />}
-        />
-      </span>
+      <div>
+        <SM tag="span" style={{ marginRight: theme.space.xxs }}>
+          {t('__BUGS_PAGE_BUG_DETAIL_NEED_REVIEW')}
+        </SM>
+        <Tag hue="rgba(0,0,0,0)" isRound>
+          <NeedReviewIcon />
+        </Tag>
+      </div>
     </Tooltip>
   );
 };

src/common/components/BugDetail/Meta/index.tsx

@@ -1,13 +1,12 @@
-import { XL, MD, SM } from '@appquality/unguess-design-system';
+import { XL, MD, SM, Tag } from '@appquality/unguess-design-system';
 import { ReactComponent as OSIcon } from 'src/assets/icons/environment-icon.svg';
 import { ReactComponent as SmartphoneIcon } from 'src/assets/icons/pill-icon-smartphone.svg';
 import { ReactComponent as TabletIcon } from 'src/assets/icons/pill-icon-tablet.svg';
 import { ReactComponent as DesktopIcon } from 'src/assets/icons/pill-icon-desktop.svg';
-import { SeverityPill } from 'src/common/components/pills/SeverityPill';
+import { SeverityTag } from 'src/common/components/tag/SeverityTag';
 import styled from 'styled-components';
 import { theme as globalTheme } from 'src/app/theme';
 import { Bug } from 'src/features/api';
-import { IconPill } from 'src/common/components/pills/IconPill';
 import { Pipe } from 'src/common/components/Pipe';
 import { WrappedText } from 'src/common/components/WrappedText';
 import { NeedReviewPill } from './NeedReviewPill';
@@ -39,7 +38,7 @@ function getDeviceIcon(device: string) {
     case 'desktop':
       return <DesktopIcon />;
     default:
-      return null;
+      return <TabletIcon />;
   }
 }
 
@@ -55,7 +54,10 @@ export default ({
 }) => (
   <Container>
     <SeverityContainer>
-      <SeverityPill severity={bug.severity.name.toLowerCase() as Severities} />
+      <SeverityTag
+        hasBackground
+        severity={bug.severity.name.toLowerCase() as Severities}
+      />
       {bug.status.id === 4 && <NeedReviewPill />}
     </SeverityContainer>
     <XL
@@ -70,37 +72,35 @@ export default ({
     </XL>
     <MD
       style={{
-        color: globalTheme.palette.grey[600],
+        color: globalTheme.palette.grey[700],
         marginBottom: globalTheme.space.md,
       }}
     >
       {bug.title.context ? bug.title.context.join(', ') : null}
     </MD>
     <BugInfo>
-      <SM style={{ textTransform: 'capitalize' }}>{bug.type.name}</SM>
-      <Pipe style={{ height: globalTheme.lineHeights.md }} />
-      <IconPill
-        size="medium"
-        title={
-          <SM>
-            {bug.device.type === 'desktop'
-              ? bug.device.desktop_type
-              : `${bug.device.manufacturer} ${bug.device.model}`}
-          </SM>
-        }
-        icon={getDeviceIcon(bug.device.type)}
-        style={{ textTransform: 'capitalize' }}
-      />
-      <IconPill
-        size="medium"
-        title={
-          <SM>
-            {bug.device.os} {bug.device.os_version}
-          </SM>
-        }
-        icon={<OSIcon />}
-        style={{ textTransform: 'capitalize' }}
-      />
+      <SM
+        isBold
+        style={{
+          textTransform: 'capitalize',
+          color: globalTheme.palette.grey[700],
+        }}
+      >
+        {bug.type.name}
+      </SM>
+      <Pipe size="regular" style={{ height: globalTheme.lineHeights.md }} />
+      <Tag hue="white" style={{ textTransform: 'capitalize' }}>
+        <Tag.Avatar>{getDeviceIcon(bug.device.type)}</Tag.Avatar>
+        {bug.device.type === 'desktop'
+          ? bug.device.desktop_type
+          : `${bug.device.manufacturer} ${bug.device.model}`}
+      </Tag>
+      <Tag hue="white" style={{ textTransform: 'capitalize' }}>
+        <Tag.Avatar>
+          <OSIcon />
+        </Tag.Avatar>
+        {bug.device.os} {bug.device.os_version}
+      </Tag>
     </BugInfo>
   </Container>
 );

src/common/components/tag/SeverityTag.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable security/detect-object-injection */
+import { Tag } from '@appquality/unguess-design-system';
+import { theme } from 'src/app/theme';
+import { capitalizeFirstLetter } from 'src/common/capitalizeFirstLetter';
+
+interface SeverityTagProps {
+  severity: Severities;
+  counter?: number;
+  hasBackground?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  isRegular?: boolean;
+}
+
+export const SeverityTag = ({
+  severity,
+  counter,
+  hasBackground,
+  size,
+  isRegular,
+}: SeverityTagProps) => (
+  <Tag
+    size={size}
+    color={theme.colors.bySeverity[severity]}
+    hue={
+      hasBackground ? `${theme.colors.bySeverity[severity]}14` : 'rgba(0,0,0,0)'
+    }
+    isRegular={isRegular}
+  >
+    {capitalizeFirstLetter(severity)}
+    {typeof counter !== 'undefined' && (
+      <Tag.SecondaryText isBold color={theme.palette.grey[700]}>
+        {counter}
+      </Tag.SecondaryText>
+    )}
+  </Tag>
+);