diff --git a/packages/webawesome/docs/_includes/_banner-wa-launch.njk b/packages/webawesome/docs/_includes/_banner-wa-launch.njk new file mode 100644 index 000000000..50e771eee --- /dev/null +++ b/packages/webawesome/docs/_includes/_banner-wa-launch.njk @@ -0,0 +1,19 @@ +{% raw %} + {%- if not currentUser.hasPro -%} + + {%- endif -%} +{% endraw %} diff --git a/packages/webawesome/docs/_includes/base.njk b/packages/webawesome/docs/_includes/base.njk index 01998a3bc..1a28284d0 100644 --- a/packages/webawesome/docs/_includes/base.njk +++ b/packages/webawesome/docs/_includes/base.njk @@ -27,7 +27,11 @@ - {% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180 } %} + {% if hasBanner == undefined %} + {% set hasBanner = true %} + {% endif %} + + {% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180, 'disable-sticky': 'banner' } %} {% set waPageAttributes = waPageAttributes or {} %} {% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %} + {% block pageBanner %} + {% if hasBanner %} + {#- WA Launch Banner -#} + {% include "_banner-wa-launch.njk" ignore missing %} + {% endif %} + {% endblock %} + {% block pageHeader %}
{# Nav toggle #} diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css index b9df2fb71..fbcef3fa0 100644 --- a/packages/webawesome/docs/assets/styles/docs.css +++ b/packages/webawesome/docs/assets/styles/docs.css @@ -27,6 +27,43 @@ body.theme-transitioning { transition: opacity 200ms ease-out; } +/* banner */ +wa-page > [slot='banner'] { + padding: var(--wa-space-0); + + .banner-content { + /* match docs header padding-inline by default */ + padding-inline: var(--wa-space-xl); + padding-block: var(--wa-space-m); + } + + &.banner-wa-launch { + /* custom brand colors carrried over from theme-site for the banner */ + --wa-color-brand-95: #fef0ec; + --wa-color-brand-90: #fce0d8; + --wa-color-brand-80: #f8bcac; + --wa-color-brand-70: #fa9378; + --wa-color-brand-60: #f46a45; + --wa-color-brand-50: #cb4b27; + --wa-color-brand-40: #9d371a; + --wa-color-brand-30: #7c2a13; + --wa-color-brand-20: #5d1d0b; + --wa-color-brand-10: #3b0f05; + --wa-color-brand-05: #270802; + --wa-color-brand: var(--wa-color-brand-60); + --wa-color-brand-on: var(--wa-color-brand-10); + + .banner-icon { + color: var(--wa-color-brand-fill-loud); + font-size: var(--wa-font-size-xl); + } + + .appearance-underlined.variant-drawn { + --underline-color: var(--wa-color-brand); + } + } +} + /* Header */ wa-page::part(header) { background-color: var(--wa-color-surface-default); diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css index 16d75eda6..8a2a4762e 100644 --- a/packages/webawesome/docs/assets/styles/utils.css +++ b/packages/webawesome/docs/assets/styles/utils.css @@ -127,6 +127,28 @@ /* #region funsies + cosmetics */ + /* decorative underline emphasis */ + .appearance-underlined.variant-drawn { + --underline-color: currentColor; + position: relative; + text-decoration: none; + padding-bottom: 0.4em; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 0.4em; + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,12 Q50,8 100,12' stroke='black' stroke-width='4' fill='none'/%3E%3C/svg%3E"); + mask-repeat: no-repeat; + mask-size: 100% auto; + mask-position: 0 100%; + background-color: var(--underline-color); + } + } + /* grid background */ .background-grid { --grid-spacing: var(--wa-space-2xl); diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 8d5e82353..df82c609d 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -41,6 +41,7 @@ Components with the Experimental badge sh - Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `` and `` [issue:1472] - Fixed a bug in `` and `` that caused the component to prematurely hide when certain child elements are used [pr:1636] - Fixed a bug in `` and `` that prevented dots and other valid ID characters from being used [issue:1648] +- [Pro] Fixed a bug in `` that caused menu and aside content to reserve space for slots with `disable-sticky` - Fixed incorrect docs for the `wa-include-error` event which is dispatched by `` [issue:1663] - Fixed a bug in `` where slotted header and footer content wasn't properly aligned [pr:1435] - Improved autofill styles in `` so they span the entire width of the visual input [issue:1439]