A modular frontend toolkit designed to help with Brave project development, including accessibility enhancements, utility functions, and easy-to-use classes.
npm install @yardinternet/brave-frontend-kitAdds a specific class to the body when the user is navigating via keyboard (Tab key). It ensures that we can style keyboard users differently from mouse users.
import { FocusStyle } from '@yardinternet/brave-frontend-kit';
// Default: initialize the FocusStyle class
const focusStyle = new FocusStyle();
// Extended usage: all options
const customFocusStyle = new FocusStyle( {
bodyClass: 'custom-class',
} );Manages multiple dialog instances on a page, allowing for easy opening, closing, and toggling of dialogs by their IDs.
import { DialogManager } from '@yardinternet/brave-frontend-kit';
// Basic usage
new DialogManager();
// Extended usage: all options
const dialogs = new DialogManager( {
selector: '.js-brave-dialog',
} );
// To open, close or toggle a dialog with a specific ID
dialogs.open( 'js-brave-mobile-menu' );
dialogs.close( 'js-brave-mobile-menu' );
dialogs.toggle( 'js-brave-mobile-menu' );
// To close all open dialogs
dialogs.closeAll();Controls one tooltip instance bound to one trigger element.
import { BraveTooltip } from '@yardinternet/brave-frontend-kit';
const trigger = document.querySelector( '.js-brave-tooltip-trigger' );
if ( trigger ) {
// Basic usage
new BraveTooltip( trigger );
// Extended usage: all options
new BraveTooltip( trigger, {
selectorArrow: '.js-brave-tooltip-arrow',
hideDelay: 150,
placement: 'top',
hiddenClass: 'hidden',
} );
}Manages multiple tooltip instances on a page and exposes methods to open, close, toggle and close all tooltips by tooltip id.
import { BraveTooltipManager } from '@yardinternet/brave-frontend-kit';
// Basic usage
new BraveTooltipManager();
// Extended usage: all options
const tooltips = new BraveTooltipManager( {
selectorTrigger: '.js-brave-tooltip-trigger',
selectorArrow: '.js-brave-tooltip-arrow',
hideDelay: 150,
placement: 'top',
hiddenClass: 'hidden',
} );
tooltips.open( 'tooltip-id' );
tooltips.close( 'tooltip-id' );
tooltips.toggle( 'tooltip-id' );
tooltips.closeAll();<button class='js-brave-tooltip-trigger' aria-describedby='tooltip-id'>
Tooltip trigger
</button>
<div id='tooltip-id' class='hidden' aria-hidden='true'>
<div class='js-brave-tooltip-arrow'></div>
Tooltip content
</div>
Adds an icon to external links by checking if the hostname differs from the current site.
import { EnhanceExternalLinks } from '@yardinternet/brave-frontend-kit';
// Basic usage
new EnhanceExternalLinks( {
selector: '.main a',
icon: '<i class="js-enhance-external-link-icon fa-light fa-arrow-up-right-from-square"></i>',
} );
// Extended usage: all options
new EnhanceExternalLinks( {
selector: '.main a',
icon: '<i class="fa-regular fa-up-right-from-square mx-2"></i>',
excludedClasses: [ 'wp-block-button__link' ],
excludedUrlKeywords: [ 'openpdc' ],
insertIconBeforeText: true,
} );Enhances .pdf links with a visual icon and optional file size fetched via a HEAD request.
import { EnhancePDFLinks } from '@yardinternet/brave-frontend-kit';
// Basic usage
new EnhancePDFLinks( {
selector: '.main a',
icon: '<i class="js-enhance-pdf-link-icon fa-light fa-file-pdf mx-2"></i>',
fileSizeClass: 'js-enhance-pdf-link-file-size text-xs',
} );
// Extended usage: all options
new EnhancePDFLinks( {
selector: '.main a',
icon: '<i class="fa-regular fa-file-pdf mx-2"></i>',
excludedClasses: [ 'wp-block-button__link' ],
excludedUrlKeywords: [ 'openpdc' ],
insertIconBeforeText: true,
showFileSize: false,
fileSizeClass: 'js-enhance-pdf-link-file-size text-xs',
insertIconBeforeText: true,
createFileSizeElement: ( bytes ) => {
const span = document.createElement( 'span' );
span.classList.add( 'text-xs' );
span.innerHTML = ` (pdf, ${ Math.round( bytes / 1024 ) } KB)`;
return span;
},
} );Initializes the Web Share API on a specific element and provides a function to handle the share action.
import { WebShareApi } from '@yardinternet/brave-frontend-kit';
// Basic usage
new WebShareApi();
// Extended usage: all options
new WebShareApi( {
selector: '.js-web-share-api',
} );Enhances FacetWP search pages. Adds scroll to top, aria labels, focus change on pager, hides label on filter and reset filters if no filters selected.
import { A11yFacetWP } from '@yardinternet/brave-frontend-kit';
// Basic usage
new A11yFacetWP();
// Extended usage: all options
new A11yFacetWP( {
selectorPrefix: 'js',
scrollToTopOffset: 150,
} );Enhances mobile menu. Adds expand, open & close buttons, aria labels, animations and focus trap.
import { A11yMobileMenu } from '@yardinternet/brave-frontend-kit';
// Basic usage
new A11yMobileMenu();
// Extended usage: all options
new A11yMobileMenu({
selectorPrefix: 'js',
onActivateFocusTrapAnimate: {
keyframes: [
{
transform: 'translateX(100%)',
opacity: '0',
visibility: 'hidden',
},
{
transform: 'translateX(0)',
opacity: '1',
visibility: 'visible',
},
],
options: {
duration: 500,
easing: 'cubic-bezier(0.22,1,0.36,1)',
fill: 'both',
}
},
[...]
});TBA
- Run
npm linkinside this project. - Run
npm link @yardinternet/brave-frontend-kitinside the project or theme. This will create a symbolic link to the project folder. - Run
npm run startinside this project AND the equivalent script inside the project or theme.
- Change the version of
package.jsonto the desired version and commit this change. - Go to releases of the package and click on "Draft a new release"
- Click "Choose a tag", type the corresponding version and press Enter. Add a title and description for the release.
- Click "Publish release"
The Github Workflow release-package.yml will run whenever a release is created in this repository. If the tests pass, then the package will be published to Github packages.
