Merge pull request #5 from kpsaurus/dev

Added accordion, UIKit version bump

CHANGELOG.md

@@ -4,7 +4,21 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
-
+
+
+## [0.0.4] - 2022-12-08
+
+### Changed
+
+- UIKit version bump (3.15.0)
+- Added a new UIKit component - Accordion
+
+## [0.0.3] - 2022-04-23
+
+### Changed
+
+- UIKit version bump (3.12.0)
+- Unit test added
 
 ## [0.0.2] - 2022-01-13
 

README.md

@@ -4,18 +4,19 @@ A collection of <a target="_blank" href="https://getuikit.com">UIKit</a> compone
 
 ### Available UIKit components
 
+- Accordion
+- Banner
+- Button
 - Container
 - Grid
 - Heading
 - Image
-- Slideshow
-- Slider
 - Lightbox
+- Link
 - Modal Popup
+- Slider
+- Slideshow
 - Switcher
-- Banner
-- Button
-- Link
 
 Some components also have alignment, margin, padding, and animation properties as well.
 

uikitblocks/__init__.py

@@ -1 +1 @@
-__version__ = "0.0.3"
+__version__ = "0.0.4"

uikitblocks/blocks.py

@@ -48,13 +48,8 @@ class Choices:
         ("small", "Small Width Container"),
     )
 
-    GRID_CHILD_WIDTH_CHOICES = (
-        (1, "1 Item"),
-        (2, "2 Items"),
-        (3, "3 Items"),
-        (4, "4 Items"),
-        (5, "5 Items"),
-        (6, "6 Items"),
+    GRID_CHILD_WIDTH_CHOICES = tuple(
+        (i, f"{i} Item" + ("" if i == 1 else "s")) for i in range(1, 7)
     )
 
 
@@ -195,6 +190,37 @@ class Meta:
         template = "button.html"
 
 
+class AccordionItemBlock(blocks.StructBlock):
+    title = blocks.CharBlock(required=True)
+    description = blocks.TextBlock(required=False)
+    open_by_default = blocks.BooleanBlock(
+        required=False,
+        default=False,
+        help_text="If this accordion item needs to be opened initially, tick this.",
+    )
+
+
+class AccordionBlock(blocks.StructBlock):
+    accordion = blocks.ListBlock(
+        AccordionItemBlock(),
+        label="Accordion",
+    )
+    collapsible = blocks.BooleanBlock(
+        required=False,
+        default=True,
+        help_text="By default, all accordion items can be collapsed. To prevent this behavior and always maintain one open item",
+    )
+    multiple = blocks.BooleanBlock(
+        required=False,
+        default=False,
+        help_text="To display multiple content sections at the same time without one collapsing when the other one is opened, tick this",
+    )
+
+    class Meta:
+        template = "accordion.html"
+        icon = "list-ul"
+
+
 class MarginBlock(blocks.StreamBlock):
     margin_top = blocks.ChoiceBlock(
         choices=Choices.MARGIN_CHOICES, required=False, default="no"
@@ -234,7 +260,7 @@ def get_context(self, value, parent_context=None):
         desc = None
         image = None
 
-        # With the help of beautiful soup, scrap the url and check 
+        # With the help of beautiful soup, scrap the url and check
         # whether the link has any possible title, thumbnail or description.
         try:
             # Open the URL as Browser, not as python urllib
@@ -283,16 +309,17 @@ class Meta:
 
 
 class UIKitBlocks(blocks.StreamBlock):
+    accordion = AccordionBlock()
+    banner = BannerBlock(label="Banner")
+    button = ButtonBlock()
     heading = HeadingBlock()
     image = ImageBlock()
-    slideshow = SlideshowBlock()
-    slider = SliderBlock()
     lightbox = Lightbox()
+    link = LinkBlock()
     popup = PopupBlock(label="Popup Message")
+    slider = SliderBlock()
+    slideshow = SlideshowBlock()
     switcher = SwitcherBlock(label="Switcher")
-    banner = BannerBlock(label="Banner")
-    button = ButtonBlock()
-    link = LinkBlock()
 
 
 class GridItemBlock(blocks.StructBlock):

uikitblocks/templates/accordion.html

@@ -0,0 +1,10 @@
+<ul class="uk-text-left" uk-accordion="multiple: {% if value.multiple %}true{% else %}false{% endif%}; collapsible: {% if value.collapsible %}true{% else %}false{% endif %}">
+    {% for item in value.accordion %}
+    <li {% if item.open_by_default %} class="uk-open" {% endif %}>
+        <a class="uk-accordion-title" href="#">{{item.title}}</a>
+        <div class="uk-accordion-content">
+            <p>{{item.description}}</p>
+        </div>
+    </li>
+    {% endfor %}
+</ul>

uikitblocks/templates/uikit_css.html

@@ -1,4 +1,4 @@
 <link
 	rel="stylesheet"
-	href="https://cdn.jsdelivr.net/npm/uikit@3.12.0/dist/css/uikit.min.css"
+	href="https://cdn.jsdelivr.net/npm/uikit@3.15.0/dist/css/uikit.min.css"
 />

uikitblocks/templates/uikit_js.html

@@ -1,2 +1,2 @@
-<script src="https://cdn.jsdelivr.net/npm/uikit@3.12.0/dist/js/uikit.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/uikit@3.12.0/dist/js/uikit-icons.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.0/dist/js/uikit.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.0/dist/js/uikit-icons.min.js"></script>