feat: add circle variant to close button

Author: zedix

src/components/close-button/close-button.component.ts

@@ -9,6 +9,9 @@ export default class CloseButton extends LitElement {
 
   private readonly _internals: ElementInternals;
 
+  @property({ reflect: true })
+  variant: 'square' | 'circle' = 'square';
+
   /**
    * Whether or not the button is disabled.
    */
@@ -43,14 +46,7 @@ export default class CloseButton extends LitElement {
         tabindex=${this.disabled ? '-1' : '0'}
         @click="${this.handleClick}"
       >
-        <svg
-          version="1.1"
-          viewBox="0 0 16 16"
-          width="16"
-          height="16"
-          fill="currentColor"
-          aria-hidden="true"
-        >
+        <svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor" aria-hidden="true">
           <path
             d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
           ></path>

src/components/close-button/close-button.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './close-button';
+
+type Story = StoryObj;
+
+const meta: Meta = {
+  title: 'Core/zx-close-button',
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['square', 'circle'],
+    },
+  },
+  args: {
+    variant: 'square',
+  },
+};
+
+export const Sandbox: Story = {
+  render: args => html`<zx-close-button variant="${args.variant}"></zx-close-button>`,
+};
+
+export const Showcase = () => `
+  <div class="grid gap-8">
+    <zx-close-button variant="square"></zx-close-button>
+    <zx-close-button variant="circle"></zx-close-button>
+  </div>
+`;
+
+export default meta;

src/components/close-button/close-button.styles.ts

@@ -2,17 +2,15 @@ import { css } from 'lit';
 
 export default css`
   :host {
+    --button-size: 32px;
+    --button-radius: 4px;
+    --button-color: #374151; /* gray.700 */
+    --button-bg: transparent;
+    --button-bg-hover: #f3f4f6; /* gray.100 */
+
     display: inline-flex;
     align-items: center;
     justify-items: center;
-    /*
-    https://www.benjystanton.co.uk/blog/accessible-close-buttons/
-    Accessibility: the overall size of should be at least 44 pixels in height and width
-    */
-    padding: 8px;
-
-    --border-radius: 4px;
-    --bg-hover: #f5f5f5;
   }
 
   :host([disabled]) button {
@@ -24,19 +22,36 @@ export default css`
     all: unset;
     display: grid;
     place-items: center;
-    width: 32px;
-    height: 32px;
     margin: auto;
-    border-radius: var(--border-radius);
+    width: var(--button-size);
+    height: var(--button-size);
+    background-color: var(--button-bg);
+    border-radius: var(--button-radius);
+    color: var(--button-color);
     cursor: pointer;
   }
 
   button:hover {
-    background: var(--bg-hover);
+    background-color: var(--button-bg-hover);
   }
 
   button:focus-visible {
     outline: 2px solid #111827;
     outline-offset: -2px;
   }
+
+  :host([variant='square']) {
+    /*
+    https://www.benjystanton.co.uk/blog/accessible-close-buttons/
+    Accessibility: the overall size of should be at least 44 pixels in height and width
+    */
+    padding: 8px;
+  }
+
+  :host([variant='circle']) {
+    --button-radius: 9999px;
+    --button-size: 44px;
+    --button-bg: #f3f4f6; /* gray.100 */
+    --button-bg-hover: #e5e7eb; /* gray.200 */
+  }
 `;