TASK: #105401 StarWebComponents 开发-button

src/components/button/button-styles.ts

@@ -20,4 +20,92 @@ export const sharedStyles: CSSResult = css`
     min-height: var(--li-base-height);
     line-height: var(--li-base-height);
   }
+
+  [size='small'] {
+    font-size: 12px;
+    min-height: 24px;
+    min-width: 54px;
+    padding-bottom: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 0px;
+  }
+
+  [size='medium'] {
+    font-size: 14px;
+    min-height: 32px;
+    min-width: 72px;
+    padding-bottom: 0px;
+    padding-left: 14px;
+    padding-right: 14px;
+    padding-top: 0px;
+  }
+
+  [size='large'] {
+    font-size: 16px;
+    min-height: 40px;
+    min-width: 90px;
+    padding-bottom: 0px;
+    padding-left: 18px;
+    padding-right: 18px;
+    padding-top: 0px;
+  }
+
+  [size='extralarge'] {
+    font-size: 18px;
+    min-height: 48px;
+    min-width: 100px;
+    padding-bottom: 0px;
+    padding-left: 22px;
+    padding-right: 22px;
+    padding-top: 0px;
+  }
+
+  [variant='account']{
+    background-color: #0469e3;
+    color: rgb(255, 255, 255);
+  }
+
+  [variant='primary']{
+    background-color: rgb(235, 235, 235);
+    text-decoration: rgb(235, 235, 235);
+    text-decoration-color: rgb(235, 235, 235);
+  }
+
+  [variant='secondary']{
+    background-color: #3f3f3f
+  }
+
+  [variant='negative']{
+    color: #fff;
+    border: 1px solid #f56c6c;
+    background-color: #f56c6c;
+  }
+
+  [variant='white']{
+    background-color: #ffffff
+  }
+
+  [variant='black']{
+    background-color: #000000
+  }
+
+  [treatment='fill'][variant="primary"]{
+    box-shadow: none;
+    background-color: rgb(255, 255, 255);
+    color: rgb(235, 235, 235);
+  }
+
+  [treatment='outline'][variant="primary"]{
+    background-color: rgb(84, 84, 84);
+    color: rgb(235, 235, 235);
+  }
+
+  [disabled='true']{
+    cursor: default;
+    background-color: rgb(63, 63, 63);
+    color: #909090;
+    text-decoration: rgb(235, 235, 235);
+    text-decoration-color: rgb(235, 235, 235);
+  }
 `

src/components/button/button.ts

@@ -5,26 +5,57 @@ import {
   HTMLTemplateResult,
   nothing,
 } from 'lit'
-import {customElement, property} from 'lit/decorators.js'
-import {sharedStyles} from './button-styles'
+import { customElement, property } from 'lit/decorators.js'
+import { sharedStyles } from './button-styles'
 
 export enum ButtonType {
   BASE = 'base',
 }
 
+export enum ButtonSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+  EXTRALARGE = 'extralarge',
+}
+
+export enum ButtonVariants {
+  ACCENT = 'accent',
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  NEGATIVE = 'negative',
+  WHITE = 'white',
+  BLACK = 'black',
+}
+
+export type ButtonState = 'false' | 'true';
+
 @customElement('star-button')
 export class StarButton extends LitElement {
   public static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
-
-  @property({type: ButtonType}) type = ''
-  @property({type: String}) label = ''
+  @property({ type: ButtonType }) type = ''
+  @property({ type: ButtonVariants }) variant = ''
+  @property({ type: ButtonSize }) size = ''
+  @property({ type: String }) label = ''
+  @property({ type: String }) disabled = ''
+  @property({ type: String }) treatment = ''
 
   getBaseButton(): HTMLTemplateResult {
-    return html`
-      <button>${this.label}</button>
+    if (this.hasAttribute("disabled")) {
+      return html`
+      <button treatment=${this.treatment} variant=${this.variant} size=${this.size} disabled=${this.disabled}>
+        <slot name="icon"></slot>${this.label}
+      </button>
     `
+    } else {
+      return html`
+      <button treatment=${this.treatment} variant=${this.variant} size=${this.size}>
+        <slot name="icon"></slot>${this.label}
+      </button>
+    `
+    }
   }
 
   render() {