From 601d689f05780d207a75a8b54f9bb86063f40e4f Mon Sep 17 00:00:00 2001
From: Eric Tsang <etsang@redhat.com>
Date: Aug 23 2017 14:33:51 +0000
Subject: Added initial ticket list pattern


---

diff --git a/source/_patterns/02-organisms/lists/ticket-list.md b/source/_patterns/02-organisms/lists/ticket-list.md
new file mode 100644
index 0000000..d4e82cf
--- /dev/null
+++ b/source/_patterns/02-organisms/lists/ticket-list.md
@@ -0,0 +1,5 @@
+---
+title: Ticket List
+---
+
+[Insert description here]
diff --git a/source/_patterns/02-organisms/lists/ticket-list.mustache b/source/_patterns/02-organisms/lists/ticket-list.mustache
new file mode 100644
index 0000000..d0b6ee0
--- /dev/null
+++ b/source/_patterns/02-organisms/lists/ticket-list.mustache
@@ -0,0 +1,66 @@
+<ul class="c-ticket-list">
+
+	<li>
+		<h6 class="list-item-title">#591162</h6>
+		<div class="origin">
+			<p>bugzilla.redhat.com</p>
+			<img src="../../../images/icon-redhat.svg">
+		</div>
+		<div style="clear: both;"></div>
+		<h5 class="list-subheader">no sound after waking up from suspend</h5>
+		<p class="list-item-info">Fedora 13 / pulseaudio</p>
+		<p class="list-item-data">NEEDINFO</p>
+		<button class="c-widget-action-btn btn btn-secondary">
+			<img src="../../../images/icon-arrow.svg">
+		</button>
+		<div style="clear: both;"></div>
+	</li>
+
+	<li>
+		<h6 class="list-item-title">#8</h6>
+		<div class="origin">
+			<p>pagure.io</p>
+			<img src="../../../images/icon-pagure.svg">
+		</div>
+		<div style="clear: both;"></div>
+		<h5 class="list-subheader">Hubs Owner + Community Rules Widget</h5>
+		<p class="list-item-info">fedora-hubs</p>
+		<p class="list-item-data">OPEN</p>
+		<button class="c-widget-action-btn btn btn-secondary">
+			<img src="../../../images/icon-arrow.svg">
+		</button>
+		<div style="clear: both;"></div>
+	</li>
+
+	<li>
+		<h6 class="list-item-title">#363</h6>
+		<div class="origin">
+			<p>fedorahosted.org</p>
+			<img src="../../../images/icon-fedorahosted.svg">
+		</div>
+		<div style="clear: both;"></div>
+		<h5 class="list-subheader">Mockup request for new spins.fpo and</h5>
+		<p class="list-item-info">design-team</p>
+		<p class="list-item-data">OPEN</p>
+		<button class="c-widget-action-btn btn btn-secondary">
+			<img src="../../../images/icon-arrow.svg">
+		</button>
+		<div style="clear: both;"></div>
+	</li>
+
+	<li>
+		<h6 class="list-item-title">#363</h6>
+		<div class="origin">
+			<p>fedorahosted.org</p>
+			<img src="../../../images/icon-fedorahosted.svg">
+		</div>
+		<div style="clear: both;"></div>
+		<h5 class="list-subheader">Mockup request for new spins.fpo and</h5>
+		<p class="list-item-info">design-team</p>
+		<p class="list-item-data">OPEN</p>
+		<button class="c-widget-action-btn btn btn-secondary">
+			<img src="../../../images/icon-arrow.svg">
+		</button>
+		<div style="clear: both;"></div>
+	</li>
+</ul>
diff --git a/source/css/scss/components/_lists.scss b/source/css/scss/components/_lists.scss
index a14c2d4..c1ab176 100644
--- a/source/css/scss/components/_lists.scss
+++ b/source/css/scss/components/_lists.scss
@@ -143,6 +143,7 @@
 .c-color-bars-list {
 
 	li {
+		max-width: 480px;
 		position: relative;
 		height: 80px;
 		padding-top: 15px;
@@ -189,3 +190,67 @@
 		}
 	}
 }
