<h3>Table With Expandable Rows</h3>
<div class="acl-table">
<div class="acl-table__row acl-table__header demo-expanding-row">
<div class="acl-table__cell"></div>
<div class="acl-table__cell">Name</div>
<div class="acl-table__cell">Last Edit</div>
<div class="acl-table__cell">User</div>
<div class="acl-table__cell">Status</div>
<div class="acl-table__cell">Actions</div>
</div>
<!-- Demo Row 1 | Markup -->
<div class="acl-table-expandable-row demoRowOne">
<div class="acl-table-expandable-row__header acl-table__row demo-expanding-row">
<div class="acl-table-expandable-row__header-icon">
<div class="acl-table-expandable-row__chevron">
<i class="aforza-icons animated fadeIn">acl_down_arrow</i>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-title">Audit and restock guide</div>
<div class="acl-table-expandable-row__header-subtitle">Short description goes here</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-secondary-title">Tues 03/21/2021</div>
<div class="acl-table-expandable-row__header-secondary-subtitle">12:34</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.pexels.com/photos/1845534/pexels-photo-1845534.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200" class="acl-avatar acl-avatar--small acl-table-expandable-row__header-user-avatar" />
<div class="acl-table-expandable-row__user-details">
<div class="acl-table-expandable-row__header-user-name">Lenora Wilkins</div>
<div class="acl-table-expandable-row__user-job-title">Promotion Manager</div>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-label acl-label--blue"><span class="acl-label__text">Published</span></div>
</div>
<div class="acl-table-expandable-row__cell">
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
<div class="acl-table-expandable-row__body">
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 5:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar" />
<div class="acl-table-expandable-row__user-name">Josefina Rosols</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__cell acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 4:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar" />
<div class="acl-table-expandable-row__user-name">Diane Gardner</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__cell acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 3:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=73a9df4b7bd1b330db1e903e08575ec1" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar" />
<div class="acl-table-expandable-row__user-name">Joseph V. Lopez</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__cell acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 2:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://randomuser.me/api/portraits/men/27.jpg" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar" />
<div class="acl-table-expandable-row__user-name">Scott Neville</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__cell acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 1:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1543096222-72de739f7917?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar" />
<div class="acl-table-expandable-row__user-name">Fern Gettys</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__cell acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
</div>
<!-- Demo Row 1 | Markup END -->
<!-- Demo Row 2 | Markup -->
<div class="acl-table-expandable-row demoRowTwo">
<div class="acl-table-expandable-row__header acl-table__row demo-expanding-row ">
<div class="acl-table-expandable-row__header-icon">
<div class="acl-table-expandable-row__chevron">
<i class="aforza-icons animated fadeIn">acl_down_arrow</i>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-title">Audit and restock guide</div>
<div class="acl-table-expandable-row__header-subtitle">Short description goes here</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-secondary-title">Tues 03/21/2021</div>
<div class="acl-table-expandable-row__header-secondary-subtitle">12:34</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1507120878965-54b2d3939100?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=99fbace66d1bfa48c9c6dc8afcac3aab" class="acl-avatar acl-avatar--small acl-table-expandable-row__header-user-avatar" />
<div class="acl-table-expandable-row__user-details">
<div class="acl-table-expandable-row__header-user-name">Francisco Austin</div>
<div class="acl-table-expandable-row__user-job-title">Promotion Manager</div>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-label acl-label--blue"><span class="acl-label__text">Published</span></div>
</div>
<div class="acl-table-expandable-row__cell">
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
<div class="acl-table-expandable-row__body">
<div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 1:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.pexels.com/photos/1130626/pexels-photo-1130626.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar" />
<div class="acl-table-expandable-row__user-name">Allison Hernandez</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
</div>
</div>
<!-- Demo Row 2 | Markup END -->
<!-- Demo Row 3 | Markup -->
<div class="acl-table-expandable-row demoRowThree">
<div class="acl-table-expandable-row__header acl-table__row demo-expanding-row">
<div class="acl-table-expandable-row__header-icon">
<div class="acl-table-expandable-row__chevron">
<i class="aforza-icons animated fadeIn">acl_down_arrow</i>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-title">Audit and restock guide</div>
<div class="acl-table-expandable-row__header-subtitle">Short description goes here</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-secondary-title">Tues 03/21/2021</div>
<div class="acl-table-expandable-row__header-secondary-subtitle">12:34</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://uifaces.co/our-content/donated/LgPx_hOQ.jpg" class="acl-avatar acl-avatar--small acl-table-expandable-row__header-user-avatar" />
<div class="acl-table-expandable-row__user-details">
<div class="acl-table-expandable-row__header-user-name">William Miller</div>
<div class="acl-table-expandable-row__user-job-title">Promotion Manager</div>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-label acl-label--blue"><span class="acl-label__text">Published</span></div>
</div>
<div class="acl-table-expandable-row__cell">
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
<div class="acl-table-expandable-row__body">
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 2:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://uifaces.co/our-content/donated/2b999407f36cbca01ea42449cc3114e6.png" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar" />
<div class="acl-table-expandable-row__user-name">David Lafleur</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 1:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1496081081095-d32308dd6206?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=dd302358c7e18c27c4086e97caf85781" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar" />
<div class="acl-table-expandable-row__user-name">Tiffanie Harris</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
</div>
<!-- Demo Row 3 | Markup END -->
</div>
<style>
.demo-expanding-row {
grid-template-columns: 0.20fr 1.20fr 1fr 1fr 1fr 0.50fr;
}
</style>
<script>
// DEMO Row 1 //
const expandableRowOne = document.querySelector('.demoRowOne');
const demoRowOne = new acl.ACLExpandableTableRow(expandableRowOne);
// DEMO Row 1 - END //
// DEMO Row 2 //
const expandableRowTwo = document.querySelector('.demoRowTwo');
const demoRowTwo = new acl.ACLExpandableTableRow(expandableRowTwo);
// DEMO Row 2 - END //
// DEMO Row 3 //
const expandableRowThree = document.querySelector('.demoRowThree');
const demoRowThree = new acl.ACLExpandableTableRow(expandableRowThree);
// DEMO Row 3 - END //
</script>
<h3>Table With Expandable Rows</h3>
<div class="acl-table">
<div class="acl-table__row acl-table__header demo-expanding-row">
<div class="acl-table__cell"></div>
<div class="acl-table__cell">Name</div>
<div class="acl-table__cell">Last Edit</div>
<div class="acl-table__cell">User</div>
<div class="acl-table__cell">Status</div>
<div class="acl-table__cell">Actions</div>
</div>
<!-- Demo Row 1 | Markup -->
<div class="acl-table-expandable-row demoRowOne">
<div class="acl-table-expandable-row__header acl-table__row demo-expanding-row">
<div class="acl-table-expandable-row__header-icon">
<div class="acl-table-expandable-row__chevron">
<i class="aforza-icons animated fadeIn">acl_down_arrow</i>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-title">Audit and restock guide</div>
<div class="acl-table-expandable-row__header-subtitle">Short description goes here</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-secondary-title">Tues 03/21/2021</div>
<div class="acl-table-expandable-row__header-secondary-subtitle">12:34</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.pexels.com/photos/1845534/pexels-photo-1845534.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200" class="acl-avatar acl-avatar--small acl-table-expandable-row__header-user-avatar"/>
<div class="acl-table-expandable-row__user-details">
<div class="acl-table-expandable-row__header-user-name">Lenora Wilkins</div>
<div class="acl-table-expandable-row__user-job-title">Promotion Manager</div>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-label acl-label--blue"><span class="acl-label__text">Published</span></div>
</div>
<div class="acl-table-expandable-row__cell" >
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
<div class="acl-table-expandable-row__body">
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 5:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar"/>
<div class="acl-table-expandable-row__user-name">Josefina Rosols</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__cell acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 4:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar"/>
<div class="acl-table-expandable-row__user-name">Diane Gardner</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__cell acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 3:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=73a9df4b7bd1b330db1e903e08575ec1" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar"/>
<div class="acl-table-expandable-row__user-name">Joseph V. Lopez</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__cell acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 2:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://randomuser.me/api/portraits/men/27.jpg" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar"/>
<div class="acl-table-expandable-row__user-name">Scott Neville</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__cell acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 1:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1543096222-72de739f7917?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar"/>
<div class="acl-table-expandable-row__user-name">Fern Gettys</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__cell acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
</div>
<!-- Demo Row 1 | Markup END -->
<!-- Demo Row 2 | Markup -->
<div class="acl-table-expandable-row demoRowTwo">
<div class="acl-table-expandable-row__header acl-table__row demo-expanding-row ">
<div class="acl-table-expandable-row__header-icon">
<div class="acl-table-expandable-row__chevron">
<i class="aforza-icons animated fadeIn">acl_down_arrow</i>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-title">Audit and restock guide</div>
<div class="acl-table-expandable-row__header-subtitle">Short description goes here</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-secondary-title">Tues 03/21/2021</div>
<div class="acl-table-expandable-row__header-secondary-subtitle">12:34</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1507120878965-54b2d3939100?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=99fbace66d1bfa48c9c6dc8afcac3aab" class="acl-avatar acl-avatar--small acl-table-expandable-row__header-user-avatar"/>
<div class="acl-table-expandable-row__user-details">
<div class="acl-table-expandable-row__header-user-name">Francisco Austin</div>
<div class="acl-table-expandable-row__user-job-title">Promotion Manager</div>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-label acl-label--blue"><span class="acl-label__text">Published</span></div>
</div>
<div class="acl-table-expandable-row__cell" >
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
<div class="acl-table-expandable-row__body">
<div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 1:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.pexels.com/photos/1130626/pexels-photo-1130626.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar"/>
<div class="acl-table-expandable-row__user-name">Allison Hernandez</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
</div>
</div>
<!-- Demo Row 2 | Markup END -->
<!-- Demo Row 3 | Markup -->
<div class="acl-table-expandable-row demoRowThree">
<div class="acl-table-expandable-row__header acl-table__row demo-expanding-row">
<div class="acl-table-expandable-row__header-icon">
<div class="acl-table-expandable-row__chevron">
<i class="aforza-icons animated fadeIn">acl_down_arrow</i>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-title">Audit and restock guide</div>
<div class="acl-table-expandable-row__header-subtitle">Short description goes here</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__header-secondary-title">Tues 03/21/2021</div>
<div class="acl-table-expandable-row__header-secondary-subtitle">12:34</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://uifaces.co/our-content/donated/LgPx_hOQ.jpg" class="acl-avatar acl-avatar--small acl-table-expandable-row__header-user-avatar"/>
<div class="acl-table-expandable-row__user-details">
<div class="acl-table-expandable-row__header-user-name">William Miller</div>
<div class="acl-table-expandable-row__user-job-title">Promotion Manager</div>
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-label acl-label--blue"><span class="acl-label__text">Published</span></div>
</div>
<div class="acl-table-expandable-row__cell" >
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
<div class="acl-table-expandable-row__body">
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 2:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://uifaces.co/our-content/donated/2b999407f36cbca01ea42449cc3114e6.png" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar"/>
<div class="acl-table-expandable-row__user-name">David Lafleur</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
<div class="acl-table__row acl-table-expandable-row__body-row demo-expanding-row">
<div></div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__title">
<strong>Version 1:</strong> Audit and restock guide
</div>
</div>
<div class="acl-table-expandable-row__cell">
<div class="acl-table-expandable-row__subtitle">
Tue 03/21/2021 <span>12:34</span>
</div>
</div>
<div class="acl-table-expandable-row__user">
<img src="https://images.unsplash.com/photo-1496081081095-d32308dd6206?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=dd302358c7e18c27c4086e97caf85781" class="acl-avatar acl-avatar--x-small acl-table-expandable-row__user-avatar"/>
<div class="acl-table-expandable-row__user-name">Tiffanie Harris</div>
</div>
<div class="acl-label"><span class="acl-label__text">Draft</span></div>
<a class="acl-table-expandable-row__link" data-prevent-collapse href="#">View</a>
</div>
</div>
</div>
<!-- Demo Row 3 | Markup END -->
</div>
<style>
.demo-expanding-row {
grid-template-columns: 0.20fr 1.20fr 1fr 1fr 1fr 0.50fr;
}
</style>
<script>
// DEMO Row 1 //
const expandableRowOne = document.querySelector('.demoRowOne');
const demoRowOne = new acl.ACLExpandableTableRow(expandableRowOne);
// DEMO Row 1 - END //
// DEMO Row 2 //
const expandableRowTwo = document.querySelector('.demoRowTwo');
const demoRowTwo = new acl.ACLExpandableTableRow(expandableRowTwo);
// DEMO Row 2 - END //
// DEMO Row 3 //
const expandableRowThree = document.querySelector('.demoRowThree');
const demoRowThree = new acl.ACLExpandableTableRow(expandableRowThree);
// DEMO Row 3 - END //
</script>
/* No context defined. */
.acl-table {
display: grid;
margin: 0 auto;
font-family: 'Open Sans';
font-size: 12px;
line-height: 17px;
&__header {
background: rgba(248, 248, 251, 1);
font-weight: bold;
color: #8892b4;
font-size: 10px;
font-weight: 600;
letter-spacing: 0;
line-height: 14px;
&--background-colour {
&-white {
background: $white;
}
}
&--padding {
&-top {
padding-top: 10px;
}
&-bottom {
padding-bottom: 10px;
}
}
&--border {
&-bottom {
border-bottom: 1px solid #e8ebf8;
}
}
&--text {
&-dark {
color: rgba(0, 0, 0, 0.75);
}
&-medium {
font-size: 12px;
font-weight: 600;
}
}
&--sticky {
position: sticky !important;
top: 0;
z-index: 3;
}
}
&--border {
border: 1px solid #e8ebf8;
}
&--rounded-corners {
border-radius: 4px;
}
&--raised {
box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.15);
}
&__row {
display: grid;
&--align-content {
&-left {
display: grid;
justify-content: left;
}
&-center {
display: grid;
justify-content: center;
}
&-right {
display: grid;
justify-content: end;
}
&-top {
display: grid;
align-items: start;
}
&-bottom {
display: grid;
align-items: end;
}
&-vertical-center {
display: grid;
align-items: center;
}
}
&--border-bottom {
&:not(:last-child) {
border-bottom: 1px solid #e8ebf8;
}
}
}
&__header-cell,
&__cell {
padding: 5px;
overflow: hidden;
text-overflow: ellipsis;
&--align-content {
&-left {
display: grid;
justify-content: left;
}
&-center {
display: grid;
justify-content: center;
}
&-right {
display: grid;
justify-content: end;
}
&-top {
display: grid;
align-items: start;
}
&-bottom {
display: grid;
align-items: end;
}
&-vertical-center {
display: grid;
align-items: center;
}
}
&--border-right {
&:not(:last-child) {
border-right: 1px solid #e8ebf8;
}
}
&--darken {
background-color: #f7f6fb; // Candiate for ACL colour variables
}
&--overflow-visible {
overflow: visible;
}
&--ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
&-one-line {
-webkit-line-clamp: 1;
}
&-two-lines {
-webkit-line-clamp: 2;
}
}
}
}
.acl-table-expandable-row {
position: relative;
border-bottom: 1px solid #e8ebf8;
&__cell {
display: flex;
flex-direction: column;
justify-content: center;
}
&__header {
padding: 20px 0;
cursor: pointer;
&-icon {
display: flex;
justify-content: center;
align-items: start;
padding-top: 5px;
}
&-user-avatar {
margin-right: 10px;
}
&-user-name {
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
line-height: 19px;
}
&-title {
color: rgba(0, 0, 0, 0.75);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
}
&-subtitle {
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
letter-spacing: 0;
}
&-secondary-title {
font-size: 14px;
font-weight: 600;
}
&-secondary-subtitle {
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
}
}
&__chevron {
display: flex;
align-items: center;
user-select: none;
transition: all 0.08s ease-in-out;
i {
color: #707893; // Candidate for style guide.
font-size: 12px;
}
&--rotate {
transform: rotate(180deg);
}
}
&__user {
display: flex;
align-items: center;
&-details {
flex-direction: column;
display: flex;
}
&-avatar {
margin: 0 16px 0 6px;
}
&-name {
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
line-height: 19px;
}
&-job-title {
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
letter-spacing: 0;
line-height: 17px;
}
}
&__link {
color: $blue;
font-size: 12px;
letter-spacing: 0;
line-height: 19px;
padding: 5px;
}
&__center-align {
display: flex;
align-items: center;
}
&__title {
color: rgba(0, 0, 0, 0.75);
font-size: 12px;
letter-spacing: 0;
line-height: 19px;
}
&__subtitle {
color: $black;
font-size: 12px;
font-weight: 600;
span {
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
font-weight: normal;
margin-left: 15px;
}
}
&__body {
margin-bottom: 15px;
&-row {
margin-bottom: 15px;
}
&--hide {
display: none;
}
}
}
class ACLExpandableTableRow {
constructor(containerEl, isExpanded = false) {
this.cssClass = Object.freeze({
CHEVRON_ROTATE: 'acl-table-expandable-row__chevron--rotate',
BODY_HIDE: 'acl-table-expandable-row__body--hide',
});
this.selector = Object.freeze({
HEADER: '.acl-table-expandable-row__header',
BODY: '.acl-table-expandable-row__body',
CHEVRON: '.acl-table-expandable-row__chevron',
});
this.containerEl = containerEl;
this.header = this.containerEl.querySelector(this.selector.HEADER);
this.body = this.containerEl.querySelector(this.selector.BODY);
this.cheveron = this.containerEl.querySelector(this.selector.CHEVRON);
this.isExpanded = isExpanded;
this.setState(this.isExpanded);
this.handleEventListeners();
}
setState(shouldExpand) {
if (shouldExpand) {
if (this.cheveron) this.cheveron.classList.add(this.cssClass.CHEVRON_ROTATE);
this.body.classList.remove(this.cssClass.BODY_HIDE);
this.isExpanded = true;
} else {
this.header.classList.add();
if (this.cheveron) this.cheveron.classList.remove(this.cssClass.CHEVRON_ROTATE);
this.body.classList.add(this.cssClass.BODY_HIDE);
this.isExpanded = false;
}
}
handleEventListeners() {
this.header.addEventListener('click', event => {
if (!event.target.hasAttribute('data-prevent-collapse')) {
this.setState(!this.isExpanded);
}
});
}
expandContainer() {
this.setState(true);
}
collapseContainer() {
this.setState(false);
}
}
export { ACLExpandableTableRow };
No notes defined.