0.2.1 (#536)

* Added aditional pages to the PoC to test components

* be flexible about array children

* Simplify proptypes

* add a tiny * next to required fields

* add default, move type to description

* add meta from md to component-metadata.json

* move metadata call to right place

* add unstable tag, redesign them

* remove unstable from child

* 0.2.1: Update version and changelog (#535)

Author: siddharthkp

changelog.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## 0.2.1 [May 8, 2018]
+
+### Fixed
+
+* Fix persistent warning in `Form.Actions` [#529]
+
+### Changed
+
+* Added information on defaults and required fields in docs [#533]
+
 ## 0.2.0 [April 26, 2018]
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosmos",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "engine": "^7.0.0",
   "private": true,
   "workspaces": [

src/components/molecules/button-group/index.js

@@ -48,10 +48,7 @@ ButtonGroup.propTypes = {
   /** Make Buttons stick to each other */
   compressed: PropTypes.bool,
   /** Should container only Buttons */
-  children: PropTypes.oneOfType([
-    PropTypes.element, // just one button for dynamic cases like Form Actions
-    PropTypes.arrayOf(PropTypes.element)
-  ])
+  children: PropTypes.node
 }
 
 ButtonGroup.defaultProps = {

src/components/molecules/resource-list/item/item.md

@@ -1,7 +1,6 @@
 ```meta
   category: Layout
   description: "A single item in a ResourceList"
-  unstable: true
 ```
 
 A `ResourceList.Item` is a single item that is displayed in a [ResourceList](/docs/resource-list). You won't typically use this directly, except to return it as a result from a `renderItem()` function passed to a `ResourceList`.

src/docs/docs-components/tag.js

@@ -2,16 +2,17 @@ import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 
-import { fonts } from '@auth0/cosmos/tokens'
+import { colors, fonts, misc } from '@auth0/cosmos-tokens'
+console.log(misc)
 
 const StyledTag = styled.span`
-  background-color: red;
   display: inline-block;
-  background-color: #777;
-  border-radius: 10px;
+  color: ${props => (props.warning ? colors.base.orangeLighter : colors.base.gray)};
+  border: 1px solid;
+  border-color: ${props => (props.warning ? colors.base.orangeLighter : colors.base.gray)};
+  border-radius: 5px;
   min-width: 10px;
   padding: 4px 8px;
-  color: white;
   line-height: 1;
   vertical-align: middle;
   white-space: nowrap;
@@ -21,7 +22,7 @@ const StyledTag = styled.span`
 
 const Tag = props => {
   /* you can pass on all the props to the component like this */
-  return <StyledTag>{props.text}</StyledTag>
+  return <StyledTag {...props}>{props.text}</StyledTag>
 }
 
 Tag.propTypes = {

src/docs/sidebar/link.js

@@ -27,13 +27,13 @@ const StyledLink = styled.div`
 `
 
 const TagWrapper = styled.span`
-  color: ${colors.base.grayMedium};
   float: right;
 `
 
 const Link = props => {
   const { displayName, documentation, implemented } = props.component
   const url = `/docs/${kebabCase(displayName)}`
+  const unstable = props.component.meta && props.component.meta.unstable
 
   return (
     <StyledLink disabled={!documentation} isChild={props.parent}>
@@ -52,6 +52,11 @@ const Link = props => {
             <Tag text="Not documented" />
           </TagWrapper>
         )}
+        {unstable ? (
+          <TagWrapper>
+            <Tag warning text="Experimental" />
+          </TagWrapper>
+        ) : null}
         {implemented ? null : (
           <TagWrapper>
             <Tag text="Not implemented" />

src/docs/spec/default-props.js

@@ -9,4 +9,11 @@ const addDefaultValues = propData => {
   return propData
 }
 
+const getDefaultValue = propData => {
+  if (propData.defaultValue && propData.defaultValue.value !== 'null') {
+    return propData.defaultValue.value
+  }
+}
+
 export default addDefaultValues
+export { getDefaultValue }

src/docs/spec/props.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { spacing, colors, fonts, misc } from '@auth0/cosmos/tokens'
 import { Code } from '@auth0/cosmos'
 import parseType from './prop-type'
-import addDefaultValues from './default-props'
+import addDefaultValues, { getDefaultValue } from './default-props'
 import getConflictingProps from './prop-conflicts'
 import PropSwitcher from './prop-switcher'
 
@@ -18,6 +18,7 @@ const Table = styled.table`
     padding: ${spacing.small} ${spacing.small};
     vertical-align: middle;
     position: relative;
+    color: ${colors.base.grayDark};
   }
   th {
     border-bottom: 2px solid #ddd;
@@ -36,15 +37,18 @@ const Table = styled.table`
 const Type = styled.div`
   font-size: 13px;
   font-family: ${fonts.family.code};
-  color: ${colors.base.grayDark};
   padding: 0 ${spacing.xsmall};
   border-radius: ${misc.radius};
   position: relative;
   left: -${spacing.xsmall};
 `
 
-const Description = styled.span`
-  color: ${colors.base.grayDark};
+const Required = styled.span`
+  color: ${colors.base.orange};
+  &:after {
+    content: '*';
+    font-size: 16px;
+  }
 `
 
 class Props extends React.Component {
@@ -90,7 +94,7 @@ class Props extends React.Component {
           <tr>
             <th>Name</th>
             <th>Description</th>
-            <th>Type</th>
+            <th>Default</th>
             <th />
           </tr>
         </thead>
@@ -99,14 +103,13 @@ class Props extends React.Component {
             <tr key={key}>
               <td>
                 <Code>{key}</Code>
+                {propData[key].required && <Required />}
               </td>
               <td>
-                <Description>{propData[key].description}</Description>
-              </td>
-              <td>
-                <Type>{parseType(propData[key].type)}</Type>
+                {propData[key].description}
+                <Type>type: {parseType(propData[key].type)}</Type>
               </td>
-
+              <td>{getDefaultValue(propData[key])}</td>
               <td>
                 <PropSwitcher
                   propName={key}

src/manage/components/page.js

@@ -4,6 +4,12 @@ import { BrowserRouter as Router, Route } from 'react-router-dom'
 import ClientIndex from '../pages/clients'
 import ClientDetail from '../pages/client-detail'
 import EmailsIndex from '../pages/emails'
+import RulesIndex from '../pages/rules'
+import SsoIndex from '../pages/sso-integrations'
+import AnomalyDetectionIndex from '../pages/anomaly-detection'
+import LogsIndex from '../pages/slogs'
+import ApisIndex from '../pages/apis'
+import UsersIndex from '../pages/users'
 
 const Page = () => (
   <div
@@ -18,6 +24,12 @@ const Page = () => (
         <Route exact path="/manage/clients" component={ClientIndex} />
         <Route exact path="/manage/clients/:clientId" component={ClientDetail} />
         <Route exact path="/manage/emails" component={EmailsIndex} />
+        <Route exact path="/manage/rules" component={RulesIndex} />
+        <Route exact path="/manage/logs" component={LogsIndex} />
+        <Route exact path="/manage/users" component={UsersIndex} />
+        <Route exact path="/manage/apis" component={ApisIndex} />
+        <Route exact path="/manage/anomaly" component={AnomalyDetectionIndex} />
+        <Route exact path="/manage/sso-integrations" component={SsoIndex} />
       </div>
     </Router>
   </div>

src/manage/components/side-navigation.js

@@ -12,9 +12,13 @@ export default () => (
   >
     <Sidebar>
       <Sidebar.Link icon="dashboard" label="Dashboard" url="/manage" />
-      <Sidebar.Link icon="clients" label="Clients" url="/manage/clients" selected />
+      <Sidebar.Link icon="clients" label="Clients" url="/manage/clients" />
       <Sidebar.Link icon="apis" label="APIs" url="/manage/apis" />
-      <Sidebar.Link icon="sso-integrations" label="SSO Integrations" url="/manage/externalapps" />
+      <Sidebar.Link
+        icon="sso-integrations"
+        label="SSO Integrations"
+        url="/manage/sso-integrations"
+      />
       <Sidebar.LinkGroup icon="connections" label="Connections">
         <Sidebar.Link label="Database" url="/manage/connections/database" />
         <Sidebar.Link label="Social" url="/manage/connections/social" />

src/manage/pages/anomaly-detection/index.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { PageHeader } from '@auth0/cosmos'
+
+class AnomalyDetectionIndex extends React.Component {
+  render() {
+    return (
+      <div>
+        <PageHeader
+          title="Anomaly Detection"
+          description={{
+            text:
+              'Provide extra layer of security to your customers by enabling shields​ that protect you and your users against different types of attacks and user access anomalies.'
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default AnomalyDetectionIndex

src/manage/pages/apis/index.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { PageHeader } from '@auth0/cosmos'
+
+class ApisIndex extends React.Component {
+  render() {
+    return (
+      <div>
+        <PageHeader
+          title="APIs"
+          description={{
+            text: 'Define APIs that you can consume from your authorized applications.',
+            learnMore: '/'
+          }}
+          primaryAction={{
+            label: 'Create API',
+            icon: 'plus',
+            method: null
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default ApisIndex

src/manage/pages/clients/index.js

@@ -1,13 +1,9 @@
 import React from 'react'
-import styled from 'styled-components'
-
 import { PageHeader } from '@auth0/cosmos'
 
 import CreateClientDialog from './create-client-dialog'
 import ClientList from '../../components/client-list'
 
-const ClientsContent = styled.div``
-
 class ClientIndex extends React.Component {
   constructor(props) {
     super(props)
@@ -20,7 +16,7 @@ class ClientIndex extends React.Component {
 
   render() {
     return (
-      <ClientsContent>
+      <div>
         <PageHeader
           title="Clients"
           description={{
@@ -42,7 +38,7 @@ class ClientIndex extends React.Component {
         <ClientList />
 
         <CreateClientDialog open={this.state.dialogOpen} onClose={this.setDialogOpen(false)} />
-      </ClientsContent>
+      </div>
     )
   }
 }

src/manage/pages/rules/index.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { PageHeader } from '@auth0/cosmos'
+
+class RulesIndex extends React.Component {
+  render() {
+    return (
+      <div>
+        <PageHeader
+          title="Rules"
+          description={{
+            text:
+              'Custom Javascript snippets that run in a secure, isolated sandbox in the Auth0 service as part of your authentication pipeline.',
+            learnMore: '/'
+          }}
+          primaryAction={{
+            label: 'Create Rule',
+            icon: 'plus',
+            method: null
+          }}
+          secondaryAction={{
+            label: 'Tutorial',
+            icon: 'play-circle',
+            method: () => {}
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default RulesIndex

src/manage/pages/slogs/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { PageHeader } from '@auth0/cosmos'
+
+class LogsIndex extends React.Component {
+  render() {
+    return (
+      <div>
+        <PageHeader
+          title="Logs"
+          description={{
+            text:
+              'Storage of log data of both actions taken in the dashboard by the administrators, as well as authentications made by your users.',
+            learnMore: '/'
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default LogsIndex

src/manage/pages/sso-integrations/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { EmptyState } from '@auth0/cosmos'
+
+class SsoIndex extends React.Component {
+  render() {
+    return (
+      <div>
+        <EmptyState
+          title="SSO Integrations"
+          icon="sso-integrations"
+          helpUrl="http://auth0.com"
+          action={{
+            icon: 'plus',
+            text: 'Create SSO Integration'
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default SsoIndex