generated from IgnacioNMiranda/vite-component-library-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9e42c55
commit ab1a6da
Showing
7 changed files
with
215 additions
and
11 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
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,29 @@ | ||
import { FC, PropsWithChildren } from 'react' | ||
import styles from './popup-message.module.scss' | ||
|
||
export type PopupMessageVariant = 'INFO' | 'WARNING' | 'ERROR' | 'SUCCESS' | ||
|
||
export interface PopupMessageProps { | ||
label: string | ||
variant?: PopupMessageVariant | ||
delay?: 0 | 1 | 5 | 10 | ||
style?: React.CSSProperties | ||
} | ||
|
||
export const PopupMessage: FC<PropsWithChildren<PopupMessageProps>> = ({ | ||
label, | ||
variant = 'PRIMARY', | ||
children, | ||
delay = 5, | ||
style, | ||
}) => { | ||
return ( | ||
<div | ||
style={style} | ||
className={`${styles.popup_message} ${styles[variant.toLowerCase()]} ${styles[`fade_in_delay_${delay}`]}`} | ||
> | ||
<h3 className={styles.popup_message_label}>{label}</h3> | ||
{children} | ||
</div> | ||
) | ||
} |
89 changes: 89 additions & 0 deletions
89
src/lib/components/molecules/popup-message/popup-message.module.scss
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,89 @@ | ||
.fade_in_delay_base { | ||
@keyframes delayed_fade_in { | ||
0%{ | ||
display: none; | ||
} | ||
1% { | ||
opacity: 0; | ||
display: flex; | ||
transform: translateY(100px); | ||
} | ||
5% { | ||
opacity: 1; | ||
transform: translateX(0px); | ||
} | ||
95% { | ||
opacity: 1; | ||
transform: translateX(0px); | ||
} | ||
99% { | ||
opacity: 0; | ||
display: flex; | ||
transform: translateY(100px); | ||
} | ||
100% { | ||
display: none; | ||
} | ||
} | ||
animation: delayed_fade_in 10s ease-in-out; | ||
animation-fill-mode: forwards; | ||
opacity: 0; | ||
} | ||
|
||
.fade_in_delay_0 { | ||
@extend .fade_in_delay_base; | ||
animation-delay: 0s; | ||
} | ||
|
||
.fade_in_delay_1 { | ||
@extend .fade_in_delay_base; | ||
animation-delay: 1s; | ||
} | ||
|
||
.fade_in_delay_5 { | ||
@extend .fade_in_delay_base; | ||
animation-delay: 2s; | ||
} | ||
|
||
.fade_in_delay_10 { | ||
@extend .fade_in_delay_base; | ||
animation-delay: 3s; | ||
} | ||
|
||
.popup_message { | ||
z-index: var(--zindex-overlay); | ||
width: var(--width-md); | ||
border-radius: 0 var(--border-radius) var(--border-radius) 0 ; | ||
background-color: var(--card-background-color); | ||
color: var(--gray-100); | ||
padding: var(--space-sm); | ||
transition: scale 0.1s ease-in-out; | ||
&:hover { | ||
scale: 0.95; | ||
} | ||
} | ||
|
||
|
||
.popup_message_label { | ||
font-size: var(--font-size-md); | ||
font-weight: var(--font-weight-bold); | ||
font-variant-caps: all-petite-caps; | ||
color: var(--gray-500); | ||
margin: 0; | ||
font-family: var(--font-family-label); | ||
} | ||
.info { | ||
border-left: 5px solid var(--info-color); | ||
} | ||
|
||
.success { | ||
border-left: 5px solid var(--success-color); | ||
} | ||
|
||
.warning { | ||
border-left: 5px solid var(--warning-color); | ||
} | ||
|
||
.error { | ||
border-left: 5px solid var(--error-color); | ||
} |
62 changes: 62 additions & 0 deletions
62
src/lib/components/molecules/popup-message/popup-message.stories.tsx
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,62 @@ | ||
import React from 'react' | ||
import { PopupMessageProps, PopupMessageVariant, PopupMessage } from '.' | ||
import { objectValuesToControls } from '../../../storybook-utils' | ||
import { Meta } from '@storybook/react' | ||
import { StoryFn } from '@storybook/react' | ||
|
||
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export | ||
const meta: Meta<typeof PopupMessage> = { | ||
title: 'Molecules/PopupMessage', | ||
component: PopupMessage, | ||
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes | ||
argTypes: { | ||
label: { control: 'text' }, | ||
variant: { | ||
options: ['INFO', 'WARNING', 'ERROR', 'SUCCESS'], | ||
control: { | ||
type: 'select', | ||
label: { | ||
INFO: 'INFO', | ||
WARNING: 'WARNING', | ||
ERROR: 'ERROR', | ||
SUCCESS: 'SUCCESS', | ||
}, | ||
}, | ||
}, | ||
delay: { options: [0, 1, 5, 10], control: { type: 'select' }, defaultValue: 1 }, | ||
}, | ||
} | ||
|
||
export default meta | ||
|
||
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args | ||
const Template: StoryFn<typeof PopupMessage> = (args: PopupMessageProps) => ( | ||
<PopupMessage {...args}> | ||
<p className={'font-sans m-0'}>Popup message body goes here lorem ipsum dolor sit amet.</p> | ||
</PopupMessage> | ||
) | ||
|
||
export const Primary = Template.bind({}) | ||
// More on args: https://storybook.js.org/docs/react/writing-stories/args | ||
Primary.args = { | ||
label: 'Info', | ||
variant: 'INFO', | ||
} | ||
|
||
export const Warning = Template.bind({}) | ||
Warning.args = { | ||
label: 'Warning', | ||
variant: 'WARNING', | ||
} | ||
|
||
export const Error = Template.bind({}) | ||
Error.args = { | ||
label: 'Error', | ||
variant: 'ERROR', | ||
} | ||
|
||
export const Success = Template.bind({}) | ||
Success.args = { | ||
label: 'Success', | ||
variant: 'SUCCESS', | ||
} |
11 changes: 11 additions & 0 deletions
11
src/lib/components/molecules/popup-message/popup-message.test.tsx
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,11 @@ | ||
import { describe, it, expect } from 'vitest' | ||
import { render, screen } from '@testing-library/react' | ||
import { PopupMessage } from './index' | ||
|
||
describe('AtButton', () => { | ||
it('should render', async () => { | ||
const label = 'test button' | ||
render(<PopupMessage label={label} />) | ||
expect(screen.getByText(label)).toBeDefined() | ||
}) | ||
}) |
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
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