+
+/**
+ * Ticket list
+ */
+.c-ticket-list {
+	max-width: 480px;
+
+	li {
+		border: 1px solid $gray-light;
+		border-top: 0;
+		padding: 15px 20px;
+		color: $gray-medium;
+	}
+
+	&:first-child {
+		border-top: 1px solid $gray-light;
+	}
+
+	.list-item-title, .list-item-data {
+		float: left;
+	}
+
+	.list-item-title {
+		border-radius: 20px;
+		padding: 4px 10px;
+		background: $gray-medium;
+		color: white;
+		font-size: 1.2rem;
+		font-weight: bold;
+	}
+
+	.origin {
+		float: right;
+		margin-top: 3px;
+
+		p {
+			display: inline-block;
+			margin-right: 2px;
+		}
+
+		img {
+			margin-bottom: 5px;
+		}
+	}
+
+	.c-widget-action-btn.btn {
+		float: right;
+		padding: 3px 15px;
+
+		img {
+			display: block;
+		}
+	}
+
+	.list-subheader {
+		font-size: 1.2rem;
+		font-weight: bold;
+	}
+
+	.list-item-info, .list-item-data {
+		margin: 0;
+		font-size: 1.2rem;
+	}
+}
diff --git a/source/css/scss/objects/_widgets.scss b/source/css/scss/objects/_widgets.scss
index 1579854..b9da934 100644
--- a/source/css/scss/objects/_widgets.scss
+++ b/source/css/scss/objects/_widgets.scss
@@ -16,7 +16,7 @@
 }	 
 
 .c-widget-header-btn {
-	margin-top: -30px;
+	margin-top: -29px;
 	float: right;
 }
 
