gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #45015 from huyenltnguyen/chore/alert

Browse Source 
refactor(tools): Alert component
This commit is contained in:
Huyen Nguyen
2022-02-09 08:14:54 +07:00
committed by GitHub
parent 7d1677fc86
commit 95e473d4bb
3 changed files with 58 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
tools/ui-components/.storybook/preview.js
View File

@@ -1,5 +1,4 @@
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,

94
tools/ui-components/src/alert/alert.stories.tsx
View File

@@ -14,49 +14,65 @@ const story = {
const Template: Story<AlertProps> = args => <Alert {...args} />;
export const Basic = Template.bind({});
Basic.args = {
export const Success = Template.bind({});
Success.args = {
children: 'Hello, Alert!',
variant: 'success'
};
export const Info = Template.bind({});
Info.args = {
children: 'Hello, Alert!',
variant: 'info'
};
export const Warning = Template.bind({});
Warning.args = {
children: 'Hello, Alert!',
variant: 'warning'
};
export const Danger = Template.bind({});
Danger.args = {
children: 'Hello, Alert!',
variant: 'danger'
};
export const LongText = Template.bind({});
LongText.args = {
variant: 'success',
children:
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi commodi cumque dicta ducimus eum iure, maiores mollitia, odit porro quas quod rerum soluta sunt tempora unde, vel voluptas voluptates.'
};
export const WithHeadingAndParagraphs = Template.bind({});
WithHeadingAndParagraphs.args = {
variant: 'info',
children: (
<>
<h4>
<strong>Some Heading Text</strong>
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi
commodi cumque dicta ducimus eum iure, maiores mollitia, odit porro quas
quod rerum soluta sunt tempora unde, vel voluptas voluptates.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi
commodi cumque dicta ducimus eum iure, maiores mollitia, odit porro quas
quod rerum soluta sunt tempora unde, vel voluptas voluptates.
</p>
</>
)
};
export const Dismissable = Template.bind({});
Dismissable.args = {
children: 'Hello, Alert!',
className: '',
variant: 'success',
dismissLabel: 'Close alert',
onDismiss: () => console.log('Close alert!')
};
export const LongText = (): JSX.Element => (
<Alert variant='success'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi commodi
cumque dicta ducimus eum iure, maiores mollitia, odit porro quas quod rerum
soluta sunt tempora unde, vel voluptas voluptates.
</Alert>
);
export const WithHeadingAndParagraphs = (): JSX.Element => (
<Alert variant='info'>
<h4>
<strong>Some Heading Text</strong>
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi
commodi cumque dicta ducimus eum iure, maiores mollitia, odit porro quas
quod rerum soluta sunt tempora unde, vel voluptas voluptates.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi
commodi cumque dicta ducimus eum iure, maiores mollitia, odit porro quas
quod rerum soluta sunt tempora unde, vel voluptas voluptates.
</p>
</Alert>
);
export const WithCloseButton = (): JSX.Element => (
<Alert onDismiss={() => console.log('Alert closed')} variant='success'>
Hello, Alert!
</Alert>
);
export const WithoutCloseButton = (): JSX.Element => (
<Alert variant='success'>Hello, Alert without close button!</Alert>
);
export default story;

11
tools/ui-components/src/alert/alert.tsx
View File

@@ -32,22 +32,17 @@ export function Alert({
const variantClass = variantClasses[variant];
const classes = [
'relative p-4 mb-6 border border-transparent break-words',
'flex items-start p-4 mb-6 border border-transparent break-words',
variantClass,
isDismissable ? 'pr-10' : '',
className
].join(' ');
return (
<div className={classes} role='alert'>
<div className='grow'>{children}</div>
{isDismissable && (
<CloseButton
className='absolute right-4'
label={dismissLabel}
onClick={onDismiss}
/>
<CloseButton label={dismissLabel} onClick={onDismiss} />
)}
{children}
</div>
);
}