Cards, candidate cards, more headings

gulpfile.js

@@ -281,17 +281,17 @@ function watch () {
   gulp.watch(
     postcssPaths,
     {useFsEvents: false},
-    gulp.series("tailwind-postcss")
+    gulp.series("tailwind-postcss", "pl-copy:css", reloadCSS)
   );
 
   console.log("Watching following source files:", jsPaths.concat(postcssPaths));
 
   // Detect updated css bundle change
-  gulp.watch(
-    resolvePath(paths().source.root) + "/dist/style.pkgd.css",
-    {useFsEvents: false},
-    gulp.series("pl-copy:css", reloadCSS)
-  );
+  // gulp.watch(
+  //   resolvePath(paths().source.root) + "/dist/style.pkgd.css",
+  //   {useFsEvents: false},
+  //   gulp.series("pl-copy:css", reloadCSS)
+  // );
 
   // Detect changes in styleguide assets down in node_modules
   gulp.watch(

package-lock.json

@@ -2692,6 +2692,11 @@
         }
       }
     },
+    "hex-rgb": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.1.0.tgz",
+      "integrity": "sha512-n7xsIfyBkFChITGPh6FLtxNzAt2HxZLcQIY9hYH4gm2gmMQJHMguMH3E+jnmvUbSTF5QrmFnGab5Ippi+D7e/g=="
+    },
     "homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -8094,6 +8099,14 @@
         }
       }
     },
+    "tailwindcss-elevation": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss-elevation/-/tailwindcss-elevation-0.3.4.tgz",
+      "integrity": "sha512-xGlQN7ZLF9QEvQsom0/RH7SUm8F6gsDmwgzyKtlQKpj8Ymr0IwjcAMJy0LsPdY9fjAgkaLsa7sLv5pinjX9Y1Q==",
+      "requires": {
+        "hex-rgb": "^4.1.0"
+      }
+    },
     "tailwindcss-typography": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/tailwindcss-typography/-/tailwindcss-typography-3.1.0.tgz",

package.json

@@ -11,7 +11,8 @@
     "minimist": "^1.2.3",
     "patternlab-node": "^2.12.0",
     "styleguidekit-assets-default": "^3.0.0",
