packages/react-components/playwright/assets/AttachmentCardIcon.tsx

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import React from 'react';

/**
 * docx icon for automation tests
 *
 * @internal
 */
export const getAttachmentIconDocx = (): JSX.Element => {
  return (
    <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M7.5 22h14c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H7.5c-.275 0-.5.225-.5.5v19c0 .275.225.5.5.5z"
        fill="#fff"
      />
      <path d="M21.293 6 18 2.707V5.5c0 .275.225.5.5.5h2.793z" fill="#fff" />
      <path
        opacity=".67"
        fillRule="evenodd"
        clipRule="evenodd"
        d="m22.56 5.854-4.414-4.415A1.51 1.51 0 0 0 17.086 1H7.5C6.673 1 6 1.673 6 2.5v19c0 .827.673 1.5 1.5 1.5h14c.827 0 1.5-.673 1.5-1.5V6.914c0-.4-.156-.777-.44-1.06zM18 2.707 21.293 6H18.5a.501.501 0 0 1-.5-.5V2.707zM7.5 22h14c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H7.5c-.275 0-.5.225-.5.5v19c0 .276.224.5.5.5z"
        fill="#605E5C"
      />
      <path d="M19.5 14H14v1h5.5a.5.5 0 0 0 0-1z" fill="#185ABD" />
      <path d="M19.5 12H14v1h5.5a.5.5 0 0 0 0-1z" fill="#2B7CD3" />
      <path d="M19.5 10H14v1h5.5a.5.5 0 0 0 0-1z" fill="#41A5EE" />
      <path d="M2 19h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1z" fill="#185ABD" />
      <path
        d="m11 10-1.507 6h-1.41s-1.021-4.253-1.032-4.5L5.968 16h-1.47L3 10h1.386l.909 4.714L6.452 10h1.34l1.05 4.714c.016 0 .88-4.714.88-4.714H11z"
        fill="#fff"
      />
    </svg>
  );
};

/**
 * xlsx icon for automation tests
 *
 * @internal
 */
export const getAttachmentIconXlsx = (): JSX.Element => {
  return (
    <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M7.5 22h14c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H7.5c-.275 0-.5.225-.5.5v19c0 .275.225.5.5.5z"
        fill="#fff"
      />
      <path d="M21.293 6 18 2.707V5.5c0 .275.225.5.5.5h2.793z" fill="#fff" />
      <path
        opacity=".67"
        fillRule="evenodd"
        clipRule="evenodd"
        d="m22.56 5.854-4.414-4.415A1.51 1.51 0 0 0 17.086 1H7.5C6.673 1 6 1.673 6 2.5v19c0 .827.673 1.5 1.5 1.5h14c.827 0 1.5-.673 1.5-1.5V6.914c0-.4-.156-.777-.44-1.06zM18 2.707 21.293 6H18.5a.501.501 0 0 1-.5-.5V2.707zM7.5 22h14c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H7.5c-.275 0-.5.225-.5.5v19c0 .276.224.5.5.5z"
        fill="#605E5C"
      />
      <path d="M19 17h-1a1 1 0 1 1 0-2h1a1 1 0 1 1 0 2z" fill="#134A2C" />
      <path d="M15 17h-1v-2h1a1 1 0 1 1 0 2z" fill="#185C37" />
      <path d="M19 14h-1a1 1 0 1 1 0-2h1a1 1 0 1 1 0 2z" fill="#21A366" />
      <path d="M15 14h-1v-2h1a1 1 0 1 1 0 2z" fill="#107C41" />
      <path d="M19 11h-1a1 1 0 1 1 0-2h1a1 1 0 1 1 0 2z" fill="#33C481" />
      <path d="M15 11h-1V9h1a1 1 0 1 1 0 2z" fill="#21A366" />
      <path d="M2 19h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1z" fill="#107C41" />
      <path
        d="m4.125 16 2.06-3.009L4.298 10h1.518l1.03 1.913c.095.18.16.316.196.405h.014c.067-.145.138-.285.213-.422L8.369 10h1.394l-1.936 2.974L9.813 16H8.329l-1.19-2.1a1.75 1.75 0 0 1-.142-.28H6.98a1.28 1.28 0 0 1-.138.271L5.617 16H4.125z"
        fill="#F9F7F7"
      />
    </svg>
  );
};

