Skip to content

Commit

Permalink
Merge pull request #16 from ngx-primer/feature/accordion
Browse files Browse the repository at this point in the history 
Feature/accordion
  • Loading branch information
@elhakimdev
elhakimdev authored Dec 1, 2024
2 parents de72337 + 98cd36c commit dbf8607
Show file tree
Hide file tree
Showing 23 changed files with 9,697 additions and 3,839 deletions.
146 changes: 82 additions & 64 deletions apps/playground/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,50 @@
<div
class="py-5 flex flex-row gap-x-3 w-full h-full text-sm text-justify">
<div class="py-5 flex flex-row gap-x-3 w-full h-full text-sm text-left">
<ngx-primer-accordion-root
#accordionRoot
[(ngxPrimerAccordionValue)]="accordionVal"
[ngxPrimerAccordionType]="'Single'"
class="flex min-w-[360px] w-[360px] h-full flex-col border rounded-md shadow-sm shadow-gray-300 border-opacity-50 border-gray-400 overflow-hidden"
>
>
@for (item of accordionData; track $index) {
<ngx-primer-accordion-item
#accordionItem
[ngxPrimerAccordionItemValue]="item.value"
class="flex border-b flex-col"
>
<ngx-primer-accordion-trigger
class="flex flex-row w-full justify-between p-2 cursor-pointer hover:bg-gray-100"
[ngClass]="{
'border-b': accordionItem.isOpen()
}">
<div class="text-gray-800">
{{ item.label }}
</div>
<div >
<ng-icon
[name]="'heroChevronDownMini'"
class="transition-all ease-in-out duration-300"
[ngClass]="{
'transform -rotate-180': accordionItem.isOpen()
}"/>
</div>
</ngx-primer-accordion-trigger>
<ngx-primer-accordion-content
ngxPrimerCollapsibleDirective
[ngxPrimerCollapsed]="!accordionItem.isOpen()"
[ngxPrimerCollapsibleDirection]="accordionRoot.orientation()"
class="text-gray-700 overflow-hidden">
<span>
{{ item.content }}
</span>
</ngx-primer-accordion-content>
</ngx-primer-accordion-item>
<ngx-primer-accordion-item
#accordionItem
[ngxPrimerAccordionItemValue]="item.value"
class="flex border-b flex-col"
>
<ngx-primer-accordion-trigger
#accordionTrigger
class="flex flex-row w-full justify-between p-2 cursor-pointer hover:bg-gray-100"
[ngClass]="{
'border-b': accordionItem.isOpen()
}"
>
<div class="text-gray-800">
{{ item.label }}
</div>
<div>
<ng-icon
#accordionTrigerIcon
[name]="'heroChevronDownMini'"
class="transition-all ease-in-out duration-300"
[ngClass]="{
'transform -rotate-180': accordionItem.isOpen()
}"
/>
</div>
</ngx-primer-accordion-trigger>
<ngx-primer-accordion-content
#accordionContent
ngxPrimerCollapsibleDirective
[ngxPrimerCollapsed]="!accordionItem.isOpen()"
[ngxPrimerCollapsibleDirection]="accordionRoot.orientation()"
class="text-gray-700 overflow-hidden"
>
<!-- {{ accordionContent.idGenerator()?.generatedId | json }} -->
<span>
{{ item.content }}
</span>
</ngx-primer-accordion-content>
</ngx-primer-accordion-item>
}
</ngx-primer-accordion-root>

