@lukso/web-components 1.3.1 → 1.5.0

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

@@ -0,0 +1,183 @@
+import { html } from 'lit-html'
+import './index'
+
+/**  Documentation and examples of `lukso-input` component.  */
+export default {
+  title: 'Design System/Forms/lukso-input',
+  component: 'lukso-input',
+  argTypes: {
+    value: {
+      control: { type: 'text' },
+    },
+    name: {
+      control: { type: 'text' },
+    },
+    type: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    description: {
+      control: { type: 'text' },
+    },
+    error: {
+      control: { type: 'text' },
+    },
+    unit: {
+      control: { type: 'text' },
+    },
+    isFullWidth: {
+      control: { type: 'boolean' },
+    },
+    autofocus: {
+      control: { type: 'boolean' },
+    },
+    min: {
+      control: { type: 'number' },
+    },
+    max: {
+      control: { type: 'number' },
+    },
+    onKeyUp: {
+      description: 'Emitted on key up event.',
+      table: {
+        category: 'Events',
+      },
+    },
+    onKeyDown: {
+      description: 'Emitted on key up down.',
+      table: {
+        category: 'Events',
+      },
+    },
+    onKeyPress: {
+      description: 'Emitted on key press.',
+      table: {
+        category: 'Events',
+      },
+    },
+  },
+  args: {
+    type: 'text',
+    value: '',
+    name: 'input',
+    label: '',
+    description: '',
+    error: '',
+    placeholder: '',
+    unit: '',
+    isFullWidth: false,
+    autofocus: false,
+    min: undefined,
+    max: undefined,
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'defaultInputStyles',
+        'defaultUnitStyles',
+        'is-full-width',
+        'hasHocus',
+      ],
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=420%3A3617&t=JAexoWba0Re3ntDk-4',
+    },
+  },
+}
+
+const Template = ({
+  value,
+  name,
+  type,
+  placeholder,
+  label,
+  description,
+  error,
+  unit,
+  isFullWidth,
+  autofocus,
+  min,
+  max,
+}) =>
+  html`<lukso-input
+    value=${value}
+    name=${name}
+    type=${type}
+    placeholder=${placeholder}
+    label=${label}
+    description=${description}
+    error=${error}
+    unit=${unit}
+    ?is-full-width=${isFullWidth}
+    ?autofocus=${autofocus}
+    min=${min}
+    max=${max}
+    @on-key-up="handleKeyUp"
+    @on-key-down="handleKeyDown"
+    @on-key-press="handleKeyPress"
+  ></lukso-input>`
+
+/** Example of default input with `value`.  */
+export const DefaultInput = Template.bind({})
+DefaultInput.args = {
+  value: 'Text Input',
+}
+
+/** Example of input with `placeholder` text. */
+export const PlaceholderText = Template.bind({})
+PlaceholderText.args = {
+  placeholder: 'Placeholder Text',
+}
+
+/** Example of input with `label`. */
+export const Label = Template.bind({})
+Label.args = {
+  label: 'Title',
+}
+
+/** Example of input with `label` and `description`. */
+export const LabelAndDescription = Template.bind({})
+LabelAndDescription.args = {
+  label: 'Title',
+  description: 'Description',
+}
+
+/** Example of input with `error`. */
+export const Error = Template.bind({})
+Error.args = {
+  label: 'Title',
+  description: 'Description',
+  error: 'Error message',
+}
+
+/** Example of input with `unit`. */
+export const Unit = Template.bind({})
+Unit.args = {
+  unit: 'unit',
+}
+
+/** If you need input to take full width of the parent element add `is-full-width` property. */
+export const FullWidth = Template.bind({})
+FullWidth.args = {
+  isFullWidth: true,
+}
+
+/** If you need input to be focused add `autofocus` property. */
+export const Autofocus = Template.bind({})
+Autofocus.args = {
+  autofocus: true,
+}
+
+/** With `min` and `max` property you can specify minimum or maximum value that can be entered. It works with `number`, `range`, `date`, `datetime-local`, `month`, `time` and `week` input types */
+export const MinMaxValue = Template.bind({})
+MinMaxValue.args = {
+  min: 1,
+  max: 10,
+  type: 'number',
+}

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

