@repobit/dex-system-design 0.25.2 → 0.25.3

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.25.3](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.2...@repobit/dex-system-design@0.25.3) (2026-10-01)
+
+### Bug Fixes
+
+* **DEX-1014:** button component - new variant
+
+
 ## [0.25.2](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.25.1...@repobit/dex-system-design@0.25.2) (2026-10-01)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.25.2",
+  "version": "0.25.3",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -76,8 +76,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.6.39",
-    "@repobit/dex-store-elements": "2.1.9",
+    "@repobit/dex-store": "1.6.40",
+    "@repobit/dex-store-elements": "2.1.10",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -94,5 +94,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "14ac669a586110a33a6f8d470e6d9ce8c11a4bd7"
+  "gitHead": "bf65491b1abdfd2228891d548bcf46bd59643551"
 }

package/src/components/button/button.css.js

@@ -27,6 +27,11 @@ export default css`
     --border-button-background-primary-outline-hover: var(--color-blue-500);
     --button-background-primary-outline-focus: var(--color-blue-500);
     --bd-accesibility-focus: var(--color-blue-500);
+
+    --button-arrow-size: 1.1em;
+    --button-arrow-shift: 0.65em;
+    --button-arrow-inset: 0.65em;
+    --button-arrow-offset: -0.4em;
   }
 
   /* ============================================
@@ -103,6 +108,10 @@ export default css`
     box-sizing: border-box;
   }
 
+  .button__label {
+    display: inline-block;
+  }
+
   .button--primary {
     background-color: var(--button-background-primary);
     color: var(--color-neutral-0);
@@ -141,6 +150,62 @@ export default css`
   .button--danger:active {
     background-color: var(--button-background-danger-focus);
   }
+
+  /* ============================================
+     HOVER CU SĂGEATĂ (implicit pentru kind="danger")
+     Lățimea butonului rămâne fixă: textul se translatează
+     spre stânga, iar săgeata (poziționată absolut) apare în dreapta.
+     ============================================ */
+
+  .button--with-arrow {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .button--with-arrow .button__label {
+    transition: transform var(--transition-duration-normal) var(--transition-easing-smooth);
+  }
+
+  .button--with-arrow .button__arrow {
+    position: absolute;
+    top: 50%;
+    right: var(--button-arrow-inset);
+    width: var(--button-arrow-size);
+    height: var(--button-arrow-size);
+    display: inline-flex;
+    opacity: 0;
+    transform: translate(var(--button-arrow-offset), -50%);
+    transition: opacity var(--transition-duration-normal) var(--transition-easing-smooth),
+      transform var(--transition-duration-normal) var(--transition-easing-smooth);
+    pointer-events: none;
+  }
+
+  .button--with-arrow .button__arrow svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .button--with-arrow:hover .button__label,
+  .button--with-arrow:focus-visible .button__label {
+    transform: translateX(calc(var(--button-arrow-shift) * -1));
+  }
+
+  .button--with-arrow:hover .button__arrow,
+  .button--with-arrow:focus-visible .button__arrow {
+    opacity: 1;
+    transform: translate(0, -50%);
+  }
+
+  /* Pe touch nu există hover real — nu lăsăm săgeata „blocată” după tap */
+  @media (hover: none) {
+    .button--with-arrow:hover .button__label {
+      transform: none;
+    }
+    .button--with-arrow:hover .button__arrow {
+      opacity: 0;
+    }
+  }
    
   .button--outline {
     background-color: transparent;
@@ -208,41 +273,46 @@ export default css`
     font-weight: var(--typography-fontWeight-semibold);
   }
 
