passbolt-styleguide/src/shared/components/Icons/Icon.test.stories.js

Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.

import React from "react";
import AccountRecoverySVG from "../../../img/svg/account_recovery.svg";
import ActivitySVG from "../../../img/svg/activity.svg";
import AddSVG from "../../../img/svg/add.svg";
import AlarmClockSVG from "../../../img/svg/alarm_clock.svg";
import AlignLeftSVG from "../../../img/svg/align_left.svg";
import AllItemsSVG from "../../../img/svg/all_items.svg";
import ArrowBigDownDashSVG from "../../../img/svg/arrow_big_down_dash.svg";
import ArrowBigUpDashSVG from "../../../img/svg/arrow_big_up_dash.svg";
import ArrowDownSVG from "../../../img/svg/arrow_down.svg";
import ArrowUpSVG from "../../../img/svg/arrow_up.svg";
import ArrowLeftSVG from "../../../img/svg/arrow_left.svg";
import AttentionSVG from "../../../img/svg/attention.svg";
import BellSVG from "../../../img/svg/bell.svg";
import BuoySVG from "../../../img/svg/buoy.svg";
import CabinetSVG from "../../../img/svg/cabinet.svg";
import CalendarSVG from "../../../img/svg/calendar.svg";
import CalendarClockSVG from "../../../img/svg/calendar_clock.svg";
import CalendarCogSVG from "../../../img/svg/calendar_cog.svg";
import CameraSVG from "../../../img/svg/camera.svg";
import CardSVG from "../../../img/svg/card.svg";
import CaretDownSVG from "../../../img/svg/caret_down.svg";
import CaretLeftSVG from "../../../img/svg/caret_left.svg";
import CaretRightSVG from "../../../img/svg/caret_right.svg";
import CastleSVG from "../../../img/svg/castle.svg";
import ChevronLeftSVG from "../../../img/svg/chevron_left.svg";
import ChevronRightSVG from "../../../img/svg/chevron_right.svg";
import CircleEllipsisSVG from "../../../img/svg/circle_ellipsis.svg";
import CircleOffSVG from "../../../img/svg/circle_off.svg";
import CircleXSVG from "../../../img/svg/circle_x.svg";
import ClockSVG from "../../../img/svg/clock.svg";
import CloseSVG from "../../../img/svg/close.svg";
import CogSVG from "../../../img/svg/cog.svg";
import CoinsSVG from "../../../img/svg/coins.svg";
import CollapseLeftSVG from "../../../img/svg/collapse_left.svg";
import CollapseRightSVG from "../../../img/svg/collapse_right.svg";
import ColumnsSVG from "../../../img/svg/columns.svg";
import CommentsSVG from "../../../img/svg/comments.svg";
import CompactSVG from "../../../img/svg/compact.svg";
import CopySVG from "../../../img/svg/copy.svg";
import CustomFieldsSVG from "../../../img/svg/custom_fields.svg";
import CustomField2SVG from "../../../img/svg/custom_fields_2.svg";
import DeleteSVG from "../../../img/svg/delete.svg";
import DescriptionSVG from "../../../img/svg/description.svg";
import DesktopSVG from "../../../img/svg/desktop.svg";
import DetailsSVG from "../../../img/svg/details.svg";
import DiceSVG from "../../../img/svg/dice.svg";
import DictionaryCheckSVG from "../../../img/svg/dictionary_check.svg";
import DownloadFileSVG from "../../../img/svg/download_file.svg";
import EditSVG from "../../../img/svg/edit.svg";
import EmailSVG from "../../../img/svg/email.svg";
import EmailNotificationsSVG from "../../../img/svg/email_notifications.svg";
import EmailServerSVG from "../../../img/svg/email_server.svg";
import ExpirySVG from "../../../img/svg/expiry.svg";
import ExportSVG from "../../../img/svg/export.svg";
import EyeCloseSVG from "../../../img/svg/eye_close.svg";
import EyeOpenSVG from "../../../img/svg/eye_open.svg";
import FavoriteSVG from "../../../img/svg/favorite.svg";
import FileSVG from "../../../img/svg/file.svg";
import FileArchiveSVG from "../../../img/svg/file_archive.svg";
import FileBadge2SVG from "../../../img/svg/file_badge_2.svg";
import FileChartLineSVG from "../../../img/svg/file_chart_line.svg";
import FileCodeSVG from "../../../img/svg/file_code.svg";
import FileImageSVG from "../../../img/svg/file_image.svg";
import FileJsonSVG from "../../../img/svg/file_json.svg";
import FileKeySVG from "../../../img/svg/file_key.svg";
import FileKey2SVG from "../../../img/svg/file_key_2.svg";
import FileSpreadsheetSVG from "../../../img/svg/file_spreadsheet.svg";
import FileTerminalSVG from "../../../img/svg/file_terminal.svg";
import FileTextSVG from "../../../img/svg/file_text.svg";
import FileUpSVG from "../../../img/svg/file_up.svg";
import FileVideoSVG from "../../../img/svg/file_video.svg";
import FileVolumeSVG from "../../../img/svg/file_volume.svg";
import FilterSVG from "../../../img/svg/filter.svg";
import FingerprintSVG from "../../../img/svg/fingerprint.svg";
import FingerprintDisabledSVG from "../../../img/svg/fingerprint_disabled.svg";
import FolderSVG from "../../../img/svg/folder.svg";
import FolderPlusSVG from "../../../img/svg/folder_plus.svg";
import FolderV2SVG from "../../../img/svg/folder_v2.svg";
import GhostSVG from "../../../img/svg/ghost.svg";
import GlobeSVG from "../../../img/svg/globe.svg";
import GoSVG from "../../../img/svg/go.svg";
import GroupOwnedByMeSVG from "../../../img/svg/owned_by_me.svg";
import HealthcheckErrorSVG from "../../../img/svg/healthcheck_error.svg";
import HealthcheckInfoSVG from "../../../img/svg/healthcheck_info.svg";
import HealthcheckSuccessSVG from "../../../img/svg/healthcheck_success.svg";
import HealthcheckWarningSVG from "../../../img/svg/healthcheck_warning.svg";
import HeartSVG from "../../../img/svg/heart.svg";
import HelpSVG from "../../../img/svg/help.svg";
import HistorySVG from "../../../img/svg/history.svg";
import HomeSVG from "../../../img/svg/home.svg";
import ImageSVG from "../../../img/svg/image.svg";
import ImportSVG from "../../../img/svg/import.svg";
import InfoSVG from "../../../img/svg/info.svg";
import InternationalSVG from "../../../img/svg/international.svg";
import KeySVG from "../../../img/svg/key.svg";
import KeySquareSVG from "../../../img/svg/key_square.svg";
import KingSVG from "../../../img/svg/king.svg";
import LdapSVG from "../../../img/svg/ldap.svg";
import LibrarySVG from "../../../img/svg/library.svg";
import LinkSVG from "../../../img/svg/link.svg";
import ListSVG from "../../../img/svg/list.svg";
import ListCheckSVG from "../../../img/svg/list_check.svg";
import LockSVG from "../../../img/svg/lock.svg";
import LockedSVG from "../../../img/svg/locked.svg";
import LogoutSVG from "../../../img/svg/logout.svg";
import MenuSVG from "../../../img/svg/menu.svg";
import MetadataKeySVG from "../../../img/svg/metadata_key.svg";
import MfaSVG from "../../../img/svg/mfa.svg";
import MfaPolicySVG from "../../../img/svg/mfa_policy.svg";
import MobileSVG from "../../../img/svg/mobile.svg";
import MoreHorizontalSVG from "../../../img/svg/more_horizontal.svg";
import MoreVerticalSVG from "../../../img/svg/more_vertical.svg";
import MoveSVG from "../../../img/svg/move.svg";
import NotSharedSVG from "../../../img/svg/not_shared.svg";
import NotesSVG from "../../../img/svg/notes.svg";
import PaintbrushSVG from "../../../img/svg/paintbrush.svg";
import PaletteSVG from "../../../img/svg/palette.svg";
import PlugSVG from "../../../img/svg/plug.svg";
import PanelsTopLeftSVG from "../../../img/svg/panels_top_left.svg";
import PassboltSVG from "../../../img/svg/passbolt.svg";
import PassphrasePolicySVG from "../../../img/svg/passphrase_policy.svg";
import PasswordPolicySVG from "../../../img/svg/password_policy.svg";
import PinSVG from "../../../img/svg/pin.svg";
import PowerSVG from "../../../img/svg/power.svg";
import ProfileSVG from "../../../img/svg/profile.svg";
import RbacSVG from "../../../img/svg/rbac.svg";
import RefreshSVG from "../../../img/svg/refresh.svg";
import RenameSVG from "../../../img/svg/rename.svg";
import ReplySVG from "../../../img/svg/reply.svg";
import ResourcesSVG from "../../../img/svg/resources.svg";
import RevertSVG from "../../../img/svg/revert.svg";
import SaveSVG from "../../../img/svg/save.svg";
import SearchSVG from "../../../img/svg/search.svg";
import SecretHistorySVG from "../../../img/svg/secret_history.svg";
import SelectResourceSVG from "../../../img/svg/select_resource.svg";
import SelectUserSVG from "../../../img/svg/select_user.svg";
import SelfRegisterSVG from "../../../img/svg/self_register.svg";
import SendSVG from "../../../img/svg/send.svg";
import SettingsSVG from "../../../img/svg/settings.svg";
import ShapesSVG from "../../../img/svg/shapes.svg";
import ShareSVG from "../../../img/svg/share.svg";
import ShareFolderSVG from "../../../img/svg/share_folder.svg";
import ShareWithSVG from "../../../img/svg/share_with.svg";
import ShieldCheckSVG from "../../../img/svg/shield_check.svg";
import SlidersSVG from "../../../img/svg/sliders.svg";
import SlidersHorizontalSVG from "../../../img/svg/sliders_horizontal.svg";
import SpinnerSVG from "../../../img/svg/spinner.svg";
import SsoSVG from "../../../img/svg/sso.svg";
import SubscriptionSVG from "../../../img/svg/subscription.svg";
import SwordsSVG from "../../../img/svg/swords.svg";
import TablePropertiesSVG from "../../../img/svg/table_properties.svg";
import TagSVG from "../../../img/svg/tag.svg";
import TagV2SVG from "../../../img/svg/tag_v2.svg";
import TagsSVG from "../../../img/svg/tags.svg";
import TerminalSVG from "../../../img/svg/terminal.svg";
import TestSVG from "../../../img/svg/test.svg";
import TextLockSVG from "../../../img/svg/text-lock.svg";
import TextCursorInputSVG from "../../../img/svg/text_cursor_input.svg";
import TimerSVG from "../../../img/svg/timer.svg";
import TotpSVG from "../../../img/svg/totp.svg";
import TriangleAlertSVG from "../../../img/svg/triangle_alert.svg";
import UnfavoriteSVG from "../../../img/svg/unfavorite.svg";
import UnlockSVG from "../../../img/svg/unlock.svg";
import UnlockedSVG from "../../../img/svg/unlocked.svg";
import UnsyncedSVG from "../../../img/svg/unsynced.svg";
import UploadFileSVG from "../../../img/svg/upload_file.svg";
import UserAddSVG from "../../../img/svg/user_add.svg";
import UserCheckSVG from "../../../img/svg/user_check.svg";
import UserClockSVG from "../../../img/svg/user_clock.svg";
import UserCogSVG from "../../../img/svg/user_cog.svg";
import UserSearchSVG from "../../../img/svg/user_search.svg";
import UserXSVG from "../../../img/svg/user_x.svg";
import UsersSVG from "../../../img/svg/users.svg";
import VenetianMaskSVG from "../../../img/svg/venetian_mask.svg";
import WalletSVG from "../../../img/svg/wallet.svg";
import AnimatedFeedback from "./AnimatedFeedback";
import QrCodeSVG from "../../../img/svg/qr_code.svg";

