docs: Removing Semantic UI from Stardust- DocSite

docs/src/app.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import * as _ from 'lodash'
 import { Provider, themes } from '@stardust-ui/react'
 
 import { mergeThemes } from 'src/lib'
@@ -7,7 +8,7 @@ import Router from './routes'
 
 interface AppState {
   themeName: string
-  changeTheme: (newTheme: string) => void
+  changeTheme: (event, data) => void
 }
 
 class App extends React.Component<any, AppState> {
@@ -16,9 +17,10 @@ class App extends React.Component<any, AppState> {
   constructor(props) {
     super(props)
 
-    this.changeTheme = newTheme => {
+    this.changeTheme = (event, data) => {
+      const themeName = _.camelCase(data.value)
       this.setState({
-        themeName: newTheme,
+        themeName,
       })
     }
 
@@ -37,10 +39,19 @@ class App extends React.Component<any, AppState> {
         <Provider
           theme={mergeThemes(themes[themeName], {
             // adjust Teams' theme to Semantic UI's font size scheme
-            siteVariables: {
-              htmlFontSize: '14px',
-              bodyFontSize: '1rem',
-            },
+            staticStyles: [
+              {
+                a: {
+                  textDecoration: 'none',
+                },
+                html: {
+                  fontSize: '14px',
+                },
+                body: {
+                  fontSize: '1rem',
+                },
+              },
+            ],
           })}
         >
           <Router />

docs/src/components/ComponentDoc/ComponentControls/ComponentButton.tsx

@@ -0,0 +1,31 @@
+import { createComponent, Icon, Text, ICSSInJSStyle } from '@stardust-ui/react'
+import * as React from 'react'
+
+interface LabelledButtonProps {
+  iconName: string
+  label: string
+  active: boolean
+  onClick?: (event: React.SyntheticEvent) => void
+}
+
+const centered: ICSSInJSStyle = {
+  textAlign: 'center',
+}
+
+const LabelledButton: React.SFC<LabelledButtonProps> = createComponent<LabelledButtonProps>({
+  displayName: 'LabelledButton',
+  render: ({ stardust, ...props }) => {
+    const { iconName, label, active, onClick } = props
+    return (
+      <div style={centered} onClick={onClick}>
+        <Icon
+          name={iconName}
+          styles={{ color: active ? 'green' : 'grey', marginBottom: '10px', border: 0 }}
+        />
+        <br />
+        <Text content={label} styles={{ color: active ? 'green' : 'grey' }} />
+      </div>
+    )
+  },
+})
+export default LabelledButton

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react'
-import { Menu } from 'semantic-ui-react'
+import { Menu, toolbarBehavior, toolbarButtonBehavior } from '@stardust-ui/react'
+import { NavLink } from 'react-router-dom'
+import * as _ from 'lodash'
 
 import { updateForKeys } from 'docs/src/hoc'
+import ComponentButton from './ComponentButton'
 import { ComponentSourceManagerLanguage } from 'docs/src/components/ComponentDoc/ComponentSourceManager'
 import ComponentControlsCodeSandbox from './ComponentControlsCodeSandbox/ComponentControlsCodeSandbox'
 import ComponentControlsShowCode from './ComponentControlsShowCode'
@@ -17,6 +20,7 @@ type ComponentControlsProps = {
   examplePath: string
   anchorName: string
   onCopyLink: () => void
+  onMaximize: () => void
   onShowCode: () => void
   onShowRtl: () => void
   onShowTransparent: () => void
@@ -43,22 +47,76 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
     onShowRtl,
     onShowTransparent,
     onShowVariables,
+    onMaximize,
   } = props
 
   return (
-    <Menu color="green" icon="labeled" size="tiny" compact text>
-      <ComponentControlsShowCode active={showCode} onClick={onShowCode} />
-      <ComponentControlsCodeSandbox
-        exampleCode={exampleCode}
-        exampleLanguage={exampleLanguage}
-        exampleName={examplePath}
-      />
-      <ComponentControlsShowVariables active={showVariables} onClick={onShowVariables} />
-      <ComponentControlsShowTransparent active={showTransparent} onClick={onShowTransparent} />
-      <ComponentControlsRtl active={showRtl} onClick={onShowRtl} />
-      <ComponentControlsMaximize examplePath={examplePath} rtl={showRtl} />
-      <ComponentControlsCopyLink anchorName={anchorName} onClick={onCopyLink} />
-    </Menu>
+    <Menu
+      fluid
+      color="green"
+      icon="labeled"
+      size="tiny"
+      pills
+      accessibility={toolbarBehavior}
+      items={[
+        {
+          key: 'show-code',
+          content: <ComponentControlsShowCode active={showCode} />,
+          onClick: onShowCode,
+          accessibility: toolbarButtonBehavior,
+        },
+        {
+          key: 'show-codesandbox',
+          content: (
+            <ComponentControlsCodeSandbox
+              exampleCode={exampleCode}
+              exampleLanguage={exampleLanguage}
+              exampleName={examplePath}
+            />
+          ),
+          accessibility: toolbarButtonBehavior,
+        },
+        {
+          key: 'show-variables',
+          content: <ComponentControlsShowVariables active={showVariables} />,
+          onClick: onShowVariables,
+          accessibility: toolbarButtonBehavior,
+        },
+        {
+          key: 'show-transparent',
+          content: <ComponentControlsShowTransparent active={showTransparent} />,
+          onClick: onShowTransparent,
+          accessibility: toolbarButtonBehavior,
+        },
+        {
+          key: 'show-rtl',
+          content: <ComponentControlsRtl active={showRtl} />,
+          onClick: onShowRtl,
+          accessibility: toolbarButtonBehavior,
+        },
+        {
+          key: 'maximize',
+          content: <ComponentControlsMaximize />,
+          as: NavLink,
+          to: `/maximize/${_.kebabCase(
+            examplePath
+              .split('/')
+              .slice(-1)
+              .pop(),
+          )}/${showRtl}`,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+          onClick: onMaximize,
+          accessibility: toolbarButtonBehavior,
+        },
+        {
+          key: 'copy-link',
+          content: <ComponentControlsCopyLink anchorName={anchorName} />,
+          onClick: onCopyLink,
+          accessibility: toolbarButtonBehavior,
+        },
+      ]}
+    />
   )
 }
 
@@ -70,4 +128,4 @@ export default updateForKeys([
   'showTransparent',
   'showVariables',
   'visible',
-])(ComponentControls)
+])(ComponentControls, ComponentButton)

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/ComponentControlsCodeSandbox.tsx

@@ -2,16 +2,17 @@ import * as _ from 'lodash'
 import * as React from 'react'
 import CodeSandboxer from 'react-codesandboxer'
 
-import { Menu } from 'semantic-ui-react'
 import { ComponentSourceManagerLanguage } from 'docs/src/components/ComponentDoc/ComponentSourceManager'
 import { imports } from 'docs/src/components/Playground/renderConfig'
 import { updateForKeys } from 'docs/src/hoc'
 import { appTemplateJs } from './indexTemplates'
+import LabelledButton from '../ComponentButton'
 
 type ComponentControlsCodeSandboxProps = {
   exampleCode: string
   exampleLanguage: ComponentSourceManagerLanguage
   exampleName: string
+  active: boolean
 }
 
 type ComponentControlsCodeSandboxState = {
@@ -44,30 +45,27 @@ class ComponentControlsShowCode extends React.Component<
     this.setState({ sandboxUrl })
   }
 
+  handleClick = e => {
+    const { sandboxUrl } = this.state
+    e.preventDefault()
+    window.open(sandboxUrl)
+  }
+
   render() {
-    const { exampleLanguage, exampleCode, exampleName } = this.props
+    const { active, exampleLanguage, exampleCode, exampleName } = this.props
     const { sandboxUrl } = this.state
 
     if (exampleLanguage === 'ts') {
-      return (
-        <Menu.Item
-          disabled
-          content="CodeSandbox"
-          icon="connectdevelop"
-          title="Export of TypeScript code is not supported"
-        />
-      )
+      return <LabelledButton label="CodeSandbox" iconName="connectdevelop" active={active} />
     }
 
     if (sandboxUrl) {
       return (
-        <Menu.Item
-          as="a"
-          content="Click to open"
-          href={sandboxUrl}
-          icon={{ color: 'green', name: 'checkmark' }}
-          target="_blank"
-          title="Open in a new tab"
+        <LabelledButton
+          label="Click to open"
+          onClick={this.handleClick}
+          iconName="checkmark"
+          active={active}
         />
       )
     }
@@ -87,18 +85,13 @@ class ComponentControlsShowCode extends React.Component<
         skipRedirect
         template="create-react-app"
       >
-        {({ isLoading, isDeploying }) => {
+        {({ isLoading, isDeploying, active }) => {
           const loading = isLoading || isDeploying
-
           return (
-            <Menu.Item
-              as="a"
-              content={loading ? 'Exporting...' : 'CodeSandbox'}
-              icon={{
-                loading,
-                name: loading ? 'spinner' : 'connectdevelop',
-              }}
-              title="Export to CodeSandbox"
+            <LabelledButton
+              iconName={loading ? 'spinner' : 'connectdevelop'}
+              label={loading ? 'Exporting...' : 'CodeSandbox'}
+              active={active}
             />
           )
         }}
@@ -107,4 +100,4 @@ class ComponentControlsShowCode extends React.Component<
   }
 }
 
-export default updateForKeys(['exampleCode'])(ComponentControlsShowCode)
+export default updateForKeys(['exampleCode', 'active'])(ComponentControlsShowCode)

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.tsx

@@ -1,16 +1,11 @@
-import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
+import LabelledButton from './ComponentButton'
+import * as _ from 'lodash'
 
 export default class ComponentControlsCopyLink extends React.Component<any, any> {
   private mounted: boolean
   private readonly btnLabel = 'Permalink'
 
-  public static propTypes = {
-    anchorName: PropTypes.string,
-    onClick: PropTypes.func,
-  }
-
   public state: any = {}
 
   public shouldComponentUpdate(nextProps, nextState) {
@@ -26,26 +21,21 @@ export default class ComponentControlsCopyLink extends React.Component<any, any>
   }
 
   public render() {
-    const { anchorName } = this.props
     const { active } = this.state
 
     return (
-      <Menu.Item
-        href={`#${anchorName}`}
+      <LabelledButton
+        iconName="linkify"
+        label={active ? 'Copied!' : this.btnLabel}
+        active={active}
         onClick={this.handleClick}
-        color={active ? 'green' : undefined}
-      >
-        <Icon color={active ? 'green' : 'grey'} fitted name="linkify" size="large" />
-        {active ? 'Copied!' : this.btnLabel}
-      </Menu.Item>
+      />
     )
   }
 
   private handleClick = e => {
-    const { onClick } = this.props
-
     e.preventDefault()
-    onClick()
+    _.invoke(this.props, 'onClick', e, this.props)
 
     this.setState({ active: true })
     setTimeout(this.resetActive, 3000)

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx

@@ -1,25 +1,10 @@
-import * as _ from 'lodash'
-import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
-import { NavLink } from 'react-router-dom'
 
 import { updateForKeys } from 'docs/src/hoc'
+import LabelledButton from './ComponentButton'
 
-const ComponentControlsMaximize: any = ({ examplePath, rtl }) => (
-  <Menu.Item
-    as={NavLink}
-    to={`/maximize/${_.kebabCase(examplePath.split('/').slice(-1))}/${rtl}`}
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    <Icon color="grey" fitted name="external alternate" size="large" />
-    Popout
-  </Menu.Item>
+const ComponentControlsMaximize: any = () => (
+  <LabelledButton iconName="external alternate" label="Popout" active={false} />
 )
 
-ComponentControlsMaximize.propTypes = {
-  examplePath: PropTypes.string.isRequired,
-}
-
-export default updateForKeys(['examplePath', 'rtl'])(ComponentControlsMaximize)
+export default updateForKeys(['examplePath'])(ComponentControlsMaximize)

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsRtl.tsx

@@ -1,14 +1,11 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Icon, Menu } from 'semantic-ui-react'
 
 import { updateForKeys } from 'docs/src/hoc'
+import LabelledButton from './ComponentButton'
 
-const ComponentControlsShowRtl: React.SFC = ({ active, onClick }: any) => (
-  <Menu.Item active={active} onClick={onClick}>
-    <Icon color={active ? 'green' : 'grey'} size="large" name="align right" fitted />
-    RTL
-  </Menu.Item>
+const ComponentControlsShowRtl: React.SFC = ({ active }: any) => (
+  <LabelledButton iconName="align right" label="RTL" active={active} />
 )
 
 ComponentControlsShowRtl.propTypes = {