-  .button > ::slotted(*) {
+  /* slot-ul nu mai e copil direct al .button (e în .button__label) */
+  .button ::slotted(*) {
     display: inline-block;
     width: 100%;
     text-align: center;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .button, .bd-contact-btn {
+    .button,
+    .bd-contact-btn,
+    .button__label,
+    .button__arrow {
       transition: none !important;
     }
   }
-    .button--white {
-  background-color: var(--color-neutral-0);
-  color: var(--color-blue-500);
-}
 
-.button--white:hover {
-  background-color: var(--color-blue-50);
-}
+  .button--white {
+    background-color: var(--color-neutral-0);
+    color: var(--color-blue-500);
+  }
 
-.button--white:active {
-  background-color: var(--color-blue-100);
-}
+  .button--white:hover {
+    background-color: var(--color-blue-50);
+  }
+
+  .button--white:active {
+    background-color: var(--color-blue-100);
+  }
 
-.button--outline-white {
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1.5px #ffffff8c;
-  color: var(--color-neutral-0);
-}
+  .button--outline-white {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1.5px #ffffff8c;
+    color: var(--color-neutral-0);
+  }
 
-.button--outline-white:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
+  .button--outline-white:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
 
-.button--outline-white:active {
-  background-color: rgba(255, 255, 255, 0.2);
-}
+  .button--outline-white:active {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
 `;

package/src/components/button/button.js

@@ -2,6 +2,24 @@ import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import buttonsCSS from "./button.css.js";
 
+/**
+ * Săgeata afișată pe hover / focus pentru butoanele cu kind="danger".
+ * Folosește currentColor, deci preia culoarea textului butonului.
+ */
+const arrowIcon = html`
+  <span class="button__arrow" aria-hidden="true">
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.5 8h11M9 3.5 13.5 8 9 12.5"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </span>
+`;
+
 class Button extends LitElement {
   static properties = {
     label      : { type: String },
@@ -13,7 +31,8 @@ class Button extends LitElement {
     strong     : { type: Boolean },
     fontSize   : { type: String, attribute: "font-size" },
     fontWeight : { type: String, attribute: "font-weight" },
-    align      : { type: String }
+    align      : { type: String },
+    noArrow    : { type: Boolean, attribute: "no-arrow" }
   };
 
   constructor() {
@@ -24,6 +43,7 @@ class Button extends LitElement {
     this.fontSize = "";
     this.fontWeight = "";
     this.align = "left";
+    this.noArrow = false;
   }
 
   _onFocusin(e) {
@@ -87,20 +107,30 @@ class Button extends LitElement {
     return this.strong ? "button--bold" : "";
   }
 
+  /** Săgeata pe hover e activă implicit pentru danger; se poate dezactiva cu no-arrow. */
+  get hasArrow() {
+    return this.kind === "danger" && !this.noArrow;
+  }
+
+  get arrowClass() {
+    return this.hasArrow ? "button--with-arrow" : "";
+  }
+
   render() {
     return html`
       <button
         @click=${this._handleClick}
         @focusin=${this._onFocusin}
         @focusout=${this._onFocusout}
-        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass}"
+        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass} ${this.arrowClass}"
         aria-label="${this.label}"
         style="
           ${this.fontSize ? `font-size: ${this.fontSize};` : ""}
           ${this.fontWeight ? `font-weight: ${this.fontWeight};` : ""}
         "
       >
-        <slot></slot>
+        <span class="button__label"><slot></slot></span>
+        ${this.hasArrow ? arrowIcon : ""}
       </button>
     `;
   }
@@ -119,7 +149,8 @@ class ButtonLink extends LitElement {
     fontWeight : { type: String, attribute: "font-weight" },
     buyLink    : { type: Boolean },
     shadow     : { type: Boolean, reflect: true },
-    align      : { type: String }
+    align      : { type: String },
+    noArrow    : { type: Boolean, attribute: "no-arrow" }
   };
 
   constructor() {
@@ -135,6 +166,7 @@ class ButtonLink extends LitElement {
     this.buyLink = false;
     this.shadow = true;
     this.align = "left";
+    this.noArrow = false;
   }
 
   _onFocusin(e) {
@@ -194,11 +226,19 @@ class ButtonLink extends LitElement {
     return this.strong ? "button--bold" : "";
   }
 
+  get hasArrow() {
+    return this.kind === "danger" && !this.noArrow;
+  }
+
+  get arrowClass() {
+    return this.hasArrow ? "button--with-arrow" : "";
+  }
+
   render() {
     return html`
       <a
         href="${this.href}"
-        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass}"
+        class="button ${this.kindClass} ${this.sizeClass} ${this.fullWidthClass} ${this.strongClass} ${this.arrowClass}"
         aria-label="${this.label}"
         @click=${this._handleClick}
         @focusin=${this._onFocusin}
