feat: add clear button (#56)

ForkbombEu · Feb 20, 2024 · e96371d · e96371d
1 parent 4ec07fd
commit e96371d
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 3 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -16,6 +16,7 @@ export namespace Components {
     }
     interface DButton {
         "buttonType": string;
+        "clear"?: boolean;
         "color"?: Color;
         "disabled": boolean;
         "expand"?: boolean;
@@ -154,6 +155,7 @@ declare namespace LocalJSX {
     }
     interface DButton {
         "buttonType"?: string;
+        "clear"?: boolean;
         "color"?: Color;
         "disabled"?: boolean;
         "expand"?: boolean;

diff --git a/src/components/button/button.stories.ts b/src/components/button/button.stories.ts
@@ -4,7 +4,7 @@ import { ColorArgTypes } from '../types.js';
 
 const meta = {
   title: 'Design System/Atoms/Button',
-  render: (args, story) => `<d-button color=${args.color} disabled=${args.disabled} ${args.href ? `href=${args.href}` : ''} size=${args.size} ${args.expand ? 'expand' : ''}>
+  render: (args, story) => `<d-button color=${args.color} clear=${args.clear ? "true" : "false"} disabled=${args.disabled} ${args.href ? `href=${args.href}` : ''} size=${args.size} ${args.expand ? 'expand' : ''}>
   ${Boolean(story.parameters.slot) ? `<div slot="${story.parameters.slot.position}">${story.parameters.slot.icon}</div>` : ''}
   ${Boolean(story.parameters.slot?.position == 'icon-only') ? '' : 'BUTTON'}</d-button>`,
   argTypes: {
@@ -40,7 +40,21 @@ export const Accent: Story = {
     ...Default.args,
     color: 'accent',
   },
-};export const AccentDisabled: Story = {
+};
+export const clear: Story = {
+  args: {
+    ...Default.args,
+    clear: true,
+  },
+};
+export const clearAccent: Story = {
+  args: {
+    ...Default.args,
+    clear: true,
+    color: 'accent',
+  },
+};
+export const AccentDisabled: Story = {
   args: {
     ...Default.args,
     color: 'accent',
@@ -54,6 +68,13 @@ export const PrimaryDisabled: Story = {
     disabled: true,
   },
 };
+export const ClearDisabled: Story = {
+  args: {
+    ...Default.args,
+    clear: true,
+    disabled: true,
+  },
+};
 export const Expand: Story = {
   args: {
     ...Default.args,
@@ -94,6 +115,18 @@ export const IconOnly: Story = {
     },
   },
 };
+export const clearWithIconOnly: Story = {
+  args: {
+    ...Default.args,
+    clear: true,
+  },
+  parameters: {
+    slot: {
+      position: 'icon-only',
+      icon: '🚀',
+    },
+  },
+};
 
 
 export const Link: Story = {

diff --git a/src/components/button/d-button.scss b/src/components/button/d-button.scss
@@ -25,6 +25,9 @@
   &.primary {
     @apply opacity-60 text-opacity-60;
   }
+  &.clear {
+    @apply text-opacity-80;
+  }
 }
 :host(.accent) > a,
 :host(.accent) > button {
@@ -48,6 +51,25 @@
   }
 }
 
+:host(.button-clear) > a,
+:host(.button-clear) > button {
+  @apply bg-transparent;
+  * {
+    color: inherit;
+  }
+  &:active {
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.681) 0%, rgba(255, 255, 255, 0.799) 100%), var(--surface);
+    @apply backdrop-blur-lg
+  }
+  &.primary {
+    @apply text-primary;
+  }
+
+  &.accent {
+    @apply text-accent;
+  }
+}
+
 .button-inner {
   @apply flex flex-row flex-shrink-0 items-center justify-center w-full h-full z-10;
 }

diff --git a/src/components/button/d-button.tsx b/src/components/button/d-button.tsx
@@ -27,6 +27,7 @@ export class DButton implements ComponentInterface {
     }
   }
   @Prop({ reflect: true }) expand?: boolean;
+  @Prop({ reflect: true }) clear?: boolean;
   @Prop() href: string | undefined;
   @Prop({ reflect: true }) size?: 'small' | 'default' | 'large';
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
@@ -114,10 +115,11 @@ export class DButton implements ComponentInterface {
         class={{
           [color]: true,
           [buttonType]: true,
-          ['button-block']: expand,
+          'button-block': expand,
           [`${buttonType}-${finalSize}`]: finalSize !== undefined,
           'button-has-icon-only': hasIconOnly,
           'button-disabled': disabled,
+          'button-clear': this.clear,
         }}
       >
         <TagType {...attrs} class={`button-native ${color}`} part="native" disabled={disabled} onFocus={this.onFocus} onBlur={this.onBlur}>

diff --git a/src/components/button/readme.md b/src/components/button/readme.md
@@ -10,6 +10,7 @@
 | Property     | Attribute     | Description | Type                              | Default     |
 | ------------ | ------------- | ----------- | --------------------------------- | ----------- |
 | `buttonType` | `button-type` |             | `string`                          | `'button'`  |
+| `clear`      | `clear`       |             | `boolean`                         | `undefined` |
 | `color`      | `color`       |             | `string`                          | `'primary'` |
 | `disabled`   | `disabled`    |             | `boolean`                         | `false`     |
 | `expand`     | `expand`      |             | `boolean`                         | `undefined` |