export default {
  title: "Foundations/Icon",
  component: "Icon",
};

const iconsSVGs = [
  ActivitySVG,
  AddSVG,
  AlarmClockSVG,
  AlignLeftSVG,
  AllItemsSVG,
  ArrowBigDownDashSVG,
  ArrowBigUpDashSVG,
  ArrowDownSVG,
  ArrowUpSVG,
  ArrowLeftSVG,
  AttentionSVG,
  BellSVG,
  BuoySVG,
  CabinetSVG,
  CalendarSVG,
  CalendarClockSVG,
  CalendarCogSVG,
  CameraSVG,
  CardSVG,
  CaretDownSVG,
  CaretLeftSVG,
  CaretRightSVG,
  CastleSVG,
  ChevronLeftSVG,
  ChevronRightSVG,
  CircleEllipsisSVG,
  CircleXSVG,
  ClockSVG,
  CloseSVG,
  CogSVG,
  CoinsSVG,
  CollapseLeftSVG,
  CollapseRightSVG,
  ColumnsSVG,
  CommentsSVG,
  CompactSVG,
  CopySVG,
  CustomFieldsSVG,
  CustomField2SVG,
  DeleteSVG,
  DescriptionSVG,
  DesktopSVG,
  DetailsSVG,
  DiceSVG,
  DownloadFileSVG,
  EditSVG,
  EmailSVG,
  ExportSVG,
  EyeCloseSVG,
  EyeOpenSVG,
  FavoriteSVG,
  FileSVG,
  FileArchiveSVG,
  FileBadge2SVG,
  FileChartLineSVG,
  FileCodeSVG,
  FileImageSVG,
  FileJsonSVG,
  FileKeySVG,
  FileSpreadsheetSVG,
  FileTerminalSVG,
  FileTextSVG,
  FileVideoSVG,
  FileVolumeSVG,
  FilterSVG,
  FingerprintSVG,
  FingerprintDisabledSVG,
  FolderSVG,
  FolderPlusSVG,
  FolderV2SVG,
  GhostSVG,
  GlobeSVG,
  GoSVG,
  GroupOwnedByMeSVG,
  HealthcheckErrorSVG,
  HealthcheckInfoSVG,
  HealthcheckSuccessSVG,
  HealthcheckWarningSVG,
  HeartSVG,
  HelpSVG,
  HistorySVG,
  HomeSVG,
  ImageSVG,
  ImportSVG,
  InfoSVG,
  KeySVG,
  KeySquareSVG,
  KingSVG,
  LibrarySVG,
  LinkSVG,
  ListSVG,
  ListCheckSVG,
  LockSVG,
  LockedSVG,
  LogoutSVG,
  MenuSVG,
  MetadataKeySVG,
  MobileSVG,
  MoreHorizontalSVG,
  MoreVerticalSVG,
  MoveSVG,
  NotSharedSVG,
  NotesSVG,
  PaintbrushSVG,
  PaletteSVG,
  PlugSVG,
  PanelsTopLeftSVG,
  PassboltSVG,
  PinSVG,
  PowerSVG,
  ProfileSVG,
  QrCodeSVG,
  RefreshSVG,
  RenameSVG,
  ReplySVG,
  ResourcesSVG,
  RevertSVG,
  SaveSVG,
  SearchSVG,
  SendSVG,
  SettingsSVG,
  ShareSVG,
  ShareFolderSVG,
  ShareWithSVG,
  ShieldCheckSVG,
  SlidersSVG,
  SlidersHorizontalSVG,
  SwordsSVG,
  TablePropertiesSVG,
  TagSVG,
  TagV2SVG,
  TagsSVG,
  TerminalSVG,
  TestSVG,
  TextCursorInputSVG,
  TotpSVG,
  TriangleAlertSVG,
  UnfavoriteSVG,
  UnlockSVG,
  UnlockedSVG,
  UnsyncedSVG,
  UploadFileSVG,
  UserAddSVG,
  UserCheckSVG,
  UserClockSVG,
  UserCogSVG,
  UserSearchSVG,
  UserXSVG,
  UsersSVG,
  VenetianMaskSVG,
  WalletSVG,
];

