mirror of
https://github.com/logto-io/logto.git
synced 2025-01-20 21:32:31 -05:00
feat(console): add component checkbox (#576)
* feat(console): add component checkbox * fix: merge icons * fix: svg color
This commit is contained in:
Wang Sijie
GitHub
parent
8cf7f3643f
commit
e47899ae5c
5 changed files with 157 additions and 14 deletions
73
packages/console/src/components/Checkbox/Icon.tsx
Normal file
73
packages/console/src/components/Checkbox/Icon.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import React from 'react';
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Icon = ({ className }: Props) => (
|
||||
<span className={className}>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<rect x="1" y="1" width="18" height="18" rx="4" fill="currentColor" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8.31476 13.858L5.13295 10.441C4.95568 10.253 4.95568 9.947 5.13295 9.757L5.77568 9.074C5.95295 8.886 6.24113 8.886 6.4184 9.074L8.63657 11.466L13.5811 6.141C13.7584 5.953 14.0465 5.953 14.2238 6.141L14.8665 6.825C15.0438 7.013 15.0438 7.32 14.8665 7.507L8.95748 13.858C8.78021 14.046 8.49203 14.046 8.31476 13.858Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<rect x="1" y="1" width="18" height="18" rx="4" fill="currentColor" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8.31476 13.858L5.13295 10.441C4.95568 10.253 4.95568 9.947 5.13295 9.757L5.77568 9.074C5.95295 8.886 6.24113 8.886 6.4184 9.074L8.63657 11.466L13.5811 6.141C13.7584 5.953 14.0465 5.953 14.2238 6.141L14.8665 6.825C15.0438 7.013 15.0438 7.32 14.8665 7.507L8.95748 13.858C8.78021 14.046 8.49203 14.046 8.31476 13.858Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="16"
|
||||
height="16"
|
||||
rx="3"
|
||||
fill="#EFF1F1"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
|
||||
export default Icon;
|
||||
44
packages/console/src/components/Checkbox/index.module.scss
Normal file
44
packages/console/src/components/Checkbox/index.module.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.checkbox {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: _.unit(2);
|
||||
|
||||
> svg {
|
||||
display: none;
|
||||
color: var(--color-neutral-60);
|
||||
|
||||
&:first-child {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
opacity: 0%;
|
||||
}
|
||||
|
||||
input:checked:not(:disabled) ~ .icon > svg:nth-child(1),
|
||||
input:not(:checked):not(:disabled) ~ .icon > svg:nth-child(2),
|
||||
input:checked:disabled ~ .icon > svg:nth-child(3),
|
||||
input:not(:checked):disabled ~ .icon > svg:nth-child(4) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
23
packages/console/src/components/Checkbox/index.tsx
Normal file
23
packages/console/src/components/Checkbox/index.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { nanoid } from 'nanoid';
|
||||
import React, { InputHTMLAttributes, ReactNode, useState } from 'react';
|
||||
|
||||
import Icon from './Icon';
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
|
||||
label?: ReactNode;
|
||||
};
|
||||
|
||||
const Checkbox = ({ label, disabled, ...rest }: Props) => {
|
||||
const [id] = useState(nanoid());
|
||||
|
||||
return (
|
||||
<div className={styles.checkbox}>
|
||||
<input id={id} type="checkbox" disabled={disabled} {...rest} />
|
||||
<Icon className={styles.icon} />
|
||||
{label && <label htmlFor={id}>{label}</label>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Checkbox;
|
||||
|
|
@ -3,6 +3,7 @@ import React from 'react';
|
|||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import Checkbox from '@/components/Checkbox';
|
||||
import FormField from '@/components/FormField';
|
||||
import Select from '@/components/Select';
|
||||
import Switch from '@/components/Switch';
|
||||
|
|
@ -43,23 +44,21 @@ const SignInMethodsForm = () => {
|
|||
label={t('sign_in_exp.sign_in_methods.enable_secondary_description')}
|
||||
/>
|
||||
{signInMethods.map((method) => (
|
||||
<div key={method}>
|
||||
{/* TODO: LOG-2187 checkbox component */}
|
||||
<input
|
||||
type="checkbox"
|
||||
id={method}
|
||||
value={method}
|
||||
<div key={method} className={styles.method}>
|
||||
<Checkbox
|
||||
label={
|
||||
<>
|
||||
{t('sign_in_exp.sign_in_methods.methods', { context: method })}
|
||||
{primaryMethod === method && (
|
||||
<span className={styles.primaryTag}>
|
||||
{t('sign_in_exp.sign_in_methods.methods_primary_tag')}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
disabled={primaryMethod === method}
|
||||
{...register(`signInMethods.${method}`)}
|
||||
/>
|
||||
<label htmlFor={method}>
|
||||
{t('sign_in_exp.sign_in_methods.methods', { context: method })}
|
||||
{primaryMethod === method && (
|
||||
<span className={styles.primaryTag}>
|
||||
{t('sign_in_exp.sign_in_methods.methods_primary_tag')}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</FormField>
|
||||
|
|
|
|||
|
|
@ -9,3 +9,7 @@
|
|||
.primaryTag {
|
||||
color: var(--color-caption);
|
||||
}
|
||||
|
||||
.method {
|
||||
margin-top: _.unit(2);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue