Pacifico Elements
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.