Update AccountConnection (Shopify#9400)

### WHY are these changes introduced?

Resolves
[Shopify#117](https://github.com/Shopify/polaris-summer-editions/issues/117).

### WHAT is this pull request doing?

Updates style for AccountConnection.

[Figma](https://www.figma.com/file/jLLkmo9r28hiqPvf4s90E4/Polaris-Uplift-Components-%5Bgen3%E2%80%93alpha%5D?type=design&node-id=26497%3A388&t=kkBificuKnaHXa5f-1)
    <details>
      <summary>AccountConnection — default screen size</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/a5e37730-5101-484c-b5b4-d61ed4ce4845"
alt="AccountConnection — default screen size">
    </details>
    <details>
      <summary>AccountConnection — sm breakpoint</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/f7987976-aca7-48b2-964e-019f1d936447"
alt="AccountConnection — sm breakpoint">
    </details>

### How to 🎩

[AccountConnection mega
story](https://5d559397bae39100201eedc1-sndslorqkw.chromatic.com/?path=/story/all-components-accountconnection--all)

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx

@@ -1,24 +1,60 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AccountConnection, Link} from '@shopify/polaris';
+import {
+  AccountConnection,
+  Box,
+  Link,
+  Text,
+  VerticalStack,
+} from '@shopify/polaris';
+
+import {useFeatures} from '../../utilities/features';
 
 export default {
   component: AccountConnection,
 } as ComponentMeta<typeof AccountConnection>;
 
+export function All() {
+  return (
+    <>
+      <VerticalStack gap="4">
+        <Text as="h2" variant="headingXl">
+          Default
+        </Text>
+        <Default />
+        <Box paddingBlockEnd="3" />
+      </VerticalStack>
+      <VerticalStack gap="4">
+        <Text as="h2" variant="headingXl">
+          With account connected
+        </Text>
+        <WithAccountConnected />
+        <Box paddingBlockEnd="3" />
+      </VerticalStack>
+    </>
+  );
+}
+
 export function Default() {
   const [connected, setConnected] = useState(false);
-  const accountName = connected ? 'Jane Appleseed' : '';
+  const accountName = connected ? 'Olive Eight' : '';
 
   const handleAction = useCallback(() => {
     setConnected((connected) => !connected);
   }, []);
 
+  const {polarisSummerEditions2023} = useFeatures();
+
   const buttonText = connected ? 'Disconnect' : 'Connect';
   const details = connected ? 'Account connected' : 'No account connected';
+  const connectText = polarisSummerEditions2023 ? (
+    'Connect'
+  ) : (
+    <strong>Connect</strong>
+  );
   const terms = connected ? null : (
     <p>
-      By clicking <strong>Connect</strong>, you agree to accept Sample App’s{' '}
+      By clicking {connectText}, you agree to accept Sample App’s{' '}
       <Link url="Example App">terms and conditions</Link>. You’ll pay a
       commission rate of 15% on sales made through Sample App.
     </p>
@@ -38,3 +74,28 @@ export function Default() {
     />
   );
 }
+
+export function WithAccountConnected() {
+  const [connected, setConnected] = useState(true);
+  const accountName = connected ? 'Olive Eight' : '';
+
+  const handleAction = useCallback(() => {
+    setConnected((connected) => !connected);
+  }, []);
+
+  const buttonText = connected ? 'Disconnect' : 'Connect';
+  const details = connected ? 'Account connected' : 'No account connected';
+
+  return (
+    <AccountConnection
+      accountName={accountName}
+      connected={connected}
+      title="Example App"
+      action={{
+        content: buttonText,
+        onAction: handleAction,
+      }}
+      details={details}
+    />
+  );
+}

polaris-react/src/components/AccountConnection/AccountConnection.tsx

@@ -9,6 +9,8 @@ import {Box} from '../Box';
 import {HorizontalStack} from '../HorizontalStack';
 import {Text} from '../Text';
 import {VerticalStack} from '../VerticalStack';
+import {useFeatures} from '../../utilities/features';
+import {useBreakpoints} from '../../utilities/breakpoints';
 
 export interface AccountConnectionProps {
   /** Content to display as title */
@@ -36,6 +38,9 @@ export function AccountConnection({
   details,
   termsOfService,
 }: AccountConnectionProps) {
+  const {polarisSummerEditions2023} = useFeatures();
+  const breakpoints = useBreakpoints();
+
   const initials = accountName
     ? accountName
         .split(/\s+/)
@@ -52,7 +57,15 @@ export function AccountConnection({
     />
   ) : null;
 
-  const titleMarkup = title ? title : accountName;
+  const titleContent = title ? title : accountName;
+
+  const titleMarkup = polarisSummerEditions2023 ? (
+    <Text as="h2" variant="headingSm">
+      {titleContent}
+    </Text>
+  ) : (
+    titleContent
+  );
 
   const detailsMarkup = details ? (
     <Text as="span" color="subdued">
@@ -61,7 +74,13 @@ export function AccountConnection({
   ) : null;
 
   const termsOfServiceMarkup = termsOfService ? (
-    <Box paddingBlockStart="5">{termsOfService}</Box>
+    <Box
+      paddingBlockStart={
+        polarisSummerEditions2023 && breakpoints.mdUp ? '4' : '5'
+      }
+    >
+      {termsOfService}
+    </Box>
   ) : null;
 
   const actionElement = action
@@ -73,7 +92,7 @@ export function AccountConnection({
       <SettingAction action={actionElement}>
         <HorizontalStack gap="4">
           {avatarMarkup}
-          <VerticalStack gap="2">
+          <VerticalStack gap={polarisSummerEditions2023 ? '1' : '2'}>
             {titleMarkup}
             {detailsMarkup}
           </VerticalStack>

polaris-react/src/components/SettingAction/SettingAction.scss

@@ -1,3 +1,5 @@
+@import '../../styles/common';
+
 $feature-width: 350px;
 
 .SettingAction {
@@ -20,3 +22,11 @@ $feature-width: 350px;
 .Setting {
   flex: 1 0 $feature-width;
 }
+
+.Action {
+  #{$se23} & {
+    @media #{$p-breakpoints-md-up} {
+      margin-top: var(--p-space-6);
+    }
+  }
+}