@lukso/web-components 1.5.4 → 1.6.1

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

@@ -27,6 +27,12 @@ export default {
       control: { type: 'text' },
       if: { arg: 'variant', eq: 'profile' },
     },
+    isFixedWidth: {
+      control: { type: 'boolean' },
+    },
+    isFixedHeight: {
+      control: { type: 'boolean' },
+    },
   },
   args: {
     variant: 'basic',
@@ -35,6 +41,7 @@ export default {
     backgroundUrl: 'images/sample-background.jpg',
     profileUrl: 'images/sample-avatar.png',
     profileAddress: '0x9671Db683406EE0817B1f5cB6A3b3BD111477457',
+    isFullWidth: false,
   },
   parameters: {
     controls: {
@@ -43,22 +50,44 @@ export default {
         'background-url',
         'profile-url',
         'profile-address',
+        'is-fixed-width',
+        'is-fixed-height',
       ],
     },
   },
 }
 
-const DefaultTemplate = ({ variant, content, header }) =>
+const DefaultTemplate = ({
+  variant,
+  content,
+  header,
+  isFixedHeight,
+  isFixedWidth,
+}) =>
   html`
-    <lukso-card variant=${variant}>
+    <lukso-card
+      variant=${variant}
+      ?is-fixed-width=${isFixedWidth}
+      ?is-fixed-height=${isFixedHeight}
+    >
       <div slot="header" class="p-6">${header}</div>
       <div slot="content" class="p-6">${content}</div>
     </lukso-card>
   `
 
-const CustomHeaderTemplate = ({ variant, content, header }) =>
+const CustomHeaderTemplate = ({
+  variant,
+  content,
+  header,
+  isFixedHeight,
+  isFixedWidth,
+}) =>
   html`
-    <lukso-card variant=${variant}>
+    <lukso-card
+      variant=${variant}
+      ?is-fixed-width=${isFixedWidth}
+      ?is-fixed-height=${isFixedHeight}
+    >
       <div slot="header" class="p-6 relative overflow-hidden min-h-[200px]">
         <div
           class="w-[876px] h-[200px] -left-[257px] top-[72px] bg-neutral-95 rounded-[50%] absolute"
@@ -75,6 +104,8 @@ const ProfileTemplate = ({
   backgroundUrl,
   profileUrl,
   profileAddress,
+  isFixedHeight,
+  isFixedWidth,
 }) =>
   html`
     <lukso-card
