Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: init #1

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: init #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b3ca12d
feat: init
bhi10 Sep 23, 2023
3d976cc
feat: format
bhi10 Sep 23, 2023
48752d2
feat: Update README.md [ci skip]
bhi10 Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ jobs:
name: Deploy
command: npx semantic-release


workflows:
version: 2
release:
Expand All @@ -39,6 +38,6 @@ workflows:
- release:
context: Mark
filters:
branches:
only:
- main
branches:
only:
- main
32 changes: 30 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,30 @@
# mark-segmented-button
Lit Web Component for Material Design Segmented Button
# `<mark-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. |
40 changes: 19 additions & 21 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mark Segmented Button</title>
<script type="module" src="./mark-segmented-button-demo.js"></script>

<head>
<meta charset="utf-8">
<title>Mark Segmented Button</title>
<script type="module" src="./mark-collapse-demo.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 24px;
}
</style>

<style>
body {
margin: 24px;
}
</style>
<script>
(window.process = window.process || {}).env = {};
</script>
</head>

<script>
(window.process = window.process || {}).env = {};
</script>
</head>

<body>
<mark-segmented-button></mark-segmented-button>
</body>

</html>
<body>
<mark-segmented-button-demo></mark-segmented-button-demo>
</body>
</html>
8 changes: 4 additions & 4 deletions demo/mark-segmented-button-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
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 = [
css`
:host {
display: block;
}
`
`,
];

render() {
return html`<mark-segmented-button></mark-segmented-button>`;
}
}
customElements.define('mark-segmented-button-demo', MarkSegmentedButtonDemo);
customElements.define("mark-segmented-button-demo", MarkSegmentedButtonDemo);
12 changes: 6 additions & 6 deletions src/mark-segmented-button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -18,6 +18,6 @@ export class MarkSegmentedButton extends LitElement {

declare global {
interface HTMLElementTagNameMap {
'mark-segmented-button': MarkSegmentedButton;
"mark-segmented-button": MarkSegmentedButton;
}
}
}