Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: refactor children prop #250

Merged
merged 2 commits into from
Oct 1, 2024
Merged

chore: refactor children prop #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2eacc79
refactor children prop
BogdanDanilescu Sep 30, 2024
37578fb
change prop to vite example
BogdanDanilescu Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions examples/vite/src/application.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,33 +94,33 @@ export function App() {
<TextInput
id="text-input-id"
error={{
children: "Error: Please correct this issue.",
text: "Error: Please correct this issue.",
}}
hint={{
children: "Hint: This is a helpful hint.",
text: "Hint: This is a helpful hint.",
}}
label={{
children: "Label",
text: "Label",
htmlFor: "text-input-id",
}}
suffix="KG"
/>
<TextArea
error={{
children: "Error: Please correct this issue.",
text: "Error: Please correct this issue.",
}}
hint={{
children: "Hint: This is a helpful hint.",
text: "Hint: This is a helpful hint.",
}}
id="textarea-id"
label={{
children: "Label",
text: "Label",
htmlFor: "textarea-id",
}}
/>
<Select
id="unique-id"
label={{ content: "Label" }}
label={{ text: "Label" }}
options={[
{
label: "Option 1",
Expand All @@ -141,11 +141,11 @@ export function App() {
<hr />
<FileUpload
error={{
children: "Error: File must be smaller than 5MB.",
text: "Error: File must be smaller than 5MB.",
}}
id="file-upload-id"
label={{
children: "Upload File",
text: "Upload File",
htmlFor: "file-upload-id",
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/ds/src/checkbox/checkbox.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading