Add dropdown in card (#473)

Author: jarrodmillman

layouts/shortcodes/card.html

@@ -23,6 +23,17 @@
 '''
 {{< /card >}}
 
+{{< card >}}
+title = 'A card with a dropdown menu'
+body = '''
+{{< dropdown >}}
+title = 'Click to expand dropdown'
+icon = 'eye'
+body = 'Hidden content'
+{{< /dropdown >}}
+'''
+{{< /card >}}
+
 {{< card >}}
 title = 'A clickable card'
 link = 'https://example.com'

layouts/shortcodes/dropdown.html

@@ -34,30 +34,28 @@
 */}}
 
 {{- $data := .Inner | transform.Unmarshal -}}
-
 <details class="sd-card sd-dropdown sd-mb-3">
-  {{ with $data.color }}
+  {{- with $data.color }}
   <summary class="sd-summary-title sd-card-header sd-bg-{{ . }} sd-bg-text-{{ . }}">
-  {{ else }}
+  {{- else }}
     <summary class="sd-summary-title sd-card-header">
-  {{ end }}
-    {{ with $data.icon }}
+  {{- end }}
+    {{- with $data.icon }}
     <span class="sd-summary-icon"><svg version="1.1" width="1.0em" height="1.0em" class="sd-octicon sd-octicon-{{ . }}" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M5.5 4a2.5 2.5 0 014.607-1.346.75.75 0 101.264-.808A4 4 0 004 4v2h-.501A1.5 1.5 0 002 7.5v6A1.5 1.5 0 003.5 15h9a1.5 1.5 0 001.5-1.5v-6A1.5 1.5 0 0012.5 6h-7V4zm-.75 3.5H3.5v6h9v-6H4.75z"></path></svg></span>
-    {{ end }}
-    {{ with $data.title }}
-      {{ . }}
-    {{ else }}
+    {{- end }}
+    {{- with $data.title }}
+      {{- . }}
+    {{- else }}
       <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-kebab-horizontal" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M6 12a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm6 2a2 2 0 100-4 2 2 0 000 4z"></path></svg>
-    {{ end }}
+    {{- end }}
       <div class="sd-summary-down">
 <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-down" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l6.25 6.25a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06L12 14.44 6.28 8.72a.75.75 0 00-1.06 0z"></path></svg></div>
      <div class="sd-summary-up">
 <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-up" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M18.78 15.28a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06L12 9.56l5.72 5.72a.75.75 0 001.06 0z"></path></svg></div>
   </summary>
-
   <div class="sd-summary-content sd-card-body">
-    {{ with (trim $data.body "\n") }}
-      {{ . | markdownify }}
-    {{ end }}
+    {{- with (trim $data.body "\n") }}
+      {{- . | markdownify }}
+    {{- end }}
   </div>
 </details>