Skip to content

Commit

Permalink
Banner: update styling.
Browse files Browse the repository at this point in the history
  • Loading branch information
mkrause committed Dec 26, 2024
1 parent d039e05 commit 9472d15
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 162 deletions.
104 changes: 47 additions & 57 deletions src/components/containers/Banner/Banner.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
--bk-banner-color-foreground: #{bk.$theme-banner-informational-border-default};
--bk-banner-color-background: #{bk.$theme-banner-informational-background-default};
--bk-banner-border-radius: #{bk.$radius-2};
--bk-banner-indent: 30px;
--bk-banner-indent: #{bk.$spacing-9};

overflow: hidden;

Expand All @@ -26,7 +26,8 @@

display: flex;
flex-direction: row;
align-items: center;
align-items: flex-start;
gap: bk.$spacing-4;

min-width: 0;

Expand All @@ -41,93 +42,82 @@
display: flex;
flex-flow: row wrap;
gap: bk.$spacing-1;
//@include bk.text-one-line;

.bk-banner__title {
margin-inline-start: calc(-1 * var(--bk-banner-indent));
margin-inline-start: calc(-1 * (bk.$spacing-2 + 1.125em));

min-width: 0;
display: flex;
flex-direction: row;
gap: bk.$spacing-2;
align-items: center;

//@include bk.text-one-line;
font-weight: bk.$font-weight-semibold;

.bk-banner__title__text {
@include bk.text-one-line;
}

.bk-banner__title__icon {
flex-shrink: 0;
color: var(--bk-banner-color-foreground);
}

.bk-banner__title__text {
@include bk.text-one-line;
}
}

.bk-banner__message {
--keep: ;
}
}

.bk-banner__button {
padding: 0;
margin-right: bk.$spacing-5;
}

.bk-banner__action {
height: bk.$spacing-5;
.bk-banner__actions {
display: flex;
flex-flow: row-reverse wrap;
align-items: center;
gap: bk.$spacing-1 bk.$spacing-7;

button {
border: 0;
font-weight: bk.$font-weight-semibold;
padding-bottom: 0;
padding-top: 0;
> * {
// Keep each item to a max of 1lh, so that in the case of all items being on one line, all the items
// are properly aligned with the title (which implicitly has height `1lh`).
max-height: 1lh;
}
}

.bk-banner__close-button {
flex-shrink: 0;

color: bk.$theme-banner-icon-default;
font-size: 1.2em;
padding: bk.$spacing-1;
.bk-banner__action {
display: flex;
flex-direction: row;
align-items: center;

button {
border: 0;
font-weight: bk.$font-weight-semibold;
padding: 0;
}
}

.bk-banner__close-button {
flex: none;

display: flex;

font-size: 1.2em;
color: bk.$theme-banner-icon-default;
}
}


// Variants
/*
&.bk-banner--informational {
background-color: bk.$theme-banner-informational-background-default;
border-color: bk.$theme-banner-informational-border-default;
.bk-banner__icon {
color: bk.$color-blueberry-400;
}
}
&.bk-banner--success {
background-color: bk.$theme-banner-success-background-default;
border-color: bk.$theme-banner-success-border-default;
.bk-banner__icon {
color: bk.$color-apple-400;
}
--bk-banner-color-foreground: #{bk.$theme-banner-informational-border-default};
--bk-banner-color-background: #{bk.$theme-banner-informational-background-default};
}
&.bk-banner--warning {
background-color: bk.$theme-banner-warning-background-default;
border-color: bk.$theme-banner-warning-border-default;
.bk-banner__icon {
color: bk.$color-orange-400;
}
--bk-banner-color-foreground: #{bk.$theme-banner-warning-border-default};
--bk-banner-color-background: #{bk.$theme-banner-warning-background-default};
}
&.bk-banner--error {
background-color: bk.$theme-banner-alert-background-default;
border-color: bk.$theme-banner-alert-border-default;
.bk-banner__icon {
color: bk.$color-cherry-400;
}
--bk-banner-color-foreground: #{bk.$theme-banner-alert-border-default};
--bk-banner-color-background: #{bk.$theme-banner-alert-background-default};
}
&.bk-banner--success {
--bk-banner-color-foreground: #{bk.$theme-banner-success-border-default};
--bk-banner-color-background: #{bk.$theme-banner-success-background-default};
}
*/
}
}
108 changes: 11 additions & 97 deletions src/components/containers/Banner/Banner.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,127 +98,41 @@ export const BannerWithTitleOverflowAndTextWrap: Story = {
};

