diff --git a/docs/_includes/partials/component/header.njk b/docs/_includes/partials/component/header.njk
index 15d9dc2439..e8aeb5b30f 100644
--- a/docs/_includes/partials/component/header.njk
+++ b/docs/_includes/partials/component/header.njk
@@ -1,38 +1,25 @@
-{%- set headingId = (heading if heading else title) | lower | slug -%}
-{%- set headingContent = heading or title -%}
-{%- set manifest = doc and doc.docsPage and doc.docsPage.manifest -%}
-{%- if subnav.collection -%}
- {% set tabs = collections[subnav.collection] | sort(attribute="data.subnav.order") %}
-{%- endif -%}
-{%- if manifest -%}
- {% set tabs = doc.tabs %}
- {% set demos = manifest.getDemos(doc.docsPage.tagName) %}
- {% set planned = repoStatus | isPlanned(prettyName) %}
- {% set prettyName -%}{{ (doc.alias or doc.slug or element.slug) | deslugify }}{% endset %}
- {% set headingContent -%}
- {{ prettyName }}
- {% if planned %}
- Planned
- {% endif %}
- {% endset %}
-{%- endif -%}
-
-
{{ headingContent }}
- {% if tokenSearch %}{% include 'partials/component/token-search.html' %}{% endif %}
- {% if tabs %}
-
- {% for tab in tabs %}
- {%- set href = tab.url or tab.href -%}
- {%- set pageUrl = (doc and doc.permalink | replace('index.html', '')) or page.url -%}
- {%- set title = tab.data.title or tab.pageTitle -%}
- {%- set active = href == pageUrl -%}
- {{ title | capitalize }}
- {%- endfor -%}
-
+
{{ heading if heading else title }}
+
+ {% if tokenSearch %}
+
+ {% endif %}
+
+ {% if subnav.collection %}
+ {% for tab in collections[subnav.collection] | sort(attribute="data.subnav.order") %}
+
+ {{ tab.data.title }}
+ {% endfor %}
+
{% endif %}
diff --git a/docs/_includes/partials/component/sidenav.njk b/docs/_includes/partials/component/sidenav.njk
index ab9f0b7d97..b60ac2b358 100644
--- a/docs/_includes/partials/component/sidenav.njk
+++ b/docs/_includes/partials/component/sidenav.njk
@@ -22,7 +22,7 @@
{%- set href = '/elements/' + slug + '/' -%}
{%- set active = href === page.url -%}
{%- set name = (fst.alias) or (slug | deslugify) %}
- {%- set planned = repoStatus | isPlanned(name) %}
+ {%- set planned = isPlanned(repoStatus, name) %}
{% if not (tagName in comingSoonItems) %}
{{- fst.alias or (slug | deslugify) -}}
diff --git a/docs/_includes/partials/component/token-search.html b/docs/_includes/partials/component/token-search.html
deleted file mode 100644
index bbf9871e78..0000000000
--- a/docs/_includes/partials/component/token-search.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
diff --git a/docs/_includes/partials/javascript/global.html b/docs/_includes/partials/javascript/global.html
index daaed9acba..914ac5ffec 100644
--- a/docs/_includes/partials/javascript/global.html
+++ b/docs/_includes/partials/javascript/global.html
@@ -17,11 +17,17 @@
{# only load components that need hydrated (aka interactivity) #}
+ {%- if hasToc %}
+
+
+ {%- endif %}
+
diff --git a/docs/_plugins/markdown-it.cjs b/docs/_plugins/markdown-it.cjs
index 7b19288406..7d74508ddd 100644
--- a/docs/_plugins/markdown-it.cjs
+++ b/docs/_plugins/markdown-it.cjs
@@ -54,7 +54,6 @@ function rhdsCodeBlock(md) {
return html`
${rendered}`.trim();
} else {
diff --git a/docs/_plugins/rhds.cjs b/docs/_plugins/rhds.cjs
index 131843c4f9..d5c8223ef2 100644
--- a/docs/_plugins/rhds.cjs
+++ b/docs/_plugins/rhds.cjs
@@ -13,18 +13,6 @@ const RHDSAlphabetizeTagsPlugin = require('./alphabetize-tags.cjs');
const RHDSShortcodesPlugin = require('./shortcodes.cjs');
const { parse } = require('async-csv');
-const exists = async path => {
- const { stat } = await import('node:fs/promises');
- try {
- await stat(path);
- return true;
- } catch {
- return false;
- }
-};
-
-const cwd = process.cwd();
-
/**
* EleventyTransformContext the `this` binding for transform functions
* outputPath the path the page will be written to
@@ -121,7 +109,7 @@ const COPY_CONTENT_EXTENSIONS = [
*/
function getFilesToCopy() {
// Copy element demo files
- const repoRoot = cwd;
+ const repoRoot = process.cwd();
const tagNames = fs.readdirSync(path.join(repoRoot, 'elements'), { withFileTypes: true })
.filter(ent => ent.isDirectory())
.map(ent => ent.name);
@@ -225,11 +213,6 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
return pfeconfig.aliases[tagName] || deslugify(slug);
});
- eleventyConfig.addFilter('isPlanned', function isPlanned(repoStatus, name) {
- const element = repoStatus.find(element => element.name === name);
- return element?.libraries.find(library => library.name === 'RH Elements')?.status === 'Planned';
- });
-
eleventyConfig.addFilter('getTitleFromDocs', function(docs) {
return docs.find(x => x.docsPage?.title)?.alias
?? docs[0]?.alias
@@ -320,9 +303,9 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
/**
* @param {string} filePath
*/
- async function getProps(filePath) {
+ function getProps(filePath) {
const [, tagName] = filePath.split(path.sep);
- const absPath = path.join(cwd, filePath);
+ const absPath = path.join(process.cwd(), filePath);
/** configured alias for this element e.g. `Call to Action` for `rh-cta` */
const alias = pfeconfig.aliases[tagName];
/** e.g. `footer` for `rh-footer` or `call-to-action` for `rh-cta` */
@@ -337,26 +320,11 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
pageSlug === 'overview' ? `/elements/${slug}/index.html`
: `/elements/${slug}/${pageSlug}/index.html`;
const href = permalink.replace('index.html', '');
- const fileExists = await exists(absPath);
- const elDir = path.join(cwd, 'elements', tagName);
- const hasLightdom = await exists(path.join(elDir, `${tagName}-lightdom.css`));
- const hasLightdomShim = await exists(path.join(elDir, `${tagName}-lightdom-shim.css`));
- const siblingElements = (await Array.fromAsync(glob(`elements/${tagName}/*.ts`, { cwd })))
- .map(x => x.split('/').pop())
- .filter(x => x && x.startsWith('rh-') && !x.endsWith('.d.ts'))
- .map(x => x?.split('.').shift())
- .filter(x => x !== tagName );
- const isCodePage = pageSlug === 'code';
const screenshotPath = `/elements/${slug}/screenshot.png`;
/** urls for related links */
return {
tagName,
filePath,
- fileExists,
- hasLightdom,
- hasLightdomShim,
- isCodePage,
- siblingElements,
absPath,
alias,
slug,
@@ -378,44 +346,20 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
);
const customElementsManifestDocsPages = await eleventyConfig.globalData?.elements();
- const filePaths = (await Array.fromAsync(glob(`elements/*/docs/*.md`, { cwd })))
+ const filePaths = (await Array.fromAsync(glob(`elements/*/docs/*.md`, { cwd: process.cwd() })))
.filter(x => x.match(/\d{1,3}-[\w-]+\.md$/)); // only include new style docs
- const elementDocFilePaths =
- Array.from(new Set([
- ...filePaths,
- // TODO: adding the code file in the next line is a temporary hack to add in a virtual
- // `XX-code.md` if one doesn't already exist. At a later date, this entire function
- // (elementDocs) should be refactored, and the elements/*/docs/*.md files should be used
- // only for markdown content, but the code and demos tabs should be fully generated, with
- // the XX-code.md content interjected, if any.
- ...await Array.fromAsync(glob('elements/*', { cwd }), x => `${x}/docs/30-code.md`
- ),
- ]));
-
- const elementDocs = await Promise.all(elementDocFilePaths.map(async filePath => {
- const props = await getProps(filePath);
+ return filePaths.map(filePath => {
+ const props = getProps(filePath);
const [manifest] = getAllManifests();
const docsPage =
- customElementsManifestDocsPages.find(x => x.tagName === props.tagName)
- ?? new DocsPage(manifest);
-
- const demosUrl = `/elements/${props.slug}/demos/`;
- const tabs = await Promise.all(elementDocFilePaths
+ customElementsManifestDocsPages.find(x => x.tagName === props.tagName)
+ ?? new DocsPage(manifest);
+ const tabs = filePaths
.filter(x => x.split('/docs/').at(0) === (`elements/${props.tagName}`))
.sort()
- // todo: avoid calling getProps twice, it's expensive
- .map(x => getProps(x)));
- if (!tabs.some(x => x.pageTitle === 'Demos')) {
- tabs.splice(-1, 0, {
- ...props,
- pageTitle: 'Demos',
- href: demosUrl,
- });
- }
+ .map(x => getProps(x));
return { docsPage, tabs, ...props };
- }));
- elementDocs.sort(alphabeticallyBySlug);
- return elementDocs;
+ }).sort(alphabeticallyBySlug);
} catch (e) {
// it's important to surface this
// eslint-disable-next-line no-console
@@ -424,11 +368,8 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
}
});
- eleventyConfig.addWatchTarget('docs/patterns/**/patterns/*.html');
- eleventyConfig.addWatchTarget('docs/theming/**/patterns/*.html');
-
- for (const tagName of fs.readdirSync(path.join(cwd, './elements/'))) {
- const dir = path.join(cwd, './elements/', tagName, 'docs/');
+ for (const tagName of fs.readdirSync(path.join(process.cwd(), './elements/'))) {
+ const dir = path.join(process.cwd(), './elements/', tagName, 'docs/');
eleventyConfig.addWatchTarget(dir);
}
diff --git a/docs/_plugins/shortcodes.cjs b/docs/_plugins/shortcodes.cjs
index 29e3302938..85c70347a2 100644
--- a/docs/_plugins/shortcodes.cjs
+++ b/docs/_plugins/shortcodes.cjs
@@ -3,11 +3,17 @@ const {
RepoStatusChecklist,
RepoStatusTable,
} = require('./shortcodes/repoStatus.cjs');
+const RenderInstallation = require('./shortcodes/renderInstallation.cjs');
+const RenderLightDom = require('./shortcodes/renderLightDom.cjs');
+const RenderCodeDocs = require('./shortcodes/renderCodeDocs.cjs');
const SpacerTokensTable = require('./shortcodes/spacerTokensTable.cjs');
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(RepoStatusList);
eleventyConfig.addPlugin(RepoStatusChecklist);
eleventyConfig.addPlugin(RepoStatusTable);
+ eleventyConfig.addPlugin(RenderInstallation);
+ eleventyConfig.addPlugin(RenderLightDom);
eleventyConfig.addPlugin(SpacerTokensTable);
+ eleventyConfig.addPlugin(RenderCodeDocs);
};
diff --git a/docs/_plugins/shortcodes/renderCodeDocs.cjs b/docs/_plugins/shortcodes/renderCodeDocs.cjs
new file mode 100644
index 0000000000..24c4d0705f
--- /dev/null
+++ b/docs/_plugins/shortcodes/renderCodeDocs.cjs
@@ -0,0 +1,558 @@
+import('@patternfly/pfe-tools/11ty/DocsPage.js');
+const { tokens } = require('@rhds/tokens');
+const { copyCell, getTokenHref, dedent } = require('../tokensHelpers.cjs');
+
+/** quick and dirty dedent, also provides in-editor syntax highlighting */
+const html = (...args) =>
+ String.raw(...args)
+ .split('\n')
+ .map(x => x.replace(/^ {6}/, ''))
+ .join('\n');
+
+module.exports = function(eleventyConfig) {
+ eleventyConfig
+ .addPairedShortcode('renderCodeDocs', async function renderCodeDocs(content, kwargs = {}) {
+ const page = this.context?.doc ?? this.ctx;
+ const renderers = new Renderers(page, {
+ ...kwargs,
+ renderTemplate: eleventyConfig.javascriptFunctions.renderTemplate,
+ });
+ return renderers.renderAll(content);
+ });
+};
+
+function mdHeading(content, { level = 2 }) {
+ // Following code does not work the 2nd line fixes, however I don't think
+ // this is what we want any more as we are only using this on depreciated
+ // summary headings. This should be just plain text not a formatted heading.
+ // would be better just to apply styling to that text.
+ // const hashes = Array.from({ length }, () => '#').join('');
+ // const hashes = Array(level).fill('#').join('');
+ return content;
+}
+
+function type(content = '', { lang = 'ts' } = {}) {
+ return content.trim() && `\n\n\`\`\`${lang}\n${content.trim()}\n\n\`\`\`\n\n`;
+}
+
+function stringifyParams(method) {
+ return method.parameters?.map?.(p =>
+ `${p.name}: ${p.type?.text ?? 'unknown'}`).join(', ') ?? '';
+}
+
+class Renderers {
+ constructor(page, kwargs) {
+ /**
+ * NB: since the data for this shortcode is no a POJO,
+ * but a DocsPage instance, 11ty assigns it to this.ctx._
+ * @see https://github.com/11ty/eleventy/blob/bf7c0c0cce1b2cb01561f57fdd33db001df4cb7e/src/Plugins/RenderPlugin.js#L89-L93
+ */
+ this.docsPage = page.doc.docsPage;
+ this.manifest = this.docsPage.manifest;
+ this.kwargs = kwargs;
+ }
+
+ async innerMD(content = '') {
+ return (await this.kwargs.renderTemplate(content.trim(), 'md')).trim();
+ }
+
+ packageTagName(kwargs) {
+ if (kwargs.for && !kwargs.for.match(/@/)) {
+ return kwargs.for;
+ } else {
+ const [, tagName = this.tagName] = (kwargs?.for ?? '').match(/@[-\w]+\/(.*)/) ?? [];
+ return tagName;
+ }
+ }
+
+ async renderAll(content = '') {
+ const length = this.kwargs.level ?? 2;
+ const level = length + 1;
+ const component = this.kwargs.for ?? this.docsPage.tagName;
+ const description = this.manifest.getDescription(component);
+
+ const allSlots =
+ this.docsPage.manifest.getSlots(this.packageTagName({ level, for: component })) ?? [];
+ const slotCount = allSlots.filter(x => !x.deprecated).length;
+ const deprecatedSlotCount = allSlots.filter(x => x.deprecated).length;
+
+ const allAttr =
+ this.manifest.getAttributes(this.packageTagName({ level, for: component })) ?? [];
+ const attrCount = allAttr.filter(x => !x.deprecated).length;
+ const deprecatedAttrCount = allAttr.filter(x => x.deprecated).length;
+
+ const allMethods =
+ this.manifest.getMethods(this.packageTagName({ level, for: component })) ?? [];
+ const methodsCount = allMethods.filter(x => !x.deprecated).length;
+ const deprecatedMethodsCount = allMethods.filter(x => x.deprecated).length;
+
+ const allEvents = this.manifest.getEvents(this.packageTagName({ level, for: component })) ?? [];
+ const eventsCount = allEvents.filter(x => !x.deprecated).length;
+ const deprecatedEventsCount = allEvents.filter(x => x.deprecated).length;
+
+ const allCssParts =
+ this.manifest.getCssParts(this.packageTagName({ level, for: component })) ?? [];
+ const cssPartsCount = allCssParts.filter(x => !x.deprecated).length;
+ const deprecatedCssPartsCount = allCssParts.filter(x => x.deprecated).length;
+
+ const allCssProperties =
+ this.manifest.getCssCustomProperties(this.packageTagName({ level, for: component })) ?? [];
+ const cssPropertiesCount =
+ allCssProperties.filter(x => !x.deprecated && !tokens.has(x.name)).length;
+ const deprecatedCssPropertiesCount =
+ allCssProperties.filter(x => x.deprecated && !tokens.has(x.name)).length;
+
+ const allDesignTokens =
+ this.manifest.getCssCustomProperties(this.packageTagName({ level, for: component })) ?? [];
+ const designTokensCount = allDesignTokens.filter(x => tokens.has(x.name)).length;
+
+
+ // TODO: dsd
+ return html`
+ ${Array.from({ length }, () => '#').join('')} ${component}
+ ${this.kwargs.hideDescription ?? false ? `` : html`
+
+ `}
+ `;
+ }
+
+ /** Render the installation instructions for the element */
+ renderInstallation(content, { header = 'Installation', level = 2, tagName } = {}) {
+ return html`
+
+
Installation
+
+ We recommend loading elements via a CDN such as [JSPM][inst-jspm] and
+ using an import map to manage your dependencies.
+
+ For more information on import maps and how to use them,
+ see the [import map reference on MDN Web Docs][inst-mdn].
+
+ If you are using node and NPM, you can install this component using npm:
+
+ ~~~shell
+ npm install ${this.manifest.packageJson.name}
+ ~~~
+
+ Then import this component into your project by using a
+ [bare module specifier][inst-bms]:
+
+ ~~~js
+ import '@patternfly/elements/${tagName}/${tagName}.js';
+ ~~~
+
+ **Please Note** You should either load elements via a CDN or
+ install them locally through NPM. *Do not do both.*
+
+
+
+ [inst-jspm]: https://jspm.dev
+ [inst-mdn]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap/
+ [inst-bms]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules`;
+ }
+
+ /** Render the list of element methods */
+ async renderMethods(content, { header = 'Methods', level = 2, ...kwargs } = {}) {
+ const allMethods = this.manifest.getMethods(this.packageTagName(kwargs)) ?? [];
+ const deprecated = allMethods.filter(x => x.deprecated);
+ const methods = allMethods.filter(x => !x.deprecated);
+ // TODO: inline code highlighting for type and default: render the markdown to html and extract the `` from the `
+
+ Red Hat CDN
+ ${cdnContent}
+ NPM
+ ${npmContent}
+ JSPM
+ ${jspmContent}
+
+
+${content ?? ''}
+
+
+`;
+}
+
+module.exports = function(eleventyConfig) {
+ eleventyConfig.addPairedShortcode('renderInstall', renderInstall);
+};
diff --git a/docs/_plugins/shortcodes/renderLightDom.cjs b/docs/_plugins/shortcodes/renderLightDom.cjs
new file mode 100644
index 0000000000..6fdece5ded
--- /dev/null
+++ b/docs/_plugins/shortcodes/renderLightDom.cjs
@@ -0,0 +1,64 @@
+// for editor highlighting
+const html = String.raw;
+const markdown = String.raw;
+
+/**
+ * @param {string} content
+ * @param {object} [options]
+ * @param {boolean} [options.shimcss]
+ */
+async function renderLightDom(content, {
+ shimcss = false,
+} = {}) {
+ const docsPage = this.ctx.doc;
+ let lightdomContent = '';
+
+ if (shimcss === true) {
+ lightdomContent = markdown`
+
+### Lightdom CSS shim
+
+This element has an optional "Lightdom CSS" shim to help reduce Cumulative Layout Shift (CLS) experience before the element has fully initialized.
+
+~~~html
+
+~~~
+
+
+
Note
+
Replace /path/to/ with path to the CSS file, whether local or CDN.
+
+
+
+
Warning
+
Lightdom CSS shims are an optional, temporary solution for reducing CLS. Delcarative Shadow DOM is the better solution, and once it is more widely available, Lightdom CSS shims will no longer be needed and will become deprecated.
+
+`;
+ } else {
+ lightdomContent = markdown`
+
+### Lightdom CSS
+
+This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.
+
+~~~html
+
+~~~
+
+
+
Note
+
Replace /path/to/ with path to the CSS file, whether local or CDN.
Lightdom CSS shims are an optional, temporary solution for reducing CLS.
- Declarative Shadow DOM is the better solution, and once SSR tools are more widely
- available, Lightdom CSS shims will no longer be needed and will become deprecated.
-
-
-
This element has an optional "Lightdom CSS" shim to help reduce
- Cumulative Layout Shift (CLS) experience
- before the element has fully initialized.
-
-
-
Note
-
Replace /path/to/ with path to the CSS file, whether local or CDN.
+
+
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-button/docs/30-code.md b/elements/rh-button/docs/30-code.md
new file mode 100644
index 0000000000..6c433fdbe3
--- /dev/null
+++ b/elements/rh-button/docs/30-code.md
@@ -0,0 +1,5 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-card/docs/30-code.md b/elements/rh-card/docs/30-code.md
new file mode 100644
index 0000000000..7993ce3cd6
--- /dev/null
+++ b/elements/rh-card/docs/30-code.md
@@ -0,0 +1,3 @@
+{% renderInstall %}{% endrenderInstall %}
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-code-block/docs/30-code.md b/elements/rh-code-block/docs/30-code.md
index 1ecf5934f6..b044258817 100644
--- a/elements/rh-code-block/docs/30-code.md
+++ b/elements/rh-code-block/docs/30-code.md
@@ -1,10 +1,16 @@
+{% renderInstall %}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
+## Usage
+
The content of code-block snippets must be contained within a non-executable
`
+
+
### Loading
Icons load lazily by default, meaning that the browser will not attempt to fetch and render the icon until it scrolls into view. You can change this with the loading attribute, which has three values:
@@ -8,7 +16,9 @@ Icons load lazily by default, meaning that the browser will not attempt to fetch
You might choose to enable eager rendering for "above-the-fold" content, but keep lazy loading for the rest of the page.
-```html rh-code-block
-
-```
+
+
+
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-menu/docs/rh-menu.md b/elements/rh-menu/docs/rh-menu.md
new file mode 100644
index 0000000000..e57d1513de
--- /dev/null
+++ b/elements/rh-menu/docs/rh-menu.md
@@ -0,0 +1,16 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+
+ Toggle Menu
+ Menuitem1
+ Menuitem2
+ Menuitem3
+ Menuitem4
+
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+
diff --git a/elements/rh-navigation-secondary/docs/30-code.md b/elements/rh-navigation-secondary/docs/30-code.md
index de5495ecb1..619cc31c56 100644
--- a/elements/rh-navigation-secondary/docs/30-code.md
+++ b/elements/rh-navigation-secondary/docs/30-code.md
@@ -1,24 +1,26 @@
+{% renderInstall lightdomcss=true%}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
### System Integration
#### Current page indicator
-When a user is viewing a page that is part of the secondary navigation
-information architecture, a red top border is visible. If the current active
-page is part of a dropdown menu, that dropdown is highlighted with the same top
-border to indicate it contains the current page. For more details on how to use
-this current page indicator, refer to the [design
-guidelines](../guidelines/#current-page-indicator) for current page indicator.
+When a user is viewing a page that is part of the secondary navigation information architecture, a red top border is visible. If the current active page is part of a dropdown menu, that dropdown is highlighted with the same top border to indicate it contains the current page. For more details on how to use this current page indicator, refer to the [design guidelines](../guidelines/#current-page-indicator) for current page indicator.
-To enable this indicator style, implementation should apply the
-`aria-current="page"` attribute to the current page link.
+To enable this indicator style, implementation should apply the aria-current="page" attribute to the current page link.
-```html rh-code-block
+```html
Current page being viewed
```
-The `rh-navigation-secondary` element does not apply the
-`aria-current="page"` attribute itself. The responsibility for
-keeping track of which link is currently active falls on the content management
-system or application. The element checks for the presence of this attribute
-and applies the current page indicator style to nav links and dropdown menus
-when the active page is within a dropdown menu.
+ The `rh-navigation-secondary` element does not apply the aria-current="page" attribute itself. The responsibility for keeping track of which link is currently active falls on the content management system or application. The element checks for the presence of this attribute and applies the current page indicator style to nav links and dropdown menus when the active page is within a dropdown menu.
+
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-navigation-secondary-dropdown' %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-navigation-secondary-menu' %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-navigation-secondary-menu-section' %}{% endrenderCodeDocs %}
diff --git a/elements/rh-pagination/docs/30-code.md b/elements/rh-pagination/docs/30-code.md
new file mode 100644
index 0000000000..28121686ab
--- /dev/null
+++ b/elements/rh-pagination/docs/30-code.md
@@ -0,0 +1,19 @@
+{% renderInstall lightdomcss=true %}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
+## Usage
+
+```html
+
+
+
Ensure that the table follows the recommendations on the accessibility tab so that the table works with assistive technology.
+
+
+
### Title
Specify the title of the table using a `
` element.
-```html rh-code-block
+```html
@@ -16,15 +28,11 @@ Specify the title of the table using a `
` element.
### Responsive tables
`` will automatically reformat to a "stacked" presentation in narrow
-containers such as on small screens and mobile devices or in page sidebars. For
-simple table structures, each table cell heading will be auto-generated for its
-responsive layout.
+containers such as on small screens and mobile devices or in page sidebars. For simple table structures, each table cell heading will be auto-generated for its responsive layout.
-For complex tables (i.e., including `colspan` or `rowspan` attributes), or to
-customize or override individual table cell headings on mobile devices, use a
-`data-label` attribute on the `
` elements to label them.
+For complex tables (i.e., including `colspan` or `rowspan` attributes), or to customize or override individual table cell headings on mobile devices, use a `data-label` attribute on the `
` elements to label them.
-```html rh-code-block
+```html
@@ -64,12 +72,13 @@ customize or override individual table cell headings on mobile devices, use a
```
+
### Column highlighting
To enable column highlighting, the `
` element must also include a `
`
element for each column in the table, typically wrapped with a `
`.
-```html rh-code-block
+```html
@@ -90,7 +99,7 @@ element for each column in the table, typically wrapped with a `
`.
To enable sorting on a column, add an `` as the last child of
the `
` cell.
-```html rh-code-block
+```html
@@ -115,10 +124,9 @@ the `
` cell.
### Summary
-Additional information about the data in the table should be slotted into the
-`summary` slot after the `table` element.
+Additional information about the data in the table should be slotted into the `summary` slot after the `table` element.
-```html rh-code-block
+```html
@@ -158,3 +166,45 @@ Additional information about the data in the table should be slotted into the
```
+## Example
+
+
+
+
+
+
+