Expand All @@ -47,35 +53,47 @@
class="flex min-w-[360px] w-[360px] h-full flex-col border rounded-md shadow-sm shadow-gray-300 border-opacity-50 border-gray-400 overflow-hidden"
[(ngxPrimerAccordionValue)]="accordion2Val"
[ngxPrimerAccordionType]="'Single'"
>
>
@for (item of accordion2Data; track $index) {
<ngx-primer-accordion-item
#accordionItem2
class="flex border-b flex-col"
[ngxPrimerAccordionItemValue]="item.value"
>
<ngx-primer-accordion-trigger
class="flex flex-row w-full justify-between p-2 cursor-pointer hover:bg-gray-100"
[ngClass]="{
'border-b': accordionItem2.isOpen()
}">
<div class="text-gray-800">
{{ item.label }}
</div>
<div>
<ng-icon [name]="accordionItem2.isOpen() ? 'heroChevronUpMini' : 'heroChevronDownMini'" class="transition-all ease-in-out"/>
</div>
</ngx-primer-accordion-trigger>
<ngx-primer-accordion-content
ngxPrimerCollapsibleDirective
[ngxPrimerCollapsed]="!accordionItem2.isOpen()"
[ngxPrimerCollapsibleDirection]="accordionRoot2.orientation()"
class="text-gray-700 overflow-hidden">
<span>
{{ item.content }}
</span>
</ngx-primer-accordion-content>
</ngx-primer-accordion-item>
<ngx-primer-accordion-item
#accordionItem2
class="flex border-b flex-col"
[ngxPrimerAccordionItemValue]="item.value"
>
<ngx-primer-accordion-trigger
#accordionTrigger2
class="flex flex-row w-full justify-between p-2 cursor-pointer hover:bg-gray-100"
[ngClass]="{
'border-b': accordionItem2.isOpen()
}"
>
<div class="text-gray-800">
{{ item.label }}
</div>
<div>
<ng-icon
#accordionTrigerIcon
[name]="
accordionItem2.isOpen()
? 'heroChevronUpMini'
: 'heroChevronDownMini'
"
class="transition-all ease-in-out"
/>
</div>
</ngx-primer-accordion-trigger>
<ngx-primer-accordion-content
#accordionContent2
ngxPrimerCollapsibleDirective
[ngxPrimerCollapsed]="!accordionItem2.isOpen()"
[ngxPrimerCollapsibleDirection]="accordionRoot2.orientation()"
class="text-gray-700 overflow-hidden"
>
<span>
{{ item.content }}
</span>
</ngx-primer-accordion-content>
</ngx-primer-accordion-item>
}
</ngx-primer-accordion-root>
</div>
</div>
52 changes: 32 additions & 20 deletions apps/playground/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,12 @@ import {
NgxPrimerAccordionRootComponent,
NgxPrimerAccordionTriggerComponent,
NgxPrimerCollapseExpandAnimationDirective,
collapseExpandAnimation
collapseExpandAnimation,
} from '@ngx-primer/primitive/accordion';
import { heroChevronDownMini, heroChevronUpMini } from '@ng-icons/heroicons/mini'
import {
heroChevronDownMini,
heroChevronUpMini,
} from '@ng-icons/heroicons/mini';

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
Expand All @@ -20,7 +23,7 @@ import { RouterModule } from '@angular/router';
RouterModule,
NgIcon,
NgxPrimerAccordionRootComponent,
NgxPrimerAccordionItemComponent,
NgxPrimerAccordionItemComponent,
NgxPrimerAccordionTriggerComponent,
NgxPrimerAccordionContentComponent,
NgxPrimerCollapseExpandAnimationDirective,
Expand All @@ -31,75 +34,84 @@ import { RouterModule } from '@angular/router';
viewProviders: [
provideIcons({
heroChevronDownMini,
heroChevronUpMini
})
heroChevronUpMini,
}),
],
animations: [
collapseExpandAnimation
]
animations: [collapseExpandAnimation],
})
export class AppComponent {
title = 'playground';
accordionData = [
{
label: 'Introduction',
value: 'intro',
content: 'Welcome to our platform! Here, you’ll learn about our purpose, the problem we solve, and how we aim to make your life easier.',
content:
'Welcome to our platform! Here, you’ll learn about our purpose, the problem we solve, and how we aim to make your life easier.',
},
{
label: 'Features',
value: 'features',
content: 'Explore a range of features, including real-time collaboration, intuitive design tools, and seamless integrations with popular apps.',
content:
'Explore a range of features, including real-time collaboration, intuitive design tools, and seamless integrations with popular apps.',
},
{
label: 'Usage Guidelines',
value: 'usage',
content: 'Follow these simple guidelines to get the most out of our platform, from account setup to leveraging advanced functionalities.',
content:
'Follow these simple guidelines to get the most out of our platform, from account setup to leveraging advanced functionalities.',
},
{
label: 'FAQs',
value: 'faqs',
content: 'Have questions? Check out our Frequently Asked Questions to find answers on account management, pricing, and troubleshooting. lorem kflkldskkklsklkdlksskdkldkskldklkdkl k sdlmlmlkfsdk k klmlk kkmeklm',
content:
'Have questions? Check out our Frequently Asked Questions to find answers on account management, pricing, and troubleshooting. lorem kflkldskkklsklkdlksskdkldkskldklkdkl k sdlmlmlkfsdk k klmlk kkmeklm',
},
{
label: 'Contact Us',
value: 'contact',
content: 'Need help? Reach out to our support team via email, phone, or live chat. We’re here to assist you 24/7.',
content:
'Need help? Reach out to our support team via email, phone, or live chat. We’re here to assist you 24/7.',
},
{
label: 'Other Ask',
value: 'other-ask',
content: 'Need help? Reach out to our support team via email, phone, or live chat. We’re here to assist you 24/7.',
content:
'Need help? Reach out to our support team via email, phone, or live chat. We’re here to assist you 24/7.',
},
] as const;

accordionVal = this.accordionData[5].value;

accordion2Data = [
{
label: 'About Our Company',
value: 'about',
content: 'Learn about our journey, mission, and the core values that drive us to deliver exceptional products and services.',
content:
'Learn about our journey, mission, and the core values that drive us to deliver exceptional products and services.',
},
{
label: 'How It Works',
value: 'how-it-works',
content: 'Understand the step-by-step process of how our platform functions, from signing up to achieving your goals.',
content:
'Understand the step-by-step process of how our platform functions, from signing up to achieving your goals.',
},
{
label: 'Pricing Plans',
value: 'pricing',
content: 'Discover our flexible pricing options designed to meet the needs of individuals, startups, and enterprises.',
content:
'Discover our flexible pricing options designed to meet the needs of individuals, startups, and enterprises.',
},
{
label: 'Customer Success Stories',
value: 'success-stories',
content: 'Read inspiring stories of how our platform has helped customers achieve success in their projects and businesses.',
content:
'Read inspiring stories of how our platform has helped customers achieve success in their projects and businesses.',
},
{
label: 'Get Started',
value: 'get-started',
content: 'Ready to begin? Follow our quick start guide to set up your account and start using our platform in minutes.',
content:
'Ready to begin? Follow our quick start guide to set up your account and start using our platform in minutes.',
},
] as const;

Expand Down
27 changes: 19 additions & 8 deletions apps/playground/tailwind-base.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,17 @@ module.exports = {
backgroundImage: {
none: 'none',
'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
'gradient-to-tr':
'linear-gradient(to top right, var(--tw-gradient-stops))',
'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
'gradient-to-br':
'linear-gradient(to bottom right, var(--tw-gradient-stops))',
'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
'gradient-to-bl':
'linear-gradient(to bottom left, var(--tw-gradient-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
'gradient-to-tl':
'linear-gradient(to top left, var(--tw-gradient-stops))',
},
backgroundOpacity: ({ theme }) => theme('opacity'),
backgroundPosition: {
Expand Down Expand Up @@ -310,7 +314,14 @@ module.exports = {
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
serif: [
'ui-serif',
'Georgia',
'Cambria',
'"Times New Roman"',
'Times',
'serif',
],
mono: [
'ui-monospace',
'SFMono-Regular',
Expand Down Expand Up @@ -949,7 +960,8 @@ module.exports = {
all: 'all',
DEFAULT:
'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
colors:
'color, background-color, border-color, text-decoration-color, fill, stroke',
opacity: 'opacity',
shadow: 'box-shadow',
transform: 'transform',
Expand Down Expand Up @@ -1060,5 +1072,4 @@ module.exports = {
},
},
plugins: [],
}

};
Loading

0 comments on commit dbf8607

Please sign in to comment.