/**
 * ppt icon for automation tests
 *
 * @internal
 */
export const getAttachmentIconPpt = (): JSX.Element => {
  return (
    <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M7.5 22h14c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H7.5c-.275 0-.5.225-.5.5v19c0 .275.225.5.5.5z"
        fill="#fff"
      />
      <path d="M21.293 6 18 2.707V5.5c0 .275.225.5.5.5h2.793z" fill="#fff" />
      <path
        opacity=".67"
        fillRule="evenodd"
        clipRule="evenodd"
        d="m22.56 5.854-4.414-4.415A1.51 1.51 0 0 0 17.086 1H7.5C6.673 1 6 1.673 6 2.5v19c0 .827.673 1.5 1.5 1.5h14c.827 0 1.5-.673 1.5-1.5V6.914c0-.4-.156-.777-.44-1.06zM18 2.707 21.293 6H18.5a.501.501 0 0 1-.5-.5V2.707zM7.5 22h14c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H7.5c-.275 0-.5.225-.5.5v19c0 .276.224.5.5.5z"
        fill="#605E5C"
      />
      <path
        d="M19.95 12H17l-1-1h-1l-1 1v2.945A3.486 3.486 0 0 0 16.5 16a3.5 3.5 0 0 0 3.5-3.5c0-.171-.027-.335-.05-.5z"
        fill="#ED6C47"
      />
      <path d="M16.5 9c-.989 0-1.867.42-2.5 1.08V12h3V9.05c-.165-.023-.329-.05-.5-.05z" fill="#FF8F6B" />
      <path d="M18.05 10.95H21A3.481 3.481 0 0 0 18.05 8v2.95z" fill="#FFC7B5" />
      <path d="M2 19h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1z" fill="#C43E1C" />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8.747 10.48c-.375-.32-.675-.48-1.385-.48H5v6h1v-2h1.288c.856.005 1.282-.293 1.61-.705.41-.515.415-1.03.415-1.42 0-.609-.188-1.073-.566-1.395zM7.155 13H6v-2h1.193c.761 0 1.142.325 1.142.975 0 .336-.1.59-.298.763-.199.175-.492.262-.882.262z"
        fill="#F9F7F7"
      />
    </svg>
  );
};

/**
 * txt icon for automation tests
 *
 * @internal
 */
export const getAttachmentIconTxt = (): JSX.Element => {
  return (
    <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M5.5 22h13c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H5.5c-.275 0-.5.225-.5.5v19c0 .275.225.5.5.5z"
        fill="#fff"
      />
      <path d="M18.293 6 15 2.707V5.5c0 .275.225.5.5.5h2.793z" fill="#fff" />
      <path
        opacity=".67"
        fillRule="evenodd"
        clipRule="evenodd"
        d="m19.56 5.854-4.414-4.415A1.51 1.51 0 0 0 14.086 1H5.5C4.673 1 4 1.673 4 2.5v19c0 .827.673 1.5 1.5 1.5h13c.827 0 1.5-.673 1.5-1.5V6.914c0-.4-.156-.777-.44-1.06zM15 2.707 18.293 6H15.5a.501.501 0 0 1-.5-.5V2.707zM5.5 22h13c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H5.5c-.275 0-.5.225-.5.5v19c0 .276.224.5.5.5z"
        fill="#605E5C"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M16.5 10h-9a.5.5 0 0 1 0-1h9a.5.5 0 0 1 0 1zm0 2h-9a.5.5 0 0 1 0-1h9a.5.5 0 0 1 0 1zm-9 2h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1zm9 2h-9a.5.5 0 0 1 0-1h9a.5.5 0 0 1 0 1zm-9 2h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1z"
        fill="#C8C6C4"
      />
    </svg>
  );
};

/**
 * pdf icon for automation tests
 *
 * @internal
 */
