Place exposure card assets into one folder (#4290)

* pass status val in exposurecard

* lint

* revert statuspill changes

* add l10n changes

* remove brand-plus name, default to full brand name

* Move exposure card related files into a singular folder

* move exposurecard stories into exposurecard folder

* update databrokerimage path

* update databrokerimage path

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/Dashboard.test.tsx

@@ -58,16 +58,19 @@ jest.mock("next/navigation", () => ({
 }));
 jest.mock("../../../../../../hooks/useTelemetry");
 
-jest.mock("../../../../../../components/client/DataBrokerImage", () => {
-  return {
-    // Mock this with an empty React component. Otherwise, tests will complain:
-    // > Warning: A suspended resource finished loading inside a test, but the
-    // > event was not wrapped in act(...).
-    // > When testing, code that resolves suspended data should be wrapped into
-    // > act(...)
-    DataBrokerImage: () => null,
-  };
-});
+jest.mock(
+  "../../../../../../components/client/exposure_card/DataBrokerImage",
+  () => {
+    return {
+      // Mock this with an empty React component. Otherwise, tests will complain:
+      // > Warning: A suspended resource finished loading inside a test, but the
+      // > event was not wrapped in act(...).
+      // > When testing, code that resolves suspended data should be wrapped into
+      // > act(...)
+      DataBrokerImage: () => null,
+    };
+  },
+);
 
 describe("axe accessibility test suite", () => {
   it("passes the axe accessibility test suite for DashboardNonUsNoBreaches", async () => {

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.tsx

@@ -16,7 +16,7 @@ import {
   Exposure,
   ExposureCard,
   isScanResult,
-} from "../../../../../../components/client/ExposureCard";
+} from "../../../../../../components/client/exposure_card/ExposureCard";
 import {
   ExposuresFilter,
   FilterState,

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/filterExposures.ts

@@ -5,7 +5,7 @@
 import {
   Exposure,
   isScanResult,
-} from "../../../../../../components/client/ExposureCard";
+} from "../../../../../../components/client/exposure_card/ExposureCard";
 import { FilterState } from "../../../../../../components/client/ExposuresFilter";
 
 export function filterExposures(

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/ManualRemove.test.tsx

@@ -24,7 +24,7 @@ import Meta, { ManualRemoveViewStory } from "./ManualRemove.stories";
 
 jest.mock("../../../../../../../../../hooks/useTelemetry");
 jest.mock(
-  "../../../../../../../../../components/client/DataBrokerImage",
+  "../../../../../../../../../components/client/exposure_card/DataBrokerImage",
   () => {
     return {
       // Mock this with an empty React component. Otherwise, tests will complain:

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/manual-remove/RemovalCard.tsx

@@ -11,7 +11,7 @@ import { useL10n } from "../../../../../../../../../hooks/l10n";
 import { useState } from "react";
 import { getLocale } from "../../../../../../../../../functions/universal/getLocale";
 import { useTelemetry } from "../../../../../../../../../hooks/useTelemetry";
-import { ScanResultCard } from "../../../../../../../../../components/client/ScanResultCard";
+import { ScanResultCard } from "../../../../../../../../../components/client/exposure_card/ScanResultCard";
 
 export type Props = {
   scanResult: OnerepScanResultRow;

src/app/components/client/exposure_card/DataBrokerImage.tsx

@@ -5,7 +5,7 @@
 import React, { Suspense, lazy, useMemo } from "react";
 import styles from "./ExposureCard.module.scss";
 import Image from "next/image";
-import { FallbackLogo } from "../server/BreachLogo";
+import { FallbackLogo } from "../../server/BreachLogo";
 
 export const DataBrokerImage = (props: { name: string }) => {
   const LazyLoadedImage = useMemo(
@@ -23,7 +23,7 @@ export const DataBrokerImage = (props: { name: string }) => {
 async function getDataBrokerImage(name: string) {
   try {
     const DataBrokerLogo = await import(
-      `../client/assets/data-brokers/${name}.png`
+      `../../client/assets/data-brokers/${name}.png`
     );
     const ImageComponent = () => (
       <Image

src/app/components/client/exposure_card/ExposureCard.module.scss

@@ -1,4 +1,4 @@
-@import "../../tokens";
+@import "../../../tokens";
 
 .exposureCard {
   font: $text-body-sm;

src/app/components/client/exposure_card/ExposureCard.stories.ts

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import { ExposureCard } from "../ExposureCard";
+import { ExposureCard } from "./ExposureCard";
 import FamilyTreeImage from "../assets/familytree.png";
 import TwitterImage from "../assets/twitter-icon.png";
 import {

src/app/components/client/exposure_card/ExposureCard.tsx

@@ -7,7 +7,7 @@
 import React, { ReactNode } from "react";
 import { OnerepScanResultRow } from "knex/types/tables";
 import { StaticImageData } from "next/image";
-import { SubscriberBreach } from "../../../utils/subscriberBreaches";
+import { SubscriberBreach } from "../../../../utils/subscriberBreaches";
 import { ScanResultCard } from "./ScanResultCard";
 import { SubscriberBreachCard } from "./SubscriberBreachCard";
 

src/app/components/client/exposure_card/ExposureCardDataClass.tsx

@@ -7,9 +7,9 @@
 import { ReactElement } from "react";
 import { OnerepScanResultRow } from "knex/types/tables";
 import styles from "./ExposureCard.module.scss";
-import { useL10n } from "../../hooks/l10n";
+import { useL10n } from "../../../hooks/l10n";
 import { Exposure, isScanResult } from "./ExposureCard";
-import { HibpBreachDataTypes } from "../../deprecated/(authenticated)/user/breaches/breaches";
+import { HibpBreachDataTypes } from "../../../deprecated/(authenticated)/user/breaches/breaches";
 
 type OnerepScanResultSerializedColumns = Extract<
   keyof OnerepScanResultRow,

src/app/components/client/exposure_card/ScanResultCard.tsx

@@ -7,19 +7,19 @@
 import React, { ReactNode, useId } from "react";
 import { OnerepScanResultRow } from "knex/types/tables";
 import styles from "./ExposureCard.module.scss";
-import { StatusPill } from "../server/StatusPill";
+import { StatusPill } from "../../server/StatusPill";
 import {
   ChevronDown,
   EmailIcon,
   LocationPinIcon,
   MultipleUsersIcon,
   PhoneIcon,
-} from "../server/Icons";
-import { useL10n } from "../../hooks/l10n";
+} from "../../server/Icons";
+import { useL10n } from "../../../hooks/l10n";
 import { ExposureCardDataClassLayout } from "./ExposureCardDataClass";
 import { DataBrokerImage } from "./DataBrokerImage";
-import { CONST_URL_SUMO_MONITOR_REMOVAL } from "../../../constants";
-import { TelemetryLink } from "./TelemetryLink";
+import { CONST_URL_SUMO_MONITOR_REMOVAL } from "../../../../constants";
+import { TelemetryLink } from "../TelemetryLink";
 
 export type ScanResultCardProps = {
   scanResult: OnerepScanResultRow;

src/app/components/client/exposure_card/SubscriberBreachCard.tsx

@@ -7,7 +7,7 @@
 import React, { ReactNode } from "react";
 import Link from "next/link";
 import styles from "./ExposureCard.module.scss";
-import { StatusPill } from "../server/StatusPill";
+import { StatusPill } from "../../server/StatusPill";
 import Image, { StaticImageData } from "next/image";
 import {
   ChevronDown,
@@ -15,15 +15,15 @@ import {
   PasswordIcon,
   PhoneIcon,
   QuestionMarkCircle,
-} from "../server/Icons";
-import { useL10n } from "../../hooks/l10n";
+} from "../../server/Icons";
+import { useL10n } from "../../../hooks/l10n";
 import {
   DataClassEffected,
   SubscriberBreach,
-} from "../../../utils/subscriberBreaches";
-import { FallbackLogo } from "../server/BreachLogo";
+} from "../../../../utils/subscriberBreaches";
+import { FallbackLogo } from "../../server/BreachLogo";
 import { ExposureCardDataClassLayout } from "./ExposureCardDataClass";
-import { useTelemetry } from "../../hooks/useTelemetry";
+import { useTelemetry } from "../../../hooks/useTelemetry";
 
 export type SubscriberBreachCardProps = {
   exposureImg?: StaticImageData;

src/app/components/server/StatusPill.tsx

@@ -5,7 +5,7 @@
 import React from "react";
 import styles from "./StatusPill.module.scss";
 import { useL10n } from "../../hooks/l10n";
-import { Exposure, isScanResult } from "../client/ExposureCard";
+import { Exposure, isScanResult } from "../client/exposure_card/ExposureCard";
 
 export type StatusPillType = "needAction" | "progress" | "fixed";