opc-timeline Component 👋

A web component based on Lit Element to show a timeline for a specific range

Usage

Install opc-timeline

npm install --save @one-platform/opc-timeline 

For VanillaJS

• Import component

import '@one-platform/opc-timeline';

• Add component in html

<opc-timeline id="timeline" current-step-index="2" variant="compact">
    <div slot="timeline-details">
        <h2>Timeline Details</h2>
        The timeline component details go right here, it uses a slot named <strong>timeline-details</strong>. Happy coding :)
    </div>
</opc-timeline>

• Using the steps attribute we can add an Array of strings which would be the steps for the timeline component

document.querySelector('#timeline').steps = [ 'Scheduled', 'Loaned', 'Extended', 'Completed'];

For Angular

• In your app.module include the CUSTOM_ELEMENTS_SCHEMA and import the component

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@one-platform/opc-timeline';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Add component in any component html template
  • Note: To add using the html attribute, follow the below example

<opc-timeline id="timeline" current-step-index="2" variant="compact">
    <div slot="timeline-details">
        <h2>Timeline Details</h2>
        The timeline component details go right here, it uses a slot named <strong>timeline-details</strong>. Happy coding :)
    </div>
</opc-timeline>

• To use component using angular attributes use the internal property names

    <opc-timeline 
      id="timeline" 
      [steps]="['Scheduled', 'Loaned', 'Completed']" 
      [currentStepIndex]="number"
      [variant]="variant">
    </opc-timeline>

For React

• Import the component in App.js

import '@one-platform/opc-timeline';

• Add component in any component html render

<opc-timeline id="timeline" current-step-index="2" variant="compact">
    <div slot="timeline-details">
        <h2>Timeline Details</h2>
        The timeline component details go right here, it uses a slot named <strong>timeline-details</strong>. Happy coding :)
    </div>
</opc-timeline>

Slots

• There are three optional slots in the opc-timeline as shown below namely
  • timeline-details: To set the details for the timeline
    • Example

    <opc-timeline>
      <div slot="timeline-details" style="color: white;">
        <h2>Timeline Details</h2>
        The timeline component details go right here, it uses a slot named <strong>timeline-details</strong>. Happy coding :)
      </div>
    </opc-timeline>

  • The timeline label slots
    • start-label: The start label on the left side of the timeline
    • end-label: The end label on the right side of the timeline
      • Example code

    <opc-timeline>
      <span slot="start-label" style="font-weight: 600; color: white;">Loaned on: Apr 28, 2018</span>
      <span slot="end-label" style="font-weight: 600; color: white;">Expires on: Oct 27, 2018</span>
    </opc-timeline>

Attributes

steps

• Input: Array of strings
  • Example

  document.querySelector('#timeline').steps = [ 'Scheduled', 'Loaned', 'Extended', 'Completed'];

• The array would be used as steps.
• Adding a falsy value would produce an empty step without string
  • Example of falsy values

  document.querySelector('#timeline3').steps = [null, undefined, 0];

  • PS: Adding empty string (e.g. - '') would also create a empty step

current-step-index

• Input: Number
• Sets the active state to the given number

variant

• default
  • By default the variant attribute would be set to the string "default" which would have all the steps without the side arrows
• compact
  • The compact view has side arrows which scroll after clicking on them in their respective direction

Themes

• Only default themes

Color pallet

| color | hex (default-fallback) | |---------|------------------------------------------------------------------| | --opc-timeline--BackgroundColor | #DEDEDE | | --opc-timeline--Color--step | #689B7A | | --opc-timeline--TextColor | #6C6C6C | | --opc-timeline--Color--active | #0aa521 | | --opc-timeline--Color--after-active | #b6e4bc |

• Style variables to add spacing

| Spacing | Default | |---|---| | --opc-timeline--Left--spacing | 0rem | | --opc-timeline--Right--spacing | 0rem | | --opc-timeline--MarginTop--timeline-label | 1rem |

Development server

Run development server

npm run dev opc-timeline

Build

npm run build opc-timeline

Run tests

npm run test

🤝 Contributors

👤 hybridx