Skip to content

Commit

Permalink
TMZ-306 refactor header button
Browse files Browse the repository at this point in the history
  • Loading branch information
@mserino
mserino committed Jan 23, 2025
1 parent e576ae5 commit 767814e
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 310 deletions.
158 changes: 44 additions & 114 deletions modules/template-parts/assets/scss/hello-plus-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,39 +22,33 @@

--header-button-primary-icon-spacing: 10px;
--header-button-primary-icon-size: 16px;
--header-button-primary-text-color: #FFFFFF;
--header-button-primary-text-color-hover: #FFFFFF;
--header-button-primary-text-color: #{$global-colors-white};
--header-button-primary-text-color-hover: #{$global-colors-text};
--header-button-primary-border-width: 0;
--header-button-primary-border-color: transparent;
--header-button-primary-padding-block-end: 8px;
--header-button-primary-padding-block-start: 8px;
--header-button-primary-padding-inline-end: 16px;
--header-button-primary-padding-inline-start: 16px;
--header-button-primary-border-radius: 0;
--header-button-primary-border-radius-block-end: #{$corners-shape-default};
--header-button-primary-border-radius-block-start: #{$corners-shape-default};
--header-button-primary-border-radius-inline-end: #{$corners-shape-default};
--header-button-primary-border-radius-inline-start: #{$corners-shape-default};

--header-button-secondary-icon-spacing: 10px;
--header-button-secondary-icon-size: 16px;
--header-button-secondary-text-color: #555963;
--header-button-secondary-text-color-hover: #555963;
--header-button-secondary-text-color: #{$global-colors-secondary};
--header-button-secondary-text-color-hover: #{$global-colors-secondary};
--header-button-secondary-border-width: 2px;
--header-button-secondary-border-color: #555963;
--header-button-secondary-border-color: #{$global-colors-secondary};
--header-button-secondary-padding-block-end: 8px;
--header-button-secondary-padding-block-start: 8px;
--header-button-secondary-padding-inline-end: 16px;
--header-button-secondary-padding-inline-start: 16px;
--header-button-secondary-border-radius: #{$corners-shape-default};

--header-button-text-color: var(--header-button-primary-text-color);
--header-button-text-color-hover: var(--header-button-primary-text-color-hover);
--header-button-border-color: var(--header-button-primary-border-color);
--header-button-padding-block-end: var(--header-button-primary-padding-block-end);
--header-button-padding-block-start: var(--header-button-primary-padding-block-start);
--header-button-padding-inline-end: var(--header-button-primary-padding-inline-end);
--header-button-padding-inline-start: var(--header-button-primary-padding-inline-start);
--header-button-border-width: var(--header-button-primary-border-width);
--header-button-border-radius: var(--header-button-primary-border-radius);
--header-button-icon-spacing: var(--header-button-primary-icon-spacing);
--header-button-icon-size: var(--header-button-primary-icon-size);
--header-button-secondary-border-radius-block-end: #{$corners-shape-default};
--header-button-secondary-border-radius-block-start: #{$corners-shape-default};
--header-button-secondary-border-radius-inline-end: #{$corners-shape-default};
--header-button-secondary-border-radius-inline-start: #{$corners-shape-default};

--header-toggle-icon-color: #555963;
--header-toggle-icon-color-active: #555963;
Expand Down Expand Up @@ -265,101 +259,37 @@
order: 3;
}

