feat: add reusable chips, use them on cf2021 and distinguish archived posts too

source/_patterns/00-atoms/03-buttons/02-button-colors.mustache

@@ -11,6 +11,7 @@
     {{> atoms-basic-button(classes: "btn--orange-300") }}
     {{> atoms-basic-button(classes: "btn--violet-400") }}
     {{> atoms-basic-button(classes: "btn--violet-500") }}
+    {{> atoms-basic-button(classes: "btn--red-600") }}
   </div>
   <div class="inline-flex flex-col space-y-2">
     {{> atoms-icon-button(classes: "btn--black") }}
@@ -24,5 +25,6 @@
     {{> atoms-icon-button(classes: "btn--orange-300") }}
     {{> atoms-icon-button(classes: "btn--violet-400") }}
     {{> atoms-icon-button(classes: "btn--violet-500") }}
+    {{> atoms-icon-button(classes: "btn--red-600") }}
   </div>
 </div>

source/_patterns/01-molecules/16-chips/chip-colors.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> molecules-chip(classes: "chip--black") }}
+    {{> molecules-chip(classes: "chip--grey-700") }}
+    {{> molecules-chip(classes: "chip--grey-500") }}
+    {{> molecules-chip(classes: "chip--grey-125") }}
+    {{> molecules-chip(classes: "chip--blue-300") }}
+    {{> molecules-chip(classes: "chip--cyan-200") }}
+    {{> molecules-chip(classes: "chip--cyan-500") }}
+    {{> molecules-chip(classes: "chip--green-300") }}
+    {{> molecules-chip(classes: "chip--orange-300") }}
+    {{> molecules-chip(classes: "chip--violet-400") }}
+    {{> molecules-chip(classes: "chip--violet-500") }}
+    {{> molecules-chip(classes: "chip--red-600") }}
+  </div>
+</div>

source/_patterns/01-molecules/16-chips/chip-select.mustache

+<span class="chip chip--black chip--select">
+  <select>
+    <option value="">Select input choice</option>
+    <option value="">choice</option>
+    <option value="">choice</option>
+    <option value="">choice</option>
+    <option value="">choice</option>
+  </select>
+  <span class="chip__icon ico--chevron-down"></span>
+</span>

source/_patterns/01-molecules/16-chips/chip.mustache

+<div class="chip {{ classes }}">
+  {{ cta }}
+</div>

source/_patterns/03-templates/cf-tool.mustache

@@ -10,7 +10,18 @@
         <section>
           <div class="flex justify-between items-center mb-4">
             <h2 class="head-alt-base">Příspěvky v rozpravě</h2>
-            {{> molecules-inline-pagination(classes: "text-xs") }}
+            <div class="flex items-center space-x-8">
+              <span class="chip chip--grey-125 chip--select text-xs">
+                <select>
+                  <option value="">Vše</option>
+                  <option value="">Jen aktivní</option>
+                  <option value="">Jen archivované</option>
+                </select>
+                <span class="chip__icon ico--chevron-down"></span>
+              </span>
+
+              {{> molecules-inline-pagination(classes: "text-xs") }}
+            </div>
           </div>
 
           <div class="space-y-6">
@@ -19,12 +30,13 @@
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
-                    <div>
+                    <div class="flex items-center">
                       <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                       <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                       <span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
                     </div>
-                    <div class="space-x-3 text-sm flex items-center">
+                    <div class="space-x-2 text-sm flex items-center">
                       <button class="text-blue-300 flex items-center space-x-1">
                         <span class="font-bold">6</span>
                         <i class="ico--thumbs-up"></i>
@@ -44,12 +56,13 @@
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
-                    <div>
+                    <div class="flex items-center">
                       <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                       <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                       <span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
                     </div>
-                    <div class="space-x-3 text-sm flex items-center">
+                    <div class="space-x-2 text-sm flex items-center">
                       <button class="text-blue-300 flex items-center space-x-1">
                         <span class="font-bold">6</span>
                         <i class="ico--thumbs-up"></i>
@@ -69,12 +82,13 @@
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
-                    <div>
+                    <div class="flex items-center">
                       <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                       <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                       <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Návrh postupu")}}
                     </div>
