-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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
Top banner #60
Top banner #60
Changes from 3 commits
9a3939f
a3f0dc8
66b6e80
4de33b7
2c69e9f
2c8df3a
5e8bc34
338f56c
ca274a5
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import React from 'react' | ||
import { TopBanner, BannerType } from './' | ||
import { Button } from '../Button' | ||
|
||
export default { | ||
title: 'Components/TopBanner', | ||
component: TopBanner, | ||
argTypes: { | ||
type: { | ||
options: BannerType, | ||
control: { type: 'select' }, | ||
}, | ||
}, | ||
} | ||
|
||
const Template = (args) => <TopBanner {...args} /> | ||
|
||
export const Default = Template.bind({}) | ||
Default.args = { | ||
visible: true, | ||
content: 'This is default type banner.', | ||
} | ||
|
||
export const Success = Template.bind({}) | ||
Success.args = { | ||
visible: true, | ||
content: 'This is success type banner.', | ||
type: 'success', | ||
} | ||
|
||
export const Danger = Template.bind({}) | ||
Danger.args = { | ||
visible: true, | ||
content: 'This is danger type banner.', | ||
type: 'danger', | ||
} | ||
|
||
export const Warning = Template.bind({}) | ||
Warning.args = { | ||
visible: true, | ||
content: 'This is warning type banner.', | ||
type: 'warning', | ||
} | ||
|
||
export const BannerWithButton = Template.bind({}) | ||
BannerWithButton.args = { | ||
visible: true, | ||
content: 'This is banner with action button.', | ||
type: 'default', | ||
buttons: [ | ||
<Button | ||
label="Alert" | ||
key="button" | ||
onClick={() => alert('Banner button clicked!')} | ||
size="small" | ||
type="link" | ||
/>, | ||
], | ||
} | ||
|
||
export const BannerWithLoading = Template.bind({}) | ||
BannerWithLoading.args = { | ||
visible: true, | ||
content: 'This is banner with action button.', | ||
type: 'danger', | ||
loading: true, | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from 'react' | ||
import { Block } from '../Block/index' | ||
import { Icon } from '../Icon/index' | ||
import { Text } from '../Typography/index' | ||
import './topbanner.scss' | ||
|
||
export const BannerType = ['warning', 'danger', 'success', 'default'] | ||
export const TopBanner = ({ | ||
type = 'default', | ||
content, | ||
buttons, | ||
loading, | ||
visible, | ||
loadingText = 'Loading', | ||
}) => { | ||
return visible ? ( | ||
<Block | ||
className={`top-banner ${type}`} | ||
display="flex" | ||
justifyContent="center" | ||
alignItems="center" | ||
> | ||
{loading && ( | ||
<Block> | ||
<Icon.Loading size={16} color="white" /> | ||
</Block> | ||
)} | ||
<Text color="white">{loading ? loadingText : content}</Text> | ||
{!loading && buttons && ( | ||
<Block display="flex" className="top-banner-buttons-container"> | ||
{buttons.map((button) => button)} | ||
</Block> | ||
)} | ||
</Block> | ||
) : null | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
.top-banner { | ||
height: 36px; | ||
gap: 4px; | ||
&-buttons-container { | ||
gap: 16px; | ||
// margin-left: 4px; | ||
|
||
.sg.cnto-btn.contacto-button--small { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we move this style to Button.scss file? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. May be add a new button type <Button type="link" variant="underline" color="white" /> |
||
height: 24px; | ||
padding: 0; | ||
min-width: 0; | ||
font-weight: 600; | ||
color: white; | ||
text-decoration: underline; | ||
} | ||
.sg.ant-btn.cnto-btn.contacto-button--link:hover { | ||
color: white; | ||
} | ||
} | ||
|
||
&.default { | ||
background-color: var(--primary-text-color); | ||
} | ||
|
||
&.success { | ||
background-color: var(--success-color); | ||
} | ||
|
||
&.danger { | ||
background-color: var(--danger-color); | ||
} | ||
|
||
&.warning { | ||
background-color: var(--warning-color); | ||
} | ||
} | ||
|
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.
Icon.Loading has
strokeWidth
andtrackColor
props. You can use it if you want. Not sure if color="white" is what we want.