export const BannerInformational: Story = {
name: 'Success',
args: {
title: 'Banner title',
closeButton: true,
variant: 'informational',
},
};

export const BannerSuccess: Story = {
name: 'Success',
args: {
title: 'Banner title',
title: loremIpsum(),
message: <LoremIpsum/>,
closeButton: true,
variant: 'success',
},
};

export const BannerSuccessWithNoCloseButton: Story = {
name: 'Success with no close button',
args: {
title: 'Banner title',
closeButton: false,
variant: 'success',
actions: <BannerActionExample/>,
},
};

export const BannerSuccessWithMessage: Story = {
name: 'Success with message',
export const BannerSuccess: Story = {
args: {
title: 'Banner title',
message: 'Message',
closeButton: true,
variant: 'success',
},
};

export const BannerSuccessWithButton: Story = {
name: 'Success with button',
args: {
title: 'Banner',
message: 'Message text',
title: loremIpsum(),
message: <LoremIpsum/>,
closeButton: true,
variant: 'success',
actions: <BannerActionExample/>,
},
};

export const BannerWarning: Story = {
name: 'Warning',
args: {
title: 'Banner title',
closeButton: true,
variant: 'warning',
},
};

export const BannerWarningWithNoCloseButton: Story = {
name: 'Warning with no close button',
args: {
title: 'Banner title',
closeButton: false,
variant: 'warning',
},
};

export const BannerWarningWithMessage: Story = {
name: 'Warning with message',
args: {
title: 'Banner title',
message: 'Message',
closeButton: true,
variant: 'warning',
},
};

export const BannerWarningWithButton: Story = {
name: 'Warning with button',
args: {
title: 'Banner',
message: 'Message text',
title: loremIpsum(),
message: <LoremIpsum/>,
closeButton: true,
variant: 'warning',
actions: <BannerActionExample/>,
},
};

export const BannerAlert: Story = {
name: 'Alert',
export const BannerError: Story = {
args: {
title: 'Banner title',
closeButton: true,
variant: 'error',
},
};

export const BannerAlertWithNoCloseButton: Story = {
name: 'Alert with no close button',
args: {
title: 'Banner title',
closeButton: false,
variant: 'error',
},
};

export const BannerAlertWithMessage: Story = {
name: 'Alert with message',
args: {
title: 'Banner title',
message: 'Message',
closeButton: true,
variant: 'error',
},
};

export const BannerAlertWithButton: Story = {
name: 'Alert with button',
args: {
title: 'Banner',
message: 'Message text',
title: loremIpsum(),
message: <LoremIpsum/>,
closeButton: true,
variant: 'error',
actions: <BannerActionExample/>,
},
};
19 changes: 11 additions & 8 deletions src/components/containers/Banner/Banner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ export const Banner = (props: BannerProps) => {

return (
<div
role="alert" // Note: if the banner is not time-sensitive, this may need to be overridden (depends on use case)
// Note: `role=alert` implies the banner is time-sensitive. If the banner is not time-sensitive, this may need to
// be overridden with a more appropriate role (depends on use case).
role="alert"
{...propsRest}
className={cx(
'bk',
Expand All @@ -100,13 +102,14 @@ export const Banner = (props: BannerProps) => {
}
</div>

{actions}

{closeButton &&
<Button className={cl['bk-banner__close-button']} onPress={onClose} aria-label="Close banner">
<Icon icon="cross"/>
</Button>
}
<div className={cl['bk-banner__actions']}>
{closeButton &&
<Button unstyled className={cl['bk-banner__close-button']} onPress={onClose} aria-label="Close banner">
<Icon icon="cross"/>
</Button>
}
{actions}
</div>
</div>
);
};
Expand Down

0 comments on commit 9472d15

Please sign in to comment.