-                    <div class="space-x-3 text-sm flex items-center">
+                    <div class="space-x-2 text-sm flex items-center">
                       <button class="text-blue-300 flex items-center space-x-1">
                         <span class="font-bold">6</span>
                         <i class="ico--thumbs-up"></i>
@@ -89,17 +103,19 @@
                 <p class="text-black leading-normal">{{ excerpt.medium }}</p>
               </div>
             </div>
-            <div class="flex items-start p-2 -ml-2">
+            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
               <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
-                    <div>
+                    <div class="flex items-center">
                       <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                       <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                       <span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                     </div>
-                    <div class="space-x-3 text-sm flex items-center">
+                    <div class="space-x-2 text-sm flex items-center">
                       <button class="text-blue-300 flex items-center space-x-1">
                         <span class="font-bold">6</span>
                         <i class="ico--thumbs-up"></i>
@@ -114,17 +130,19 @@
                 <p class="text-black leading-normal">{{ excerpt.medium }}</p>
               </div>
             </div>
-            <div class="flex items-start p-2 -ml-2">
+            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
               <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
                   <div class="flex justify-between">
-                    <div>
+                    <div class="flex items-center">
                       <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                       <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                       <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Návrh postupu")}}
+                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                     </div>
-                    <div class="space-x-3 text-sm flex items-center">
+                    <div class="space-x-2 text-sm flex items-center">
                       <button class="text-blue-300 flex items-center space-x-1">
                         <span class="font-bold">6</span>
                         <i class="ico--thumbs-up"></i>
@@ -144,8 +162,8 @@
           <div class="my-8 space-y-4">
             {{> molecules-textarea-field(nolabel: true) }}
             <div class="space-x-4">
-              {{> atoms-basic-button(classes: "text-base", cta: "Přidat příspěvek") }}
-              <span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat také <a href="#" class="underline">Markdown</a>.</span>
+              {{> atoms-basic-button(classes: "text-base btn--black btn--hoveractive", cta: "Přidat příspěvek") }}
+              <span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
             </div>
           </div>
         </section>
@@ -157,58 +175,59 @@
             <div class="bg-yellow-100 p-3 border-orange-300 border-l-4">
               <div class="flex items-center space-x-2 mb-2">
                 <div class="font-bold text-sm">11:55</div>
