Apply opinionated defaults to LogoSuite (#691)

* add default variant to LogoSuite

* reduce LogoSuite size on mobile viewports

* update LogoSuite stories

* document LogoSuite changes

* add changeset

* update snapshots

* github-actions[bot] Regenerated snapshots

* update snapshots

* update logosuite tokens

* update logosuite tokens

* remove unnecessary css

* snapshots

* nuke snapshots

* re-add snapshots

* remove LogoSuite default variant

* update changeset

* update docs

* update docs

* update docs default example

* snapshots

* add test for auto variant behaviour

* update changeset

---------

Co-authored-by: joshfarrant <[email protected]>

Author: joshfarrant

.changeset/silent-scissors-suffer.md

@@ -0,0 +1,10 @@
+---
+'@primer/brand-primitives': minor
+'@primer/react-brand': minor
+---
+
+> **Warning**
+> This update contains a breaking visual change to the `LogoSuite` component. `LogoSuite` components without a specified `variant` prop will now automatically apply either `emphasis` or `muted` styles depending on the number of logos in the `LogoBar`.
+
+- Added new default behaviour to the `variant` prop of the `LogoSuite` component. If `variant` is `undefined` then either `emphasis` or `muted` styles are automatically applied depending on the number of logos in the `LogoBar`. Five or fewer logos apply the `emphasis` style, while six or more use the `muted` style.
+- Reduced `LogoSuite` size on mobile viewports.

apps/docs/content/components/LogoSuite/index.mdx

@@ -3,7 +3,6 @@ title: Logo suite
 description: Use a logo suite to present a list logos, such as sponsors or vendors.
 ---
 
-import CustomVideoPlayer from '../../../src/components/custom-video-player'
 import ComponentLayout from '../../../src/layouts/component-layout'
 export default ComponentLayout
 
@@ -22,7 +21,7 @@ Use the logo suite component to showcase a list of logos, such as for clients, s
 
 A logo suite is intended to build credibility, trust, and provide social proof by displaying consistent logos.
 
-Logo suite should be used for groups of logos more than 4 and less than 12. In scenarios hoping to showcase more than 12 logos, considering stacking two components together. To create the best visual consistency and balance, rearrange and resize the logos when necessary to create similar area distribution and attention to each of the logos.
+Logo suite should be used for groups of logos more than 4 and less than 12. To create the best visual consistency and balance, rearrange and resize the logos when necessary to create similar area distribution and attention to each of the logos.
 
 ### Arrangement
 
@@ -50,31 +49,6 @@ Logo suite should be used for groups of logos more than 4 and less than 12. In s
   </Dont>
 </DoDontContainer>
 
-### Contextual information
-
-<DoDontContainer stacked>
-  <Do>
-    <img
-      src="https://github.com/primer/brand/assets/131988618/79680b75-9e3b-4eb1-9371-2d8ee45a6dc1"
-      alt=""
-    />
-    <Caption>
-      Do publish the logo suite with context. Introduce the logos and, when
-      applicable, share how the logos have been grouped together.
-    </Caption>
-  </Do>
-  <Dont>
-    <img
-      src="https://github.com/primer/brand/assets/131988618/5ab14ace-9c9e-425f-8b5c-73de82340733"
-      alt=""
-    />
-    <Caption>
-      Don’t use the logo suite without a heading/description. Consider turning
-      off a visible description if needed.
-    </Caption>
-  </Dont>
-</DoDontContainer>
-
 ### Color uniformity
 
 <DoDontContainer stacked>
@@ -107,9 +81,11 @@ Logo suite should be used for groups of logos more than 4 and less than 12. In s
 The logo suite offers three appearance options:
 
 - `muted`: The muted option is suitable for displaying 6+ logos and displays logos in a `secondary` color. It allows for two rows of logos, maintaining a clean and organized appearance.
-- `emphasis`: The emphasis option is designed for spotlighting ~5 logos in the `primary` color. It displays logos larger, drawing more attention to the logos.
+- `emphasis`: The emphasis option is designed for spotlighting 5 or fewer logos in the `primary` color. It displays logos larger, drawing more attention to the logos.
 - `marquee`: The marquee option provides a flowing logo animation and can accommodate up to 12 logos. It is ideal for scenarios with limited page real estate.
 
+The `muted` and `emphasis` variants will automatically be applied if they are not specified. The `muted` variant will be applied if there are 6 or more logos, and the `emphasis` variant will be applied if there are 5 or fewer logos.
+
 All three options on the logo bar contains an optional divider. This divider can serve as a visual separator. These three options can be used adjacently.
 
 <div>
@@ -118,8 +94,8 @@ All three options on the logo bar contains an optional divider. This divider can
     alt=""
   />
   <Caption>
-    Use the default muted option when displaying 6-12 logos across two rows. 2
-    rows (when using 6-12 logos).
+    Use the muted option when displaying 6-12 logos across two rows. 2 rows
+    (when using 6-12 logos).
   </Caption>
 </div>
 
@@ -129,8 +105,8 @@ All three options on the logo bar contains an optional divider. This divider can
     alt=""
   />
   <Caption>
-    The emphasis option can be used to spotlight logos. It is best used with 6
-    or less logos to create 1 row.
+    The emphasis option can be used to spotlight logos. It is best used with 5
+    or fewer logos to create 1 row.
   </Caption>
 </div>