feat(identidad): logos SVG oficiales, wordmark trazado y tokens del manual
El wordmark deja de depender del glifo tipográfico ≡ y pasa a un trazado SVG propio (SimboloTresLineas), que es lo que permite cumplir la instrucción de la dueña: que se lea como E, no como tres líneas sueltas. Incluye las tres versiones del logotipo (principal, negativa, secundaria) y alinea los tokens de color con el Manual de Identidad Visual v1.0. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
edf921eae7
commit
a9758a92f9
15 files changed
+287
-27
No files matched your search
@@ -3,20 +3,33 @@ import { describe, it, expect } from 'vitest';
|
||||
import { Wordmark } from '../Wordmark';
|
||||
|
||||
describe('<Wordmark />', () => {
|
||||
it('renders the wordmark in lowercase', () => {
|
||||
it('exposes the brand name in lowercase as its accessible name', () => {
|
||||
render(<Wordmark />);
|
||||
const text = screen.getByText(/cre/).closest('span')?.textContent;
|
||||
expect(text?.toLowerCase()).toBe('cre≡er');
|
||||
expect(screen.getByRole('img', { name: 'creeer' })).toBeInTheDocument();
|
||||
});
|
||||
it('renders the accent "≡" symbol separately for dorado styling', () => {
|
||||
it('renders the "≡" as three separate bars for dorado styling', () => {
|
||||
const { container } = render(<Wordmark />);
|
||||
const accent = container.querySelector('[data-accent="true"]');
|
||||
expect(accent).not.toBeNull();
|
||||
expect(accent?.textContent).toBe('≡');
|
||||
expect(accent?.classList.contains('fill-dorado')).toBe(true);
|
||||
expect(accent?.querySelectorAll('rect')).toHaveLength(3);
|
||||
});
|
||||
it('never renders uppercase CREEER', () => {
|
||||
const { container } = render(<Wordmark />);
|
||||
const { container } = render(<Wordmark showTagline />);
|
||||
expect(container.textContent).not.toMatch(/CREEER/);
|
||||
expect(container.textContent).not.toMatch(/Creeer/);
|
||||
expect(screen.getByRole('img').getAttribute('aria-label')).toMatch(/^creeer\b/);
|
||||
});
|
||||
it('renders the tagline pillars with dorado separators, justified to the mark', () => {
|
||||
const { container } = render(<Wordmark showTagline />);
|
||||
const tagline = container.querySelector('text');
|
||||
expect(tagline?.textContent).toBe('CLARIDAD · DIRECCIÓN · CRECIMIENTO');
|
||||
expect(tagline?.getAttribute('textLength')).toBe('1000');
|
||||
expect(tagline?.querySelectorAll('.fill-dorado')).toHaveLength(2);
|
||||
});
|
||||
it('omits the tagline unless asked, and shortens the viewBox accordingly', () => {
|
||||
const { container } = render(<Wordmark />);
|
||||
expect(container.querySelector('text')).toBeNull();
|
||||
expect(container.querySelector('svg')?.getAttribute('viewBox')).toBe('0 0 1000 153.14');
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user