param'd component docs

craigerskine · Jul 2, 2024 · a5ed3e4 · a5ed3e4
1 parent fbbf3cb
commit a5ed3e4
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 33 deletions.
diff --git a/_site/_includes/macro.button.njk b/_site/_includes/macro.button.njk
@@ -1,23 +1,36 @@
+{#-
+  color: {tailwind colors}
+  outline: boolean (bordered)
+  ghost: boolean
+  reverse: boolean
+  href: string
+  icon: string (if slot is empty the button will be 1:1)
+  circle: boolean
+  slot: string (label)
+  props: string (great for apline)
+-#}
 {%- macro button(param) -%}
 
   {%- set color -%}
     {{- param.color if param.color else 'pri' -}}
   {%- endset -%}
 
   {%- set classes -%}
-    {%- if param.outline -%}
-      text-{{ color }}-600 ring-(1 inset current) hover:(bg-{{ color }}-300 text-black/90 ring-transparent) dark:(text-{{ color }}-500 hover:(bg-{{ color }}-300 text-black/90))
-    {%- elseif param.ghost -%}
-      text-{{ color }}-500 hover:(bg-{{ color }}-500/10 text-{{ color }}-600)
-    {%- else -%}
-      bg-{{ color }}-400 text-black/90 hover:(bg-{{ color }}-300) dark:(bg-{{ color }}-400 hover:(bg-{{ color }}-300))
-    {%- endif -%}
-    {%- if param.reverse -%}
-      flex-row-reverse
-    {%- endif -%}
+    {#- outline -#}
+    {%- if param.outline %} text-{{ color }}-600 ring-(1 inset current) hover:(bg-{{ color }}-300 text-black/90 ring-transparent) dark:(text-{{ color }}-500 hover:(bg-{{ color }}-300 text-black/90))
+    {#- ghost -#}
+    {%- elseif param.ghost %} text-{{ color }}-500 hover:(bg-{{ color }}-500/10 text-{{ color }}-600)
+    {#- contained -#}
+    {%- else %} bg-{{ color }}-400 text-black/90 hover:(bg-{{ color }}-300) dark:(bg-{{ color }}-400 hover:(bg-{{ color }}-300)){%- endif %}
+    {#- square -#}
+    {%- if not param.slot and param.icon %} w-9 h-9{%- else %} py-1.5 px-3{%- endif %}
+    {#- circle -#}
+    {%- if param.circle %} rounded-full{%- else %} rounded-lg{%- endif %}
+    {#- reverse -#}
+    {%- if param.reverse %} flex-row-reverse{%- endif %}
   {%- endset -%}
 
-  <{% if param.href %}a href="{{ param.href }}"{% else %}button type="button"{% endif %} class="{% if not param.slot and param.icon %}w-9 h-9{% else %}py-1.5 px-3{% endif %} max-w-[18rem] inline-flex items-center justify-center gap-1 {% if param.circle %}rounded-full{% else %}rounded-lg{% endif %} motion-safe:(transition) {{ classes }}"{{ param.props | safe }}>
+  <{% if param.href %}a href="{{ param.href }}"{% else %}button type="button"{% endif %} class="max-w-[18rem] inline-flex items-center justify-center gap-1 motion-safe:(transition) {{ classes }}"{{ param.props | safe }}>
     {%- if param.slot -%}<span class="min-w-0 flex-1 truncate">{{ param.slot | safe }}</span>{%- endif -%}
     {%- if param.icon -%}<span class="flex-(& shrink-0) opacity-70"><iconify-icon icon="{{ param.icon }}" width="1.5em" height="1.5em" class="m-auto"></iconify-icon></span>{%- endif -%}
   </{% if param.href %}a{% else %}button{% endif %}>

diff --git a/_site/index.md b/_site/index.md
@@ -13,13 +13,31 @@ Incididunt exercitation excepteur eu laboris qui et velit exercitation fugiat ut
 
 **Here's an example of a [parameterized component](https://github.com/craigerskine/11ty-twind/blob/main/_site/_includes/macro.button.njk):**
 
+```twig{% raw %}
+{# _includes/macro.button.njk #}
+{%- macro button(param) -%}
+  <button{{ param.props | safe }} class="py-1.5 px-3 bg-{{ param.color }}-500 text-black/90 inline-flex ...youGetTheIdea">
+    {{ param.slot | safe }}
+    {%- if param.icon %}<iconify-icon icon="{{ param.icon }}"></iconify-icon>{%- endif %}
+  </button>
+{%- endmacro -%}
+
+{# _site/some-page.njk #}
+{%- from 'macro.button.njk' import button -%}
+{{ button({
+  color: 'orange',
+  icon: 'mdi:check',
+  props: ' aria-label="check"'
+}) }}
+{% endraw %}```
+
 {{ button({
   color: 'pri',
-  slot: 'Primary'
+  slot: 'Contained'
 }) }} {{ button({
   outline: true,
   color: 'sec',
-  slot: 'Secondary'
+  slot: 'Outline'
 }) }} {{ button({
   ghost: true,
   color: 'neutral',
@@ -28,34 +46,15 @@ Incididunt exercitation excepteur eu laboris qui et velit exercitation fugiat ut
   color: 'orange',
   icon: 'mdi:check',
   circle: true,
-  reverse: true,
   props: ' aria-label="check"'
 }) }} {{ button({
   color: 'neutral',
   slot: 'Truncate super long button labels like this'
 }) }} { .p-8 .flex .flex-wrap .items-center .justify-center .gap-3 }
 
-```twig{% raw %}
-{# _includes/macro.button.njk #}
-{%- macro button(param) -%}
-  <button{{ param.props | safe }} class="py-1.5 px-3 bg-{{ param.color }}-500 text-black/90 inline-flex ...youGetTheIdea">
-    {{ param.slot | safe }}
-    {%- if param.icon %}<iconify-icon icon="{{ param.icon }}"></iconify-icon>{%- endif %}
-  </button>
-{%- endmacro -%}
-
-{# _site/some-page.njk #}
-{%- from 'macro.button.njk' import button -%}
-{{ button({
-  color: 'orange',
-  icon: 'mdi:check',
-  props: ' aria-label="check"'
-}) }}
-{% endraw %}```
-
 ***
 
-### Another heading
+### Some Typography
 
 > Commodo irure laboris incididunt anim veniam non ea et nisi ea. Nostrud pariatur ipsum aliqua sit consequat occaecat velit enim enim ex consectetur anim sunt id.