andreasbm / weightless Goto Github PK

High-quality web components with a small footprint

License: MIT License

JavaScript 0.65% HTML 0.63% CSS 23.16% TypeScript 75.55%

web-components custom-elements lit-element lit-html ui-library ui elements components lit-html-element

weightless's Introduction

High-quality Web Components with a small footprint
_{Thank you so much for showing interest in this project! If you want to help us feed our Octocat you should definitely become a stargazer. These web components are built to be used. They are lightweight, have a simple API and are easy to extend and compose. Go here to see a demo https://weightless.dev/elements.}

High-quality: Centered around the best practices.
Testable: Hundreds of test-cases makes sure the library is stable.
Easy-to-use: But with a simple and understandable API.
Accessible: All components has been build with accessibility in mind.
Single-responsibility: Each component does one thing really well. This makes them really easy to extend and compose.

➤ Demo

Go here to try the demo.

➤ Installation

$ npm i weightless

If you want to get started super quickly you can use the CLI.

$ npm init web-config new my-project --lit

If you prefer to use the umd bundle you can import https://unpkg.com/weightless/umd/weightless.min.js. Keep in mind that this imports all elements, so it is recommended that you only use it for test purposes.

<script src="https://unpkg.com/weightless/umd/weightless.min.js"></script>

➤ Elements

Name	Tag	Description	Documentation	Demo
Backdrop	`wl-backdrop`	Dark layer to use behind overlayed elements.	Documentation	Demo
Banner	`wl-banner`	Display a non-interruptive message and related optional actions.	Documentation	Demo
Button	`wl-button`	Allow users to take actions, and make choices, with a single tap.	Documentation	Demo
Card	`wl-card`	Group related content and action.	Documentation	Demo
Checkbox	`wl-checkbox`	Turn an option on or off.	Documentation	Demo
Dialog	`wl-dialog`	Highly interruptive messages.	Documentation	Demo
Divider	`wl-divider`	Thin line that groups content in lists and layouts.	Documentation	Demo
Expansion	`wl-expansion`	Provide an expandable details-summary view.	Documentation	Demo
Icon	`wl-icon`	Symbols for common actions and items.	Documentation	Demo
Label	`wl-label`	Make form elements more accessible.	Documentation	Demo
List Item	`wl-list-item`	Display an item in a list.	Documentation	Demo
Nav	`wl-nav`	Provide access to destinations in your app.	Documentation	Demo
Popover	`wl-popover`	Contextual anchored elements	Documentation	Demo
Popover Card	`wl-popover-card`	Give popovers a contextual flair.	Documentation	Demo
Progress Bar	`wl-progress-bar`	Fills a bar from 0% to 100%.	Documentation	Demo
Progress Spinner	`wl-progress-spinner`	Fills a circle from 0% to 100%.	Documentation	Demo
Radio	`wl-radio`	Select one option from a set.	Documentation	Demo
Ripple	`wl-ripple`	Indicate touch actions.	Documentation	Demo
Select	`wl-select`	Select one or more values from a set of options.	Documentation	Demo
Slider	`wl-slider`	Make selections from a range of values.	Documentation	Demo
Snackbar	`wl-snackbar`	Provide brief messages at the bottom of the screen.	Documentation	Demo
Switch	`wl-switch`	Turn an option on or off.	Documentation	Demo
Tab	`wl-tab`	Organize navigation between groups of content.	Documentation	Demo
Tab Group	`wl-tab-group`	Organize navigation between groups of content.	Documentation	Demo
Text	`wl-text`	Group text into paragraphs.	Documentation	Demo
Textarea	`wl-textarea`	Multiline text fields.	Documentation	Demo
Textfield	`wl-textfield`	Singleline text fields.	Documentation	Demo
Title	`wl-title`	Indicate the start of a new section.	Documentation	Demo
Tooltip	`wl-tooltip`	Informative context related text.	Documentation	Demo

➤ Roadmap

There's lots of exciting things on the roadmap. Until v1.0.0 you can expect the API to be fairly stable but refactoring might still happen and break the backwards compatibility. You are very welcome to use the library, create pull requests or add issues.

➤ Contributing guide

You are more than welcome to contribute to this repository! Below are some instructions on how to setup the project for development.

Clone this repository by running git clone https://github.com/andreasbm/weightless.git.
Run npm i to install all dependencies.
Spin up the development server with npm run s. The browser should automatically be opened at the correct url. If not, you can open your browser and go to http://localhost:1350.
Run tests with npm run test.
Lint the files with npm run lint.
Compile the documentation by running npm run docs.

The elements are written in Typescript and the stylesheets are written in SASS. All of the web components uses lit-element.

If you want to know more about how you can help you should definitely check out the CONTRIBUTING.md file. All contributors will be added to the contributors section below.

➤ Contributors


Andreas Mehlsen	You?

➤ License

Licensed under MIT.

weightless's People

Contributors

Stargazers

Watchers

weightless's Issues

Make sure overlay behavior gives focus back to the correct element that was active before opening it

Add wl-switch

Copy styles folder to the build

Add documentation and tests for the dialog-element

form behavior invalid regex

Using 0.0.34 in Chromium 73.
In my component:

import 'weightless/textfield';
// ...
<wl-textfield></wl-textfield>

It errors on the first keystroke:

Pattern attribute value part => {                  form-element-behavior.js? [sm]:25
  if (value === undefined && part instanceof AttributePart) {
    if (value !== part.value) {
      const name = part.committer.name;
      part.committer.element.removeAttribute(name);
    }
  } else {
    part.setValue(value);
  }
} is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /part => {
  if (value === undefined && part instanceof AttributePart) {
    if (value !== part.value) {
      const name = part.committer.name;
      part.committer.element.removeAttribute(name);
    }
  } else {
    part.setValue(value);
  }
}/: Incomplete quantifier
get valid	@	form-element-behavior.js? [sm]:25
refreshAttributes	@	input-behavior.js? [sm]:89
onInput	@	input-behavior.js? [sm]:77
cb	@	event.js? [sm]:6

Add documentation and tests for the title-element

Make sure textarea-element have the correct height when initially being hidden in the DOM

Add slider element

Add indeterminate mode to wl-checkbox

Add FAQ to the README

Refactor library to use "wl-" prefix

Add documentation and tests for the radio-element

Build landing page

On iOS blockScrolling does not properly block scrolling for overlayed elements

Add wl-list and wl-list-item

wl-checkbox artifact in Firefox

Add demo page for wl-nav

Change branding to weightless

Add documentation and tests for the select-element

Should all element selectors be renamed with "wl-" prefix?

Conclusion

Tag: wl-button
Class: WeightlessButton
File: wl-button.ts

Make wl-progress-bar work in Safari

Add documentation and tests for the popover-element

Add service worker to landingpage

Add web manifest to landingpage

Ensure all elements are compatible with most common browsers

Add documentation and tests for the tooltip-element

Add documentation and tests for the ripple-element

Should weightless.dev/demo be changed to weightless.dev/elements?

Stepper component request

Consider implementing a stepper:
https://material.io/archive/guidelines/components/steppers.html

It's seemingly archived from the Material Design guidelines, but nevertheless a useful component which is provided by other frameworks such as React and Angular.

wl-expansion is opened to begin with on iOS Safari

Should all css variables be refactored to use a wl prefix?

Make slotted CSS selector compatible with the Shady CSS polyfill

Create wl-expansion

Relevant links
https://material.angular.io/components/expansion/overview

Add wl-tab element

Inspiration: https://material.io/design/components/tabs.html

Ensure that all elements follow the same styling standard

We want the following styles for all elements:

color (eg. --button-color) - Default color
background (eg. --button-bg) - Default color
disabled color (eg. --button-color-disabled) - Grey color
disabled background (eg. --button-bg-disabled) - Grey color
hover/focus color (eg. --button-color-hover) - Lighter color
hover/focus background (eg. --button-bg-hover) - Lighter color

Only applies if the element have some sort of active style (eg. checked, active, selected)

active color (eg --button-color-active) - Default color or some kind of highlight.
active background (eg. --button-color-active) - Default background or some kind of highlight.
active+hover/focus color (eg --button-color-active-hover) - Darker color
active+hover/focus background (eg. --button-bg-active-hover) - Darker color
opacity when disabled (eg. --button-opacity-disabled) - Opacity when the element is disabled. This makes sense instead of having all variants of the colors as disabled.

Create wl-list and wl-list-item

Relevant links
https://material.io/design/components/lists.html

Website not displayed in Firefox 66 - Ubuntu

When opening the webiste (https://weightless.dev/) I get following error in the console:
SyntaxError: dynamic module import is not implemented main-9df4cc45.js:1:10916. A blank webpage is displayed.

Browser: Firefox
Version: 66.0 (64-bit)
OS: Ubuntu 18 LTS

Create wl-snackbar based on the wl-banner

Relevant links
https://material.io/design/components/snackbars.html#snackbar
https://material.io/design/components/banners.html#usage

Add documentation and tests for the progress-bar-element

Implement the new auto documentation

wl-expansion text is not selectable

Hi,

first of all thank you for the really great library!

I have a small issue I don't get solved. The text inside the wl-expansion box is not selectable (these blue selection background when hover-clicking over the text).

Is this intended? Or is there a way to fix this?

Thanks,
Robert

Split component request

Hi Andreas,

I use the following webcomponent in my project quiet havely:
https://www.webcomponents.org/element/split-me

Unfortunatelly the component has a lot of dependecyies and is not following the weightless approach.

Please close this request of you are not interested in such a component.
But I think it would enhance the functionality of this library.