@lukso/web-components 1.3.1 → 1.5.0

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

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { TailwindElement } from '@/shared/tailwind-element'
 import { customClassMap } from '@/shared/directives'
@@ -7,6 +7,8 @@ import { customClassMap } from '@/shared/directives'
 export type ButtonVariants = 'primary' | 'secondary' | 'landing' | 'link'
 export type ButtonSizes = 'small' | 'medium'
 
+const LONG_PRESS_ANIMATION_DURATION_IN_MS = 2000
+
 @customElement('lukso-button')
 export class LuksoButton extends TailwindElement {
   @property({ type: String })
@@ -21,6 +23,18 @@ export class LuksoButton extends TailwindElement {
   @property({ type: Boolean, attribute: 'is-full-width' })
   isFullWidth = false
 
+  @property({ type: Boolean, attribute: 'is-long-press' })
+  isLongPress = false
+
+  @state()
+  private isPressed = false
+
+  @state()
+  private noTransition = false
+
+  @state()
+  private timer = 0
+
   private defaultStyles = `flex justify-center items-center relative
     border border-solid cursor-pointer transition duration-0
     hover:duration-250 active:scale-98 active:duration-25
@@ -33,22 +47,69 @@ export class LuksoButton extends TailwindElement {
   private primaryStyles = `bg-neutral-20 border-neutral-20 text-neutral-100
     disabled:bg-neutral-90 disabled:border-neutral-90
     hover:shadow-button-hover-primary hover:bg-neutral-25 hover:border-neutral-25
-    active:shadow-button-press-primary active:bg-neutral-25 active:border-neutral-25`
+    active:shadow-button-press-primary active:bg-neutral-25 active:border-neutral-25
+    before:bg-neutral-10`
 
   private landingStyles = `bg-purple-51 border-purple-51 text-neutral-100
     disabled:bg-neutral-90 disabled:border-neutral-90
     hover:shadow-button-hover-primary hover:bg-purple-58 hover:border-purple-58
-    active:shadow-button-press-primary`
+    active:shadow-button-press-primary
+    before:bg-purple-51`
 
   private linkStyles = `bg-transparent border-none text-neutral-20
     hover:text-neutral-35
     active:text-neutral-35 active:scale-100
     disabled:text-neutral-90`
 
+  private longPressStyles = `relative overflow-hidden z-[1] active:outline-0
+    before:absolute before:content-[''] before:top-0 before:left-0 before:w-0 before:h-[48px]
+    before:transition-all before:duration-[2000ms] before:z-[-1] before:rounded-none`
+
+  private pressedStyles = `before:w-full before:z-[-1]`
+
+  private noTransitionStyles = `before:transition-none`
+
   private mediumSize = `py-3 px-6 paragraph-16-semi-bold rounded-xl`
 
   private smallSize = `py-1 px-3 paragraph-12-regular rounded-lg hover:shadow-none active:shadow-none`
 
+  private handleMouseDown() {
+    // Additional check for using long press on non-primary and non-landing variants
+    if (this.variant !== 'primary' && this.variant !== 'landing') {
+      return console.warn(
+        'Long press is only available for primary and landing variants'
+      )
+    }
+
+    if (!this.isLongPress) {
+      return
+    }
+
+    this.isPressed = true
+
+    this.timer = window.setTimeout(() => {
+      const event = new CustomEvent('on-long-press-complete', {
+        bubbles: true,
+        composed: true,
+      })
+      this.dispatchEvent(event)
+    }, LONG_PRESS_ANIMATION_DURATION_IN_MS)
+  }
+
+  private handleMouseUp() {
+    if (!this.isLongPress) {
+      return
+    }
+
+    this.isPressed = false
+    this.noTransition = true
+
+    setTimeout(() => {
+      this.noTransition = false
+    }, 100)
+    this.timer && clearTimeout(this.timer)
+  }
+
   render() {
     return html`
       <button
@@ -63,7 +124,13 @@ export class LuksoButton extends TailwindElement {
           [this.landingStyles]: this.variant === 'landing',
           [this.linkStyles]: this.variant === 'link',
           ['w-full']: this.isFullWidth,
+          [this.longPressStyles]: this.isLongPress,
+          [this.pressedStyles]: this.isPressed,
+          [this.noTransitionStyles]: this.noTransition,
         })}
+        @mousedown=${this.handleMouseDown}
+        @mouseup=${this.handleMouseUp}
+        @mouseleave=${this.handleMouseUp}
       >
         <slot></slot>
       </button>

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

@@ -1,11 +1,14 @@
 import { html } from 'lit-html'
 import { within } from '@storybook/testing-library'
 import { expect } from '@storybook/jest'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 