export const getAttachmentIconPdf = (): JSX.Element => {
  return (
    <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M5.5 22h13c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H5.5c-.275 0-.5.225-.5.5v19c0 .275.225.5.5.5z"
        fill="#fff"
      />
      <path d="M18.293 6 15 2.707V5.5c0 .275.225.5.5.5h2.793z" fill="#fff" />
      <path
        opacity=".67"
        fillRule="evenodd"
        clipRule="evenodd"
        d="m19.56 5.854-4.414-4.415A1.51 1.51 0 0 0 14.086 1H5.5C4.673 1 4 1.673 4 2.5v19c0 .827.673 1.5 1.5 1.5h13c.827 0 1.5-.673 1.5-1.5V6.914c0-.4-.156-.777-.44-1.06zM15 2.707 18.293 6H15.5a.501.501 0 0 1-.5-.5V2.707zM5.5 22h13c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H5.5c-.275 0-.5.225-.5.5v19c0 .276.224.5.5.5z"
        fill="#605E5C"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M7.5 10h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1zm0 2h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0 0 1z"
        fill="#C8C6C4"
      />
      <path
        clipRule="evenodd"
        d="M14.5 20.5h-5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1z"
        stroke="#D65532"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M6.75 20H4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h2.75a.25.25 0 0 1 .25.25v4.5a.25.25 0 0 1-.25.25zm10.5-5H20a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2.75a.25.25 0 0 1-.25-.25v-4.5a.25.25 0 0 1 .25-.25z"
        fill="#D65532"
      />
    </svg>
  );
};

/**
 * dismiss icon for automation tests
 *
 * @internal
 */
export const getAttachmentIconDismiss = (): JSX.Element => {
  return (
    <svg
      className="___1okpztj f1w7gpdv fez10in fg4l7m0 f16hsg94 fwpfdsa f88nxoq f1e2fz10"
      fill="currentColor"
      aria-hidden="true"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="m4.21 4.39.08-.1a1 1 0 0 1 1.32-.08l.1.08L12 10.6l6.3-6.3a1 1 0 1 1 1.4 1.42L13.42 12l6.3 6.3a1 1 0 0 1 .08 1.31l-.08.1a1 1 0 0 1-1.32.08l-.1-.08L12 13.4l-6.3 6.3a1 1 0 0 1-1.4-1.42L10.58 12l-6.3-6.3a1 1 0 0 1-.08-1.31l.08-.1-.08.1Z"
        fill="currentColor"
      ></path>
    </svg>
  );
};

/**
 * menu option icon for automation tests
 *
 * @internal
 */
export const getAttachmentIconMenu = (): JSX.Element => {
  return (
    <svg
      fill="currentColor"
      className="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
      aria-hidden="true"
      width="20"
      height="20"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M6.75 10a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm5 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM15 11.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z"
        fill="currentColor"
      ></path>
    </svg>
  );
};

/**
 * generic file icon for automation tests
 *
 * @internal
 *
 */
export const getAttachmentIconGenericFile = (): JSX.Element => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
      <path
        d="M5.5 22h13c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H5.5c-.275 0-.5.225-.5.5v19c0 .275.225.5.5.5z"
        fill="#fff"
      />
      <path d="M18.293 6 15 2.707V5.5c0 .275.225.5.5.5h2.793z" fill="#fff" />
      <path
        opacity=".67"
        fillRule="evenodd"
        clipRule="evenodd"
        d="m19.56 5.854-4.414-4.415A1.51 1.51 0 0 0 14.086 1H5.5C4.673 1 4 1.673 4 2.5v19c0 .827.673 1.5 1.5 1.5h13c.827 0 1.5-.673 1.5-1.5V6.914c0-.4-.156-.777-.44-1.06zM15 2.707 18.293 6H15.5a.501.501 0 0 1-.5-.5V2.707zM5.5 22h13c.275 0 .5-.225.5-.5V7h-3.5c-.827 0-1.5-.673-1.5-1.5V2H5.5c-.275 0-.5.225-.5.5v19c0 .276.224.5.5.5z"
        fill="#605E5C"
      />
    </svg>
  );
};