@@ -82,6 +113,8 @@ const ProfileTemplate = ({
       background-url=${backgroundUrl}
       profile-url=${profileUrl}
       profile-address=${profileAddress}
+      ?is-fixed-width=${isFixedWidth}
+      ?is-fixed-height=${isFixedHeight}
     >
       <div slot="content" class="p-6">${content}</div>
     </lukso-card>
@@ -96,10 +129,25 @@ DefaultCard.parameters = {
   },
 }
 
+/** If you need card with fixed sizes you can add `is-fixed-width` or `is-fixed-height` property.  */
+export const FixedCard = DefaultTemplate.bind({})
+FixedCard.args = {
+  isFixedWidth: true,
+  isFixedHeight: true,
+}
+FixedCard.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=1332%3A18025&t=AGmdbG8fXRENuU3o-4',
+  },
+}
+
 /** Example of `with-header` variant. */
 export const CardWithHeader = DefaultTemplate.bind({})
 CardWithHeader.args = {
   variant: 'with-header',
+  isFixedWidth: true,
+  isFixedHeight: true,
 }
 CardWithHeader.parameters = {
   design: {
@@ -112,6 +160,8 @@ CardWithHeader.parameters = {
 export const CardWithCustomHeader = CustomHeaderTemplate.bind({})
 CardWithCustomHeader.args = {
   variant: 'with-header',
+  isFixedWidth: true,
+  isFixedHeight: true,
 }
 CardWithCustomHeader.parameters = {
   design: {
@@ -124,6 +174,8 @@ CardWithCustomHeader.parameters = {
 export const ProfileCard = ProfileTemplate.bind({})
 ProfileCard.args = {
   variant: 'profile',
+  isFixedWidth: true,
+  isFixedHeight: true,
   parameters: {
     design: {
       type: 'figma',

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

@@ -0,0 +1,3 @@
+:host {
+  @apply w-full;
+}

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

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

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

@@ -47,11 +47,11 @@ 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:text-neutral-70
+    border border-solid 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
-    border border-solid border-neutral-90 h-[48px] transition transition-all duration-250
+    border border-solid h-[48px] transition transition-all duration-250
     rounded-r-xl border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
     before:w-[1px] before:h-[24px] whitespace-nowrap`
 
@@ -70,6 +70,7 @@ export class LuksoInput extends TailwindElement {
           [this.defaultInputStyles]: true,
           ['border-red-85 text-red-65 focus:border-red-65']: this.error !== '',
           ['border-neutral-35']: this.hasHocus,
+          ['border-neutral-90']: !this.hasHocus,
           ['rounded-l-xl border-r-0']: this.unit !== '',
           ['rounded-xl']: this.unit === '',
           ['w-full']: this.isFullWidth,

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

@@ -43,7 +43,7 @@ export class LuksoNavbar extends TailwindElement {
           class="flex items-center px-10 h-full cursor-pointer"
           @click=${this._onBrandClick}
         >
-          <img src="assets/images/lukso-logo.svg" class="mr-4" />
+          <img src="/assets/images/lukso-logo.svg" class="mr-4" />
           <div
             class="text-purple-51 heading-h4-apax whitespace-pre-line flex leading-none"
           >

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

@@ -53,7 +53,7 @@ export class LuksoProfile extends TailwindElement {
     return this.sizes[this.size].identiconSize
   }
 
-  private defaultProfileUrl = 'assets/images/profile-default.png'
+  private defaultProfileUrl = '/assets/images/profile-default.png'
 
   private identicon() {
     return this.hasIdenticon && this.profileAddress && this.identiconSize()

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

@@ -2,7 +2,7 @@ import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { styleMap } from 'lit-html/directives/style-map.js'
 
-import { sliceAddress } from '@/shared/utils/sliceAddress'
+import { sliceAddress } from '@/shared/utils/slice-address'
 import { TailwindElement } from '@/shared/tailwind-element'
 import { customClassMap } from '@/shared/directives'
 

package/src/docs/animations.stories.mdx

@@ -0,0 +1,83 @@
+import { Meta, IconGallery, IconItem } from '@storybook/addon-docs'
+import '../components/lukso-icon/index'
+
+<h1>Animations</h1>
+
+Animations can be applied to any element through special CSS classes. For animatingicons you pass animation name.
+
+<Meta title="Design System/Animations" />
+
+### **Example usage**
+
+```html
+<div class="w-[12px] h-[12px] bg-green-54 animate-spin"></div>
+```
+
+### **Animation list**
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-spin`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 animate-spin"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-ping`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-ping"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-pulse`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-pulse"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-bounce`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-bounce"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-pulse-resize`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-pulse-resize"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-resize-in`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-resize-in animation-iteration-infinite animation-duration-1000"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-fade-in`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full opacity-0 animate-fade-in animation-iteration-infinite animation-duration-1000"></div>
+</div>
+
+### **Delay animation**
+
+You can delay animation by adding `animation-delay-[value]` class.
+
+```html
+<div class="animate-spin animation-delay-100"></div>
+```
+
+### **Animation count**
+
+You can set animation count by adding `animation-iteration-[value]` class.
+
+```html
+<div class="animate-spin animation-iteration-infinite"></div>
+```
+
+### **Animation duration**
+
+You can set animation duration by adding `animation-duration-[value]` class.
+
+```html
+<div class="animate-spin animation-duration-1000"></div>
+```
+
+### **Animation fill mode**
+
+You can set animation fill mode by adding `animation-fill-[value]` class.
+
+```html
+<div class="animate-spin animation-fill-forwards"></div>
+```

package/src/docs/colors.stories.mdx

@@ -0,0 +1,77 @@
+import {
+  Meta,
+  ColorPalette,
+  ColorItem,
+  Story,
+  Canvas,
+  Source,
+} from '@storybook/addon-docs'
+import { html } from 'lit-html'
+import dedent from 'ts-dedent'
+
+import {
+  colorPalette,
+  neutral1,
+  neutral2,
+  neutral3,
+} from '../shared/utils/color-palette'
+
+<Meta title="Design System/Colors" />
+
+<h1 id="typography">Colors</h1>
+
+We use colors that has fixed `hue` and `saturation` and operate over `lightness` values.
+For instance in `neutral-20` the lightness value is `20`.
+
+### **Example Usage**
+
+Apply color class like any other Tailwind color, for example:
+
+```html
+<span class="bg-neutral-20 text-honey-72">Text</span>
+```
+
+### **Color Palette**
+
+<br />
+
+<ColorPalette>
+  #### **Neutral Colors**
+  <br />
+  <br />
+  <ColorItem title="neutral" colors={neutral1} />
+  <ColorItem colors={neutral2} />
+  <ColorItem colors={neutral3} />
+  ### **Accent Colors**
+  <br />
+  <br />
+  <ColorItem title="honey" colors={colorPalette.honey} />
+  <ColorItem title="coral" colors={colorPalette.coral} />
+  <ColorItem title="warm" colors={colorPalette.warm} />
+  <ColorItem title="sea salt" colors={colorPalette['sea-salt']} />
+  <ColorItem title="cloud" colors={colorPalette.cloud} />
+  <ColorItem title="ocean" colors={colorPalette.ocean} />
+  <ColorItem title="sky" colors={colorPalette.sky} />
+  <ColorItem title="lukso" colors={colorPalette.lukso} />
+  ### **Utility Colors**
+  <br />
+  <br />
+  <ColorItem title="yellow" colors={colorPalette.yellow} />
+  <ColorItem title="green" colors={colorPalette.green} />
+  <ColorItem title="blue" colors={colorPalette.blue} />
+  <ColorItem title="red" colors={colorPalette.red} />
+  ### **Purples**
+  <br />
+  <br />
+  <ColorItem title="purple" colors={colorPalette.purple} />
+  ### **Pinks**
+  <br />
+  <br />
+  <ColorItem title="pink" colors={colorPalette.pink} />
+  ### **Gradients**
+  <br />
+  <br />
+  <ColorItem title="gradient-1" colors={colorPalette['gradient-1']} />
+  <ColorItem title="gradient-2" colors={colorPalette['gradient-2']} />
+  <ColorItem title="gradient-3" colors={colorPalette['gradient-3']} />
+</ColorPalette>

package/src/docs/drop-shadows.stories.mdx

@@ -0,0 +1,108 @@
+import { Meta } from '@storybook/addon-docs'
+
+<h1 id="typography">Drop Shadows</h1>
+
+Set of drop shadows for use in the design system.
+
+<Meta title="Design System/Drop Shadows" />
+
+### **Example Usage**
+
+Apply shadow class like any other Tailwind shadow using `shadow-{name}` pattern, for example:
+
+```html
+<span class="shadow-neutral-drop-shadow">Text</span>
+```
+
+### **Object Drop Shadows**
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    1xl
+  </div>
+  <div class="shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    2xl
+  </div>
+  <div class="shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    3xl
+  </div>
+</div>
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-neutral-drop-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-drop-shadow
+  </div>
+  <div class="shadow-neutral-drop-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-drop-shadow-1xl
+  </div>
+  <div class="shadow-neutral-drop-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-drop-shadow-2xl
+  </div>
+  <div class="shadow-neutral-drop-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-drop-shadow-3xl
+  </div>
+</div>
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-pink-drop-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-drop-shadow
+  </div>
+  <div class="shadow-pink-drop-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-drop-shadow-1xl
+  </div>
+  <div class="shadow-pink-drop-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-drop-shadow-2xl
+  </div>
+  <div class="shadow-pink-drop-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-drop-shadow-3xl
+  </div>
+</div>
+
+### **Object Inner Shadows**
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-neutral-inner-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-inner-shadow
+  </div>
+  <div class="shadow-neutral-inner-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-inner-shadow-1xl
+  </div>
+  <div class="shadow-neutral-inner-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-inner-shadow-2xl
+  </div>
+  <div class="shadow-neutral-inner-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-inner-shadow-3xl
+  </div>
+</div>
+
+### **Object Above Shadows**
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-neutral-above-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-above-shadow
+  </div>
+  <div class="shadow-neutral-above-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-above-shadow-1xl
+  </div>
+  <div class="shadow-neutral-above-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-above-shadow-2xl
+  </div>
+  <div class="shadow-neutral-above-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-above-shadow-3xl
+  </div>
+</div>
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-pink-above-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-above-shadow
+  </div>
+  <div class="shadow-pink-above-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-above-shadow-1xl
+  </div>
+  <div class="shadow-pink-above-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-above-shadow-2xl
+  </div>
+  <div class="shadow-pink-above-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-above-shadow-3xl
+  </div>
+</div>