Merge pull request #761 from patternfly/feat-issue-741-add-event-cta

feat: Add event emission to pfe-cta (#741)

Author: alazzara

CHANGELOG-prerelease.md

@@ -2,8 +2,8 @@
 
 Tag: [v1.0.0-prerelease.42](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.42)
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: set consistent line-height for pfe-nav triggers (#773)
-
+- [fbc251b](https://github.com/patternfly/patternfly-elements/commit/fbc251b5180684da26a57c0941235d57f961990e) fix: set consistent line-height for pfe-nav triggers (#773)
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: adding event to pfe-cta component
 
 ## Prerelease 41 ( 2020-03-19 )
 

elements/pfe-cta/README.md

@@ -131,6 +131,12 @@ If you'd like to checkout how theming is possible using our CSS Var hooks, try a
 </style>
 ```
 
+## Events
+
+### pfe-cta:select
+
+This event is fired when a link is clicked and serves as a way to capture click events if necessary.
+
 ## Test
 
     npm run test

elements/pfe-cta/demo/demo.css

@@ -3,11 +3,6 @@ h2 {
   margin: 15px 0 10px;
 }
 
-hr {
-  border-bottom: 1px solid #ddd;
-  width: 100%;
-}
-
 pfe-band {
   --pfe-band--Padding--horizontal: 60px;
   --pfe-band--Width: 100%;
@@ -17,42 +12,91 @@ pfe-band[pfe-color="lightest"] pfe-card[pfe-color="lightest"] {
   --pfe-card--Border: 1px solid rgba(45, 45, 45, 0.3);
 }
 
+.default-link-test {
+  display: flex;
+  flex-flow: row nowrap;
+  border: 1px solid #ddd;
+  width: 305px;
+  padding: 10px;
+}
+
 .resize {
   resize: horizontal;
   overflow: auto;
-  border: 1px solid #ddd;
-  width: 700px;
-  padding: 10px;
 }
 
-.resize>pfe-cta:first-child {
+.resize > pfe-cta:first-child {
   margin-right: 20px;
 }
 
+.cta-layout,
 .card-layout {
   display: flex;
   flex-flow: row wrap;
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
   margin-top: -10px;
   margin-left: -20px;
+  @supports (display: grid) {
+    display: grid;
+    grid-row-gap: 10px;
+    grid-column-gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    margin-top: 0;
+    margin-left: 0;
+  }
+}
+
+.cta-layout > *:not([class~="layout"]),
+.card-layout .cta-align > * {
+  margin-top: 10px;
+  margin-left: 20px;
+  @supports (display: grid) {
+    margin-top: 0;
+    margin-left: 0;
+  }
 }
 
-.card-layout>pfe-cta,
-.card-layout .cta-align>pfe-cta {
+.card-layout > *:not([class~="layout"]) {
+  width: min-content;
+  min-width: 350px;
+  flex-grow: 1;
   margin-top: 10px;
   margin-left: 20px;
 }
 
+.cta-layout {
+  grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
+}
+
+.event-registry {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  font-size: var(--pfe-theme--font-size--zeta, 14px);
+}
+
+.event-registry span {
+  display: inline-block;
+  padding: 5px 10px;
+}
+
+.event-registry pfe-icon {
+  --pfe-icon--Color: #444;
+  float: left;
+}
+
+.event-registry pfe-icon:not([on="light"]) {
+  --pfe-icon--Color: #fff;
+  float: left;
+}
+
 .custom-dark-band {
-  padding: 60px 15px;
+  padding: 15px;
   background: #222;
   --theme: dark;
 }
 
 .custom-saturated-band {
-  padding: 60px 15px;
+  padding: 15px;
   background: #0c8488;
   --theme: saturated;
-}
+}