@@ -210,7 +250,8 @@ class ButtonLink extends LitElement {
         ?data-store-render="${this.buyLink}"
         ?data-store-buy-link="${this.buyLink}"
       >
-        <slot>${this.label}</slot>
+        <span class="button__label"><slot>${this.label}</slot></span>
+        ${this.hasArrow ? arrowIcon : ""}
       </a>
     `;
   }

package/src/components/button/button.stories.js

@@ -17,6 +17,7 @@ Three button components are available:
 ### Usage
 \`\`\`html
 <bd-button kind="primary" size="md">Click me</bd-button>
+<bd-button kind="danger" size="md">Activez votre protection</bd-button>
 <bd-button-link kind="danger" size="lg" href="/buy">Buy now</bd-button-link>
 <bd-contact-button label="Contact us" href="/contact"></bd-contact-button>
 \`\`\`
@@ -28,7 +29,22 @@ Three button components are available:
 | \`primary-outline\` | \`button--primary--outline\` |
 | \`outline\` | \`button--outline\` |
 | \`secondary\` | \`button--secondary\` |
-| \`danger\` | \`button--danger\` |
+| \`danger\` | \`button--danger\` + \`button--with-arrow\` |
+| \`white\` | \`button--white\` |
+| \`outline-white\` | \`button--outline-white\` |
+
+### Danger hover arrow
+Every \`kind="danger"\` button (both \`bd-button\` and \`bd-button-link\`) has an arrow hover effect by default:
+on hover (and on keyboard \`:focus-visible\`) the label slides to the left and an arrow fades in on the right.
+The button width does not change.
+
+To disable it on a specific button, add the \`no-arrow\` attribute:
+\`\`\`html
+<bd-button kind="danger" no-arrow>No arrow</bd-button>
+\`\`\`
+
+The effect can be tuned from outside via CSS custom properties:
+\`--button-arrow-size\`, \`--button-arrow-shift\`, \`--button-arrow-inset\`, \`--button-arrow-offset\`.
 
 ### Size Values
 | Size | Class |
@@ -58,8 +74,8 @@ Three button components are available:
     },
     kind: {
       control    : { type: 'select' },
-      options    : ['primary', 'primary-outline', 'outline', 'secondary', 'danger'],
-      description: 'Visual style variant of the button',
+      options    : ['primary', 'primary-outline', 'outline', 'secondary', 'danger', 'white', 'outline-white'],
+      description: 'Visual style variant of the button. `danger` includes the hover arrow by default.',
       table      : { type: { summary: 'string' }, defaultValue: { summary: 'primary' }, category: 'Appearance' }
     },
     size: {
@@ -68,6 +84,11 @@ Three button components are available:
       description: 'Size of the button',
       table      : { type: { summary: "'sm' | 'md' | 'lg'" }, defaultValue: { summary: 'md' }, category: 'Appearance' }
     },
+    noArrow: {
+      control    : 'boolean',
+      description: '(kind="danger" only) Disables the hover arrow. Attribute: `no-arrow`',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Appearance' }
+    },
     fullWidth: {
       control    : 'boolean',
       description: 'When true, button stretches to full container width',
@@ -116,6 +137,7 @@ const defaultArgs = {
   label     : 'Buy now',
   kind      : 'primary',
   size      : 'md',
+  noArrow   : false,
   fullWidth : false,
   strong    : false,
   align     : 'left',
@@ -142,7 +164,40 @@ export const ButtonAllKinds = {
       <bd-button kind="danger" size="md">Danger</bd-button>
     </div>
   `,
-  parameters: { docs: { description: { story: 'All five `kind` variants side by side.' } } }
+  parameters: { docs: { description: { story: 'All five `kind` variants side by side. Hover the danger button to see the arrow.' } } }
+};
+
+export const ButtonDangerArrow = {
+  name  : 'Button — Danger (Hover Arrow)',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:16px; align-items:flex-start;">
+      <p style="font-size:14px; margin:0;">Hover (or Tab to focus) any button to see the arrow.</p>
+      <bd-button kind="danger" size="md" strong>Activez votre protection</bd-button>
+      <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
+        <bd-button kind="danger" size="sm" strong>Small</bd-button>
+        <bd-button kind="danger" size="md" strong>Medium</bd-button>
+        <bd-button kind="danger" size="lg" strong>Large</bd-button>
+      </div>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default behaviour for every `kind="danger"` button: on hover / `:focus-visible` the label slides left and an arrow appears on the right, without changing the button width.'
+      }
+    }
+  }
+};
+
+export const ButtonDangerNoArrow = {
+  name  : 'Button — Danger without Arrow',
+  render: () => html`
+    <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
+      <bd-button kind="danger" size="md" strong>With arrow (default)</bd-button>
+      <bd-button kind="danger" size="md" strong no-arrow>Without arrow</bd-button>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Use the `no-arrow` attribute to opt out of the hover arrow on a specific danger button.' } } }
 };
 
 export const ButtonAllSizes = {
@@ -160,11 +215,12 @@ export const ButtonAllSizes = {
 export const ButtonFullWidth = {
   name  : 'Button — Full Width',
   render: () => html`
-    <div style="width:400px;">
+    <div style="width:400px; display:flex; flex-direction:column; gap:12px;">
       <bd-button kind="primary" size="md" .fullWidth="${true}">Full Width Button</bd-button>
+      <bd-button kind="danger" size="md" strong .fullWidth="${true}">Full Width Danger</bd-button>
     </div>
   `,
-  parameters: { docs: { description: { story: '`fullWidth` set to true — applies `max--width` class.' } } }
+  parameters: { docs: { description: { story: '`fullWidth` set to true — applies `max--width` class. The danger arrow also works at full width.' } } }
 };
 
 export const ButtonStrong = {
@@ -223,7 +279,7 @@ export const ButtonCustomTypography = {
       Buy now
     </bd-button>
   `,
-  parameters: { docs: { description: { story: 'Custom `font-size` and `font-weight` applied via inline styles.' } } }
+  parameters: { docs: { description: { story: 'Custom `font-size` and `font-weight` applied via inline styles. The arrow scales with the font size.' } } }
 };
 
 export const ButtonKeyboard = {
@@ -268,7 +324,18 @@ export const ButtonLinkAllSizes = {
       <bd-button-link kind="danger" size="lg" href="#">Large</bd-button-link>
     </div>
   `,
-  parameters: { docs: { description: { story: 'All three sizes for `bd-button-link`.' } } }
+  parameters: { docs: { description: { story: 'All three sizes for `bd-button-link` (danger, with hover arrow).' } } }
+};
+
+export const ButtonLinkDangerArrow = {
+  name  : 'ButtonLink — Danger (Hover Arrow)',
+  render: () => html`
+    <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
+      <bd-button-link kind="danger" size="md" href="#" strong>Activez votre protection</bd-button-link>
+      <bd-button-link kind="danger" size="md" href="#" strong no-arrow>Without arrow</bd-button-link>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'The hover arrow is also on by default for `bd-button-link` with `kind="danger"`; `no-arrow` disables it.' } } }
 };
 
 export const ButtonLinkBuyLink = {
@@ -397,15 +464,17 @@ export const Playground = {
         size="${args.size}"
         label="${args.label}"
         align="${args.align}"
-        ?full-width="${args.fullWidth}"
+        ?fullwidth="${args.fullWidth}"
         ?strong="${args.strong}"
+        ?no-arrow="${args.noArrow}"
         font-size="${args.fontSize}"
         font-weight="${args.fontWeight}"
       >${args.label}</bd-button>
     </div>
   `,
-  parameters: { docs: { description: { story: 'Interactive playground for `bd-button`. Use Controls to adjust all props including alignment.' } } }
+  parameters: { docs: { description: { story: 'Interactive playground for `bd-button`. Use Controls to adjust all props including alignment and the danger hover arrow.' } } }
 };
+
 // ─── White / Outline-White (on dark background) ───────────────────────────
 
 export const ButtonWhiteOnDark = {