feat(Box): gap, row-gap, column-gap Box support (#857)

* gap prop

* Update cssShorthandToClasses.test.ts

* Update Box.test.jsx

* replace childGap with gap wip

* update other components

* add gap visual regression tests

* update p-d-t

package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@palmetto/dialog": "^0.16.4",
-    "@palmetto/palmetto-design-tokens": "0.76.0",
+    "@palmetto/palmetto-design-tokens": "0.77.0",
     "@popperjs/core": "^2.5.3",
     "caniuse-lite": "^1.0.30001523",
     "classnames": "^2.2.6",
@@ -121,7 +121,7 @@
     "babel-loader": "^8.1.0",
     "babel-plugin-typescript-to-proptypes": "^1.4.0",
     "babel-preset-react-app": "^9.1.2",
-    "chromatic": "^6.0.5",
+    "chromatic": "^10.2.0",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^3.6.0",

src/components/Accordion/Accordion.Codesandbox.stories.mdx

@@ -42,7 +42,7 @@ export default () => {
         >
           What is solar energy? How do solar panels work?
         </Accordion.PanelSummary>
-        <Accordion.PanelDetails childGap="md">
+        <Accordion.PanelDetails gap="md">
           <p>
             Solar panels, also called photovoltaic or PV panels, consist of solar cells that are
             designed to capture the radiant light and heat contained in sunlight and convert it

src/components/Accordion/Accordion.Overview.stories.mdx

@@ -50,7 +50,7 @@ Accordions are useful when you want to toggle between hiding and showing additio
             >
               What is solar energy? How do solar panels work?
             </Accordion.PanelSummary>
-            <Accordion.PanelDetails childGap="md">
+            <Accordion.PanelDetails gap="md">
               <p>
                 Solar panels, also called photovoltaic or PV panels, consist of solar cells that are
                 designed to capture the radiant light and heat contained in sunlight and convert it

src/components/Accordion/AccordionPanelSummary.tsx

@@ -17,7 +17,7 @@ export const AccordionPanelSummary: React.FC<AccordionPanelSummaryProps> = ({
   ...restProps
 }) => (
   <DetailsSummary
-    childGap="sm"
+    gap="sm"
     display="flex"
     direction="row"
     fontWeight={fontWeight}

src/components/Alert/Alert.tsx

@@ -110,7 +110,7 @@ export const Alert: FC<AlertProps> = ({
   return (
     <Box
       alignItems="flex-start"
-      childGap="sm"
+      gap="sm"
       className={alertContainerClasses}
       direction="row"
       padding={isCompact ? 'xs' : 'md'}

src/components/Badge/Badge.Overview.stories.mdx

@@ -45,7 +45,7 @@ Badges come in different variants based on the kind of message being delivered t
         'danger',
       ];
       return (
-        <Box direction="row" childGap="sm">
+        <Box direction="row" gap="sm">
           {variants.map(variant => (
             <Badge message={variant} variant={variant} key={variant} />
           ))}
@@ -65,7 +65,7 @@ so the badge can be a different size per breakpoint.
     {() => {
       return (
         <>
-          <Box direction="column" alignItems="flex-start" childGap="md">
+          <Box direction="column" alignItems="flex-start" gap="md">
             <Badge size="sm" message="Small" />
             <Badge size="md" message="Medium" />
             <Badge size="lg" message="Large" />

src/components/Badge/Badge.VisualTests.stories.tsx

@@ -15,10 +15,10 @@ export default {
 } as Meta;
 
 const Template: Story<BadgeProps> = args => (
-  <Box childGap="xl">
+  <Box gap="xl">
     {BADGE_SIZES.map(size => (
-      <Box childGap="sm" key={size}>
-        <Box childGap="sm" direction="row">
+      <Box gap="sm" key={size}>
+        <Box gap="sm" direction="row">
           {BADGE_VARIANTS.map(variant => (
             <Badge
               {...args}

src/components/Box/Box.Codesandbox.stories.mdx

@@ -8,15 +8,15 @@ A `<Box>` is a layout component to build UIs with consistent padding and spacing
 
 - Its content is arranged in a specified `direction`, with 'column' being the default
 - Renders a `<div />` element by default, but can be changed using `as`
-- Allows you to specify the spacing between child elements using `childGap`
+- Allows you to specify the spacing between child elements using `gap`
 - Many props accept `ResponsiveProp` that take an object with keys that correspond to <a href="?path=/story/design-tokens-design-tokens--page#breakpoints">breakpoint tokens</a>
 
 ```js codesandbox=palmetto-components
 import React from 'react';
 import { Box } from '@palmetto/palmetto-components';
 
 export default () => (
-  <Box childGap="md">
+  <Box gap="md">
     <Box
       padding="xl"
       background="primary-100"
@@ -27,7 +27,7 @@ export default () => (
     >
       I am a box with a green background and border
     </Box>
-    <Box childGap={{ base: 'sm', tablet: 'md', desktop: 'lg' }} direction="row">
+    <Box gap={{ base: 'sm', tablet: 'md', desktop: 'lg' }} direction="row">
       <Box flex="auto" radius="md" background="secondary-100" height="lg" />
       <Box flex="auto" radius="md" background="secondary-100" height="lg" />
       <Box flex="auto" radius="md" background="secondary-100" height="lg" />