@lukso/web-components 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.4.0](https://github.com/lukso-network/tools-web-components/compare/v1.3.1...v1.4.0) (2023-02-14)
+
+
+### Features
+
+* icon component ([#38](https://github.com/lukso-network/tools-web-components/issues/38)) ([61cb73e](https://github.com/lukso-network/tools-web-components/commit/61cb73e93f196764b36a1e9baa642f2275ada6f7))
+* input component ([#42](https://github.com/lukso-network/tools-web-components/issues/42)) ([7515b79](https://github.com/lukso-network/tools-web-components/commit/7515b79922e4143f0de3dd25f36dbc543d802234))
+* long press button ([#41](https://github.com/lukso-network/tools-web-components/issues/41)) ([f9aae98](https://github.com/lukso-network/tools-web-components/commit/f9aae98b641cb074c0b4c1827d7b69b6bc9d1d64))
+
+
+### Bug Fixes
+
+* ts errors ([#39](https://github.com/lukso-network/tools-web-components/issues/39)) ([78b9532](https://github.com/lukso-network/tools-web-components/commit/78b95322634767730ec3d69c2fe5301b384fbd0d))
+
 ## [1.3.1](https://github.com/lukso-network/tools-web-components/compare/v1.3.0...v1.3.1) (2023-02-07)
 
 

package/README.md

@@ -22,23 +22,40 @@ Library is focused around projects build on top of [Tailwind CSS](https://tailwi
 
 #### Components
 
-For using components you need to first import them
+For using components you need to first import them either as individual ones:
 
 ```js
-import('@lukso/web-components/lukso-button')
+import('@lukso/web-components/components/lukso-button')
+import('@lukso/web-components/components/lukso-card')
+import('@lukso/web-components/components/lukso-tag')
 ```
 
-and use in the HTML
+or all of them in single import:
+
+```js
+import('@lukso/web-components/components')
+```
+
+> Hint: you can make import in root level of your project (`app.vue`) instead of importing in every component.
+
+Use components in the HTML with following rules:
+
+- components are lowercase and with `-` in name i.e `lukso-button`
+- they need to have closing tag even if they don't use slot
+- properties are lowercase and with `-` in name i.e `primary-color="neutral-100"`
+- boolean properties are working with just a presence `is-checked`
+
+See example below:
 
 ```html
-<lukso-button variant="primary">Click me!</lukso-button>
+<lukso-example-component primary-color="neutral-100" is-checked></lukso-button>
 ```
 
-Under the hood you use Web Components which styles are encapsulated within own shadow DOM (host page doesn't have access to it styles and vice versa). The only thing that components share from are fonts, colors and variables, see more on [CSS inheritance](https://lit.dev/docs/components/styles/#inheritance).
+> Under the hood you use Web Components which styles are encapsulated within own shadow DOM (host page doesn't have access to it styles and vice versa). The only thing that components share from are fonts, colors and variables, see more on [CSS inheritance](https://lit.dev/docs/components/styles/#inheritance).
 
 ### Styles (Tailwind CSS projects)
 
-Please add this preset in the config file
+1. Add this preset in the config file
 
 ```js
 // tailwind.config.js
@@ -48,7 +65,7 @@ module.exports = {
 }
 ```
 
-and include styles in your main file
+2. Include styles in your main file
 
 ```scss
 // main.scss
@@ -57,6 +74,15 @@ $font-file-path: '/assets/fonts';
 @import '@lukso/web-components/sass/main.scss';
 ```
 
+3. In your main js file load the CSS variables
+
+```javascript
+// app.vue
+import { generateCssVariables } from '@/shared/styles/color-palette'
+
+generateCssVariables()
+```
+
 ### Styles (non Tailwind CSS projects)
 
 Atm the only thing that you can benefit from non Tailwind CSS projects is loading the fonts