Socket
Socket
Sign inDemoInstall

fractal-tenon

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fractal-tenon

Fractal component library tool (http://fractal.build) plugin for accessibility testing against Tenon (http://tenon.io)


Version published
Weekly downloads
3
increased by200%
Maintainers
1
Weekly downloads
 
Created
Source

fractal-tenon NPM version NPM downloads Dependency Status Development Dependency Status

is a Fractal add-on that let's you test your components against Tenon for accessibility issues.

Installation

To add Tenon support to your Fractal instance, run

npm install fractal-tenon --save

Configuration

To add the Tenon tab to your component view and enable accessibility testing, you need to add some lines to your fractal.js project configuration:

'use strict';

const fractal = module.exports = require('@frctl/fractal').create();

/* Regular project configuration here ... */

// Require the Fractal theme and Tenon add-on libraries
const mandelbrot = require('@frctl/mandelbrot');
const tenon = require('fractal-tenon');

// Explicitly create a theme instance
const theme = mandelbrot(/* {...} */);

// Configure Tenon support
tenon(theme, {
    apiKey: 'TENON_API_KEY',
    publicUrl: 'http://fractal.example.com'
});

// Let Fractal use the configured theme
fractal.web.theme(theme);

You need to provide two parameters to configure Tenon support:

  1. Tenon API Key: You will find this one under the "API Key" section on your tenon.io dashboard (account required).
  2. Public URL: Your Fractal instance needs to be publicly available for Tenon to fetch and test your components. Provide the fully qualified URL (including scheme and port if necessary).

If configured correctly, Fractal should show you a new panel labelled "Tenon" in your component view.

Tenon panel in Fractal

You may control its position by explicitly configuring the panels option of your Fractal theme (e.g. Mandelbrot):

const theme = mandelbrot({
    panels: ['html', 'view', 'tenon', 'info']
});

Hitting the "Test with Tenon" button will call Tenon and display a short version the issues found for your component. You may view the full test results on tenon.io;

Known problems

  • The client JavaScript involved requires you to use a fairly recent browser version
  • The module is in a very early stage and might have bugs. Please let me know if you spot one!

To-do

  • Add tests

Changelog

Please refer to the changelog for a complete release history.

Copyright © 2017 Joschi Kuphal joschi@kuphal.net / @jkphl. fractal-tenon is licensed under the terms of the MIT license.

Keywords

FAQs

Package last updated on 10 Jun 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc