Walls.io Storybook Components

Web Components built with Lit. No framework required — drop them into any HTML page or JS project.

Installation

npm install walls-io-storybook-components

Import the CSS (once, globally):

import "walls-io-storybook-components/dist/index.css";

Import the components you need:

import "walls-io-storybook-components/dist/Button";
import "walls-io-storybook-components/dist/CountryCodeSelect";
import "walls-io-storybook-components/dist/ProgressBar";

Development

npm install
npm run storybook
# → http://localhost:6006/

Components

<walls-button-component>

A versatile button supporting four visual types, multiple color schemes, icons, social icons, and link mode.

Props

| Prop | Type | Default | Description | |---|---|---|---| | button_type | string | — | Required. primary | secondary | alternative | simple | | color_scheme | string | yellow | See color options per type below | | label | string | — | Button text | | label_short | string | — | Replaces label on screens narrower than 400px | | size | string | normal | normal | large | small | | type | string | button | HTML button type: button | submit | reset. When submit, finds the closest <form> and calls requestSubmit() | | disabled | boolean | false | Disables the button | | icon_before | string | — | Icon rendered before the label. See icon list below | | icon_after | string | — | Icon rendered after the label. See icon list below | | social | string | — | Renders a social network icon and applies its brand color. See social list below | | link | string | — | Renders as an <a> tag with this href | | target | string | _self | Link target (used when link is set) | | rel | string | — | Link rel attribute, e.g. nofollow | | aria_label | string | — | Aria label for screen readers | | vertical_on_small_screen | boolean | false | Stacks icon and label vertically on small screens | | icons_hidden_on_small_screen | boolean | false | Hides icons on small screens | | on_click | function | — | Click callback |

Color schemes by type

| button_type | Available color_scheme values | |---|---| | primary | yellow black green blue pink white | | secondary | red blue black white | | alternative | red blue black white | | simple | blue red black |

Icons (icon_before / icon_after)

check outsideLink plus xmark write none trashcan arrowLeft gear arrowRight pencil info floppy heart heartFull arrowUp ticket calendar forward powerOff link rotate rotateAnimate puzzle rocket headset play coinBlank grid2 grid2empty arrowDownToLine sparkles eye fingerprint mask

Social networks (social)

facebook twitter x instagram linkedin youtube tiktok pinterest rss mastodon flickr vimeo reddit tumblr vkontakte bluesky

Examples

<!-- Primary yellow button -->
<walls-button-component
  button_type="primary"
  color_scheme="yellow"
  label="Show wall"
  icon_before="outsideLink"
></walls-button-component>

<!-- Secondary destructive button -->
<walls-button-component
  button_type="secondary"
  color_scheme="red"
  label="Delete"
  icon_after="trashcan"
></walls-button-component>

<!-- Submit button inside a form -->
<walls-button-component
  button_type="primary"
  color_scheme="green"
  label="Save"
  icon_before="floppy"
  type="submit"
></walls-button-component>

<!-- Link button -->
<walls-button-component
  button_type="simple"
  color_scheme="blue"
  label="Learn more"
  link="https://walls.io"
  target="_blank"
></walls-button-component>

<walls-country-code-select>

A searchable country code dropdown with flag emojis. Outputs a hidden input for form submission.

Props

| Prop | Type | Default | Description | |---|---|---|---| | value | string | '' | Selected country code (e.g. AT, US) | | height | number | 32 | Height of the toggle button in px | | full_width | boolean | false | Stretches the component to full container width | | label | string | '' | Label text rendered above the dropdown | | input_id | string | '' | id on the hidden input and for on the label | | input_name | string | '' | name on the hidden input for form submission | | input_classes | string | '' | Extra CSS classes on the hidden input | | label_classes | string | '' | Extra CSS classes on the label element | | toggle_button_classes | string | '' | Extra CSS classes on the toggle button | | search_input_classes | string | '' | Extra CSS classes on the search input inside the dropdown | | on_change | function | — | Callback fired with the selected code string when selection changes |

Examples

<!-- Basic usage -->
<walls-country-code-select
  input_name="country_code"
  label="Country code"
></walls-country-code-select>

<!-- Pre-selected value, full width -->
<walls-country-code-select
  value="AT"
  full_width
  height="40"
></walls-country-code-select>

// With on_change callback
const el = document.querySelector('walls-country-code-select');
el.on_change = (code) => console.log('Selected:', code);

<walls-progress-bar-component>

A progress bar with flexible value/max, color schemes, optional label and percentage, rounded ends, and customizable track background.

Props

| Prop | Type | Default | Description | |---|---|---|---| | value | number | 0 | Current progress value | | max | number | 100 | Maximum value. Set to e.g. 4 and value to 1–4 for step-based progress | | color_scheme | string | blue | Fill color. See options below | | height | number | 8 | Bar height in px | | rounded | boolean | false | Pill-style rounded ends | | label | string | '' | Text label rendered above the bar | | show_percentage | boolean | false | Shows value% (or value / max when max ≠ 100) above the bar | | track_color | string | default | Track background: default (tint of fill color) | gray | transparent | | inline | string | false | Inline single-row layout: false (stacked) | label-percent-bar | label-bar-percent | | step_sign | string | / | Separator used in the step label when max ≠ 100 (e.g. of, aus) | | step_sign_color | string | '' | Color of the percentage/step label. Defaults to color_scheme if not set. See color options below | | show_min_progress | boolean | false | When true, renders a 14px wide fill even when value is 0 to indicate the bar has started |

Color schemes

blue green red yellow pink black white gray

Examples

<!-- Simple 60% bar -->
<walls-progress-bar-component
  value="60"
></walls-progress-bar-component>

<!-- Labeled bar with percentage -->
<walls-progress-bar-component
  value="75"
  color_scheme="green"
  label="Upload progress"
  show_percentage
></walls-progress-bar-component>

<!-- Step-based (step 2 of 4) -->
<walls-progress-bar-component
  value="2"
  max="4"
  color_scheme="blue"
  label="Step"
  show_percentage
  rounded
></walls-progress-bar-component>

<!-- Gray track, thick, rounded -->
<walls-progress-bar-component
  value="80"
  color_scheme="pink"
  height="16"
  rounded
  track_color="gray"
></walls-progress-bar-component>

<!-- Step-based with custom separator and label color -->
<walls-progress-bar-component
  value="1"
  max="3"
  label="Steps"
  show_percentage
  step_sign="of"
  step_sign_color="black"
  rounded
  track_color="gray"
  inline="label-percent-bar"
></walls-progress-bar-component>

<!-- Show a smidge of fill even at zero -->
<walls-progress-bar-component
  value="0"
  label="Getting started"
  show_min_progress
></walls-progress-bar-component>