From a028991f39bfd95e652ded67476638c17030df9f Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Thu, 24 Oct 2019 13:00:33 -0400
Subject: [PATCH] DocBlocks: style section heading for slots/events/etc

---
 .../src/blocks/PropsTable/PropsTable.tsx      | 35 ++++++++++++-------
 .../src/blocks/PropsTable/SectionRow.tsx      | 17 ++++++---
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx
index 43ecb9de059..32612356ec1 100644
--- a/lib/components/src/blocks/PropsTable/PropsTable.tsx
+++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { styled } from '@storybook/theming';
-import { opacify, transparentize } from 'polished';
+import { opacify, transparentize, darken, lighten } from 'polished';
 import { PropRow, PropRowProps } from './PropRow';
 import { SectionRow, SectionRowProps } from './SectionRow';
 import { PropDef } from './PropDef';
@@ -78,19 +78,22 @@ export const Table = styled.table<{}>(({ theme }) => ({
     marginLeft: 1,
     marginRight: 1,
 
-    'tr:first-child td:first-child': {
-      borderTopLeftRadius: theme.appBorderRadius,
+    'tr:first-child': {
+      'td:first-child, th:first-child': {
+        borderTopLeftRadius: theme.appBorderRadius,
+      },
+      'td:last-child, th:last-child': {
+        borderTopRightRadius: theme.appBorderRadius,
+      },
     },
 
-    'tr:first-child td:last-child': {
-      borderTopRightRadius: theme.appBorderRadius,
-    },
-    'tr:last-child td:first-child': {
-      borderBottomLeftRadius: theme.appBorderRadius,
-    },
-
-    'tr:last-child td:last-child': {
-      borderBottomRightRadius: theme.appBorderRadius,
+    'tr:last-child': {
+      'td:first-child, th:first-child': {
+        borderBottomLeftRadius: theme.appBorderRadius,
+      },
+      'td:last-child, th:last-child': {
+        borderBottomRightRadius: theme.appBorderRadius,
+      },
     },
 
     tbody: {
@@ -105,8 +108,14 @@ export const Table = styled.table<{}>(({ theme }) => ({
 
       tr: {
         background: 'transparent',
+        overflow: 'hidden',
         '&:not(:first-child)': {
-          borderTop: `1px solid ${theme.appBorderColor}`,
+          borderTopWidth: 1,
+          borderTopStyle: 'solid',
+          borderTopColor:
+            theme.base === 'light'
+              ? darken(0.1, theme.background.content)
+              : lighten(0.05, theme.background.content),
         },
       },
 
diff --git a/lib/components/src/blocks/PropsTable/SectionRow.tsx b/lib/components/src/blocks/PropsTable/SectionRow.tsx
index 04a6b57f77e..e904be3568a 100644
--- a/lib/components/src/blocks/PropsTable/SectionRow.tsx
+++ b/lib/components/src/blocks/PropsTable/SectionRow.tsx
@@ -1,17 +1,26 @@
 import React, { FC } from 'react';
+import { transparentize } from 'polished';
 import { styled } from '@storybook/theming';
 
 export interface SectionRowProps {
   section: string;
 }
 
-const SectionTd = styled.td({
-  fontWeight: 'bold',
+const SectionTh = styled.th<SectionRowProps>(({ theme }) => ({
+  letterSpacing: '0.35em',
   textTransform: 'uppercase',
-});
+  fontWeight: theme.typography.weight.black,
+  fontSize: theme.typography.size.s1 - 1,
+  lineHeight: '24px',
+  color:
+    theme.base === 'light'
+      ? transparentize(0.4, theme.color.defaultText)
+      : transparentize(0.6, theme.color.defaultText),
+  background: `${theme.background.app} !important`,
+}));
 
 export const SectionRow: FC<SectionRowProps> = ({ section }) => (
   <tr>
-    <SectionTd colSpan={3}>{section}</SectionTd>
+    <SectionTh colSpan={3}>{section}</SectionTh>
   </tr>
 );