@griddo/ax 12.10.5 → 12.11.0

package/src/__tests__/modules/Redirects/Redirects/Redirects.edit.test.tsx

@@ -0,0 +1,91 @@
+// `connect` captura los action creators al cargar el módulo, así que hay que
+// sustituirlos antes de que se importe la pantalla (vi.mock se iza).
+vi.mock("@ax/containers/Redirects", () => ({
+	redirectsActions: {
+		getRedirects: () => () => Promise.resolve(),
+		deleteRedirect: () => () => Promise.resolve(true),
+		importRedirects: () => () => Promise.resolve(true),
+		updateRedirect: () => () => Promise.resolve(),
+		addRedirect: () => () => Promise.resolve(),
+	},
+}));
+
+import { MemoryRouter } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Redirects from "@ax/modules/Redirects";
+import globalTheme from "@ax/themes/theme.json";
+import type { IRedirect } from "@ax/types";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen, within } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+// jsdom no implementa Element.scrollTo y el módulo lo llama sobre el tableRef.
+beforeEach(() => {
+	Element.prototype.scrollTo = vi.fn();
+});
+
+const redirect: IRedirect = {
+	id: 1,
+	from: "/about/team",
+	to: { url: "https://example.com/team" },
+	type: "302",
+	site: { siteId: 2, siteName: "UST School", siteUrl: "/ust" },
+	date: "2021-10-15T00:00:00.000Z",
+};
+
+const store = configureStore([thunk])({
+	redirects: { redirects: [redirect], totalItems: 1, totalImports: 0, imports: null },
+	sites: { currentSiteInfo: null, sites: [{ id: 2, name: "UST School" }] },
+	app: { isLoading: false, isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+});
+
+const navItems = [{ title: "Redirects", path: "/settings/redirects" }];
+
+// El panel de alta sigue montado, cerrado, mientras se edita una fila, y pinta
+// los mismos radios: el aserto se acota al único panel abierto.
+const OPEN_PANEL = "[data-testid='floating-panel'][data-is-open='true']";
+
+const openPanel = () => {
+	expect(document.querySelectorAll(OPEN_PANEL)).toHaveLength(1);
+	return document.querySelector(OPEN_PANEL) as HTMLElement;
+};
+
+// El grupo de un radio, como lo define el HTML: mismo `name` y mismo form owner.
+const radioGroupOf = (radio: HTMLInputElement) =>
+	Array.from(document.querySelectorAll<HTMLInputElement>('input[type="radio"]')).filter(
+		(other) => other.name === radio.name && other.form === radio.form,
+	);
+
+describe("[UC-AX-manage-redirects] Redirects — editar el tipo", () => {
+	it("AC10 · checks the row's type in the open panel while the add panel stays mounted", () => {
+		render(
+			<MemoryRouter>
+				<ThemeProvider theme={parseTheme(globalTheme)}>
+					<Redirects navItems={navItems as never} currentNavItem={navItems[0] as never} />
+				</ThemeProvider>
+			</MemoryRouter>,
+			{ store },
+		);
+
+		fireEvent.click(screen.getByTestId("redirect-type"));
+
+		// Primero la causa: si el grupo incluyera los radios del panel cerrado, el
+		// `checked` sería del panel que se re-renderice el último, y en el
+		// navegador eso cambia según el orden en que lleguen las peticiones del
+		// panel (medido en el e2e de QA `sites/edit/011`).
+		const radio302 = within(openPanel()).getByRole("radio", { name: "302 - Temporary" }) as HTMLInputElement;
+		expect(radioGroupOf(radio302)).toHaveLength(2);
+
+		expect(radio302).toBeChecked();
+
+		fireEvent.click(within(openPanel()).getByText("301 - Permanent"));
+
+		expect(within(openPanel()).getByRole("radio", { name: "301 - Permanent" })).toBeChecked();
+	});
+});

package/src/__tests__/modules/Redirects/Redirects/Redirects.filter.test.tsx

@@ -0,0 +1,131 @@
+// `connect` captura los action creators al cargar el módulo, así que hay que
+// sustituirlos antes de que se importe la pantalla (vi.mock se iza).
+const getRedirectsSpy = vi.hoisted(() => vi.fn());
+vi.mock("@ax/containers/Redirects", () => ({
+	redirectsActions: {
+		getRedirects: (...args: unknown[]) => {
+			getRedirectsSpy(...args);
+			return () => Promise.resolve();
+		},
+		deleteRedirect: () => () => Promise.resolve(true),
+		importRedirects: () => () => Promise.resolve(true),
+		updateRedirect: () => () => Promise.resolve(),
+		addRedirect: () => () => Promise.resolve(),
+	},
+}));
+
+import { MemoryRouter } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Redirects from "@ax/modules/Redirects";
+import globalTheme from "@ax/themes/theme.json";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { cleanup, fireEvent, render, screen } from "../../../../../config/tests/test-utils";
+
+afterEach(cleanup);
+
+// jsdom no implementa Element.scrollTo y el módulo lo llama sobre el tableRef.
+beforeEach(() => {
+	getRedirectsSpy.mockClear();
+	Element.prototype.scrollTo = vi.fn();
+});
+
+const navItems = [{ title: "Redirects", path: "/settings/redirects" }];
+
+// `totalItems` por encima de los 50 por página para que el paginador tenga más
+// de una página y se pueda comprobar el reseteo.
+const renderScreen = (currentSiteInfo: { id: number; name: string } | null) => {
+	const store = configureStore([thunk])({
+		redirects: { redirects: [], totalItems: 120, totalImports: 0, imports: null },
+		sites: { currentSiteInfo, sites: [{ id: 5, name: "UST School" }] },
+		app: { isLoading: false, isSaving: false, lang: { locale: "en_EN", id: 1 }, globalLangs: [] },
+	});
+
+	return render(
+		<MemoryRouter>
+			<ThemeProvider theme={parseTheme(globalTheme)}>
+				<Redirects navItems={navItems as never} currentNavItem={navItems[0] as never} />
+			</ThemeProvider>
+		</MemoryRouter>,
+		{ store },
+	);
+};
+
+const chooseType = (type: string) => {
+	fireEvent.click(screen.getByTestId("redirect-type-filter"));
+
+	const option = screen.getAllByTestId("list-item").find((item) => item.textContent === type);
+	fireEvent.click(option as HTMLElement);
+};
+
+const lastCall = () => getRedirectsSpy.mock.lastCall as [{ page: number }, string];
+
+describe("[UC-AX-manage-redirects] Redirects — filtrar por tipo", () => {
+	it("AC9 · sends the chosen type in the listing query", () => {
+		renderScreen(null);
+
+		chooseType("302");
+
+		expect(lastCall()[1]).toBe("&type=302");
+	});
+
+	it("AC9 · keeps the site scope when filtering by type", () => {
+		renderScreen({ id: 5, name: "UST School" });
+
+		chooseType("302");
+
+		expect(lastCall()[1]).toBe("&sites=5&type=302");
+	});
+
+	it("AC9 · goes back to the first page", () => {
+		renderScreen(null);
+
+		const pageInput = screen.getByTestId("pagination-text-input");
+		fireEvent.change(pageInput, { target: { value: "2" } });
+		fireEvent.blur(pageInput);
+		expect(lastCall()[0].page).toBe(2);
+
+		chooseType("302");
+
+		expect(lastCall()[0].page).toBe(1);
+	});
+
+	it("AC9 · tags the chosen type, in site scope too", () => {
+		renderScreen({ id: 5, name: "UST School" });
+
+		chooseType("302");
+
+		expect(screen.getByText("Type: 302")).toBeTruthy();
+	});
+
+	it("AC9 · replaces the type instead of adding to it — the filter is single choice", () => {
+		renderScreen(null);
+
+		chooseType("302");
+		chooseType("301");
+
+		expect(lastCall()[1]).toBe("&type=301");
+	});
+
+	it("AC9 · clears the type when the chosen one is picked again", () => {
+		renderScreen(null);
+
+		chooseType("302");
+		chooseType("302");
+
+		expect(lastCall()[1]).toBe("");
+	});
+
+	it("AC9 · Clear All returns the listing to its site, not to the global catalogue", () => {
+		renderScreen({ id: 5, name: "UST School" });
+
+		chooseType("302");
+		fireEvent.click(screen.getByText("Clear All"));
+
+		expect(lastCall()[1]).toBe("&sites=5");
+	});
+});

package/src/components/Fields/ConditionalField/style.tsx

@@ -7,7 +7,7 @@ export const Wrapper = styled.div`
 export const Content = styled.div`
   transition: all 0.5s ease-in-out;
   margin-top: ${(p) => p.theme.spacing.m};
-  div:last-child {
+  > div:last-child {
     margin-bottom: 0;
   }
 `;

package/src/components/Fields/RadioField/index.tsx

@@ -1,7 +1,7 @@
 import * as S from "./style";
 
 const RadioField = (props: IRadioFieldProps): JSX.Element => {
-	const { name, title, value, checked, error, disabled, tabIndex, onChange } = props;
+	const { name, title, description, value, checked, error, disabled, tabIndex, onChange } = props;
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		if (onChange) {
@@ -9,10 +9,24 @@ const RadioField = (props: IRadioFieldProps): JSX.Element => {
 		}
 	};
 
+	// Con descripción, el título va en su propio nodo y el input apunta a él con
+	// aria-labelledby: si la descripción cuelga del <label>, el nombre accesible
+	// concatena las dos cadenas sin separador ("301 - PermanentKeeps SEO."). La
+	// descripción se queda dentro del <label> para que clicarla siga marcando la
+	// opción, y se anuncia aparte con aria-describedby. Sin descripción no se
+	// envuelve nada, para no alterar el DOM de los radios que ya existen.
+	const titleId = `${name}-${value}-title`;
+	const descriptionId = `${name}-${value}-description`;
+
 	return (
 		<S.Wrapper data-testid="radio-field-wrapper">
-			<S.Label>
-				{title}
+			<S.Label hasDescription={!!description}>
+				{description ? <S.Title id={titleId}>{title}</S.Title> : title}
+				{description && (
+					<S.Description id={descriptionId} data-testid="radio-field-description">
+						{description}
+					</S.Description>
+				)}
 				<S.Input
 					type="radio"
 					name={name}
@@ -22,6 +36,8 @@ const RadioField = (props: IRadioFieldProps): JSX.Element => {
 					onChange={handleChange}
 					data-testid="radio-field-input"
 					tabIndex={tabIndex}
+					aria-labelledby={description ? titleId : undefined}
+					aria-describedby={description ? descriptionId : undefined}
 				/>
 				<S.CheckMark checked={checked} error={error} />
 			</S.Label>
@@ -32,6 +48,7 @@ const RadioField = (props: IRadioFieldProps): JSX.Element => {
 export interface IRadioFieldProps {
 	name: string;
 	title?: string;
+	description?: string;
 	value: string;
 	checked?: boolean;
 	error?: boolean;

package/src/components/Fields/RadioField/style.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const Wrapper = styled.div``;
 
-export const Label = styled.label`
+export const Label = styled.label<{ hasDescription?: boolean }>`
   ${(p) => p.theme.textStyle.fieldContent};
   position: relative;
   padding-left: calc(${(p) => p.theme.spacing.s} + ${(p) => p.theme.spacing.xs});
@@ -10,6 +10,23 @@ export const Label = styled.label`
   cursor: pointer;
   user-select: none;
   min-height: 16px;
+  ${(p) =>
+		p.hasDescription &&
+		`
+    display: block;
+    font-weight: ${p.theme.fontWeight.semibold};
+  `}
+`;
+
+export const Title = styled.span``;
+
+// Mismo par de tokens que el HelpText de FieldsBehavior, que es el texto
+// descriptivo que ya usa el CMS bajo un campo.
+export const Description = styled.span`
+  ${(p) => p.theme.textStyle.uiXS};
+  display: block;
+  margin-top: ${(p) => p.theme.spacing.xxs};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
 `;
 
 export const CheckMark = styled.span<{ checked: boolean | undefined; error: boolean | undefined }>`

package/src/components/Fields/RadioGroup/index.tsx

@@ -28,6 +28,7 @@ const RadioGroup = (props: IRadioGroupProps): JSX.Element => {
 							checked={checked}
 							value={item.value}
 							title={item.title}
+							description={item.description}
 							name={name}
 							error={item.error}
 							disabled={item.disabled || disabled}

package/src/containers/Redirects/actions.tsx

@@ -1,6 +1,8 @@
 import { redirects } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { handleRequest } from "@ax/helpers";
+import type { RedirectType } from "@ax/types";
+
 import {
 	DEFAULT_PARAMS,
 	ERROR_CODE,
@@ -11,8 +13,18 @@ import {
 } from "./constants";
 import type { ISetImports, ISetRedirects, ISetTotalImports, ISetTotalItems } from "./interfaces";
 
+// El contrato del tipo de redirección con la API no está cerrado (sc-62031) y
+// un código HTTP en BD es naturalmente un entero. `RadioGroup` compara con
+// `===`, así que un 301 numérico no casaría con la opción "301" y el panel se
+// abriría sin nada marcado. Se normaliza aquí, en la única puerta de entrada de
+// las redirecciones al store, para que listado y panel vean siempre lo mismo.
+const normalizeRedirectType = (redirect: any) =>
+	redirect?.type === null || redirect?.type === undefined || redirect?.type === ""
+		? redirect
+		: { ...redirect, type: String(redirect.type) };
+
 function setRedirects(redirects: any[]): ISetRedirects {
-	return { type: SET_REDIRECTS, payload: { redirects } };
+	return { type: SET_REDIRECTS, payload: { redirects: redirects.map(normalizeRedirectType) } };
 }
 
 function setTotalItems(totalItems: number): ISetTotalItems {
@@ -50,7 +62,7 @@ function getRedirects(params: any, filters?: string): (dispatch: any) => Promise
 }
 
 function addRedirect(
-	redirect: { from: string; to: string | number },
+	redirect: { from: string; to: string | number; type?: RedirectType },
 	errorAction: () => void,
 	force?: boolean,
 	filter?: string,
@@ -84,7 +96,7 @@ function addRedirect(
 }
 
 function updateRedirect(
-	redirect: { from: string; to: string | number },
+	redirect: { from: string; to: string | number; type?: RedirectType },
 	redirectID: number,
 	filter?: string,
 ): (dispatch: any, getState: any) => Promise<void> {

package/src/modules/Redirects/BulkHeader/TableHeader/index.tsx

@@ -3,6 +3,8 @@ import React from "react";
 import { CheckField, SiteFilter, TableCounter, DateFilter, Tooltip } from "@ax/components";
 import type { IQueryValue } from "@ax/types";
 
+import TypeFilter from "../../TypeFilter";
+
 import * as S from "./style";
 
 const TableHeader = (props: IProps): JSX.Element => {
@@ -35,6 +37,9 @@ const TableHeader = (props: IProps): JSX.Element => {
 					/>
 				</Tooltip>
 			</S.CheckHeader>
+			<S.TypeHeader>
+				<TypeFilter filterItems={filterItems} value={filterValues.type} />
+			</S.TypeHeader>
 			{!isSiteItem && (
 				<S.SiteHeader>
 					<SiteFilter filterItems={filterItems} value={filterValues} pointer="sites" center={false} />

package/src/modules/Redirects/BulkHeader/TableHeader/style.tsx

@@ -16,6 +16,10 @@ const CheckHeader = styled(Header)`
   width: 32px;
 `;
 
+const TypeHeader = styled(Header)`
+  width: 96px;
+`;
+
 const SiteHeader = styled(Header)`
   width: 200px;
 `;
@@ -30,4 +34,4 @@ const ActionsHeader = styled(Header)`
   justify-content: flex-end;
 `;
 
-export { TableHeader, CheckHeader, SiteHeader, UrlHeader, ActionsHeader };
+export { TableHeader, CheckHeader, TypeHeader, SiteHeader, UrlHeader, ActionsHeader };

package/src/modules/Redirects/RedirectItem/index.tsx

@@ -10,6 +10,7 @@ import { format } from "date-fns";
 
 import { DeleteModal } from "../atoms";
 import RedirectPanel from "../RedirectPanel";
+import { DEFAULT_REDIRECT_TYPE, REDIRECT_TYPE_COLORS } from "../utils";
 
 import * as S from "./style";
 
@@ -36,7 +37,11 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 	const toggleSecondaryPanel = () => setIsOpenedSecond(!isOpenedSecond);
 
 	const handleClick = () => {
-		const mappedRedirect = { ...redirect, to: { ...redirect.to, linkTo: redirect.to.pageId, href: redirect.to.url } };
+		const mappedRedirect = {
+			...redirect,
+			type: redirect.type ?? DEFAULT_REDIRECT_TYPE,
+			to: { ...redirect.to, linkTo: redirect.to.pageId, href: redirect.to.url },
+		};
 		setFormValues(mappedRedirect);
 		setIsOpenedSecond(false);
 		toggleModal("edit");
@@ -94,6 +99,11 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 						onChange={handleOnChange}
 					/>
 				</S.CheckCell>
+				<S.TypeCell role="cell" onClick={handleClick} data-testid="redirect-type">
+					{redirect.type && (
+						<S.TypeTag type="square" text={redirect.type} color={REDIRECT_TYPE_COLORS[redirect.type]} />
+					)}
+				</S.TypeCell>
 				{!isSiteItem && (
 					<S.SiteCell role="cell" onClick={handleClick}>
 						{redirect.site?.siteName && <ElementsTooltip elements={[redirect.site.siteName]} maxChar={20} />}

package/src/modules/Redirects/RedirectItem/style.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+import Tag from "@ax/components/Tag";
 import { ActionMenu } from "@ax/components";
 
 const CheckCell = styled(Cell)`
@@ -11,6 +12,22 @@ const CheckCell = styled(Cell)`
   }
 `;
 
+// `Cell` es `flex-flow: column wrap`, que por defecto estira al hijo al ancho
+// del content box; el chip debe ceñirse a su texto.
+const TypeCell = styled(Cell)`
+  width: 96px;
+  align-items: flex-start;
+`;
+
+// `Tag` pinta el texto casi blanco en cuanto recibe `color`, ilegible sobre
+// estos pasteles. El `&&` duplica la especificidad para ganarle a la regla de
+// TagSquare siempre, y no solo cuando el orden de inyección acompaña.
+const TypeTag = styled(Tag)`
+  && {
+    color: ${(p) => p.theme.color.textMediumEmphasis};
+  }
+`;
+
 const SiteCell = styled(Cell)`
   width: 200px;
 `;
@@ -54,4 +71,15 @@ const ModalContent = styled.div`
   }
 `;
 
-export { CheckCell, SiteCell, ActionsCell, UrlCell, StyledActionMenu, ItemRow, ModalContent, DateCell };
+export {
+	CheckCell,
+	TypeCell,
+	TypeTag,
+	SiteCell,
+	ActionsCell,
+	UrlCell,
+	StyledActionMenu,
+	ItemRow,
+	ModalContent,
+	DateCell,
+};

package/src/modules/Redirects/RedirectPanel/index.tsx

@@ -1,12 +1,27 @@
 import React from "react";
 import { connect } from "react-redux";
 
-import type { IRedirect } from "@ax/types";
+import type { IRedirect, RedirectType } from "@ax/types";
 import { Button, FieldsBehavior, FloatingPanel } from "@ax/components";
 import { redirectsActions } from "@ax/containers/Redirects";
 
 import * as S from "./style";
 
+const REDIRECTION_TYPE_OPTIONS = [
+	{
+		name: "permanent",
+		value: "301",
+		title: "301 - Permanent",
+		description: "Keeps SEO. Use for definitive redirects.",
+	},
+	{
+		name: "temporary",
+		value: "302",
+		title: "302 - Temporary",
+		description: "Doesn’t keep SEO. Use for short-lived changes.",
+	},
+];
+
 const RedirectPanel = (props: IProps): JSX.Element => {
 	const {
 		isOpen,
@@ -30,11 +45,18 @@ const RedirectPanel = (props: IProps): JSX.Element => {
 		setFormValues({ ...formValues, to: toValue });
 	};
 
+	const handleType = (newValue: RedirectType) => setFormValues({ ...formValues, type: newValue });
+
 	const addItemAction = () => addRedirect();
 
 	const editItemAction = async () => {
 		const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
-		formValues.id && (await updateRedirect({ from: formValues.from, to: toPage }, formValues.id, currentFilter));
+		formValues.id &&
+			(await updateRedirect(
+				{ from: formValues.from, to: toPage, type: formValues.type },
+				formValues.id,
+				currentFilter,
+			));
 		toggleModal();
 	};
 
@@ -81,6 +103,17 @@ const RedirectPanel = (props: IProps): JSX.Element => {
 					autoComplete="redirect-new"
 					helptext="Select an internal page or paste an external url."
 				/>
+				{/* El panel de alta sigue montado mientras se edita una fila. Con el mismo
+				    `name` y sin <form>, el navegador trata los radios de los dos paneles
+				    como un solo grupo y el `checked` se lo queda el panel cerrado. */}
+				<FieldsBehavior
+					title="Redirection type"
+					name={redirect ? `redirectionType-${redirect.id}` : "redirectionType"}
+					fieldType="RadioGroup"
+					value={formValues.type}
+					options={REDIRECTION_TYPE_OPTIONS}
+					onChange={handleType}
+				/>
 				<S.Footer>
 					{redirect ? (
 						<Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
@@ -113,7 +146,11 @@ interface ICategoryPanelProps {
 
 interface IDispatchProps {
 	addRedirect(force?: boolean): void;
-	updateRedirect(redirect: { from: string; to: string | number }, redirectID: number, filter?: string): Promise<void>;
+	updateRedirect(
+		redirect: { from: string; to: string | number; type?: RedirectType },
+		redirectID: number,
+		filter?: string,
+	): Promise<void>;
 }
 
 type IProps = ICategoryPanelProps & IDispatchProps;

package/src/modules/Redirects/TypeFilter/index.tsx

@@ -0,0 +1,44 @@
+import { FloatingMenu, Icon, ListItem, ListTitle } from "@ax/components";
+import type { IQueryValue, RedirectType } from "@ax/types";
+
+import * as S from "./style";
+
+const REDIRECT_TYPES: RedirectType[] = ["301", "302"];
+
+const TypeFilter = (props: ITypeFilterProps): JSX.Element => {
+	const { filterItems, value } = props;
+
+	const selected = value?.length ? value[0].value : undefined;
+
+	// El menú no ofrece un "All": volver a marcar el tipo activo es lo que lo
+	// quita, y la barra de filtros seleccionados conserva su "Clear All".
+	const chooseType = (type: RedirectType) =>
+		filterItems("type", selected === type ? [] : [{ value: type, label: type }]);
+
+	const Header = () => (
+		<S.Type isActive={!!selected} data-testid="redirect-type-filter">
+			Type
+			<S.IconsWrapper>
+				{selected ? <Icon name="Filter" size="16" /> : <Icon name="DownArrow" size="16" />}
+			</S.IconsWrapper>
+		</S.Type>
+	);
+
+	return (
+		<FloatingMenu Button={Header} position="left">
+			<ListTitle>Filter by type</ListTitle>
+			{REDIRECT_TYPES.map((type) => (
+				<ListItem key={type} isSelected={selected === type} onClick={() => chooseType(type)}>
+					{type}
+				</ListItem>
+			))}
+		</FloatingMenu>
+	);
+};
+
+export interface ITypeFilterProps {
+	filterItems(pointer: string, filter: IQueryValue[]): void;
+	value?: IQueryValue[];
+}
+
+export default TypeFilter;

package/src/modules/Redirects/TypeFilter/style.tsx

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+// Va dentro de la celda `TypeHeader`, que ya pone el ancho y el padding de la
+// columna: aquí solo el estado del filtro.
+const Type = styled.div<{ isActive: boolean }>`
+  ${(p) => p.theme.textStyle.uiS};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  position: relative;
+  color: ${(p) => (p.isActive ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+export { Type, IconsWrapper };