Merge pull request #270 from AppQuality/UN-94-page-header

Un 94 page header

Author: marcbon

src/assets/icons/clock-stroke.svg

@@ -0,0 +1,44 @@
+import {
+  Span,
+  Tag,
+  theme as globalTheme,
+} from '@appquality/unguess-design-system';
+import { FC, ReactNode } from 'react';
+import styled from 'styled-components';
+
+const StyledTag = styled(Tag)`
+  pointer-events: none;
+  padding: 0;
+  margin-right: ${({ theme }) => theme.space.xs};
+`;
+
+const StyledChild = styled(Span)`
+  color: ${({ theme }) => theme.palette.grey[700]};
+`;
+
+const StyledAvatar = styled(StyledTag.Avatar)`
+  margin-left: 0 !important;
+  margin-right: ${({ theme }) => theme.space.xxs} !important;
+`;
+
+const PillContainer = styled.div`
+  font-size: ${({ theme }) => theme.fontSizes.sm};
+  margin-right: ${({ theme }) => theme.space.xs};
+`;
+
+export const Pill: FC<{
+  title: string;
+  background?: string;
+  color?: string;
+  icon?: ReactNode;
+}> = ({ background, color, icon, title, children }) => (
+  <PillContainer>
+    <StyledTag isPill hue={background ?? 'white'} size="large">
+      {icon && <StyledAvatar>{icon}</StyledAvatar>}
+      <Span isBold style={{ color: color ?? globalTheme.palette.grey[700] }}>
+        {title}
+      </Span>
+    </StyledTag>
+    {children && <StyledChild>{children}</StyledChild>}
+  </PillContainer>
+);

src/assets/icons/pill-icon-clock.svg

@@ -14,6 +14,12 @@
   "__BREADCRUMB_ITEM_DASHBOARD": "My campaigns",
   "__BREADCRUMB_ITEM_SERVICES": "Services",
   "__CAMPAIGN_CARD_EMPTY_TITLE_LABEL": "Untitled",
+  "__CAMPAIGN_PAGE_BUTTON_DETAIL_BUG": "Go to Bug detail",
+  "__CAMPAIGN_PAGE_INFO_HEADER_DESKTOP": "Desktop",
+  "__CAMPAIGN_PAGE_INFO_HEADER_FROM_DATE_TO_DATE": "<0><0>{{start_date}}</0></0> to <3><0>{{end_date}}</0></3>",
+  "__CAMPAIGN_PAGE_INFO_HEADER_MOBILE": "Mobile",
+  "__CAMPAIGN_PAGE_INFO_HEADER_TEST_TIMING": "Test duration",
+  "__CAMPAIGN_PAGE_INFO_HEADER_USERS_NUMBER": "N° Users",
   "__CAMPAIGN_GENERATE_REPORT_CARD_BUTTON_LABEL": "Download",
   "__CAMPAIGN_GENERATE_REPORT_CARD_META": "Bugs Report",
   "__CAMPAIGN_PAGE_REPORTS_CARDS_DOWNLOAD_LABEL": "Download now",

src/assets/icons/pill-icon-desktop.svg

@@ -14,6 +14,12 @@
   "__BREADCRUMB_ITEM_DASHBOARD": "Le mie campagne",
   "__BREADCRUMB_ITEM_SERVICES": "Servizi",
   "__CAMPAIGN_CARD_EMPTY_TITLE_LABEL": "Senza Titolo",
+  "__CAMPAIGN_PAGE_BUTTON_DETAIL_BUG": "Vai al dettaglio bug",
+  "__CAMPAIGN_PAGE_INFO_HEADER_DESKTOP": "Desktop",
+  "__CAMPAIGN_PAGE_INFO_HEADER_FROM_DATE_TO_DATE": "<0><0>{{start_date}}</0></0> to <3><0>{{end_date}}</0></3>",
+  "__CAMPAIGN_PAGE_INFO_HEADER_MOBILE": "Mobile",
+  "__CAMPAIGN_PAGE_INFO_HEADER_TEST_TIMING": "Durata test",
+  "__CAMPAIGN_PAGE_INFO_HEADER_USERS_NUMBER": "N° Utenti",
   "__CAMPAIGN_GENERATE_REPORT_CARD_BUTTON_LABEL": "Scarica",
   "__CAMPAIGN_GENERATE_REPORT_CARD_META": "Bugs Report",
   "__CAMPAIGN_PAGE_REPORTS_CARDS_DOWNLOAD_LABEL": "Download now",