@sociallane/elements 1.0.0

package/packages/widgets/logo-grid-row/logo-grid-row.php

@@ -0,0 +1,254 @@
+<?php
+/**
+ * Widget: Logo Grid
+ *
+ * A section with headline, description, optional CTA links, and a grid of
+ * company/partner logos in rounded blocks. "You'll be in good company" style.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Repeater;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Logo Grid Widget
+ */
+class Logo_Grid_Row extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'logo-grid-row';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Logo Grid (Row)', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-gallery-grid';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-cards' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'logo', 'grid', 'partners', 'integrations', 'companies', 'trust' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_header_section();
+		$this->register_links_section();
+		$this->register_logos_section();
+		$this->register_animation_controls( true, true );
+	}
+
+	private function register_header_section(): void {
+		$this->start_controls_section(
+			'section_header',
+			[
+				'label' => esc_html__( 'Header', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_headline',
+			[
+				'label'   => esc_html__( 'Show Headline', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'headline',
+			[
+				'label'       => esc_html__( 'Headline', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( "You'll be in good company", 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+
+		$this->add_control(
+			'headline_tag',
+			[
+				'label'   => esc_html__( 'Headline Tag', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'h2',
+				'options' => [
+					'h1' => 'H1',
+					'h2' => 'H2',
+					'h3' => 'H3',
+				],
+			]
+		);
+
+		$this->add_control(
+			'show_description',
+			[
+				'label'   => esc_html__( 'Show Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'description',
+			[
+				'label'   => esc_html__( 'Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXTAREA,
+				'default' => esc_html__( 'We use an agile approach to test assumptions and connect with the needs of your audience early and often.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_links_section(): void {
+		$this->start_controls_section(
+			'section_links',
+			[
+				'label' => esc_html__( 'Links', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'link_1_text',
+			[
+				'label'   => esc_html__( 'Link 1 Text', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXT,
+				'default' => esc_html__( 'Explore our integrations', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'link_1_url',
+			[
+				'label' => esc_html__( 'Link 1 URL', 'sociallane-elements' ),
+				'type'  => Controls_Manager::URL,
+			]
+		);
+
+		$this->add_control(
+			'link_2_text',
+			[
+				'label'   => esc_html__( 'Link 2 Text', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXT,
+				'default' => esc_html__( 'API Overview', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'link_2_url',
+			[
+				'label' => esc_html__( 'Link 2 URL', 'sociallane-elements' ),
+				'type'  => Controls_Manager::URL,
+			]
+		);
+		$this->add_control(
+			'link_style',
+			[
+				'label'   => esc_html__( 'Link style', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'ghost',
+				'options' => sociallane_get_button_preset_options(),
+			]
+		);
+		$this->add_control(
+			'link_color',
+			[
+				'label'       => esc_html__( 'Link color', 'sociallane-elements' ),
+				'type'        => Controls_Manager::SELECT,
+				'default'     => 'default',
+				'options'     => function_exists( 'sociallane_get_button_color_options' ) ? sociallane_get_button_color_options() : [ 'default' => esc_html__( 'Default (brand)', 'sociallane-elements' ) ],
+				'description' => esc_html__( 'Accent color when link style is Primary, Outline or Ghost.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_logos_section(): void {
+		$this->start_controls_section(
+			'section_logos',
+			[
+				'label' => esc_html__( 'Logos', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$repeater = new Repeater();
+
+		$repeater->add_control(
+			'logo_image',
+			[
+				'label'   => esc_html__( 'Logo', 'sociallane-elements' ),
+				'type'    => Controls_Manager::MEDIA,
+				'default' => [
+					'url' => \Elementor\Utils::get_placeholder_image_src(),
+				],
+			]
+		);
+
+		$repeater->add_control(
+			'logo_alt',
+			[
+				'label'       => esc_html__( 'Alt Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'description' => esc_html__( 'Required for accessibility.', 'sociallane-elements' ),
+			]
+		);
+
+		$repeater->add_control(
+			'logo_url',
+			[
+				'label' => esc_html__( 'Link URL', 'sociallane-elements' ),
+				'type'  => Controls_Manager::URL,
+			]
+		);
+
+		$lorem_logos = [
+			[ 'logo_image' => [ 'url' => 'https://placehold.co/160x48/e5e7eb/6b7280?text=Lorem' ], 'logo_alt' => 'Lorem' ],
+			[ 'logo_image' => [ 'url' => 'https://placehold.co/160x48/e5e7eb/6b7280?text=Ipsum' ], 'logo_alt' => 'Ipsum' ],
+			[ 'logo_image' => [ 'url' => 'https://placehold.co/160x48/e5e7eb/6b7280?text=Dolor' ], 'logo_alt' => 'Dolor' ],
+			[ 'logo_image' => [ 'url' => 'https://placehold.co/160x48/e5e7eb/6b7280?text=Sit' ], 'logo_alt' => 'Sit' ],
+			[ 'logo_image' => [ 'url' => 'https://placehold.co/160x48/e5e7eb/6b7280?text=Amet' ], 'logo_alt' => 'Amet' ],
+			[ 'logo_image' => [ 'url' => 'https://placehold.co/160x48/e5e7eb/6b7280?text=Elit' ], 'logo_alt' => 'Elit' ],
+			[ 'logo_image' => [ 'url' => 'https://placehold.co/160x48/e5e7eb/6b7280?text=Sed' ], 'logo_alt' => 'Sed' ],
+			[ 'logo_image' => [ 'url' => 'https://placehold.co/160x48/e5e7eb/6b7280?text=Do' ], 'logo_alt' => 'Do' ],
+			[ 'logo_image' => [ 'url' => 'https://placehold.co/160x48/e5e7eb/6b7280?text=Eiusmod' ], 'logo_alt' => 'Eiusmod' ],
+		];
+		$this->add_control(
+			'logos',
+			[
+				'label'       => esc_html__( 'Logos', 'sociallane-elements' ),
+				'type'        => Controls_Manager::REPEATER,
+				'fields'      => $repeater->get_controls(),
+				'default'     => $lorem_logos,
+				'title_field' => esc_html__( 'Logo', 'sociallane-elements' ),
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_logo_grid_row_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/packages/widgets/logo-grid-row/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sociallane/widget-logo-grid-row",
+  "version": "1.0.0",
+  "private": true,
+  "description": "SocialLane Elements widget: logo-grid-row",
+  "peerDependencies": {
+    "@sociallane/core": "^1.0.0"
+  },
+  "scripts": {
+    "build": "echo \"No widget-specific build\""
+  }
+}

package/packages/widgets/logo-grid-row/templates/wrapper.php

@@ -0,0 +1,108 @@
+<?php
+/**
+ * Template: Logo Grid Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - layout ('centered' | 'row' | 'split')
+ * - show_headline, show_description, headline, headline_tag, description
+ * - links (array of button data: text, url, variant, size, attrs)
+ * - logos (array of { src, alt, href|null, attrs })
+ * - classes, widget_id
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$section_id    = 'logo-grid-' . $view['widget_id'];
+$has_heading   = ( $view['show_headline'] && $view['headline'] !== '' ) || ( $view['show_description'] && $view['description'] !== '' );
+$has_links     = ! empty( $view['links'] );
+$has_logos     = ! empty( $view['logos'] );
+$logo_count    = $has_logos ? count( $view['logos'] ) : 0;
+$use_carousel  = $logo_count > 6;
+$elements_path = SOCIALLANE_ELEMENTS_PATH . 'elements';
+$logo_block_row = $view['classes']['logo_block_row'] ?? '';
+$logo_img_class = 'max-h-8 w-auto max-w-full object-contain opacity-90 dark:opacity-90 grayscale group-hover:grayscale-0 transition-[filter] duration-200';
+$anim          = $view['animation'] ?? [];
+$section_attrs = sociallane_section_animation_attrs( $anim );
+$headline_attrs = sociallane_headline_animation_attrs( $anim );
+?>
+
+<?php // ========== LOGO GRID (ROW) START ========== ?>
+
+<section
+	class="<?php echo esc_attr( $view['classes']['section'] ); ?> py-16 md:py-20 lg:py-24"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( $has_heading ) : ?>aria-labelledby="<?php echo esc_attr( $section_id ); ?>"<?php endif; ?>
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<?php // ----- Row layout: heading then single row (or carousel if >6 logos) ----- ?>
+			<?php if ( $has_heading || $has_links ) : ?>
+				<header class="text-center max-w-3xl mx-auto mb-12 md:mb-16" id="<?php echo esc_attr( $section_id ); ?>">
+					<?php if ( $view['show_headline'] && $view['headline'] !== '' ) : ?>
+						<<?php echo $view['headline_tag']; ?>
+							class="<?php echo esc_attr( $view['classes']['headline'] ); ?> text-3xl sm:text-4xl md:text-5xl font-bold font-heading leading-tight"
+							<?php echo ! empty( $headline_attrs ) ? ' ' . $headline_attrs : ''; ?>
+						>
+							<?php echo $view['headline']; ?>
+						</<?php echo $view['headline_tag']; ?>>
+					<?php endif; ?>
+					<?php if ( $view['show_description'] && $view['description'] !== '' ) : ?>
+						<p class="<?php echo esc_attr( $view['classes']['description'] ); ?> mt-4 text-lg md:text-xl leading-relaxed">
+							<?php echo $view['description']; ?>
+						</p>
+					<?php endif; ?>
+					<?php if ( $has_links ) : ?>
+						<div class="mt-6 flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
+							<?php foreach ( $view['links'] as $button ) : ?>
+								<?php include $elements_path . '/button/templates/render.php'; ?>
+							<?php endforeach; ?>
+						</div>
+					<?php endif; ?>
+				</header>
+			<?php endif; ?>
+
+			<?php if ( $has_logos ) : ?>
+				<?php if ( $use_carousel ) : ?>
+					<div class="sl-logo-row-carousel overflow-hidden py-2 max-w-6xl mx-auto px-4 md:px-6" role="region" aria-label="<?php esc_attr_e( 'Logo carousel', 'sociallane-elements' ); ?>">
+						<div class="sl-logo-row-carousel__track flex w-max gap-8 md:gap-12">
+							<?php foreach ( [ 0, 1 ] as $copy ) : ?>
+								<div class="flex gap-8 md:gap-12 shrink-0 px-2">
+									<?php foreach ( $view['logos'] as $logo ) : ?>
+										<?php
+										$tag      = $logo['href'] !== null ? 'a' : 'div';
+										$extra    = $logo['href'] !== null ? ' href="' . esc_url( $logo['href'] ) . '" ' . $logo['attrs'] : '';
+										$alt_attr = $copy === 1 ? ' aria-hidden="true"' : '';
+										?>
+										<<?php echo $tag; ?> class="<?php echo esc_attr( $logo_block_row ); ?> min-w-[140px] md:min-w-[160px]"<?php echo $extra; ?><?php echo $alt_attr; ?>>
+											<img src="<?php echo esc_url( $logo['src'] ); ?>" alt="<?php echo $copy === 0 ? $logo['alt'] : ''; ?>" class="<?php echo esc_attr( $logo_img_class ); ?>" loading="lazy" decoding="async" />
+										</<?php echo $tag; ?>>
+									<?php endforeach; ?>
+								</div>
+							<?php endforeach; ?>
+						</div>
+					</div>
+				<?php else : ?>
+					<div class="flex flex-wrap items-center justify-center gap-8 md:gap-12 max-w-5xl mx-auto">
+						<?php foreach ( $view['logos'] as $logo ) : ?>
+							<?php
+							$tag   = $logo['href'] !== null ? 'a' : 'div';
+							$extra = $logo['href'] !== null ? ' href="' . esc_url( $logo['href'] ) . '" ' . $logo['attrs'] : '';
+							?>
+							<<?php echo $tag; ?> class="<?php echo esc_attr( $logo_block_row ); ?>"<?php echo $extra; ?>>
+								<img src="<?php echo esc_url( $logo['src'] ); ?>" alt="<?php echo $logo['alt']; ?>" class="<?php echo esc_attr( $logo_img_class ); ?>" loading="lazy" decoding="async" />
+							</<?php echo $tag; ?>>
+						<?php endforeach; ?>
+					</div>
+				<?php endif; ?>
+			<?php endif; ?>
+	</div>
+</section>
+
+<?php // ========== LOGO GRID (ROW) END ========== ?>

package/packages/widgets/logo-grid-split/data/view.php

@@ -0,0 +1,79 @@
+<?php
+/**
+ * Data Preparation: Logo Grid
+ *
+ * Transforms raw Elementor settings into clean, template-ready data.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Logo Grid widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id  Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_logo_grid_split_view( array $settings, string $widget_id ): array {
+	$fields       = sociallane_extract_fields( $settings, [ 'headline' => [], 'description' => [] ] );
+	$headline_tag = sociallane_validate_heading_tag( $settings, 'headline_tag', 'h2' );
+
+	$link_preset = function_exists( 'sociallane_parse_button_preset' ) ? sociallane_parse_button_preset( $settings['link_style'] ?? 'ghost' ) : [ 'variant' => 'ghost', 'size' => 'md' ];
+	$link_color  = $settings['link_color'] ?? 'default';
+	$links       = [];
+	foreach ( [ 'link_1', 'link_2' ] as $key ) {
+		$text = trim( $settings[ $key . '_text' ] ?? '' );
+		if ( $text === '' ) {
+			continue;
+		}
+		$link = sociallane_prepare_link_attrs( $settings[ $key . '_url' ] ?? [] );
+		$links[] = [
+			'text'    => esc_html( $text ),
+			'url'     => $link['url'],
+			'variant' => $link_preset['variant'],
+			'size'    => $link_preset['size'],
+			'color'   => $link_color,
+			'attrs'   => $link['attrs'],
+		];
+	}
+
+	$logos = sociallane_process_repeater( $settings['logos'] ?? [], function ( $item ) {
+		$img = $item['logo_image'] ?? [];
+		$src = esc_url( $img['url'] ?? '' );
+		if ( $src === '' ) {
+			return null;
+		}
+		$link = sociallane_prepare_link_attrs( $item['logo_url'] ?? [] );
+		$href = $link['url'] !== '#' && $link['url'] !== '' ? $link['url'] : null;
+		return [
+			'src'   => $src,
+			'alt'   => esc_attr( $item['logo_alt'] ?? '' ),
+			'href'  => $href,
+			'attrs' => $link['attrs'],
+		];
+	} );
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+
+	// Light/dark: dual classes for Nav theme switcher (elementor-widget-structure, widget-utility-classes)
+	$classes = [
+		'section'       => 'bg-blue-chill-950 dark:bg-gradient-to-t from-blue-chill-900 dark:via-blue-chill-950 dark:to-neutral-950',
+		'headline'      => 'text-blue-chill-300 dark:text-blue-chill-200',
+		'description'   => 'text-blue-chill-300 dark:text-blue-chill-200',
+		'logo_block'    => 'group bg-neutral-100 dark:bg-blue-chill-800 rounded-xl border border-blue-chill-100 dark:border-blue-chill-100/20 flex items-center justify-center p-6 md:p-8 min-h-[100px]',
+		'logo_block_row' => 'group flex items-center justify-center shrink-0 p-4',
+	];
+
+	return array_merge( $fields, [
+		'headline_tag' => $headline_tag,
+		'links'        => $links,
+		'logos'        => $logos,
+		'classes'      => $classes,
+		'widget_id'    => $widget_id,
+		'animation'    => $animation,
+	] );
+}