Skip to content

Commit 8c8b1aa

Browse files
tleperoutleperou
authored
feat: add input phone (#243)
* docs: init the doc of InputPhone * feat: add libphonenumber-js dependency to doc and headless * docs: update InputPhone with props * feat: init InputPhone component * feat: integrate country code * docs: update InputPhone page * feat: add outputs on InputPhone * feat: clean up manual events * feat: support props being passed * feat: add the HTML props to InputPhone element * docs: add value to the inputs of InputPhone * feat: handle changes on initial render * feat: improve keyboard control of InputPhone * refactor: apply coding standards to InputPhone * feat: add libphone & countries as root dependency * feat: add axe test report of InputPhone
1 parent 11e21e9 commit 8c8b1aa

File tree

10 files changed

+567
-4
lines changed

10 files changed

+567
-4
lines changed

‎apps/website/src/components/menu/menu.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export const Menu = component$<Props>(({ onClose$ }) => {
4242
path: `/docs/${appState.theme.toLowerCase()}/navigation-bar`,
4343
},
4444
{ label: 'Drawer', path: `/docs/${appState.theme.toLowerCase()}/drawer` },
45+
{ label: 'Input Phone', path: `/docs/headless/input-phone` },
4546
{ label: 'Rating', path: `/docs/${appState.theme.toLowerCase()}/rating` },
4647
{ label: 'Radio', path: `/docs/${appState.theme.toLowerCase()}/radio` },
4748
{ label: 'Popover', path: `/docs/${appState.theme.toLowerCase()}/popover` },

‎apps/website/src/routes/docs/headless/input-phone/index.tsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import {
2+
$,
3+
component$,
4+
useSignal,
5+
useStyles$,
6+
useStylesScoped$,
7+
} from '@builder.io/qwik';
8+
import { InputPhone } from '@qwik-ui/headless';
9+
import {
10+
InputPhoneCountry,
11+
InputPhoneValidity,
12+
} from 'packages/headless/src/components/input-phone/input-phone';
13+
import styles from './input-phone.css?inline';
14+
15+
export default component$(() => {
16+
useStyles$(styles);
17+
18+
useStylesScoped$(`
19+
h1 { margin: 2rem 0; padding-top: 1rem; font-weight: bold; border-top: 1px dotted #222}
20+
.form-item, hr { width: 35em; }
21+
h2 { margin-block: 1.15em 0.5em; font-size: xx-large; }
22+
h3 { margin-block: 0.85em 0.35em; font-size: x-large; }
23+
`);
24+
25+
const country = useSignal<InputPhoneCountry>();
26+
const number = useSignal<string>();
27+
const valid = useSignal<InputPhoneValidity>();
28+
29+
return (
30+
<>
31+
<p>This is the documentation for the Input Phone</p>
32+
33+
<h2>Input Phone Example</h2>
34+
35+
<div class="form-item">
36+
<InputPhone
37+
countryCode="FR"
38+
value="06486254"
39+
placeholder="Type your phone number"
40+
onCountryChange$={$((value?: InputPhoneCountry) => {
41+
country.value = value;
42+
})}
43+
onNumberChange$={$((value: string) => {
44+
number.value = value;
45+
})}
46+
onValidChange$={$((value: InputPhoneValidity) => {
47+
valid.value = value;
48+
})}
49+
/>
50+
</div>
51+
52+
<hr />
53+
54+
<h3>Inputs</h3>
55+
56+
<ul>
57+
<li>
58+
<pre>countryCode</pre> type CountryCode | default undefined
59+
</li>
60+
<li>
61+
<pre>placeholder</pre> type string | default "Phone number"
62+
</li>
63+
<li>
64+
<pre>value</pre> type string | default <em>empty</em>
65+
</li>
66+
</ul>
67+
68+
<hr />
69+
70+
<h3>Outputs</h3>
71+
72+
<ul>
73+
<li>
74+
<pre>onCountryChange$</pre>:{' '}
75+
<pre>{JSON.stringify(country.value) || '–'}</pre>
76+
</li>
77+
<li>
78+
<pre>onNumberChange$</pre>: {number.value || '–'}
79+
</li>
80+
<li>
81+
<pre>onValidChange$</pre>: {valid.value || '–'}
82+
</li>
83+
</ul>
84+
</>
85+
);
86+
});

‎apps/website/src/routes/docs/headless/input-phone/input-phone.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
hr {
2+
margin-block: 2em;
3+
}
4+
5+
pre {
6+
display: inline;
7+
}

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"autoprefixer": "^10.4.13",
4949
"commitizen": "^4.3.0",
5050
"commitlint": "^17.4.3",
51+
"country-list-json": "1.1.0",
5152
"cypress": "^12.6.0",
5253
"cypress-ct-qwik": "0.0.5",
5354
"cz-conventional-changelog": "^3.3.0",
@@ -60,6 +61,7 @@
6061
"html-webpack-plugin": "^5.5.0",
6162
"husky": "^8.0.3",
6263
"jsdom": "~20.0.3",
64+
"libphonenumber-js": "1.10.24",
6365
"lodash.includes": "4.3.0",
6466
"ngx-deploy-npm": "^5.0.0",
6567
"node-fetch": "3.3.0",

‎packages/headless/src/components/input-phone/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { InputPhone } from './input-phone';

‎packages/headless/src/components/input-phone/input-phone.axe.json

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
{
2+
"url": "http://127.0.0.1:5173/docs/headless/input-phone/",
3+
"extensionVersion": "4.51.0",
4+
"axeVersion": "4.6.3",
5+
"standard": "WCAG 2.1 AA",
6+
"testingStartDate": "2023-03-18T11:26:34.819Z",
7+
"testingEndDate": "2023-03-18T11:48:12.451Z",
8+
"bestPracticesEnabled": false,
9+
"issueSummary": {
10+
"critical": 0,
11+
"moderate": 0,
12+
"minor": 0,
13+
"serious": 3,
14+
"bestPractices": 0,
15+
"needsReview": 0
16+
},
17+
"remainingTestingSummary": { "run": false },
18+
"igtSummary": [
19+
{ "tool": "Table", "skipped": false, "name": null, "run": false },
20+
{
21+
"tool": "Keyboard",
22+
"skipped": false,
23+
"name": "3/18/2023 at 10:42 PM",
24+
"run": true,
25+
"issues": { "critical": 0, "moderate": 0, "minor": 0, "serious": 0 },
26+
"duration": 157762
27+
},
28+
{ "tool": "Modal Dialog", "skipped": false, "name": null, "run": false },
29+
{
30+
"tool": "Interactive Elements",
31+
"skipped": false,
32+
"name": "3/18/2023 at 10:26 PM",
33+
"run": true,
34+
"issues": { "critical": 0, "moderate": 0, "minor": 0, "serious": 0 },
35+
"duration": 624995
36+
},
37+
{
38+
"tool": "Structure",
39+
"skipped": false,
40+
"name": "3/18/2023 at 10:45 PM",
41+
"run": true,
42+
"issues": { "critical": 0, "moderate": 0, "minor": 0, "serious": 3 },
43+
"duration": 76867
44+
},
45+
{ "tool": "Images", "skipped": false, "name": null, "run": false },
46+
{ "tool": "Forms", "skipped": false, "name": null, "run": false }
47+
],
48+
"failedRules": [
49+
{ "name": "lang-change-not-marked", "count": 3, "mode": "manual" }
50+
],
51+
"needsReview": [],
52+
"allIssues": [
53+
{
54+
"ruleId": "lang-change-not-marked",
55+
"description": "The change in language for a portion of content is not coded.",
56+
"help": "Change in language is not marked",
57+
"helpUrl": "https://docs.deque.com/issue-help/1.0.0/en/lang-change-not-marked",
58+
"impact": "serious",
59+
"needsReview": false,
60+
"isManual": true,
61+
"selector": ["body > form.\\00002b50\\0000fe0fdqh46j-1:nth-of-type(1)"],
62+
"summary": "The change in language for a portion of content is not coded.",
63+
"source": null,
64+
"tags": ["wcag2aa", "wcag312a"],
65+
"igt": "Structure",
66+
"testName": "QwikUI | Headless | Input-phone [interactivity]",
67+
"shareURL": "",
68+
"createdAt": "2023-03-18T11:48:12.441Z",
69+
"testUrl": "http://127.0.0.1:5173/docs/headless/input-phone/",
70+
"testPageTitle": "",
71+
"foundBy": "[email protected]",
72+
"axeVersion": "4.6.3"
73+
},
74+
{
75+
"ruleId": "lang-change-not-marked",
76+
"description": "The change in language for a portion of content is not coded.",
77+
"help": "Change in language is not marked",
78+
"helpUrl": "https://docs.deque.com/issue-help/1.0.0/en/lang-change-not-marked",
79+
"impact": "serious",
80+
"needsReview": false,
81+
"isManual": true,
82+
"selector": [
83+
"body > form.\\00002b50\\0000fe0fdqh46j-1:nth-of-type(1) > div.\\00002b50\\0000fe0fokr433-0:nth-of-type(1) > select.\\00002b50\\0000fe0fokr433-0:nth-of-type(1)"
84+
],
85+
"summary": "The change in language for a portion of content is not coded.",
86+
"source": null,
87+
"tags": ["wcag2aa", "wcag312a"],
88+
"igt": "Structure",
89+
"testName": "QwikUI | Headless | Input-phone [interactivity]",
90+
"shareURL": "",
91+
"createdAt": "2023-03-18T11:48:12.441Z",
92+
"testUrl": "http://127.0.0.1:5173/docs/headless/input-phone/",
93+
"testPageTitle": "",
94+
"foundBy": "[email protected]",
95+
"axeVersion": "4.6.3"
96+
},
97+
{
98+
"ruleId": "lang-change-not-marked",
99+
"description": "The change in language for a portion of content is not coded.",
100+
"help": "Change in language is not marked",
101+
"helpUrl": "https://docs.deque.com/issue-help/1.0.0/en/lang-change-not-marked",
102+
"impact": "serious",
103+
"needsReview": false,
104+
"isManual": true,
105+
"selector": [
106+
"body > form.\\00002b50\\0000fe0fdqh46j-1:nth-of-type(1) > div.\\00002b50\\0000fe0fokr433-0:nth-of-type(1) > input.\\00002b50\\0000fe0fokr433-0:nth-of-type(1)"
107+
],
108+
"summary": "The change in language for a portion of content is not coded.",
109+
"source": null,
110+
"tags": ["wcag2aa", "wcag312a"],
111+
"igt": "Structure",
112+
"testName": "QwikUI | Headless | Input-phone [interactivity]",
113+
"shareURL": "",
114+
"createdAt": "2023-03-18T11:48:12.441Z",
115+
"testUrl": "http://127.0.0.1:5173/docs/headless/input-phone/",
116+
"testPageTitle": "",
117+
"foundBy": "[email protected]",
118+
"axeVersion": "4.6.3"
119+
}
120+
]
121+
}

‎packages/headless/src/components/input-phone/input-phone.css

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
div {
2+
display: grid;
3+
grid-template-columns: 1.5em auto;
4+
grid-template-rows: 1.5em;
5+
column-gap: 0.25ch;
6+
}
7+
8+
button {
9+
grid-column: 1 / 1;
10+
grid-row: 1;
11+
pointer-events: none;
12+
}
13+
14+
select,
15+
span {
16+
/* position */
17+
position: relative;
18+
z-index: 1;
19+
grid-column: 1 / 1;
20+
grid-row: 1;
21+
/* */
22+
cursor: pointer;
23+
}
24+
25+
span {
26+
z-index: 0;
27+
position: relative;
28+
display: flex;
29+
justify-content: center;
30+
}
31+
32+
select:not(:focus) {
33+
/* reset all to hide */
34+
background-color: transparent;
35+
color: transparent;
36+
border-color: transparent;
37+
}
38+
39+
select:focus {
40+
grid-column: 1 / 3;
41+
}
42+
43+
input {
44+
grid-column: 2 / 3;
45+
grid-row: 1;
46+
}

0 commit comments

Comments
 (0)