@pacificoseguros/elements NPM

Pacifico Elements

npm.io

UI Kit of Pacifico Seguros' design system, under construction.

Currently, the library status is beta, so, please be careful if you use it.

What is shipped?

This package contains:

Web Components builds.
JSX Pragma build.
CSS Variables.

Documentation

You can see the technical docs (on progress) for our components here.

How to use

To use a Web Component and use as you want. For example, to use with plain HTML.

<head>
  <script type="module" script="node_modules/@pacificoseguros/elements/button"></script>
</head>
<body>
  <ck-button onclick="sayHi">
    Say Hi
  </ck-button>

  <script>
    function sayHi() {
      alert('Hello!')
    }
  </script>
</body>

You can import the components using JavaScript too:

import '@pacificoseguros/elements/button'

// root is a HTML node
root.innerHTML = html`
  <ck-button @click=${() => alert('Hello!')}>
    Say Hi
  </ck-button>
`

Or if you using React...

import React from 'react'
import '@pacificoseguros/elements/react'

export const MyView = function() {
  const onClick = function() {
    alert('Are you sure?')
  }
  return (
    <ck-button
      kind="warning"
      onClick={onClick}
    >
      Soft delete
    </ck-button>
  )
}

Please read the documentation to know how to use.

design-system ui-kit web-components

5 years ago

5 years ago

5 years ago

5 years ago