From 42fb2a17ab86a5ded6befb9436cd8c1d3abb6196 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 14:07:43 -0700 Subject: [PATCH 01/42] feat: Add a PageTitle component and update the reference templates to use them --- src/components/PageTitle.js | 13 +++++++++++++ src/components/PageTitle.module.scss | 4 ++++ src/templates/ApiReferenceTemplate.js | 3 ++- src/templates/ComponentReferenceTemplate.js | 3 ++- 4 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 src/components/PageTitle.js create mode 100644 src/components/PageTitle.module.scss diff --git a/src/components/PageTitle.js b/src/components/PageTitle.js new file mode 100644 index 000000000..7603031b2 --- /dev/null +++ b/src/components/PageTitle.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './PageTitle.module.scss'; + +const PageTitle = ({ children }) => ( +

{children}

+); + +PageTitle.propTypes = { + children: PropTypes.node, +}; + +export default PageTitle; diff --git a/src/components/PageTitle.module.scss b/src/components/PageTitle.module.scss new file mode 100644 index 000000000..644d72ea1 --- /dev/null +++ b/src/components/PageTitle.module.scss @@ -0,0 +1,4 @@ +.pageTitle { + font-size: 2.5rem; + margin-top: 0; +} diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js index f20e74fb4..d5060b42f 100644 --- a/src/templates/ApiReferenceTemplate.js +++ b/src/templates/ApiReferenceTemplate.js @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; import InlineCodeSnippet from '../components/InlineCodeSnippet'; import ReactMarkdown from 'react-markdown'; import Layout from '../components/Layout'; +import PageTitle from '../components/PageTitle'; import MethodReference from '../components/MethodReference'; import TypeDefReference from '../components/TypeDefReference'; import ConstantReference from '../components/ConstantReference'; @@ -28,7 +29,7 @@ const ApiReferenceTemplate = ({ data }) => { return ( -

{api}

+ {api}
{ return ( -

{component}

+ {component}
Date: Mon, 15 Jun 2020 14:10:53 -0700 Subject: [PATCH 02/42] chore: Update line-height site-wide --- src/components/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index 554ff7533..561bfd10d 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -88,7 +88,7 @@ body { font-family: var(--primary-font-family); color: var(--color-neutrals-700); background-color: var(--color-white); - line-height: 1.2; + line-height: 1.5; } main { From fb68322503c8b7868ad537fd14d2b491cca35783 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 14:12:58 -0700 Subject: [PATCH 03/42] chore: Update spacing and font-weight on page title --- src/components/PageTitle.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/PageTitle.module.scss b/src/components/PageTitle.module.scss index 644d72ea1..73f266323 100644 --- a/src/components/PageTitle.module.scss +++ b/src/components/PageTitle.module.scss @@ -1,4 +1,6 @@ .pageTitle { font-size: 2.5rem; margin-top: 0; + margin-bottom: 0; + font-weight: normal; } From 2ae65d872a69ab00fca99bed9b28a9c5ee2283f3 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 14:14:17 -0700 Subject: [PATCH 04/42] chore: Remove spacing on description --- src/templates/ReferenceTemplate.module.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss index c679a6a06..26cf29ff0 100644 --- a/src/templates/ReferenceTemplate.module.scss +++ b/src/templates/ReferenceTemplate.module.scss @@ -1,7 +1,4 @@ .description { - margin-top: 0.5rem; - padding-top: 0.5rem; - ul { padding-top: 0.5rem; } From e6dd2bf3425e7527d52da8e862fcdb4ee83319ce Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 14:19:12 -0700 Subject: [PATCH 05/42] chore: Remove top margin from all headers --- src/components/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index 561bfd10d..b7f1ef8fe 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -116,7 +116,7 @@ h3, h4, h5, h6 { - margin-top: revert; + margin-top: 0; margin-bottom: 8px; font-weight: 600; color: var(--color-neutrals-800); From 742cce164ca7bf1adc9197a3b80fe222d94f245f Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 15:15:01 -0700 Subject: [PATCH 06/42] feat: More tweaks to component doc styling --- src/components/PageTitle.module.scss | 1 - src/components/PropList.module.scss | 9 ++++++--- src/components/ReferenceExample.module.scss | 2 ++ src/components/ReferencePreview.js | 1 - src/templates/ComponentReferenceTemplate.js | 16 +++++++--------- .../ComponentReferenceTemplate.module.scss | 2 ++ src/templates/ReferenceTemplate.module.scss | 6 ++++++ 7 files changed, 23 insertions(+), 14 deletions(-) diff --git a/src/components/PageTitle.module.scss b/src/components/PageTitle.module.scss index 73f266323..f45086b11 100644 --- a/src/components/PageTitle.module.scss +++ b/src/components/PageTitle.module.scss @@ -1,6 +1,5 @@ .pageTitle { font-size: 2.5rem; - margin-top: 0; margin-bottom: 0; font-weight: normal; } diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss index f49307611..c6302b766 100644 --- a/src/components/PropList.module.scss +++ b/src/components/PropList.module.scss @@ -1,8 +1,11 @@ .container { display: flex; - border-bottom: solid var(--color-neutrals-200) 1px; - padding-bottom: 2rem; - margin-top: 1rem; + + &:not(:last-child) { + margin-bottom: 2rem; + padding-bottom: 2rem; + border-bottom: solid var(--color-neutrals-200) 1px; + } } .info { diff --git a/src/components/ReferenceExample.module.scss b/src/components/ReferenceExample.module.scss index bd97e7e85..7d3a880af 100644 --- a/src/components/ReferenceExample.module.scss +++ b/src/components/ReferenceExample.module.scss @@ -10,5 +10,7 @@ } .title { + font-weight: bold; + font-size: 1.25rem; margin-bottom: 1rem; } diff --git a/src/components/ReferencePreview.js b/src/components/ReferencePreview.js index f027d712e..c2348b1a6 100644 --- a/src/components/ReferencePreview.js +++ b/src/components/ReferencePreview.js @@ -8,7 +8,6 @@ const EXAMPLE_CSS = ` .nr1-ReferenceExample { line-height: 1.36; font-weight: 400; - background-color: #fff; color: #000e0e; font-size: 12px; font-family: Open Sans,Segoe UI,Tahoma,sans-serif; diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js index 63e26d911..d38cc355c 100644 --- a/src/templates/ComponentReferenceTemplate.js +++ b/src/templates/ComponentReferenceTemplate.js @@ -50,15 +50,13 @@ const ComponentReferenceTemplate = ({ data }) => {
-
-

Usage

- {usage} -
- {examples.length > 0 && (
-

Examples

+

Examples

+
+ {usage} +
{examples.map((example, i) => ( { )}
-

Props

+

Props

{methods.length > 0 && (
-

Methods

+

Methods

{methods.map((method, i) => ( ))} @@ -94,7 +92,7 @@ const ComponentReferenceTemplate = ({ data }) => { {typeDefs.length > 0 && (
-

Type definitions

+

Type definitions

{typeDefs.map((typeDef, i) => ( ))} diff --git a/src/templates/ComponentReferenceTemplate.module.scss b/src/templates/ComponentReferenceTemplate.module.scss index 887a5965d..2b0b44c18 100644 --- a/src/templates/ComponentReferenceTemplate.module.scss +++ b/src/templates/ComponentReferenceTemplate.module.scss @@ -1,4 +1,6 @@ .componentExample:not(:last-child) { + border-bottom: 1px solid var(--color-neutrals-100); + padding-bottom: 2rem; margin-bottom: 2rem; } diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss index 26cf29ff0..32003863d 100644 --- a/src/templates/ReferenceTemplate.module.scss +++ b/src/templates/ReferenceTemplate.module.scss @@ -11,3 +11,9 @@ .section:not(:last-child) { margin-bottom: 2rem; } + +.sectionTitle { + margin-bottom: 1rem; + font-size: 1.75rem; + font-weight: bold; +} From 52e0c853a46dc8195a143bcd6200b93118e007c9 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 15:45:05 -0700 Subject: [PATCH 07/42] feat: Polish styles on method references --- src/components/FunctionDefinition.js | 6 +++-- src/components/MethodReference.js | 1 + src/components/MethodReference.module.scss | 9 +++++-- src/components/PropList.js | 10 ++++--- src/templates/ApiReferenceTemplate.js | 30 ++++++++++++++------- src/templates/ComponentReferenceTemplate.js | 14 +++++++--- 6 files changed, 48 insertions(+), 22 deletions(-) diff --git a/src/components/FunctionDefinition.js b/src/components/FunctionDefinition.js index 052b95711..6507d8cc2 100644 --- a/src/components/FunctionDefinition.js +++ b/src/components/FunctionDefinition.js @@ -1,5 +1,6 @@ import React, { Children } from 'react'; import PropTypes from 'prop-types'; +import cx from 'classnames'; import Markdown from 'react-markdown'; import styles from './FunctionDefinition.module.scss'; @@ -19,9 +20,9 @@ ParamDescription.propTypes = { children: PropTypes.node, }; -const FunctionDefinition = ({ params, returnValue }) => { +const FunctionDefinition = ({ className, params, returnValue }) => { return ( -
+
{params.length > 0 ? 'function (' : 'function ()'} @@ -48,6 +49,7 @@ const FunctionDefinition = ({ params, returnValue }) => { }; FunctionDefinition.propTypes = { + className: PropTypes.string, params: PropTypes.arrayOf( PropTypes.shape({ name: PropTypes.string, diff --git a/src/components/MethodReference.js b/src/components/MethodReference.js index 534a319e4..ecf63d9be 100644 --- a/src/components/MethodReference.js +++ b/src/components/MethodReference.js @@ -10,6 +10,7 @@ const MethodReference = ({ className, method }) => (

{method.name}

diff --git a/src/components/MethodReference.module.scss b/src/components/MethodReference.module.scss index ae4595557..033a471d0 100644 --- a/src/components/MethodReference.module.scss +++ b/src/components/MethodReference.module.scss @@ -1,15 +1,20 @@ .name { + font-family: var(--code-font); + display: inline-block; padding: 0.125rem 0.25rem; - display: inline; color: var(--color-teal-500); background: var(--color-teal-050); + margin-bottom: 1rem; } .description { - margin-top: 1rem; margin-bottom: 1rem; } .example:not(:last-child) { margin-bottom: 2rem; } + +.functionDefinition { + margin-bottom: 1rem; +} diff --git a/src/components/PropList.js b/src/components/PropList.js index e8a5bd2dd..a7b97de74 100644 --- a/src/components/PropList.js +++ b/src/components/PropList.js @@ -111,10 +111,12 @@ const PropList = ({ propTypes }) => { />
)} - + {description && ( + + )} {examples.map((example, idx) => ( diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js index d5060b42f..b6258c32d 100644 --- a/src/templates/ApiReferenceTemplate.js +++ b/src/templates/ApiReferenceTemplate.js @@ -31,29 +31,39 @@ const ApiReferenceTemplate = ({ data }) => { {api} -
- -
+ {apiDescription && ( +
+ +
+ )}
-

Usage

+

Usage

{usage}
{methods.length > 0 && (
-

API methods

+

API methods

{methods.map((method, i) => ( - + ))}
)} {typeDefs.length > 0 && (
-

Type definitions

+

Type definitions

{typeDefs.map((typeDef, i) => ( ))} @@ -62,7 +72,7 @@ const ApiReferenceTemplate = ({ data }) => { {constants.length > 0 && (
-

Constants

+

Constants

{constants.map((constant, i) => ( ))} diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js index d38cc355c..2b401671f 100644 --- a/src/templates/ComponentReferenceTemplate.js +++ b/src/templates/ComponentReferenceTemplate.js @@ -50,13 +50,15 @@ const ComponentReferenceTemplate = ({ data }) => {
+
+

Usage

+ {usage} +
+ {examples.length > 0 && (

Examples

-
- {usage} -
{examples.map((example, i) => ( {

Methods

{methods.map((method, i) => ( - + ))}
)} From c5cc80f5a3e82e6a84a00078857d9323864339a2 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 16:06:03 -0700 Subject: [PATCH 08/42] feat: Add some polish to the prop list --- src/components/PropList.js | 30 ++++++++++++++++------------- src/components/PropList.module.scss | 21 +++++++++----------- 2 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/components/PropList.js b/src/components/PropList.js index a7b97de74..1d2f5a292 100644 --- a/src/components/PropList.js +++ b/src/components/PropList.js @@ -20,20 +20,20 @@ const PropTypeInfo = ({ type }) => { const { itemTypes } = type.meta; return itemTypes.raw === 'oneOf' ? ( -
+
{'
{'>'}
-
+ ) : ( ); } case 'oneOf': return ( -
+
{'
{type.meta.constants.map((constant) => ( @@ -41,7 +41,7 @@ const PropTypeInfo = ({ type }) => { ))}
{'>'}
-
+ ); case 'oneOfType': return type.meta.types.map((type, idx) => ( @@ -86,20 +86,24 @@ const PropList = ({ propTypes }) => { return (
- {name} - {isRequired && required} - {deprecation && ( - deprecated - )} -
{type.name}
+
+ {name} + {isRequired && ( + required + )} + {deprecation && ( + deprecated + )} +
+ {type.name} {defaultValue !== undefined && (
-

DEFAULT

-

{String(defaultValue)}

+
DEFAULT
+ {String(defaultValue)}
)}
-
+
{deprecation && (
diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss index c6302b766..2aaba2056 100644 --- a/src/components/PropList.module.scss +++ b/src/components/PropList.module.scss @@ -1,5 +1,7 @@ .container { - display: flex; + display: grid; + grid-template-columns: 30% 1fr; + grid-gap: 1rem; &:not(:last-child) { margin-bottom: 2rem; @@ -8,14 +10,13 @@ } } +.propName { + font-weight: bold; +} + .info { - width: 30%; word-break: break-all; - code { - font-weight: bold; - } - h3 { margin-top: 0; } @@ -25,8 +26,9 @@ margin-top: 2rem; color: var(--color-neutrals-700); - p:first-of-type { + .label { font-size: 0.75rem; + font-weight: bold; } } @@ -46,10 +48,6 @@ margin-bottom: 1rem; } -.propInfo { - width: 70%; -} - .markdownContainer > *:first-child { margin-top: 0; } @@ -73,7 +71,6 @@ } .listLike { - font-family: var(--code-font); font-size: 0.875rem; color: var(--color-neutrals-600); max-height: 320px; From 567e1d5e34d0704ef6ab1a1a89bcf3684eed19e5 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 16:36:51 -0700 Subject: [PATCH 09/42] refactor: Extract getTypeDefs into util function --- src/hooks/useApiDoc.js | 31 ++++++------------------ src/hooks/useComponentDoc.js | 47 ++++++++++++------------------------ src/utils/typeDefs.js | 19 ++++++++++++++- 3 files changed, 40 insertions(+), 57 deletions(-) diff --git a/src/hooks/useApiDoc.js b/src/hooks/useApiDoc.js index 0e05d843f..c3d2b0c9e 100644 --- a/src/hooks/useApiDoc.js +++ b/src/hooks/useApiDoc.js @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { pullTypeDefNames } from '../utils/typeDefs'; +import { getTypeDefs } from '../utils/typeDefs'; import navigationApi from '../data/navigationApi'; const IGNORED_METHODS = [ @@ -38,28 +38,6 @@ const useApiDoc = (name) => { const apiDocs = api?.__docs__; - const getTypeDefs = (api) => { - const apiTypeDefNames = Object.getOwnPropertyNames(api) - .filter((key) => !IGNORED_METHODS.includes(key)) - .map((key) => api[key]?.__docs__?.tags) - .filter(Boolean) - .flatMap(pullTypeDefNames); - - const allTypeDefs = window.__NR1_SDK__.default.__typeDefs__; - - const typeDefs = apiTypeDefNames - .map((name) => allTypeDefs[name]) - .filter((typeDef) => typeDef !== undefined); - - const structuredTypeDefs = typeDefs.map((typeDef) => ({ - properties: typeDef.tags.property, - name: typeDef.tags.typedef.find((tag) => tag.identifier).identifier - .name, - })); - - return structuredTypeDefs; - }; - const getConstants = (api) => { return Object.getOwnPropertyNames(api) .filter( @@ -81,10 +59,15 @@ const useApiDoc = (name) => { }); }; + const properties = Object.getOwnPropertyNames(api) + .filter((key) => !IGNORED_METHODS.includes(key)) + .map((key) => api[key]?.__docs__?.tags) + .filter(Boolean); + return { description: apiDocs?.text, usage: `import { ${name} } from 'nr1'`, - typeDefs: getTypeDefs(api), + typeDefs: getTypeDefs(properties), constants: getConstants(api), methods: Object.getOwnPropertyNames(api) .filter( diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js index a8076b037..a7a190ab5 100644 --- a/src/hooks/useComponentDoc.js +++ b/src/hooks/useComponentDoc.js @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import { getPropTypeDefinition } from '../utils/propTypeInfo'; -import { pullTypeDefNames } from '../utils/typeDefs'; +import { getTypeDefs } from '../utils/typeDefs'; const IGNORED_LIVE_EXAMPLES = ['Dropdown', 'Modal', 'Tooltip']; @@ -32,36 +32,6 @@ const getPropTypes = (component) => { ); }; -const getTypeDefs = (component) => { - const tagsFromComponentProperties = Object.getOwnPropertyNames(component) - .filter((key) => !IGNORED_METHODS.includes(key)) - .map((key) => component[key]?.__docs__?.tags) - .filter(Boolean); - - const tagsFromPropTypes = component.propTypes - ? Object.getOwnPropertyNames(component.propTypes).map( - (key) => component.propTypes[key]?.__docs__?.tags - ) - : []; - - const componentTypeDefNames = tagsFromComponentProperties - .concat(tagsFromPropTypes) - .flatMap(pullTypeDefNames); - - const allTypeDefs = window.__NR1_SDK__.default.__typeDefs__; - - const typeDefs = componentTypeDefNames - .map((name) => allTypeDefs[name]) - .filter((typeDef) => typeDef !== undefined); - - const structuredTypeDefs = typeDefs.map((typeDef) => ({ - properties: typeDef.tags.property, - name: typeDef.tags.typedef.find((tag) => tag.identifier).identifier.name, - })); - - return structuredTypeDefs; -}; - const useComponentDoc = (componentName) => { if (typeof window === 'undefined') global.window = {}; @@ -73,6 +43,17 @@ const useComponentDoc = (componentName) => { return null; } + const tagsFromComponentProperties = Object.getOwnPropertyNames(component) + .filter((key) => !IGNORED_METHODS.includes(key)) + .map((key) => component[key]?.__docs__?.tags) + .filter(Boolean); + + const tagsFromPropTypes = component.propTypes + ? Object.getOwnPropertyNames(component.propTypes).map( + (key) => component.propTypes[key]?.__docs__?.tags + ) + : []; + return { description: component?.__docs__?.text, examples: getExamples(component), @@ -95,7 +76,9 @@ const useComponentDoc = (componentName) => { examples: methodDocs?.tags.examples ?? [], }; }), - typeDefs: getTypeDefs(component), + typeDefs: getTypeDefs( + tagsFromComponentProperties.concat(tagsFromPropTypes) + ), }; }, [componentName, window?.__NR1_SDK__]); }; diff --git a/src/utils/typeDefs.js b/src/utils/typeDefs.js index cbc2a80cd..e3c6bef00 100644 --- a/src/utils/typeDefs.js +++ b/src/utils/typeDefs.js @@ -7,7 +7,7 @@ const IGNORED_TYPE_DEFS = [ 'boolean', ]; -export const pullTypeDefNames = (tags) => { +const pullTypeDefNames = (tags) => { return Object.values(tags) .reduce((acc, tag) => acc.concat(tag), []) .flatMap((tag) => [tag.type, tag.promiseType]) @@ -15,3 +15,20 @@ export const pullTypeDefNames = (tags) => { .filter((tag) => !IGNORED_TYPE_DEFS.includes(tag)) .map((tag) => tag.replace(/\[\]$/, '')); // TimePickerRange[] => TimePickerRange }; + +export const getTypeDefs = (tags) => { + const allTypeDefs = window.__NR1_SDK__.default.__typeDefs__; + + return tags + .flatMap(pullTypeDefNames) + .map((name) => allTypeDefs[name]) + .filter((typeDef) => typeDef !== undefined) + .map((typeDef) => ({ + properties: typeDef.tags.property.map((property) => ({ + name: property.identifier.name, + description: property.description, + type: property.type, + })), + name: typeDef.tags.typedef.find((tag) => tag.identifier).identifier.name, + })); +}; From 8e5dd800d45c430ec8dc4a2a6a203e2243497739 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 16:55:54 -0700 Subject: [PATCH 10/42] chore: Polish styles on type def reference --- src/components/TypeDefReference.js | 34 +++++++++++++-------- src/components/TypeDefReference.module.scss | 30 ++++++++++-------- 2 files changed, 39 insertions(+), 25 deletions(-) diff --git a/src/components/TypeDefReference.js b/src/components/TypeDefReference.js index bbcbb989d..d0a0090c0 100644 --- a/src/components/TypeDefReference.js +++ b/src/components/TypeDefReference.js @@ -1,20 +1,26 @@ -import React from 'react'; +import React, { Children } from 'react'; import Markdown from 'react-markdown'; import PropTypes from 'prop-types'; import styles from './TypeDefReference.module.scss'; -const RenderDescription = ({ children }) => ( - -

{` //`}

{children} - -); +const RenderDescription = ({ children, ...props }) => { + if (Children.toArray(children).length === 0) { + return null; + } + + return ( + + {` //`} {children} + + ); +}; const RenderProperty = ({ property }) => { const { type, name, description } = property; return (
- {name} + {name}: {type}, { const { properties, name } = typeDef; return ( -
-
{name}
-
-
{`{`}
+
+

+ {name} +

+ +
{`{`}
{properties.map((property, i) => ( ))} -
{`}`}
-
+
{'}'}
+
); }; diff --git a/src/components/TypeDefReference.module.scss b/src/components/TypeDefReference.module.scss index ae862b4b5..526d4b317 100644 --- a/src/components/TypeDefReference.module.scss +++ b/src/components/TypeDefReference.module.scss @@ -1,39 +1,45 @@ .container { color: var(--color-neutrals-500); font-family: var(--code-font); - font-size: 0.875rem; line-height: 1.5; - margin-top: 2rem; + + &:not(:last-child) { + margin-bottom: 2rem; + } +} + +.syntax { + color: var(--color-neutrals-500); } .name { + display: block; font-size: 1rem; - font-family: var(--primary-font-family); + font-weight: normal; color: var(--color-neutrals-800); margin-bottom: 0.5rem; } -.block { - margin-left: 0.5rem; -} - -.topBracket { - margin-bottom: 1rem; -} - .type { color: var(--color-green-500); background: var(--color-green-050); } .description { + color: var(--color-neutrals-500); + > p { display: inline; } } +.typeDef { + display: block; + font-size: 0.875rem; +} + .propertyContainer { - margin: 0 0 1rem 1.5rem; + margin-left: 1rem; } .propertyName { From 6c5f51a7183f4307f8caf78a9a4c7a22dd43d446 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 17:13:39 -0700 Subject: [PATCH 11/42] chore: better spacing for all p tags --- src/components/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index b7f1ef8fe..45ae8473b 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -107,7 +107,7 @@ img { p { margin: 0; - margin-top: 8px; + margin-top: 1em; } h1, From cc6c84f0464fb49dd8b17b835be1c7dc74165455 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 18:07:43 -0700 Subject: [PATCH 12/42] feat: Create a CodeDef component to abstract the styles of a code definition --- src/components/CodeDef/Block.js | 11 ++++++++ src/components/CodeDef/Bracket.js | 13 +++++++++ src/components/CodeDef/CodeDef.js | 28 +++++++++++++++++++ src/components/CodeDef/CodeDef.module.scss | 30 ++++++++++++++++++++ src/components/CodeDef/Comment.js | 32 ++++++++++++++++++++++ src/components/CodeDef/Identifier.js | 13 +++++++++ src/components/CodeDef/Keyword.js | 13 +++++++++ src/components/CodeDef/Type.js | 11 ++++++++ src/components/CodeDef/index.js | 1 + 9 files changed, 152 insertions(+) create mode 100644 src/components/CodeDef/Block.js create mode 100644 src/components/CodeDef/Bracket.js create mode 100644 src/components/CodeDef/CodeDef.js create mode 100644 src/components/CodeDef/CodeDef.module.scss create mode 100644 src/components/CodeDef/Comment.js create mode 100644 src/components/CodeDef/Identifier.js create mode 100644 src/components/CodeDef/Keyword.js create mode 100644 src/components/CodeDef/Type.js create mode 100644 src/components/CodeDef/index.js diff --git a/src/components/CodeDef/Block.js b/src/components/CodeDef/Block.js new file mode 100644 index 000000000..7ebeb96aa --- /dev/null +++ b/src/components/CodeDef/Block.js @@ -0,0 +1,11 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './CodeDef.module.scss'; + +const Block = ({ children }) =>
{children}
; + +Block.propTypes = { + children: PropTypes.node, +}; + +export default Block; diff --git a/src/components/CodeDef/Bracket.js b/src/components/CodeDef/Bracket.js new file mode 100644 index 000000000..c7cbce42d --- /dev/null +++ b/src/components/CodeDef/Bracket.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './CodeDef.module.scss'; + +const Punctuation = ({ children }) => ( + {children} +); + +Punctuation.propTypes = { + children: PropTypes.node, +}; + +export default Punctuation; diff --git a/src/components/CodeDef/CodeDef.js b/src/components/CodeDef/CodeDef.js new file mode 100644 index 000000000..38545dd28 --- /dev/null +++ b/src/components/CodeDef/CodeDef.js @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import styles from './CodeDef.module.scss'; +import Block from './Block'; +import Comment from './Comment'; +import Identifier from './Identifier'; +import Keyword from './Keyword'; +import Bracket from './Bracket'; +import Type from './Type'; + +const CodeDef = ({ className, children }) => ( + {children} +); + +CodeDef.propTypes = { + className: PropTypes.string, + children: PropTypes.node, +}; + +CodeDef.Block = Block; +CodeDef.Comment = Comment; +CodeDef.Keyword = Keyword; +CodeDef.Identifier = Identifier; +CodeDef.Bracket = Bracket; +CodeDef.Type = Type; + +export default CodeDef; diff --git a/src/components/CodeDef/CodeDef.module.scss b/src/components/CodeDef/CodeDef.module.scss new file mode 100644 index 000000000..adc936c79 --- /dev/null +++ b/src/components/CodeDef/CodeDef.module.scss @@ -0,0 +1,30 @@ +.container { + display: block; + line-height: 2rem; +} + +.keyword, +.identifier { + color: var(--color-neutrals-700); +} + +.type { + color: var(--color-green-500); + background: var(--color-green-050); +} + +.comment { + color: var(--color-neutrals-500); + + > p { + display: inline; + } +} + +.bracket { + color: var(--color-neutrals-500); +} + +.block { + margin-left: 1rem; +} diff --git a/src/components/CodeDef/Comment.js b/src/components/CodeDef/Comment.js new file mode 100644 index 000000000..a111ef82f --- /dev/null +++ b/src/components/CodeDef/Comment.js @@ -0,0 +1,32 @@ +import React, { Children } from 'react'; +import PropTypes from 'prop-types'; +import Markdown from 'react-markdown'; +import styles from './CodeDef.module.scss'; + +const Content = ({ children, ...props }) => { + if (Children.toArray(children).length === 0) { + return null; + } + + return ( + + {`//`} {children} + + ); +}; + +const renderers = { + root: Content, +}; + +const Comment = ({ text }) => ; + +Content.propTypes = { + children: PropTypes.node, +}; + +Comment.propTypes = { + text: PropTypes.string, +}; + +export default Comment; diff --git a/src/components/CodeDef/Identifier.js b/src/components/CodeDef/Identifier.js new file mode 100644 index 000000000..9c283855f --- /dev/null +++ b/src/components/CodeDef/Identifier.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './CodeDef.module.scss'; + +const Identifier = ({ children }) => ( + {children} +); + +Identifier.propTypes = { + children: PropTypes.node, +}; + +export default Identifier; diff --git a/src/components/CodeDef/Keyword.js b/src/components/CodeDef/Keyword.js new file mode 100644 index 000000000..69d37e70d --- /dev/null +++ b/src/components/CodeDef/Keyword.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './CodeDef.module.scss'; + +const Keyword = ({ children }) => ( + {children} +); + +Keyword.propTypes = { + children: PropTypes.node, +}; + +export default Keyword; diff --git a/src/components/CodeDef/Type.js b/src/components/CodeDef/Type.js new file mode 100644 index 000000000..fc2300a3d --- /dev/null +++ b/src/components/CodeDef/Type.js @@ -0,0 +1,11 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './CodeDef.module.scss'; + +const Type = ({ children }) => {children}; + +Type.propTypes = { + children: PropTypes.node, +}; + +export default Type; diff --git a/src/components/CodeDef/index.js b/src/components/CodeDef/index.js new file mode 100644 index 000000000..a87df9c3c --- /dev/null +++ b/src/components/CodeDef/index.js @@ -0,0 +1 @@ +export { default } from './CodeDef'; From d8e80b32db379b540fb7a7c8bf8f17e533266768 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 18:08:10 -0700 Subject: [PATCH 13/42] chore: Use CodeDef in TypeDefReference --- src/components/TypeDefReference.js | 65 +++++---------------- src/components/TypeDefReference.module.scss | 39 +------------ 2 files changed, 17 insertions(+), 87 deletions(-) diff --git a/src/components/TypeDefReference.js b/src/components/TypeDefReference.js index d0a0090c0..d041eb69d 100644 --- a/src/components/TypeDefReference.js +++ b/src/components/TypeDefReference.js @@ -1,36 +1,7 @@ -import React, { Children } from 'react'; -import Markdown from 'react-markdown'; +import React from 'react'; import PropTypes from 'prop-types'; import styles from './TypeDefReference.module.scss'; - -const RenderDescription = ({ children, ...props }) => { - if (Children.toArray(children).length === 0) { - return null; - } - - return ( - - {` //`} {children} - - ); -}; - -const RenderProperty = ({ property }) => { - const { type, name, description } = property; - - return ( -
- {name}: - {type}, - -
- ); -}; +import CodeDef from './CodeDef'; const TypeDefReference = ({ typeDef }) => { const { properties, name } = typeDef; @@ -40,29 +11,23 @@ const TypeDefReference = ({ typeDef }) => {

{name}

- -
{`{`}
- {properties.map((property, i) => ( - - ))} -
{'}'}
- + + {'{'} + + {properties.map((property) => ( +
+ {property.name}: + {property.type},{' '} + +
+ ))} + + {'}'} +
); }; -RenderProperty.propTypes = { - property: PropTypes.shape({ - type: PropTypes.string, - name: PropTypes.string, - description: PropTypes.string, - }), -}; - -RenderDescription.propTypes = { - children: PropTypes.node.isRequired, -}; - TypeDefReference.propTypes = { typeDef: PropTypes.shape({ properties: PropTypes.array, diff --git a/src/components/TypeDefReference.module.scss b/src/components/TypeDefReference.module.scss index 526d4b317..b8f17b3b5 100644 --- a/src/components/TypeDefReference.module.scss +++ b/src/components/TypeDefReference.module.scss @@ -1,48 +1,13 @@ -.container { - color: var(--color-neutrals-500); - font-family: var(--code-font); - line-height: 1.5; - - &:not(:last-child) { - margin-bottom: 2rem; - } -} - -.syntax { - color: var(--color-neutrals-500); +.container:not(:last-child) { + margin-bottom: 2rem; } .name { - display: block; font-size: 1rem; font-weight: normal; - color: var(--color-neutrals-800); margin-bottom: 0.5rem; } -.type { - color: var(--color-green-500); - background: var(--color-green-050); -} - -.description { - color: var(--color-neutrals-500); - - > p { - display: inline; - } -} - .typeDef { - display: block; font-size: 0.875rem; } - -.propertyContainer { - margin-left: 1rem; -} - -.propertyName { - color: var(--color-neutrals-700); - margin-right: 0.5rem; -} From 630ff4f76bf7f5cf053ece06eabe755fff884bfc Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 18:16:52 -0700 Subject: [PATCH 14/42] feat: Add operator component for code def --- src/components/CodeDef/CodeDef.js | 6 ++++-- src/components/CodeDef/CodeDef.module.scss | 5 +++-- src/components/CodeDef/Operator.js | 13 +++++++++++++ 3 files changed, 20 insertions(+), 4 deletions(-) create mode 100644 src/components/CodeDef/Operator.js diff --git a/src/components/CodeDef/CodeDef.js b/src/components/CodeDef/CodeDef.js index 38545dd28..b81f24a10 100644 --- a/src/components/CodeDef/CodeDef.js +++ b/src/components/CodeDef/CodeDef.js @@ -3,10 +3,11 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import styles from './CodeDef.module.scss'; import Block from './Block'; +import Bracket from './Bracket'; import Comment from './Comment'; import Identifier from './Identifier'; import Keyword from './Keyword'; -import Bracket from './Bracket'; +import Operator from './Operator'; import Type from './Type'; const CodeDef = ({ className, children }) => ( @@ -19,10 +20,11 @@ CodeDef.propTypes = { }; CodeDef.Block = Block; +CodeDef.Bracket = Bracket; CodeDef.Comment = Comment; CodeDef.Keyword = Keyword; CodeDef.Identifier = Identifier; -CodeDef.Bracket = Bracket; +CodeDef.Operator = Operator; CodeDef.Type = Type; export default CodeDef; diff --git a/src/components/CodeDef/CodeDef.module.scss b/src/components/CodeDef/CodeDef.module.scss index adc936c79..9a58ea643 100644 --- a/src/components/CodeDef/CodeDef.module.scss +++ b/src/components/CodeDef/CodeDef.module.scss @@ -3,7 +3,6 @@ line-height: 2rem; } -.keyword, .identifier { color: var(--color-neutrals-700); } @@ -21,7 +20,9 @@ } } -.bracket { +.keyword, +.bracket, +.operator { color: var(--color-neutrals-500); } diff --git a/src/components/CodeDef/Operator.js b/src/components/CodeDef/Operator.js new file mode 100644 index 000000000..0b3467347 --- /dev/null +++ b/src/components/CodeDef/Operator.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './CodeDef.module.scss'; + +const Operator = ({ children }) => ( + {children} +); + +Operator.propTypes = { + children: PropTypes.node, +}; + +export default Operator; From 2f86c6282711b4474939bf1654aca6f70bc3de4c Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 18:24:22 -0700 Subject: [PATCH 15/42] chore: Better line height and color for keywords --- src/components/CodeDef/CodeDef.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CodeDef/CodeDef.module.scss b/src/components/CodeDef/CodeDef.module.scss index 9a58ea643..1146d3b6c 100644 --- a/src/components/CodeDef/CodeDef.module.scss +++ b/src/components/CodeDef/CodeDef.module.scss @@ -1,6 +1,6 @@ .container { display: block; - line-height: 2rem; + line-height: 2; } .identifier { @@ -23,7 +23,7 @@ .keyword, .bracket, .operator { - color: var(--color-neutrals-500); + color: var(--color-neutrals-600); } .block { From 720e4c1ac39bb62b4ae6c11fb44a01ec5bf36d52 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 18:24:31 -0700 Subject: [PATCH 16/42] chore: Update FunctionDefinition to use CodeDef --- src/components/FunctionDefinition.js | 74 +++++++++---------- src/components/FunctionDefinition.module.scss | 29 -------- 2 files changed, 33 insertions(+), 70 deletions(-) diff --git a/src/components/FunctionDefinition.js b/src/components/FunctionDefinition.js index 6507d8cc2..0e6dc1604 100644 --- a/src/components/FunctionDefinition.js +++ b/src/components/FunctionDefinition.js @@ -1,50 +1,42 @@ -import React, { Children } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; -import Markdown from 'react-markdown'; +import CodeDef from './CodeDef'; import styles from './FunctionDefinition.module.scss'; -const ParamDescription = ({ children, ...props }) => { - if (Children.toArray(children).length === 0) { - return null; - } - - return ( - - {' //'} {children} - - ); -}; - -ParamDescription.propTypes = { - children: PropTypes.node, -}; - const FunctionDefinition = ({ className, params, returnValue }) => { return ( -
- - {params.length > 0 ? 'function (' : 'function ()'} - - {params.map((param, i) => ( -
- - {param.type.startsWith('...') ? `...${param.name}` : param.name}:{' '} - - {param.type} - {i !== params.length - 1 && ', '} - -
- ))} - {params.length > 0 && )} - => - {returnValue.type} -
+ + {params.length > 0 ? ( + <> + function{' '} + ( + + ) : ( + <> + function{' '} + () + + )} + {params.length > 0 && ( + + {params.map((param, i) => ( +
+ + {param.type.startsWith('...') ? `...${param.name}` : param.name} + :{' '} + + {param.type} + {i !== params.length - 1 ? ', ' : ' '} + +
+ ))} + + )} + {params.length > 0 && )} + => + {returnValue.type} + ); }; diff --git a/src/components/FunctionDefinition.module.scss b/src/components/FunctionDefinition.module.scss index 696cfe5ec..64fe73e35 100644 --- a/src/components/FunctionDefinition.module.scss +++ b/src/components/FunctionDefinition.module.scss @@ -1,32 +1,3 @@ .container { - font-family: var(--code-font); font-size: 0.875rem; - line-height: 1.5; -} - -.line:not(:last-child) { - margin-bottom: 0.5rem; -} - -.param { - color: var(--color-neutrals-700); - margin-left: 1rem; -} - -.paramDescription { - color: var(--color-neutrals-500); - - > p { - color: inherit; - display: inline; - } -} - -.keyword { - color: var(--color-neutrals-600); -} - -.type { - color: var(--color-green-500); - background: var(--color-green-050); } From 361a71f52bb8e26e104582e460813212d6a81fc4 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 18:34:26 -0700 Subject: [PATCH 17/42] feat: Update ConstantReference to use CodeDef --- src/components/ConstantReference.js | 20 ++++++++++++-------- src/components/ConstantReference.module.scss | 14 +++++--------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/ConstantReference.js b/src/components/ConstantReference.js index 981c82fa6..746fbf07c 100644 --- a/src/components/ConstantReference.js +++ b/src/components/ConstantReference.js @@ -1,21 +1,25 @@ import React from 'react'; import Markdown from 'react-markdown'; import PropTypes from 'prop-types'; +import CodeDef from './CodeDef'; import styles from './ConstantReference.module.scss'; const ConstantReference = ({ constant }) => { const { name, values, type } = constant; + return ( -
-
{name}
-
{type === 'array' ? '[' : '{'}
-
+ +

+ {name} +

+ {type === 'array' ? '[' : '{'} + {values.map((value, i) => ( ))} -
-
{type === 'array' ? ']' : '}'}
-
+ + {type === 'array' ? ']' : '}'} + ); }; @@ -23,7 +27,7 @@ ConstantReference.propTypes = { constant: PropTypes.shape({ type: PropTypes.string, name: PropTypes.string, - values: PropTypes.array, + values: PropTypes.any, }), }; diff --git a/src/components/ConstantReference.module.scss b/src/components/ConstantReference.module.scss index d25166206..5f82e15a6 100644 --- a/src/components/ConstantReference.module.scss +++ b/src/components/ConstantReference.module.scss @@ -1,15 +1,14 @@ .container { - color: var(--color-neutrals-500); - font-family: var(--code-font); font-size: 0.875rem; - line-height: 1.5; - margin-top: 2rem; + + &:not(:last-child) { + margin-bottom: 2rem; + } } .name { font-size: 1rem; - font-family: var(--primary-font-family); - color: var(--color-neutrals-800); + font-weight: normal; margin-bottom: 0.5rem; } @@ -17,6 +16,3 @@ margin-left: 0.5rem; } -.constantContainer { - margin: 0 0 1rem 1.5rem; -} \ No newline at end of file From b0ecdfcdaaf39aa791004245d0fd439c790036ab Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 19:38:44 -0700 Subject: [PATCH 18/42] feat: Add number and string components for code def --- src/components/CodeDef/CodeDef.js | 4 ++++ src/components/CodeDef/CodeDef.module.scss | 8 ++++++++ src/components/CodeDef/Number.js | 13 +++++++++++++ src/components/CodeDef/String.js | 13 +++++++++++++ 4 files changed, 38 insertions(+) create mode 100644 src/components/CodeDef/Number.js create mode 100644 src/components/CodeDef/String.js diff --git a/src/components/CodeDef/CodeDef.js b/src/components/CodeDef/CodeDef.js index b81f24a10..27077e647 100644 --- a/src/components/CodeDef/CodeDef.js +++ b/src/components/CodeDef/CodeDef.js @@ -7,7 +7,9 @@ import Bracket from './Bracket'; import Comment from './Comment'; import Identifier from './Identifier'; import Keyword from './Keyword'; +import NumberValue from './Number'; import Operator from './Operator'; +import StringValue from './String'; import Type from './Type'; const CodeDef = ({ className, children }) => ( @@ -24,7 +26,9 @@ CodeDef.Bracket = Bracket; CodeDef.Comment = Comment; CodeDef.Keyword = Keyword; CodeDef.Identifier = Identifier; +CodeDef.Number = NumberValue; CodeDef.Operator = Operator; +CodeDef.String = StringValue; CodeDef.Type = Type; export default CodeDef; diff --git a/src/components/CodeDef/CodeDef.module.scss b/src/components/CodeDef/CodeDef.module.scss index 1146d3b6c..ace3ea14b 100644 --- a/src/components/CodeDef/CodeDef.module.scss +++ b/src/components/CodeDef/CodeDef.module.scss @@ -29,3 +29,11 @@ .block { margin-left: 1rem; } + +.string { + color: var(--color-green-500); +} + +.number { + color: var(--color-red-400); +} diff --git a/src/components/CodeDef/Number.js b/src/components/CodeDef/Number.js new file mode 100644 index 000000000..ddff1828c --- /dev/null +++ b/src/components/CodeDef/Number.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './CodeDef.module.scss'; + +const NumberValue = ({ value }) => ( + {value} +); + +NumberValue.propTypes = { + value: PropTypes.number.isRequired, +}; + +export default NumberValue; diff --git a/src/components/CodeDef/String.js b/src/components/CodeDef/String.js new file mode 100644 index 000000000..c797d397b --- /dev/null +++ b/src/components/CodeDef/String.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './CodeDef.module.scss'; + +const StringValue = ({ value }) => ( + "{value}" +); + +StringValue.propTypes = { + value: PropTypes.string.isRequired, +}; + +export default StringValue; From b15f1207c1ad846d337a6fcfe8f370eb4e0b7f4a Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 19:41:54 -0700 Subject: [PATCH 19/42] feat: Add syntax highlighting for constants --- src/components/ConstantReference.js | 76 ++++++++++++++++---- src/components/ConstantReference.module.scss | 1 + src/hooks/useApiDoc.js | 8 +-- 3 files changed, 66 insertions(+), 19 deletions(-) diff --git a/src/components/ConstantReference.js b/src/components/ConstantReference.js index 746fbf07c..49f2ed1b9 100644 --- a/src/components/ConstantReference.js +++ b/src/components/ConstantReference.js @@ -1,33 +1,85 @@ -import React from 'react'; -import Markdown from 'react-markdown'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import CodeDef from './CodeDef'; import styles from './ConstantReference.module.scss'; +const Value = ({ value }) => { + const type = typeof value; + + if (Array.isArray(value)) { + return ( + <> + [ + + {value.map((item, idx) => ( +
+ + {idx !== value.length - 1 && ','} +
+ ))} + + ] + + ); + } + + if (value == null) { + return {String(value)}; + } + + console.log({ value, type }); + + switch (type) { + case 'object': + return ( + <> + {'{ '} + + {Object.entries(value).map(([key, value], idx, arr) => ( +
+ {key}: + + {idx !== arr.length - 1 && ', '} +
+ ))} + + {' }'} + + ); + case 'string': + return ; + case 'number': + return ; + default: + return value; + } +}; + +Value.propTypes = { + value: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.array, + PropTypes.string, + ]), +}; + const ConstantReference = ({ constant }) => { - const { name, values, type } = constant; + const { name, value } = constant; return (

{name}

- {type === 'array' ? '[' : '{'} - - {values.map((value, i) => ( - - ))} - - {type === 'array' ? ']' : '}'} + ); }; ConstantReference.propTypes = { constant: PropTypes.shape({ - type: PropTypes.string, name: PropTypes.string, - values: PropTypes.any, + value: PropTypes.any, }), }; diff --git a/src/components/ConstantReference.module.scss b/src/components/ConstantReference.module.scss index 5f82e15a6..371c3175b 100644 --- a/src/components/ConstantReference.module.scss +++ b/src/components/ConstantReference.module.scss @@ -1,4 +1,5 @@ .container { + color: var(--color-neutrals-600); font-size: 0.875rem; &:not(:last-child) { diff --git a/src/hooks/useApiDoc.js b/src/hooks/useApiDoc.js index c3d2b0c9e..74f9b8ef1 100644 --- a/src/hooks/useApiDoc.js +++ b/src/hooks/useApiDoc.js @@ -48,13 +48,7 @@ const useApiDoc = (name) => { .map((member) => { return { name: `${name}.${member}`, - type: api[member] instanceof Array ? 'array' : typeof api[member], - values: - api[member] instanceof Array - ? api[member].map((el) => JSON.stringify(el)) - : Object.getOwnPropertyNames(api[member]).map( - (key) => `${key}: ${JSON.stringify(api[member][key])}` - ), + value: api[member], }; }); }; From 83d33f841bf35485b8fdb76221b6d57bbf2ea217 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 19:55:53 -0700 Subject: [PATCH 20/42] refactor: Extract value to JsonValue component --- src/components/ConstantReference.js | 65 +------------------- src/components/JsonValue.js | 92 +++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+), 62 deletions(-) create mode 100644 src/components/JsonValue.js diff --git a/src/components/ConstantReference.js b/src/components/ConstantReference.js index 49f2ed1b9..3e8d353a8 100644 --- a/src/components/ConstantReference.js +++ b/src/components/ConstantReference.js @@ -1,68 +1,9 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import CodeDef from './CodeDef'; +import JsonValue from './JsonValue'; import styles from './ConstantReference.module.scss'; -const Value = ({ value }) => { - const type = typeof value; - - if (Array.isArray(value)) { - return ( - <> - [ - - {value.map((item, idx) => ( -
- - {idx !== value.length - 1 && ','} -
- ))} - - ] - - ); - } - - if (value == null) { - return {String(value)}; - } - - console.log({ value, type }); - - switch (type) { - case 'object': - return ( - <> - {'{ '} - - {Object.entries(value).map(([key, value], idx, arr) => ( -
- {key}: - - {idx !== arr.length - 1 && ', '} -
- ))} - - {' }'} - - ); - case 'string': - return ; - case 'number': - return ; - default: - return value; - } -}; - -Value.propTypes = { - value: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.array, - PropTypes.string, - ]), -}; - const ConstantReference = ({ constant }) => { const { name, value } = constant; @@ -71,7 +12,7 @@ const ConstantReference = ({ constant }) => {

{name}

- + ); }; diff --git a/src/components/JsonValue.js b/src/components/JsonValue.js new file mode 100644 index 000000000..6db4ea9a5 --- /dev/null +++ b/src/components/JsonValue.js @@ -0,0 +1,92 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import CodeDef from './CodeDef'; + +const JsonValue = ({ inline, value }) => { + if (value == null) { + return {String(value)}; + } + + if (Array.isArray(value)) { + return ; + } + + switch (typeof value) { + case 'object': + return ; + case 'string': + return ; + case 'number': + return ; + default: + return value; + } +}; + +const ObjectValue = ({ inline, value }) => { + const PropertyContainer = inline ? Fragment : CodeDef.Block; + + return ( + <> + {'{ '} + + {Object.entries(value).map(([key, value], idx, arr) => { + const Container = inline ? Fragment : 'div'; + + return ( + + {key}: + + {idx !== arr.length - 1 && ', '} + + ); + })} + + {' }'} + + ); +}; + +const ArrayValue = ({ inline, value }) => { + const ItemContainer = inline ? Fragment : CodeDef.Block; + + return ( + <> + [ + + {value.map((item, idx) => { + const Container = inline ? Fragment : 'div'; + + return ( + + + {idx !== value.length - 1 && ', '} + + ); + })} + + ] + + ); +}; + +ArrayValue.propTypes = { + inline: PropTypes.bool, + value: PropTypes.array.isRequired, +}; + +ObjectValue.propTypes = { + inline: PropTypes.bool, + value: PropTypes.object.isRequired, +}; + +JsonValue.propTypes = { + inline: PropTypes.bool, + value: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.array, + PropTypes.string, + ]), +}; + +export default JsonValue; From ce0eb319f140cb995f33afd76fe24843c12a4586 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 20:07:56 -0700 Subject: [PATCH 21/42] chore: Swap margins on p tags --- src/components/styles.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index 45ae8473b..28cb0e2bf 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -106,8 +106,8 @@ img { } p { - margin: 0; - margin-top: 1em; + margin-top: 0; + margin-bottom: 1em; } h1, From 23190b09367ce7c0df3ad72ada494c99ca05a801 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 20:25:11 -0700 Subject: [PATCH 22/42] feat: Create a Markdown component --- src/components/Markdown.js | 15 +++++++++++++++ src/components/Markdown.module.scss | 9 +++++++++ 2 files changed, 24 insertions(+) create mode 100644 src/components/Markdown.js create mode 100644 src/components/Markdown.module.scss diff --git a/src/components/Markdown.js b/src/components/Markdown.js new file mode 100644 index 000000000..17a9884f7 --- /dev/null +++ b/src/components/Markdown.js @@ -0,0 +1,15 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import ReactMarkdown from 'react-markdown'; +import styles from './Markdown.module.scss'; + +const Markdown = ({ className, ...props }) => ( + +); + +Markdown.propTypes = { + className: PropTypes.string, +}; + +export default Markdown; diff --git a/src/components/Markdown.module.scss b/src/components/Markdown.module.scss new file mode 100644 index 000000000..0c16006dc --- /dev/null +++ b/src/components/Markdown.module.scss @@ -0,0 +1,9 @@ +.container { + > *:first-child { + margin-top: 0; + } + + code { + background: var(--color-neutrals-100); + } +} From 41b654c42e243959b85ab451a560fbf831f1e7cc Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 20:25:23 -0700 Subject: [PATCH 23/42] feat: Change default list styles --- src/components/styles.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index 28cb0e2bf..63f100d15 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -166,12 +166,8 @@ button, } ul { - padding-left: 30px; - line-height: 1.6; -} - -li { - margin-bottom: 1rem; + margin: 0; + padding-left: 2rem; } code { From 71932156e65ba89ebcfe2170dca9d3980b915aaa Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 20:25:58 -0700 Subject: [PATCH 24/42] feat: Use Markdown component for reference templates --- src/templates/ApiReferenceTemplate.js | 4 ++-- src/templates/ComponentReferenceTemplate.js | 13 +++---------- src/templates/ReferenceTemplate.module.scss | 10 ---------- 3 files changed, 5 insertions(+), 22 deletions(-) diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js index b6258c32d..242aeabbb 100644 --- a/src/templates/ApiReferenceTemplate.js +++ b/src/templates/ApiReferenceTemplate.js @@ -3,9 +3,9 @@ import cx from 'classnames'; import { graphql } from 'gatsby'; import PropTypes from 'prop-types'; import InlineCodeSnippet from '../components/InlineCodeSnippet'; -import ReactMarkdown from 'react-markdown'; import Layout from '../components/Layout'; import PageTitle from '../components/PageTitle'; +import Markdown from '../components/Markdown'; import MethodReference from '../components/MethodReference'; import TypeDefReference from '../components/TypeDefReference'; import ConstantReference from '../components/ConstantReference'; @@ -39,7 +39,7 @@ const ApiReferenceTemplate = ({ data }) => { 'intro-text' )} > - +
)} diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js index 2b401671f..5031806a0 100644 --- a/src/templates/ComponentReferenceTemplate.js +++ b/src/templates/ComponentReferenceTemplate.js @@ -3,10 +3,10 @@ import cx from 'classnames'; import { graphql } from 'gatsby'; import PropTypes from 'prop-types'; import InlineCodeSnippet from '../components/InlineCodeSnippet'; -import ReactMarkdown from 'react-markdown'; import ReferenceExample from '../components/ReferenceExample'; import Layout from '../components/Layout'; import PageTitle from '../components/PageTitle'; +import Markdown from '../components/Markdown'; import MethodReference from '../components/MethodReference'; import SEO from '../components/Seo'; import PropList from '../components/PropList'; @@ -23,7 +23,6 @@ const previewStyles = { }; const ComponentReferenceTemplate = ({ data }) => { - // const [isOpen, setIsOpen] = useState(false); const { mdx } = data; const { frontmatter } = mdx; const { title, description, component } = frontmatter; @@ -40,14 +39,8 @@ const ComponentReferenceTemplate = ({ data }) => { {component} -
- +
+
diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss index 32003863d..f2cc250d0 100644 --- a/src/templates/ReferenceTemplate.module.scss +++ b/src/templates/ReferenceTemplate.module.scss @@ -1,13 +1,3 @@ -.description { - ul { - padding-top: 0.5rem; - } - - li { - margin: 0; - } -} - .section:not(:last-child) { margin-bottom: 2rem; } From d957f4df9637e9fe08018e09f87285ddc5d7c150 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 20:30:34 -0700 Subject: [PATCH 25/42] feat: Use the Markdown component for MethodReference --- src/components/MethodReference.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MethodReference.js b/src/components/MethodReference.js index ecf63d9be..720c90843 100644 --- a/src/components/MethodReference.js +++ b/src/components/MethodReference.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReferenceExample from './ReferenceExample'; import FunctionDefinition from './FunctionDefinition'; -import Markdown from 'react-markdown'; +import Markdown from './Markdown'; import styles from './MethodReference.module.scss'; const MethodReference = ({ className, method }) => ( From 6a72ead535dce81fcb063d19e07bc9abb73c4d35 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 20:30:57 -0700 Subject: [PATCH 26/42] chore: Minor tweaks to code inside markdown --- src/components/Markdown.module.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Markdown.module.scss b/src/components/Markdown.module.scss index 0c16006dc..87ee2ad49 100644 --- a/src/components/Markdown.module.scss +++ b/src/components/Markdown.module.scss @@ -4,6 +4,8 @@ } code { - background: var(--color-neutrals-100); + padding: 0.125rem; + background: var(--color-neutrals-200); + border-radius: 2px; } } From 3e36937100cc61b94d2f0ac19bf9e5433952b322 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 20:55:34 -0700 Subject: [PATCH 27/42] feat: Remove bottom margin in markdown if p tag is last --- src/components/Markdown.module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Markdown.module.scss b/src/components/Markdown.module.scss index 87ee2ad49..a0b072a78 100644 --- a/src/components/Markdown.module.scss +++ b/src/components/Markdown.module.scss @@ -8,4 +8,8 @@ background: var(--color-neutrals-200); border-radius: 2px; } + + p:last-child { + margin-bottom: 0; + } } From db01bd6e65a754f127149d619246ece8bd08998a Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 20:56:38 -0700 Subject: [PATCH 28/42] feat: Add small spacing and border radius on types --- src/components/CodeDef/CodeDef.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/CodeDef/CodeDef.module.scss b/src/components/CodeDef/CodeDef.module.scss index ace3ea14b..290b27d0f 100644 --- a/src/components/CodeDef/CodeDef.module.scss +++ b/src/components/CodeDef/CodeDef.module.scss @@ -8,6 +8,8 @@ } .type { + padding: 0.125rem; + border-radius: 0.125rem; color: var(--color-green-500); background: var(--color-green-050); } From a5591d480989859530d0758a724a188ecb5a9dbd Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 21:03:45 -0700 Subject: [PATCH 29/42] feat: Polish some more styles on prop list --- src/components/PropList.js | 51 ++++++++++++++++++----------- src/components/PropList.module.scss | 43 ++++++++++++------------ 2 files changed, 53 insertions(+), 41 deletions(-) diff --git a/src/components/PropList.js b/src/components/PropList.js index 1d2f5a292..53df022b6 100644 --- a/src/components/PropList.js +++ b/src/components/PropList.js @@ -1,8 +1,9 @@ import React from 'react'; import cx from 'classnames'; import PropTypes from 'prop-types'; +import CodeDef from './CodeDef'; import FunctionDefinition from './FunctionDefinition'; -import Markdown from 'react-markdown'; +import Markdown from './Markdown'; import ReferenceExample from './ReferenceExample'; import styles from './PropList.module.scss'; import { format } from 'date-fns'; @@ -20,28 +21,34 @@ const PropTypeInfo = ({ type }) => { const { itemTypes } = type.meta; return itemTypes.raw === 'oneOf' ? ( - -
{' -
+ + {'<'} + Array of + -
-
{'>'}
- + + {'>'} + ) : ( ); } case 'oneOf': return ( - -
{' -
+ + {'<'} + One of + {type.meta.constants.map((constant) => ( -
{constant},
+
+ + {constant}, + +
))} -
-
{'>'}
- + + {'>'} + ); case 'oneOfType': return type.meta.types.map((type, idx) => ( @@ -95,7 +102,7 @@ const PropList = ({ propTypes }) => { deprecated )}
- {type.name} + {type.name} {defaultValue !== undefined && (
DEFAULT
@@ -110,20 +117,26 @@ const PropList = ({ propTypes }) => { Due {format(new Date(deprecation.date), 'MMMM do, yyyy')}
)} {description && ( )} - +
+ +
{examples.map((example, idx) => ( - + ))}
diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss index 2aaba2056..f99884930 100644 --- a/src/components/PropList.module.scss +++ b/src/components/PropList.module.scss @@ -16,28 +16,20 @@ .info { word-break: break-all; - - h3 { - margin-top: 0; - } } .default { margin-top: 2rem; - color: var(--color-neutrals-700); .label { + color: var(--color-neutrals-600); font-size: 0.75rem; font-weight: bold; } } -.type { - color: var(--color-neutrals-600); -} - .deprecation { - padding: 0.25rem; + padding: 0.5rem; background: var(--color-red-100); margin-bottom: 1rem; } @@ -48,16 +40,20 @@ margin-bottom: 1rem; } -.markdownContainer > *:first-child { - margin-top: 0; -} +.deprecationMarkdownContainer { + p:last-child { + margin-bottom: 0; + } -.details { - &:not(:last-child):not(:empty) { - margin-bottom: 1rem; + code { + background: var(--color-red-200); } } +.details:not(:last-child):not(:empty) { + margin-bottom: 1rem; +} + .flagged { font-size: 0.75rem; color: var(--color-red-400); @@ -66,13 +62,8 @@ font-weight: bold; } -.arg { - padding-left: 1rem; -} - -.listLike { +.codeDef { font-size: 0.875rem; - color: var(--color-neutrals-600); max-height: 320px; overflow-y: auto; } @@ -92,3 +83,11 @@ padding-bottom: 0; } } + +.propInfoContainer:not(:last-child) { + margin-bottom: 1rem; +} + +.example:not(:last-child) { + margin-bottom: 2rem; +} From b120fdcb0021f5cc1142ca73b25e06b868a5d207 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 21:05:55 -0700 Subject: [PATCH 30/42] chore: Remove border between examples --- src/templates/ComponentReferenceTemplate.module.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/templates/ComponentReferenceTemplate.module.scss b/src/templates/ComponentReferenceTemplate.module.scss index 2b0b44c18..887a5965d 100644 --- a/src/templates/ComponentReferenceTemplate.module.scss +++ b/src/templates/ComponentReferenceTemplate.module.scss @@ -1,6 +1,4 @@ .componentExample:not(:last-child) { - border-bottom: 1px solid var(--color-neutrals-100); - padding-bottom: 2rem; margin-bottom: 2rem; } From 555cddcefa31068446da9864ac9f999a6b808e59 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 21:14:48 -0700 Subject: [PATCH 31/42] chore: Omit Select from live examples --- src/hooks/useComponentDoc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js index a7a190ab5..926d964bf 100644 --- a/src/hooks/useComponentDoc.js +++ b/src/hooks/useComponentDoc.js @@ -2,7 +2,7 @@ import { useMemo } from 'react'; import { getPropTypeDefinition } from '../utils/propTypeInfo'; import { getTypeDefs } from '../utils/typeDefs'; -const IGNORED_LIVE_EXAMPLES = ['Dropdown', 'Modal', 'Tooltip']; +const IGNORED_LIVE_EXAMPLES = ['Dropdown', 'Modal', 'Tooltip', 'Select']; const IGNORED_METHODS = [ 'prototype', From 0aa2bb0d310769341b4919a5096dd28ff060100f Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 21:18:48 -0700 Subject: [PATCH 32/42] feat: Add a max height on component examples --- src/components/ReferenceExample.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/ReferenceExample.js b/src/components/ReferenceExample.js index 6801289e2..d89f38ec4 100644 --- a/src/components/ReferenceExample.js +++ b/src/components/ReferenceExample.js @@ -66,7 +66,13 @@ const ReferenceExample = ({ useToastManager={useToastManager} /> )} - + {live && } From 6e94f13742b3db25486f577803472f6f373348f3 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 21:29:47 -0700 Subject: [PATCH 33/42] feat: Smarter line break opportunities for default values --- src/components/PropList.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/PropList.js b/src/components/PropList.js index 53df022b6..2516310eb 100644 --- a/src/components/PropList.js +++ b/src/components/PropList.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import cx from 'classnames'; import PropTypes from 'prop-types'; import CodeDef from './CodeDef'; @@ -106,7 +106,20 @@ const PropList = ({ propTypes }) => { {defaultValue !== undefined && (
DEFAULT
- {String(defaultValue)} + + {String(defaultValue) + .split('.') + .map((word, idx, parts) => ( + + {word} + {idx !== parts.length - 1 && ( + <> + . + + )} + + ))} +
)} From de6e2dfd88a5cf986d466c056a6694299253584a Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 21:34:11 -0700 Subject: [PATCH 34/42] fix: Ensure right-column on prop list does not overflow --- src/components/PropList.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss index f99884930..3307ba561 100644 --- a/src/components/PropList.module.scss +++ b/src/components/PropList.module.scss @@ -1,6 +1,6 @@ .container { display: grid; - grid-template-columns: 30% 1fr; + grid-template-columns: 30% minmax(0, 1fr); grid-gap: 1rem; &:not(:last-child) { From b0cf37536021f70fac99733cefea45aa9983d878 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 21:44:51 -0700 Subject: [PATCH 35/42] chore: Switch to overflow-wrap --- src/components/PropList.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss index 3307ba561..4064e45dc 100644 --- a/src/components/PropList.module.scss +++ b/src/components/PropList.module.scss @@ -15,7 +15,7 @@ } .info { - word-break: break-all; + overflow-wrap: break-all; } .default { From 7020f7aa3a86ba6b0d8722994974f1a549cd51c9 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 22:08:13 -0700 Subject: [PATCH 36/42] feat: Polish icon gallery --- src/components/IconGallery.module.scss | 10 +++++----- src/components/IconReference.module.scss | 18 ++++++++++-------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/IconGallery.module.scss b/src/components/IconGallery.module.scss index c120a91af..9389e5bfd 100644 --- a/src/components/IconGallery.module.scss +++ b/src/components/IconGallery.module.scss @@ -1,15 +1,15 @@ .iconFilter { padding: 1rem; padding-left: 0; +} - .search { - width: 60%; - padding: 0.5rem; - } +.search { + width: 60%; + padding: 0.75rem 1rem; + height: auto; } .iconGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); - grid-gap: 0.5rem; } diff --git a/src/components/IconReference.module.scss b/src/components/IconReference.module.scss index 72490eb96..10fbbeca5 100644 --- a/src/components/IconReference.module.scss +++ b/src/components/IconReference.module.scss @@ -1,15 +1,18 @@ .button { - border: 1px solid var(--color-neutrals-100); + border: 1px solid transparent; background: var(--color-white); - border-radius: 2px; + border-radius: 4px; text-align: center; - padding: 0.2rem; + padding: 1rem; position: relative; - transition: all 0.4s; + transition: all 0.3s; &:hover { cursor: pointer; - border: 1px solid var(--color-neutrals-300); + border: 1px solid var(--color-neutrals-200); + box-shadow: 0 2px 6px 0 rgba(22, 38, 59, 0.14); + z-index: 1; + .iconName { visibility: visible; } @@ -18,19 +21,18 @@ .icon { display: inline-block; - width: 70%; + width: 100%; } .iconName { visibility: hidden; background-color: var(--color-neutrals-900); - opacity: 0.8; color: var(--color-white); text-align: center; border-radius: 3px; padding: 0.25rem; position: absolute; font-size: 0.85rem; - top: 90%; + top: calc(100% + 0.5rem); z-index: 1; } From c4e6094018df83758d2e9567be5427800e8df891 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 22:09:22 -0700 Subject: [PATCH 37/42] feat: Ensure charts examples have a height defined --- src/templates/ComponentReferenceTemplate.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js index 5031806a0..77492f6ac 100644 --- a/src/templates/ComponentReferenceTemplate.js +++ b/src/templates/ComponentReferenceTemplate.js @@ -16,7 +16,24 @@ import useComponentDoc from '../hooks/useComponentDoc'; import IconGallery from '../components/IconGallery'; import TypeDefReference from '../components/TypeDefReference'; +const chartStyles = { + height: '200px', +}; + const previewStyles = { + AreaChart: chartStyles, + BarChart: chartStyles, + BillboardChart: chartStyles, + FunnelChart: chartStyles, + HeatmapChart: chartStyles, + HistogramChart: chartStyles, + JsonChart: chartStyles, + LineChart: chartStyles, + PieChart: chartStyles, + ScatterChart: chartStyles, + SparklineChart: chartStyles, + StackedBarChart: chartStyles, + TableChart: chartStyles, Spinner: { height: '16px', }, From 96650aaf987e9a109abacb9464b2e3c8aa26fc8b Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 22:19:47 -0700 Subject: [PATCH 38/42] feat: Double the space on shape prop types --- src/components/PropList.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss index 4064e45dc..d2bca6057 100644 --- a/src/components/PropList.module.scss +++ b/src/components/PropList.module.scss @@ -70,7 +70,7 @@ .shape { &:not(:last-child) { - margin-bottom: 2rem; + margin-bottom: 4rem; } h4 { From 305946d919c947f896a512f8303775f3c8b71577 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 22:24:09 -0700 Subject: [PATCH 39/42] feat: Ensure equal spacing between prop list info --- src/components/PropList.js | 8 ++++---- src/components/PropList.module.scss | 11 +---------- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/src/components/PropList.js b/src/components/PropList.js index 2516310eb..86a081320 100644 --- a/src/components/PropList.js +++ b/src/components/PropList.js @@ -125,7 +125,7 @@ const PropList = ({ propTypes }) => {
{deprecation && ( -
+
Due {format(new Date(deprecation.date), 'MMMM do, yyyy')}
@@ -137,17 +137,17 @@ const PropList = ({ propTypes }) => { )} {description && ( )} -
+
{examples.map((example, idx) => ( ))} diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss index d2bca6057..0948a0cb3 100644 --- a/src/components/PropList.module.scss +++ b/src/components/PropList.module.scss @@ -31,7 +31,6 @@ .deprecation { padding: 0.5rem; background: var(--color-red-100); - margin-bottom: 1rem; } .deprecationDate { @@ -50,10 +49,6 @@ } } -.details:not(:last-child):not(:empty) { - margin-bottom: 1rem; -} - .flagged { font-size: 0.75rem; color: var(--color-red-400); @@ -84,10 +79,6 @@ } } -.propInfoContainer:not(:last-child) { - margin-bottom: 1rem; -} - -.example:not(:last-child) { +.section:not(:last-child) { margin-bottom: 2rem; } From a9bea8d016474924eebb4434331f2b72a49211fb Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 22:38:25 -0700 Subject: [PATCH 40/42] chore: Update renamed bracket component --- src/components/CodeDef/Bracket.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/CodeDef/Bracket.js b/src/components/CodeDef/Bracket.js index c7cbce42d..2f6ca85b5 100644 --- a/src/components/CodeDef/Bracket.js +++ b/src/components/CodeDef/Bracket.js @@ -2,12 +2,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import styles from './CodeDef.module.scss'; -const Punctuation = ({ children }) => ( +const Bracket = ({ children }) => ( {children} ); -Punctuation.propTypes = { +Bracket.propTypes = { children: PropTypes.node, }; -export default Punctuation; +export default Bracket; From 5d4eab3d89f5dbb5fa7c29b4b0fd961e36b60d0f Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 22:41:08 -0700 Subject: [PATCH 41/42] refactor: Simpler logic for wrapping function def keyword/bracket --- src/components/FunctionDefinition.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/FunctionDefinition.js b/src/components/FunctionDefinition.js index 0e6dc1604..6aa16c506 100644 --- a/src/components/FunctionDefinition.js +++ b/src/components/FunctionDefinition.js @@ -7,17 +7,8 @@ import styles from './FunctionDefinition.module.scss'; const FunctionDefinition = ({ className, params, returnValue }) => { return ( - {params.length > 0 ? ( - <> - function{' '} - ( - - ) : ( - <> - function{' '} - () - - )} + function{' '} + {params.length > 0 ? '(' : '()'} {params.length > 0 && ( {params.map((param, i) => ( From ebc3073b3c4690565300a59797ea2b5956753356 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Mon, 15 Jun 2020 23:01:48 -0700 Subject: [PATCH 42/42] chore: Place word-break opportunity before . --- src/components/PropList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PropList.js b/src/components/PropList.js index 86a081320..53ea673b0 100644 --- a/src/components/PropList.js +++ b/src/components/PropList.js @@ -114,7 +114,7 @@ const PropList = ({ propTypes }) => { {word} {idx !== parts.length - 1 && ( <> - . + . )}