Merge pull request #10 from material-docs/prod

Material Docs Documentation v0.1.6
material-docs · Sep 25, 2020 · fd191d9 · fd191d9
2 parents 663d64b + bacd958
commit fd191d9
Show file tree

Hide file tree

Showing 55 changed files with 423 additions and 211 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material-docs/material-docs-documentation",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": false,
   "description": "Documentation for Material Docs. material-docs - react framework for easy creating documentation site in material design style.",
   "homepage": "http://material-docs.com/",
@@ -30,7 +30,7 @@
   "license": "MIT",
   "dependencies": {
     "@craco/craco": "^5.6.4",
-    "@material-docs/core": "^0.4.7",
+    "@material-docs/core": "^0.4.9",
     "@material-docs/react-components-docs-extension": "^0.2.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",

diff --git a/src/Documentation.js b/src/Documentation.js
@@ -68,6 +68,10 @@ import ReactComponentApiPageDemo
     from "./pages/Extensions/ReactComponentsDocsExtension/Components/ReactComponentApiPageDemo";
 import CodeDemo from "./pages/Components/CodeDemo";
 import TablesDemo from "./pages/Components/TablesDemo";
+import LangProviderAPI from "./pages/APIs/LangProviderAPI";
+import LocaleAPI from "./pages/APIs/LocaleAPI";
+import LandingAPI from "./pages/APIs/LandingAPI";
+import LinkAPI from "./pages/APIs/LinkAPI";
 
 
 export default function Documentation() {
@@ -105,10 +109,13 @@ export default function Documentation() {
                 <MaterialDocsLanding/>
             </Landing>
             <DocsPages>
-                <PagesGroup name={"Getting started"}>
+                <PagesGroup name={"Getting started"} order={1}>
                     <Installation/>
                 </PagesGroup>
-                <PagesGroup name={"Components"}>
+                <PagesGroup name={"Tutorials"} order={2}>
+                    <CreatingMaterialDocs/>
+                </PagesGroup>
+                <PagesGroup name={"Components"} order={3}>
                     <CodeDemo/>
                     <ListsDemo/>
                     <LayoutDemo/>
@@ -118,7 +125,7 @@ export default function Documentation() {
                     <ImagesDemo/>
                     <TablesDemo/>
                 </PagesGroup>
-                <PagesGroup name={"Component APIs"}>
+                <PagesGroup name={"Component APIs"} order={4}>
                     <DocsLayoutAPI/>
                     <DocsPageAPI/>
                     <DemoWithCodeAPI/>
@@ -150,16 +157,20 @@ export default function Documentation() {
                     <H6API/>
                     <HeaderAPI/>
                     <AutoDocsMenuAPI/>
+                    <LocaleAPI/>
+                    <LandingAPI/>
+                    <LinkAPI/>
                     <PagesGroup name={"System components"}>
+                        <LangProviderAPI/>
                         <LanguageSelectorAPI/>
                         <SearchFieldAPI/>
                         <TagableAPI/>
                     </PagesGroup>
                 </PagesGroup>
-                <PagesGroup name={"Tutorials"}>
-                    <CreatingMaterialDocs/>
+                <PagesGroup name={"System"} order={5}>
+
                 </PagesGroup>
-                <PagesGroup name={"Extensions"}>
+                <PagesGroup name={"Extensions"} order={6}>
                     <PagesGroup name={"React Components Docs Extension"}>
                         <ReactComponentApiPageDemo/>
                         <PagesGroup name={"Component API"}>
@@ -169,9 +180,6 @@ export default function Documentation() {
                         </PagesGroup>
                     </PagesGroup>
                 </PagesGroup>
-                <PagesGroup name={"System"}>
-
-                </PagesGroup>
             </DocsPages>
         </DocsLayout>
     );

diff --git a/src/components/ApiPage.js b/src/components/ApiPage.js
@@ -50,6 +50,7 @@ export default function ApiPage(props, ref) {
         <ReactComponentApiPage
             name={name}
             searchDescription={locale.searchDescription}
+            searchLabel={name + " API"}
             searchTags={searchTags}
         >
             <ReactComponentApiPageSummary>
@@ -60,7 +61,7 @@ export default function ApiPage(props, ref) {
                 </H3>
             </ReactComponentApiPageSummary>
             <ReactComponentApiPageImport>
-                <Code theme={"darcula"}>{importCode}</Code>
+                <Code themeLight={"darcula"}>{importCode}</Code>
                 <Markdown>{componentAPILocale.importDifferenceText}</Markdown>
                 {overrideName && <Markdown data={{name: overrideName}}>{componentAPILocale.componentName}</Markdown>}
             </ReactComponentApiPageImport>

diff --git a/src/locale/EN.json b/src/locale/EN.json
@@ -182,8 +182,11 @@
           "noTag": "If true and name prop is defined - header with name will not generate tag for content tab.",
           "paperContainer": "If true - demo content will be wrapped in Paper component.",
           "actions": "Array of additional actions. The actions will be displayed in the dropdown menu when you click the ExpandMore icon button.",
-          "p": "Padding of demo block in theme.spacing units.",
-          "m": "Margin of demo block in theme.spacing units.",
+          "p": "Padding of demo block in _theme.spacing_ units.",
+          "m": "Margin of demo block in _theme.spacing_ units.",
+          "theme": "Code highlighting and background styling type.",
+          "themeLight": "Code highlighting and background styling type when global theme in light mode.",
+          "themeDark": "Code highlighting and background styling type when global theme in dark mode.",
           "children": "Children of an element. Will be placed in demo block."
         },
         "css": {
@@ -206,6 +209,8 @@
         "props": {
           "language": "Language name for code highlighter.",
           "theme": "Code highlighting and background styling type.",
+          "themeLight": "Code highlighting and background styling type when global theme in light mode.",
+          "themeDark": "Code highlighting and background styling type when global theme in dark mode.",
           "children": "Code to display in code highlighter."
         },
         "css": {
@@ -225,10 +230,67 @@
           "name": "Name of the group. Will be displayed on button in menu.",
           "getData": "Callback, provided to get group data without context usage.",
           "order": "As lower order as higher will be displayed menu item.",
+          "defaultExpanded": "If true, menu group will be expanded on startup.",
+          "children": "Children of an element."
+        },
+        "css": {}
+      },
+      "LandingAPI": {
+        "searchDescription": "Landing - react component, designed to provide documentation with free style landing page.",
+        "searchTags": {
+          "page": "page",
+          "landing": "landing",
+          "container": "container"
+        },
+        "props": {
           "children": "Children of an element."
         },
         "css": {}
       },
+      "LangProviderAPI": {
+        "searchDescription": "LangProvider - react component, designed to provide children with locale lang settings.",
+        "searchTags": {
+          "page": "page",
+          "lang": "lang",
+          "provider": "provider",
+          "locale": "locale",
+          "container": "container"
+        },
+        "props": {
+          "lang": "lang extension, will be merged with main lang. To main lang will be added fields from provider lang if in main lang they are not defined.",
+          "children": "Children of an element."
+        },
+        "css": {}
+      },
+      "LocaleAPI": {
+        "searchDescription": "Locale - react component, designed to provide user with flexible locale access.",
+        "searchTags": {
+          "locale": "locale",
+          "lang": "lang"
+        },
+        "props": {
+          "path": "Path to the data in the Lang.locale. Exampele: \"hello/darkness/my\".",
+          "children": "Children of an element. Will be displayed by default if can not load data from Lang."
+        },
+        "css": {}
+      },
+      "LinkAPI": {
+        "searchDescription": "Link - react component, designed to create links to outside resource or inner docs page.",
+        "searchTags": {
+          "link": "link",
+          "page": "page",
+          "href": "href",
+          "redirect": "redirect"
+        },
+        "props": {
+          "page": "Page route. Can be passed as string or as array of routes.",
+          "href": "Link to external resource.",
+          "children": "Children of an element. Will be displayed by default if can not load data from Lang."
+        },
+        "css": {
+          "root": "Styles applied to the root element."
+        }
+      },
       "ImageAPI": {
         "searchDescription": "Image - react component, designed to show images. Image component uses lazy load technology.",
         "searchTags": {
@@ -242,8 +304,10 @@
         },
         "props": {
           "src": "Source link. Used to define image path.",
+          "placeholderSrc": "Src of low quality image, which will be displayed while main image is loading.",
           "alt": "Alternative text. Will be displayed if image can not load.",
           "fullWidth": "If true - image will be 100 percent wide.",
+          "frame": "If true, image will be placed inside decorative border frame.",
           "children": "Elements, which will appear in image caption."
         },
         "css": {
@@ -288,6 +352,8 @@
           "collapsedHeight": "Height of the component when it is collapsed.",
           "actions": "Array of additional actions. The actions will be displayed in the dropdown menu when you click the ExpandMore icon button.",
           "theme": "Code highlighting and background styling type.",
+          "themeLight": "Code highlighting and background styling type when global theme in light mode.",
+          "themeDark": "Code highlighting and background styling type when global theme in dark mode.",
           "language": "Language name for code highlighter.",
           "children": "Code to display in code highlighter. This code will appear in the Code block if component is expanded."
         },
@@ -699,6 +765,8 @@
           "name": "Name of the docs. Needs for metadata. Will be displayed in app header. Also you can find this name near version label in side menu drawer.",
           "version": "Version of the docs. Needs for metadata.",
           "logo": "A path to the logo image, will be displayed in drawer near name and version.",
+          "onNameClick": "Callback, designed to handle click on docs name in drawer badge.",
+          "onVersionClick": "Callback, designed to handle click on docs version in drawer badge.",
           "children": "Children of an element. Normally DocsMenu and DocsPages."
         },
         "forwardRef": true,

diff --git a/src/pages/APIs/AutoDocsMenuAPI/index.js b/src/pages/APIs/AutoDocsMenuAPI/index.js
@@ -17,7 +17,7 @@ export default function AutoDocsMenuAPI() {
     return (
         <ApiPage
             name={"AutoDocsMenu"}
-            overrideName={"MatDoc-AutoDocsMenu"}
+            overrideName={"MaterialDocs-AutoDocsMenu"}
             localeName={"AutoDocsMenuAPI"}
             importCode={importCode}
             properties={[

diff --git a/src/pages/APIs/BlockAPI/index.js b/src/pages/APIs/BlockAPI/index.js
@@ -16,7 +16,7 @@ export default function BlockAPI() {
     return (
         <ApiPage
             name={"Block"}
-            overrideName={"MatDoc-Block"}
+            overrideName={"MaterialDocs-Block"}
             localeName={"BlockAPI"}
             searchTags={["block", "tip", "slided", "separated", "blockquote", "quote"]}
             importCode={importCode}
@@ -25,9 +25,9 @@ export default function BlockAPI() {
                 {name: "children", type: "node", default: "", description: locale.props.children},
             ]}
             css={[
-                {name: "root", global: "MatDoc-root", description: locale.css.root},
-                {name: "colorLight", global: "MatDoc-colorLight", description: locale.css.colorLight},
-                {name: "colorDark", global: "MatDoc-colorDark", description: locale.css.colorDark},
+                {name: "root", global: "MaterialDocs-root", description: locale.css.root},
+                {name: "colorLight", global: "MaterialDocs-colorLight", description: locale.css.colorLight},
+                {name: "colorDark", global: "MaterialDocs-colorDark", description: locale.css.colorDark},
             ]}
         >
             <H2>Demos</H2>

diff --git a/src/pages/APIs/BoldAPI/index.js b/src/pages/APIs/BoldAPI/index.js
@@ -18,15 +18,15 @@ export default function BoldAPI() {
     return (
         <ApiPage
             name={"Bold"}
-            overrideName={"MatDoc-Bold"}
+            overrideName={"MaterialDocs-Bold"}
             localeName={"BoldAPI"}
             importCode={importCode}
             properties={[
-                {name: "chidlren", type: "node", default: "", description: locale.props.children},
+                {name: "children", type: "node", default: "", description: locale.props.children},
             ]}
             css={[
-                {name: "root", global: "MatDocs-root", description: locale.css.root},
-                {name: "bold", global: "MatDocs-bold", description: locale.css.bold},
+                {name: "root", global: "MaterialDocss-root", description: locale.css.root},
+                {name: "bold", global: "MaterialDocss-bold", description: locale.css.bold},
             ]}
         >
             <H2>Demos</H2>

diff --git a/src/pages/APIs/CodeAPI/index.js b/src/pages/APIs/CodeAPI/index.js
@@ -18,16 +18,18 @@ export default function CodeAPI() {
         <ApiPage
             name={"Code"}
             localeName={"CodeAPI"}
-            overrideName={"MatDocs-Code"}
+            overrideName={"MaterialDocss-Code"}
             importCode={importCode}
             properties={[
                 {name: "language", type: "string", default: "\"javascript\"", description: locale.props.language},
-                {name: "theme", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"light\"", description: locale.props.theme},
+                {name: "theme", type: "\"light\" | \"dark\" | \"darcula\"", default: "", description: locale.props.theme},
+                {name: "themeLight", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"light\"", description: locale.props.themeLight},
+                {name: "themeDark", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"dark\"", description: locale.props.themeDark},
                 {name: "children", type: "string", default: "", description: locale.props.children},
             ]}
             css={[
-                {name: "root", global: "MatDoc-root", description: locale.css.root},
-                {name: "highlighterContainer", global: "MatDoc-highlighterContainer", description: locale.css.highlighterContainer},
+                {name: "root", global: "MaterialDocs-root", description: locale.css.root},
+                {name: "highlighterContainer", global: "MaterialDocs-highlighterContainer", description: locale.css.highlighterContainer},
             ]}
         >
             <H2>Demos</H2>

diff --git a/src/pages/APIs/CodeSpanAPI/index.js b/src/pages/APIs/CodeSpanAPI/index.js
@@ -18,7 +18,7 @@ export default function CodeSpanAPI() {
     return (
         <ApiPage
             name={"CodeSpan"}
-            overrideName={"MatDoc-CodeSpan"}
+            overrideName={"MaterialDocs-CodeSpan"}
             localeName={"CodeSpanAPI"}
             importCode={importCode}
             properties={[
@@ -27,15 +27,15 @@ export default function CodeSpanAPI() {
                 {name: "children", type: "node", default: "", description: locale.props.children},
             ]}
             css={[
-                {name: "root", global: "MatDoc-root", description: locale.css.root},
-                {name: "colorDefault", global: "MatDoc-colorDefault", description: locale.css.colorDefault},
-                {name: "colorPrimary", global: "MatDoc-colorPrimary", description: locale.css.colorPrimary},
-                {name: "colorSecondary", global: "MatDoc-colorSecondary", description: locale.css.colorSecondary},
-                {name: "colorGrey", global: "MatDoc-colorGrey", description: locale.css.colorGrey},
-                {name: "font", global: "MatDoc-font", description: locale.css.font},
-                {name: "textInherit", global: "MatDoc-textInherit", description: locale.css.textInherit},
-                {name: "textWhite", global: "MatDoc-textWhite", description: locale.css.textWhite},
-                {name: "textBlack", global: "MatDoc-textBlack", description: locale.css.textBlack},
+                {name: "root", global: "MaterialDocs-root", description: locale.css.root},
+                {name: "colorDefault", global: "MaterialDocs-colorDefault", description: locale.css.colorDefault},
+                {name: "colorPrimary", global: "MaterialDocs-colorPrimary", description: locale.css.colorPrimary},
+                {name: "colorSecondary", global: "MaterialDocs-colorSecondary", description: locale.css.colorSecondary},
+                {name: "colorGrey", global: "MaterialDocs-colorGrey", description: locale.css.colorGrey},
+                {name: "font", global: "MaterialDocs-font", description: locale.css.font},
+                {name: "textInherit", global: "MaterialDocs-textInherit", description: locale.css.textInherit},
+                {name: "textWhite", global: "MaterialDocs-textWhite", description: locale.css.textWhite},
+                {name: "textBlack", global: "MaterialDocs-textBlack", description: locale.css.textBlack},
             ]}
         >
             <H2>Demos</H2>

diff --git a/src/pages/APIs/DemoWithCodeAPI/index.js b/src/pages/APIs/DemoWithCodeAPI/index.js
@@ -18,7 +18,7 @@ export default function DemoWithCodeAPI() {
     return (
         <ApiPage
             name={"DemoWithCode"}
-            overrideName={"MatDoc-DemoWithCode"}
+            overrideName={"MaterialDocs-DemoWithCode"}
             localeName={"DemoWithCodeAPI"}
             importCode={importCode}
             properties={[
@@ -32,14 +32,17 @@ export default function DemoWithCodeAPI() {
                 {name: "p", type: "number", default: "0", description: locale.props.p},
                 {name: "m", type: "number", default: "0", description: locale.props.m},
                 {name: "children", type: "node", default: "", description: locale.props.children},
+                {name: "theme", type: "\"light\" | \"dark\" | \"darcula\"", default: "", description: locale.props.theme},
+                {name: "themeLight", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"light\"", description: locale.props.themeLight},
+                {name: "themeDark", type: "\"light\" | \"dark\" | \"darcula\"", default: "\"dark\"", description: locale.props.themeDark},
             ]}
             css={[
-                {name: "root", global: "MatDoc-root", description: locale.css.root},
-                {name: "collapse", global: "MatDoc-collapse", description: locale.css.collapse},
-                {name: "toolbar", global: "MatDoc-toolbar", description: locale.css.toolbar},
-                {name: "paperContainer", global: "MatDoc-paperContainer", description: locale.css.paperContainer},
-                {name: "menuButtonLink", global: "MatDoc-menuButtonLink", description: locale.css.menuButtonLink},
-                {name: "demo", global: "MatDoc-demo", description: locale.css.demo},
+                {name: "root", global: "MaterialDocs-root", description: locale.css.root},
+                {name: "collapse", global: "MaterialDocs-collapse", description: locale.css.collapse},
+                {name: "toolbar", global: "MaterialDocs-toolbar", description: locale.css.toolbar},
+                {name: "paperContainer", global: "MaterialDocs-paperContainer", description: locale.css.paperContainer},
+                {name: "menuButtonLink", global: "MaterialDocs-menuButtonLink", description: locale.css.menuButtonLink},
+                {name: "demo", global: "MaterialDocs-demo", description: locale.css.demo},
             ]}
         >
             <H2>Demos</H2>