Add default styling for the porting embed (#7)

- Adds postcss and tailwind
- Adds a scoped version of tailwind's preflight, so our styles don't
affect the customer's site
- Adds a default styled version by using tailwindui components
- Builds a CSS file, which can be loaded by the customer using `import
'@gigs/embeds-js/style.css'`


![ScreenShot 2024-03-04 at 15 56
43](https://github.com/gigs/gigs-embeds-js/assets/4227520/08c675ae-7974-4c94-af21-6387cc43e8ce)
![ScreenShot 2024-03-04 at 15 56
21](https://github.com/gigs/gigs-embeds-js/assets/4227520/606c8666-3234-4d91-80c4-04a6e36f24f4)
![ScreenShot 2024-03-04 at 15 56
32](https://github.com/gigs/gigs-embeds-js/assets/4227520/06ceedc0-283b-4232-8cb3-896f7631109e)

resolves CONN-751

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,6 +1,18 @@
+import React from 'react'
 import type { Preview } from '@storybook/preact'
 
+import './styles.css'
+import '../lib/PortingEmbed/styles.css'
+
 const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <div className="GigsEmbeds-root">
+        {/* @ts-expect-error */}
+        {Story()}
+      </div>
+    ),
+  ],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {

.storybook/styles.css

@@ -0,0 +1,12 @@
+@import '../lib/styles/preflight.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.GigsEmbeds-root {
+  button[type='submit'] {
+    @apply mt-4;
+    @apply rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
+  }
+}

lib/PortingEmbed/PortingEmbed.tsx

@@ -24,7 +24,7 @@ export function PortingEmbed({
 }: PortingEmbedProps) {
   return (
     <OptionsContext.Provider value={options || {}}>
-      <div className="__ge_portingRoot">
+      <div className="__ge_portingRoot GigsEmbeds-root">
         <PortingForm
           porting={porting}
           onValidationChange={onValidationChange}

lib/PortingEmbed/StepDonorProviderApprovalForm.tsx

@@ -66,16 +66,18 @@ export function StepDonorProviderApprovalForm({
       >
         {(field, props) => (
           <EmbedField of={field}>
-            <EmbedFieldInput
-              {...props}
-              of={field}
-              type="checkbox"
-              checked={field.value}
-            />
-            <EmbedFieldLabel of={field}>
-              I have notified my current provider of the number porting and got
-              the approval that the number can be ported
-            </EmbedFieldLabel>
+            <div className="GigsEmbeds GigsPortingEmbed GigsEmbeds-checkbox">
+              <EmbedFieldInput
+                {...props}
+                of={field}
+                type="checkbox"
+                checked={field.value}
+              />
+              <EmbedFieldLabel of={field}>
+                I have notified my current provider of the number porting and
+                got the approval that the number can be ported
+              </EmbedFieldLabel>
+            </div>
             <EmbedFieldError of={field} />
           </EmbedField>
         )}

lib/index.ts

@@ -1,2 +1,4 @@
+import './styles/styles.css'
+
 export { WelcomeEmbed } from './WelcomeEmbed'
 export { PortingEmbed } from './PortingEmbed'