Merge pull request #909 from buildo/disclosure-title-spacing-in-config

[Disclosure] Add title spacing config

Author: veej

packages/bento-design-system/src/Disclosure/Config.ts

@@ -5,6 +5,7 @@ import { Children } from "../util/Children";
 import { DisclosureProps } from "./Disclosure";
 
 export type DisclosureConfig = {
+  titleSpacing: BentoSprinkles["gap"];
   internalSpacing: BentoSprinkles["gap"];
   titleSize: {
     1: TitleProps["size"];

packages/bento-design-system/src/Disclosure/Disclosure.tsx

@@ -46,7 +46,7 @@ export function Disclosure({
   const icon = open ? config.icons.open : config.icons.closed;
 
   return (
-    <Stack space={16}>
+    <Stack space={config.titleSpacing}>
       <Box
         {...focusProps}
         {...pressProps}

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -186,6 +186,7 @@ export const decorativeDivider: DecorativeDividerConfig = {
 };
 
 export const disclosure: DisclosureConfig = {
+  titleSpacing: 16,
   internalSpacing: 16,
   titleSize: {
     1: "medium",

packages/bento-design-system/stories/Utils/withBentoConfig.stories.tsx

@@ -1,4 +1,10 @@
-import { DesignSystemProvider, Modal as BentoModal, withBentoConfig } from "..";
+import {
+  DesignSystemProvider,
+  Modal as BentoModal,
+  withBentoConfig,
+  Disclosure as BentoDisclosure,
+  Placeholder,
+} from "..";
 import { action } from "@storybook/addon-actions";
 import { defaultMessages } from "../../src/defaultMessages/en";
 
@@ -45,3 +51,20 @@ export const ConfiguredModal = () => {
     </DesignSystemProvider>
   );
 };
+
+export const ConfiguredDisclosure = () => {
+  const Disclosure = withBentoConfig(
+    {
+      disclosure: {
+        titleSpacing: 0,
+      },
+    },
+    BentoDisclosure
+  );
+
+  return (
+    <Disclosure title="Title" initialIsOpen>
+      <Placeholder />
+    </Disclosure>
+  );
+};