-
Notifications
You must be signed in to change notification settings - Fork 6.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(StabilityIndex): introduce * ooopss Signed-off-by: Augustin Mauroy <[email protected]> * fix:css code style * update from feedback * use danger * add style for `a` * use alertBox name * fix --------- Signed-off-by: Augustin Mauroy <[email protected]>
- Loading branch information
1 parent
56cdefb
commit e56edcc
Showing
4 changed files
with
170 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
.alertBox { | ||
@apply flex | ||
flex-row | ||
items-center | ||
gap-2 | ||
rounded | ||
px-4 | ||
py-3 | ||
text-sm | ||
text-white; | ||
|
||
a { | ||
@apply font-ibm-plex-mono | ||
text-white | ||
underline; | ||
|
||
&:hover { | ||
@apply no-underline; | ||
} | ||
} | ||
|
||
&.small { | ||
@apply gap-1 | ||
py-2 | ||
text-xs; | ||
|
||
.title { | ||
@apply px-1; | ||
} | ||
} | ||
|
||
.title { | ||
@apply rounded-sm | ||
px-1.5; | ||
} | ||
|
||
svg { | ||
@apply inline | ||
size-5; | ||
} | ||
|
||
&.info { | ||
@apply bg-info-600; | ||
|
||
.title { | ||
@apply bg-info-700; | ||
} | ||
} | ||
|
||
&.success { | ||
@apply bg-green-600; | ||
|
||
.title { | ||
@apply bg-green-700; | ||
} | ||
} | ||
|
||
&.warning { | ||
@apply bg-warning-600; | ||
|
||
.title { | ||
@apply bg-warning-700; | ||
} | ||
} | ||
|
||
&.danger { | ||
@apply bg-danger-600; | ||
|
||
.title { | ||
@apply bg-danger-700; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import { ExclamationCircleIcon } from '@heroicons/react/24/solid'; | ||
import type { Meta as MetaObj, StoryObj } from '@storybook/react'; | ||
|
||
import AlertBox from '@/components/Common/AlertBox'; | ||
|
||
type Story = StoryObj<typeof AlertBox>; | ||
type Meta = MetaObj<typeof AlertBox>; | ||
|
||
export const Info: Story = { | ||
args: { | ||
level: 'info', | ||
title: '3', | ||
children: | ||
'Legacy. Although this feature is unlikely to be removed and is still covered by semantic versioning guarantees, it is no longer actively maintained, and other alternatives are available.', | ||
size: 'default', | ||
}, | ||
}; | ||
|
||
export const Success: Story = { | ||
args: { | ||
level: 'success', | ||
title: '2', | ||
children: | ||
'Stable. Compatibility with the npm ecosystem is a high priority.', | ||
size: 'default', | ||
}, | ||
}; | ||
|
||
export const Warning: Story = { | ||
args: { | ||
level: 'warning', | ||
title: '1', | ||
children: | ||
'Experimental. The feature is not subject to semantic versioning rules. Non-backward compatible changes or removal may occur in any future release. Use of the feature is not recommended in production environments. Experimental features are subdivided into stages:', | ||
size: 'default', | ||
}, | ||
}; | ||
|
||
export const Danger: Story = { | ||
args: { | ||
level: 'danger', | ||
title: '0', | ||
children: | ||
'Deprecated. The feature may emit warnings. Backward compatibility is not guaranteed.', | ||
size: 'default', | ||
}, | ||
}; | ||
|
||
export const WithIcon: Story = { | ||
args: { | ||
level: 'info', | ||
title: '3', | ||
children: ( | ||
<p> | ||
Lorem ipsum dolor sit amet <ExclamationCircleIcon /> consectetur | ||
adipisicing elit. Inventore, quasi doloremque. Totam, earum velit, sunt | ||
voluptates fugiat beatae praesentium quis magni explicabo repudiandae | ||
nam aut molestias ex ad sequi eum! | ||
</p> | ||
), | ||
size: 'default', | ||
}, | ||
}; | ||
|
||
export default { | ||
component: AlertBox, | ||
argTypes: { | ||
size: { | ||
options: ['default', 'small'], | ||
control: { type: 'radio' }, | ||
}, | ||
}, | ||
} as Meta; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import classNames from 'classnames'; | ||
import type { FC, PropsWithChildren } from 'react'; | ||
|
||
import styles from './index.module.css'; | ||
|
||
type AlertBoxProps = PropsWithChildren<{ | ||
level: 'info' | 'success' | 'warning' | 'danger'; | ||
title: string; | ||
size?: 'default' | 'small'; | ||
}>; | ||
|
||
const AlertBox: FC<AlertBoxProps> = ({ | ||
level, | ||
title, | ||
children, | ||
size = 'default', | ||
}) => ( | ||
<div className={classNames(styles.alertBox, styles[level], styles[size])}> | ||
<span className={styles.title}>{title}</span> | ||
{children} | ||
</div> | ||
); | ||
|
||
export default AlertBox; |
This file was deleted.
Oops, something went wrong.
e56edcc
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why was the next-env.d.ts file deleted, @AugustinMauroy ??