Skip to content

Commit

Permalink
refactor children prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@BogdanDanilescu
BogdanDanilescu committed Sep 30, 2024
1 parent a45a457 commit 2eacc79
Show file tree
Hide file tree
Showing 16 changed files with 83 additions and 96 deletions.
2 changes: 1 addition & 1 deletion packages/react/ds/src/checkbox/checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const Checkbox = ({
{label}
</label>
</div>
{hint && <HintText className="gi-mb-0">{hint}</HintText>}
{hint && <HintText text={hint} className="gi-mb-0" />}
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions packages/react/ds/src/checkbox/checkboxes-group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@ const CheckboxesGroup = ({
) : (
title.value
)}
{title.hint && <HintText className="gi-mb-0">{title.hint}</HintText>}
{title.hint && <HintText text={title.hint} className="gi-mb-0" />}
</legend>
<div className="gi-flex gi-flex-col gi-gap-2.5">
{errorMessage && (
<ErrorText className="gi-mb-0">{errorMessage}</ErrorText>
<ErrorText text={errorMessage} className="gi-mb-0" />
)}
{items.map((checkbox, index) => (
<Checkbox
Expand Down
6 changes: 3 additions & 3 deletions packages/react/ds/src/error-text/error-text.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@ export const Default: Story = {
defaultValue: { summary: ErrorSize.md },
},
},
children: {
text: {
control: 'text',
table: {
category: 'Content',
type: { summary: 'React.ReactNode' },
type: { summary: 'Text of error' },
defaultValue: { summary: 'Error' },
},
},
},
args: {
children: 'Error',
text: 'Error',
size: ErrorSize.md,
},
};
4 changes: 3 additions & 1 deletion packages/react/ds/src/error-text/error-text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ export enum ErrorSize {
// Extend `React.HTMLAttributes<HTMLParagraphElement>` so that
// the component can accept all the standard attributes and events that a `<p>` element can handle.
export type ErrorTextProps = React.HTMLAttributes<HTMLParagraphElement> & {
text: string;
size?: ErrorSize;
className?: string;
};

export const ErrorText: React.FC<ErrorTextProps> = ({
text,
className,
size = ErrorSize.md,
...props
Expand All @@ -26,7 +28,7 @@ export const ErrorText: React.FC<ErrorTextProps> = ({
className={`gi-font-bold gi-leading-5 gi-text-red-600 gi-clear-both gi-block gi-mb-[14px] gi-mt-0 ${className}`}
{...props}
>
{props.children}
{text}
</Text>
);
};
14 changes: 7 additions & 7 deletions packages/react/ds/src/file-upload/file-upload.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,14 @@ export const Default: Story = {
args: {
id: 'file-upload-id',
label: {
children: 'Upload File',
text: 'Upload File',
htmlFor: 'file-upload-id',
},
hint: {
children: '',
text: '',
},
error: {
children: '',
text: '',
},
},
};
Expand All @@ -69,11 +69,11 @@ export const WithLabelAndHint: Story = {
args: {
id: 'file-upload-id',
label: {
children: 'Upload File',
text: 'Upload File',
htmlFor: 'file-upload-id',
},
hint: {
children: 'Hint: This is a helpful hint.',
text: 'Hint: This is a helpful hint.',
},
},
};
Expand All @@ -82,11 +82,11 @@ export const WithLabelAndError: Story = {
args: {
id: 'file-upload-id',
label: {
children: 'Upload File',
text: 'Upload File',
htmlFor: 'file-upload-id',
},
error: {
children: 'Error: File must be smaller than 5MB.',
text: 'Error: File must be smaller than 5MB.',
},
},
};
14 changes: 5 additions & 9 deletions packages/react/ds/src/file-upload/file-upload.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,19 @@ export type FileUploadProps = React.InputHTMLAttributes<HTMLInputElement> & {
// Use React.forwardRef to support refs properly
export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
({ label, hint, error, id, ...props }, ref) => {
const hasError = error?.children;
const hasHint = hint?.children;
const hasLabel = label?.children;

return (
<div
className={`gi-pt-2 gi-mb-4 ${hasError ? 'gi-px-4 gi-border-solid gi-border-l-lg gi-border-red-600' : ''}`}
className={`gi-pt-2 gi-mb-4 ${error?.text ? 'gi-px-4 gi-border-solid gi-border-l-lg gi-border-red-600' : ''}`}
>
{hasLabel && (
<Label size={label.size} htmlFor={id}>
{label?.text && (
<Label text={label.text} size={label.size} htmlFor={id}>
{label.children}
</Label>
)}

{hasHint && <HintText size={hint.size}>{hint.children}</HintText>}
{hint?.text && <HintText text={hint.text} size={hint.size} />}

{hasError && <ErrorText size={error.size}>{error.children}</ErrorText>}
{error?.text && <ErrorText text={error.text} size={error.size} />}

<input
id={id}
Expand Down
6 changes: 3 additions & 3 deletions packages/react/ds/src/hint-text/hint-text.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@ export const Default: Story = {
defaultValue: { summary: HintSize.md },
},
},
children: {
text: {
control: 'text',
table: {
category: 'Content',
type: { summary: 'React.ReactNode' },
type: { summary: 'text of hint' },
defaultValue: { summary: 'Hint' },
},
},
},
args: {
children: 'Hint',
text: 'Hint',
size: HintSize.md,
},
};
4 changes: 3 additions & 1 deletion packages/react/ds/src/hint-text/hint-text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ export enum HintSize {
// Extend `React.InputHTMLAttributes<HTMLInputElement>` so that
// the component can accept all the standard attributes and events that an `<input>` element can handle.
export type HintTextProps = React.HTMLAttributes<HTMLInputElement> & {
text: string;
size?: HintSize;
className?: string;
};

// Use React.forwardRef to support refs properly
export const HintText: React.FC<HintTextProps> = ({
text,
className,
size,
...props
Expand All @@ -26,7 +28,7 @@ export const HintText: React.FC<HintTextProps> = ({
className={`gi-font-normal gi-leading-5 gi-text-gray-700 gi-mb-[10px] ${className}`}
{...props}
>
{props.children}
{text}
</Text>
);
};
Expand Down
6 changes: 3 additions & 3 deletions packages/react/ds/src/label/label.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,18 +43,18 @@ export const Default: Story = {
defaultValue: { summary: '-' },
},
},
children: {
text: {
control: 'text',
table: {
category: 'Content',
type: { summary: 'React.ReactNode' },
type: { summary: 'text for label' },
defaultValue: { summary: 'Label' },
},
},
},
args: {
htmlFor: 'input-id',
size: LabelSize.md,
children: 'Label',
text: 'Label',
},
};
5 changes: 3 additions & 2 deletions packages/react/ds/src/label/label.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,21 @@ export enum LabelSize {

// Extend `React.LabelHTMLAttributes<HTMLLabelElement>` for correct label attributes
export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
text: string;
size?: LabelSize;
};

// Use React.forwardRef to support refs properly
export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
({ size = LabelSize.md, htmlFor, ...props }, ref) => {
({ text, size = LabelSize.md, htmlFor, ...props }, ref) => {
return (
<label
className={`gi-text-${size} gi-leading-5 gi-mb-1 gi-block`}
ref={ref}
htmlFor={htmlFor}
{...props}
>
{props.children}
{text}
</label>
);
},
Expand Down
16 changes: 8 additions & 8 deletions packages/react/ds/src/select/select.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,13 @@ export const Default: Story = {
args: {
id: 'unique-id',
label: {
content: 'Label',
text: 'Label',
},
hint: {
content: '',
text: '',
},
error: {
content: '',
text: '',
},
options: [
{
Expand All @@ -92,10 +92,10 @@ export const withHint: Story = {
args: {
id: 'unique-id',
label: {
content: 'Default Select',
text: 'Default Select',
},
hint: {
content: 'This can be different to where you went before',
text: 'This can be different to where you went before',
},
options: [
{
Expand All @@ -118,10 +118,10 @@ export const withError: Story = {
args: {
id: 'unique-id',
label: {
content: 'Default Select',
text: 'Default Select',
},
error: {
content: 'Error message',
text: 'Error message',
},
options: [
{
Expand Down Expand Up @@ -164,7 +164,7 @@ export const withGroups: Story = {
args: {
id: 'unique-id',
label: {
content: 'Default Select',
text: 'Default Select',
},
options: [
{
Expand Down
12 changes: 5 additions & 7 deletions packages/react/ds/src/select/select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,14 @@ type SelectProps = {
};

export function Select({ id, label, options, hint, error }: SelectProps) {
const ariaLabel = label?.content || id;
const ariaLabel = label?.text || id;
return (
<div>
{label && (
<Label htmlFor={id} size={label.size}>
{label.content}
</Label>
{label?.text && (
<Label text={label.text} htmlFor={id} size={label.size} />
)}
{hint && <HintText size={hint.size}>{hint.content}</HintText>}
{error && <ErrorText size={error.size}>{error.content}</ErrorText>}
{hint && <HintText text={hint.text} size={hint.size} />}
{error && <ErrorText text={error.text} size={error.size} />}
<select
className="focus:gi-outline focus:gi-outline-[3px] focus:gi-outline-yellow-400 focus:gi-outline-offset-0 gi-p-1.5 gi-border-black gi-border-[3px] gi-border-solid gi-min-w-56 gi-font-primary xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
id={ariaLabel}
Expand Down
Loading

0 comments on commit 2eacc79

Please sign in to comment.