diff --git a/docs/_layouts/component.njk b/docs/_layouts/component.njk index 7d8844fff..11a4194b0 100644 --- a/docs/_layouts/component.njk +++ b/docs/_layouts/component.njk @@ -9,7 +9,7 @@ {% block beforeContent %}

{{ title }}

- <{{ component.tagName }}> + <{{ component.tagName }}> Since {{ component.since }} {{ component.status }} - {# TODO - add a pro flag for pro components #} - {% if component.tagName == 'wa-page' %} - PRO - {% endif %} + + {% if isPro %}PRO{% endif %}

{{ component.summary | inlineMarkdown | safe }}

+ {% if essentials %} + + + Just want the styles? + Check out {{ ('/docs/essentials/' + essentials + '/') | getTitleFromUrl }} essentials! + + {% endif %} {% endblock %} {# Content #} diff --git a/docs/_layouts/element.njk b/docs/_layouts/element.njk new file mode 100644 index 000000000..0ae2607f4 --- /dev/null +++ b/docs/_layouts/element.njk @@ -0,0 +1,52 @@ +{% set hasSidebar = true %} +{% set hasOutline = true %} + +{% extends '../_includes/base.njk' %} + +{# Component header #} +{% block beforeContent %} +

{{ title }}

+
+ {% for tag, url in elements %} + {{ tag }} + {% endfor %} + {% if since %}Since {{ since }}{% endif %} + {% if status %} + + {{ status }} + + {% endif %} + + {% if isPro %} + PRO + {% endif %} +
+ {% if component %} + + + Want to do more? + Check out the {% for name in (component | toArray) -%} + {{ ' and ' if loop.last and not loop.first }}<wa-{{ name }}>{{ ', ' if not loop.last }} + {%- endfor %} component{{ 's' if (component | isArray) }}! + + {% endif %} +{% endblock %} + +{# Content #} +{% block content %} + {{ content | safe }} +{% endblock %} + +{# Component API #} +{% block afterContent %} + {# Slots #} + {% if css_file %} +

Using these styles

+

If you want to use these styles without using the entirety of Web Awesome Essentials, you can include the following CSS files:

+ + + {% endif %} +{% endblock %} diff --git a/docs/_utils/filters.js b/docs/_utils/filters.js index ebc2f225f..48d549e0e 100644 --- a/docs/_utils/filters.js +++ b/docs/_utils/filters.js @@ -69,3 +69,11 @@ export function breadcrumbs(url, { withCurrent = false } = {}) { } return ret; } + +export function isArray(value) { + return Array.isArray(value); +} + +export function toArray(value) { + return isArray(value) ? value : [value]; +} diff --git a/docs/docs/components/details.md b/docs/docs/components/details.md index 43b62ddaa..15a713287 100644 --- a/docs/docs/components/details.md +++ b/docs/docs/components/details.md @@ -2,6 +2,7 @@ title: Details description: Details show a brief summary and expand to show additional content. tags: component +essentials: details --- diff --git a/docs/docs/components/input.md b/docs/docs/components/input.md index 1ef889d49..d05ebd650 100644 --- a/docs/docs/components/input.md +++ b/docs/docs/components/input.md @@ -2,6 +2,7 @@ title: Input description: Inputs collect data from the user. tags: component +essentials: input --- ```html {.example} diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md index 3a194ecd6..a56e6005f 100644 --- a/docs/docs/components/select.md +++ b/docs/docs/components/select.md @@ -2,6 +2,7 @@ title: Select description: Selects allow you to choose items from a menu of predefined options. tags: component +essentials: input --- ```html {.example} diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md index 66c0207c8..b32437cee 100644 --- a/docs/docs/components/textarea.md +++ b/docs/docs/components/textarea.md @@ -2,6 +2,7 @@ title: Textarea description: Textareas collect data from the user and allow multiple lines of text. tags: component +essentials: input --- ```html {.example} diff --git a/docs/docs/essentials/button.md b/docs/docs/essentials/button.md index fe1e43b39..85ef04410 100644 --- a/docs/docs/essentials/button.md +++ b/docs/docs/essentials/button.md @@ -1,6 +1,7 @@ --- title: Button tags: essentials +layout: element --- ```html {.example} diff --git a/docs/docs/essentials/content.md b/docs/docs/essentials/content.md index 12333808d..088c66297 100644 --- a/docs/docs/essentials/content.md +++ b/docs/docs/essentials/content.md @@ -1,6 +1,7 @@ --- title: Content tags: essentials +layout: element --- diff --git a/docs/docs/essentials/details.md b/docs/docs/essentials/details.md index 9652c3192..4090865f6 100644 --- a/docs/docs/essentials/details.md +++ b/docs/docs/essentials/details.md @@ -1,14 +1,20 @@ --- title: Details tags: essentials +layout: element +component: details +elements: + "
": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details --- -Individual details look like this. +Details show a brief summary and expand to show additional content. +```html {.example}
Tincidunt nunc pulvinar

Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.

+``` ## Examples diff --git a/docs/docs/essentials/input.md b/docs/docs/essentials/input.md index 24d167b29..058f52ad6 100644 --- a/docs/docs/essentials/input.md +++ b/docs/docs/essentials/input.md @@ -1,6 +1,15 @@ --- title: Form Inputs tags: essentials +layout: element +component: + - input + - select + - textarea +elements: + "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input + "