-    "styleguidekit-mustache-default": "^3.0.0"
+    "styleguidekit-mustache-default": "^3.0.0",
+    "tailwindcss-elevation": "^0.3.4"
   },
   "resolutions": {
     "lodash": "^4.17.12"

source/_data/data.json

@@ -37,13 +37,18 @@
   "icon": "fas fa-skull-crossbones",
   "description": "Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.",
   "url": "http://lorizzle.nl/",
-  "name": {
+  "person": {
     "first": "Junius",
     "firsti": "J",
     "middle": "Marius",
     "middlei": "M",
     "last": "Koolen",
-    "lasti": "K"
+    "lasti": "K",
+    "occupation": "Software company manager and open-source software expert",
+    "email": "example@example.com",
+    "claim": "Evropská unie není vzdálená instituce žijící svým životem – jsme to my všichni. Přesto máme někdy problém se orientovat či přímo angažovat v evropské politice.",
+    "party": "Pirátská strana",
+    "age": "30"
   },
   "year": {
     "long": "2013",

source/_patterns/00-atoms/01-text/headings.mustache

-<h1 class="head-xl">Largest headline</h1>
-<h1 class="head-lg">Large headline</h1>
-<h1 class="head-md">Medium headline</h1>
+<h1 class="head-xl-alt">Largest headline</h1>
+<h1 class="head-lg-alt">Large headline</h1>
+<h1 class="head-md-alt">Medium headline</h1>
+<h1 class="head-base-alt">Base headline</h1>
+<h1 class="head-sm-alt">Small headline</h1>
+<h1 class="head-xs-alt">Extra small headline</h1>
+
 <h1 class="head-base">Base headline</h1>
 <h1 class="head-base-heavy">Base headline heavy variant</h1>
+
 <h1 class="head-sm">Small headline</h1>
 <h1 class="head-sm-heavy">Small headline heavy variant</h1>
+
 <h1 class="head-xs">Extra small headline</h1>
 <h1 class="head-xs-allcaps">Extra small headline allcaps</h1>
+<h1 class="head-xxs-allcaps">Extra extra small headline allcaps</h1>

source/_patterns/00-atoms/05-cards/basic-card.mustache

+<div class="card {{ classes }}">
+  <div class="card__body">
+    {{ description }}
+  </div>
+</div>

source/_patterns/00-atoms/05-cards/card-elevation-variants.mustache

+<div class="flex space-x-4">
+  {{> atoms-basic-card(classes: "elevation-1", description: "elevation-1") }}
+  {{> atoms-basic-card(classes: "elevation-2", description: "elevation-2") }}
+  {{> atoms-basic-card(classes: "elevation-3", description: "elevation-3") }}
+  {{> atoms-basic-card(classes: "elevation-4", description: "elevation-4") }}
+  {{> atoms-basic-card(classes: "elevation-5", description: "elevation-5") }}
+  {{> atoms-basic-card(classes: "elevation-6", description: "elevation-6") }}
+  {{> atoms-basic-card(classes: "elevation-7", description: "elevation-7") }}
+  {{> atoms-basic-card(classes: "elevation-8", description: "elevation-8") }}
+  {{> atoms-basic-card(classes: "elevation-9", description: "elevation-9") }}
+  {{> atoms-basic-card(classes: "elevation-21", description: "elevation-21") }}
+</div>

source/_patterns/00-atoms/06-avatars/basic-avatar.mustache

+<div class="avatar {{ classes }}">
+  <img
+    src="{{ img.avatar.src }}"
+    alt="{{ img.avatar.alt }}"
+  />
+</div>

source/_patterns/00-atoms/06-avatars/bordered-avatar.mustache

+{{> atoms-basic-avatar(classes: "avatar--bordered") }}

source/_patterns/00-atoms/06-avatars/size-variants.mustache

+{{> atoms-basic-avatar(classes: "avatar--xs") }}
+{{> atoms-basic-avatar(classes: "avatar--sm") }}
+{{> atoms-basic-avatar(classes: "avatar--md") }}
+{{> atoms-basic-avatar(classes: "avatar--lg") }}

source/_patterns/01-molecules/00-badge/basic-badge.mustache

 <div class="badge">
-  <div class="badge-avatar">
-    <img
-      src="http://placehold.it/100x100"
-      alt=""
-    />
-  </div>
+  {{> atoms-basic-avatar(classes: "avatar--md") }}
   <div class="badge-body">
-    <span class="head-sm-heavy">Mikuláš Peksa</span>
-    <p class="badge-occupation">Předseda krajského sdružení Pardubického kraje</p>
+    <span class="head-sm-heavy">{{ person.first }} {{ person.last }}</span>
+    <p class="badge-occupation">{{ person.occupation }}</p>
     {{> atoms-basic-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge-link") }}
     {{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge-link") }}
   </div>

source/_patterns/01-molecules/00-badge/condensed-badge.mustache

 <div class="badge is-condensed">
-  <div class="badge-avatar">
-    <img
-      src="http://placehold.it/64x64"
-      alt=""
-    />
-  </div>
+  {{> atoms-basic-avatar(classes: "avatar--sm") }}
   <div class="badge-body">
     <span class="head-xs badge-title">Mikuláš Peksa</span>
     {{> atoms-basic-contact-line(icon: "fas fa-envelope", classes: "badge-link") }}

source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache

-<div class="social-icon-group space-x-xs">
+<div class="social-icon-group space-x-1 {{ classes }}">
   {{> atoms-basic-social-icon }}
   {{> atoms-basic-social-icon }}
   {{> atoms-basic-social-icon }}

source/_patterns/01-molecules/02-candidate-card/candidate-card-large-shift.mustache

+<div class="card candidate-card candidate-card--shift-lg {{ classes }} elevation-10">
+  {{> atoms-basic-avatar(classes: "avatar--2xl avatar--bordered candidate-card__avatar") }}
+  <div class="card__body">
+    <h1 class="head-sm-alt">{{ headline.short }}</h1>
+    <p>{{ excerpt.short }}</p>
+  </div>
+</div>

source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache

+<div class="candidate-card {{ classes }}">
+  <div class="candidate-card__wrapper">
+    <div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
+      <div class="candidate-card__avatar">
+        <div class="candidate-card__position">1</div>
+        {{> atoms-basic-avatar(classes: "avatar--xl avatar--bordered") }}
+      </div>
+      <div class="card__body">
+        <h1 class="head-sm-alt">{{ person.first }} {{ person.last }}</h1>
+        <div class="font-light mb-2">{{ person.email }}</div>
+        <h2 class="head-xxs-allcaps">{{ person.occupation }}</h2>
+      </div>
+      <div class="candidate-card__affiliation">
+        <div>{{ person.age }} let</div>
+        <div>
+          {{> atoms-basic-avatar(classes: "w-3 mr-1") }}
+          <span class="font-bold font-condensed">{{ person.party }}</span>
+        </div>
+      </div>
+      <div class="card__body">
+        <p class="font-light text-sm leading-snug italic mb-2">{{ person.claim }}</p>
+        {{> molecules-basic-social-icon-group }}
+      </div>
+    </div>
+  </div>
+</div>

source/_patterns/02-organisms/01-candidates/candidate-card-list.mustache

+<div class="candidate-card-list">
+  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+  {{> molecules-candidate-card(classes: "candidate-card-list__item candidate-card-list__item--last") }}
+  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+  {{> molecules-candidate-card(classes: "candidate-card-list__item") }}
+  {{> molecules-candidate-card(classes: "candidate-card-list__item candidate-card-list__item--last") }}
+</div>

source/css/atoms/avatar.pcss

+.avatar {
+  @apply inline-block text-center rounded-full;
+
+  img {
+    @apply rounded-full block w-8;
+  }
+}
+
+.avatar--xs img {
+  @apply w-6;
+}
+.avatar--sm img {
+  @apply w-7;
+}
+.avatar--md img {
+  @apply w-8;
+}
+.avatar--lg img {
+  @apply w-9;
+}
+.avatar--xl img {
+  @apply w-10;
+}
+.avatar--2xl img {
+  @apply w-11;
+}
+
+.avatar--bordered {
+  img {
+    @apply border-white border-8;
+  }
+}
+
+.avatar--outlined {
+  @apply border-grey-100 border;
+}

source/css/atoms/card.pcss

+.card {
+  @apply elevation-2;
+}
+
+.card .card__body {
+  @apply p-2;
+}

source/css/atoms/heading.pcss

-.head-xl {
+.head-xl-alt {
   @apply text-7xl font-alt font-normal leading-tight;
 }
 
-.head-lg {
+.head-lg-alt {
   @apply text-6xl font-alt font-normal leading-tight;
 }
 
-.head-md {
+.head-md-alt {
   @apply text-4xl font-alt font-normal leading-tight;
 }
 
@@ -14,6 +14,10 @@
   @apply text-3xl font-condensed font-medium leading-tight;
 }
 
+.head-base-alt {
+  @apply text-3xl font-alt font-normal leading-tight;
+}
+
 .head-base-heavy {
   @apply text-3xl font-condensed font-bold leading-tight;
 }
@@ -22,6 +26,10 @@
   @apply text-2xl font-condensed font-medium leading-tight;
 }
 
+.head-sm-alt {
+  @apply text-2xl font-alt font-normal leading-tight;
+}
+
 .head-sm-heavy {
   @apply text-2xl font-condensed font-bold leading-tight;
 }
@@ -30,10 +38,18 @@
   @apply text-lg font-condensed font-medium leading-tight;
 }
 
+.head-xs-alt {
+  @apply text-lg font-alt font-normal leading-tight;
+}
+
 .head-xs-heavy {
   @apply text-lg font-condensed font-bold leading-tight;
 }
 
 .head-xs-allcaps {
-  @apply text-lg font-condensed font-light uppercase leading-tight;
+  @apply text-lg font-condensed uppercase leading-tight;
+}
+
+.head-xxs-allcaps {
+  @apply text-base font-condensed uppercase leading-tight;
 }

source/css/molecules/badge.pcss

 .badge {
   @apply flex items-center font-body;
 
-  .badge-avatar {
-    @apply text-center;
-
-    img {
-      @apply rounded-full w-8 block;
-    }
-  }
-
   .badge-body {
     @apply text-left ml-3;
   }
@@ -31,10 +23,6 @@
     @apply mb-1;
   }
 
-  .badge-avatar img {
-    @apply w-7 block;
-  }
-
   .badge-body {
     @apply ml-2;
   }