// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`NotificationConsoleComponent renders the console 1`] = `
<div
  className="notificationConsoleContainer"
>
  <div
    aria-expanded={false}
    aria-label="Console"
    className="notificationConsoleHeader"
    id="notificationConsoleHeader"
    onClick={[Function]}
    onKeyDown={[Function]}
    role="button"
    tabIndex={0}
  >
    <div
      className="statusBar"
    >
      <span
        className="dataTypeIcons"
      >
        <span
          className="notificationConsoleHeaderIconWithData"
        >
          <img
            alt="In progress items"
            src={{}}
          />
          <span
            className="numInProgress"
          >
            0
          </span>
        </span>
        <span
          className="notificationConsoleHeaderIconWithData"
        >
          <img
            alt="Error items"
            src={{}}
          />
          <span
            className="numErroredItems"
          >
            0
          </span>
        </span>
        <span
          className="notificationConsoleHeaderIconWithData"
        >
          <img
            alt="Info items"
            src={{}}
          />
          <span
            className="numInfoItems"
          >
            0
          </span>
        </span>
        <span
          className="notificationConsoleHeaderIconWithData"
        >
          <img
            alt="Warning items"
            src={{}}
          />
          <span
            className="numWarningItems"
          >
            0
          </span>
        </span>
      </span>
      <span
        className="consoleSplitter"
      />
      <span
        className="headerStatus"
        data-test="notification-console/header-status"
      >
        <span
          aria-atomic="true"
          aria-live="assertive"
          className="headerStatusEllipsis"
        />
      </span>
    </div>
    <div
      className="expandCollapseButton"
      data-test="NotificationConsole/ExpandCollapseButton"
    >
      <img
        alt="Expand icon"
        src=""
      />
    </div>
  </div>
  <AnimateHeight
    animateOpacity={false}
    animationStateClasses={
      {
        "animating": "rah-animating",
        "animatingDown": "rah-animating--down",
        "animatingToHeightAuto": "rah-animating--to-height-auto",
        "animatingToHeightSpecific": "rah-animating--to-height-specific",
        "animatingToHeightZero": "rah-animating--to-height-zero",
        "animatingUp": "rah-animating--up",
        "static": "rah-static",
        "staticHeightAuto": "rah-static--height-auto",
        "staticHeightSpecific": "rah-static--height-specific",
        "staticHeightZero": "rah-static--height-zero",
      }
    }
    applyInlineTransitions={true}
    delay={0}
    duration={200}
    easing="ease"
    height={0}
    onAnimationEnd={[Function]}
    style={{}}
  >
    <div
      className="notificationConsoleContents"
      data-test="NotificationConsole/Contents"
    >
      <div
        className="notificationConsoleControls"
      >
        <Dropdown
          label="Filter:"
          onChange={[Function]}
          options={
            [
              {
                "key": "All",
                "text": "All",
              },
              {
                "key": "In Progress",
                "text": "In progress",
              },
              {
                "key": "Info",
                "text": "Info",
              },
              {
                "key": "Error",
                "text": "Error",
              },
            ]
          }
          selectedKey="All"
          styles={
            {
              "callout": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "border": "1px solid var(--colorNeutralStroke1)",
              },
              "caretDown": {
                "color": "var(--colorNeutralForeground1)",
              },
              "dropdown": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground1)",
              },
              "dropdownItem": {
                "backgroundColor": "transparent",
                "color": "var(--colorNeutralForeground1)",
                "selectors": {
                  "&:focus": {
                    "backgroundColor": "var(--colorNeutralBackground4)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "&:hover": {
                    "backgroundColor": "var(--colorNeutralBackground4)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  ".ms-Dropdown-optionText": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                },
              },
              "dropdownItemSelected": {
                "backgroundColor": "var(--colorBrandBackground)",
                "color": "var(--colorNeutralForegroundOnBrand)",
                "selectors": {
                  ".ms-Dropdown-optionText": {
                    "color": "var(--colorNeutralForegroundOnBrand)",
                  },
                },
              },
              "dropdownItems": {
                "backgroundColor": "var(--colorNeutralBackground2)",
              },
              "dropdownOptionText": {
                "color": "var(--colorNeutralForeground1)",
              },
              "label": {
                "color": "var(--colorNeutralForeground1)",
              },
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
              "title": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground1)",
                "fontSize": "14px",
                "selectors": {
                  "&:after": {
                    "borderColor": "var(--colorNeutralStroke1)",
                  },
                  "&:focus": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "borderColor": "var(--colorBrandStroke1)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "&:hover": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "borderColor": "var(--colorNeutralStroke1)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "span": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                },
              },
            }
          }
        />
        <span
          className="consoleSplitter"
        />
        <span
          className="clearNotificationsButton"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="button"
          style={
            {
              "border": "1px solid black",
              "borderRadius": "2px",
            }
          }
          tabIndex={0}
        >
          <img
            alt="clear notifications image"
            src={{}}
          />
          Clear Notifications
        </span>
      </div>
      <div
        className="notificationConsoleData"
      />
    </div>
  </AnimateHeight>
</div>
`;

exports[`NotificationConsoleComponent renders the console 2`] = `
<div
  className="notificationConsoleContainer"