& a.ehp-header__button {
align-items: center;
display: flex;
gap: var(--header-button-icon-spacing);
text-decoration: none;
transition: $transition;

&:hover,
&:focus {
transition: $transition;
}

svg {
fill: currentColor;
height: 1em; // height is relative to the font-size
width: 1em; // width is relative to the font-size
}

&.has-border {
border-color: var(--header-button-border-color);
border-style: solid;
border-width: var(--header-button-border-width);
border-radius: var(--header-button-border-radius);
}

&.is-type {

&-button {
padding-block-end: var(--header-button-padding-block-end);
padding-block-start: var(--header-button-padding-block-start);
padding-inline-end: var(--header-button-padding-inline-end);
padding-inline-start: var(--header-button-padding-inline-start);
}

&-link,
&-link:not([href]):not([tabindex]) {
background: none;
text-decoration: underline;

&:hover,
&:focus {
background: none;
}
}

&-button,
&-link,
&-button:not([href]):not([tabindex]),
&-link:not([href]):not([tabindex]) {
color: var(--header-button-text-color);

&:hover,
&:focus {
color: var(--header-button-text-color-hover);
}
}
}

&--secondary {
--header-button-text-color: var(--header-button-secondary-text-color);
--header-button-text-color-hover: var(--header-button-secondary-text-color-hover);
--header-button-border-color: var(--header-button-secondary-border-color);
--header-button-padding-block-end: var(--header-button-secondary-padding-block-end);
--header-button-padding-block-start: var(--header-button-secondary-padding-block-start);
--header-button-padding-inline-end: var(--header-button-secondary-padding-inline-end);
--header-button-padding-inline-start: var(--header-button-secondary-padding-inline-start);
--header-button-border-width: var(--header-button-secondary-border-width);
--header-button-border-radius: var(--header-button-secondary-border-radius);
--header-button-icon-spacing: var(--header-button-secondary-icon-spacing);
}

@mixin custom-shape-button() {
&-custom {
--header-border-radius-block-end: var(--header-button-border-radius-custom-block-end);
--header-border-radius-block-start: var(--header-button-border-radius-custom-block-start);
--header-border-radius-inline-end: var(--header-button-border-radius-custom-inline-end);
--header-border-radius-inline-start: var(--header-button-border-radius-custom-inline-start);
}
}

&.has-shape {
@include custom-shape-button();

&-md {
@media screen and (max-width: $screen-desktop-min) {
@include custom-shape-button();
}
}

&-sm {
@media screen and (max-width: $screen-tablet-min) {
@include custom-shape-button();
}
}
}
& a.ehp-button,
& a.ehp-button:not([href]):not([tabindex]) {
--ehp-button-primary-icon-spacing: var(--header-button-primary-icon-spacing);
--ehp-button-primary-icon-size: var(--header-button-primary-icon-size);
--ehp-button-primary-text-color: var(--header-button-primary-text-color);
--ehp-button-primary-text-color-hover: var(--header-button-primary-text-color-hover);
--ehp-button-primary-border-width: var(--header-button-primary-border-width);
--ehp-button-primary-border-color: var(--header-button-primary-border-color);
--ehp-button-primary-padding-block-end: var(--header-button-primary-padding-block-end);
--ehp-button-primary-padding-block-start: var(--header-button-primary-padding-block-start);
--ehp-button-primary-padding-inline-end: var(--header-button-primary-padding-inline-end);
--ehp-button-primary-padding-inline-start: var(--header-button-primary-padding-inline-start);
--ehp-button-primary-border-radius-block-end: var(--header-button-primary-border-radius-block-end);
--ehp-button-primary-border-radius-block-start: var(--header-button-primary-border-radius-block-start);
--ehp-button-primary-border-radius-inline-end: var(--header-button-primary-border-radius-inline-end);
--ehp-button-primary-border-radius-inline-start: var(--header-button-primary-border-radius-inline-start);

--ehp-button-secondary-icon-spacing: var(--header-button-secondary-icon-spacing);
--ehp-button-secondary-icon-size: var(--header-button-secondary-icon-size);
--ehp-button-secondary-text-color: var(--header-button-secondary-text-color);
--ehp-button-secondary-text-color-hover: var(--header-button-secondary-text-color-hover);
--ehp-button-secondary-border-width: var(--header-button-secondary-border-width);
--ehp-button-secondary-border-color: var(--header-button-secondary-border-color);
--ehp-button-secondary-padding-block-end: var(--header-button-secondary-padding-block-end);
--ehp-button-secondary-padding-block-start: var(--header-button-secondary-padding-block-start);
--ehp-button-secondary-padding-inline-end: var(--header-button-secondary-padding-inline-end);
--ehp-button-secondary-padding-inline-start: var(--header-button-secondary-padding-inline-start);
--ehp-button-secondary-border-radius-block-end: var(--header-button-secondary-border-radius-block-end);
--ehp-button-secondary-border-radius-block-start: var(--header-button-secondary-border-radius-block-start);
--ehp-button-secondary-border-radius-inline-end: var(--header-button-secondary-border-radius-inline-end);
--ehp-button-secondary-border-radius-inline-start: var(--header-button-secondary-border-radius-inline-start);
}

&__navigation {
Expand Down
64 changes: 3 additions & 61 deletions modules/template-parts/classes/render/widget-header-render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
};

use HelloPlus\Modules\TemplateParts\Widgets\Ehp_Header;
// use HelloPlus\Classes\Ehp_Button;
use HelloPlus\Classes\Ehp_Button;

/**
* class Widget_Header_Render
Expand Down Expand Up @@ -500,66 +500,8 @@ public static function build_messenger_link( string $username ) {
}

protected function render_button( $type ) {
$button_text = $this->settings[ $type . '_cta_button_text' ];
$button_link = $this->settings[ $type . '_cta_button_link' ];
$button_icon = $this->settings[ $type . '_cta_button_icon' ];
$button_hover_animation = $this->settings[ $type . '_button_hover_animation' ] ?? '';
$button_has_border = $this->settings[ $type . '_show_button_border' ];
$button_corner_shape = $this->settings[ $type . '_button_shape' ] ?? '';
$button_corner_shape_mobile = $this->settings[ $type . '_button_shape_mobile' ] ?? '';
$button_corner_shape_tablet = $this->settings[ $type . '_button_shape_tablet' ] ?? '';
$button_type = $this->settings[ $type . '_button_type' ] ?? '';
$button_classnames = [
self::BUTTON_CLASSNAME,
];

$button_classnames[] = 'ehp-header__button--' . $type;

if ( ! empty( $button_type ) ) {
$button_classnames[] = 'is-type-' . $button_type;
}

if ( $button_hover_animation ) {
$button_classnames[] = 'elementor-animation-' . $button_hover_animation;
}

if ( 'yes' === $button_has_border ) {
$button_classnames[] = 'has-border';
}

if ( ! empty( $button_corner_shape ) ) {
$button_classnames[] = 'has-shape-' . $button_corner_shape;

if ( ! empty( $button_corner_shape_mobile ) ) {
$button_classnames[] = 'has-shape-sm-' . $button_corner_shape_mobile;
}

if ( ! empty( $button_corner_shape_tablet ) ) {
$button_classnames[] = 'has-shape-md-' . $button_corner_shape_tablet;
}
}

$this->widget->add_render_attribute( $type . '-button', [
'class' => $button_classnames,
] );

if ( ! empty( $button_link['url'] ) ) {
$this->widget->add_link_attributes( $type . '-button', $button_link, true );
}

?>
<a <?php $this->widget->print_render_attribute_string( $type . '-button' ); ?>>
<?php
Icons_Manager::render_icon( $button_icon,
[
'aria-hidden' => 'true',
'class' => 'ehp-header__button-icon',
]
);
?>
<?php echo esc_html( $button_text ); ?>
</a>
<?php
$button = new Ehp_Button( $this->widget, [ 'type' => $type, 'widget_name' => 'header' ] );
$button->render();
}

public function get_link_url(): array {
Expand Down
Loading

0 comments on commit 767814e

Please sign in to comment.