@@ -22,7 +22,7 @@ export class LuksoNavbar extends TailwindElement {
   private stickyStyles = `sticky top-0 z-[1000]`
 
   _onBrandClick() {
-    const event = new CustomEvent('click-brand', {
+    const event = new CustomEvent('on-brand-click', {
       bubbles: true,
       composed: true,
     })

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

@@ -1,8 +1,9 @@
 import { html } from 'lit-html'
 import './index'
 
+/**  Documentation and examples of `lukso-navbar` component.  */
 export default {
-  title: 'Design System/Components/Navbar',
+  title: 'Design System/Components/lukso-navbar',
   component: 'lukso-navbar',
   argTypes: {
     title: {
@@ -14,6 +15,13 @@ export default {
     isSticky: {
       control: { type: 'boolean' },
     },
+    onBrandClick: {
+      action: 'on-brand-click',
+      description: 'Emitted when brand/logo is clicked',
+      table: {
+        category: 'Events',
+      },
+    },
   },
   args: {
     title: `UNIVERSAL
@@ -43,11 +51,20 @@ const Template = ({ title, isCenter, isSticky }) =>
     title=${title}
     ?is-center=${isCenter}
     ?is-sticky=${isSticky}
+    @on-brand-click="handleBrandClick"
   ></lukso-navbar>`
 
+/** Example of default navbar. It support `@on-brand-click` event that is fired when clicking on the logo/title. */
 export const DefaultNavbar = Template.bind({})
 
+/** Example of navbar with logo and title in center. You set this by adding `is-center` property. */
 export const CenterNavbar = Template.bind({})
 CenterNavbar.args = {
   isCenter: true,
 }
+
+/** By default navbar stays at the top of the document. If you want it scroll with the content then ad  `is-sticky` property. */
+export const StickyNavbar = Template.bind({})
+StickyNavbar.args = {
+  isSticky: true,
+}

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

@@ -45,11 +45,17 @@ export class LuksoProfile extends TailwindElement {
     },
   }
 
-  private profileImageSize = () => this.sizes[this.size].profileImageSize
-  private identiconSize = () => this.sizes[this.size].identiconSize
+  private profileImageSize() {
+    return this.sizes[this.size].profileImageSize
+  }
+
+  private identiconSize() {
+    return this.sizes[this.size].identiconSize
+  }
+
   private defaultProfileUrl = 'assets/images/profile-default.png'
 
-  private identicon = () => {
+  private identicon() {
     return this.hasIdenticon && this.profileAddress && this.identiconSize()
       ? makeBlockie(this.profileAddress)
       : ''

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

@@ -1,8 +1,14 @@
 import { html } from 'lit-html'
 import './index'
 
+/**
+ *  Documentation and examples of `lukso-profile` component.
+ *  Profiles comes in `x-small`, `small`, `medium`, `large` and `x-large` size that is set in `size` property.
+ *  Identicon is generated using `ethereum-blockies-base64` library from `profile-Address` property.
+ *  To show profile picture pass valid url in `profile-url` property.
+ */
 export default {
-  title: 'Design System/Components/Profile',
+  title: 'Design System/Components/lukso-profile',
   component: 'lukso-profile',
   argTypes: {
     profileUrl: {
@@ -55,33 +61,44 @@ const Template = ({ profileUrl, size, profileAddress, hasIdenticon }) =>
     ?has-identicon=${hasIdenticon}
   ></lukso-profile>`
 
+/** Example of `x-large` profile in `96x96` pixel size.*/
 export const XLarge = Template.bind({})
 XLarge.args = {
   size: 'x-large',
 }
 
+/** Example of `large` profile in `80x80` pixel size.*/
 export const Large = Template.bind({})
 Large.args = {
   size: 'large',
 }
 
+/** Example of `medium` profile in `56x56` pixel size.*/
 export const Medium = Template.bind({})
 Medium.args = {
   size: 'medium',
 }
 
+/** Example of `small` profile in `40x40` pixel size.*/
 export const Small = Template.bind({})
 Small.args = {
   size: 'small',
 }
 
+/** Example of `x-small` profile in `24x24` pixel size.*/
 export const XSmall = Template.bind({})
 XSmall.args = {
   size: 'x-small',
 }
 
+/** When image can't be loaded or missing the placeholder is displayed. */
 export const Unknown = Template.bind({})
 Unknown.args = {
   profileUrl: '',
+}
+
+/** You can also control if identicon should be visible with `has-identicon` property. */
+export const NoIdenticon = Template.bind({})
+NoIdenticon.args = {
   hasIdenticon: false,
 }

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

@@ -10,7 +10,7 @@ export class LuksoSanitize extends TailwindElement {
   @property({ type: String, attribute: 'html-content' })
   htmlContent = ''
 
-  sanitize = () => {
+  private sanitize() {
     return DOMPurify.sanitize(this.htmlContent)
   }
 

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

@@ -1,8 +1,11 @@
 import { html } from 'lit-html'
 import './index'
 
+/**  Documentation and examples of `lukso-sanitize` component. It's used to show potentially dangerous content or HTML in safe way.
+ * One of the common use cases is using HTML tags in texts coming from translations.
+ */
 export default {
-  title: 'Design System/Components/Sanitize',
+  title: 'Design System/Components/lukso-sanitize',
   component: 'lukso-sanitize',
   argTypes: {
     htmlContent: {
@@ -23,4 +26,5 @@ export default {
 const Template = ({ htmlContent }) =>
   html`<lukso-sanitize html-content=${htmlContent}></lukso-sanitize>`
 
+/** This is example if text containing HTML tags. */
 export const Sanitize = Template.bind({})

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

@@ -21,12 +21,11 @@ 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 = () => {
+  private padding() {
     if (this.size === 'small' && this.isRounded) {
       return 'px-3'
     }
@@ -45,14 +44,15 @@ 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',
         })}
         style=${styleMap({
-          backgroundColor: this.backgroundColor,
-          borderColor: this.backgroundColor,
-          color: this.textColor,
+          backgroundColor: `var(--${this.backgroundColor})`,
+          borderColor: `var(--${this.backgroundColor})`,
+          color: `var(--${this.textColor})`,
         })}
       >
         <slot></slot>

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

@@ -1,8 +1,12 @@
 import { html } from 'lit-html'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+
 import './index'
+import '../lukso-icon'
 
+/**  Documentation and examples of `lukso-tag` component. */
 export default {
-  title: 'Design System/Components/Tag',
+  title: 'Design System/Components/lukso-tag',
   component: 'lukso-tag',
   argTypes: {
     content: {
@@ -21,12 +25,12 @@ export default {
     },
     backgroundColor: {
       control: {
-        type: 'color',
+        type: 'text',
       },
     },
     textColor: {
       control: {
-        type: 'color',
+        type: 'text',
       },
     },
   },
@@ -43,7 +47,6 @@ export default {
         'defaultStyles',
         'smallStyles',
         'largeStyles',
-        'roundedStyles',
         'is-rounded',
         'background-color',
         'text-color',
@@ -62,6 +65,7 @@ const Template = ({ content, size, isRounded, backgroundColor, textColor }) =>
     >${content}</lukso-tag
   >`
 
+/** By default tag is displayed in `small` size. */
 export const DefaultTag = Template.bind({})
 DefaultTag.parameters = {
   design: {
@@ -70,6 +74,7 @@ DefaultTag.parameters = {
   },
 }
 
+/** You can change tag size with `size` property. This is example of `large` tag. */
 export const LargeTag = Template.bind({})
 LargeTag.args = {
   size: 'large',
@@ -82,6 +87,7 @@ LargeTag.parameters = {
   },
 }
 
+/** You can create "pill" tags when adding `is-rounded` property. */
 export const RoundedTag = Template.bind({})
 RoundedTag.args = {
   isRounded: true,
@@ -93,11 +99,12 @@ RoundedTag.parameters = {
   },
 }
 
+/** You can change color of the tag to any from the palette with `text-color` and `background-color` property. */
 export const CustomColorTag = Template.bind({})
 CustomColorTag.args = {
   content: 'Custom Color Tag',
-  backgroundColor: '#E96464',
-  textColor: '#FFFFFF',
+  backgroundColor: 'red-55',
+  textColor: 'neutral-100',
 }
 CustomColorTag.parameters = {
   design: {
@@ -105,3 +112,18 @@ CustomColorTag.parameters = {
     url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=375%3A3241&t=AGmdbG8fXRENuU3o-4',
   },
 }
+
+/** Tags can have icons inside. Please check `lukso-icon` component for more details about using icons. */
+export const IconTag = Template.bind({})
+IconTag.args = {
+  size: 'small',
+  content: unsafeHTML(
+    `<lukso-icon name="information" size="small" class="mr-1"></lukso-icon>Icon Tag`
+  ),
+}
+IconTag.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/NFCh20xAq3Jg2g8A0DNC9I/UI-Library?node-id=375%3A3234&t=mppskGJvpl3LbsWL-4',
+  },
+}

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

@@ -1,10 +1,10 @@
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { sliceAddress } from '@/shared/utils/sliceAddress'
+import { styleMap } from 'lit-html/directives/style-map.js'
 
+import { sliceAddress } from '@/shared/utils/sliceAddress'
 import { TailwindElement } from '@/shared/tailwind-element'
-import { customClassMap } from '@/shared/directives/custom-class-map'
-import { styleMap } from 'lit-html/directives/style-map.js'
+import { customClassMap } from '@/shared/directives'
 
 export type UsernameSize = 'small' | 'large'
 

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

@@ -1,8 +1,9 @@
 import { html } from 'lit-html'
 import './index'
 
+/**  Documentation and examples of `lukso-username` component. It's used to display user name and address in standardized way. */
 export default {
-  title: 'Design System/Components/Username',
+  title: 'Design System/Components/lukso-username',
   component: 'lukso-username',
   argTypes: {
     name: {
@@ -57,31 +58,38 @@ const Template = ({ name, address, maxWidth, size, sliceBy, addressColor }) =>
     address-color=${addressColor}
   ></lukso-username>`
 
+/** By default user name is displayed as `name` prefixed with `@` character and 4 bytes of `address` */
 export const DefaultUsername = Template.bind({})
 
+/** Long names get truncated. You can control width of the component with `max-width` property. */
 export const LongName = Template.bind({})
 LongName.args = {
   name: 'ThisIsAReallyLongName',
 }
 
+/** Example of component that has only `name` property. */
 export const OnlyName = Template.bind({})
 OnlyName.args = {
   address: '',
 }
 
+/** Example of component that has only `address` property and `small` size. */
 export const OnlyAddress = Template.bind({})
 OnlyAddress.args = {
   name: '',
   size: 'small',
+  sliceBy: 4,
 }
 
+/** You can specify amount of sliced characters in the address with `slice-by` property. */
 export const SliceAddressBy4 = Template.bind({})
 SliceAddressBy4.args = {
   name: '',
-  size: 'small',
   sliceBy: 4,
+  size: 'small',
 }
 
+/** Address color can be customized with `address-color` property. */
 export const CustomAddressColor = Template.bind({})
 CustomAddressColor.args = {
   name: '',

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

@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js'
 import { repeat } from 'lit/directives/repeat.js'
 
 import { TailwindElement } from '@/shared/tailwind-element'
-import { customClassMap } from '@/shared/directives/custom-class-map'
+import { customClassMap } from '@/shared/directives'
 
 export type WizardStep = {
   label: string

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

@@ -2,8 +2,11 @@ import { html } from 'lit-html'
 
 import '../lukso-wizard'
 
+/** Documentation and examples of `lukso-wizard` component. Steps are passed in `step` property as object containing different labels.
+ *  To specify which step is active set `active-step` property.
+ */
 export default {
-  title: 'Design System/Components/Wizard',
+  title: 'Design System/Components/lukso-wizard',
   component: 'lukso-wizard',
   argTypes: {
     steps: {

package/src/shared/styles/color-palette.ts

@@ -1,6 +1,6 @@
 import tinycolor from 'tinycolor2'
 
-import { hslColorMap } from '../utils/hslColorMap'
+import { hslColorMap } from './hslColorMap'
 
 type ColorMap = {
   [key: string]: string

package/src/shared/styles/colors.scss

@@ -0,0 +1,91 @@
+// DO NOT MODIFY MANUALLY. This file is auto generated by Vite build process.
+:root {
+  --neutral-10: #121b21;
+  --neutral-15: #1b2832;
+  --neutral-20: #243542;
+  --neutral-25: #2d4253;
+  --neutral-30: #365063;
+  --neutral-35: #3e5d74;
+  --neutral-40: #476a85;
+  --neutral-45: #507795;
+  --neutral-50: #5985a6;
+  --neutral-55: #6a91af;
+  --neutral-60: #7a9db8;
+  --neutral-65: #8ba9c1;
+  --neutral-70: #9cb6c9;
+  --neutral-75: #acc2d2;
+  --neutral-80: #bdcedb;
+  --neutral-85: #cddae4;
+  --neutral-90: #dee7ed;
+  --neutral-95: #eef3f6;
+  --neutral-97: #f5f8fa;
+  --neutral-98: #f8fafb;
+  --neutral-100: #ffffff;
+  --honey-72: #fad275;
+  --honey-75: #fbd784;
+  --honey-82: #fce2a6;
+  --honey-85: #fce7b5;
+  --honey-92: #fef2d8;
+  --coral-65: #f37c58;
+  --coral-74: #f69e83;
+  --coral-75: #f7a288;
+  --coral-84: #fac3b3;
+  --coral-85: #fac7b7;
+  --coral-94: #fde9e2;
+  --warm-77: #ffbb8a;
+  --warm-87: #ffd8bd;
+  --warm-97: #fff6f0;
+  --sea-salt-57: #7fa4a4;
+  --sea-salt-67: #9db9b9;
+  --sea-salt-88: #dbe6e6;
+  --cloud-43: #447c97;
+  --cloud-75: #a7c7d7;
+  --cloud-88: #d5e4ec;
+  --ocean-38: #3c6286;
+  --ocean-75: #a7c0d7;
+  --ocean-88: #d5e1ec;
+  --sky-64: #68a5de;
+  --sky-75: #96c1e8;
+  --sky-85: #c0daf1;
+  --lukso-70: #cc99ae;
+  --lukso-80: #ddbbc9;
+  --lukso-90: #eedde4;
+  --yellow-55: #ffa31a;
+  --yellow-65: #ffb84d;
+  --yellow-75: #ffcc80;
+  --yellow-85: #ffe0b3;
+  --green-45: #31b452;
+  --green-54: #47cd68;
+  --green-75: #9be4ad;
+  --green-85: #c3efce;
+  --blue-50: #0567fa;
+  --blue-60: #3785fb;
+  --blue-75: #82b3fc;
+  --blue-85: #b4d1fd;
+  --red-55: #e23636;
+  --red-65: #e96363;
+  --red-75: #ef8f8f;
+  --red-85: #f5bcbc;
+  --purple-15: #1d202f;
+  --purple-31: #3c4262;
+  --purple-41: #4f5882;
+  --purple-51: #646ea0;
+  --purple-58: #7a83ae;
+  --purple-63: #8a92b7;
+  --purple-82: #c6cadc;
+  --purple-94: #ecedf3;
+  --pink-90: #f8dad3;
+  --pink-91: #f9ddd7;
+  --pink-92: #f9e1dc;
+  --pink-93: #fae5e0;
+  --pink-94: #fbe9e5;
+  --pink-95: #fcece9;
+  --pink-96: #fcf0ed;
+  --pink-97: #fdf4f2;
+  --gradient-1-start: #D39B9D;
+  --gradient-1-end: #9071D1;
+  --gradient-2-start: #F8DAD3;
+  --gradient-2-end: #CC99AE;
+  --gradient-3-start: #393e56;
+  --gradient-3-end: #646ea0;
+}

package/src/shared/styles/hslColorMap.ts

@@ -0,0 +1,20 @@
+import tinycolor from 'tinycolor2'
+
+/**
+ * Generates a color map for a given hue, saturation and lightness values
+ *
+ * @param {*} h - hue
+ * @param {*} s - saturation
+ * @param {*} l - lightness as an array
+ * @returns object containing lightness as key and hex color as value e.g. { 10: '#000000', 20: '#111111' }
+ */
+export const hslColorMap = (h, s, l) => {
+  const colors = {}
+
+  for (let i = 0; i < l.length; i++) {
+    const lightness = l[i]
+    colors[lightness] = tinycolor({ h, s, l: lightness }).toHexString()
+  }
+
+  return colors
+}