-import '../lukso-button'
+import './index'
+import '../lukso-icon'
 
+/**  Documentation and examples of `lukso-button` component. */
 export default {
-  title: 'Design System/Components/Button',
+  title: 'Design System/Components/lukso-button',
   component: 'lukso-button',
   argTypes: {
     variant: {
@@ -25,6 +28,15 @@ export default {
     isFullWidth: {
       control: { type: 'boolean' },
     },
+    isLongPress: {
+      control: { type: 'boolean' },
+    },
+    onLongPressComplete: {
+      description: 'Emitted when long press is completed',
+      table: {
+        category: 'Events',
+      },
+    },
   },
   args: {
     text: 'Hello World',
@@ -32,6 +44,7 @@ export default {
     size: 'medium',
     variant: 'primary',
     isFullWidth: false,
+    isLongPress: false,
   },
   parameters: {
     controls: {
@@ -44,20 +57,56 @@ export default {
         'mediumSize',
         'smallSize',
         'is-full-width',
+        'is-long-press',
+        'longPressStyles',
+        'noTransition',
+        'isPressed',
+        'timer',
+        'pressedStyles',
+        'noTransitionStyles',
+        'handleMouseDown',
+        'handleMouseUp',
       ],
     },
   },
 }
 
-const Template = ({ variant, disabled, text, size, isFullWidth }) =>
+const Template = ({
+  variant,
+  disabled,
+  text,
+  size,
+  isFullWidth,
+  isLongPress,
+}) =>
   html`<lukso-button
     variant=${variant}
     ?disabled=${disabled}
     size=${size}
     ?is-full-width=${isFullWidth}
+    ?is-long-press=${isLongPress}
     >${text}</lukso-button
   >`
 
+const LongPressTemplate = ({
+  variant,
+  disabled,
+  text,
+  size,
+  isFullWidth,
+  isLongPress,
+}) =>
+  html`<lukso-button
+    variant=${variant}
+    ?disabled=${disabled}
+    size=${size}
+    ?is-full-width=${isFullWidth}
+    ?is-long-press=${isLongPress}
+    @on-long-press-complete="handleLongPressComplete"
+    >${text}</lukso-button
+  >`
+
+/** By default button is using `primary` variant. */
 export const Primary = Template.bind({})
 Primary.parameters = {
   design: {
@@ -73,6 +122,7 @@ Primary.play = async ({ canvasElement }) => {
   expect(canvas.getByText('Hello World')).toBeInTheDocument()
 }
 
+/** Example of `secondary` variant. */
 export const Secondary = Template.bind({})
 Secondary.args = {
   variant: 'secondary',
@@ -84,6 +134,7 @@ Secondary.parameters = {
   },
 }
 
+/** Example of `landing` variant.  */
 export const Landing = Template.bind({})
 Landing.args = {
   variant: 'landing',
@@ -95,6 +146,7 @@ Landing.parameters = {
   },
 }
 
+/** Example of `link` variant.  */
 export const Link = Template.bind({})
 Link.args = {
   variant: 'link',
@@ -106,6 +158,7 @@ Link.parameters = {
   },
 }
 
+/** If you need button to take full width of the parent element add `is-full-width` property. */
 export const FullWidth = Template.bind({})
 FullWidth.args = {
   isFullWidth: true,
@@ -116,3 +169,48 @@ FullWidth.parameters = {
     url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=743%3A9778&t=AGmdbG8fXRENuU3o-4',
   },
 }
+
+/** In order to have disabled button add `disabled` property. */
+export const DisabledButton = Template.bind({})
+DisabledButton.args = {
+  variant: 'primary',
+  text: 'Disabled Button',
+  disabled: true,
+}
+DisabledButton.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=6%3A1324&t=mppskGJvpl3LbsWL-4',
+  },
+}
+
+/** Buttons can have icons inside. Please check `lukso-icon` component for more details about using icons. */
+export const IconButton = Template.bind({})
+IconButton.args = {
+  variant: 'primary',
+  text: unsafeHTML(
+    `<lukso-icon name="add-photo" size="medium" color="neutral-100" class="mr-2"></lukso-icon>Icon Button`
+  ),
+}
+IconButton.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=6%3A1324&t=mppskGJvpl3LbsWL-4',
+  },
+}
+
+/** Long press button require to hold press state till animation fully completes. To turn on this effect add  `is-long-press` property.
+ * In order to handle long press complete add `@on-long-press-complete` event handler.
+ */
+export const LongPressButton = LongPressTemplate.bind({})
+LongPressButton.args = {
+  variant: 'primary',
+  text: 'Hold to submit',
+  isLongPress: true,
+}
+IconButton.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=743%3A9905&t=JAexoWba0Re3ntDk-4',
+  },
+}

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