-                <div class="bg-orange-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Zamítnutý návrh postupu</div>
+                {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
               </div>
-              {{ excerpt.short }}
+              <span class="leading-tight">{{ excerpt.short }}</span>
             </div>
             <div class="p-3 bg-yellow-100 border-green-300 border-l-4">
               <div class="flex items-center space-x-2 mb-2">
                 <div class="font-bold text-sm">11:52</div>
-                <div class="bg-green-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Schválený návrh postupu</div>
+                {{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
               </div>
-              {{ excerpt.short }}
+              <span class="leading-tight">{{ excerpt.short }}</span>
             </div>
             <div class="bg-grey-50 p-3 border-blue-300 border-l-4">
               <div class="flex items-center space-x-2 mb-2">
                 <div class="font-bold text-sm">11:51</div>
-                <div class="bg-blue-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Přijatelný návrh postupu</div>
+                {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
               </div>
-              {{ excerpt.short }}
+              <span class="leading-tight">{{ excerpt.short }}</span>
             </div>
             <div class="p-3 border-red-600 border-l-4">
               <div class="flex items-center space-x-2 mb-2">
                 <div class="font-bold text-sm">11:43</div>
-                <div class="bg-red-600 text-white px-1 py-1 font-bold text-xs rounded-sm">Rozhodující hlasování</div>
+                {{> molecules-chip(classes: "chip--red-600 chip--condensed font-bold text-xs", cta: "Rozhodující hlasování")}}
+                <a href="#" class="ml-auto p-1 text-xs text-red-600 font-bold">Hlasovat v Heliosu &raquo;</a>
               </div>
-              {{ excerpt.short }}
+              <span class="leading-tight mb-2">{{ excerpt.short }}</span>
             </div>
             <div class="bg-grey-50 p-3 border-cyan-500 border-l-4">
               <div class="flex items-center space-x-2 mb-2">
                 <div class="font-bold text-sm">11:35</div>
-                <div class="bg-cyan-500 text-white px-1 py-1 font-bold text-xs rounded-sm">Oznámení předsedajícího</div>
+                {{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}}
               </div>
-              {{ excerpt.short }}
+              <span class="leading-tight">{{ excerpt.short }}</span>
             </div>
             <div class="p-3 border-orange-300 border-l-4">
               <div class="flex items-center space-x-2 mb-2">
                 <div class="font-bold text-sm">11:28</div>
-                <div class="bg-orange-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Zamítnutý návrh postupu</div>
+                {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
               </div>
-              {{ excerpt.short }}
+              <span class="leading-tight">{{ excerpt.short }}</span>
             </div>
             <div class="bg-grey-50 p-3 border-green-300 border-l-4">
               <div class="flex items-center space-x-2 mb-2">
                 <div class="font-bold text-sm">11:20</div>
-                <div class="bg-green-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Schválený návrh postupu</div>
+                {{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
               </div>
-              {{ excerpt.short }}
+              <span class="leading-tight">{{ excerpt.short }}</span>
             </div>
             <div class="p-3 border-blue-300 border-l-4">
               <div class="flex items-center space-x-2 mb-2">
                 <div class="font-bold text-sm">11:00</div>
-                <div class="bg-blue-300 text-white px-1 py-1 font-bold text-xs rounded-sm">Přijatelný návrh postupu</div>
+                {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
               </div>
-              {{ excerpt.short }}
+              <span class="leading-tight">{{ excerpt.short }}</span>
             </div>
           </div>
         </div>

source/css/molecules/chips.pcss

+.chip {
+  @apply
+    flex inline-flex content-center
+    py-2 px-3
+    text-xs
+    font-bold leading-none tracking-normal
+    cursor-pointer
+    whitespace-no-wrap;
+}
+
+.chip--condensed {
+  @apply p-1;
+}
+
+.chip--black {
+  @apply bg-black text-white;
+}
+.chip--grey-700 {
+  @apply bg-grey-700 text-white;
+}
+.chip--grey-500 {
+  @apply bg-grey-500 text-white;
+}
+.chip--grey-125 {
+  @apply bg-grey-125 text-black;
+}
+.chip--blue-300 {
+  @apply bg-blue-300 text-white;
+}
+.chip--cyan-200 {
+  @apply bg-cyan-200 text-white;
+}
+.chip--cyan-500 {
+  @apply bg-cyan-500 text-white;
+}
+.chip--green-300 {
+  @apply bg-green-300 text-white;
+}
+.chip--orange-300 {
+  @apply bg-orange-200 text-white;
+}
+.chip--violet-400 {
+  @apply bg-violet-400 text-white;
+}
+.chip--red-600 {
+  @apply bg-red-600 text-white;
+}
+
+.chip__icon {
+  @apply self-center pl-2 pr-3 pt-1 cursor-pointer;
+
+  font-size: .7rem;
+}
+
+.chip--lg {
+  @apply py-2 pl-3;
+}
+
+.chip--select {
+  @apply relative p-0 inline-flex items-center;
+
+  &:hover,
+  &:focus {
+    @apply bg-opacity-50;
+  }
+
+  select {
+    @apply w-full py-2 pl-3 pr-8 z-10 cursor-pointer;
+
+    appearance: none;
+    background: none;
+  }
+
+  &.chip--lg {
+    @apply p-0;
+
+    select {
+      @apply py-3 pl-4 pr-8;
+    }
+  }
+
+  .chip__icon {
+    @apply
+      absolute right-0
+      cursor-pointer;
+  }
+}

source/css/style.pcss

@@ -41,6 +41,7 @@
 @import "./molecules/calendar.pcss";
 @import "./molecules/candidate-card.pcss";
 @import "./molecules/candidate-table-row.pcss";
+@import "./molecules/chips.pcss";
 @import "./molecules/content-block.pcss";
 @import "./molecules/flip-clock.pcss";
 @import "./molecules/form-field.pcss";

tailwind.config.js

@@ -253,6 +253,10 @@ module.exports = {
           text: 'white',
           background: 'violet.500',
         },
+        'red-600': {
+          text: 'white',
+          background: 'red.600',
+        },
         'brands-facebook': {
           text: 'white',
           background: 'brands.facebook',