+
+
+
+
Back to top
+
+
+
+
+ Back to top
+
+
+
+
+
+ See code
+
+
+
+```html
+Back to top
+```
+
+
+
+### Attribute Examples
+
+#### disabled
+
+This example demonstrates auro-backtotop in it's disabled state.
+
+
+
+
+
+ Back to top
+
+
+
+
+
+ See code
+
+
+
+```html
+Back to top
+```
+
+
+
+#### secondary
+
+The `secondary` attribute will make the Back to Top button use the `secondary` style.
+
+
+
+
+
+ Back to top
+
+
+
+
+
+ See code
+
+
+
+```html
+Back to top
+```
+
+
+
+### Slot Examples
+
+#### default
+
+The default slot defines the content of the button.
+
+
+
+
+
+ Back to top
+
+
+
+
+
+ See code
+
+
+
+```html
+Back to top
+```
+
+
+
+## Page Content For Demo
+
+
+
+
+ This component requires page content that is taller than the window. Below is `lorem ipsum` content to force a large document. A `back to top` button will appear when you begin to scroll down the page.
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
diff --git a/src/content/dynamic/backtotop/component.js b/src/content/dynamic/backtotop/component.js
index 1e9c8bcb..96d98358 100644
--- a/src/content/dynamic/backtotop/component.js
+++ b/src/content/dynamic/backtotop/component.js
@@ -1,64 +1,18 @@
-import React from "react";
-import { Nav } from './nav';
-import marked from 'marked';
-import Prism from 'prismjs';
-import 'prismjs/themes/prism.css';
-import { MarkdownPageWrapper } from 'components/markdownPageWrapper';
-import { registerCustomComponent } from "content/utils/registerCustomComponent";
+import AuroComponentContent from "functions/renderContentPage";
-const markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-backtotop/main/demo/index.md';
+class AuroBacktotop extends AuroComponentContent {
-class AuroBacktotop extends MarkdownPageWrapper {
+ constructor(props) {
+ super(props);
- // function to get text from MD document
- getMarkdownText() {
- fetch(markdownContent)
- .then((response) => response.text())
- .then((text) => {
- const rawHtml = marked(text);
- document.querySelector('.auro-markdown').innerHTML = rawHtml;
- Prism.highlightAll();
- });
+ this.nameSpace = 'aurodesignsystem';
+ // this.name = 'backtotop';
+ this.markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-backtotop/master/demo/index.md';
+ };
- const renderer = new marked.Renderer();
- renderer.link = function(href, title, text) {
- const link = marked.Renderer.prototype.link.call(this, href, title, text);
- let url = href
- url = url.replace(/^.*\/\/[^/]+/, '')
-
- if (href.includes("auro.alaskaair.com")) {
-
- return link.replace("href",`href="${url}"`);
- } else {
-
- const newLink = `
${text} `
-
- return newLink;
- }
- };
-
- marked.setOptions({
- renderer: renderer
- });
- }
-
- componentDidMount() {
- registerCustomComponent('custom-backtotop', 'https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-backtotop@latest/dist/auro-backtotop__bundled.js');
- }
-
- render() {
- return (
-
- );
- }
+ // componentDidMount() {
+ // registerCustomComponent('custom-backtotop', 'https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-backtotop@latest/dist/auro-accordion__bundled.js');
+ // }
}
export default AuroBacktotop;
diff --git a/src/content/dynamic/badge/api.js b/src/content/dynamic/badge/api.js
index 16c563e0..96521f7a 100644
--- a/src/content/dynamic/badge/api.js
+++ b/src/content/dynamic/badge/api.js
@@ -1,39 +1,14 @@
-import React from "react";
-import { Nav } from './nav';
-import ReactMarkdown from 'react-markdown';
-import CodeBlock from 'components/CodeBlock';
-import { MarkdownPageWrapper } from 'components/markdownPageWrapper';
+import AuroComponentContent from "functions/renderContentPage";
-const markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-badge/main/docs/api.md';
+class AuroContent extends AuroComponentContent {
-class AuroBadgeApi extends MarkdownPageWrapper {
+ constructor(props) {
+ super(props);
- componentWillMount() {
- fetch(markdownContent).then((response) => response.text()).then((text) => {
- this.setState({
- contentBuild: text
- })
- })
- }
-
- render() {
- return (
-
- );
- }
+ this.nameSpace = 'aurodesignsystem';
+ this.componentName = 'badge';
+ this.markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-badge/master/docs/api.md';
+ };
}
-export default AuroBadgeApi;
+export default AuroContent;
diff --git a/src/content/dynamic/badge/component.js b/src/content/dynamic/badge/component.js
index 1392bcad..7b5ba3fc 100644
--- a/src/content/dynamic/badge/component.js
+++ b/src/content/dynamic/badge/component.js
@@ -14,7 +14,7 @@ class AuroBadge extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/banner/component.js b/src/content/dynamic/banner/component.js
index 34498e27..45b65ed9 100644
--- a/src/content/dynamic/banner/component.js
+++ b/src/content/dynamic/banner/component.js
@@ -14,7 +14,7 @@ class AuroBanner extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/button/api.js b/src/content/dynamic/button/api.js
index 5f3a89b0..5ac8bf27 100644
--- a/src/content/dynamic/button/api.js
+++ b/src/content/dynamic/button/api.js
@@ -1,39 +1,14 @@
-import React from "react";
-import { Nav } from './nav';
-import ReactMarkdown from 'react-markdown';
-import CodeBlock from 'components/CodeBlock';
-import { MarkdownPageWrapper } from 'components/markdownPageWrapper';
+import AuroComponentContent from "functions/renderContentPage";
-const markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-button/master/demo/api.md';
+class AuroContent extends AuroComponentContent {
-class AuroButtonApi extends MarkdownPageWrapper {
+ constructor(props) {
+ super(props);
- componentWillMount() {
- fetch(markdownContent).then((response) => response.text()).then((text) => {
- this.setState({
- contentBuild: text
- })
- })
- }
-
- render() {
- return (
-
- );
- }
+ this.nameSpace = 'aurodesignsystem';
+ this.componentName = 'button';
+ this.markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-button/master/demo/api.md';
+ };
}
-export default AuroButtonApi;
+export default AuroContent;
diff --git a/src/content/dynamic/button/component.js b/src/content/dynamic/button/component.js
index 31397102..0358c95e 100644
--- a/src/content/dynamic/button/component.js
+++ b/src/content/dynamic/button/component.js
@@ -1,61 +1,14 @@
-import React from "react";
-import { Nav } from './nav';
-import marked from 'marked';
-import Prism from 'prismjs';
-import 'prismjs/themes/prism.css';
-import { MarkdownPageWrapper } from 'components/markdownPageWrapper';
+import AuroComponentContent from "functions/renderContentPage";
-const markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-button/master/demo/index.md';
+class AuroContent extends AuroComponentContent {
-class AuroButton extends MarkdownPageWrapper {
+ constructor(props) {
+ super(props);
- // function to get text from MD document
- getMarkdownText() {
- fetch(markdownContent)
- .then((response) => response.text())
- .then((text) => {
- const rawHtml = marked(text);
- document.querySelector('.auro-markdown').innerHTML = rawHtml;
- Prism.highlightAll();
- });
-
- const renderer = new marked.Renderer();
- renderer.link = function(href, title, text) {
- const link = marked.Renderer.prototype.link.call(this, href, title, text);
- let url = href
- url = url.replace(/^.*\/\/[^/]+/, '')
-
- if (href.includes("auro.alaskaair.com")) {
-
- return link.replace("href",`href="${url}"`);
- } else {
-
- const newLink = `
${text} `
-
- return newLink;
- }
- };
-
- marked.setOptions({
- renderer: renderer
- });
- }
-
-
-
- render() {
- return (
-
- );
- }
+ this.nameSpace = 'aurodesignsystem';
+ this.componentName = 'button';
+ this.markdownContent = 'https://raw.githubusercontent.com/AlaskaAirlines/auro-button/master/demo/demo.md';
+ };
}
-export default AuroButton;
+export default AuroContent;
diff --git a/src/content/dynamic/card/component.js b/src/content/dynamic/card/component.js
index 84bb4763..2646abae 100644
--- a/src/content/dynamic/card/component.js
+++ b/src/content/dynamic/card/component.js
@@ -16,7 +16,7 @@ class AuroCard extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/carousel/component.js b/src/content/dynamic/carousel/component.js
index 5f3d01bd..612cc544 100644
--- a/src/content/dynamic/carousel/component.js
+++ b/src/content/dynamic/carousel/component.js
@@ -15,7 +15,7 @@ class AuroCarousel extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/checkbox/component.js b/src/content/dynamic/checkbox/component.js
index 1630b94b..4766674d 100644
--- a/src/content/dynamic/checkbox/component.js
+++ b/src/content/dynamic/checkbox/component.js
@@ -15,7 +15,7 @@ class AuroCheckbox extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/combobox/api.js b/src/content/dynamic/combobox/api.js
index 8f536ad9..01610a47 100644
--- a/src/content/dynamic/combobox/api.js
+++ b/src/content/dynamic/combobox/api.js
@@ -18,7 +18,7 @@ class AuroComboboxApi extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/combobox/component.js b/src/content/dynamic/combobox/component.js
index b9b04c78..19b36282 100644
--- a/src/content/dynamic/combobox/component.js
+++ b/src/content/dynamic/combobox/component.js
@@ -18,7 +18,7 @@ class AuroCombobox extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/contributing/contributing.js b/src/content/dynamic/contributing/contributing.js
index 294020a8..4c9182c0 100644
--- a/src/content/dynamic/contributing/contributing.js
+++ b/src/content/dynamic/contributing/contributing.js
@@ -15,7 +15,7 @@ class AuroContributing extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/contributing/dod.js b/src/content/dynamic/contributing/dod.js
index 22f59a02..7bedb7f8 100644
--- a/src/content/dynamic/contributing/dod.js
+++ b/src/content/dynamic/contributing/dod.js
@@ -15,7 +15,7 @@ class AuroContributing extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/cssGuides/customElementCss.js b/src/content/dynamic/cssGuides/customElementCss.js
index 20fcc9f3..a77be834 100644
--- a/src/content/dynamic/cssGuides/customElementCss.js
+++ b/src/content/dynamic/cssGuides/customElementCss.js
@@ -15,7 +15,7 @@ class CustomElementCss extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/cssGuides/idiomatic.js b/src/content/dynamic/cssGuides/idiomatic.js
index d35ca35d..3afb8fa4 100644
--- a/src/content/dynamic/cssGuides/idiomatic.js
+++ b/src/content/dynamic/cssGuides/idiomatic.js
@@ -15,7 +15,7 @@ class AuroIdiomaticCss extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/datepicker/api.js b/src/content/dynamic/datepicker/api.js
index 361e6109..a75d509a 100644
--- a/src/content/dynamic/datepicker/api.js
+++ b/src/content/dynamic/datepicker/api.js
@@ -18,7 +18,7 @@ class AuroDatepickerApi extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/datepicker/component.js b/src/content/dynamic/datepicker/component.js
index 93997757..a665dd6d 100644
--- a/src/content/dynamic/datepicker/component.js
+++ b/src/content/dynamic/datepicker/component.js
@@ -18,7 +18,7 @@ class AuroDatepicker extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/datetime/component.js b/src/content/dynamic/datetime/component.js
index 48c07c8d..79dd770f 100644
--- a/src/content/dynamic/datetime/component.js
+++ b/src/content/dynamic/datetime/component.js
@@ -15,7 +15,7 @@ class AuroDatetime extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/devSetup/devSetupLinux.js b/src/content/dynamic/devSetup/devSetupLinux.js
index 4cd91628..8ccb0e17 100644
--- a/src/content/dynamic/devSetup/devSetupLinux.js
+++ b/src/content/dynamic/devSetup/devSetupLinux.js
@@ -14,7 +14,7 @@ class DevSetupLinux extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/devSetup/devSetupMac.js b/src/content/dynamic/devSetup/devSetupMac.js
index f74ab63a..ec15ab75 100644
--- a/src/content/dynamic/devSetup/devSetupMac.js
+++ b/src/content/dynamic/devSetup/devSetupMac.js
@@ -14,7 +14,7 @@ class DevSetupMac extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/devSetup/devSetupWin.js b/src/content/dynamic/devSetup/devSetupWin.js
index effa77ae..c6219921 100644
--- a/src/content/dynamic/devSetup/devSetupWin.js
+++ b/src/content/dynamic/devSetup/devSetupWin.js
@@ -14,7 +14,7 @@ class DevSetupWin extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/dialog/component.js b/src/content/dynamic/dialog/component.js
index c7eb789d..28aa234d 100644
--- a/src/content/dynamic/dialog/component.js
+++ b/src/content/dynamic/dialog/component.js
@@ -15,7 +15,7 @@ class AuroDialog extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/drawer/component.js b/src/content/dynamic/drawer/component.js
index 3edfc0b7..4fd52487 100644
--- a/src/content/dynamic/drawer/component.js
+++ b/src/content/dynamic/drawer/component.js
@@ -15,7 +15,7 @@ class AuroDrawer extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/dropdown/api.js b/src/content/dynamic/dropdown/api.js
index f94418e8..1eaedf88 100644
--- a/src/content/dynamic/dropdown/api.js
+++ b/src/content/dynamic/dropdown/api.js
@@ -14,7 +14,7 @@ class AuroDropdownApi extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/dropdown/component.js b/src/content/dynamic/dropdown/component.js
index b033f533..0c445488 100644
--- a/src/content/dynamic/dropdown/component.js
+++ b/src/content/dynamic/dropdown/component.js
@@ -14,7 +14,7 @@ class AuroDropdown extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/flight/component.js b/src/content/dynamic/flight/component.js
index 2fedf761..35e0e14f 100644
--- a/src/content/dynamic/flight/component.js
+++ b/src/content/dynamic/flight/component.js
@@ -15,7 +15,7 @@ class AuroFlight extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/flight/dot.js b/src/content/dynamic/flight/dot.js
index 9d004491..e44295ec 100644
--- a/src/content/dynamic/flight/dot.js
+++ b/src/content/dynamic/flight/dot.js
@@ -15,7 +15,7 @@ class AuroFlight extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/flightline/component.js b/src/content/dynamic/flightline/component.js
index d7b92cc7..3bd960ef 100644
--- a/src/content/dynamic/flightline/component.js
+++ b/src/content/dynamic/flightline/component.js
@@ -15,7 +15,7 @@ class AuroFlightline extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/flightline/dot.js b/src/content/dynamic/flightline/dot.js
index db3dc61b..f2589992 100644
--- a/src/content/dynamic/flightline/dot.js
+++ b/src/content/dynamic/flightline/dot.js
@@ -15,7 +15,7 @@ class AuroFlightline extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/header/component.js b/src/content/dynamic/header/component.js
index 123dc45e..390dbef6 100644
--- a/src/content/dynamic/header/component.js
+++ b/src/content/dynamic/header/component.js
@@ -16,7 +16,7 @@ class AuroHeader extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/hyperlink/component.js b/src/content/dynamic/hyperlink/component.js
index 8aae06ba..658b4232 100644
--- a/src/content/dynamic/hyperlink/component.js
+++ b/src/content/dynamic/hyperlink/component.js
@@ -15,7 +15,7 @@ class AuroHyperlink extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/icon/alaska.js b/src/content/dynamic/icon/alaska.js
index 673f0537..3007ed1f 100644
--- a/src/content/dynamic/icon/alaska.js
+++ b/src/content/dynamic/icon/alaska.js
@@ -15,7 +15,7 @@ class AuroIcon extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/icon/component.js b/src/content/dynamic/icon/component.js
index 5a2413ed..3fa938e0 100644
--- a/src/content/dynamic/icon/component.js
+++ b/src/content/dynamic/icon/component.js
@@ -16,7 +16,7 @@ class AuroIcon extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/icons/deprecatedIcons.js b/src/content/dynamic/icons/deprecatedIcons.js
index ea541880..d97c40dc 100644
--- a/src/content/dynamic/icons/deprecatedIcons.js
+++ b/src/content/dynamic/icons/deprecatedIcons.js
@@ -1,6 +1,6 @@
import React, { Component } from "react";
import { Nav } from './nav.js';
- import DeprecatedIconList from './deprecatedIconList';
+import DeprecatedIconList from './deprecatedIconList';
class Icons extends Component {
diff --git a/src/content/dynamic/input/component.js b/src/content/dynamic/input/component.js
index 367b6786..0f5b9a1b 100644
--- a/src/content/dynamic/input/component.js
+++ b/src/content/dynamic/input/component.js
@@ -15,7 +15,7 @@ class AuroButton extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/labs/aurolabs.js b/src/content/dynamic/labs/aurolabs.js
index 0e732e42..750fac19 100644
--- a/src/content/dynamic/labs/aurolabs.js
+++ b/src/content/dynamic/labs/aurolabs.js
@@ -15,7 +15,7 @@ class AuroLabs extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/labs/aurolabsMajors.js b/src/content/dynamic/labs/aurolabsMajors.js
index df05e7e2..d3d25cd7 100644
--- a/src/content/dynamic/labs/aurolabsMajors.js
+++ b/src/content/dynamic/labs/aurolabsMajors.js
@@ -15,7 +15,7 @@ class AuroLabs extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/labs/aurolabsMinors.js b/src/content/dynamic/labs/aurolabsMinors.js
index 2f142d5f..6e2f3b85 100644
--- a/src/content/dynamic/labs/aurolabsMinors.js
+++ b/src/content/dynamic/labs/aurolabsMinors.js
@@ -15,7 +15,7 @@ class AuroLabs extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/lockup/component.js b/src/content/dynamic/lockup/component.js
index 1df28fc0..2d5ac713 100644
--- a/src/content/dynamic/lockup/component.js
+++ b/src/content/dynamic/lockup/component.js
@@ -15,7 +15,7 @@ class AuroLockup extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/menu/component.js b/src/content/dynamic/menu/component.js
index a932f89f..3e394663 100644
--- a/src/content/dynamic/menu/component.js
+++ b/src/content/dynamic/menu/component.js
@@ -18,7 +18,7 @@ class AuroMenu extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/nav/component.js b/src/content/dynamic/nav/component.js
index 204d7923..16d7dcc7 100644
--- a/src/content/dynamic/nav/component.js
+++ b/src/content/dynamic/nav/component.js
@@ -14,7 +14,7 @@ class AuroNav extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/pane/component.js b/src/content/dynamic/pane/component.js
index 1be9f097..67328edb 100644
--- a/src/content/dynamic/pane/component.js
+++ b/src/content/dynamic/pane/component.js
@@ -15,7 +15,7 @@ class AuroIcon extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/popover/component.js b/src/content/dynamic/popover/component.js
index 0dde0cb6..680410b3 100644
--- a/src/content/dynamic/popover/component.js
+++ b/src/content/dynamic/popover/component.js
@@ -15,7 +15,7 @@ class AuroPopover extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/radio/api.js b/src/content/dynamic/radio/api.js
index 7f75f875..b2635597 100644
--- a/src/content/dynamic/radio/api.js
+++ b/src/content/dynamic/radio/api.js
@@ -14,7 +14,7 @@ class AuroRadioApi extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/radio/component.js b/src/content/dynamic/radio/component.js
index bd49c8d2..c6f63538 100644
--- a/src/content/dynamic/radio/component.js
+++ b/src/content/dynamic/radio/component.js
@@ -15,7 +15,7 @@ class AuroRadio extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/select/api.js b/src/content/dynamic/select/api.js
index ccccb0d4..794b921a 100644
--- a/src/content/dynamic/select/api.js
+++ b/src/content/dynamic/select/api.js
@@ -18,7 +18,7 @@ class AuroSelectApi extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/select/component.js b/src/content/dynamic/select/component.js
index d262709f..00acfd35 100644
--- a/src/content/dynamic/select/component.js
+++ b/src/content/dynamic/select/component.js
@@ -20,7 +20,7 @@ class AuroSelect extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/sidenav/api.js b/src/content/dynamic/sidenav/api.js
index f4c12acd..3fca7e00 100644
--- a/src/content/dynamic/sidenav/api.js
+++ b/src/content/dynamic/sidenav/api.js
@@ -14,7 +14,7 @@ class AuroSidenavApi extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/sidenav/component.js b/src/content/dynamic/sidenav/component.js
index b06fd2a4..ea8d4774 100644
--- a/src/content/dynamic/sidenav/component.js
+++ b/src/content/dynamic/sidenav/component.js
@@ -19,7 +19,7 @@ class AuroSidenav extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/skeleton/component.js b/src/content/dynamic/skeleton/component.js
index 1af86087..7149fe41 100644
--- a/src/content/dynamic/skeleton/component.js
+++ b/src/content/dynamic/skeleton/component.js
@@ -15,7 +15,7 @@ class AuroSkeleton extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/toast/api.js b/src/content/dynamic/toast/api.js
index d2ce95ea..f731d4b1 100644
--- a/src/content/dynamic/toast/api.js
+++ b/src/content/dynamic/toast/api.js
@@ -18,7 +18,7 @@ class AuroToastApi extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/toast/component.js b/src/content/dynamic/toast/component.js
index ffcf508c..0c44d6c9 100644
--- a/src/content/dynamic/toast/component.js
+++ b/src/content/dynamic/toast/component.js
@@ -20,7 +20,7 @@ class AuroToast extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/content/dynamic/tokenlist/component.js b/src/content/dynamic/tokenlist/component.js
index bd059ac0..a87b3599 100644
--- a/src/content/dynamic/tokenlist/component.js
+++ b/src/content/dynamic/tokenlist/component.js
@@ -15,7 +15,7 @@ class AuroTokenList extends MarkdownPageWrapper {
fetch(markdownContent)
.then((response) => response.text())
.then((text) => {
- const rawHtml = marked(text);
+ const rawHtml = marked.parse(text);
document.querySelector('.auro-markdown').innerHTML = rawHtml;
Prism.highlightAll();
});
diff --git a/src/functions/renderContentPage.js b/src/functions/renderContentPage.js
new file mode 100644
index 00000000..90513640
--- /dev/null
+++ b/src/functions/renderContentPage.js
@@ -0,0 +1,206 @@
+import React from "react";
+import marked from 'marked';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+import { MarkdownPageWrapper } from 'components/markdownPageWrapper';
+import LinkIcons from 'components/linkIcons';
+import { NavLink } from "react-router-dom";
+import { registerCustomComponent } from "content/utils/registerCustomComponent";
+
+// Imports for the Release page
+import { Query } from '@apollo/react-components';
+import { gql } from 'apollo-boost';
+import Release from '../content/dynamic/releaseDashboard/releases';
+
+class AuroComponentContent extends MarkdownPageWrapper {
+
+ constructor(props) {
+ super(props);
+
+ this.hasFigma = false;
+ this.name = undefined;
+ this.nameSpace = 'aurodesignsystem';
+ this.releasePage = false;
+ this.version = 'latest';
+ };
+
+ static get properties() {
+ return {
+ name: {
+ type: String
+ }
+ };
+ }
+
+ writeComponentName() {
+ const elem = document.getElementById('componentLink');
+ const tabTitle = this.convertToUpperCase(this.name);
+
+ elem.innerText = tabTitle;
+ }
+
+ convertToUpperCase(str) {
+ if(str) {
+ return str.charAt(0).toUpperCase() + str.slice(1);
+ } else {
+ return str;
+ }
+ }
+
+ parseRoute() {
+ let route = window.location.pathname;
+
+ if (!this.name) {
+ this.name = route.replace('/components/auro/', '');
+ }
+
+ if (route.endsWith('/releases')) {
+ this.releasePage = true;
+ }
+
+ let dividerIndex = 0;
+
+ const indexStr = '/auro/';
+ const stripToIndex = route.indexOf(indexStr) + indexStr.length;
+
+ route = route.substring(stripToIndex);
+ dividerIndex = route.indexOf('/');
+
+ if (dividerIndex > 0) {
+ this.name = route.substring(0, dividerIndex);
+ } else {
+ this.name = route;
+ }
+ }
+
+ // function to get text from MD document
+ getMarkdownText() {
+ this.parseRoute();
+
+ fetch(this.markdownContent)
+ .then((response) => response.text())
+ .then((text) => {
+ const rawHtml = marked.parse(text);
+ document.querySelector('.auro-markdown').innerHTML = rawHtml;
+ Prism.highlightAll();
+ });
+
+ const renderer = new marked.Renderer();
+ renderer.link = function(href, title, text) {
+ const link = marked.Renderer.prototype.link.call(this, href, title, text);
+ let url = href
+ url = url.replace(/^.*\/\/[^/]+/, '')
+
+ if (href.includes("auro.alaskaair.com")) {
+
+ return link.replace(`href`,`href="${url}"`);
+ } else {
+
+ const newLink = `
${text} `
+
+ return newLink;
+ }
+ };
+
+ marked.setOptions({
+ renderer: renderer
+ });
+ }
+
+ componentDidMount() {
+ if (!this.releasePage) {
+ this.writeComponentName();
+ }
+
+ if (this.name && this.version) {
+ registerCustomComponent(`custom-${this.name}`, `https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-${this.name}@${this.version}/dist/auro-${this.name}__bundled.js`);
+ }
+ }
+
+ getNavHtml() {
+ return (
+
+ {this.convertToUpperCase(this.name)}
+ Install
+ API
+ Releases
+ {
+ this.hasFigma ?
+ Design support
+ : undefined
+ }
+
+
+
+ );
+ }
+
+ render() {
+ if (!this.name) {
+ this.parseRoute();
+ }
+
+ if (!this.releasePage) {
+ return (
+
+
+ { this.getNavHtml() }
+
+
+
+ );
+ } else {
+ const RELEASES = gql`
+ {
+ organization(login: "AlaskaAirlines") {
+ team(slug: "auro-team") {
+ repositories(first: 1, orderBy: {field: NAME, direction: ASC}, query: "auro-alert") {
+ nodes {
+ name
+ releases(first: 20, orderBy: {field: CREATED_AT, direction: DESC}) {
+ nodes {
+ name
+ updatedAt
+ description
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ `
+
+ return (
+
+ { this.getNavHtml() }
+
+ Releases
+ The following is a list of all Auro element releases.
+
+
+ {({ loading, error, data }) => {
+ if (loading) return ;
+ if (error) return We are unable to connect to GitHub at the moment, please try back later.
;
+
+ return data.organization.team.repositories.nodes.map(({ name, releases }) => (
+ releases.nodes.length > 0
+ ?
+ : ''
+ ));
+ }}
+
+
+ );
+ }
+ }
+}
+
+export default AuroComponentContent;