Skip to content

Commit

Permalink
Merge branch 'accordion-component'
Browse files Browse the repository at this point in the history
  • Loading branch information
zoltanszogyenyi committed Feb 6, 2022
2 parents 54524fa + 1439ea5 commit 54728e2
Show file tree
Hide file tree
Showing 13 changed files with 405 additions and 25 deletions.
2 changes: 1 addition & 1 deletion config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ baseURL: "https://flowbite.com/docs/"
enableInlineShortcodes: true

params:
current_version: 1.3.2
current_version: 1.3.3
authors: Themesberg
social_image_path: /docs/images/og-image.png

Expand Down
275 changes: 275 additions & 0 deletions content/components/accordion.md

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions content/components/alerts.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ toc: true

previous: Optimization
previousLink: customize/optimization/
next: Badges
nextLink: components/badge/
next: Accordion
nextLink: components/accordion/
---

The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.
Expand Down
4 changes: 2 additions & 2 deletions content/components/badge.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ description: Use Tailwind CSS badges as elements to show counts or labels separa
group: components
toc: true

previous: Alerts
previousLink: components/alerts/
previous: Accordion
previousLink: components/accordion/
next: Breadcrumbs
nextLink: components/breadcrumb/
---
Expand Down
10 changes: 5 additions & 5 deletions content/components/breadcrumb.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Use the following breadcrumb example to show the hierarchical structure of pages
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
<a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
<svg class="mr-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
Home
</a>
Expand All @@ -37,14 +37,14 @@ Use the following breadcrumb example to show the hierarchical structure of pages
<li aria-current="page">
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="ml-1 text-sm font-medium text-gray-400 md:ml-2 dark:text-gray-500">FlowBite</span>
<span class="ml-1 text-sm font-medium text-gray-400 md:ml-2 dark:text-gray-500">Flowbite</span>
</div>
</li>
</ol>
</nav>
{{< /example >}}

## With background
## Solid background

You can alternatively also use the breadcrumb components with a solid background.

Expand All @@ -53,7 +53,7 @@ You can alternatively also use the breadcrumb components with a solid background
<nav class="flex py-3 px-5 text-gray-700 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-700" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
<a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
<svg class="mr-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
Home
</a>
Expand All @@ -67,7 +67,7 @@ You can alternatively also use the breadcrumb components with a solid background
<li aria-current="page">
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="ml-1 text-sm font-medium text-gray-400 md:ml-2 dark:text-gray-500">FlowBite</span>
<span class="ml-1 text-sm font-medium text-gray-400 md:ml-2 dark:text-gray-500">Flowbite</span>
</div>
</li>
</ol>
Expand Down
2 changes: 1 addition & 1 deletion content/components/tables.md
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ Use the `hover:{bg-*}` utility class from Tailwind CSS to change the background
</div>
{{< /example >}}

## Checkbox selection
## Checkbox

Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.

Expand Down
17 changes: 10 additions & 7 deletions content/getting-started/changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,28 @@ nextLink: customize/configuration/

We strive to keep a good accountability of all of the version changes that we make for the FlowBite library.

### v1.3.2
### v1.3.3

- added new accordion component

Released on February 2nd, 2022.
### v1.3.2

- add new footer component
- add a new pricing card
- add new crypto wallet connect modal component
- add two new table components
- remove `.bundle` name convention
- remove `@themesberg` tag from NPM
### v1.3.1

Released on January 31th, 2022.
### v1.3.1

- add new spinner component
- add new floating labels for form elements

### v1.3.0

- add new timeline component
- update the main plugin file based on Tailwind CSS v3.x
- provide React, Vue, and Angular support for the interactive elements
- update plugin file to Tailwind CSS v3.x
- add React and Vue.js support for the interactive elements (data attributes only)

### v1.2.0

