Skip to content

Commit

Permalink
Remove hardcoded string and enable passing translations for content
Browse files Browse the repository at this point in the history
  • Loading branch information
@brionmario
brionmario committed Sep 6, 2020
1 parent 6784acc commit 733c218
Showing 1 changed file with 74 additions and 18 deletions.
92 changes: 74 additions & 18 deletions modules/react-components/src/components/modal/edit-avatar-modal/edit-avatar-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import {
import { UserAvatar } from "../../avatar";
import { LinkButton, PrimaryButton } from "../../button";
import { SelectionCard } from "../../card";
import { Hint } from "../../typography";

/**
* Edit Avatar Modal props interface.
Expand Down Expand Up @@ -83,6 +84,10 @@ export interface EditAvatarModalPropsInterface extends ModalProps, TestableCompo
* @param {<HTMLButtonElement>} e - Event.
*/
onCancel?: (e: MouseEvent<HTMLButtonElement>) => void;
/**
* i18n translations for modal content.
*/
translations?: EditAvatarModalContentI18nInterface;
}

const GRAVATAR_IMAGE_MIN_SIZE = 80;
Expand All @@ -100,6 +105,34 @@ export enum AvatarTypes {

type SystemGeneratedAvatarURLs = "system_gen_i_1";

/**
* Interface for the i18n string of the component.
*/
export interface EditAvatarModalContentI18nInterface {
gravatar: {
heading: ReactNode;
errors: {
noAssociation: {
header: ReactNode;
content: ReactNode;
};
};
};
hostedAvatar: {
heading: ReactNode;
input: {
placeholder: string;
hint: string;
};
};
systemGenAvatars: {
heading: ReactNode;
types: {
initials: ReactNode;
};
};
}

/**
* Edit Avatar modal.
*
Expand All @@ -119,6 +152,7 @@ export const EditAvatarModal: FunctionComponent<EditAvatarModalPropsInterface> =
onSubmit,
submitButtonText,
[ "data-testid" ]: testId,
translations,
...rest
} = props;

Expand Down Expand Up @@ -293,7 +327,7 @@ export const EditAvatarModal: FunctionComponent<EditAvatarModalPropsInterface> =
<Checkbox
radio
value={ AvatarTypes.SYSTEM_GENERATED }
label="System generated avatar"
label={ translations.systemGenAvatars.heading }
checked={ selectedAvatarType === AvatarTypes.SYSTEM_GENERATED }
onChange={ handleSelectedAvatarTypeChange }
/>
Expand All @@ -303,7 +337,7 @@ export const EditAvatarModal: FunctionComponent<EditAvatarModalPropsInterface> =
<SelectionCard
id={ SystemGeneratedAvatars.get("Initials") }
size="x100"
header="Initials"
header={ translations.systemGenAvatars.types.initials }
image={
<UserAvatar
size="little"
Expand Down Expand Up @@ -332,7 +366,7 @@ export const EditAvatarModal: FunctionComponent<EditAvatarModalPropsInterface> =
label={
<label>
<>
<span>Gravatar based on </span>
<span>{ translations.gravatar.heading }</span>
<Dropdown
text={ selectedGravatarEmail }
options={
Expand Down Expand Up @@ -361,17 +395,8 @@ export const EditAvatarModal: FunctionComponent<EditAvatarModalPropsInterface> =
warning
visible
size="tiny"
header="No matching Gravatar image found!"
content={
<div>
It seems like { selectedGravatarEmail } is not registered on
Gravatar.
Sign up for a Gravatar account by clicking <a>here</a> or use
one of
the
following.
</div>
}
header={ translations.gravatar.errors.noAssociation.header }
content={ translations.gravatar.errors.noAssociation.content }
/>
)
}
Expand All @@ -384,20 +409,26 @@ export const EditAvatarModal: FunctionComponent<EditAvatarModalPropsInterface> =
)
}
<Grid.Row>
<Grid.Column computer={ 8 } tablet={ 10 } mobile={ 16 }>
<Grid.Column computer={ 10 } tablet={ 10 } mobile={ 16 }>
<div className="avatar-from-url">
<div className="mb-3">
<Form.Field>
<Checkbox
radio
value={ AvatarTypes.URL }
label="Hosted Image"
label={ translations.hostedAvatar.heading }
checked={ selectedAvatarType === AvatarTypes.URL }
onChange={ handleSelectedAvatarTypeChange }
/>
</Form.Field>
</div>
<Input fluid icon placeholder="https://" onChange={ handleCustomHostedURLChange }/>
<Input
icon
fluid
placeholder={ translations.hostedAvatar.input.placeholder }
onChange={ handleCustomHostedURLChange }
/>
<Hint>{ translations.hostedAvatar.input.hint }</Hint>
</div>
</Grid.Column>
</Grid.Row>
Expand All @@ -424,5 +455,30 @@ EditAvatarModal.defaultProps = {
"data-testid": "edit-avatar-modal",
dimmer: "blurring",
heading: "Update profile picture",
submitButtonText: "Save"
submitButtonText: "Save",
translations: {
gravatar: {
errors: {
noAssociation: {
content: "It seems like the selected email is not registered on Gravatar. Sign up for a " +
"Gravatar account by visiting Gravatar official website or use one of the following.",
header: "No matching Gravatar image found!"
}
},
heading: "Gravatar based on ",
},
hostedAvatar: {
heading: "Hosted Image",
input: {
hint: "Enter a valid image URL which is hosted on a third party location.",
placeholder: "Enter URL for the image."
}
},
systemGenAvatars: {
heading: "System generated avatar",
types: {
initials: "Initials"
}
}
}
};

0 comments on commit 733c218

Please sign in to comment.