Skip to content

Commit a1a0ba9

Browse files
committed
FIX: renamed MyCheckbox component to Checkbox
1 parent 6ce57f5 commit a1a0ba9

File tree

14 files changed

+75
-73
lines changed

14 files changed

+75
-73
lines changed
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import { MyCheckbox, CheckboxIndicator } from '@qwik-ui/headless';
2+
import { Checkbox, CheckboxIndicator } from '@qwik-ui/headless';
33
export default component$(() => {
44
return (
55
<>
6-
<MyCheckbox class="flex items-center gap-3 border-2 border-black p-2 ">
6+
<Checkbox class="flex items-center gap-3 border-2 border-black p-2 ">
77
<CheckboxIndicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
88
99
</CheckboxIndicator>
1010
I have read the README file
11-
</MyCheckbox>
11+
</Checkbox>
1212
</>
1313
);
1414
});

apps/website/src/routes/docs/headless/checkbox/examples/pizza.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
3-
MyCheckbox,
3+
Checkbox,
44
CheckboxIndicator,
55
CheckList,
66
ChecklistIndicator,
@@ -13,7 +13,7 @@ export default component$(() => {
1313
<>
1414
<h3 id="pizza-toppings">Pizza toppings</h3>
1515
<CheckList ariaLabeledBy="pizza-toppings" class="flex flex-col gap-4">
16-
<MyCheckbox
16+
<Checkbox
1717
class="flex items-center gap-3 border-2 border-black p-2"
1818
checkList={true}
1919
>
@@ -27,16 +27,16 @@ export default component$(() => {
2727
</div>
2828
</ChecklistIndicator>
2929
Pick all toppings
30-
</MyCheckbox>
30+
</Checkbox>
3131

3232
{toppingNames.map((name, i) => {
3333
return (
34-
<MyCheckbox class="ml-8 flex items-center gap-3 border-2 border-black p-2">
34+
<Checkbox class="ml-8 flex items-center gap-3 border-2 border-black p-2">
3535
<CheckboxIndicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
3636
{toppingImages[i]}
3737
</CheckboxIndicator>
3838
{name}
39-
</MyCheckbox>
39+
</Checkbox>
4040
);
4141
})}
4242
</CheckList>

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
CheckboxIndicator,
4-
MyCheckbox,
4+
Checkbox,
55
ChecklistIndicator,
66
CheckList,
77
} from 'packages/kit-headless/src/components/checkbox/index';
@@ -13,7 +13,7 @@ export default component$(() => {
1313
<>
1414
<h3 id="test123">Pick a cat</h3>
1515
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
16-
<MyCheckbox
16+
<Checkbox
1717
class="flex items-center gap-3 bg-slate-900 text-white"
1818
checkList={true}
1919
checkBoxSig={checklistSig}
@@ -29,21 +29,21 @@ export default component$(() => {
2929
</div>
3030
</ChecklistIndicator>
3131
<p>Controlls all</p>
32-
</MyCheckbox>
33-
<MyCheckbox
32+
</Checkbox>
33+
<Checkbox
3434
id="child-1"
3535
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
3636
>
3737
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
3838
<p>No other stuff is needed here</p>
39-
</MyCheckbox>
39+
</Checkbox>
4040

41-
<MyCheckbox id="child-2" class="bg-slate-900 text-white">
41+
<Checkbox id="child-2" class="bg-slate-900 text-white">
4242
<div class="flex items-center gap-3">
4343
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
4444
<p>Im a true.tsx</p>
4545
</div>
46-
</MyCheckbox>
46+
</Checkbox>
4747
</CheckList>
4848
<p>You signal is: </p>
4949
<p id="signal-to-text">{`${checklistSig.value}`}</p>

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator';
3-
import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
3+
import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
44
import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist';
55
export default component$(() => {
66
const firstUserSig = useSignal(false);
@@ -9,29 +9,29 @@ export default component$(() => {
99
<>
1010
<h3 id="test123">Pick a cat</h3>
1111
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
12-
<MyCheckbox
12+
<Checkbox
1313
class="flex items-center gap-3 bg-slate-900 p-2 text-white"
1414
checkList={true}
1515
>
1616
<CheckboxIndicator class=" flex w-[80px] justify-center bg-white p-3">
1717
1818
</CheckboxIndicator>
1919
<p>Controlls all</p>
20-
</MyCheckbox>
21-
<MyCheckbox
20+
</Checkbox>
21+
<Checkbox
2222
checkBoxSig={firstUserSig}
2323
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
2424
>
2525
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
2626
<p>No other stuff is needed here</p>
27-
</MyCheckbox>
27+
</Checkbox>
2828

29-
<MyCheckbox checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
29+
<Checkbox checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
3030
<div class="flex items-center gap-3">
3131
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
3232
<p>No other stuff is needed here</p>
3333
</div>
34-
</MyCheckbox>
34+
</Checkbox>
3535
</CheckList>
3636
</>
3737
);

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator';
3-
import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
3+
import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
44
import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist';
55
import { ChecklistIndicator } from '@qwik-ui/headless';
66
export default component$(() => {
@@ -10,7 +10,7 @@ export default component$(() => {
1010
<>
1111
<h3 id="test123">Pick a cat</h3>
1212
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
13-
<MyCheckbox
13+
<Checkbox
1414
class="flex items-center gap-3 bg-slate-900 p-2 text-white"
1515
checkList={true}
1616
>
@@ -24,21 +24,21 @@ export default component$(() => {
2424
</div>
2525
</ChecklistIndicator>
2626
<p>Controlls all</p>
27-
</MyCheckbox>
28-
<MyCheckbox
27+
</Checkbox>
28+
<Checkbox
2929
checkBoxSig={firstUserSig}
3030
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
3131
>
3232
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
3333
<p>No other stuff is needed here</p>
34-
</MyCheckbox>
34+
</Checkbox>
3535

36-
<MyCheckbox checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
36+
<Checkbox checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
3737
<div class="flex items-center gap-3">
3838
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
3939
<p>No other stuff is needed here</p>
4040
</div>
41-
</MyCheckbox>
41+
</Checkbox>
4242
</CheckList>
4343
</>
4444
);

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
CheckboxIndicator,
4-
MyCheckbox,
4+
Checkbox,
55
ChecklistIndicator,
66
CheckList,
77
} from 'packages/kit-headless/src/components/checkbox/index';
@@ -12,7 +12,7 @@ export default component$(() => {
1212
<>
1313
<h3 id="test123">Pick a cat</h3>
1414
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
15-
<MyCheckbox
15+
<Checkbox
1616
class="flex items-center gap-3 bg-slate-900 text-white"
1717
checkList={true}
1818
checkBoxSig={checklistSig}
@@ -28,21 +28,21 @@ export default component$(() => {
2828
</div>
2929
</ChecklistIndicator>
3030
<p>Controlls all</p>
31-
</MyCheckbox>
32-
<MyCheckbox
31+
</Checkbox>
32+
<Checkbox
3333
id="child-1"
3434
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
3535
>
3636
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
3737
<p>No other stuff is needed here</p>
38-
</MyCheckbox>
38+
</Checkbox>
3939

40-
<MyCheckbox id="child-2" class="bg-slate-900 text-white">
40+
<Checkbox id="child-2" class="bg-slate-900 text-white">
4141
<div class="flex items-center gap-3">
4242
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
4343
<p>Im a true.tsx</p>
4444
</div>
45-
</MyCheckbox>
45+
</Checkbox>
4646
</CheckList>
4747
<p>You signal is: </p>
4848
<p id="signal-to-text">{`${checklistSig.value}`}</p>

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator';
3-
import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
3+
import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
44
import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist';
55
export default component$(() => {
66
const firstUserSig = useSignal(true);
@@ -9,29 +9,29 @@ export default component$(() => {
99
<>
1010
<h3 id="test123">Pick a cat</h3>
1111
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
12-
<MyCheckbox
12+
<Checkbox
1313
class="flex items-center gap-3 bg-slate-900 p-2 text-white"
1414
checkList={true}
1515
>
1616
<CheckboxIndicator class=" flex w-[80px] justify-center bg-white p-3">
1717
1818
</CheckboxIndicator>
1919
<p>Controlls all</p>
20-
</MyCheckbox>
21-
<MyCheckbox
20+
</Checkbox>
21+
<Checkbox
2222
checkBoxSig={firstUserSig}
2323
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
2424
>
2525
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
2626
<p>No other stuff is needed here</p>
27-
</MyCheckbox>
27+
</Checkbox>
2828

29-
<MyCheckbox checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
29+
<Checkbox checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
3030
<div class="flex items-center gap-3">
3131
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
3232
<p>No other stuff is needed here</p>
3333
</div>
34-
</MyCheckbox>
34+
</Checkbox>
3535
</CheckList>
3636
</>
3737
);

apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator';
3-
import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
3+
import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
44
import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist';
55
export default component$(() => {
66
const firstUserSig = useSignal(true);
@@ -9,29 +9,29 @@ export default component$(() => {
99
<>
1010
<h3 id="test123">Pick a cat</h3>
1111
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
12-
<MyCheckbox
12+
<Checkbox
1313
class="flex items-center gap-3 bg-slate-900 p-2 text-white"
1414
checkList={true}
1515
>
1616
<CheckboxIndicator class=" flex w-[80px] justify-center bg-white p-3">
1717
1818
</CheckboxIndicator>
1919
<p>Controlls all</p>
20-
</MyCheckbox>
21-
<MyCheckbox
20+
</Checkbox>
21+
<Checkbox
2222
checkBoxSig={firstUserSig}
2323
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
2424
>
2525
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
2626
<p>No other stuff is needed here</p>
27-
</MyCheckbox>
27+
</Checkbox>
2828

29-
<MyCheckbox class="bg-slate-900 text-white">
29+
<Checkbox class="bg-slate-900 text-white">
3030
<div class="flex items-center gap-3">
3131
<CheckboxIndicator class="w-fit bg-slate-600"></CheckboxIndicator>
3232
<p>No other stuff is needed here</p>
3333
</div>
34-
</MyCheckbox>
34+
</Checkbox>
3535
</CheckList>
3636
</>
3737
);
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator';
3-
import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
3+
import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
44

55
export default component$(() => {
66
return (
77
<>
88
<p>I'm the default checkbox!!!</p>
9-
<MyCheckbox class=" text-white">
9+
<Checkbox class=" text-white">
1010
<div class="flex items-center gap-3">
1111
<CheckboxIndicator class="w-fit bg-slate-600">
1212
<p id="indicator"></p>
1313
</CheckboxIndicator>
1414
<p>No other stuff is needed here</p>
1515
</div>
16-
</MyCheckbox>
16+
</Checkbox>
1717
</>
1818
);
1919
});

apps/website/src/routes/docs/headless/checkbox/examples/test-hero.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator';
3-
import { MyCheckbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
3+
import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
44

55
export default component$(() => {
66
const userSig = useSignal(true);
77
return (
88
<>
9-
<MyCheckbox class="bg-slate-900 text-white" checkBoxSig={userSig}>
9+
<Checkbox class="bg-slate-900 text-white" checkBoxSig={userSig}>
1010
<div class="flex items-center gap-3">
1111
<CheckboxIndicator class="w-fit bg-slate-600">
1212
<p id="indicator"></p>
1313
</CheckboxIndicator>
1414
<p>No other stuff is needed here</p>
1515
</div>
16-
</MyCheckbox>
16+
</Checkbox>
1717
<div>{`${userSig.value}`}</div>
1818
</>
1919
);

0 commit comments

Comments
 (0)