Expand Down
3 changes: 2 additions & 1 deletion data/sidebar.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
- title: Introduction
- title: Quickstart
- title: Laravel
new: true
- title: React
- title: Vue
# - title: Angular
Expand All @@ -26,6 +25,8 @@
- title: Components
pages:
- title: Alerts
- title: Accordion
new: true
- title: Badge
- title: Breadcrumb
- title: Buttons
Expand Down
6 changes: 3 additions & 3 deletions layouts/partials/scripts.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"
integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ .Site.BaseURL }}flowbite.js?v=1.3.1a"></script>
<script src="{{ .Site.BaseURL }}datepicker.js?v=1.3.1a"></script>
<script src="{{ .Site.BaseURL }}docs.js?v=1.3.1a"></script>
<script src="{{ .Site.BaseURL }}flowbite.js?v=1.3.3"></script>
<script src="{{ .Site.BaseURL }}datepicker.js?v=1.3.3"></script>
<script src="{{ .Site.BaseURL }}docs.js?v=1.3.3"></script>
4 changes: 2 additions & 2 deletions layouts/partials/stylesheet.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
<link rel="stylesheet" href="{{ .Site.BaseURL }}flowbite.css?v=1.3.1b">
<link rel="stylesheet" href="{{ .Site.BaseURL }}docs.css?v=1.3.1b">
<link rel="stylesheet" href="{{ .Site.BaseURL }}flowbite.css?v=1.3.3">
<link rel="stylesheet" href="{{ .Site.BaseURL }}docs.css?v=1.3.3">
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "flowbite",
"version": "1.3.2",
"version": "1.3.3",
"description": "The most popular library of interactive components built with Tailwind CSS",
"keywords": [
"flowbite",
Expand Down
100 changes: 100 additions & 0 deletions src/components/accordion.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
const hideAllOtherAccordionHeaderElements = (accordionHeaderElements, currentAccordionHeaderEl, activeClassesArray, inactiveClassesArray) => {
accordionHeaderElements.forEach(headerEl => {
if (currentAccordionHeaderEl !== headerEl) {
const bodyEl = document.querySelector(headerEl.getAttribute('data-accordion-target'));
headerEl.setAttribute('aria-expanded', false);
// active classes
activeClassesArray.map(c => {
headerEl.classList.remove(c);
})
// inactive classes
inactiveClassesArray.map(c => {
headerEl.classList.add(c);
})
bodyEl.classList.add('hidden');

if (headerEl.querySelector('[data-accordion-icon]')) {
headerEl.querySelector('[data-accordion-icon]').classList.remove('rotate-180');
}
}
});
}

const rotateAccordionIcon = (accordionHeaderEl) => {
if (accordionHeaderEl.querySelector('[data-accordion-icon]')) {
accordionHeaderEl.querySelector('[data-accordion-icon]').classList.toggle('rotate-180');
}
}

document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('[data-accordion]').forEach(function (accordionEl) {
const accordionId = accordionEl.getAttribute('id');
const collapseAccordion = accordionEl.getAttribute('data-accordion');
const accordionHeaderElements = document.querySelectorAll('#' + accordionId + ' [data-accordion-target]');
const activeClasses = accordionEl.getAttribute('data-active-classes');
const inactiveClasses = accordionEl.getAttribute('data-inactive-classes');

let activeClassesArray = null;
if (activeClasses && activeClasses !== '') {
activeClassesArray = activeClasses.split(" ");
} else {
// fallback classes if option not set
activeClassesArray = ['bg-gray-100', 'dark:bg-gray-800', 'text-gray-900', 'dark:text-white'];
}

let inactiveClassesArray = null;
if (inactiveClasses && inactiveClasses !== '') {
inactiveClassesArray = inactiveClasses.split(" ");
} else {
// fallback classes if option not set
inactiveClassesArray = ['text-gray-500', 'dark:text-gray-400'];
}

accordionHeaderElements.forEach(accordionHeaderEl => {

const accordionBodyEl = document.querySelector(accordionHeaderEl.getAttribute('data-accordion-target'));

accordionHeaderEl.addEventListener('click', () => {

if (collapseAccordion === 'collapse') {
hideAllOtherAccordionHeaderElements(accordionHeaderElements, accordionHeaderEl, activeClassesArray, inactiveClassesArray);
}

if (accordionHeaderEl.getAttribute('aria-expanded') === 'true') {
accordionHeaderEl.setAttribute('aria-expanded', false);

// active classes
activeClassesArray.map(c => {
accordionHeaderEl.classList.remove(c);
})

// inactive classes
inactiveClassesArray.map(c => {
accordionHeaderEl.classList.add(c);
})

accordionBodyEl.classList.add('hidden');

rotateAccordionIcon(accordionHeaderEl);
} else {
accordionHeaderEl.setAttribute('aria-expanded', true);

// active classes
activeClassesArray.map(c => {
accordionHeaderEl.classList.add(c);
})

// inactive classes
inactiveClassesArray.map(c => {
accordionHeaderEl.classList.remove(c);
})

accordionBodyEl.classList.remove('hidden');

rotateAccordionIcon(accordionHeaderEl);
}
})

});
});
});
1 change: 1 addition & 0 deletions src/flowbite.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import './flowbite.css';

// core components
import './components/accordion';
import './components/collapse';
import './components/dropdown';
import './components/tabs';
Expand Down

0 comments on commit 54728e2

Please sign in to comment.