Skip to content

Commit

Permalink
feat: Change Pagination to compound pattern and add to showcase (#28)
Browse files Browse the repository at this point in the history
Co-authored-by: Anand Gorantala <[email protected]>
  • Loading branch information
anandgorantala and anandgorantala authored Nov 15, 2024
1 parent 599c4da commit 92538c1
Show file tree
Hide file tree
Showing 41 changed files with 1,563 additions and 394 deletions.
1 change: 1 addition & 0 deletions src/components/checkbox-group/checkbox-group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@

.lui-cg-overflow-content {
overflow: hidden;
width: 100%;

&[data-state='open'] {
animation: slideDown 0.2s ease-in;
Expand Down
39 changes: 32 additions & 7 deletions src/components/checkbox-group/checkbox-group.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -156,21 +156,46 @@ export const MixCustomHTML: Story = {
<Theme style={{width: '300px'}}>
<CheckboxGroup.Root {...args} value={value} onChange={setValue}>
<CheckboxGroup.Item value="red">
<div style={{width: '16px', height: '16px', background: 'red', borderRadius: '50%'}}></div>Red
<div style={{display: 'flex', alignItems: 'center', width: '100%'}}>
<div style={{display: 'flex', alignItems: 'center', gap: '0.25rem', flexGrow: 1}}>
<div style={{width: '16px', height: '16px', background: 'crimson', borderRadius: '50%'}}></div>Red
</div>
<div style={{opacity: 0.5}}>19</div>
</div>
</CheckboxGroup.Item>
<CheckboxGroup.Item value="rainbow">
<div style={{width: '16px', height: '16px', background: 'linear-gradient( 226.4deg, rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )', borderRadius: '50%'}}></div>Rainbow
<div style={{display: 'flex', alignItems: 'center', width: '100%'}}>
<div style={{display: 'flex', alignItems: 'center', gap: '0.25rem', flexGrow: 1}}>
<div style={{width: '16px', height: '16px', background: 'linear-gradient( 226.4deg, rgba(255,26,1,1) 28.9%, rgba(254,155,1,1) 33%, rgba(113,63,254,1) 48.6%, rgba(34,218,1,1) 65.3%, rgba(0,141,254,1) 80.6%, rgba(255,241,0,1) 100.1% )', borderRadius: '50%'}}></div>Rainbow
</div>
<div style={{opacity: 0.5}}>63</div>
</div>
</CheckboxGroup.Item>
<CheckboxGroup.Item value="green">
<div style={{width: '16px', height: '16px', background: 'green', borderRadius: '50%'}}></div>Green
<CheckboxGroup.Item value="gold">
<div style={{display: 'flex', alignItems: 'center', width: '100%'}}>
<div style={{display: 'flex', alignItems: 'center', gap: '0.25rem', flexGrow: 1}}>
<div style={{width: '16px', height: '16px', background: 'gold', borderRadius: '50%'}}></div>Gold
</div>
<div style={{opacity: 0.5}}>31</div>
</div>
</CheckboxGroup.Item>
<CheckboxGroup.Overflow>
<CheckboxGroup.OverflowContent>
<CheckboxGroup.Item value="gold">
<div style={{width: '16px', height: '16px', background: 'gold', borderRadius: '50%'}}></div>Gold
<CheckboxGroup.Item value="green">
<div style={{display: 'flex', alignItems: 'center', width: '100%'}}>
<div style={{display: 'flex', alignItems: 'center', gap: '0.25rem', flexGrow: 1}}>
<div style={{width: '16px', height: '16px', background: 'green', borderRadius: '50%'}}></div>Green
</div>
<div style={{opacity: 0.5}}>22</div>
</div>
</CheckboxGroup.Item>
<CheckboxGroup.Item value="purple">
<div style={{width: '16px', height: '16px', background: 'rebeccapurple', borderRadius: '50%'}}></div>Purple
<div style={{display: 'flex', alignItems: 'center', width: '100%'}}>
<div style={{display: 'flex', alignItems: 'center', gap: '0.25rem', flexGrow: 1}}>
<div style={{width: '16px', height: '16px', background: 'rebeccapurple', borderRadius: '50%'}}></div>Purple
</div>
<div style={{opacity: 0.5}}>80</div>
</div>
</CheckboxGroup.Item>
</CheckboxGroup.OverflowContent>
<CheckboxGroup.OverflowTrigger label="View more +" expandedLabel="View less -" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const CheckboxGroupItem = forwardRef((
return (
<label
{...rest}
className={cn('lui-cg-item', className)}
className={cn('lui-cg-item', { 'lui-cg-item--selected': value.includes(val) }, className)}
ref={forwardedRef}
>
<Checkbox.Root className="lui-cg-item-checkbox" checked={value.includes(val)} onCheckedChange={(checked) => onCheckboxChange(!!checked, val)}>
Expand Down
1 change: 1 addition & 0 deletions src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ export * from './pagination';
export * from './price';
export * from './currency';
export * from './tag';
export * from './number';
321 changes: 321 additions & 0 deletions src/components/number/__snapshots__/number.spec.tsx.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,321 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Number > should render successfully for different values and locales 1`] = `
<div>
<span
class="lui-number"
>
0.01
</span>
<span
class="lui-number"
>
0,01
</span>
<span
class="lui-number"
>
0,01
</span>
<span
class="lui-number"
>
0.01
</span>
<span
class="lui-number"
>
0.01
</span>
<span
class="lui-number"
>
0.01
</span>
<span
class="lui-number"
>
0.01
</span>
<span
class="lui-number"
>
0.1
</span>
<span
class="lui-number"
>
0,1
</span>
<span
class="lui-number"
>
0,1
</span>
<span
class="lui-number"
>
0.1
</span>
<span
class="lui-number"
>
0.1
</span>
<span
class="lui-number"
>
0.1
</span>
<span
class="lui-number"
>
0.1
</span>
<span
class="lui-number"
>
1
</span>
<span
class="lui-number"
>
1
</span>
<span
class="lui-number"
>
1
</span>
<span
class="lui-number"
>
1
</span>
<span
class="lui-number"
>
1
</span>
<span
class="lui-number"
>
1
</span>
<span
class="lui-number"
>
1
</span>
<span
class="lui-number"
>
10
</span>
<span
class="lui-number"
>
10
</span>
<span
class="lui-number"
>
10
</span>
<span
class="lui-number"
>
10
</span>
<span
class="lui-number"
>
10
</span>
<span
class="lui-number"
>
10
</span>
<span
class="lui-number"
>
10
</span>
<span
class="lui-number"
>
100
</span>
<span
class="lui-number"
>
100
</span>
<span
class="lui-number"
>
100
</span>
<span
class="lui-number"
>
100
</span>
<span
class="lui-number"
>
100
</span>
<span
class="lui-number"
>
100
</span>
<span
class="lui-number"
>
100
</span>
<span
class="lui-number"
>
1,000
</span>
<span
class="lui-number"
>
1.000
</span>
<span
class="lui-number"
>
1 000
</span>
<span
class="lui-number"
>
1,000
</span>
<span
class="lui-number"
>
1,000
</span>
<span
class="lui-number"
>
1,000
</span>
<span
class="lui-number"
>
1,000
</span>
<span
class="lui-number"
>
10,000
</span>
<span
class="lui-number"
>
10.000
</span>
<span
class="lui-number"
>
10 000
</span>
<span
class="lui-number"
>
10,000
</span>
<span
class="lui-number"
>
10,000
</span>
<span
class="lui-number"
>
10,000
</span>
<span
class="lui-number"
>
10,000
</span>
<span
class="lui-number"
>
100,000
</span>
<span
class="lui-number"
>
100.000
</span>
<span
class="lui-number"
>
100 000
</span>
<span
class="lui-number"
>
100,000
</span>
<span
class="lui-number"
>
1,00,000
</span>
<span
class="lui-number"
>
100,000
</span>
<span
class="lui-number"
>
100,000
</span>
<span
class="lui-number"
>
1,000,000
</span>
<span
class="lui-number"
>
1.000.000
</span>
<span
class="lui-number"
>
1 000 000
</span>
<span
class="lui-number"
>
1,000,000
</span>
<span
class="lui-number"
>
10,00,000
</span>
<span
class="lui-number"
>
1,000,000
</span>
<span
class="lui-number"
>
1,000,000
</span>
</div>
`;
Loading

0 comments on commit 92538c1

Please sign in to comment.