diff --git a/source/images/icon-fedorahosted.svg b/source/images/icon-fedorahosted.svg
new file mode 100644
index 0000000..0b7b6f3
--- /dev/null
+++ b/source/images/icon-fedorahosted.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="5.9266672mm"
+   height="5.9266672mm"
+   viewBox="0 0 5.9266672 5.9266672"
+   version="1.1"
+   id="svg10714"
+   inkscape:version="0.92+devel unknown"
+   sodipodi:docname="icon-fedorahosted.svg">
+  <defs
+     id="defs10708" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="91.200009"
+     inkscape:cy="-60.228566"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata10711">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-81.703331,-126.97119)">
+    <image
+       y="126.97119"
+       x="81.703331"
+       id="image35613"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAABQxJREFU WIW1l19MU1ccx7+XdVwqWKCKQImrhWm0uGlxCxPmFttsIwESJWTzT4wP6sMmJiomWwjolhSyRZrt AXzQaGJCQnwAjaFqog2aCbNTpJkFujlkzPRSrLS1M7SHsJ49kF69vae1gPslTe759z2f8/v9zu/e Aos0h9lMF6uxYPPa7bR77VpqP3p0wRApiwEIOJ2IEAL3lSt4cu/ugiAWBbB882YoVCoAwOyz4GKk pBby+ejU/ftJnchrt9OR9vbXmwdOi4VeNhioYLMlJSzYbEnPjTVmCMjUFMKTk/itufmVG182GGj/ /v24c/AgbNu305DPNy8QJkBBZSVSc3KQWaxPuHiwsRHhyUkAQIQQTNnt+PXQofnszwbIKy/nPu7s hHrjRvxyqI6OdnTITuXp66PE70cKz78Q43lMDQzA09cnzvcPD9NEtSLuLRjv7sYDczPcPVYMNjVh oKFBIhKanESEENm6CCFwW61i2331Kh51dGBaEJgQTADBZqOPOjokfWOdnXg50RSpqZLTvwzwfHxc bAeGhhAhBOMXLzIPyga4cIF5uvFLL0QyCgvZgjyPtNxcsZ1VXDzXl5+fPIDf7WYCeG/3IZrl2Xo9 p1AqmaLLS0rE5/X19ZyhpQW6mhouaYDUrCym8EwggN9PnRLbOR+Wy0AVKhXyjUYAcwXt1u7ddLCh Ie4VZQKs2rFDLLGx5rZaRS8UHz4icXeEEOR+tAVLNBoOABwnjsPb348IIfA7HHCcOC7TEwGcFgu9 ZjRS//Aw1VZXc9qaGiZAyOOB5+ZNAICqqIh7p6kJKTyPCCFI12pRfPgIgLnrN3H9hmTtxPUbiL3S iujDc+8TBF0u2OvqAACbWlo4p8VC/zhzBrPBoCTjwxMT4rOupoYTbDbqczjw1rZtUBUVcQDg6e2V hSdCCLzOB2wPrP78C6Rrtfg3FBLv7Pr6em7L+fPI3bpVDEmGToeCigqJiMZk4tbX13PRzQEg4BqR eS+F57Fs9RpJn+iBZSUl3LQg0ODYGGZDITjMZpqp1yOntJQDgGlBoCQQQLZez6GoSCYeawo+jQmQ ueFdNgAAMXmuGY006HJBoVLhzjdf0w++/4GLjsXa454eOuVwQKFUonDnTlFjeVkZxru6JHOXFhZi xXvvS3Rkol67nf68d68kfm/v24eNjY2SucHRUdp/4ACej42Jfcq8PBitVijVai7k89FbtbXieArP Y9PJk9BWV0t0JB4AgODDh7Lk+fPsWTzu6aErq6rExUM//YigyyVJzpDHg9t79mBaEKhSreamBYGO tLWBPn2KZRUVss2ZAPHs7rFjCPl8VKlWcwDguzfAfBc8Gx7GjcpKjLS3U0nYTp9m6soKkTJOzQYA Gg4DAF710TETCGCotRWXDQbqtFgSzpUBaEwmLkOnk4WBz84WEyzs8YD4/Yl0RRBXWxsSfTMyS3Fp WxvStVpECBF/mevWieNDra2YDSb/FTztdscdYwJk6/Xc1q4u6HbtQrpWi7TcXKz56ksAcyXb09vL jH88yzeZ4o7FTcKou0M+H6XhMJZoNFxwdJTerK1NuFks2MqqKmhMJmYNSQgQtWjWA8Dfly5hJhBg brqirAw55WVYukqHNzMyQN9IQYamAPEKWNIAL9s/f40hQojklJl6PTZ89+1chTt3bj5yc/Dzmaz5 9DPx/Z+alYW1dXX4xGrlYsvr/2qCzUYdZjP12u2v5e/Yf+FBMlHUI8VdAAAAAElFTkSuQmCC "
+       preserveAspectRatio="none"
+       height="5.9266672"
+       width="5.9266672"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
+  </g>
+</svg>
diff --git a/source/images/icon-pagure.svg b/source/images/icon-pagure.svg
new file mode 100644
index 0000000..2bcc942
--- /dev/null
+++ b/source/images/icon-pagure.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="6.7733335mm"
+   height="6.7733335mm"
+   viewBox="0 0 6.7733335 6.7733335"
+   version="1.1"
+   id="svg9516"
+   inkscape:version="0.92+devel unknown"
+   sodipodi:docname="icon-pagure.svg">
+  <defs
+     id="defs9510" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="12.800014"
+     inkscape:cy="12.800015"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata9513">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-102.44666,-145.44667)">
+    <image
+       y="145.44667"
+       x="102.44666"
+       id="image35583"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAABC1JREFU SIntlV9s01UUx7/n3ra/tZWuW2EZoUHcAyhzY50YJUYkC+oiMRpZXSZEQyLqiyZq3FrWyS+Mjc5I jPGFFx8QYyJj6oOJJAYTEohEN5UByxxjDLd23datW6t0bX+/e3woQ6Dogq/6fbrJued8zr/kAP9r CdHfGfx+v/R6vbayspJ7leJSU9LUdGR6KBaLGd3d3ea/BnR2BleQdHYSqB4ELwAwc5qI7Pk3RgE+ nkkbbbqux+8IEA53bIPA1wyOWKSle4Wn/NOKigo2DMOradqFwcFzZTOJ2SZTqecItMpUZlNr4N3P AfCSgANd7fuIRFsmk3mleoMvp1k0nZnLFjO/pj8ARDOZTHv/hV5oNscnYBwLtLT6/xEQDu/bCSGP CIjd1dW+R5VSLy5VupTy2PnB84eyC+njIHwZbA413q4S6ujoWCksPKwUv1dTXfsCEa1dKviimDk2 MNS/w8ypE2xyQzAY6rn1jxBWPA3AtqHKN3G74EQEIQSEEAUAIiqvus+3M5PJvEySjum67i4AEPNu pUxdSlnQFqUUJqcmMDQ8iJHRS0inrxZAlFK7qiprkgDHNLulvQAAoo2xRPwwMz9yoyGbzWJg8Dyi E9HpZHJu/1wifmRoeBCjV0YK+my32zuFED0APeX3++XNAAAOyqRudbo8egmGmTu9ZXOd7wHfQ46N vk19dq3osfnkXHZqKgZBf7WMmStsNnspwOWVlZU3rb4FAOZNoSG/AQQAhmnAMHPQtKLDiURiSAjp MJSBtWvXnzr9w8knJiajJz2e5ZDSAiEkfhu7LBYWrjYRqx26rhs3AuTWrXWNToczvarc6wCwBgAY jPhMHMzcJ6VcNzJ6cZnHs5wEidUul/u7+bnEk07nMqthGnR5dBjJ1HyKmN8Byfq6x+tWlpZ4egcG BhgABIM/tgrLQSHEoetlSQuKXcUwjFxbJDJ2MZfLCdPIJ+bQHJtBMMcjV/jSyK+cXkj/aDLqmeh9 EBoE0Ye1D9b8tBiL9C7dW0TWMaX47Zrq2gYAm4D8es7OziD1exLFLje73SXEzJiMTz4fm4h8BkKE GW1EeIZA25lZAVggIkd+MBhnlaoWeos+rhTvF4IO9vZ+/yqAb68NDiUlpbh79T0oLnYTMzMRvRWN jj1LhHiwObRGAEECbUd+eN8EW0LOQHMrKVbbAR6HuGufAIA9gVCbAj6yFRX1nz338xmXy3U/ER1l ZsXMAMRXUsr1v5zrq5dCNhlZPJzPUjVenybRtnBXRw8A7Glp+yLQEtpEnArdtFIHujpaibAXgJHN 5j4wsukzSgiyW7Ut0mp9k8ERxeZLrS17Tyz6hMPtrzOJvUTw5CvHMDHvCgRCp4Db3ANdh9Ds+18j 4A0QrbvWrrOKVTi3oI7quq4KfXQLADeAbDQaTScSCXUnR+k/rj8BZsHow8wMJb8AAAAASUVORK5C YII= "
+       preserveAspectRatio="none"
+       height="6.7733335"
+       width="6.7733335"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
+  </g>
+</svg>
diff --git a/source/images/icon-redhat.svg b/source/images/icon-redhat.svg
new file mode 100644
index 0000000..215e233
--- /dev/null
+++ b/source/images/icon-redhat.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="4.5155559mm"
+   height="4.5155559mm"
+   viewBox="0 0 4.5155559 4.5155559"
+   version="1.1"
+   id="svg8748"
+   inkscape:version="0.92+devel unknown"
+   sodipodi:docname="icon-redhat.svg">
+  <defs
+     id="defs8742" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="165.6762"
+     inkscape:cy="-240.03808"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata8745">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-61.998173,-80.807701)">
+    <image
+       y="80.807701"
+       x="61.998173"
+       id="image35594"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAcVJREFU OI2NkrFrFFEQxn+zysI9zq3OSiwCaTYqXLQSJIV9OlsJBAJpzz8gWIiCrWAjSI40QQIiCWKTLhAI Ofc4TDZFIJCQatMkyFtuNzgWvl1fcpz4wfCGeTPfzDfvAWhlsTH6WUQPQHdBd0DnRTQ2pj79XEDF BQCYF2FRlS0RJoA7+udqS4QnLv5C63RiYwjwsOguPzQarLvCAJhRJQImXFGF1FokNkYf5/kVksj5 P4Ffzq86vRfhozfFja9l+fIp8ADYFeGdMRxfXnIuwj2g9JZ0CzgX4dgYzsoSANkBDYAmkIqwDmw3 GqTW1jsJvEkATkU4clIlNkZf5zl3VWlW2lzCDyfJJ6ikNIG3Ioh7EhbynBmnrSK6YDwCt4/6FW4v L/Ot0+FEhAtXHLnE6xYBJyJsVxJSa+klCfenpvi0usqXtTWijQ1mx3Sv9KfWIr0k0f3BgOdzcwyH Q8Iw5Hu/z5ulJQDak5N1Yf/wkL3NTVJr/7KpQ5ZlmmWZXkcvSbSXJLXvf2dAb1ZErVZrZNSiKHg0 Pc2rToeH7Tb7gwEAz2Y9cSMtxyDLMgV0pdu9Ev9vgpVut5biQ1S9j/0PFEVBGIYj8d/1B1MSKU1G rQAAAABJRU5ErkJggg== "
+       preserveAspectRatio="none"
+       height="4.5155559"
+       width="4.5155559"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
+  </g>
+</svg>