@@ -1,8 +1,9 @@
 import { html } from 'lit-html'
 import './index'
 
+/**  Documentation and examples of `lukso-card` component. Cards are using `slots` to put content in different places like `header` or `content`.  */
 export default {
-  title: 'Design System/Components/Card',
+  title: 'Design System/Components/lukso-card',
   component: 'lukso-card',
   argTypes: {
     variant: {
@@ -86,6 +87,7 @@ const ProfileTemplate = ({
     </lukso-card>
   `
 
+/** By default card is using `basic` variant.  */
 export const DefaultCard = DefaultTemplate.bind({})
 DefaultCard.parameters = {
   design: {
@@ -94,6 +96,7 @@ DefaultCard.parameters = {
   },
 }
 
+/** Example of `with-header` variant. */
 export const CardWithHeader = DefaultTemplate.bind({})
 CardWithHeader.args = {
   variant: 'with-header',
@@ -105,6 +108,7 @@ CardWithHeader.parameters = {
   },
 }
 
+/** Example of `with-header` variant that has additional background element. */
 export const CardWithCustomHeader = CustomHeaderTemplate.bind({})
 CardWithCustomHeader.args = {
   variant: 'with-header',
@@ -116,6 +120,7 @@ CardWithCustomHeader.parameters = {
   },
 }
 
+/** Example of `profile` variant. This variant additionally uses `background-url`, `profile-url` and `profile-address` properties.  */
 export const ProfileCard = ProfileTemplate.bind({})
 ProfileCard.args = {
   variant: 'profile',
@@ -126,7 +131,6 @@ ProfileCard.args = {
     },
   },
 }
-
 ProfileCard.parameters = {
   design: {
     type: 'figma',

package/src/components/lukso-icon/icons/add-photo.ts

@@ -0,0 +1,46 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const addPhoto = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M14 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V10"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M18 3V9"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M21 6L15 6"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.1214 9.87858C15.2929 11.05 15.2929 12.95 14.1214 14.1214C12.95 15.2929 11.05 15.2929 9.87858 14.1214C8.70714 12.95 8.70714 11.05 9.87858 9.87858C11.05 8.70714 12.95 8.70714 14.1214 9.87858Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/arrow-down-lg.ts

@@ -0,0 +1,26 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const arrowDownLg = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M5.25 9.25L12 16L18.75 9.25"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/arrow-down-sm.ts

@@ -0,0 +1,26 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const arrowDownSm = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M8 10.25L11.75 14L15.5 10.25"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/arrow-left-lg.ts

@@ -0,0 +1,26 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const arrowLeftLg = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M15 5L8.25 11.75L15 18.5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/arrow-left-sm.ts

@@ -0,0 +1,26 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const arrowLeftSm = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M13.625 8.375L9.875 12.125L13.625 15.875"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/arrow-right-lg.ts

@@ -0,0 +1,26 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const arrowRightLg = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M8.25 18.5L15 11.75L8.25 5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/arrow-right-sm.ts

@@ -0,0 +1,26 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const arrowRightSm = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M9.875 15.875L13.625 12.125L9.875 8.375"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/arrow-up-lg.ts

@@ -0,0 +1,26 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const arrowUpLg = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M18.75 15L12 8.25L5.25 15"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/arrow-up-sm.ts

@@ -0,0 +1,26 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const arrowUpSm = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M15.5 14L11.75 10.25L8 14"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/barbell-outline.ts

@@ -0,0 +1,54 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const barbellOutline = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M2.25 12H21.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M19.5 6.75C19.5 6.33579 19.1642 6 18.75 6C18.3358 6 18 6.33579 18 6.75V17.25C18 17.6642 18.3358 18 18.75 18C19.1642 18 19.5 17.6642 19.5 17.25V6.75Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6 6.75C6 6.33579 5.66421 6 5.25 6C4.83579 6 4.5 6.33579 4.5 6.75V17.25C4.5 17.6642 4.83579 18 5.25 18C5.66421 18 6 17.6642 6 17.25V6.75Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M2.25 9.375C2.25 9.16789 2.08211 9 1.875 9C1.66789 9 1.5 9.16789 1.5 9.375V14.625C1.5 14.8321 1.66789 15 1.875 15C2.08211 15 2.25 14.8321 2.25 14.625V9.375Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M22.5 9.375C22.5 9.16789 22.3321 9 22.125 9C21.9179 9 21.75 9.16789 21.75 9.375V14.625C21.75 14.8321 21.9179 15 22.125 15C22.3321 15 22.5 14.8321 22.5 14.625V9.375Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}