Skip to content

Commit 476fb11

Browse files
agjsagjs
committed
Update Accordion Menu styling
1 parent 6a9a9a5 commit 476fb11

File tree

5 files changed

+55
-209
lines changed

5 files changed

+55
-209
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@programmer_network/yail",
3-
"version": "1.0.163",
3+
"version": "1.0.164",
44
"description": "Programmer Network's official UI library for React",
55
"author": "Aleksandar Grbic - (https://programmer.network)",
66
"publishConfig": {

‎src/Components/Accordion/Accordion.stories.tsx

Lines changed: 19 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { faker } from "@faker-js/faker";
12
import { action } from "@storybook/addon-actions";
23
import { Meta } from "@storybook/react";
34
import { useState } from "react";
@@ -16,190 +17,25 @@ const meta = {
1617

1718
export default meta;
1819

19-
const sections = [
20-
{
21-
id: 20,
20+
const sections = Array(15)
21+
.fill(0)
22+
.map((_, index) => ({
23+
id: index,
24+
title: faker.lorem.words(Math.floor(Math.random() * 10) + 1),
2225
description:
23-
"24/7 Antimony Sausages West Mouse Chevrolet Chips Unbranded lime whenever",
24-
title: "sensor Wooden Turkish",
25-
order: 1,
26-
items: [
27-
{
28-
id: 20,
29-
title: "pascal Tellurium an program Beryllium South mint Steel",
30-
order: 1
31-
},
32-
{
33-
id: 56,
34-
title: "Jeep circuit hmph payment East",
35-
order: 2
36-
},
37-
{
38-
id: 92,
39-
title:
40-
"Alaska Keyboard Checking Metal Cotton Kia concerning delirious Switchable",
41-
order: 3
42-
},
43-
{
44-
id: 127,
45-
title: "Southwest misuse",
46-
order: 4
47-
},
48-
{
49-
id: 163,
50-
title: "AI repellendus Southeast Northeast extend Denis",
51-
order: 5
52-
},
53-
{
54-
id: 199,
55-
title: "Explore Bear Mountain on a Segway",
56-
order: 6
57-
},
58-
{
59-
id: 1991,
60-
title: "Attend a bear-themed costume party",
61-
order: 7
62-
},
63-
{
64-
id: 1992,
65-
title: "Try bear-shaped pancakes for breakfast",
66-
order: 8
67-
},
68-
{
69-
id: 1993,
70-
title: "Write a story about a bear on an adventure",
71-
order: 9
72-
},
73-
{
74-
id: 1994,
75-
title: "unbearably",
76-
order: 10
77-
}
78-
]
79-
},
80-
{
81-
id: 55,
82-
description:
83-
"breastplate inch navigate suspiciously withdrawal hibernate Tasty Guilder red female",
84-
title: "Principal female group",
85-
order: 2,
86-
items: [
87-
{
88-
id: 235,
89-
title:
90-
"generating withdrawal unbearably Cab digital regularly Industrial North North",
91-
order: 1
92-
},
93-
{
94-
id: 270,
95-
title: "Central Chromium Incredible Gasoline optical",
96-
order: 2
97-
},
98-
{
99-
id: 304,
100-
title: "Mobility Specialist Gasoline quo",
101-
order: 3
102-
},
103-
{
104-
id: 339,
105-
title: "Lilangeni reaffirm hideous Executive Forges",
106-
order: 4
107-
},
108-
{
109-
id: 376,
110-
title:
111-
"Convertible abolish strategic Soft compressing limp female Solutions Bespoke",
112-
order: 5
113-
},
114-
{
115-
id: 412,
116-
title:
117-
"Delaware shadowy Account service input Handcrafted Northwest Madonna",
118-
order: 6
119-
}
120-
]
121-
},
122-
{
123-
id: 88,
124-
description:
125-
"though West SMTP roost boo Tactics whoa payment Investor turquoise",
126-
title: "Concrete West Central",
127-
order: 3,
128-
items: [
129-
{
130-
id: 446,
131-
title: "outside nonconforming Pontiac BMW Curium",
132-
order: 1
133-
},
134-
{
135-
id: 481,
136-
title:
137-
"Handmade South Coordinator International turquoise infrastructures Pop Computers Sleek",
138-
order: 2
139-
},
140-
{
141-
id: 516,
142-
title: "ew Gasoline",
143-
order: 3
144-
},
145-
{
146-
id: 552,
147-
title:
148-
"global Home Drive Pickup wonderful Table Southwest Electronics monitor",
149-
order: 4
150-
},
151-
{
152-
id: 585,
153-
title: "aggregate Martin Gloves",
154-
order: 5
155-
},
156-
{
157-
id: 623,
158-
title: "Home Nitrogen resource Frozen strait Car transform",
159-
order: 6
160-
}
161-
]
162-
},
163-
{
164-
id: 118,
165-
description:
166-
"apud radian Soul Volkswagen opposite Vermont Research Honda Hybrid eius",
167-
title: "Mini Cab kindhearted",
168-
order: 4,
169-
items: [
170-
{
171-
id: 656,
172-
title: "North",
173-
order: 1
174-
},
175-
{
176-
id: 689,
177-
title: "Oklahoma Bicycle South Avon male",
178-
order: 2
179-
},
180-
{
181-
id: 724,
182-
title: "Outdoors Wagon Frozen",
183-
order: 3
184-
},
185-
{
186-
id: 760,
187-
title: "Beauty embrace fuchsia West intensely Bradley Southwest Gloves",
188-
order: 4
189-
},
190-
{
191-
id: 795,
192-
title: "Norway Cerium functionalities generate West Gloves candela",
193-
order: 5
194-
},
195-
{
196-
id: 831,
197-
title: "PCI",
198-
order: 6
199-
}
200-
]
201-
}
202-
];
26+
index % 2 === 0
27+
? faker.lorem.sentences(Math.floor(Math.random() * 5) + 1)
28+
: "",
29+
30+
order: index,
31+
items: Array(Math.floor(Math.random() * 10) + 1)
32+
.fill(0)
33+
.map((__, index) => ({
34+
id: index,
35+
title: faker.lorem.words(Math.floor(Math.random() * 10) + 1),
36+
order: index
37+
}))
38+
}));
20339

20440
export const Primary = () => {
20541
const [expandedSections, setExpandedSections] = useState<number[]>([
@@ -213,7 +49,6 @@ export const Primary = () => {
21349
selectedId={2}
21450
sections={sections}
21551
expanded={expandedSections}
216-
itemsLabelText='lesson'
21752
setExpanded={(expanded: number[]) => {
21853
setExpandedSections(expanded);
21954
}}

‎src/Components/Accordion/__snapshots__/Accordion.test.tsx.snap

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ exports[`Accordion component > renders correctly 1`] = `
66
class=""
77
>
88
<div
9-
class="yl-mb-4 yl-border-b-0"
9+
class="yl-border-2 yl-border-primary-text-color/20 yl-border-b-0 yl-rounded-tl-md yl-rounded-tr-md"
1010
role="presentation"
1111
>
1212
<h3
1313
aria-expanded="true"
14-
class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-justify-between yl-font-semibold yl-capitalize yl-text-primary-text-color"
14+
class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-justify-between yl-font-semibold yl-capitalize yl-text-primary-text-color yl-p-4 yl-bg-primary-text-color/5"
1515
role="button"
1616
tabindex="0"
1717
>
1818
<div
19-
class="yl-flex yl-items-center yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base"
19+
class="yl-flex yl-flex-col yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base"
2020
>
2121
<svg
2222
class="yl-absolute yl-right-0 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary"
@@ -34,6 +34,11 @@ exports[`Accordion component > renders correctly 1`] = `
3434
/>
3535
</svg>
3636
Section 1
37+
<p
38+
class="yl-text-primary-text-color yl-break-words yl-overflow-hidden yl-text-xs yl-text-primary-text-color/70"
39+
>
40+
Description 1
41+
</p>
3742
</div>
3843
</h3>
3944
<ul
@@ -45,7 +50,7 @@ exports[`Accordion component > renders correctly 1`] = `
4550
class="yl-text-primary-text-color yl-cursor-pointer"
4651
>
4752
<div
48-
class="yl-flex yl-break-all"
53+
class="yl-flex yl-break-all yl-px-4 yl-py-2"
4954
>
5055
<span
5156
class=""
@@ -58,7 +63,7 @@ exports[`Accordion component > renders correctly 1`] = `
5863
class="yl-text-primary-text-color yl-cursor-pointer"
5964
>
6065
<div
61-
class="yl-flex yl-break-all"
66+
class="yl-flex yl-break-all yl-px-4 yl-py-2"
6267
>
6368
<span
6469
class=""
@@ -70,17 +75,17 @@ exports[`Accordion component > renders correctly 1`] = `
7075
</ul>
7176
</div>
7277
<div
73-
class=""
78+
class="yl-border-2 yl-border-primary-text-color/20 yl-rounded-bl-md yl-rounded-br-md"
7479
role="presentation"
7580
>
7681
<h3
7782
aria-expanded="false"
78-
class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-justify-between yl-font-semibold yl-capitalize yl-text-primary-text-color"
83+
class="yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-justify-between yl-font-semibold yl-capitalize yl-text-primary-text-color yl-p-4"
7984
role="button"
8085
tabindex="0"
8186
>
8287
<div
83-
class="yl-flex yl-items-center yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base"
88+
class="yl-flex yl-flex-col yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base"
8489
>
8590
<svg
8691
class="yl-absolute yl-right-0 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary"
@@ -99,6 +104,11 @@ exports[`Accordion component > renders correctly 1`] = `
99104
/>
100105
</svg>
101106
Section 2
107+
<p
108+
class="yl-text-primary-text-color yl-break-words yl-overflow-hidden yl-text-xs yl-text-primary-text-color/70"
109+
>
110+
Description 2
111+
</p>
102112
</div>
103113
</h3>
104114
</div>

‎src/Components/Accordion/index.tsx

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import classNames from "classnames";
22
import { FC, useEffect, useState } from "react";
33

44
import { IconExpandLess, IconExpandMore } from "Components/Icons";
5+
import { Paragraph } from "Components/Typography";
56

67
import { IAccordionProps } from "./types";
78

89
const Accordion: FC<IAccordionProps> = ({
910
className,
1011
sections,
1112
sectionTitleClassName,
12-
itemsLabelText,
1313
onSectionItemClick,
1414
onSelected,
1515
expanded,
@@ -28,9 +28,6 @@ const Accordion: FC<IAccordionProps> = ({
2828
}
2929
};
3030

31-
const getItemsLabelText = (items: number) =>
32-
`${items} ${items === 1 ? itemsLabelText : `${itemsLabelText}s`}`;
33-
3431
useEffect(() => {
3532
if (!selectedId) {
3633
return;
@@ -44,15 +41,20 @@ const Accordion: FC<IAccordionProps> = ({
4441
{sections.map((section, idx) => (
4542
<div
4643
key={section.id}
47-
className={classNames({
48-
"yl-mb-4 yl-border-b-0": idx !== sections.length - 1
44+
className={classNames("yl-border-2 yl-border-primary-text-color/20", {
45+
"yl-border-b-0": idx !== sections.length - 1,
46+
"yl-rounded-tl-md yl-rounded-tr-md": idx === 0,
47+
"yl-rounded-bl-md yl-rounded-br-md": idx === sections.length - 1
4948
})}
5049
role='presentation'
5150
>
5251
<h3
5352
className={classNames(
54-
"yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-justify-between yl-font-semibold yl-capitalize yl-text-primary-text-color",
55-
sectionTitleClassName
53+
"yl-relative yl-flex yl-cursor-pointer yl-select-none yl-items-center yl-justify-between yl-font-semibold yl-capitalize yl-text-primary-text-color yl-p-4",
54+
sectionTitleClassName,
55+
{
56+
"yl-bg-primary-text-color/5": expanded.includes(section.id)
57+
}
5658
)}
5759
onClick={() => toggleExpand(section.id)}
5860
onKeyDown={e => {
@@ -64,19 +66,19 @@ const Accordion: FC<IAccordionProps> = ({
6466
role='button'
6567
aria-expanded={expanded.includes(section.id)}
6668
>
67-
<div className='yl-flex yl-items-center yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base'>
69+
<div className='yl-flex yl-flex-col yl-gap-1 yl-overflow-hidden yl-text-ellipsis yl-whitespace-nowrap yl-text-base'>
6870
{expanded.includes(section.id) ? (
6971
<IconExpandLess className='yl-absolute yl-right-0 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary' />
7072
) : (
7173
<IconExpandMore className='yl-absolute yl-right-0 yl-w-6 yl-cursor-pointer yl-fill-primary-text-color hover:yl-fill-primary' />
7274
)}
7375
{section.title}
76+
{section.description && (
77+
<Paragraph className='yl-text-xs yl-text-primary-text-color/70'>
78+
{section.description}
79+
</Paragraph>
80+
)}
7481
</div>
75-
{itemsLabelText && (
76-
<span className='yl-whitespace-nowrap yl-pr-6 yl-lowercase yl-text-primary-text-color'>
77-
{getItemsLabelText(section.items.length)}
78-
</span>
79-
)}
8082
</h3>
8183
{expanded.includes(section.id) && (
8284
<ul
@@ -101,7 +103,7 @@ const Accordion: FC<IAccordionProps> = ({
101103
setSelectedItemId(item.id);
102104
}}
103105
>
104-
<div className='yl-flex yl-break-all'>
106+
<div className='yl-flex yl-break-all yl-px-4 yl-py-2'>
105107
<span
106108
className={classNames({
107109
"yl-text-primary": selectedItemId === item.id

0 commit comments

Comments
 (0)