fix(card): change padding to horizontal-4 and vertical-5

- enable sizings 1-8 in Box component

src/components/Box/Box.jsx

@@ -70,15 +70,15 @@ Box.propTypes = {
   /**
    * Sets a `padding-top` and `padding-bottom`.
    */
-  vertical: PropTypes.oneOf([1, 2, 3, 4, 6]),
+  vertical: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
   /**
    * Sets a `padding-left` and `padding-right`.
    */
-  horizontal: PropTypes.oneOf([1, 2, 3, 4, 6]),
+  horizontal: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
   /**
    * Sets `padding` on all four sides.
    */
-  inset: PropTypes.oneOf([1, 2, 3, 4, 6]),
+  inset: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
   /**
    * @ignore
    *

src/components/Box/Box.md

@@ -27,7 +27,7 @@ The Box component contains props that accept values from `1` to `8`. These numbe
 
 - Numbers `1` to `3` are suitable for spacing inline content such as [Typography](#typography), [Button](#button), and [ButtonLink](#buttonlink) components
 - Numbers `4` to `8` are suitable for spacing major types of content such as [Cards](#card) and [Dividers](#dividers)
-- Numbers `5`, `7`, and `8` are exclusively used to separating blocks vertically
+- Numbers `5`, `7`, and `8` are used to space blocks vertically
 
 ### Example separating blocks
 

src/components/Card/Card.jsx

@@ -12,7 +12,7 @@ import styles from './Card.modules.scss'
  * <span class="docs--badge__updated">updated!</span> <span class="docs--badge__version">v0.26.0</span>
  */
 const Card = ({ variant, children, ...rest }) => (
-  <Box {...safeRest(rest)} inset={4} dangerouslyAddClassName={styles[variant]}>
+  <Box {...safeRest(rest)} horizontal={4} vertical={5} dangerouslyAddClassName={styles[variant]}>
     {children}
   </Box>
 )

src/components/Card/Card.md

@@ -2,7 +2,7 @@ Cards will stretch to fill their container. Wrap the card in another element to
 
 ```jsx
 <Card>
-  <Box between={3}>
+  <Box between={3} dangerouslyAddClassName="docs_flex-button">
     <Heading level="h2">Need a hand?</Heading>
 
     <Paragraph>
@@ -21,15 +21,15 @@ Card also supports a 'grey' or 'lavender' `variant`. These appear flat, while th
 ```jsx
 <Box inline between={3}>
   <Card variant="lavender">
-    <Box between={3}>
+    <Box between={3} dangerouslyAddClassName="docs_flex-button">
       <Heading level="h4">Holiday deal</Heading>
       
       <Paragraph size="medium">Get a new smartphone for $0<br/>on a 2-year plan.</Paragraph>
     </Box>
   </Card>
   
   <Card variant="grey">
-    <Box between={3}>
+    <Box between={3} dangerouslyAddClassName="docs_flex-button">
       <Heading level="h4">Find the right gift</Heading>
     
       <Paragraph>Find something they'll love from our<br/>selection of great devices.</Paragraph>

src/components/Card/__tests__/__snapshots__/Card.spec.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<Card /> renders 1`] = `
 <div
-  class="horizontalPadding-4 verticalPadding-4 white"
+  class="horizontalPadding-4 verticalPadding-5 white"
 >
   Children
 </div>