const settingIconsSVGs = [
  ShapesSVG,
  TextLockSVG,
  FileKey2SVG,
  MfaSVG,
  SelfRegisterSVG,
  MfaPolicySVG,
  SsoSVG,
  PasswordPolicySVG,
  SecretHistorySVG,
  RbacSVG,
  LdapSVG,
  PassphrasePolicySVG,
  ExpirySVG,
  EmailNotificationsSVG,
  InternationalSVG,
  DictionaryCheckSVG,
  SubscriptionSVG,
  AccountRecoverySVG,
  EmailServerSVG,
  SelectUserSVG,
  SelectResourceSVG,
  CircleOffSVG,
  FileUpSVG,
];

function getSvgName(SVGIcon) {
  return SVGIcon.name.substr(3);
}

export const Icons = {
  render: () => (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, 10%)" }}>
      {iconsSVGs.map((Icon, index) => (
        <div key={index} style={{ marginTop: "1rem" }} title={getSvgName(Icon)}>
          <Icon className="svg-icon" />
        </div>
      ))}
      <div style={{ marginTop: "1rem" }}>
        <SpinnerSVG />
      </div>
      <div style={{ marginTop: "1rem" }}>
        <TimerSVG />
      </div>
    </div>
  ),
};

export const SettingsIcons = {
  render: () => (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, 10%)" }}>
      {settingIconsSVGs.map((Icon, index) => (
        <div key={index} style={{ marginTop: "1rem" }} title={getSvgName(Icon)}>
          <Icon className="svg-icon" />
        </div>
      ))}
    </div>
  ),
};

export const AnimatedFeedbackIcons = {
  render: () => (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, 10%)" }}>
      <AnimatedFeedback name="success" />
      <AnimatedFeedback name="warning" />
      <AnimatedFeedback name="attention" />
      <AnimatedFeedback name="error" />
    </div>
  ),
};