docs(Slots): Clearly identify Slots in DocSite

CHANGELOG.md

@@ -33,6 +33,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Highlight options by character keys in `Dropdown` non-search versions @silviuavram ([#1270](https://github.com/stardust-ui/react/pull/1270))
 - Aligned link styles for `Chat.Message` component with latest Teams theme design @Bugaa92 ([#1269](https://github.com/stardust-ui/react/pull/1269))
 
+### Documentation
+- Clearly identify Slots in DocSite @hughreeling ([#1292](https://github.com/stardust-ui/react/pull/1292))
+
 <!--------------------------------[ v0.30.0 ]------------------------------- -->
 ## [v0.30.0](https://github.com/stardust-ui/react/tree/v0.30.0) (2019-05-10)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.29.1...v0.30.0)

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -2,7 +2,7 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { withRouter } from 'react-router'
-import { Flex, Header, Icon, Dropdown, Text, Grid } from '@stardust-ui/react'
+import { Flex, Header, Icon, Dropdown, Text, Grid, Divider } from '@stardust-ui/react'
 
 import componentInfoShape from 'docs/src/utils/componentInfoShape'
 import { scrollToAnchor, examplePathToHash, getFormattedHash } from 'docs/src/utils'
@@ -133,7 +133,7 @@ class ComponentDoc extends React.Component<any, any> {
               />
               <ComponentAccessibility info={info} />
               <ComponentDocSee displayName={info.displayName} />
-
+              <Divider />
               <ComponentProps displayName={info.displayName} props={info.props} />
             </>
           </Flex.Item>

docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as _ from 'lodash'
-import { Header, Flex, Text } from '@stardust-ui/react'
+import { Flex, Text, Accordion } from '@stardust-ui/react'
 
 const behaviorMenu = require('docs/src/behaviorMenu')
 
@@ -17,38 +17,45 @@ const ComponentDocAccessibility = ({ info }) => {
 
   if (!behaviorName && !description) return null
 
+  const accessibilityDetails = (
+    <>
+      {description && <Text style={{ whiteSpace: 'pre-line' }}>{description}</Text>}
+
+      {behaviorName && (
+        <Text>
+          Default behavior:{' '}
+          <a href={`behaviors/${behaviorName}#${_.kebabCase(stem)}`}>{behaviorName}</a>
+        </Text>
+      )}
+
+      {info.behaviors && (
+        <Text>
+          Available behaviors:{' '}
+          {info.behaviors.map(behavior => (
+            <React.Fragment key={`${behavior.category}-${behavior.name}`}>
+              <a href={`behaviors/${behavior.category}#${_.kebabCase(behavior.name)}`}>
+                {behavior.displayName}
+              </a>{' '}
+            </React.Fragment>
+          ))}
+        </Text>
+      )}
+    </>
+  )
+
+  const accessPanels = [
+    {
+      key: 'accessibility',
+      content: { content: accessibilityDetails },
+      title: { content: 'Accessibility', as: 'h2' },
+    },
+  ]
+
   return (
     <Flex column>
       <Flex.Item>
         <>
-          <Header
-            as="h2"
-            className="no-anchor"
-            content="Accessibility"
-            variables={{ color: 'black' }}
-          />
-
-          {description && <Text style={{ whiteSpace: 'pre-line' }}>{description}</Text>}
-
-          {behaviorName && (
-            <Text>
-              Default behavior:{' '}
-              <a href={`behaviors/${behaviorName}#${_.kebabCase(stem)}`}>{behaviorName}</a>
-            </Text>
-          )}
-
-          {info.behaviors && (
-            <Text>
-              Available behaviors:{' '}
-              {info.behaviors.map(behavior => (
-                <React.Fragment key={`${behavior.category}-${behavior.name}`}>
-                  <a href={`behaviors/${behavior.category}#${_.kebabCase(behavior.name)}`}>
-                    {behavior.displayName}
-                  </a>{' '}
-                </React.Fragment>
-              ))}
-            </Text>
-          )}
+          <Accordion panels={accessPanels} />
         </>
       </Flex.Item>
     </Flex>

docs/src/components/ComponentDoc/ComponentProp/ComponentPropName.tsx

@@ -6,10 +6,15 @@ export default class ComponentPropName extends React.PureComponent<any, any> {
   static propTypes = {
     name: PropTypes.string,
     required: PropTypes.bool,
+    slot: PropTypes.bool,
   }
 
   render() {
-    const { name, required } = this.props
+    const { name, required, slot } = this.props
+    const slotStyle: React.CSSProperties = {
+      color: 'blue',
+      fontWeight: 'bold',
+    }
 
     return (
       <div>
@@ -22,6 +27,14 @@ export default class ComponentPropName extends React.PureComponent<any, any> {
             trigger={<Icon styles={{ color: 'red' }} name="asterisk" size="small" />}
           />
         )}
+        {slot && (
+          <Popup
+            content="Slot - see Shorthand Props page for details."
+            align="center"
+            styles={{ fontSize: 'x-small' }}
+            trigger={<span style={slotStyle}>&nbsp;S&nbsp;</span>}
+          />
+        )}
       </div>
     )
   }

docs/src/components/ComponentDoc/ComponentProps/ComponentProps.tsx

@@ -52,7 +52,7 @@ export default class ComponentProps extends React.Component<any, any> {
     const description = _.get(docblock, 'description', [])
 
     return (
-      <Flex column>
+      <Flex column gap="gap.small">
         <Flex.Item styles={{ display: 'block', verticalAlign: 'middle' }}>
           <Flex>
             {/* Should be toggle component - need to associate text with checkbox.   */}
@@ -64,7 +64,7 @@ export default class ComponentProps extends React.Component<any, any> {
                   onClick={this.handleToggle}
                   inline
                 />
-                <Text content="Props" styles={{ marginBottom: '0' }} />
+                <Text content="&nbsp;Props&nbsp;" styles={{ marginBottom: '0' }} />
               </>
             </Flex.Item>
             <Flex.Item>

docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsRow.tsx

@@ -24,6 +24,7 @@ export default class ComponentPropsRow extends React.Component<any, any> {
   render() {
     const { defaultValue, description, name, required, tags, type } = this.props
     const hideRow = this.docSiteHidden(tags)
+    const slot = this.isSlotProp(type, tags)
     const rowStyle: React.CSSProperties = {
       borderTopWidth: '1px',
       borderTopStyle: 'solid',
@@ -34,7 +35,7 @@ export default class ComponentPropsRow extends React.Component<any, any> {
     return (
       <tr className={hideRow ? 'hidden' : ''} style={rowStyle}>
         <td>
-          <ComponentPropName name={name} required={required} />
+          <ComponentPropName name={name} required={required} slot={slot} />
         </td>
         <td>
           <ComponentPropDefaultValue value={defaultValue} />
@@ -58,4 +59,10 @@ export default class ComponentPropsRow extends React.Component<any, any> {
   docSiteHidden(tags) {
     return _.some(tags, ['title', 'docSiteIgnore'])
   }
+  isSlotProp(type: string, tags): boolean {
+    if (type.startsWith('ShorthandValue') || type.startsWith('ShorthandCollection')) {
+      return true
+    }
+    return _.some(tags, ['title', 'slot'])
+  }
 }

packages/react/src/components/Button/Button.tsx

@@ -40,7 +40,9 @@ export interface ButtonProps
   /** A button can take the width of its container. */
   fluid?: boolean
 
-  /** Button can have an icon. */
+  /** Button can have an icon.
+   * @slot
+   */
   icon?: ShorthandValue
 
   /** A button may indicate that it has only icon. */

packages/react/src/components/Dialog/Dialog.tsx

@@ -91,6 +91,9 @@ export interface DialogState {
   open?: boolean
 }
 
+/**
+ * A Dialog informs users about specific tasks or may contain critical information, require decisions, or involve multiple interactions.
+ */
 class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogState> {
   static displayName = 'Dialog'
   static className = 'ui-dialog'

packages/react/src/components/Loader/Loader.tsx

@@ -56,6 +56,9 @@ export interface LoaderState {
   visible: boolean
 }
 
+/**
+ * A loader alerts a user that content is being loaded or processed and they should wait for the activity to complete.
+ */
 class Loader extends UIComponent<WithAsProp<LoaderProps>, LoaderState> {
   static create: Function
   static displayName = 'Loader'