>
  <div
    aria-expanded={false}
    aria-label="Console"
    className="notificationConsoleHeader"
    id="notificationConsoleHeader"
    onClick={[Function]}
    onKeyDown={[Function]}
    role="button"
    tabIndex={0}
  >
    <div
      className="statusBar"
    >
      <span
        className="dataTypeIcons"
      >
        <span
          className="notificationConsoleHeaderIconWithData"
        >
          <img
            alt="In progress items"
            src={{}}
          />
          <span
            className="numInProgress"
          >
            0
          </span>
        </span>
        <span
          className="notificationConsoleHeaderIconWithData"
        >
          <img
            alt="Error items"
            src={{}}
          />
          <span
            className="numErroredItems"
          >
            0
          </span>
        </span>
        <span
          className="notificationConsoleHeaderIconWithData"
        >
          <img
            alt="Info items"
            src={{}}
          />
          <span
            className="numInfoItems"
          >
            1
          </span>
        </span>
        <span
          className="notificationConsoleHeaderIconWithData"
        >
          <img
            alt="Warning items"
            src={{}}
          />
          <span
            className="numWarningItems"
          >
            0
          </span>
        </span>
      </span>
      <span
        className="consoleSplitter"
      />
      <span
        className="headerStatus"
        data-test="notification-console/header-status"
      >
        <span
          aria-atomic="true"
          aria-live="assertive"
          className="headerStatusEllipsis"
        >
          message
        </span>
      </span>
    </div>
    <div
      className="expandCollapseButton"
      data-test="NotificationConsole/ExpandCollapseButton"
    >
      <img
        alt="Expand icon"
        src=""
      />
    </div>
  </div>
  <AnimateHeight
    animateOpacity={false}
    animationStateClasses={
      {
        "animating": "rah-animating",
        "animatingDown": "rah-animating--down",
        "animatingToHeightAuto": "rah-animating--to-height-auto",
        "animatingToHeightSpecific": "rah-animating--to-height-specific",
        "animatingToHeightZero": "rah-animating--to-height-zero",
        "animatingUp": "rah-animating--up",
        "static": "rah-static",
        "staticHeightAuto": "rah-static--height-auto",
        "staticHeightSpecific": "rah-static--height-specific",
        "staticHeightZero": "rah-static--height-zero",
      }
    }
    applyInlineTransitions={true}
    delay={0}
    duration={200}
    easing="ease"
    height={0}
    onAnimationEnd={[Function]}
    style={{}}
  >
    <div
      className="notificationConsoleContents"
      data-test="NotificationConsole/Contents"
    >
      <div
        className="notificationConsoleControls"
      >
        <Dropdown
          label="Filter:"
          onChange={[Function]}
          options={
            [
              {
                "key": "All",
                "text": "All",
              },
              {
                "key": "In Progress",
                "text": "In progress",
              },
              {
                "key": "Info",
                "text": "Info",
              },
              {
                "key": "Error",
                "text": "Error",
              },
            ]
          }
          selectedKey="All"
          styles={
            {
              "callout": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "border": "1px solid var(--colorNeutralStroke1)",
              },
              "caretDown": {
                "color": "var(--colorNeutralForeground1)",
              },
              "dropdown": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground1)",
              },
              "dropdownItem": {
                "backgroundColor": "transparent",
                "color": "var(--colorNeutralForeground1)",
                "selectors": {
                  "&:focus": {
                    "backgroundColor": "var(--colorNeutralBackground4)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "&:hover": {
                    "backgroundColor": "var(--colorNeutralBackground4)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  ".ms-Dropdown-optionText": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                },
              },
              "dropdownItemSelected": {
                "backgroundColor": "var(--colorBrandBackground)",
                "color": "var(--colorNeutralForegroundOnBrand)",
                "selectors": {
                  ".ms-Dropdown-optionText": {
                    "color": "var(--colorNeutralForegroundOnBrand)",
                  },
                },
              },
              "dropdownItems": {
                "backgroundColor": "var(--colorNeutralBackground2)",
              },
              "dropdownOptionText": {
                "color": "var(--colorNeutralForeground1)",
              },
              "label": {
                "color": "var(--colorNeutralForeground1)",
              },
              "root": {
                "color": "var(--colorNeutralForeground1)",
              },
              "title": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground1)",
                "fontSize": "14px",
                "selectors": {
                  "&:after": {
                    "borderColor": "var(--colorNeutralStroke1)",
                  },
                  "&:focus": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "borderColor": "var(--colorBrandStroke1)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "&:hover": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "borderColor": "var(--colorNeutralStroke1)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "span": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                },
              },
            }
          }
        />
        <span
          className="consoleSplitter"
        />
        <span
          className="clearNotificationsButton"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="button"
          style={
            {
              "border": "1px solid black",
              "borderRadius": "2px",
            }
          }
          tabIndex={0}
        >
          <img
            alt="clear notifications image"
            src={{}}
          />
          Clear Notifications
        </span>
      </div>
      <div
        className="notificationConsoleData"
      >
        <div
          className="rowData"
          key="0"
        >
          <img
            alt="info"
            className="infoIcon"
            src={{}}
          />
          <span
            className="date"
          >
            date
          </span>
          <span
            aria-live="assertive"
            className="message"
            role="alert"
          >
            message
          </span>
        </div>
      </div>
    </div>
  </AnimateHeight>
</div>
`;
