components: use Text in Collapsible (codesandbox#3291)

siddharthkp · SaraVieira · commit 0f0cda033e2f · 2020-01-08T13:27:36.000Z
* use text inside collapsible

* use size instead of absolute ✨

* prefer element method
diff --git a/packages/components/src/components/Collapsible/index.stories.tsx b/packages/components/src/components/Collapsible/index.stories.tsx
@@ -1,24 +1,31 @@
 import React from 'react';
 import { Collapsible } from '.';
+import { Text } from '../Text';
+import { Element } from '../Element';
 
 export default {
   title: 'components/Collapsible',
   component: Collapsible,
 };
 
-// replace the text inside with Text variants when available
 export const Basic = () => (
-  <Collapsible title="Files">
-    The move from Cerebral
-    <br />
-    This is a static template with no bundling
+  <Collapsible title="Sandbox Info">
+    <Element marginX={2}>
+      <Text weight="medium" marginBottom={2}>
+        The move from Cerebral
+      </Text>
+      <Text variant="muted">This is a static template with no bundling</Text>
+    </Element>
   </Collapsible>
 );
 
 export const DefaultOpen = () => (
-  <Collapsible title="Files" defaultOpen>
-    The move from Cerebral
-    <br />
-    This is a static template with no bundling
+  <Collapsible title="Sandbox Info" defaultOpen>
+    <Element marginX={2}>
+      <Text as="div" weight="medium" marginBottom={2}>
+        The move from Cerebral
+      </Text>
+      <Text variant="muted">This is a static template with no bundling</Text>
+    </Element>
   </Collapsible>
 );
diff --git a/packages/components/src/components/Collapsible/index.tsx b/packages/components/src/components/Collapsible/index.tsx
@@ -2,12 +2,19 @@ import React from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
 import { Element } from '../Element';
+import { Text } from '../Text';
+
+export const Section = styled(Element).attrs({ as: 'section' })(
+  css({
+    fontSize: 3,
+  })
+);
 
 export const Header = styled.div(
   css({
     display: 'flex',
     alignItems: 'center',
-    height: '32px',
+    height: 6,
     paddingX: 3,
     borderBottom: '1px solid',
     // Note: sideBarSectionHeader exists but we dont use it because it is rarely implemented
@@ -24,14 +31,6 @@ export const Header = styled.div(
   })
 );
 
-// temporary: replace with <Text variant="strong">
-export const Title = styled.div(
-  css({
-    fontSize: 3,
-    fontWeight: 'semibold',
-  })
-);
-
 // temporary: replace with <Icon name="triangle/toggle">
 export const Icon = styled.svg<{
   open?: boolean;
@@ -82,12 +81,12 @@ export const Collapsible: React.FC<ICollapsibleProps> = ({
   const toggle = () => setOpen(!open);
 
   return (
-    <Element as="section" {...props}>
+    <Section {...props}>
       <Header onClick={toggle}>
         <ToggleIcon open={open} />
-        <Title>{title}</Title>
+        <Text weight="medium">{title}</Text>
       </Header>
       {open ? <Body>{children}</Body> : null}
-    </Element>
+    </Section>
   );
 };
