Skip to content

Commit 8c077eb

Browse files
dragosctdragosct
committed
Merge branch 'be-docs-v3' into drg-docs-v3
2 parents 87c42ac + 86bcbbf commit 8c077eb

File tree

10 files changed

+118
-217
lines changed

10 files changed

+118
-217
lines changed

‎apps/site/src/components/docs-html/input-number/input-amount-buttons.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,39 +32,37 @@ export default function InputAmountButtonsInputZipCode() {
3232
className="w-full place-items-center"
3333
dangerouslySetInnerHTML={{
3434
__html: `<div class="w-[250px] max-w-sm relative mt-4">
35-
<label class="block mb-1 text-sm text-slate-600">Select Amount</label>
35+
<label class="block mb-1 text-sm text-slate-800 font-semibold antialiased">
36+
Select Amount
37+
</label>
3638
<div class="relative">
3739
<button
38-
id="decreaseButton"
40+
id="decreaseButton"
3941
class="absolute right-9 top-1 rounded bg-slate-800 p-1.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
40-
type="button"
41-
>
42+
type="button">
4243
<svg
4344
xmlns="http://www.w3.org/2000/svg"
4445
viewBox="0 0 16 16"
4546
fill="currentColor"
46-
class="w-4 h-4"
47-
>
47+
class="w-4 h-4">
4848
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
4949
</svg>
5050
</button>
5151
<input
5252
id="amountInput"
5353
type="number"
54-
value="0"
55-
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
54+
value="0"
55+
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
5656
/>
5757
<button
5858
id="increaseButton"
5959
class="absolute right-1 top-1 rounded bg-slate-800 p-1.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
60-
type="button"
61-
>
60+
type="button">
6261
<svg
6362
xmlns="http://www.w3.org/2000/svg"
6463
viewBox="0 0 16 16"
6564
fill="currentColor"
66-
class="w-4 h-4"
67-
>
65+
class="w-4 h-4">
6866
<path
6967
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
7068
/>

‎apps/site/src/components/docs-html/input-number/input-control-with-icon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default function InputControlWithIcon() {
5454
id="amountInput"
5555
type="number"
5656
value="0"
57-
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-10 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
57+
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-10 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
5858
/>
5959
<button
6060
id="increaseButton"

‎apps/site/src/components/docs-html/input-number/input-counter-plain-buttons.tsx‎

Lines changed: 10 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,43 +4,20 @@ export default function InputControlPlainButtons() {
44
<div
55
className="w-full place-items-center"
66
dangerouslySetInnerHTML={{
7-
__html: `<div class="w-[250px] max-w-sm relative mt-4">
8-
<label class="block mb-1 text-sm text-slate-600">Select Amount</label>
7+
__html: ` <div class="w-[250px] max-w-sm relative mt-4">
8+
<label class="block text-sm font-semibold antialiased text-slate-800 mb-2">
9+
Select Amount
10+
</label>
911
<div class="relative">
10-
<button
11-
id="decreaseButton"
12-
class="absolute right-9 top-1 rounded-md border border-transparent p-1.5 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
13-
type="button"
14-
>
15-
<svg
16-
xmlns="http://www.w3.org/2000/svg"
17-
viewBox="0 0 16 16"
18-
fill="currentColor"
19-
class="w-4 h-4"
20-
>
12+
<button id="decreaseButton" class="absolute right-9 top-1 rounded-md border border-transparent p-1.5 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
13+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
2114
<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
2215
</svg>
2316
</button>
24-
<input
25-
id="amountInput"
26-
type="number"
27-
value="0"
28-
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
29-
/>
30-
<button
31-
id="increaseButton"
32-
class="absolute right-1 top-1 rounded-md border border-transparent p-1.5 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
33-
type="button"
34-
>
35-
<svg
36-
xmlns="http://www.w3.org/2000/svg"
37-
viewBox="0 0 16 16"
38-
fill="currentColor"
39-
class="w-4 h-4"
40-
>
41-
<path
42-
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
43-
/>
17+
<input id="amountInput" type="number" value="0" class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
18+
<button id="increaseButton" class="absolute right-1 top-1 rounded-md border border-transparent p-1.5 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
19+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4">
20+
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
4421
</svg>
4522
</button>
4623
</div>

‎apps/site/src/components/docs-html/input-number/input-credit-card.tsx‎

Lines changed: 12 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,35 @@ export default function InputCurrencyConversion() {
44
<div
55
className="w-full place-items-center"
66
dangerouslySetInnerHTML={{
7-
__html: `<div class="w-full max-w-sm min-w-[200px] mt-4">
8-
<label class="block mb-1 text-sm text-slate-600">
7+
__html: ` <div class="w-full max-w-sm min-w-[200px] mt-4">
8+
<label class="block mb-2 text-sm font-semibold antialiased text-slate-800">
99
Cardholder Name
1010
</label>
11-
<input
12-
type="text"
13-
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
14-
placeholder="e.g John Doe"
15-
/>
11+
<input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" type="text" placeholder="e.g John Doe" />
1612
17-
<label class="block mb-1 text-sm text-slate-600 mt-4">
13+
<label class="block mb-2 text-sm font-semibold antialiased text-slate-800 mt-4">
1814
Card Number
1915
</label>
20-
<input
21-
type="text"
22-
id="cardNumber"
23-
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
24-
placeholder="1234 5678 9012 3456"
25-
maxlength="19"
26-
oninput="formatCardNumber(this)"
27-
/>
16+
<input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" type="text" id="cardNumber" placeholder="1234 5678 9012 3456" maxlength="19" oninput="formatCardNumber(this)" />
2817
2918
<div class="flex">
3019
<div class="w-full md:w-8/12 mr-4">
31-
<label class="block mb-1 text-sm text-slate-600 mt-4">
20+
<label class="block mb-2 text-sm font-semibold antialiased text-slate-800 mt-4">
3221
Expiration Date
3322
</label>
34-
<input
35-
type="text"
36-
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
37-
placeholder="MM/YY"
38-
maxlength="5"
39-
pattern="\d{2}/\d{2}"
40-
oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\d{2})(\d{1,2})/, '$1/$2').substring(0, 5);"
41-
/>
23+
<input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" type="text" placeholder="MM/YY" maxlength="5" pattern="\d{2}/\d{2}" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\d{2})(\d{1,2})/, '$1/$2').substring(0, 5);" />
4224
</div>
4325
<div class="w-full md:w-4/12">
44-
<label class="block mb-1 text-sm text-slate-600 mt-4">
26+
<label class="block mb-2 text-sm font-semibold antialiased text-slate-800 mt-4">
4527
CVV
4628
</label>
47-
<input
48-
type="text"
49-
class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
50-
placeholder="123"
51-
maxlength="3"
52-
pattern="\d{3}"
53-
oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');"/>
29+
<input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md pl-3 pr-20 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 ring ring-transparent hover:ring-slate-800/10 focus:ring-slate-800/10 hover:border-slate-800 shadow-sm focus:shadow" type="text" placeholder="123" maxlength="3" pattern="\d{3}" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" />
5430
</div>
5531
</div>
5632
57-
<button class="w-full mt-4 rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">Purchase Now</button>
33+
<button class="w-full mt-4 rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
34+
Purchase Now
35+
</button>
5836
</div>
5937
6038
<script>

0 commit comments

Comments
 (0)