diff --git a/packages/bee-q/.storybook/manager.ts b/packages/bee-q/.storybook/manager.ts index 71644c614..a7f5e5f0d 100644 --- a/packages/bee-q/.storybook/manager.ts +++ b/packages/bee-q/.storybook/manager.ts @@ -4,29 +4,29 @@ import { create } from '@storybook/theming'; const theme = create({ base: 'light', - colorPrimary: '#009bb4', - colorSecondary: '#4F46E5', + colorPrimary: '#f0f1f2', + colorSecondary: '#4f46e5', // BRAND brandTarget: '_self', brandTitle: 'Bee-Q Design System', - brandImage: './assets/bee-q_logo.svg', + brandImage: './assets/beeq-logo.svg', // UI - appBg: '#F9FAFB', - appContentBg: '#FFFFFF', + appBg: '#f0f1f2', + appContentBg: '#fff', // Typography - fontBase: '"Inter", sans-serif', + fontBase: '"Outfit", sans-serif', // Text colors - textColor: '#1F2937', - textInverseColor: '#ffffff', + textColor: '#2b2e33', + textInverseColor: '#fff', // Toolbar default and active colors - barTextColor: '#1F2937', + barTextColor: '#2b2e33', barSelectedColor: '#6366F1', - barBg: '#F9FAFB', + barBg: '#f0f1f2', }); addons.setConfig({ diff --git a/packages/bee-q/src/components/button/scss/bq-button.scss b/packages/bee-q/src/components/button/scss/bq-button.scss index dfd316535..11c58f18a 100644 --- a/packages/bee-q/src/components/button/scss/bq-button.scss +++ b/packages/bee-q/src/components/button/scss/bq-button.scss @@ -151,5 +151,6 @@ /* -------------------------------------------------------------------------- */ .bq-button__loader { - @apply absolute animate-spin; + @include animation-spin; + @apply absolute; } diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss index 3d4e51820..d571ab759 100644 --- a/packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss +++ b/packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss @@ -24,7 +24,7 @@ --bq-dialog--background: theme('colors.bg.primary'); --bq-dialog--background-backdrop: theme('colors.grey.600'); - --bq-dialog--box-shadow: theme('boxShadow.m'); + --bq-dialog--box-shadow: theme('boxShadow.l'); --bq-dialog--border-color: theme('colors.transparent'); --bq-dialog--border-radius: theme('borderRadius.m'); diff --git a/packages/bee-q/src/components/notification/scss/bq-notification.scss b/packages/bee-q/src/components/notification/scss/bq-notification.scss index c46bb32b5..b0b8c8bd7 100644 --- a/packages/bee-q/src/components/notification/scss/bq-notification.scss +++ b/packages/bee-q/src/components/notification/scss/bq-notification.scss @@ -1,5 +1,5 @@ /* -------------------------------------------------------------------------- */ -/* Notification styles */ +/* Notification styles */ /* -------------------------------------------------------------------------- */ @import './bq-notification.variables'; @@ -13,11 +13,10 @@ } .bq-notification { - @apply relative flex min-w-[var(--bq-notification--min-width)] p-[var(--bq-notification--padding)]; - @apply rounded-[var(--bq-notification--border-radius)] bg-[var(--bq-notification--background)]; - @apply animate-slide-in; + @include animation-slide-in; - box-shadow: var(--bq-notification--box-shadow); + @apply relative flex min-w-[var(--bq-notification--min-width)] p-[var(--bq-notification--padding)]; + @apply rounded-[var(--bq-notification--border-radius)] bg-[var(--bq-notification--background)] shadow-[shadow:var(--bq-notification--box-shadow)]; } /** diff --git a/packages/bee-q/src/components/notification/scss/bq-notification.variables.scss b/packages/bee-q/src/components/notification/scss/bq-notification.variables.scss index 887002321..2c2d84ec7 100644 --- a/packages/bee-q/src/components/notification/scss/bq-notification.variables.scss +++ b/packages/bee-q/src/components/notification/scss/bq-notification.variables.scss @@ -21,7 +21,7 @@ * @prop --bq-notification--min-width: The notification min width */ --bq-notification--background: theme('colors.bg.primary'); - --bq-notification--box-shadow: theme('boxShadow.m'); + --bq-notification--box-shadow: theme('boxShadow.l'); --bq-notification--border-color: theme('colors.transparent'); --bq-notification--border-radius: theme('borderRadius.s'); diff --git a/packages/bee-q/src/components/side-menu/_storybook/bq-side-menu.stories.tsx b/packages/bee-q/src/components/side-menu/_storybook/bq-side-menu.stories.tsx index eb3a9f4dc..3a3cf9b96 100644 --- a/packages/bee-q/src/components/side-menu/_storybook/bq-side-menu.stories.tsx +++ b/packages/bee-q/src/components/side-menu/_storybook/bq-side-menu.stories.tsx @@ -42,15 +42,15 @@ const Template = (args: Args) => html` @bqSelect=${args.bqSelect} >
- + - ${!args.collapse ? html`

Bee-Q

` : nothing} + ${!args.collapse ? html`

BEEQ

` : nothing}
diff --git a/packages/bee-q/src/components/spinner/scss/bq-spinner.scss b/packages/bee-q/src/components/spinner/scss/bq-spinner.scss index eea2ed269..a935cf4f9 100644 --- a/packages/bee-q/src/components/spinner/scss/bq-spinner.scss +++ b/packages/bee-q/src/components/spinner/scss/bq-spinner.scss @@ -100,6 +100,6 @@ .is-animated { .bq-spinner--icon, .bq-spinner--loader > svg { - @apply animate-spin; + @include animation-spin; } } diff --git a/packages/bee-q/src/components/toast/scss/bq-toast.scss b/packages/bee-q/src/components/toast/scss/bq-toast.scss index e53b2dac6..e81140ff4 100644 --- a/packages/bee-q/src/components/toast/scss/bq-toast.scss +++ b/packages/bee-q/src/components/toast/scss/bq-toast.scss @@ -1,11 +1,11 @@ /* -------------------------------------------------------------------------- */ -/* Toast styles */ +/* Toast styles */ /* -------------------------------------------------------------------------- */ @import './bq-toast.variables'; :host { - @apply hidden animate-slide-in will-change-transform; + @apply hidden; } :host([open]) { @@ -13,10 +13,13 @@ } .bq-toast { + @include animation-slide-in; + @apply flex items-center gap-[var(--bq-toast--gap)] px-[var(--bq-toast--padding-x)] py-[var(--bq-toast--padding-y)]; @apply rounded-[var(--bq-toast--border-radius)] bg-[var(--bq-toast--background)] shadow-[shadow:var(--bq-toast--box-shadow)]; + @apply border-[length:var(--bq-toast--border-width)] border-[color:var(--bq-toast--border-color)]; - border: var(--bq-toast--border-width) var(--bq-toast--border-style) var(--bq-toast--border-color); + border-style: var(--bq-toast--border-style); } .bq-toast--icon { @@ -39,7 +42,8 @@ } &.loading { - @apply animate-spin text-[var(--bq-toast--icon-color-loading)]; + @include animation-spin; + @apply text-[var(--bq-toast--icon-color-loading)]; } &.custom { diff --git a/packages/bee-q/src/components/tooltip/__tests__/bq-tooltip.e2e.ts b/packages/bee-q/src/components/tooltip/__tests__/bq-tooltip.e2e.ts index 7f8f15640..daf8b31af 100644 --- a/packages/bee-q/src/components/tooltip/__tests__/bq-tooltip.e2e.ts +++ b/packages/bee-q/src/components/tooltip/__tests__/bq-tooltip.e2e.ts @@ -7,16 +7,16 @@ describe('bq-tooltip', () => { const page = await newE2EPage(); await page.setContent(''); - const element = await page.find('bq-tooltip'); - expect(element).toHaveClass('hydrated'); + const tooltipElem = await page.find('bq-tooltip'); + expect(tooltipElem).toHaveClass('hydrated'); }); it('should have shadow root', async () => { const page = await newE2EPage(); await page.setContent(''); - const element = await page.find('bq-tooltip'); - expect(element.shadowRoot).not.toBeNull(); + const tooltipElem = await page.find('bq-tooltip'); + expect(tooltipElem.shadowRoot).not.toBeNull(); }); it('should be visible on hover', async () => { @@ -24,72 +24,64 @@ describe('bq-tooltip', () => { await page.setContent(` Yuhu! A tooltip! - - Hover me! - + Hover me! `); - const element = await page.find('bq-tooltip >>> [part="panel"]'); - expect(element).toHaveAttribute('aria-hidden'); + const tooltipPanel = await page.find('bq-tooltip >>> [part="panel"]'); + expect(tooltipPanel).toHaveAttribute('aria-hidden'); const button = await page.find('bq-button'); await button.hover(); - expect(element).not.toHaveAttribute('aria-hidden'); + expect(tooltipPanel).not.toHaveAttribute('aria-hidden'); }); it('should hide on mouse out', async () => { const page = await newE2EPage(); - await page.setContent(`
-
another element
- - Yuhu! A tooltip! - - Hover me! - + await page.setContent(` + + Yuhu! A tooltip! + Hover me! -
`); + `); - const element = await page.find('bq-tooltip >>> [part="panel"]'); - expect(element).toHaveAttribute('aria-hidden'); + const tooltipPanel = await page.find('bq-tooltip >>> [part="panel"]'); + expect(tooltipPanel).not.toHaveAttribute('aria-hidden'); - const button = await page.find('bq-button'); - await button.hover(); - expect(element).not.toHaveAttribute('aria-hidden'); + await page.click('body'); + await page.waitForChanges(); - const anotherEl = await page.find('div'); - await anotherEl.hover(); - expect(element).toHaveAttribute('aria-hidden'); + expect(tooltipPanel).toHaveAttribute('aria-hidden'); }); it('should be visible only on click if specified', async () => { const page = await newE2EPage(); - await page.setContent(` + await page.setContent(` + Yuhu! A tooltip! - - Hover me! - - `); + Hover me! + + `); - const element = await page.find('bq-tooltip >>> [part="panel"]'); - expect(element).toHaveAttribute('aria-hidden'); + const tooltipPanel = await page.find('bq-tooltip >>> [part="panel"]'); + expect(tooltipPanel).toHaveAttribute('aria-hidden'); const button = await page.find('bq-button'); await button.hover(); - expect(element).toHaveAttribute('aria-hidden'); + expect(tooltipPanel).toHaveAttribute('aria-hidden'); await button.click(); - expect(element).not.toHaveAttribute('aria-hidden'); + expect(tooltipPanel).not.toHaveAttribute('aria-hidden'); }); it('should show in specified position', async () => { const page = await newE2EPage(); - await page.setContent(` + await page.setContent(` + Yuhu! A tooltip! - - Hover me! - - `); + Hover me! + + `); const button = await page.find('bq-button'); await button.hover(); diff --git a/packages/bee-q/src/components/tooltip/bq-tooltip.tsx b/packages/bee-q/src/components/tooltip/bq-tooltip.tsx index ae8a5ef1f..796e3d822 100644 --- a/packages/bee-q/src/components/tooltip/bq-tooltip.tsx +++ b/packages/bee-q/src/components/tooltip/bq-tooltip.tsx @@ -170,10 +170,10 @@ export class BqTooltip { render() { return ( -
+
{/* TRIGGER */}
{/* PANEL */}