Hero component updates (#27)

* changes to Hero

* add changeset

Author: rezrah

.changeset/wild-meals-give.md

@@ -0,0 +1,9 @@
+---
+'@primer/react-brand': patch
+---
+
+Updated Hero text appearance
+
+- **updated** Hero description text size from `500` to `400`
+- **updated** button alignment to not stretch on mobile viewports
+- **removed** `size` prop. Now only one responsive size available.

docs/content/components/Hero.mdx

@@ -29,23 +29,6 @@ import {Hero} from '@primer/react-brand'
 />
 ```
 
-### Size variants
-
-`Hero` supports an optional `small` size variant.
-
-```jsx live
-<Hero
-  heading="This is my super sweet hero heading"
-  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum."
-  primaryAction={{
-    text: 'Primary action',
-    href: '#',
-  }}
-  align="center"
-  size="small"
-/>
-```
-
 ### Alignment
 
 `Hero` text alignment can be adjusted by changing the `align` prop.

src/Hero/Hero.module.css

@@ -28,7 +28,7 @@
   margin-top: 2rem;
   display: flex;
   flex-direction: column;
-  align-items: stretch;
+  align-items: center;
   width: 100%;
 }
 

src/Hero/Hero.tsx

@@ -17,25 +17,16 @@ export type HeroProps = {
   primaryAction: Action
   secondaryAction?: Action
   align?: 'start' | 'center'
-  size?: 'small' | 'large'
 }
 
-export function Hero({
-  className,
-  heading,
-  description,
-  primaryAction,
-  secondaryAction,
-  align = 'start',
-  size = 'large'
-}: HeroProps) {
+export function Hero({className, heading, description, primaryAction, secondaryAction, align = 'start'}: HeroProps) {
   return (
-    <div className={clsx(styles.Hero, styles[`Hero--align-${align}`], styles[`Hero--size-${size}`], className)}>
-      <Heading className={styles['Hero-heading']} as={size === 'large' ? 'h1' : 'h2'}>
+    <div className={clsx(styles.Hero, styles[`Hero--align-${align}`], className)}>
+      <Heading className={styles['Hero-heading']} as="h1">
         {heading}
       </Heading>
       {description ? (
-        <Text className={styles['Hero-description']} as="p" size="500" variant="muted">
+        <Text className={styles['Hero-description']} as="p" size="400" variant="muted">
           {description}
         </Text>
       ) : null}