Merge pull request #54 from 8fold/feed-rss

accordion available

Author: joshbruce

src/UIKit.php

@@ -108,6 +108,16 @@ static public function webHead()
         return new $class();
     }
 
+    static public function accordion(
+        string $summaryId,
+        $summary,
+        ...$content
+    )
+    {
+        $class = self::class("accordion", self::CLASSES)->unfold();
+        return new $class($summaryId, $summary, ...$content);
+    }
+
     static public function __callStatic(string $element, array $elements)
     {
         $class = Html::class($element, self::CLASSES);
@@ -198,7 +208,8 @@ static public function __callStatic(string $element, array $elements)
         'markdown'   => \Eightfold\Markup\UIKit\Elements\Compound\Markdown::class,
         'pagination' => \Eightfold\Markup\UIKit\Elements\Compound\Pagination::class,
         'socialMeta' => \Eightfold\Markup\UIKit\Elements\Compound\SocialMeta::class,
-        'webHead'  => \Eightfold\Markup\UIKit\Elements\Compound\WebHead::class
+        'webHead'    => \Eightfold\Markup\UIKit\Elements\Compound\WebHead::class,
+        'accordion'  => \Eightfold\Markup\UIKit\Elements\Compound\Accordion::class
         // , 'primary_nav'      => UIKit\Elements\Compound\NavigationPrimary::class
         // , 'secondary_nav'    => UIKit\Elements\Compound\NavigationSecondary::class
         // , 'side_nav'         => UIKit\Elements\Compound\NavigationSide::class

src/UIKit/Elements/Compound/Accordion.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace Eightfold\Markup\UIKit\Elements\Compound;
+
+use Eightfold\Markup\Html\Elements\HtmlElement;
+
+use Eightfold\Shoop\Helpers\Type;
+use Eightfold\Shoop\Shoop;
+use Eightfold\Shoop\ESArray;
+use Eightfold\Shoop\ESInt;
+use Eightfold\Shoop\ESString;
+use Eightfold\Shoop\ESBool;
+
+use Eightfold\Markup\UIKit;
+
+class Accordion extends HtmlElement
+{
+    private $summaryId = "";
+    private $summary = "";
+
+    public function __construct(
+        string $summaryId,
+        $summary,
+        ...$content
+    )
+    {
+        $this->summary = (Type::is($summary, ESString::class, "string")) ? $summary : Type::sanitizeType($summary, ESArray::class);
+        $this->summaryId = $summaryId;
+
+        $this->content = $content;
+        $this->panelId = $this->summaryId ."-panel";
+
+    }
+
+    public function unfold(): string
+    {
+        $header = UIKit::h2(
+            UIKit::button(
+                $this->summary
+            )->attr(
+                "aria-expanded true",
+                "id {$this->summaryId}",
+                "aria-controls {$this->panelId}"
+            )
+        )->attr("is accordion")->unfold();
+        $panel = UIKit::div(
+            ...$this->content
+        )->attr(
+            "is accordion-panel",
+            "tabindex -1",
+            "role region",
+            "aria-hidden false",
+            "id {$this->panelId}",
+            "aria-labelledby {$this->summaryId}"
+        )->unfold();
+        return Shoop::string($header)->plus($panel);
+    }
+}

tests/UIKit/CompoundTest.php

@@ -124,7 +124,8 @@ public function testPaginationUnfold()
         $actual = UIKit::pagination(2, 20);
         $this->assertEquals($expected, $actual->unfold());
 
-        $expected = '<nav class="pagination next"><ul><li><a href="/feed/page/2" aria-label="Goto page 2">2</a></li><li><a class="current" href="/feed/page/1" aria-label="Current page, page 1">1</a></li><li><a href="/feed/page/2" aria-label="Goto page 2">2</a></li><li><a href="/feed/page/3" aria-label="Goto page 3">3</a></li></ul></nav>';
+        // TODO: Really need to work on this - don't have a business need yet
+        $expected = '<nav class="pagination next"><ul><li><a class="current" href="/feed/page/1" aria-label="Current page, page 1">1</a></li><li><a href="/feed/page/2" aria-label="Goto page 2">2</a></li><li><a href="/feed/page/3" aria-label="Goto page 3">3</a></li></ul></nav>';
         $actual = UIKit::pagination(1, 30);
         $this->assertEquals($expected, $actual->unfold());
 
@@ -193,4 +194,20 @@ public function testWebHead()
         )->socialTwitter("8foldPros");
         $this->assertEquals($expected, $actual->unfold());
     }
+
+    public function testAccordion()
+    {
+        $summaryId = "accordion";
+        $summary = "Summary";
+        $content = UIKit::p("The content.");
+        $expected = '<h2 is="accordion"><button id="'. $summaryId .'" aria-controls="'. $summaryId .'-panel" aria-expanded="true">'. $summary .'</button></h2><div is="accordion-panel" role="region" id="'. $summaryId .'-panel" tabindex="-1" aria-hidden="false" aria-labelledby="'. $summaryId .'">'. $content->unfold() .'</div>';
+
+         '<h2 is="accordion"><button id="" aria-controls="" aria-expanded="true"></button></h2><div is="accordion-panel" id="" aria-labelledby="'. $summaryId .'" tabindex="-1" role="region" aria-hidden="false">'. $content->unfold() .'</div>';
+        $actual = UIKit::accordion(
+            $summaryId,
+            $summary,
+            $content
+        );
+        $this->assertEquals($expected, $actual->unfold());
+    }
 }

tests/html/HtmlTest.php

@@ -100,4 +100,11 @@ public function testCanHaveAriaExpanded()
         $actual = Html::button()->attr("aria-expanded false");
         $this->assertEquals($expected, $actual->unfold());
     }
+
+    public function testCanHaveAriaLabelledBy()
+    {
+        $expected = '<div aria-labelledby="hello"></div>';
+        $actual = Html::div()->attr("aria-labelledby hello");
+        $this->assertEquals($expected, $actual->unfold());
+    }
 }