From b3ca12d761c1c0a9fbc8e4124d7aecfea95478a1 Mon Sep 17 00:00:00 2001 From: Hiten Bhayani Date: Sat, 23 Sep 2023 21:38:28 +0530 Subject: [PATCH 1/3] feat: init --- demo/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/index.html b/demo/index.html index 7cbb9fc..087a3b8 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,7 +4,7 @@ Mark Segmented Button - + @@ -20,7 +20,7 @@ - + \ No newline at end of file From 3d976cc6290968250d9e29a6613f9c80256f9693 Mon Sep 17 00:00:00 2001 From: Hiten Bhayani Date: Sat, 23 Sep 2023 21:40:10 +0530 Subject: [PATCH 2/3] feat: format --- .circleci/config.yml | 7 +++--- demo/index.html | 40 ++++++++++++++---------------- demo/mark-segmented-button-demo.js | 8 +++--- src/mark-segmented-button.ts | 12 ++++----- 4 files changed, 32 insertions(+), 35 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index af4beaa..c98062a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -25,7 +25,6 @@ jobs: name: Deploy command: npx semantic-release - workflows: version: 2 release: @@ -39,6 +38,6 @@ workflows: - release: context: Mark filters: - branches: - only: - - main \ No newline at end of file + branches: + only: + - main diff --git a/demo/index.html b/demo/index.html index 087a3b8..2c031a9 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,26 +1,24 @@ - + + + + Mark Segmented Button + - - - Mark Segmented Button - + - + - + + - - - - - - - - \ No newline at end of file + + + + diff --git a/demo/mark-segmented-button-demo.js b/demo/mark-segmented-button-demo.js index f0c3077..d127444 100644 --- a/demo/mark-segmented-button-demo.js +++ b/demo/mark-segmented-button-demo.js @@ -1,5 +1,5 @@ -import { LitElement, html, css } from 'lit'; -import '../src/mark-segmented-button'; +import { LitElement, html, css } from "lit"; +import "../src/mark-segmented-button"; export class MarkSegmentedButtonDemo extends LitElement { static styles = [ @@ -7,11 +7,11 @@ export class MarkSegmentedButtonDemo extends LitElement { :host { display: block; } - ` + `, ]; render() { return html``; } } -customElements.define('mark-segmented-button-demo', MarkSegmentedButtonDemo); +customElements.define("mark-segmented-button-demo", MarkSegmentedButtonDemo); diff --git a/src/mark-segmented-button.ts b/src/mark-segmented-button.ts index e0f92c8..adfd0e4 100644 --- a/src/mark-segmented-button.ts +++ b/src/mark-segmented-button.ts @@ -1,14 +1,14 @@ -import { LitElement, html, css } from 'lit'; -import { customElement } from 'lit/decorators.js' +import { LitElement, html, css } from "lit"; +import { customElement } from "lit/decorators.js"; -@customElement('mark-segmented-button') +@customElement("mark-segmented-button") export class MarkSegmentedButton extends LitElement { static override styles = [ css` :host { display: block; } - ` + `, ]; override render() { @@ -18,6 +18,6 @@ export class MarkSegmentedButton extends LitElement { declare global { interface HTMLElementTagNameMap { - 'mark-segmented-button': MarkSegmentedButton; + "mark-segmented-button": MarkSegmentedButton; } -} \ No newline at end of file +} From 48752d2df7f0a1d081d98988db3335f10c769dd4 Mon Sep 17 00:00:00 2001 From: Hiten Bhayani Date: Wed, 27 Sep 2023 13:38:36 +0530 Subject: [PATCH 3/3] feat: Update README.md [ci skip] --- README.md | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ac96172..7e15988 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,30 @@ -# mark-segmented-button -Lit Web Component for Material Design Segmented Button +# `` [![Published on npm](https://img.shields.io/npm/v/@markai/mark-segmented-button.svg)](https://www.npmjs.com/package/@markai/mark-segmented-button) + +- [SegmentedButton](https://m3.material.io/components/segmented-buttons/overview) is a web component implementation of the [Material Design 3](https://m3.material.io/) using [Lit](https://lit.dev/) +- Segmented buttons help people select options, switch views, or sort elements + +### Behaviour + +- Segmented buttons can contain icons, label text, or both +- Two types: single-select and multi-select +- Use for simple choices between two to five items (for more items or complex choices, use chips) + +### Usage + +TODO + +### Properties + +| Name | Type | Description | +| --------- | --------------------- | ----------------------------------------------------------------------------------------------------------------- | +| `name` | `string` | Name of the form control. Submitted with the form as part of a name/value pair | +| `buttons` | [`Button[]`](#button) | List of buttons. contains all details. Atleast 2 buttons required otherwise this component work as simple Button. | + +#### Button + +| key | Type | Description | +| -------------- | --------- | ------------------------------------- | +| `name` | `string` | Button name | +| `label` | `string` | Button label | +| `icon` | `string` | Button icon | +| `trailingIcon` | `boolean` | Whether icon is trailing icon or not. |