[API Pages] All pages using new extension..

DanilAndreev · DanilAndreev · commit c486f032010c · 2020-09-22T16:21:08.000+03:00
diff --git a/src/locale/EN.json b/src/locale/EN.json
diff --git a/src/pages/APIs/DemoWithCodeAPI/index.js b/src/pages/APIs/DemoWithCodeAPI/index.js
@@ -26,7 +26,7 @@ export default function DemoWithCodeAPI() {
             localeName={"DemoWithCodeAPI"}
             importCode={importCode}
             properties={[
-                {name: "name", type: "string", default: "\"default\"", description: locale.props.name},
+                {name: "name", type: "string", default: "", description: locale.props.name},
                 {name: "code", type: "string", default: "", description: locale.props.code},
                 {name: "ratio", type: "AspectRatio", default: "", description: locale.props.ratio},
                 {name: "defaultExpanded", type: "boolean", default: "false", description: locale.props.defaultExpanded},
diff --git a/src/pages/APIs/HeaderAPI/index.js b/src/pages/APIs/HeaderAPI/index.js
@@ -17,16 +17,26 @@ import Header from "@material-docs/core/components/Header";
 export default function HeaderAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.HeaderAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
-            lang={lang}
-            localeName={"HeaderAPI"}
-            searchTags={["header", "tag", "anchor", "api"]}
             name={"Header"}
+            localeName={"HeaderAPI"}
+            overrideName={"MatDoc-Header"}
             importCode={importCode}
+            properties={[
+                {name: "heading", type: "1 | 2 | 3 | 4 | 5 | 6", default: "1", description: locale.props.heading},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+                {name: "h1", global: "MatDoc-h1", description: locale.css.h1},
+                {name: "h2", global: "MatDoc-h2", description: locale.css.h2},
+                {name: "h3", global: "MatDoc-h3", description: locale.css.h3},
+                {name: "h4", global: "MatDoc-h4", description: locale.css.h4},
+                {name: "h5", global: "MatDoc-h5", description: locale.css.h5},
+                {name: "h6", global: "MatDoc-h6", description: locale.css.h6},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/ImageAPI/index.js b/src/pages/APIs/ImageAPI/index.js
@@ -18,16 +18,24 @@ import Image from "@material-docs/core/components/Image";
 export default function ImageAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.ImageAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
             lang={lang}
-            localeName={"ImageAPI"}
-            searchTags={["image", "lazy", "load", "picture", "card", "banner", "logo"]}
             name={"Image"}
+            localeName={"ImageAPI"}
+            overrideName={"MatDoc-Image"}
             importCode={importCode}
+            properties={[
+                {name: "src", type: "string", default: "", description: locale.props.src},
+                {name: "alt", type: "string", default: "", description: locale.props.alt},
+                {name: "fullWidth", type: "boolean", default: "false", description: locale.props.fullWidth},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+                {name: "fullWidth", global: "MatDoc-fullWidth", description: locale.css.fullWidth},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/ItalicAPI/index.js b/src/pages/APIs/ItalicAPI/index.js
@@ -18,16 +18,20 @@ import Italic from "@material-docs/core/components/Italic";
 export default function ItalicAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.ItalicAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
-            lang={lang}
-            localeName={"ItalicAPI"}
-            searchTags={["italic", "font", "text", "styling", "api"]}
             name={"Italic"}
+            localeName={"ItalicAPI"}
+            overrideName={"MatDoc-DemoWithCode"}
             importCode={importCode}
+            properties={[
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+                {name: "italic", global: "MatDoc-italic", description: locale.css.italic},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/LanguageSelectorAPI/index.js b/src/pages/APIs/LanguageSelectorAPI/index.js
@@ -18,16 +18,20 @@ import LanguageSelector from "@material-docs/core/components/LanguageSelector";
 export default function LanguageSelectorAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.LanguageSelectorAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
-            lang={lang}
+            name={"LanguageSelector"}
             localeName={"LanguageSelectorAPI"}
+            overrideName={"MatDoc-LanguageSelector"}
             searchTags={["language", "locale", "select", "api"]}
-            name={"LanguageSelector"}
             importCode={importCode}
+            properties={[
+                {name: "size", type: "\"small\" | \"large\"", default: "\"large\"", description: locale.props.size},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/ListAPI/index.js b/src/pages/APIs/ListAPI/index.js
@@ -18,16 +18,26 @@ import List from "@material-docs/core/components/List";
 export default function ListAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.ListAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
-            lang={lang}
-            localeName={"ListAPI"}
-            searchTags={["list", "image", "styling", "api"]}
             name={"List"}
+            localeName={"ListAPI"}
+            overrideName={"MatDoc-List"}
             importCode={importCode}
+            properties={[
+                {name: "image", type: "string", default: "", description: locale.props.image},
+                {name: "styling", type: "\"inside\" | \"outside\" | \"inherit\" | \"revert\" | \"unset\"", default: "\"inside\"", description: locale.props.styling},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+                {name: "stylePositionInside", global: "MatDoc-stylePositionInside", description: locale.css.stylePositionInside},
+                {name: "stylePositionOutside", global: "MatDoc-stylePositionOutside", description: locale.css.stylePositionOutside},
+                {name: "stylePositionInherit", global: "MatDoc-stylePositionInherit", description: locale.css.stylePositionInherit},
+                {name: "stylePositionRevert", global: "MatDoc-stylePositionRevert", description: locale.css.stylePositionRevert},
+                {name: "stylePositionUnset", global: "MatDoc-stylePositionUnset", description: locale.css.stylePositionUnset},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/ListItemAPI/index.js b/src/pages/APIs/ListItemAPI/index.js
@@ -18,16 +18,28 @@ import ListItemAPI from "@material-docs/core/components/ListItemAPI";
 export default function ListItemAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.ListItemAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
-            lang={lang}
-            localeName={"ListItemAPI"}
-            searchTags={["list", "item", "api"]}
             name={"ListItem"}
+            localeName={"ListItemAPI"}
+            overrideName={"MatDoc-ListItem"}
             importCode={importCode}
+            properties={[
+                {name: "type", type: "\"circle\" | \"square\" | \"upper-roman\" | \"lower-alpha\" | \"none\"", default: "\"circle\"", description: locale.props.type},
+                {name: "dense", type: "boolean", default: "false", description: locale.props.dense},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+                {name: "typeCircle", global: "MatDoc-typeCircle", description: locale.css.typeCircle},
+                {name: "typeSquare", global: "MatDoc-typeSquare", description: locale.css.typeSquare},
+                {name: "typeRoman", global: "MatDoc-typeRoman", description: locale.css.typeRoman},
+                {name: "typeAlpha", global: "MatDoc-typeAlpha", description: locale.css.typeAlpha},
+                {name: "typeNone", global: "MatDoc-typeNone", description: locale.css.typeNone},
+                {name: "list", global: "MatDoc-list", description: locale.css.list},
+                {name: "dense", global: "MatDoc-dense", description: locale.css.dense},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/ListItemContainedAPI/index.js b/src/pages/APIs/ListItemContainedAPI/index.js
@@ -18,16 +18,17 @@ import ListItemContained from "@material-docs/core/components/ListItemContained"
 export default function ListItemContainedAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.ListItemContainedAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
-            lang={lang}
-            localeName={"ListItemContainedAPI"}
-            searchTags={["list", "item", "contain", "api"]}
             name={"ListItemContained"}
+            localeName={"ListItemContainedAPI"}
+            overrideName={"MatDoc-ListItemContained"}
             importCode={importCode}
+            properties={[
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            enableCss={false}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/MarkdownAPI/index.js b/src/pages/APIs/MarkdownAPI/index.js
@@ -18,16 +18,21 @@ import Markdown from "@material-docs/core/components/Markdown";
 export default function MarkdownAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.MarkdownAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
-            lang={lang}
-            localeName={"MarkdownAPI"}
-            searchTags={["mark", "down", "parser", "interpret", "layout", "api"]}
             name={"Markdown"}
+            localeName={"MarkdownAPI"}
+            overrideName={"MatDoc-Markdown"}
             importCode={importCode}
+            properties={[
+                {name: "inline", type: "boolean", default: "false", description: locale.props.inline},
+                {name: "data", type: "object", default: "{}", description: locale.props.data},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/PagesGroupAPI/index.js b/src/pages/APIs/PagesGroupAPI/index.js
@@ -18,16 +18,19 @@ import PagesGroup from "@material-docs/core/components/PagesGroup";
 export default function PagesGroupAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.PagesGroupAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
-            lang={lang}
-            localeName={"PagesGroupAPI"}
-            searchTags={["page", "group", "gather", "container"]}
             name={"PagesGroup"}
+            localeName={"PagesGroupAPI"}
+            overrideName={"MatDoc-PagesGroup"}
             importCode={importCode}
+            properties={[
+                {name: "name", type: "string", default: "", description: locale.props.name},
+                {name: "getData", type: "function(data: PagesGroupData): void", default: "", description: locale.props.code},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            enableCss={false}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/SearchFieldAPI/index.js b/src/pages/APIs/SearchFieldAPI/index.js
@@ -18,16 +18,28 @@ import SearchField from "@material-docs/core/components/SearchField";
 export default function SearchFieldAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.SearchFieldAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
-            lang={lang}
+            name={"SearchField"}
             localeName={"SearchFieldAPI"}
+            overrideName={"MatDoc-DemoWithCode"}
             searchTags={["search", "engine", "selector", "results", "api"]}
-            name={"SearchField"}
             importCode={importCode}
+            properties={[
+                {name: "searchData", type: "SearchDataItem[]", default: "", description: locale.props.searchData},
+                {name: "doSearch", type: "function(query, searchData): Promise<SearchDataItem[]>", default: "", description: locale.props.doSearch},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+                {name: "rootFocused", global: "MatDoc-rootFocused", description: locale.css.rootFocused},
+                {name: "input", global: "MatDoc-input", description: locale.css.input},
+                {name: "iconButton", global: "MatDoc-iconButton", description: locale.css.iconButton},
+                {name: "icon", global: "MatDoc-icon", description: locale.css.icon},
+                {name: "iconClickable", global: "MatDoc-iconClickable", description: locale.css.iconClickable},
+                {name: "popper", global: "MatDoc-popper", description: locale.css.popper},
+                {name: "listPaper", global: "MatDoc-listPaper", description: locale.css.listPaper},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/TableAPI/index.js b/src/pages/APIs/TableAPI/index.js
@@ -23,11 +23,21 @@ export default function TableAPI() {
 
     return (
         <ApiPage
-            lang={lang}
-            localeName={"TableAPI"}
-            searchTags={["table", "cell", "row", "header", "api"]}
             name={"Table"}
+            localeName={"TableAPI"}
+            overrideName={"MatDoc-DemoWithCode"}
             importCode={importCode}
+            properties={[
+                {name: "component", type: "elementType", default: "\"table\"", description: locale.props.component},
+                {name: "padding", type: "\"default\" | \"checkbox\" | \"none\"", default: "\"default\"", description: locale.props.padding},
+                {name: "size", type: "\"small\" | \"medium\"", default: "\"medium\"", description: locale.props.size},
+                {name: "stickyHeader", type: "boolean", default: "false", description: locale.props.stickyHeader},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+                {name: "stickyHeader", global: "MatDoc-stickyHeader", description: locale.css.stickyHeader},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/TableBodyAPI/index.js b/src/pages/APIs/TableBodyAPI/index.js
@@ -23,11 +23,18 @@ export default function TableBodyAPI() {
 
     return (
         <ApiPage
-            lang={lang}
+            name={"TableBody"}
             localeName={"TableBodyAPI"}
+            overrideName={"MatDoc-TableBody"}
             searchTags={["table", "cell", "row", "header", "api", "body"]}
-            name={"TableBody"}
             importCode={importCode}
+            properties={[
+                {name: "component", type: "elementType", default: "\"tbody\"", description: locale.props.component},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/TableCellAPI/index.js b/src/pages/APIs/TableCellAPI/index.js
@@ -18,16 +18,37 @@ import TableCell from "@material-docs/core/components/TableCell";
 export default function TableCellAPI() {
     const {lang} = useLang();
     const locale = lang.locale.pages.TableCellAPI;
-    const localeSpells = lang.locale.common.spells;
-    const componentAPILocale = lang.locale.common.ComponentAPI;
 
     return (
         <ApiPage
-            lang={lang}
-            localeName={"TableCellAPI"}
-            searchTags={["table", "cell", "row", "header", "api"]}
             name={"TableCell"}
+            localeName={"TableCellAPI"}
+            overrideName={"MatDoc-DemoWithCode"}
             importCode={importCode}
+            properties={[
+                {name: "align", type: "\"center\" | \"inherit\" | \"justify\" | \"left\" | \"right\"", default: "\"inherit\"", description: locale.props.align},
+                {name: "component", type: "elementType", default: "", description: locale.props.component},
+                {name: "padding", type: "\"checkbox\" | \"default\" | \"none\"", default: "\"default\"", description: locale.props.padding},
+                {name: "scope", type: "string", default: "", description: locale.props.scope},
+                {name: "size", type: "\"medium\" | \"small\"", default: "\"medium\"", description: locale.props.size},
+                {name: "sortDirection", type: "\"asc\" | \"desc\" | \"false\"", default: "\"false\"", description: locale.props.sortDirection},
+                {name: "variant", type: "\"body\" | \"footer\" | \"head\"", default: "\"body\"", description: locale.props.variant},
+                {name: "children", type: "node", default: "", description: locale.props.children},
+            ]}
+            css={[
+                {name: "root", global: "MatDoc-root", description: locale.css.root},
+                {name: "head", global: "MatDoc-head", description: locale.css.head},
+                {name: "body", global: "MatDoc-body", description: locale.css.body},
+                {name: "footer", global: "MatDoc-footer", description: locale.css.footer},
+                {name: "sizeSmall", global: "MatDoc-sizeSmall", description: locale.css.sizeSmall},
+                {name: "paddingCheckbox", global: "MatDoc-paddingCheckbox", description: locale.css.paddingCheckbox},
+                {name: "paddingNone", global: "MatDoc-paddingNone", description: locale.css.paddingNone},
+                {name: "alignLeft", global: "MatDoc-alignLeft", description: locale.css.alignLeft},
+                {name: "alignCenter", global: "MatDoc-alignCenter", description: locale.css.alignCenter},
+                {name: "alignRight", global: "MatDoc-alignRight", description: locale.css.alignRight},
+                {name: "alignJustify", global: "MatDoc-alignJustify", description: locale.css.alignJustify},
+                {name: "stickyHeader", global: "MatDoc-stickyHeader", description: locale.css.stickyHeader},
+            ]}
         >
             <H2>Demos</H2>
             <List>
diff --git a/src/pages/APIs/TableHeadAPI/index.js b/src/pages/APIs/TableHeadAPI/index.js
diff --git a/src/pages/APIs/TableRowAPI/index.js b/src/pages/APIs/TableRowAPI/index.js
diff --git a/src/pages/APIs/TagableAPI/index.js b/src/pages/APIs/TagableAPI/index.js
