Welcome to external web-components

This library is a UI set of web-components.

• Welcome to external web-components
  • Description
  • Installation
  • Use as cdn
  • Development 🧑‍💻
    • Initialize web-components
• Components
  • Price Component
  • Article in search
  • Arrow button

Description

This library is a UI set of web-components using lit ans scss/sass and typescript.

Installation

Start installation process:

npm install scs-web-components

or

yarn add scs-web-components

or

pnpm add scs-web-components

Use as cdn

This library can be used as cdn and accessed by global variable. CDN url as follows:

https://unpkg.com/scs-web-components@latest/lib/main.js

<script src="https://unpkg.com/scs-web-components@latest/lib/main.js" />

Development 🧑‍💻

To start using scs-web-components you have first import them and initialize.

Initialize web-components

import { init } from 'scs-web-components'

init()

or

import scsWebComponents from 'scs-web-components'

scsWebComponents.init()

or with old modules

const scsWebComponents = require('scs-web-components')

scsWebComponents.init()

eventually if used as cdn library, you can access a global variable scsWebComponents and initialize like so:

scsWebComponents.init()

Components

Full list of components with all required attributes

Price Component

example:

  <price-component price="300" badge="Now Only" save="299" was="799" sale="600"><price-component>

attributes list:

  // required
  price: number = 0
  badge: string = 'only'
  // optional
  save: number = 0
  app: number = 0
  was: number = 0
  sale: number = 0

Article in search

example:

  <article-in-search
    title="What colour goes with grey carpet?"
    url="https://www.scs.co.uk/inspiration-hub/flooring/what-colour-goes-with-grey-carpet.html?icmp-colour"
  ><article-in-search>

attributes list:

  // required
  title: string = ''
  url: string = ''
  // optional
  imageUrl: string = '' // if not provided, component will fetch it from the article

Arrow button

example:

  <arrow-button
    url="https://www.scs.co.uk/inspiration-hub/flooring/what-colour-goes-with-grey-carpet.html?icmp-colour"
    text="next page"
  ><article-in-search>

attributes list:

  // required
  url: string = '' // link to direct after click
  // optional
  text: string = '' // text under arrow
  direction: 'left' | 'right' | 'top' | 'bottom' = 'right' // default "right"
  width: number // with to take (not arrow width)
  hidetextat: number // breakpoint, number of pixels to hide text when under