Skip to content

Commit

Permalink
feat(radio): add addons
Browse files Browse the repository at this point in the history
  • Loading branch information
redzumi committed Jan 13, 2021
1 parent fe9faec commit 7923354
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/radio/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@alfalab/core-components-radio",
"version": "1.4.0",
"version": "1.5.0",
"description": "Radio component",
"keywords": [],
"license": "ISC",
Expand Down
4 changes: 4 additions & 0 deletions packages/radio/src/Component.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,16 @@ import { name, version } from '../package.json';
const handleChange = () => setChecked(!checked);
const size = select('size', ['s', 'm'], 's');
const disabled = boolean('disabled', false);
const fullWidth = boolean('fullWidth', false);
const label = text('label', 'Text label')
const hint = text('hint', 'Hint');
const align = select('align', ['start', 'end', 'center'], 'start');
const addons = text('addons');
return (
<Radio
disabled={disabled}
addons={addons}
fullWidth={fullWidth}
size={size}
align={align}
onChange={handleChange}
Expand Down
14 changes: 14 additions & 0 deletions packages/radio/src/Component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,16 @@ export type RadioProps = Omit<
*/
align?: Align;

/**
* Дополнительный слот
*/
addons: React.ReactNode | string;

/**
* Растягивать ли компонент на всю ширину
*/
fullWidth?: boolean;

/**
* Обработчик на выбор элемента
*/
Expand All @@ -82,6 +92,8 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
hint,
size = 's',
align = 'start',
addons,
fullWidth,
...restProps
},
ref,
Expand All @@ -103,6 +115,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
[styles.disabled]: disabled,
[styles.checked]: checked,
[styles.focused]: focused,
[styles.fullWidth]: fullWidth,
})}
ref={mergeRefs([labelRef, ref])}
>
Expand All @@ -120,6 +133,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>(
<span className={styles.label}>{label}</span>
{hint && <span className={styles.hint}>{hint}</span>}
</span>
{addons && <span className={styles.addons}>{addons}</span>}
</label>
);
},
Expand Down
9 changes: 9 additions & 0 deletions packages/radio/src/index.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,15 @@
align-items: center;
}

.addons {
margin-left: auto;
line-height: 24px;
}

.fullWidth {
width: 100%;
}

.label {
@mixin system_16-24_regular;
color: var(--radio-label-color);
Expand Down

0 comments on commit 7923354

Please sign in to comment.