Add a button styled rounded and implement it within the hero component

studiometa · Jan 6, 2023 · 4c7a05d · 4c7a05d
1 parent 7e86414
commit 4c7a05d
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 15 deletions.
diff --git a/packages/docs/components/atoms/Button/stories/secondary/app.twig b/packages/docs/components/atoms/Button/stories/secondary/app.twig
@@ -31,4 +31,36 @@
     icon: 'globe',
     icon_only: true
   } %}
+  {% include '@ui/atoms/Button/StyledButtonRounded.twig' with {
+    label: 'Secondary',
+    theme: 'secondary'
+  } %}
+  {% include '@ui/atoms/Button/StyledButtonRounded.twig' with {
+    label: 'Secondary',
+    theme: 'secondary',
+    attr: { disabled: true }
+  } %}
+  {% include '@ui/atoms/Button/StyledButtonRounded.twig' with {
+    label: 'Secondary',
+    theme: 'secondary',
+    icon: 'globe'
+  } %}
+  {% include '@ui/atoms/Button/StyledButtonRounded.twig' with {
+    label: 'Secondary',
+    theme: 'secondary',
+    icon: 'globe',
+    icon_position: 'start'
+  } %}
+  {% include '@ui/atoms/Button/StyledButtonRounded.twig' with {
+    label: 'Secondary',
+    theme: 'secondary',
+    icon: 'globe',
+    icon_position: 'end'
+  } %}
+  {% include '@ui/atoms/Button/StyledButtonRounded.twig' with {
+    label: 'Secondary',
+    theme: 'secondary',
+    icon: 'globe',
+    icon_only: true
+  } %}
 </div>
diff --git a/packages/docs/components/organisms/Hero/stories/full-slider/app.twig b/packages/docs/components/organisms/Hero/stories/full-slider/app.twig
@@ -6,7 +6,7 @@
 ] %}
 
 <style type="text/css">
-  .is-active { box-shadow: 0 0 0 3px var(--vp-c-brand); }
+  .is-active { background-color: white}
 
   html { overflow: hidden; }
 </style>
@@ -64,24 +64,33 @@
   {% endblock %}
   {% block after %}
     <div class="absolute bottom-0 w-full p-12 flex justify-between items-center">
-      <div data-component="SliderDots" class="space-x-4 flex">
+      <div data-component="SliderDots"
+        class="space-x-4 flex"
+        data-option-enter-to="is-active">
         {% for slides in slides %}
           <button type="button"
             data-ref="dots[]"
-            data-option-enter-to="is-active"
             class="relative w-3 flex-wrap h-3 bg-black rounded-full">
             <span class="sr-only">Go to slide #{{ loop.index }}</span>
           </button>
         {% endfor %}
       </div>
-      <div>
-        {% include '@ui/atoms/Button/StyledButton.twig' with {
-          label: '<',
-          attr: { data_component: 'SliderBtn', data_option_prev: true }
+      <div class="flex space-x-4">
+        {% include '@ui/atoms/Button/StyledButtonRounded.twig' with {
+          label: 'Secondary',
+          theme: 'primary',
+          icon: 'chevron',
+          icon_only: true,
+          attr: { data_component: 'SliderBtn', data_option_prev: true },
+          icon_class: ['rotate-90']
         } %}
-        {% include '@ui/atoms/Button/StyledButton.twig' with {
-          label: '>',
-          attr: { data_component: 'SliderBtn', data_option_next: true }
+        {% include '@ui/atoms/Button/StyledButtonRounded.twig' with {
+          label: 'Secondary',
+          theme: 'primary',
+          icon: 'chevron',
+          icon_only: true,
+          attr: { data_component: 'SliderBtn', data_option_next: true },
+          icon_class: ['-rotate-90']
         } %}
       </div>
     </div>

diff --git a/packages/ui/atoms/Button/StyledButton.twig b/packages/ui/atoms/Button/StyledButton.twig
@@ -35,13 +35,15 @@
 ] %}
 
 {% set attr =
-  attr
-    |default({})
-    |merge({
+  merge_html_attributes(
+    attr ?? null,
+    null,
+    {
       class: [
         theme_shared,
         theme == 'primary' ? theme_primary : '',
         theme == 'secondary' ? theme_secondary : ''
       ]
-    })
+    }
+  )
 %}
diff --git a/packages/ui/atoms/Button/StyledButtonRounded.twig b/packages/ui/atoms/Button/StyledButtonRounded.twig
@@ -0,0 +1,65 @@
+{#
+/**
+ * @file
+ *   Styled button rounded.
+ *
+ * @param 'primary' $theme
+ * @param $icon_class
+ */
+#}
+
+{% extends '@ui/atoms/Button/Button.twig' %}
+
+{% set icon_only = icon_only|default(false) %}
+
+{% set theme = theme|default('primary') %}
+
+{% set theme_shared = [
+  'rounded-full cursor-pointer transition',
+  'disabled:cursor-not-allowed leading-6',
+  {
+    'inline-block': icon is not defined,
+    'inline-flex items-center': icon is defined,
+    'px-6 py-4': not icon_only,
+    'w-14 relative p-4': icon_only
+  }
+] %}
+
+{% set theme_primary = ['text-white bg-black', 'hover:bg-opacity-75 disabled:bg-opacity-50'] %}
+
+{% set theme_secondary = [
+  'ring ring-inset ring-2 ring-black ring-opacity-25',
+  {
+    'hover:ring-opacity-100': (attr is defined and attr.disabled is not defined)
+      or attr is not defined
+  }
+] %}
+
+{% set attr =
+  merge_html_attributes(
+    attr ?? null,
+    null,
+    {
+      class: [
+        theme_shared,
+        theme == 'primary' ? theme_primary : '',
+        theme == 'secondary' ? theme_secondary : ''
+      ]
+    }
+  )
+%}
+{% set icon_class = icon_class|default({}) %}
+{% if icon_only %}
+  {% set icon_classes =
+    icon_classes
+      |default(['absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2'])
+      |merge(icon_class)
+  %}
+{% endif %}
+
+{% block icon %}
+  {{ parent() }}
+  {% if icon_only %}
+    &nbsp;
+  {% endif %}
+{% endblock %}
diff --git a/packages/ui/organisms/Hero/Hero.twig b/packages/ui/organisms/Hero/Hero.twig
@@ -138,7 +138,7 @@
         {% if actions %}
           <div {{ html_attributes(actions_attributes) }}>
             {% for action in actions %}
-              {% include '@ui/atoms/Button/StyledButton.twig' with action only %}
+              {% include '@ui/atoms/Button/StyledButtonRounded.twig' with action only %}
             {% endfor %}
           </div>
         {% endif %}