diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index c4106988d0..08407ba18a 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -10,7 +10,7 @@ }, { "path": "./dist/css/boosted-reboot.css", - "maxSize": "4.5 kB" + "maxSize": "4.25 kB" }, { "path": "./dist/css/boosted-reboot.min.css", @@ -34,7 +34,7 @@ }, { "path": "./dist/js/boosted.bundle.js", - "maxSize": "48.5 kB" + "maxSize": "48.25 kB" }, { "path": "./dist/js/boosted.bundle.min.js", diff --git a/build/.pa11yci.json b/build/.pa11yci.json index fec193bd6e..bcee3dfe2b 100644 --- a/build/.pa11yci.json +++ b/build/.pa11yci.json @@ -15,7 +15,7 @@ "axe" ], "useIncognitoBrowserContext": false, - "hideElements": "iframe, #text-decoration + p + div a.text-decoration-none, .accordion-collapse, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar", + "hideElements": "iframe, #text-decoration + p + div a.text-decoration-none, .accordion-collapse, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive", "ignore": [ "color-contrast" ] diff --git a/build/zip-examples.js b/build/zip-examples.js index 08d1a747c1..56db59fa04 100644 --- a/build/zip-examples.js +++ b/build/zip-examples.js @@ -33,6 +33,9 @@ const jsFiles = [ const imgFiles = [ 'orange-logo.svg' ] +const staticJsFiles = [ + 'color-modes.js' +] sh.config.fatal = true @@ -50,7 +53,8 @@ sh.mkdir('-p', [ distFolder, `${distFolder}/assets/brand/`, `${distFolder}/assets/dist/css/`, - `${distFolder}/assets/dist/js/` + `${distFolder}/assets/dist/js/`, + `${distFolder}/assets/js/` ]) sh.cp('-Rf', `${docsDir}/examples/*`, distFolder) @@ -67,6 +71,10 @@ for (const file of imgFiles) { sh.cp('-f', `${docsDir}/assets/brand/${file}`, `${distFolder}/assets/brand/`) } +for (const file of staticJsFiles) { + sh.cp('-f', `${docsDir}/assets/js/${file}`, `${distFolder}/assets/js/`) +} + sh.rm(`${distFolder}/index.html`) // get all examples' HTML files diff --git a/hugo.yml b/hugo.yml index ec5326013c..ea1352260d 100644 --- a/hugo.yml +++ b/hugo.yml @@ -8,6 +8,8 @@ security: getenv: - ^HUGO_ - NETLIFY + gotemplates: + allowActionJSTmpl: true markup: goldmark: diff --git a/js/src/tab.js b/js/src/tab.js index d9993d56e8..5598e15c02 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -30,6 +30,8 @@ const ARROW_LEFT_KEY = 'ArrowLeft' const ARROW_RIGHT_KEY = 'ArrowRight' const ARROW_UP_KEY = 'ArrowUp' const ARROW_DOWN_KEY = 'ArrowDown' +const HOME_KEY = 'Home' +const END_KEY = 'End' const CLASS_NAME_ACTIVE = 'active' const CLASS_NAME_FADE = 'fade' @@ -151,14 +153,22 @@ class Tab extends BaseComponent { } _keydown(event) { - if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key))) { + if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, HOME_KEY, END_KEY].includes(event.key))) { return } event.stopPropagation()// stopPropagation/preventDefault both added to support up/down keys without scrolling the page event.preventDefault() - const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key) - const nextActiveElement = getNextActiveElement(this._getChildren().filter(element => !isDisabled(element)), event.target, isNext, true) + + const children = this._getChildren().filter(element => !isDisabled(element)) + let nextActiveElement + + if ([HOME_KEY, END_KEY].includes(event.key)) { + nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1] + } else { + const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key) + nextActiveElement = getNextActiveElement(children, event.target, isNext, true) + } if (nextActiveElement) { nextActiveElement.focus({ preventScroll: true }) diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 84690fc51f..007adddc60 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -630,6 +630,58 @@ describe('Tab', () => { expect(spyPrevent).toHaveBeenCalledTimes(2) }) + it('if keydown event is Home, handle it', () => { + fixtureEl.innerHTML = [ + '' + ].join('') + + const tabEl1 = fixtureEl.querySelector('#tab1') + const tabEl3 = fixtureEl.querySelector('#tab3') + + const tab3 = new Tab(tabEl3) + tab3.show() + + const spyShown = jasmine.createSpy() + tabEl1.addEventListener('shown.bs.tab', spyShown) + + const keydown = createEvent('keydown') + keydown.key = 'Home' + + tabEl3.dispatchEvent(keydown) + + expect(spyShown).toHaveBeenCalled() + }) + + it('if keydown event is End, handle it', () => { + fixtureEl.innerHTML = [ + '' + ].join('') + + const tabEl1 = fixtureEl.querySelector('#tab1') + const tabEl3 = fixtureEl.querySelector('#tab3') + + const tab1 = new Tab(tabEl1) + tab1.show() + + const spyShown = jasmine.createSpy() + tabEl3.addEventListener('shown.bs.tab', spyShown) + + const keydown = createEvent('keydown') + keydown.key = 'End' + + tabEl1.dispatchEvent(keydown) + + expect(spyShown).toHaveBeenCalled() + }) + it('if keydown event is right arrow and next element is disabled', () => { fixtureEl.innerHTML = [ ' {{< /example >}} @@ -228,9 +226,7 @@ These 2 vertical variants should not be used because they do not respect the Ora
  • Dropdown link
  • - - -
    +
    -
    +
    -
    +
    {{< /example >}} -Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked. +Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they're no longer stacked. {{< example >}}
    @@ -367,8 +367,8 @@ const bsButton = new boosted.Button('#myButton') | Method | Description | | --- | --- | | `dispose` | Destroys an element's button. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the button instance associated to a DOM element, you can use it like this: `boosted.Button.getInstance(element)`. | -| `getOrCreateInstance` | Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `boosted.Button.getOrCreateInstance(element)`. | +| `getInstance` | Static method which allows you to get the button instance associated with a DOM element, you can use it like this: `boosted.Button.getInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a button instance associated with a DOM element or creates a new one in case it wasn't initialized. You can use it like this: `boosted.Button.getOrCreateInstance(element)`. | | `toggle` | Toggles push state. Gives the button the appearance that it has been activated. | {{< /bs-table >}} diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index b2c4473ce5..e9dee949ad 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -311,7 +311,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components Link
    @@ -334,7 +334,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components Link
    diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index a7282724cd..3f1a590940 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -539,7 +539,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. {{< example >}} {{< /example >}} diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 219a489472..3d52cc5005 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -64,7 +64,7 @@ Be sure to **not use the standard `.btn` classes here**. A second link item A third link item A fourth link item - A disabled link item + A disabled link item
    {{< /example >}} @@ -346,7 +346,7 @@ Dark variant also work with `.list-group-item-action`.
    A simple default link list group item A simple active link list group item - A simple disabled link list group item + A simple disabled link list group item
    {{< /example >}} diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md index b89fc3b647..70638127f5 100644 --- a/site/content/docs/5.3/components/navbar.md +++ b/site/content/docs/5.3/components/navbar.md @@ -75,7 +75,7 @@ Here's an example of all the sub-components included in a responsive dark-themed
    @@ -182,7 +182,7 @@ And because we use classes for our navs, you can avoid the list-based approach e Home Features Pricing - Disabled + Disabled diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md index 1f72711dac..14913608fd 100644 --- a/site/content/docs/5.3/components/navs-tabs.md +++ b/site/content/docs/5.3/components/navs-tabs.md @@ -36,7 +36,7 @@ To convey the active state to assistive technologies, use the `aria-current` att Link {{< /example >}} @@ -48,7 +48,7 @@ Classes are used throughout, so your markup can be super flexible. Use ` {{< /example >}} @@ -93,7 +93,7 @@ Right-aligned with `.justify-content-end`: Link {{< /example >}} @@ -114,7 +114,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column Link {{< /example >}} @@ -126,7 +126,7 @@ As always, vertical navigation is possible without ` {{< /example >}} @@ -171,7 +171,7 @@ This variant should not be used because it is a button component in the Orange D Link {{< /example >}} @@ -192,7 +192,7 @@ Take that same HTML, but use `.nav-underline` instead: Link {{< /example >}} @@ -216,7 +216,7 @@ Nav tabs light is nested in a tab for adding a level of depth in information org Tab 3 @@ -233,7 +233,7 @@ Nav tabs light is nested in a tab for adding a level of depth in information org Link C
    @@ -266,7 +266,7 @@ Force your `.nav`'s contents to extend the full available width with one of two Link {{< /example >}} @@ -278,7 +278,7 @@ When using a ` {{< /example >}} @@ -296,7 +296,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ Link {{< /example >}} @@ -308,7 +308,7 @@ Similar to the `.nav-fill` example using a ` {{< /example >}} @@ -321,7 +321,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili Active Longer nav link Link - Disabled + Disabled {{< /example >}} @@ -356,7 +356,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin Link {{< /example >}} @@ -386,7 +386,7 @@ This variant should not be used because it is a button component in the Orange D Link {{< /example >}} @@ -637,7 +637,7 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `
    @@ -69,7 +69,7 @@ In the example below, we take a typical card component and recreate it with plac

    - + ``` @@ -85,7 +85,7 @@ We apply additional styling to `.btn`s via `::before` to ensure the `height` is

    - + {{< /example >}} {{< callout info >}} diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md index dd3ef86512..2e0d88ab91 100644 --- a/site/content/docs/5.3/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -203,7 +203,7 @@ The required markup for a tooltip is only a `data` attribute and `title` on the Hover over me - @@ -65,21 +65,21 @@
    diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html index 094df402fc..95b3a8f7b5 100644 --- a/site/layouts/partials/scripts.html +++ b/site/layouts/partials/scripts.html @@ -4,8 +4,9 @@ {{- end }} -{{ if eq .Page.Layout "docs" -}} + +{{ if eq .Page.Layout "docs" -}} {{- end }} diff --git a/site/layouts/partials/stylesheet.html b/site/layouts/partials/stylesheet.html index 28065896b7..eb325e17df 100644 --- a/site/layouts/partials/stylesheet.html +++ b/site/layouts/partials/stylesheet.html @@ -1,6 +1,4 @@ -{{ if eq .Page.Layout "docs" -}} -{{- end }} {{ if eq hugo.Environment "production" -}} {{ if eq .Page.Params.direction "rtl" -}} diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html index ede529d0d6..3d13e2767c 100644 --- a/site/layouts/shortcodes/js-docs.html +++ b/site/layouts/shortcodes/js-docs.html @@ -13,8 +13,9 @@ {{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}} {{- else -}} {{- $capture_start := printf "// js-docs-start %s\n" $name -}} - {{- $capture_end := printf "// js-docs-end %s" $name -}} + {{- $capture_end := printf "// js-docs-end %s\n" $name -}} {{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}} + {{- $regex_nested := printf `// js-docs-.*\n` -}} {{- $match := findRE $regex (readFile $file) -}} {{- $match = index $match 0 -}} @@ -26,6 +27,11 @@ {{- $match = replace $match $capture_start "" -}} {{- $match = replace $match $capture_end "" -}} + {{- $match_nested := findRE $regex_nested $match -}} + {{- range $to_remove := $match_nested -}} + {{- $match = replace $match $to_remove "" -}} + {{- end -}} +
    diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html index 995d84f363..28b6b99e3e 100644 --- a/site/layouts/shortcodes/scss-docs.html +++ b/site/layouts/shortcodes/scss-docs.html @@ -17,8 +17,9 @@ {{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}} {{- else -}} {{- $capture_start := printf "// scss-docs-start %s\n" $name -}} - {{- $capture_end := printf "// scss-docs-end %s" $name -}} + {{- $capture_end := printf "// scss-docs-end %s\n" $name -}} {{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}} + {{- $regex_nested := printf `// scss-docs-.*\n` -}} {{- /* TODO: figure out why we can't do the following and get the first group (the only capturing one)... @@ -35,6 +36,11 @@ {{- $match = replace $match $capture_start "" -}} {{- $match = replace $match $capture_end "" -}} + {{- $match_nested := findRE $regex_nested $match -}} + {{- range $to_remove := $match_nested -}} + {{- $match = replace $match $to_remove "" -}} + {{- end -}} + {{- if (ne $strip_default "false") -}} {{- $match = replace $match " !default" "" -}} {{- end -}}