lims-frontent/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap

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

exports[`Alerts.vue renders correctly 1`] = `
<crow-stub
  gutters="true"
  tag="div"
>
  <ccol-stub
    col="12"
    md="6"
    tag="div"
  >
    <ccard-stub>
      <ccardheader-stub>
        <cicon-stub
          name="cil-justify-center"
        />
         
        <strong>
           Bootstrap Alert
        </strong>
         
        <div
          class="card-header-actions"
        >
          <a
            class="card-header-action"
            href="https://coreui.io/vue/docs/components/alert"
            rel="noreferrer noopener"
            target="_blank"
          >
            <small
              class="text-muted"
            >
              docs
            </small>
          </a>
        </div>
      </ccardheader-stub>
       
      <ccardbody-stub>
        <div>
          <p />
           
          <calert-stub
            color="primary"
            fade="true"
            show="true"
          >
            Primary Alert
          </calert-stub>
           
          <calert-stub
            color="secondary"
            fade="true"
            show="true"
          >
            Secondary Alert
          </calert-stub>
           
          <calert-stub
            color="success"
            fade="true"
            show="true"
          >
            Success Alert
          </calert-stub>
           
          <calert-stub
            color="danger"
            fade="true"
            show="true"
          >
            Danger Alert
          </calert-stub>
           
          <calert-stub
            color="warning"
            fade="true"
            show="true"
          >
            Warning Alert
          </calert-stub>
           
          <calert-stub
            color="info"
            fade="true"
            show="true"
          >
            Info Alert
          </calert-stub>
           
          <calert-stub
            color="light"
            fade="true"
            show="true"
          >
            Light Alert
          </calert-stub>
           
          <calert-stub
            color="dark"
            fade="true"
            show="true"
          >
            Dark Alert
          </calert-stub>
        </div>
      </ccardbody-stub>
    </ccard-stub>
  </ccol-stub>
   
  <ccol-stub
    col="12"
    md="6"
    tag="div"
  >
    <ccard-stub>
      <ccardheader-stub>
        <cicon-stub
          name="cil-justify-center"
        />
         Alert
        
        <small>
           use 
          <code>
            .alert-link
          </code>
           to provide links
        </small>
      </ccardheader-stub>
       
      <ccardbody-stub>
        <div>
          <calert-stub
            color="primary"
            fade="true"
            show="true"
          >
            
            Primary Alert with 
            <a
              class="alert-link"
              href="#"
            >
              an example link
            </a>
            .
          
          </calert-stub>
           
          <calert-stub
            color="secondary"
            fade="true"
            show="true"
          >
            
            Secondary Alert with 
            <a
              class="alert-link"
              href="#"
            >
              an example link
            </a>
            .
          
          </calert-stub>
           
          <calert-stub
            color="success"
            fade="true"
            show="true"
          >
            
            Success Alert with 
            <a
              class="alert-link"
              href="#"
            >
              an example link
            </a>
            .
          
          </calert-stub>
           
          <calert-stub
            color="danger"
            fade="true"
            show="true"
          >
            
            Danger Alert with 
            <a
              class="alert-link"
              href="#"
            >
              an example link
            </a>
            .
          
          </calert-stub>
           
          <calert-stub
            color="warning"
            fade="true"
            show="true"
          >
            
            Warning Alert with 
            <a
              class="alert-link"
              href="#"
            >
              an example link
            </a>
            .
          
          </calert-stub>
           
          <calert-stub
            color="info"
            fade="true"
            show="true"
          >
            
            Info Alert with 
            <a
              class="alert-link"
              href="#"
            >
              an example link
            </a>
            .
          
          </calert-stub>
           
          <calert-stub
            color="light"
            fade="true"
            show="true"
          >
            
            Light Alert with 
            <a
              class="alert-link"
              href="#"
            >
              an example link
            </a>
            .
          
          </calert-stub>
           
          <calert-stub
            color="dark"
            fade="true"
            show="true"
          >
            
            Dark Alert with
            
            <clink-stub
              activeclass="router-link-active"
              class="alert-link"
              event="click"
              exactactiveclass="router-link-exact-active"
              href="#"
              routertag="a"
              target="_self"
            >
              an example link
            </clink-stub>
            
            .
          
          </calert-stub>
        </div>
      </ccardbody-stub>
    </ccard-stub>
  </ccol-stub>
   
  <ccol-stub
    col="12"
    md="6"
    tag="div"
  >
    <ccard-stub>
      <ccardheader-stub>
        <cicon-stub
          name="cil-justify-center"
        />
         Alerts 
        <small>
          with additional content
        </small>
      </ccardheader-stub>
       
      <ccardbody-stub>
        <calert-stub
          color="success"
          fade="true"
          show="true"
        >
          <h4
            class="alert-heading"
          >
            Well done!
          </h4>
           
          <p>
            
            Aww yeah, you successfully read this important alert message.
            This example text is going to run a bit longer so that you can see
            how spacing within an alert works with this kind of content.
          
          </p>
           
          <hr />
           
          <p
            class="mb-0"
          >
            
            Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
          
          </p>
        </calert-stub>
      </ccardbody-stub>
    </ccard-stub>
  </ccol-stub>
   
  <ccol-stub
    col="12"
    md="6"
    tag="div"
  >
    <ccard-stub>
      <ccardheader-stub>
        <cicon-stub
          name="cil-justify-center"
        />
         Alerts
        
        <small>
          dismissible
        </small>
      </ccardheader-stub>
       
      <ccardbody-stub>
        <calert-stub
          closebutton="true"
          color="secondary"
          fade="true"
          show="true"
        >
          
          Dismissible Alert!
        
        </calert-stub>
         
        <calert-stub
          class="alert-dismissible"
          color="secondary"
          fade="true"
          show="true"
        >
          
          Dismissible Alert with custom button!
          
          <cbutton-stub
            activeclass="router-link-active"
            class="position-absolute"
            color="secondary"
            event="click"
            exactactiveclass="router-link-exact-active"
            routertag="a"
            style="right: 10px; top: 50%; transform: translateY(-50%);"
            target="_self"
            type="button"
          >
            
            Close
          
          </cbutton-stub>
        </calert-stub>
         
        <cbutton-stub
          activeclass="router-link-active"
          class="m-1"
          color="info"
          event="click"
          exactactiveclass="router-link-exact-active"
          routertag="a"
          target="_self"
          type="button"
        >
          
          Show dismissible alerts
        
        </cbutton-stub>
      </ccardbody-stub>
    </ccard-stub>
     
    <ccard-stub>
      <ccardheader-stub>
        <cicon-stub
          name="cil-justify-center"
        />
         Alerts
        
        <small>
          auto dismissible
        </small>
      </ccardheader-stub>
       
      <ccardbody-stub>
        <div>
          <calert-stub
            closebutton="true"
            color="warning"
            fade="true"
            show="10"
          >
            
            Alert will dismiss after
            
            <strong>
              10
            </strong>
             seconds...
          
          </calert-stub>
           
          <calert-stub
            closebutton="true"
            color="info"
            fade="true"
            show="10"
          >
            
            Alert will dismiss after 10 seconds...
            
            <cprogress-stub
              color="info"
              height="4px"
              max="10"
              precision="0"
              value="10"
            />
          </calert-stub>
           
          <cbutton-stub
            activeclass="router-link-active"
            class="m-1"
            color="info"
            event="click"
            exactactiveclass="router-link-exact-active"
            routertag="a"
            target="_self"
            type="button"
          >
            
            Show alert with timer
          
          </cbutton-stub>
        </div>
      </ccardbody-stub>
    </ccard-stub>
  </ccol-stub>
</crow-stub>
`;