[Layout foundations] Add POC for AlphaCard migration

[laurkim]

WHY are these changes introduced?

⛔️ DO NOT MERGE ⛔️
Resolves #7409.

A POC for a migration to:

• replace Card with AlphaCard
• update imports
• remove title and sectioned props from Card
• replace logic behind title and sectioned props with new layout primitives

WHAT is this pull request doing?

Creates a new replace-card-component script with tests.
The script is run in two test cases:

1. File with Card imported from @shopify/polaris — Banner.stories.tsx
2. File with Card imported from components — AccountConnection.tsx

Note: in the before and after pictures, there is extra padding inside the Banner -> In a Card story because the incorrect classname is being applied. This logic lives inside Banner and would need to be updated there.

Banner in a card — before migration

Banner in a card — after migration

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	209.21 KB (-0.01% 🔽)
polaris-react-esm	135.69 KB (+0.01% 🔺)
polaris-react-esnext	191.14 KB (+0.03% 🔺)
polaris-react-css	41.64 KB (+0.18% 🔺)

[laurkim]

Closing this as it was just a POC and we'll soon have the ability to use a relative flag on the migations platform to update components that are imported locally. I'll create a new PR once that logic is shipped to main and import utils are updated.