From c195b9f444975704b02fd64ded43f0a416eda3c7 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 24 Oct 2023 09:57:01 -0400 Subject: [PATCH] prettier --- .../layout-templates/advanced-example.css | 13 ++++---- .../layout-templates/advanced-example.html | 6 ++-- docs/_includes/layout-templates/app.css | 23 +++++++------ docs/_includes/layout-templates/example.css | 14 ++++---- docs/_includes/layout-templates/example.html | 4 +-- docs/_includes/layout-templates/hero.css | 1 - docs/_includes/layout-templates/hero.html | 3 +- .../layout-templates/sport-awesome.css | 13 +++----- docs/eleventy.config.cjs | 7 +--- docs/pages/components/layout.md | 2 +- docs/pages/components/nav-group.md | 2 +- docs/pages/components/nav-item.md | 2 +- docs/pages/layouts/index.md | 2 +- src/components/layout/layout.component.ts | 32 +++++++++---------- src/components/layout/layout.styles.ts | 25 ++++++++------- src/components/nav-item/nav-item.component.ts | 12 ++----- src/components/nav-item/nav-item.styles.ts | 12 +++---- src/themes/applied.css | 3 +- 18 files changed, 78 insertions(+), 98 deletions(-) diff --git a/docs/_includes/layout-templates/advanced-example.css b/docs/_includes/layout-templates/advanced-example.css index cfbe2ee8c..913a73fee 100644 --- a/docs/_includes/layout-templates/advanced-example.css +++ b/docs/_includes/layout-templates/advanced-example.css @@ -43,30 +43,31 @@ footer { background-color: var(--wa-color-blue-90); } -.banner, .header { +.banner, +.header { min-width: 100%; height: 100%; } -[slot=header] { +[slot='header'] { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } -[slot=aside] { +[slot='aside'] { background-color: var(--wa-color-yellow-90); } -[slot=menu] { +[slot='menu'] { background-color: var(--wa-color-red-80); } -[slot=main-header] { +[slot='main-header'] { background-color: var(--wa-color-red-90); padding: 1rem; } -[slot=main-footer] { +[slot='main-footer'] { background-color: var(--wa-color-red-70); } diff --git a/docs/_includes/layout-templates/advanced-example.html b/docs/_includes/layout-templates/advanced-example.html index 6df7efcef..0b8b4b3e4 100644 --- a/docs/_includes/layout-templates/advanced-example.html +++ b/docs/_includes/layout-templates/advanced-example.html @@ -1,7 +1,5 @@ - +
Header
@@ -10,7 +8,7 @@
Inline header
-
Main
+
Main
Inline footer
diff --git a/docs/_includes/layout-templates/app.css b/docs/_includes/layout-templates/app.css index 4104d8ae9..12dcef788 100644 --- a/docs/_includes/layout-templates/app.css +++ b/docs/_includes/layout-templates/app.css @@ -32,44 +32,43 @@ wa-layout::part(drawer__panel) { height: 100%; } -wa-layout[view="mobile"] { +wa-layout[view='mobile'] { background-color: var(--wa-color-white); --menu-width: 0px; } -wa-layout[view="mobile"]::part(header) { +wa-layout[view='mobile']::part(header) { padding: 0.25rem; border-bottom: 1px solid var(--wa-color-neutral-70); } -wa-layout[view="mobile"]::part(navigation) { +wa-layout[view='mobile']::part(navigation) { display: none; } -wa-layout[view="desktop"]::part(main) { +wa-layout[view='desktop']::part(main) { padding-top: 1rem; } -wa-layout[view="desktop"] { +wa-layout[view='desktop'] { --menu-width: 250px; } - -wa-layout[view="desktop"]::part(navigation) { +wa-layout[view='desktop']::part(navigation) { padding-top: 1.9rem; } -wa-layout[view="desktop"] > [slot="header"] { +wa-layout[view='desktop'] > [slot='header'] { display: none; } -wa-layout[view="desktop"]::part(header) { +wa-layout[view='desktop']::part(header) { display: none; } -wa-layout[view="desktop"] main { +wa-layout[view='desktop'] main { background-color: var(--wa-color-white); - box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.05); + box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05); border: 1px solid var(--wa-color-neutral-80); border-top-left-radius: 8px; } @@ -183,7 +182,7 @@ wa-layout[view="desktop"] main { --wa-spacing-large: 8px; } -wa-layout[view="desktop"] .wa-button--nav-footer::part(base) { +wa-layout[view='desktop'] .wa-button--nav-footer::part(base) { --border-color: transparent; border-top-color: var(--wa-color-neutral-70); } diff --git a/docs/_includes/layout-templates/example.css b/docs/_includes/layout-templates/example.css index 9799d788e..e8f24e06d 100644 --- a/docs/_includes/layout-templates/example.css +++ b/docs/_includes/layout-templates/example.css @@ -42,33 +42,33 @@ footer { background-color: var(--wa-color-blue-90); } -.banner, .header { +.banner, +.header { min-width: 100%; height: 100%; } -[slot=header] { +[slot='header'] { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } -[slot=aside] { +[slot='aside'] { height: 100%; background-color: var(--wa-color-yellow-90); } -[slot=menu] { +[slot='menu'] { height: 100%; background-color: var(--wa-color-red-90); } -[slot=main-header] { +[slot='main-header'] { background-color: var(--wa-color-red-80); padding: 1rem; } -[slot=main-footer] { +[slot='main-footer'] { background-color: var(--wa-color-green-80); } - diff --git a/docs/_includes/layout-templates/example.html b/docs/_includes/layout-templates/example.html index e89432d07..45d44a620 100644 --- a/docs/_includes/layout-templates/example.html +++ b/docs/_includes/layout-templates/example.html @@ -1,9 +1,7 @@ diff --git a/docs/_includes/layout-templates/hero.css b/docs/_includes/layout-templates/hero.css index ad08bdfac..36d252ffd 100644 --- a/docs/_includes/layout-templates/hero.css +++ b/docs/_includes/layout-templates/hero.css @@ -7,4 +7,3 @@ body { padding: 0; height: auto; } - diff --git a/docs/_includes/layout-templates/hero.html b/docs/_includes/layout-templates/hero.html index cc09a644c..2b2662ad4 100644 --- a/docs/_includes/layout-templates/hero.html +++ b/docs/_includes/layout-templates/hero.html @@ -1,2 +1 @@ - + diff --git a/docs/_includes/layout-templates/sport-awesome.css b/docs/_includes/layout-templates/sport-awesome.css index e8c29bd1f..d1aa1a002 100644 --- a/docs/_includes/layout-templates/sport-awesome.css +++ b/docs/_includes/layout-templates/sport-awesome.css @@ -15,7 +15,6 @@ body { margin-block-start: var(--wa-flow-spacing); } - img { display: inline-block; max-width: 100%; @@ -60,7 +59,7 @@ img { .header__navigation { display: flex; - clip-path: polygon(2rem 0,100% 0,100% 100%,0 100%); + clip-path: polygon(2rem 0, 100% 0, 100% 100%, 0 100%); padding-inline-start: 2.5rem; padding-inline-end: var(--wa-space-base); background-color: var(--wa-color-brand-fill-vivid); @@ -80,7 +79,6 @@ a.logo { color: var(--wa-color-text-normal); text-decoration: none; margin: auto; - } a.logo:is(:hover, :focus) { @@ -97,7 +95,7 @@ a.logo:is(:hover, :focus) { width: 100%; } -.navigation--desktop wa-nav-item[current="page"] { +.navigation--desktop wa-nav-item[current='page'] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 4px; @@ -112,12 +110,12 @@ a.logo:is(:hover, :focus) { margin-inline-start: auto; } -wa-layout[view="desktop"] [data-toggle-nav], -wa-layout[view="desktop"]::part(navigation) { +wa-layout[view='desktop'] [data-toggle-nav], +wa-layout[view='desktop']::part(navigation) { display: none; } -wa-layout[view="mobile"] .navigation--desktop { +wa-layout[view='mobile'] .navigation--desktop { display: none; } @@ -144,7 +142,6 @@ wa-layout[view="mobile"] .navigation--desktop { border: 1px solid var(--wa-color-surface-outline); } - .table-scroll { max-width: 100%; overflow-x: auto; diff --git a/docs/eleventy.config.cjs b/docs/eleventy.config.cjs index 24c8a8069..ac8ceb70e 100644 --- a/docs/eleventy.config.cjs +++ b/docs/eleventy.config.cjs @@ -64,12 +64,7 @@ module.exports = function (eleventyConfig) { // // Add additional extensions. This allows things like {% include "layout.css" %} // - eleventyConfig.setTemplateFormats([ - "html", - "md", - "njk", - "css", - ]) + eleventyConfig.setTemplateFormats(['html', 'md', 'njk', 'css']); // // Functions diff --git a/docs/pages/components/layout.md b/docs/pages/components/layout.md index c295f1809..1252868de 100644 --- a/docs/pages/components/layout.md +++ b/docs/pages/components/layout.md @@ -77,4 +77,4 @@ Toggling navigation can be done in a number of ways. ``` -## Examples \ No newline at end of file +## Examples diff --git a/docs/pages/components/nav-group.md b/docs/pages/components/nav-group.md index 43aa8db57..f5b9f28d7 100644 --- a/docs/pages/components/nav-group.md +++ b/docs/pages/components/nav-group.md @@ -86,4 +86,4 @@ layout: component Disputed Charges -``` \ No newline at end of file +``` diff --git a/docs/pages/components/nav-item.md b/docs/pages/components/nav-item.md index 55861b38a..eb5f3c79e 100644 --- a/docs/pages/components/nav-item.md +++ b/docs/pages/components/nav-item.md @@ -229,4 +229,4 @@ import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item'; ``` -{% endraw %} \ No newline at end of file +{% endraw %} diff --git a/docs/pages/layouts/index.md b/docs/pages/layouts/index.md index c7f3a98fd..7f426a215 100644 --- a/docs/pages/layouts/index.md +++ b/docs/pages/layouts/index.md @@ -15,4 +15,4 @@ window.Turbo.session.drive = false - [Hero Playground](/layouts/hero-playground/index.html) - [Sport Awesome Layout](/layouts/sport-awesome/index.html) -- [Sport Awesome Playground](/layouts/sport-awesome-playground/index.html) \ No newline at end of file +- [Sport Awesome Playground](/layouts/sport-awesome-playground/index.html) diff --git a/src/components/layout/layout.component.ts b/src/components/layout/layout.component.ts index 80db05c71..0e147257c 100644 --- a/src/components/layout/layout.component.ts +++ b/src/components/layout/layout.component.ts @@ -75,7 +75,7 @@ export default class WaLayout extends WebAwesomeElement { /** * Whether or not the navigation drawer is open. Note, the navigation drawer is only "open" on mobile views. */ - @property({ attribute: 'nav-open', reflect: true, type: Boolean }) navOpen = false; + @property({ attribute: 'nav-open', reflect: true, type: Boolean }) navOpen = false; /** * At what "px" to hide the "menu" slot and collapse into a hamburger button @@ -137,21 +137,19 @@ export default class WaLayout extends WebAwesomeElement { @query("[part~='banner']") banner: HTMLElement; @query("[part~='drawer']") navigationDrawer: WaDrawer; - handleNavigationToggle = (e: Event) => { - if (e.composedPath().find((el: Element) => el?.hasAttribute?.("data-toggle-nav"))) { - e.preventDefault() - this.toggleNavigation() + if (e.composedPath().find((el: Element) => el?.hasAttribute?.('data-toggle-nav'))) { + e.preventDefault(); + this.toggleNavigation(); } + }; + + constructor() { + super(); + + this.addEventListener('click', this.handleNavigationToggle); } - constructor () { - super() - - this.addEventListener("click", this.handleNavigationToggle) - } - - connectedCallback() { super.connectedCallback(); @@ -178,21 +176,21 @@ export default class WaLayout extends WebAwesomeElement { * Shows the mobile navigation drawer */ showNavigation() { - this.navOpen = true + this.navOpen = true; } /** * Hides the mobile navigation drawer */ hideNavigation() { - this.navOpen = false + this.navOpen = false; } /** * Toggles the mobile navigation drawer */ toggleNavigation() { - this.navOpen = !this.navOpen + this.navOpen = !this.navOpen; } render() { @@ -264,8 +262,8 @@ export default class WaLayout extends WebAwesomeElement { placement=${this.navigationPlacement} part="drawer" ?open=${live(this.navOpen)} - @wa-after-show=${() => this.navOpen = this.navigationDrawer.open} - @wa-after-hide=${() => this.navOpen = this.navigationDrawer.open} + @wa-after-show=${() => (this.navOpen = this.navigationDrawer.open)} + @wa-after-hide=${() => (this.navOpen = this.navigationDrawer.open)} exportparts=" panel:drawer__panel base:drawer__base diff --git a/src/components/layout/layout.styles.ts b/src/components/layout/layout.styles.ts index 54e529fb9..0f6a63171 100644 --- a/src/components/layout/layout.styles.ts +++ b/src/components/layout/layout.styles.ts @@ -18,34 +18,35 @@ export default css` --sub-header-height: 0px; } - :host([disable-sticky~="banner"]) :is([part~="header"], [part~="sub-header"]) { + :host([disable-sticky~='banner']) :is([part~='header'], [part~='sub-header']) { --banner-height: 0px !important; } - :host([disable-sticky~="header"]) [part~="sub-header"] { + :host([disable-sticky~='header']) [part~='sub-header'] { --header-height: 0px !important; } /* Nothing else depends on sub-header-height. */ - :host([disable-sticky~="sub-header"]) {} + :host([disable-sticky~='sub-header']) { + } - :host([disable-sticky~="aside"]) [part~="aside"], - :host([disable-sticky~="menu"]) [part~="menu"] { + :host([disable-sticky~='aside']) [part~='aside'], + :host([disable-sticky~='menu']) [part~='menu'] { height: unset; max-height: unset; } - :host([disable-sticky~="banner"]) [part~="banner"], - :host([disable-sticky~="header"]) [part~="header"], - :host([disable-sticky~="sub-header"]) [part~="sub-header"], - :host([disable-sticky~="aside"]) [part~="aside"], - :host([disable-sticky~="menu"]) [part~="menu"] { + :host([disable-sticky~='banner']) [part~='banner'], + :host([disable-sticky~='header']) [part~='header'], + :host([disable-sticky~='sub-header']) [part~='sub-header'], + :host([disable-sticky~='aside']) [part~='aside'], + :host([disable-sticky~='menu']) [part~='menu'] { position: static; overflow: unset; } - :host([disable-sticky~="aside"]) [part~="aside"], - :host([disable-sticky~="menu"]) [part~="menu"] { + :host([disable-sticky~='aside']) [part~='aside'], + :host([disable-sticky~='menu']) [part~='menu'] { height: auto; max-height: auto; } diff --git a/src/components/nav-item/nav-item.component.ts b/src/components/nav-item/nav-item.component.ts index f954b233a..ec37dce64 100644 --- a/src/components/nav-item/nav-item.component.ts +++ b/src/components/nav-item/nav-item.component.ts @@ -35,7 +35,7 @@ export default class WaNavItem extends WebAwesomeElement { @property({ reflect: true }) href = ''; /** maps to aria-current="". Generally this value will either be "page", "true", or "false" */ - @property({ reflect: true }) current: "page" | "step" | "location" | "date" | "time" | "true" | "false" = "false" + @property({ reflect: true }) current: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' = 'false'; /** Tells the browser where to open the link. Only used when `href` is present. */ @property({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top'; @@ -46,7 +46,7 @@ export default class WaNavItem extends WebAwesomeElement { * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by * setting the attribute to an empty string or a value of your choice, respectively. */ - @property({ reflect: true }) rel = 'noreferrer noopener'; + @property({ reflect: true }) rel = 'noreferrer noopener'; /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */ @property({ reflect: true }) download?: string; @@ -61,7 +61,6 @@ export default class WaNavItem extends WebAwesomeElement { */ @property({ reflect: true, type: Boolean }) expandable: boolean = false; - @state() hasFocus: boolean = false; private handleBlur() { @@ -77,12 +76,7 @@ export default class WaNavItem extends WebAwesomeElement { render() { const isRtl = this.localize.dir() === 'rtl'; return html` -
+
${when( this.expandable, () => html` diff --git a/src/components/nav-item/nav-item.styles.ts b/src/components/nav-item/nav-item.styles.ts index 3de229d19..98ddb3cb5 100644 --- a/src/components/nav-item/nav-item.styles.ts +++ b/src/components/nav-item/nav-item.styles.ts @@ -22,7 +22,7 @@ export default css` --border-color-hover: color-mix(in oklab, var(--background-color-hover), var(--wa-color-tint-hover)); } - :host(:is([current="page"], [current="true"])) { + :host(:is([current='page'], [current='true'])) { --background-color: var(--wa-color-brand-fill-vivid); --text-color: var(--wa-color-brand-text-on-vivid); --background-color-hover: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover)); @@ -46,15 +46,16 @@ export default css` text-decoration: none; user-select: none; white-space: nowrap; - transition: var(--wa-transition-faster) background-color, var(--wa-transition-faster) color, - var(--wa-transition-faster) border, var(--wa-transition-faster) box-shadow; + transition: + var(--wa-transition-faster) background-color, + var(--wa-transition-faster) color, + var(--wa-transition-faster) border, + var(--wa-transition-faster) box-shadow; cursor: inherit; line-height: var(--wa-font-height-compact); background-color: var(--background-color); color: var(--text-color); - - } .control { @@ -107,7 +108,6 @@ export default css` padding-inline-start: 2em; } - .nav-items { display: flex; flex-direction: column; diff --git a/src/themes/applied.css b/src/themes/applied.css index 0595e4a0d..4f01f5493 100644 --- a/src/themes/applied.css +++ b/src/themes/applied.css @@ -15,7 +15,8 @@ html { box-sizing: inherit; } -html,body { +html, +body { height: auto; min-height: 100%; }