Skip to content

Commit

Permalink
Add styledTwo component to phone-input.stories.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@iPagar
iPagar committed Feb 5, 2024
1 parent 35c97fc commit adfea6d
Show file tree
Hide file tree
Showing 3 changed files with 332 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/phone-input/phone-input-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export function PhoneInputDialog(props: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
{...props}
aria-hidden={!isDialogOpen}
className={clsx(
styles.countrySelectDialog,
className,
Expand Down
210 changes: 210 additions & 0 deletions stories/phone-input-stories.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,3 +233,213 @@
}
}
}

.styledTwoForm {
display: flex;
gap: 8px;
font-family: 'Work Sans', sans-serif;

.phoneInput {
display: flex;
width: 300px;
height: 60px;
align-items: center;
gap: 10px;
flex-shrink: 0;
border-radius: 29px;
border: 2px solid var(--default-input-dark, rgba(255, 255, 255, 0));
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
padding: 20px 36px 15px 36px;

&.invalid {
border-bottom: 2px solid var(--secondary-red, #ff0000);
}

.countryIcon {
display: flex;
width: 20px;
height: 20px;
justify-content: center;
align-items: center;
}

.countrySelect {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
position: relative;

&[data-open='true'] {
.countryIcon {
transform: rotate(180deg);
}
}

&Search {
position: sticky;
top: 0;
display: flex;
padding: 8px 8px 8px 8px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
border-bottom: 1px solid rgba(31, 30, 88, 0.1);
background: #fcfcfc;

&Wrapper {
display: flex;
height: 44px;
padding: 7px 16px;
align-items: center;
gap: 12px;
align-self: stretch;

border-radius: 21px;
background: #f0f0f3;
}

&Icon {
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
}

&Input {
display: flex;
align-items: center;
gap: 8px;
align-self: stretch;
outline: none;
border: none;
background: none;

color: var(--text-Om, #1f1e58);
font-family: Gantari;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */

&::placeholder {
color: rgba(31, 30, 88, 0.5);
font-family: Gantari;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
}

.countryFlag {
width: 21px;
height: 15px;
object-fit: cover;
border-radius: 4px;
}

&Dialog {
width: 100%;
display: flex;
padding: 8px 0px;
padding-top: 0;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-top: 8px;
border-radius: 29px;
background: #fcfcfc;
box-shadow: 0px 2px 16px 0px rgba(18, 18, 18, 0.1);
overflow: hidden;

&[aria-hidden='true'] {
display: none;
}
}

&List {
display: flex;
padding: 8px 0px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
overflow: auto;
width: 100%;
}

&Item {
display: flex;
min-height: 44px;
padding: 6px 16px;
align-items: center;
gap: 16px;
align-self: stretch;
cursor: pointer;

color: var(--text-Om, #1f1e58);
font-family: Gantari;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;

&:hover {
color: var(--main-black, #414141);
background: var(--hover-blue-15, rgba(180, 231, 239, 0.15));
}

&Flag {
width: 24px;
height: 18px;
flex-shrink: 0;
object-fit: cover;
border-radius: 4px;
}
}
}

.numberInput {
color: var(--text-Om, #1f1e58);
font-family: Gantari;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
opacity: 0.7;

&::placeholder {
color: var(--text-Om, #1f1e58);
font-family: Gantari;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
opacity: 0.7;
}
}
}

.label {
position: relative;

&Text {
position: absolute;
left: 36px;
color: var(--text-Om, #1f1e58);
text-align: center;
font-family: Gantari;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
opacity: 0.7;
}
}
}
121 changes: 121 additions & 0 deletions stories/phone-input.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,127 @@ export function Styled() {
);
}

export function StyledTwo() {
const {
country,
countryList,
handleCountryChange,
handlePhoneNumberChange,
isValid,
phoneNumber,
} = usePhoneInput();
const [search, setSearch] = useState('');

const pickCountry = useCallback(
(e: React.KeyboardEvent | React.MouseEvent) => {
setSearch('');
const target = e.currentTarget as HTMLLIElement;
handleCountryChange(target.dataset.value as unknown as string);
},
[]
);

const searchCountryList = countryList.filter((countryItem) =>
countryItem.name.toLowerCase().includes(search.toLowerCase())
);

return (
<form
className={styles.styledTwoForm}
onSubmit={(e) => {
e.preventDefault();
}}
>
<label className={styles.label} htmlFor="phone">
<span className={styles.labelText}>Phone</span>
<PhoneInput
className={clsx(styles.phoneInput, !isValid && styles.invalid)}
>
<PhoneInput.CountrySelect>
<PhoneInput.Trigger className={styles.countrySelect}>
<CountryFlag className={styles.countryFlag} country={country} />
<div className={styles.countryIcon}>
<svg
fill="none"
height="20"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.175 6.9126L10 10.7293L13.825 6.9126L15 8.0876L10 13.0876L5 8.0876L6.175 6.9126Z"
fill="#7A7A7A"
/>
</svg>
</div>
</PhoneInput.Trigger>
<PhoneInput.Dialog className={styles.countrySelectDialog}>
<div className={styles.countrySelectSearch}>
<div className={styles.countrySelectSearchWrapper}>
<div className={styles.countrySelectSearchIcon}>
<svg
fill="none"
height="22"
viewBox="0 0 22 22"
width="22"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.25 19.25L13.75 13.75M15.5833 9.16667C15.5833 12.7105 12.7105 15.5833 9.16667 15.5833C5.62284 15.5833 2.75 12.7105 2.75 9.16667C2.75 5.62284 5.62284 2.75 9.16667 2.75C12.7105 2.75 15.5833 5.62284 15.5833 9.16667Z"
stroke="#1F1E58"
strokeLinecap="round"
strokeLinejoin="round"
strokeOpacity="0.8"
strokeWidth="1.5"
/>
</svg>
</div>
<input
className={styles.countrySelectSearchInput}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search"
type="text"
value={search}
/>
</div>
</div>
<ul className={styles.countrySelectList}>
{searchCountryList.map((countryItem) => (
<PhoneInput.Item
className={styles.countrySelectItem}
data-value={countryItem.alpha2}
key={countryItem.alpha2}
onClick={pickCountry}
onKeyDown={pickCountry}
tabIndex={0}
>
<CountryFlag
className={styles.countrySelectItemFlag}
country={countryItem.alpha2}
type="svg"
/>
<span>{countryItem.name}</span>
</PhoneInput.Item>
))}
</ul>
</PhoneInput.Dialog>
</PhoneInput.CountrySelect>

<PhoneInput.NumberInput
className={styles.numberInput}
id="phone"
onChange={(e) => {
handlePhoneNumberChange(e.target.value);
}}
type="tel"
value={phoneNumber}
/>
</PhoneInput>
</label>
</form>
);
}

export function Hook() {
const {
country,
Expand Down

0 comments on commit adfea6d

Please sign in to comment.