(PC-11178) Refacto using a shared tag component

src/components/pages/Bookings/BookingsRecapTable/CellsFormatter/BookingOfferCell.jsx

@@ -6,6 +6,8 @@ import { format } from 'date-fns-tz'
 import PropTypes from 'prop-types'
 import React from 'react'
 
+import { Tag } from 'ui-kit'
+
 import { FORMAT_DD_MM_YYYY_HH_mm, toDateStrippedOfTimezone } from '../../../../../utils/date'
 
 const BookingOfferCell = ({ offer }) => {
@@ -24,9 +26,9 @@ const BookingOfferCell = ({ offer }) => {
       title={`${offer.offer_name} (ouverture dans un nouvel onglet)`}
     >
       {offer.offer_is_educational && (
-        <div className="tag">
+        <Tag className="booking-educational-tag">
           Offre collective
-        </div>
+        </Tag>
       )}
       <div className="booking-offer-name">
         {offer.offer_name}

src/components/pages/Offers/Offers/OfferItem/OfferItem.jsx

@@ -1,6 +1,6 @@
 /*
-* @debt directory "Gaël: this file should be migrated within the new directory structure"
-*/
+ * @debt directory "Gaël: this file should be migrated within the new directory structure"
+ */
 
 import PropTypes from 'prop-types'
 import React from 'react'
@@ -12,6 +12,7 @@ import { isOfferDisabled } from 'components/pages/Offers/domain/isOfferDisabled'
 import StatusLabel from 'components/pages/Offers/Offer/OfferStatus/StatusLabel'
 import { OFFER_STATUS_SOLD_OUT } from 'components/pages/Offers/Offers/_constants'
 import { computeVenueDisplayName } from 'repository/venuesService'
+import { Tag } from 'ui-kit'
 import { pluralize } from 'utils/pluralize'
 import { formatLocalTimeDateString } from 'utils/timezone'
 
@@ -81,9 +82,9 @@ const OfferItem = ({ disabled, offer, isSelected, selectOffer }) => {
       </td>
       <td className="title-column">
         {offer.isEducational && (
-          <div className="tag">
+          <Tag className="educational-tag">
             Offre collective
-          </div>
+          </Tag>
         )}
         <Link
           className="name"

src/components/pages/Offers/Offers/OfferItem/OfferItem.scss

@@ -4,22 +4,12 @@
   .name {
     @include button();
 
+    display: block;
     margin-bottom: rem(4px);
     overflow-wrap: break-word;
   }
 
-  .tag {
-    color: $tertiary;
-    border: solid rem(1px) $tertiary;
-    border-radius: rem(4px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: fit-content;
-    height: fit-content;
-    padding: rem(0 4px);
-    @include highlight();
-    line-height: rem(16px);
+  .educational-tag {
     margin-bottom: rem(5px);
   }
 

src/styles/components/pages/Bookings/BookingsRecapTable/CellsFormatter/_BookingOfferCell.scss

@@ -16,18 +16,6 @@
   color: $grey-dark;
 }
 
-.tag {
-  align-items: center;
-  border: solid rem(1px) $tertiary;
-  border-radius: rem(4px);
-  color: $tertiary;
-  display: flex;
-  height: fit-content;
-  justify-content: center;
-  line-height: rem(16px);
+.booking-educational-tag {
   margin-bottom: rem(5px);
-  padding: rem(0 4px);
-  width: fit-content;
-
-  @include highlight();
 }

src/ui-kit/Tag/Tag.module.scss

@@ -0,0 +1,10 @@
+.tag {
+  @include highlight();
+
+  border: solid rem(1px) $tertiary;
+  border-radius: rem(4px);
+  color: $tertiary;
+  display: inline-block;
+  line-height: rem(16px);
+  padding: 0 rem(4px);
+}

src/ui-kit/Tag/Tag.stories.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import Tag from './Tag'
+
+export default {
+  title: 'ui-kit/Tag',
+  component: Tag,
+}
+
+const Template = args => (
+  <Tag {...args}>
+    {args.children}
+  </Tag>
+)
+
+export const Default = Template.bind({})
+
+Default.args = {
+  children: 'Offre collective',
+}

src/ui-kit/Tag/Tag.tsx

@@ -0,0 +1,17 @@
+import cx from 'classnames'
+import React from 'react'
+
+import styles from './Tag.module.scss'
+
+interface ITagProps {
+  children: JSX.Element;
+  className?: string;
+}
+
+const Tag = ({ children, className }: ITagProps): JSX.Element => (
+  <span className={cx(styles.tag, className)}>
+    {children}
+  </span>
+)
+
+export default Tag

src/ui-kit/Tag/index.ts

@@ -0,0 +1 @@
+export { default } from './Tag'

src/ui-kit/index.ts

@@ -1,3 +1,4 @@
 export { default as CheckboxField } from './CheckboxField'
 export { default as Divider } from './Divider'
-export { default as SubmitButton } from './SubmitButton'
+export { default as SubmitButton } from './SubmitButton'
+export { default as Tag } from './Tag'