- Text
-
-
- This tag is not being preserved yet. Click start preservation to
- enable writing preservation records.
-
-
-
-
- Icon + Text
-
-
-
-
-
- We are in the making of a new design for this page.
-
-
-
-
-
-
-
- Some warning information.
-
-
- Text + Action
-
-
- You are signed on with another account than Equinor account:
- name.lastname@mail.com.
-
-
-
-
-
-
-
-
-
- You are signed on with another account than Equinor account:
- name.lastname@mail.com. This means you have to do something to be able
- to use this service.
-
-
-
-
-
-
-
-
- Icon + Text + Actions
-
-
-
-
-
- This tag is not being preserved yet. Click start preservation to
- enable writing preservation records.
-
-
-
-
-
-
-
-
-
-
-
- I'm such a really really long message about some sad saving news
- that there is not enough space for the actions on my left. That's
- why the actions have been located at the bottom using the placement
- prop instead.
-
-
-
-
-
-
-
- )
-}
diff --git a/apps/storybook-react/stories/Banner.stories.tsx b/apps/storybook-react/stories/Banner.stories.tsx
new file mode 100644
index 0000000000..b209697dad
--- /dev/null
+++ b/apps/storybook-react/stories/Banner.stories.tsx
@@ -0,0 +1,115 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Meta, Story } from '@storybook/react'
+import { Banner, Icon, Button, BannerProps } from '@equinor/eds-core-react'
+import { save, thumbs_up, thumbs_down, mood_sad } from '@equinor/eds-icons'
+
+const icons = {
+ save,
+ thumbs_up,
+ thumbs_down,
+ mood_sad,
+}
+
+const { BannerIcon, BannerMessage, BannerActions } = Banner
+Icon.add(icons)
+
+const InlineBannerActions = styled(BannerActions)`
+ display: flex;
+`
+
+export default {
+ title: 'Components/Banner',
+ component: Banner,
+ subcomponents: { BannerMessage, BannerIcon, BannerActions },
+} as Meta
+
+export const Basic: Story = (args) => (
+
+
+ This tag is not being preserved yet. Click start preservation to enable
+ writing preservation records.
+
+
+)
+
+export const IconAndText: Story = (args) => (
+ <>
+
+
+
+
+
+ We are in the making of a new design for this page.
+
+
+
+
+
+
+ Some warning information.
+
+
+)
+
+export const TextAndAction: Story = (args) => (
+ <>
+
+
+ You are signed on with another account than Equinor account:
+ name.lastname@mail.com.
+
+
+
+
+
+
+
+
+ You are signed on with another account than Equinor account:
+ name.lastname@mail.com. This means you have to do something to be able
+ to use this service.
+
+
+
+
+
+
+
+)
+
+export const IconAndTextAndActions: Story = (args) => (
+ <>
+
+
+
+
+
+ This tag is not being preserved yet. Click start preservation to enable
+ writing preservation records.
+
+
+
+
+
+
+
+
+
+
+ I'm such a really really long message about some sad saving news
+ that there is not enough space for the actions on my left. That's
+ why the actions have been located at the bottom using the placement prop
+ instead.
+
+
+
+
+
+
+
+)
diff --git a/libraries/core-react/src/Banner/Banner.tsx b/libraries/core-react/src/Banner/Banner.tsx
index 78481b2690..89a78b478e 100644
--- a/libraries/core-react/src/Banner/Banner.tsx
+++ b/libraries/core-react/src/Banner/Banner.tsx
@@ -25,11 +25,11 @@ const NonMarginDivider = styled(Divider)`
height: 2px;
`
-type Props = {
+export type BannerProps = {
children: ReactNode
} & HTMLAttributes
-export const Banner: FC = ({ children, className, ...props }) => {
+export const Banner: FC = ({ children, className, ...props }) => {
const childrenWhereBannerIcon: boolean[] = React.Children.map(
children,
(child) => {
diff --git a/libraries/core-react/src/Banner/BannerActions.tsx b/libraries/core-react/src/Banner/BannerActions.tsx
index eaaea3c4a1..38619b0774 100644
--- a/libraries/core-react/src/Banner/BannerActions.tsx
+++ b/libraries/core-react/src/Banner/BannerActions.tsx
@@ -7,6 +7,7 @@ const { enabled } = tokens
type BannerActionsPlacement = 'bottom' | 'left'
type StyledBannerActionsProps = {
+ /** Where to place the actions */
placement: BannerActionsPlacement
}
diff --git a/libraries/core-react/src/Banner/BannerMessage.tsx b/libraries/core-react/src/Banner/BannerMessage.tsx
index 56f6edbb82..3f0b25573e 100644
--- a/libraries/core-react/src/Banner/BannerMessage.tsx
+++ b/libraries/core-react/src/Banner/BannerMessage.tsx
@@ -5,12 +5,15 @@ import { TypographyProps } from '../Typography/Typography'
const StyledBannerMessage = styled(Typography)``
-type Props = {
+export type BannerMessageProps = {
/** Text content */
children: string
} & Omit
-export const BannerMessage: FC = ({ children, ...props }) => {
+export const BannerMessage: FC = ({
+ children,
+ ...props
+}) => {
return (
{children}
diff --git a/libraries/core-react/src/Banner/index.ts b/libraries/core-react/src/Banner/index.ts
index 9e288505f3..73f84826b3 100644
--- a/libraries/core-react/src/Banner/index.ts
+++ b/libraries/core-react/src/Banner/index.ts
@@ -15,4 +15,4 @@ Banner.BannerIcon = BannerIcon
Banner.BannerMessage = BannerMessage
Banner.BannerActions = BannerActions
-export { Banner }
+export { Banner, BannerProps }
diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
index 62543c5b6c..99dc013646 100644
--- a/libraries/core-react/src/index.ts
+++ b/libraries/core-react/src/index.ts
@@ -21,7 +21,7 @@ export { Slider } from './Slider'
export { Tooltip } from './Tooltip'
export { Snackbar } from './Snackbar'
export { Popover } from './Popover'
-export { Banner } from './Banner'
+export * from './Banner'
export { Radio, Checkbox, Switch } from './SelectionControls'
export {
DotProgress,