@lukso/web-components 1.4.0 → 1.5.0

package/src/components/lukso-icon/index.ts

@@ -1,112 +1,117 @@
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { TailwindElement } from '@/shared/tailwind-element'
-import { addPhoto } from './icons/add-photo.js'
-import { arrowDownLg } from './icons/arrow-down-lg.js'
-import { arrowDownSm } from './icons/arrow-down-sm.js'
-import { arrowLeftLg } from './icons/arrow-left-lg.js'
-import { arrowLeftSm } from './icons/arrow-left-sm.js'
-import { arrowRightLg } from './icons/arrow-right-lg.js'
-import { arrowRightSm } from './icons/arrow-right-sm.js'
-import { arrowUpLg } from './icons/arrow-up-lg.js'
-import { arrowUpSm } from './icons/arrow-up-sm.js'
-import { barbellOutline } from './icons/barbell-outline.js'
-import { bulbOutline } from './icons/bulb-outline.js'
-import { camera } from './icons/camera.js'
-import { clipboard } from './icons/clipboard.js'
-import { clock } from './icons/clock.js'
-import { closeLg } from './icons/close-lg.js'
-import { closeSm } from './icons/close-sm.js'
-import { cloud } from './icons/cloud.js'
-import { compassOutline } from './icons/compass-outline.js'
-import { completeFilled } from './icons/complete-filled.js'
-import { completeOutline } from './icons/complete-outline.js'
-import { contractLock } from './icons/contract-lock.js'
-import { connect } from './icons/connect.js'
-import { connections } from './icons/connections.js'
-import { controller } from './icons/controller.js'
-import { copy } from './icons/copy.js'
-import { crossOutline } from './icons/cross-outline.js'
-import { dots } from './icons/dots.js'
-import { edit } from './icons/edit.js'
-import { error } from './icons/error.js'
-import { expand } from './icons/expand.js'
-import { extension } from './icons/extension.js'
-import { eyeHide } from './icons/eye-hide.js'
-import { eyeShow } from './icons/eye-show.js'
-import { filter } from './icons/filter.js'
-import { fishOutline } from './icons/fish-outline.js'
-import { flip } from './icons/flip.js'
-import { globe } from './icons/globe.js'
-import { hamburger } from './icons/hamburger.js'
-import { infinite } from './icons/infinite.js'
-import { information } from './icons/information.js'
-import { keyOutline } from './icons/key-outline.js'
-import { link } from './icons/link.js'
-import { link1 } from './icons/link1.js'
-import { link2 } from './icons/link2.js'
-import { link3 } from './icons/link3.js'
-import { link4 } from './icons/link4.js'
-import { loading } from './icons/loading.js'
-import { location } from './icons/location.js'
-import { locked } from './icons/locked.js'
-import { login } from './icons/login.js'
-import { login2 } from './icons/login-2.js'
-import { login3 } from './icons/login-3.js'
-import { logoChrome } from './icons/logo-chrome.js'
-import { mail } from './icons/mail.js'
-import { menu1 } from './icons/menu-1.js'
-import { menu2 } from './icons/menu-2.js'
-import { migrate } from './icons/migrate.js'
-import { minimize } from './icons/minimize.js'
-import { network } from './icons/network.js'
-import { notifications } from './icons/notifications.js'
-import { phonePortraitOutline } from './icons/phone-portrait-outline.js'
-import { pin } from './icons/pin.js'
-import { playFilled } from './icons/play-filled.js'
-import { playOutline } from './icons/play-outline.js'
-import { plus } from './icons/plus.js'
-import { profileAdd } from './icons/profile-add.js'
-import { profileExport } from './icons/profile-export.js'
-import { profileImport } from './icons/profile-import.js'
-import { profileRecovery } from './icons/profile-recovery.js'
-import { profileRecovery2 } from './icons/profile-recovery-2.js'
-import { profileRestore } from './icons/profile-restore.js'
-import { profile } from './icons/profile.js'
-import { qrCode } from './icons/qr-code.js'
-import { relayer } from './icons/relayer.js'
-import { reload } from './icons/reload.js'
-import { returnDown } from './icons/return-down.js'
-import { returnLeft } from './icons/return-left.js'
-import { returnRight } from './icons/return-right.js'
-import { returnUp } from './icons/return-up.js'
-import { search } from './icons/search.js'
-import { settings } from './icons/settings.js'
-import { smartContractDoc } from './icons/smart-contract-doc.js'
-import { smartContract } from './icons/smart-contract.js'
-import { starFilled } from './icons/star-filled.js'
-import { starOutline } from './icons/star-outline.js'
-import { stepDot } from './icons/step-dot.js'
-import { stepProgress } from './icons/step-progress.js'
-import { steps } from './icons/steps.js'
-import { tick } from './icons/tick.js'
-import { timerOutline } from './icons/timer-outline.js'
-import { transactionReceive } from './icons/transaction-receive.js'
-import { transactionSend } from './icons/transaction-send.js'
-import { transfer } from './icons/transfer.js'
-import { trash } from './icons/trash.js'
-import { turnDown } from './icons/turn-down.js'
-import { turnLeft } from './icons/turn-left.js'
-import { turnRight } from './icons/turn-right.js'
-import { turnUp } from './icons/turn-up.js'
-import { unlocked } from './icons/unlocked.js'
-import { walletOutline } from './icons/wallet-outline.js'
-import { warningRound } from './icons/warning-round.js'
-import { warningTriangle } from './icons/warning-triangle.js'
-import { googleColor } from './icons/google-color.js'
-import { ethLogo } from './icons/eth-logo.js'
-import { lyxLogo } from './icons/lyx-logo.js'
+import { TailwindStyledElement } from '@/shared/tailwind-element'
+import style from './style.scss?inline'
+import { addPhoto } from './icons/add-photo'
+import { arrowDownLg } from './icons/arrow-down-lg'
+import { arrowDownSm } from './icons/arrow-down-sm'
+import { arrowLeftLg } from './icons/arrow-left-lg'
+import { arrowLeftSm } from './icons/arrow-left-sm'
+import { arrowRightLg } from './icons/arrow-right-lg'
+import { arrowRightSm } from './icons/arrow-right-sm'
+import { arrowUpLg } from './icons/arrow-up-lg'
+import { arrowUpSm } from './icons/arrow-up-sm'
+import { barbellOutline } from './icons/barbell-outline'
+import { bulbOutline } from './icons/bulb-outline'
+import { camera } from './icons/camera'
+import { clipboard } from './icons/clipboard'
+import { clock } from './icons/clock'
+import { closeLg } from './icons/close-lg'
+import { closeSm } from './icons/close-sm'
+import { cloud } from './icons/cloud'
+import { compassOutline } from './icons/compass-outline'
+import { completeFilled } from './icons/complete-filled'
+import { completeOutline } from './icons/complete-outline'
+import { contractLock } from './icons/contract-lock'
+import { connect } from './icons/connect'
+import { connections } from './icons/connections'
+import { controller } from './icons/controller'
+import { copy } from './icons/copy'
+import { crossOutline } from './icons/cross-outline'
+import { dots } from './icons/dots'
+import { edit } from './icons/edit'
+import { error } from './icons/error'
+import { expand } from './icons/expand'
+import { extension } from './icons/extension'
+import { eyeHide } from './icons/eye-hide'
+import { eyeShow } from './icons/eye-show'
+import { filter } from './icons/filter'
+import { fishOutline } from './icons/fish-outline'
+import { flip } from './icons/flip'
+import { globe } from './icons/globe'
+import { hamburger } from './icons/hamburger'
+import { infinite } from './icons/infinite'
+import { information } from './icons/information'
+import { keyOutline } from './icons/key-outline'
+import { link } from './icons/link'
+import { link1 } from './icons/link1'
+import { link2 } from './icons/link2'
+import { link3 } from './icons/link3'
+import { link4 } from './icons/link4'
+import { loading } from './icons/loading'
+import { location } from './icons/location'
+import { locked } from './icons/locked'
+import { login } from './icons/login'
+import { login2 } from './icons/login-2'
+import { login3 } from './icons/login-3'
+import { logoChrome } from './icons/logo-chrome'
+import { mail } from './icons/mail'
+import { menu1 } from './icons/menu-1'
+import { menu2 } from './icons/menu-2'
+import { migrate } from './icons/migrate'
+import { minimize } from './icons/minimize'
+import { network } from './icons/network'
+import { notifications } from './icons/notifications'
+import { phonePortraitOutline } from './icons/phone-portrait-outline'
+import { pin } from './icons/pin'
+import { playFilled } from './icons/play-filled'
+import { playOutline } from './icons/play-outline'
+import { plus } from './icons/plus'
+import { profileAdd } from './icons/profile-add'
+import { profileExport } from './icons/profile-export'
+import { profileImport } from './icons/profile-import'
+import { profileRecovery } from './icons/profile-recovery'
+import { profileRecovery2 } from './icons/profile-recovery-2'
+import { profileRestore } from './icons/profile-restore'
+import { profile } from './icons/profile'
+import { qrCode } from './icons/qr-code'
+import { relayer } from './icons/relayer'
+import { reload } from './icons/reload'
+import { returnDown } from './icons/return-down'
+import { returnLeft } from './icons/return-left'
+import { returnRight } from './icons/return-right'
+import { returnUp } from './icons/return-up'
+import { search } from './icons/search'
+import { settings } from './icons/settings'
+import { smartContractDoc } from './icons/smart-contract-doc'
+import { smartContract } from './icons/smart-contract'
+import { starFilled } from './icons/star-filled'
+import { starOutline } from './icons/star-outline'
+import { stepDot } from './icons/step-dot'
+import { stepProgress } from './icons/step-progress'
+import { steps } from './icons/steps'
+import { tick } from './icons/tick'
+import { timerOutline } from './icons/timer-outline'
+import { transactionReceive } from './icons/transaction-receive'
+import { transactionSend } from './icons/transaction-send'
+import { transfer } from './icons/transfer'
+import { trash } from './icons/trash'
+import { turnDown } from './icons/turn-down'
+import { turnLeft } from './icons/turn-left'
+import { turnRight } from './icons/turn-right'
+import { turnUp } from './icons/turn-up'
+import { unlocked } from './icons/unlocked'
+import { walletOutline } from './icons/wallet-outline'
+import { warningRound } from './icons/warning-round'
+import { warningTriangle } from './icons/warning-triangle'
+import { googleColor } from './icons/google-color'
+import { ethLogo } from './icons/eth-logo'
+import { lyxLogo } from './icons/lyx-logo'
+import { progressIndicator } from './icons/progress-indicator'
+import { pulseDot } from './icons/pulse-dot'
+import { progressComplete } from './icons/progress-complete'
+import { completeFilledFadeIn } from './icons/complete-filled-fade-in'
 
 export type IconOptions = {
   width: number
@@ -230,10 +235,14 @@ const iconMap = {
   'google-color': googleColor,
   'eth-logo': ethLogo,
   'lyx-logo': lyxLogo,
+  'progress-indicator': progressIndicator,
+  'pulse-dot': pulseDot,
+  'progress-complete': progressComplete,
+  'complete-filled-fade-in': completeFilledFadeIn,
 }
 
 @customElement('lukso-icon')
-export class LuksoIcon extends TailwindElement {
+export class LuksoIcon extends TailwindStyledElement(style) {
   @property({ type: String })
   name = ''
 
@@ -282,13 +291,15 @@ export class LuksoIcon extends TailwindElement {
       console.warn(`Size ${this.size} not found`)
     }
 
-    return html`${icon({
-      width: size.width,
-      height: size.height,
-      color: this.color,
-      strokeWidth: size.strokeWidth,
-      secondaryColor: this.secondaryColor,
-    })}`
+    return html`
+      ${icon({
+        width: size.width,
+        height: size.height,
+        color: this.color,
+        strokeWidth: size.strokeWidth,
+        secondaryColor: this.secondaryColor,
+      })}
+    `
   }
 }
 

package/src/components/lukso-icon/lukso-icon.stories.ts

@@ -21,16 +21,27 @@ export default {
     secondaryColor: {
       control: { type: 'text' },
     },
+    animation: {
+      control: { type: 'select' },
+      options: [
+        'animate-spin',
+        'animate-ping',
+        'animate-pulse',
+        'animate-bounce',
+        'animate-pulse-resize',
+      ],
+    },
   },
   args: {
     name: 'profile-recovery',
     size: 'medium',
     color: 'neutral-20',
     secondaryColor: '',
+    animation: undefined,
   },
   parameters: {
     controls: {
-      exclude: ['sizes', 'secondary-color'],
+      exclude: ['sizes', 'secondary-color', 'styles'],
     },
     design: {
       type: 'figma',
@@ -39,12 +50,13 @@ export default {
   },
 }
 
-const Template = ({ name, size, color, secondaryColor }) =>
+const Template = ({ name, size, color, secondaryColor, animation }) =>
   html`<lukso-icon
     name=${name}
     size=${size}
     color=${color}
     secondary-color=${secondaryColor}
+    class=${animation}
   ></lukso-icon>`
 
 /** By default icon comes in `medium` size of `24x24` pixels with `neutral-20` color.  */
@@ -94,3 +106,11 @@ export const ColoredIcon = Template.bind({})
 ColoredIcon.args = {
   name: 'google-color',
 }
+
+/** You can animate any icon by applying `animate-[name]` property. Some icons come with build in animation. Check more details in `Animations` and `Icons` section. */
+export const AnimatedIcon = Template.bind({})
+AnimatedIcon.args = {
+  name: 'step-progress',
+  secondaryColor: 'neutral-100',
+  animation: 'animate-spin',
+}

package/src/components/lukso-icon/style.scss

@@ -0,0 +1,3 @@
+:host {
+  display: inline-flex;
+}

package/src/components/lukso-input/index.ts

@@ -47,7 +47,7 @@ export class LuksoInput extends TailwindElement {
   private hasHocus = false
 
   private defaultInputStyles = `bg-neutral-100 text-neutral-20 paragraph-16-regular px-4 py-3
-    border border-solid border-neutral-90 h-[48px] placeholder:neutral-70
+    border border-solid border-neutral-90 h-[48px] placeholder:text-neutral-70
     outline-none transition transition-all duration-250 appearance-none`
 
   private defaultUnitStyles = `paragraph-12-regular text-neutral-60 flex px-3.5 items-center relative

package/src/components/lukso-tag/index.ts

@@ -21,10 +21,9 @@ export class LuksoTag extends TailwindElement {
   @property({ type: String, attribute: 'text-color' })
   textColor = ''
 
-  private defaultStyles = `rounded-lg inline-flex items-center justify-center border border-neutral-20 text-neutral-20`
+  private defaultStyles = `inline-flex items-center justify-center border border-neutral-20 text-neutral-20`
   private smallStyles = `paragraph-12-medium h-[28px]`
   private largeStyles = `paragraph-14-medium h-[34px]`
-  private roundedStyles = `rounded-[56px]`
 
   private padding() {
     if (this.size === 'small' && this.isRounded) {
@@ -45,7 +44,8 @@ export class LuksoTag extends TailwindElement {
         class=${customClassMap({
           [this.defaultStyles]: true,
           [this.padding()]: true,
-          [this.roundedStyles]: this.isRounded,
+          ['rounded-[56px]']: this.isRounded,
+          ['rounded-lg']: !this.isRounded,
           [this.smallStyles]: this.size === 'small',
           [this.largeStyles]: this.size === 'large',
         })}

package/src/components/lukso-tag/lukso-tag.stories.ts

@@ -47,7 +47,6 @@ export default {
         'defaultStyles',
         'smallStyles',
         'largeStyles',
-        'roundedStyles',
         'is-rounded',
         'background-color',
         'text-color',

package/tailwind.config.cjs

@@ -1,5 +1,65 @@
+const plugin = require('tailwindcss/plugin')
+
 const { colorPalette } = require('./tools/color-palette.cjs')
 
+/**
+ * Add animation delay utilities. Example: .animation-delay-1000
+ */
+const animationDelayPlugin = plugin(function ({ addUtilities, theme, e }) {
+  const values = theme('animationDelay')
+  var utilities = Object.entries(values).map(([key, value]) => {
+    return {
+      [`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
+    }
+  })
+  addUtilities(utilities)
+})
+
+/**
+ * Add animation iteration utilities. Example: .animation-iteration-infinite
+ */
+const animationIterationPlugin = plugin(function ({ addUtilities, theme, e }) {
+  const values = theme('animationIteration')
+  var utilities = Object.entries(values).map(([key, value]) => {
+    return {
+      [`.${e(`animation-iteration-${key}`)}`]: {
+        animationIterationCount: `${value}`,
+      },
+    }
+  })
+  addUtilities(utilities)
+})
+
+/**
+ * Add animation duration utilities. Example: .animation-duration-1000
+ */
+const animationDuration = plugin(function ({ addUtilities, theme, e }) {
+  const values = theme('animationDuration')
+  var utilities = Object.entries(values).map(([key, value]) => {
+    return {
+      [`.${e(`animation-duration-${key}`)}`]: {
+        animationDuration: `${value}`,
+      },
+    }
+  })
+  addUtilities(utilities)
+})
+
+/**
+ * Add animation fill mode  utilities. Example: .animation-fill-forwards
+ */
+const animationFill = plugin(function ({ addUtilities, theme, e }) {
+  const values = theme('animationFill')
+  var utilities = Object.entries(values).map(([key, value]) => {
+    return {
+      [`.${e(`animation-fill-${key}`)}`]: {
+        animationFillMode: `${value}`,
+      },
+    }
+  })
+  addUtilities(utilities)
+})
+
 module.exports = {
   content: ['**/*.{ts,html,css,scss,mdx}'],
   theme: {
@@ -110,7 +170,81 @@ module.exports = {
       height: {
         78: '78px',
       },
+      animation: {
+        'pulse-resize': 'pulse-resize 1s ease-in-out infinite',
+        'resize-in': 'resize-in 0.5s ease-in-out',
+        'fade-in': 'fade-in 0.5s ease-in-out',
+      },
+      keyframes: {
+        'pulse-resize': {
+          '0%, 100%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(0.7)' },
+        },
+        'resize-in': {
+          '0%': { transform: 'scale(0.5)' },
+          '100%': { transform: 'scale(1)' },
+        },
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+      },
+      animationDelay: {
+        none: '0s',
+        75: '75ms',
+        100: '100ms',
+        150: '150ms',
+        200: '200ms',
+        300: '300ms',
+        400: '400ms',
+        500: '500ms',
+        600: '600ms',
+        700: '700ms',
+        800: '800ms',
+        900: '900ms',
+        1000: '1000ms',
+        1500: '1500ms',
+        2000: '2000ms',
+        3000: '3000ms',
+        5000: '5000ms',
+      },
+      animationIteration: {
+        infinite: 'infinite',
+        1: '1',
+        2: '2',
+        3: '3',
+      },
+      animationDuration: {
+        25: '25ms',
+        50: '50ms',
+        75: '75ms',
+        100: '100ms',
+        150: '150ms',
+        200: '200ms',
+        300: '300ms',
+        400: '400ms',
+        500: '500ms',
+        600: '600ms',
+        700: '700ms',
+        800: '800ms',
+        900: '900ms',
+        1000: '1000ms',
+        1500: '1500ms',
+        2000: '2000ms',
+        3000: '3000ms',
+      },
+      animationFill: {
+        none: 'none',
+        forwards: 'forwards',
+        backwards: 'backwards',
+        both: 'both',
+      },
     },
   },
-  plugins: [],
+  plugins: [
+    animationDelayPlugin,
+    animationIterationPlugin,
+    animationDuration,
+    animationFill,
+  ],
 }