Skip to content

Commit 0ac8495

Browse files
mtorromeomtorromeo
committed
feat(Banner): implemented component
1 parent 7831557 commit 0ac8495

File tree

3 files changed

+124
-0
lines changed

3 files changed

+124
-0
lines changed

‎apps/docs/src/stories/Components/Banner.story.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<doc-page title="Banner">
3+
<template #description>A <b>banner</b> is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.</template>
4+
5+
<template #apidocs>
6+
<component-info src="packages/core/src/components/Banner.vue" />
7+
</template>
8+
9+
<story-canvas title="Basic">
10+
<pf-banner>Default banner</pf-banner>
11+
<br>
12+
<pf-banner variant="blue">Blue banner</pf-banner>
13+
<br>
14+
<pf-banner variant="red">Red banner</pf-banner>
15+
<br>
16+
<pf-banner variant="green">Green banner</pf-banner>
17+
<br>
18+
<pf-banner variant="gold">Gold banner</pf-banner>
19+
</story-canvas>
20+
21+
<story-canvas title="Status">
22+
<pf-banner screen-reader-text="Default banner">
23+
<pf-flex space-items="sm">
24+
<pf-flex-item>
25+
<bell-icon />
26+
</pf-flex-item>
27+
<pf-flex-item>Default banner</pf-flex-item>
28+
</pf-flex>
29+
</pf-banner>
30+
<br>
31+
<pf-banner variant="blue" screen-reader-text="Blue banner">
32+
<pf-flex space-items="sm">
33+
<pf-flex-item>
34+
<circle-info-icon />
35+
</pf-flex-item>
36+
<pf-flex-item>Blue banner</pf-flex-item>
37+
</pf-flex>
38+
</pf-banner>
39+
<br>
40+
<pf-banner variant="red" screen-reader-text="Red banner">
41+
<pf-flex space-items="sm">
42+
<pf-flex-item>
43+
<circle-exclamation-icon />
44+
</pf-flex-item>
45+
<pf-flex-item>Red banner</pf-flex-item>
46+
</pf-flex>
47+
</pf-banner>
48+
<br>
49+
<pf-banner variant="green" screen-reader-text="Green banner">
50+
<pf-flex space-items="sm">
51+
<pf-flex-item>
52+
<circle-check-icon />
53+
</pf-flex-item>
54+
<pf-flex-item>Green banner</pf-flex-item>
55+
</pf-flex>
56+
</pf-banner>
57+
<br>
58+
<pf-banner variant="gold" screen-reader-text="Gold banner">
59+
<pf-flex space-items="sm">
60+
<pf-flex-item>
61+
<triangle-exclamation-icon />
62+
</pf-flex-item>
63+
<pf-flex-item>Gold banner</pf-flex-item>
64+
</pf-flex>
65+
</pf-banner>
66+
</story-canvas>
67+
</doc-page>
68+
</template>
69+
70+
<script lang="ts" setup>
71+
import BellIcon from '@vue-patternfly/icons/bell-icon';
72+
import CircleInfoIcon from '@vue-patternfly/icons/circle-info-icon';
73+
import CircleExclamationIcon from '@vue-patternfly/icons/circle-exclamation-icon';
74+
import CircleCheckIcon from '@vue-patternfly/icons/circle-check-icon';
75+
import TriangleExclamationIcon from '@vue-patternfly/icons/triangle-exclamation-icon';
76+
</script>

‎packages/core/src/components/Banner.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div
3+
v-bind="{...ouiaProps, ...$attrs}"
4+
:class="[styles.banner, {
5+
[styles.modifiers.sticky]: sticky,
6+
[styles.modifiers[variant as 'blue' | 'red' | 'green' | 'gold']]: variant !== 'default',
7+
}]"
8+
>
9+
<span v-if="screenReaderText || $slots['screen-reader-text']" class="pf-v5-screen-reader">
10+
<slot name="screen-reader-text">
11+
{{ screenReaderText }}
12+
</slot>
13+
</span>
14+
<slot />
15+
</div>
16+
</template>
17+
18+
<script lang="ts" setup>
19+
import styles from '@patternfly/react-styles/css/components/Banner/banner';
20+
import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
21+
import type { HTMLAttributes } from 'vue';
22+
23+
defineOptions({
24+
name: 'PfBanner',
25+
});
26+
27+
export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
28+
/** If set to true, the banner sticks to the top of its container */
29+
sticky?: boolean;
30+
/** Text announced by screen readers to indicate the type of banner. This prop should only
31+
* be passed in when the banner conveys status/severity.
32+
*/
33+
screenReaderText?: string;
34+
/** Variant styles for the banner. */
35+
variant?: 'default' | 'blue' | 'red' | 'green' | 'gold';
36+
}
37+
38+
const props = withDefaults(defineProps<Props>(), {
39+
variant: 'default',
40+
});
41+
const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
42+
43+
defineSlots<{
44+
default: (props?: Record<never, never>) => any;
45+
'screen-reader-text'?: (props?: Record<never, never>) => any;
46+
}>();
47+
</script>

‎packages/core/src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export { default as PfAvatar } from './Avatar.vue';
22
export { default as PfBackdrop } from './Backdrop.vue';
33
export { default as PfBackgroundImage } from './BackgroundImage.vue';
44
export { default as PfBadge } from './Badge.vue';
5+
export { default as PfBanner } from './Banner.vue';
56
export { default as PfBrand } from './Brand.vue';
67
export { default as PfButton } from './Button.vue';
78
export { default as PfCheckbox } from './Checkbox.vue';

0 commit comments

Comments
 (0)