Feat/tet 304/storybook update

src/docs-components/ButtonDocs/ButtonDocs.tsx

@@ -32,7 +32,7 @@ export const ButtonDocs: FC = () => (
   <>
     {variants.map((variant) => (
       <tet.section key={variant} display="flex" pt="500" flexDirection="column">
-        <SectionHeader variant="Hero" as="h2">
+        <SectionHeader variant="Hero" as="h2" px="1000">
           {startCase(variant)}
         </SectionHeader>
         {getButtonAppearances(variant).map((appearance) => (

src/docs-components/CounterDocs.tsx

@@ -19,7 +19,7 @@ const appearances = [
 export const CounterDocs = () => (
   <>
     {emphases.map((emphasis) => (
-      <tet.section key={emphasis} py="500">
+      <tet.section key={emphasis} py="500" px="1000">
         <SectionHeader variant="H1" as="h2">
           {capitalize(emphasis)} Emphasis
           <tet.div py="500">

src/docs-components/InlineMessageDocs.tsx

@@ -11,13 +11,13 @@ const intents = ['informative', 'success', 'warning', 'negative'] as const;
 export const InlineMessageDocs = () => (
   <>
     {intents.map((intent) => (
-      <tet.section key={intent}>
-        <SectionHeader variant="H1" as="h2">
+      <tet.section key={intent} px="1000" py="500">
+        <SectionHeader variant="H1" as="h2" py="500">
           Intent: {capitalize(intent)}
         </SectionHeader>
         <Cols>
           <tet.div>
-            <SectionHeader variant="H2" as="h3">
+            <SectionHeader variant="H2" as="h3" py="500">
               Description: Yes
             </SectionHeader>
             <InlineMessage
@@ -27,7 +27,7 @@ export const InlineMessageDocs = () => (
             />
           </tet.div>
           <tet.div>
-            <SectionHeader variant="H2" as="h3">
+            <SectionHeader variant="H2" as="h3" py="500">
               Description: No
             </SectionHeader>
             <InlineMessage intent={intent} title="Title" />