@substrate-system/arrows
v0.0.36
Published
[](https://github.com/substrate-system/arrows/actions/workflows/nodejs.yml) [
Readme
arrows
Next and previous icons as accessible web components.
Install
npm i -S @substrate-system/arrowsModules
This exposes ESM and common JS via
package.json exports field.
ESM
import { SubstrateBack, SubstrateNext } from '@substrate-system/arrows'Common JS
const arrows = require('@substrate-system/arrows')pre-built
This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
copy
cp ./node_modules/@substrate-system/arrows/dist/index.min.js \
./public/substrate-arrows.min.js
cp ./node_modules/@substrate-system/arrows/dist/style.min.css \
./public/substrate-arrows.cssHTML
<head>
<link rel="stylesheet" href="./substrate-arrows.css">
</head>
<body>
<substrate-back></substrate-back>
<substrate-next></substrate-next>
<!-- ... -->
<script type="module" src="./substrate-arrows.min.js"></script>
</body>CSS
Import CSS
import '@substrate-system/arrows/css'Or minified:
import '@substrate-system/arrows/css/min'Use
server side
This is implemented as an HTML web component, which means it can be easily rendered to a string, then made interactive on the client side.
Import the /html path in node, and use the .html or .outerHTML function
for HTML content:
import {
AnchorBack,
AnchorNext,
SubstrateBack,
SubstrateNext
} from '@substrate-system/arrows/html'
// Basic usage
const backLink = AnchorBack.html({ href: '/abc' })
const nextButton = SubstrateNext.html({ disabled: true })
// multiple attributes
const styledButton = SubstrateBack.html({
disabled: false,
class: 'primary-btn',
'data-testid': 'back-button',
id: 'main-back'
})
const externalLink = AnchorNext.html({
href: 'https://example.com',
target: '_blank',
rel: 'noopener noreferrer',
class: 'external-link'
})Each component also provides:
.TAGproperty with the custom element tag name.outerHTML()function to render the complete custom element with wrapper tags
// Get the tag name
console.log(SubstrateBack.TAG) // 'substrate-back'
// Render complete element with wrapper (basic)
const completeButton = SubstrateBack.outerHTML({ disabled: true })
// Returns: <substrate-back disabled>
// <button disabled>...</button>
// </substrate-back>
const completeLink = AnchorNext.outerHTML({ href: '/next' })
// Returns: <anchor-next href="/next">
// <a href="/next">...</a>
// </anchor-next>
// Attributes are applied to both the custom element wrapper AND inner element
const styledButton = SubstrateBack.outerHTML({
class: 'styled-btn',
disabled: true,
'data-testid': 'back-button'
})
// Returns: <substrate-back class="styled-btn" disabled data-testid="back-button">
// <button class="styled-btn" disabled data-testid="back-button">...</button>
// </substrate-back>client side
If the component has been rendered on the server, then you just need to add interactivity on the client side.
Import from the /client path to include a "light" version of the component,
that will not render anything; it will just attach event listeners.
import { SubstrateBack, SubstrateNext } from '@substrate-system/arrows/client'Full client side
For when you want to render on the client, and also "hydrate" client-side.
Import the root path to include a web component that will both render itself, and also attach event listeners. This cannot be used in node, because it depends on browser APIs.
import { SubstrateBack, SubstrateNext } from '@substrate-system/arrows'
import { AnchorBack, AnchorNext } from '@substrate-system/arrows/links'CSS
This depends on the visually-hidden CSS class. Import
@substrate-system/a11y for this:
import '@substrate-system/a11y/visually-hidden'Disabled status is handled correctly in JS, but the :disabled attribute in CSS
doesn't work on custom elements. So target the nested button element.
/* application code */
substrate-next, substrate-back {
& button {
cursor: pointer;
&:disabled {
opacity: 0.4;
cursor: initial;
}
}
}
/* anchors */
anchor-next, anchor-back {
&.disabled {
& a {
opacity: 0.4;
}
}
}Buttons
import { SubstrateBack, SubstrateNext } from '@substrate-system/arrows'
SubstrateBack.define()
SubstrateNext.define()
document.body.innerHTML += `
<substrate-back></substrate-back>
<substrate-next></substrate-next>
`Links
Render an a element, not a button.
Setting .disabled = true, or setting the disabled attribute, on an anchor
button will remove the href attribute from the internal link tag, effectively
disabling it.
import {
AnchorBack,
AnchorNext
} from '@substrate-system/arrows/links'
AnchorBack.define()
AnchorNext.define()
document.body.innerHTML += `
<anchor-back class="test" href="/back"></anchor-back>
<anchor-next class="test" href="/next"></anchor-next>
`