Call to action

<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css">
<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css">
<link rel="stylesheet" href="demo.css">
<script type="module" src="rh-cta.js"></script>

<section id="variants">
  <h2>Variants</h2>
  <rh-cta><a href="#default">Default</a></rh-cta>
  <rh-cta icon="circle-play"><a href="#default-video">Default Video</a></rh-cta>
  <rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
  <rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
  <rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
  <rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
  <rh-cta variant="brick" icon="user"><a href="#brick-icon">Brick Icon</a></rh-cta>
</section>

<rh-context-provider id="dark" color-palette="darkest">
  <h2>Dark Colour Context</h2>
  <rh-cta><a href="#default">Default</a></rh-cta>
  <rh-cta icon="circle-play"><a href="#default-video">Default Video</a></rh-cta>
  <rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
  <rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
  <rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
  <rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
  <rh-cta variant="brick" icon="user"><a href="#brick-icon">Brick Icon</a></rh-cta>
</rh-context-provider>

<section dir="rtl">
  <h2>Right-to-Left Languages</h2>
  <rh-cta><a href="#default">ברירת מחדל</a></rh-cta>
  <rh-cta icon="circle-play"><a href="#default-video">ברירת מחדל - וידאו</a></rh-cta>
  <rh-cta variant="primary"><a href="#primary">ראשי</a></rh-cta>
  <rh-cta variant="primary" icon="circle-play"><a href="#primary-video">ראשי - וידאו</a></rh-cta>
  <rh-cta variant="secondary"><a href="#secondary">משני</a></rh-cta>
  <rh-cta variant="brick"><a href="#brick">לבנה</a></rh-cta>
  <rh-cta variant="brick" icon="user"><a href="#brick-icon">לבנה עם אייקון</a></rh-cta>
</section>

<section dir="rtl">
  <h2>Deep Shadow RTL</h2>
  <p dir="ltr">When the CTA is found within the shadow root of an element which is itself within a RTL context.</p>
  <shadow-root>
    <template shadowroot="open">
      <style>
        :host {
          display: flex;
          flex-flow: row wrap;
          gap: 16px;
        }
      </style>
      <rh-cta id="deep"><a href="#default">ברירת מחדל</a></rh-cta>
      <rh-cta icon="circle-play"><a href="#default-video">ברירת מחדל - וידאו</a></rh-cta>
      <rh-cta variant="primary"><a href="#primary">ראשי</a></rh-cta>
      <rh-cta variant="primary" icon="circle-play"><a href="#primary-video">ראשי - וידאו</a></rh-cta>
      <rh-cta variant="secondary"><a href="#secondary">משני</a></rh-cta>
      <rh-cta variant="brick"><a href="#brick">לבנה</a></rh-cta>
      <rh-cta variant="brick" icon="user"><a href="#brick-icon">לבנה עם אייקון</a></rh-cta>
    </template>
  </shadow-root>
</section>

<section id="resizing">
  <h2>Resizing</h2>
  <div class="resize">
    <rh-cta><a href="#default">Get product details</a></rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta icon="circle-play"><a href="#default-video">Get product details</a></rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta variant="primary"><a href="#primary">Get product details</a></rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Get product details</a></rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta variant="secondary"><a href="#secondary">Get product details</a></rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta variant="brick"><a href="#brick">Get product details</a></rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta variant="brick" icon="user"><a href="#brick-icon">Get product details</a></rh-cta>
  </div>
</section>

<section id="resizing">
  <h2>Extra-long words</h2>
  <div class="resize">
    <rh-cta>
      <a href="#default">Supercalifragilisticexpialidocious</a>
    </rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta icon="circle-play">
      <a href="#default-video">Supercalifragilisticexpialidocious</a>
    </rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta variant="primary">
      <a href="#primary">Supercalifragilisticexpialidocious</a>
    </rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta variant="primary" icon="circle-play">
      <a href="#primary-video">Supercalifragilisticexpialidocious</a>
    </rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta variant="secondary">
      <a href="#secondary">Supercalifragilisticexpialidocious</a>
    </rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta variant="brick">
      <a href="#brick">Supercalifragilisticexpialidocious</a>
    </rh-cta>
  </div>
  <br>
  <div class="resize">
    <rh-cta variant="brick" icon="user">
      <a href="#brick-icon">Supercalifragilisticexpialidocious</a>
    </rh-cta>
  </div>
</section>

<section id="wrap">
  <h2>Force wrap to test arrow line-wrap</h2>
  <p>No matter the container size, the arrow trailing the CTA message should never appear on a line by itself.</p>
  <div class="resize">
    <rh-cta><a href="#default">Default link cta with longer text</a></rh-cta>
  </div>
  <div class="resize" dir="rtl">
    <rh-cta><a href="#default">קריאה לפעולה בררית מחדל עם טקסט ארוך</a></rh-cta>
  </div>
</section>

<section id="link-button" class="grid">
  <h2>Link and button styles (displayed inline)</h2>
  <rh-cta><a href="">Link</a></rh-cta>
  <rh-cta><button>Button</button></rh-cta>

  <rh-cta variant="primary"><a href="">Link</a></rh-cta>
  <rh-cta variant="primary"><button>Button</button></rh-cta>

  <rh-cta variant="secondary"><a href="">Link</a></rh-cta>
  <rh-cta variant="secondary"><button>Button</button></rh-cta>

</section>