accordant-components

Setup

git clone git@bitbucket.org:accordant/components.git
cd components
npm i

Run a development site

npm start

Then navigate to http://localhost:8081

Testing and Use-cases

There is a feature for some simple usecase to be generated on your behalf.

Heres the basics.

Import the loader

Inside ./your-component/index.html, find/create your module script tag and import your component (and other dependant ones) and include this.
Then invoke the loader, and parse in the location.pathname to the method as an argument.

The location.pathname assumes that you are visiting your index.html page relatively.
ie: http://localhost:8081/your-component/
An absolute path here would not work.

import loader from '/scripts/example-loader.js';
loader(location.pathname);

A basic example would look like this.

<script type="module">
    import '.'; // your module
    import '../other-comp';
    import loader from '/scripts/example-loader.js';
    loader(location.pathname);
</script>

You can also hardcode your path, but remember to update if you change the component name.

<script type="module">
    import '.'; // your module
    import '../other-comp';
    import loader from '/scripts/example-loader.js';
    loader('/your-component/');
</script>

Create examples

Create a file inside your component folder and create a new file, and name it examples.js

This format should be just an array.

export default [] // <ExampleDescription[]>

ExampleDescription

Each item should be an object that represents an example.

{
    tag: <String|TemplateLiteral>,
    innerHTML: <String|TemplateLiteral>,
    attributes: <AttributeDescription[]>,
    events: <EventDescription[]>,
    [any]: <any>
}

tag: a string or template literal. It is required.
It represents the tag name to be generated.

innerHTML: a string or template literal. It is optional.
Use this to descibe child content, in the light dom

attributes: an array of attribute descriptions. It is optional.
Each attribute descriotion will add an attribute with the specified value to the example component.

events: an array of event descriptions. It is optional.
Each event descriotion will bind an event handler to the example component, based on the specified event name.

AttributeDescription

{
    name: <String>,
    value: <any>
}

name: a string. It is required.
The name of the attribute.

value: any value type. It is required
The value to apply to the component.

EventDescription

{
    name: <String>,
    handler: <Function>
}

name: an event name. It is required.
The event name that should be bound to.

handler: a function. It is required.
How to react to the event, when it is triggered.

Using color in components

The component library is currently observing the below css variable structure.

ACCORDANT COLOR PALLETTE

    --impact-low-color: rgb(84, 201, 248);
    --impact-high-color: rgb(0, 0, 54);
    --clear-audience-color: #fff;

    --primary-brand-color: #0279C8;
    --secondary-brand-color:   #7FC4FD;
    --active-color: #2999FB;
    --tertiary-brand-color: #00335B;
    --background-color: #f1f9ff;

    --button-secondary: #db3907;
    --button-secondary-active: #af2d06;

    --main-text-color: var(--primary-brand-color);
    --secondary-text-color: var(--tertiary-brand-color);
    --light-text-color: #f8f8f8;
    --hero-text-color: #f8f8f8;

Use these dynamic variables wherever possible.

The base accordant styling is present in the example project for local testing.

Use the accordant hex codes as the default backup values if there are no variables provided in an instance of audience catlog / digital magazine.

You can also test using the Ubank color pallette provided below to ensure that your colors are dynamic.

N.B. for the audience catalog impact colors, they MUST BE RGB - this is so the table can calculate & interpolate color values based on the modelled data set.

UBANK COLOR PALLETTE

    --impact-low-color: rgb(139,193,69);
    --impact-high-color: rgb(0,130,40);
    --clear-audience-color: #fff;

    --primary-brand-color: #008228;
    --secondary-brand-color: #8BC145;
    --active-color: #2D2D2D;
    --tertiary-brand-color: #EEECEB;
    --background-color: #EEECEB;

    --button-secondary: #2D2D2D;
    --button-secondary-active: #4C4C4C;

    --main-text-color: var(--primary-brand-color);
    --secondary-text-color: var(--active-color);
    --light-text-color: #f8f8f8;
    --hero-text-color: #f8f8f8;