feat(Coupon): migrate to tailwind

docs/src/data/tailwind-migration-status.yaml

@@ -22,7 +22,7 @@ CarrierLogo: true
 Checkbox: true
 ChoiceGroup: true
 Collapse: true
-Coupon: false
+Coupon: true
 CountryFlag: true
 Desktop: true
 Dialog: true

packages/orbit-components/src/Coupon/Coupon.ct-story.tsx

@@ -3,5 +3,9 @@ import React from "react";
 import Coupon from ".";
 
 export default function CouponVisualStory() {
-  return <Coupon>1337420</Coupon>;
+  return (
+    <div className="p-md">
+      <Coupon>1337420</Coupon>
+    </div>
+  );
 }

packages/orbit-components/src/Coupon/Coupon.stories.tsx

@@ -34,12 +34,16 @@ Default.story = {
 
 export const Playground = () => {
   const dataTest = text("dataTest", "test");
+  const id = text("id", "couponId");
   const content = text("content", "CODE");
 
   return (
     <Text>
-      Lorem ipsum dolor sit amet, consectetuer <Coupon dataTest={dataTest}>{content}</Coupon> elit.
-      Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo.
+      Lorem ipsum dolor sit amet, consectetuer{" "}
+      <Coupon dataTest={dataTest} id={id}>
+        {content}
+      </Coupon>{" "}
+      elit. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo.
     </Text>
   );
 };

packages/orbit-components/src/Coupon/__tests__/index.test.tsx

@@ -5,8 +5,14 @@ import Coupon from "..";
 
 describe("Coupon", () => {
   it("should have expected DOM output", () => {
-    render(<Coupon dataTest="test">code</Coupon>);
-    expect(screen.getByTestId("test")).toBeInTheDocument();
+    render(
+      <Coupon dataTest="test" id="couponId">
+        code
+      </Coupon>,
+    );
+    const coupon = screen.getByTestId("test");
+    expect(coupon).toBeInTheDocument();
+    expect(coupon).toHaveAttribute("id", "couponId");
     expect(screen.getByText("code")).toBeInTheDocument();
   });
 });

packages/orbit-components/src/Coupon/index.tsx

@@ -1,35 +1,17 @@
 "use client";
 
 import * as React from "react";
-import styled, { css } from "styled-components";
 
-import defaultTheme from "../defaultTheme";
 import type { Props } from "./types";
 
-const StyledCoupon = styled.mark`
-  ${({ theme }) => css`
-    display: inline;
-    background: none;
-    font-size: ${theme.orbit.fontSizeTextSmall};
-    letter-spacing: 0.75px;
-    text-transform: uppercase;
-    border: 1px dashed ${theme.orbit.paletteCloudDark};
-    padding: 2px ${theme.orbit.spaceXXSmall};
-    line-height: inherit;
-    font-weight: ${theme.orbit.fontWeightMedium};
-    border-radius: ${theme.orbit.borderRadiusNormal};
-    color: ${theme.orbit.paletteInkDark};
-  `}
-`;
-
-StyledCoupon.defaultProps = {
-  theme: defaultTheme,
-};
-
 const Coupon = ({ children, dataTest, id }: Props) => (
-  <StyledCoupon data-test={dataTest} id={id}>
+  <mark
+    className="orbit-coupon text-small border-cloud-dark py-xxxs px-xxs rounded-normal text-ink-dark inline border border-dashed bg-transparent font-medium uppercase tracking-[0.75px]"
+    data-test={dataTest}
+    id={id}
+  >
     {children}
-  </StyledCoupon>
+  </mark>
 );
 
 export default Coupon;