feat: Banner components #317
Conversation
The code changes introduce two new components, FwbBanner and FwbBannerCollapseButton, which are used for displaying a banner and a collapse button respectively. These components are added to the index.ts file for easier import and usage.
The code changes include adding the Banner component to the documentation. This component allows users to display a banner on their website. The Banner component is now listed in the navigation menu with a link to its documentation page.
WalkthroughThis update introduces a new "Banner" component to both the documentation and implementation within a Vue.js application. The update includes detailed guides for using the Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
Outside diff range, codebase verification and nitpick comments (1)
docs/components/banner/examples/FwbBannerBottomExample.vue (1)
1-3: Consider reducing the height of the container.The height of
25remmight be too large for some use cases. Consider making it configurable or reducing it.- <div class="vp-raw h-[25rem] overflow-y-scroll relative border border-gray-200 rounded-md dark:bg-gray-900 dark:border-gray-800"> + <div class="vp-raw h-[20rem] overflow-y-scroll relative border border-gray-200 rounded-md dark:bg-gray-900 dark:border-gray-800">
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (7)
- docs/.vitepress/config.mts (1 hunks)
- docs/components/banner.md (1 hunks)
- docs/components/banner/examples/FwbBannerBottomExample.vue (1 hunks)
- docs/components/banner/examples/FwbBannerDefaultExample.vue (1 hunks)
- src/components/FwbBanner/FwbBanner.vue (1 hunks)
- src/components/FwbBanner/FwbBannerCollapseButton.vue (1 hunks)
- src/index.ts (1 hunks)
Files skipped from review due to trivial changes (1)
- docs/.vitepress/config.mts
Additional context used
LanguageTool
docs/components/banner.md
[uncategorized] ~16-~16: This verb does not appear to agree with the subject. Consider using a different form.
Context: ... or bottom part of the page as the user scroll down the main content area. ## Default...(AI_EN_LECTOR_REPLACEMENT_VERB_AGREEMENT)
[misspelling] ~20-~20: Did you mean “free sample”?
Context: ...ea. ## Default sticky banner Use this free example to show a text message for announcement...(FREE_EXAMPLE)
[uncategorized] ~20-~20: You might be missing the article “an” here.
Context: ...free example to show a text message for announcement with a CTA link, an icon element and a ...(AI_EN_LECTOR_MISSING_DETERMINER_AN)
[uncategorized] ~55-~55: The preposition “on” seems more likely in this position.
Context: ...n be used to position the sticky banner to the bottom side of the page instead of ...(AI_EN_LECTOR_REPLACEMENT_PREPOSITION)
[uncategorized] ~88-~88: Possible missing comma found.
Context: ...# More Examples For more sticky banner examples you can check [banner sections](https:/...(AI_HYDRA_LEO_MISSING_COMMA)
Markdownlint
docs/components/banner.md
8-8: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time(MD001, heading-increment)
Additional comments not posted (8)
src/components/FwbBanner/FwbBanner.vue (2)
1-10: Template section looks good!The template is well-structured and follows accessibility guidelines.
12-38: Script section looks good!The TypeScript types, props with defaults, and computed property are correctly implemented.
Ensure that all props are used correctly throughout the codebase.
Verification successful
Props are used correctly in the
FwbBannercomponent.The
classandpositionprops are correctly applied in the instances ofFwbBannerfound in the codebase.
classis used to apply CSS classes.positionis set tobottomin one instance, which aligns with the definedBannerPositiontype.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all prop usages for `FwbBanner`. # Test: Search for the component usage. Expect: Correct prop usage. rg --type vue -A 5 $'<fwb-banner'Length of output: 62
Script:
#!/bin/bash # Description: Verify all prop usages for `FwbBanner`. # Find all Vue files and search for the component usage fd --extension vue --exec rg '<fwb-banner' {}Length of output: 188
Script:
#!/bin/bash # Description: Verify all prop usages for `FwbBanner`. # Find all Vue files and search for the component usage with more context lines fd --extension vue --exec rg -A 10 '<fwb-banner' {}Length of output: 1658
src/components/FwbBanner/FwbBannerCollapseButton.vue (2)
1-26: Template section looks good!The template is well-structured and follows accessibility guidelines.
28-56: Script section looks good!The TypeScript types, props with defaults, computed property, and event handler are correctly implemented.
Ensure that all props are used correctly throughout the codebase.
Verification successful
Let's re-verify the prop usage by correctly searching for the component in
.vuefiles.
Let's verify the usage of the
classprop in the found instances of<fwb-banner-collapse-button />.
The
classprop forFwbBannerCollapseButtonis not being used in the current codebase.
- Instances of
<fwb-banner-collapse-button />were found without anyclassprop usage.- This means the default class will always be applied.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all prop usages for `FwbBannerCollapseButton`. # Test: Search for the component usage. Expect: Correct prop usage. rg --type vue -A 5 $'<fwb-banner-collapse-button'Length of output: 78
Script:
#!/bin/bash # Description: Verify all prop usages for `FwbBannerCollapseButton`. # Find all .vue files and search for the component usage. fd --type f --extension vue --exec rg '<fwb-banner-collapse-button' {}Length of output: 152
Script:
#!/bin/bash # Description: Verify the usage of the `class` prop for `FwbBannerCollapseButton`. # Find all .vue files and search for the component usage with surrounding lines. fd --type f --extension vue --exec rg -A 5 -B 5 '<fwb-banner-collapse-button' {}Length of output: 566
docs/components/banner/examples/FwbBannerDefaultExample.vue (2)
92-94: Script section looks good!The imports are correct and necessary.
1-90: Template section looks good!The template is well-structured, follows accessibility guidelines, and uses the Banner and CollapseButton components correctly.
Ensure that the components are used correctly throughout the codebase.
Verification successful
Let's modify the shell script to search for the components in
.vuefiles without specifying the file type.
Let's modify the shell script to use
fdto find.vuefiles and then usergto search for the components within those files.
Template section looks good!
The template is well-structured, follows accessibility guidelines, and uses the
FwbBannerandFwbBannerCollapseButtoncomponents correctly. The verification confirms that these components are used appropriately throughout the codebase.
- Instances of
<fwb-banner>and<fwb-banner-collapse-button>are used correctly in multiple.vuefiles.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all usages of `FwbBanner` and `FwbBannerCollapseButton`. # Test: Search for the component usage. Expect: Correct usage. rg --type vue -A 5 $'<fwb-banner' rg --type vue -A 5 $'<fwb-banner-collapse-button'Length of output: 141
Script:
#!/bin/bash # Description: Verify all usages of `FwbBanner` and `FwbBannerCollapseButton`. # Test: Search for the component usage. Expect: Correct usage. rg -t vue -A 5 '<fwb-banner' rg -t vue -A 5 '<fwb-banner-collapse-button'Length of output: 133
Script:
#!/bin/bash # Description: Verify all usages of `FwbBanner` and `FwbBannerCollapseButton`. # Find all .vue files and search for the component usage within those files. fd -e vue -x rg -A 5 '<fwb-banner' {} fd -e vue -x rg -A 5 '<fwb-banner-collapse-button' {}Length of output: 1244
docs/components/banner.md (1)
1-4: Imports look good!The imports for the example components are correct.
src/index.ts (1)
10-11: Export statements look good!The export statements for
FwbBannerandFwbBannerCollapseButtonare correct and consistent with the existing structure.
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (7)
docs/components/banner.md (7)
6-14: Fix heading level.The heading level should increment by one level at a time.
- ## Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS + # Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS
16-22: Fix verb agreement.The verb "scroll" should be "scrolls" to agree with the subject "user."
- part of the page as the user scroll down + part of the page as the user scrolls downTools
LanguageTool
[misspelling] ~20-~20: Did you mean “free sample”?
Context: ...ea. ## Default sticky banner Use this free example to show a text message for an announcem...(FREE_EXAMPLE)
20-20: Fix article usage.The sentence is missing the article "an" before "announcement."
- text message for announcement + text message for an announcementTools
LanguageTool
[misspelling] ~20-~20: Did you mean “free sample”?
Context: ...ea. ## Default sticky banner Use this free example to show a text message for an announcem...(FREE_EXAMPLE)
25-50: Fix class attribute syntax.The class attribute in Vue should use
classinstead ofclassName.- <div className="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700"> + <div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
55-55: Use correct preposition.The preposition "on" seems more likely in this position.
- position the sticky banner to the bottom side + position the sticky banner on the bottom side
59-84: Fix class attribute syntax.The class attribute in Vue should use
classinstead ofclassName.- <div className="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700"> + <div class="flex w-full justify-between bg-gray-50 p-4 dark:bg-gray-700">
1-4: Remove unused importsThe components
FwbBannerDefaultExampleandFwbBannerBottomExampleare imported but not used anywhere in the file. Please remove these unused imports to clean up the code.
docs/components/banner.md: Lines 2-3Analysis chain
Ensure imports are necessary and used.
Verify that both
FwbBannerDefaultExampleandFwbBannerBottomExampleare used in the file. Unused imports should be removed.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify usage of imported components in the file. # Test: Search for the usage of imported components. Expect: Both components are used. rg --type markdown -A 5 'FwbBannerDefaultExample|FwbBannerBottomExample'Length of output: 618
Script:
#!/bin/bash # Description: Verify usage of imported components in the entire file. # Test: Search for the usage of imported components. Expect: Both components are used somewhere in the file. rg 'FwbBannerDefaultExample|FwbBannerBottomExample' docs/components/banner.mdLength of output: 245
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- docs/components/banner.md (1 hunks)
- docs/components/banner/examples/FwbBannerBottomExample.vue (1 hunks)
- docs/components/banner/examples/FwbBannerDefaultExample.vue (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- docs/components/banner/examples/FwbBannerBottomExample.vue
- docs/components/banner/examples/FwbBannerDefaultExample.vue
Additional context used
LanguageTool
docs/components/banner.md
[misspelling] ~20-~20: Did you mean “free sample”?
Context: ...ea. ## Default sticky banner Use this free example to show a text message for an announcem...(FREE_EXAMPLE)
There was a problem hiding this comment.
Hey @ogzcode
Thank you for another addition 🙌
Do we really need separate "FwbBannerCollapseButton" component?
I think it could be done with closable prop like we did it with alerts. then it should be simpler to use ;)
Apart from that everything else is 👌
|
@Sqrcz https://flowbite-vue.com/components/alert#additional-content |
|
Hi, I would start with something simple first and iterate later... let's make it just a simple X like in the main design for now. We can always improve it later... but it's good to have solid foundation working now... ;) |
|
@Sqrcz Thank you for your feedback. Good work.🫡 |
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range, codebase verification and nitpick comments (6)
docs/components/banner/examples/FwbBannerDefaultExample.vue (1)
7-11: Improve SVG accessibility.The SVG used in the example should have a descriptive
aria-labelortitlefor screen readers.- <svg class="w-6 h-6 text-gray-800 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" + <svg class="w-6 h-6 text-gray-800 dark:text-gray-400" aria-label="Icon description" xmlns="http://www.w3.org/2000/svg"docs/components/banner/examples/FwbBannerBottomExample.vue (1)
46-50: Improve SVG accessibility.The SVG used in the example should have a descriptive
aria-labelortitlefor screen readers.- <svg class="w-6 h-6 text-gray-800 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" + <svg class="w-6 h-6 text-gray-800 dark:text-gray-400" aria-label="Icon description" xmlns="http://www.w3.org/2000/svg"docs/components/banner.md (4)
8-8: Clarify the heading.The heading is quite long and could be broken into a main heading and a subheading for clarity.
## Use the banner component for marketing messages ### Show CTA buttons at the top or bottom using Tailwind CSS
16-16: Clarify the sentence structure.The sentence is long and could be broken into two for better readability.
- Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scrolls down the main content area. + Get started with the sticky banner component coded with Tailwind CSS and Flowbite. Use it to show marketing, informational, and CTA messages fixed to the top or bottom of the page as the user scrolls through the main content area.
20-20: Consider rephrasing for clarity.The phrase "free example" might be misleading. Consider rephrasing to clarify what is meant.
- Use this free example to show a text message for an announcement with a CTA link, an icon element and a close button to dismiss the banner. + Use this example to display a text message for an announcement with a CTA link, an icon element, and a close button to dismiss the banner.Tools
LanguageTool
[misspelling] ~20-~20: Did you mean “free sample”?
Context: ...ea. ## Default sticky banner Use this free example to show a text message for an announcem...(FREE_EXAMPLE)
81-81: Add a comma for clarity.Add a comma after "examples" for better readability.
- For more sticky banner examples you can check [banner sections](https://flowbite.com/blocks/marketing/banner/) from Flowbite Blocks. + For more sticky banner examples, you can check [banner sections](https://flowbite.com/blocks/marketing/banner/) from Flowbite Blocks.Tools
LanguageTool
[uncategorized] ~81-~81: Possible missing comma found.
Context: ...# More Examples For more sticky banner examples you can check [banner sections](https:/...(AI_HYDRA_LEO_MISSING_COMMA)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- docs/components/banner.md (1 hunks)
- docs/components/banner/examples/FwbBannerBottomExample.vue (1 hunks)
- docs/components/banner/examples/FwbBannerDefaultExample.vue (1 hunks)
- src/components/FwbBanner/FwbBanner.vue (1 hunks)
- src/index.ts (1 hunks)
Additional context used
GitHub Check: lint (18.x)
docs/components/banner/examples/FwbBannerBottomExample.vue
[warning] 3-3:
Expected 1 line break before closing bracket, but no line breaks found
[warning] 6-6:
'class' should be on a new line
[warning] 18-18:
'class' should be on a new line
[warning] 20-20:
'aria-label' should be on a new line
[warning] 20-20:
Expected 1 line break before closing bracket, but no line breaks found
[warning] 37-37:
Expected a linebreak before this attribute
[warning] 37-37:
'width' should be on a new line
[warning] 37-37:
'height' should be on a new line
[warning] 38-38:
Expected indentation of 14 spaces but found 8 spaces
[warning] 38-38:
'src' should be on a new line
LanguageTool
docs/components/banner.md
[misspelling] ~20-~20: Did you mean “free sample”?
Context: ...ea. ## Default sticky banner Use this free example to show a text message for an announcem...(FREE_EXAMPLE)
[uncategorized] ~81-~81: Possible missing comma found.
Context: ...# More Examples For more sticky banner examples you can check [banner sections](https:/...(AI_HYDRA_LEO_MISSING_COMMA)
Additional comments not posted (5)
src/components/FwbBanner/FwbBanner.vue (2)
2-2: Ensure accessibility roles and attributes are appropriate.The
role="banner"is used correctly, but ensure that all necessary ARIA attributes are included for accessibility. Consider addingaria-liveif the content is dynamic.
26-30: UsewithDefaultscorrectly.Ensure that
withDefaultsis used correctly for setting default prop values. Verify thatdefinePropsis used as intended in the context of Vue 3.Verification successful
Consistent Usage of
withDefaultsanddefinePropsVerifiedThe usage of
withDefaultsanddefinePropsacross various components in the codebase appears consistent. The pattern of defining props with default values is used similarly in multiple components, suggesting a standardized approach.
- Instances found in components include
LinkProps,BannerProps,HeadingProps,TextareaProps,TooltipProps, and many others.No discrepancies were detected in the usage pattern.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify the usage of `withDefaults` and `defineProps` in other components to ensure consistency. rg --type vue 'withDefaults\(defineProps'Length of output: 71
Script:
#!/bin/bash # Find all .vue files and search for the usage of `withDefaults` and `defineProps`. fd --extension vue --exec rg 'withDefaults\(defineProps' {}Length of output: 2038
docs/components/banner/examples/FwbBannerDefaultExample.vue (1)
4-23: Ensure example demonstrates accessibility and best practices.The example demonstrates the
closablefeature of the banner. Ensure that all interactive elements are accessible and that the example clearly illustrates the component's usage.docs/components/banner/examples/FwbBannerBottomExample.vue (1)
43-61: Ensure example demonstrates accessibility and best practices.The example demonstrates the
positionandclosablefeatures of the banner. Ensure that all interactive elements are accessible and that the example clearly illustrates the component's usage.src/index.ts (1)
10-10: Export addition approved.The export statement for
FwbBanneris correctly added, following the established pattern in the file. This change enhances the module's functionality by making theFwbBannercomponent accessible for import.
| const handleCollapse = (e: MouseEvent) => { | ||
| const collapseButton = e.target as HTMLElement | ||
| const banner = collapseButton.closest('[role="banner"]') as HTMLElement | null | ||
|
|
||
| if (banner) { | ||
| banner.remove() | ||
| } | ||
| } |
There was a problem hiding this comment.
Improve the collapse function for better performance.
The handleCollapse function removes the banner element from the DOM. Consider emitting an event instead, allowing the parent component to handle the removal, which can be more flexible and testable.
- const handleCollapse = (e: MouseEvent) => {
- const collapseButton = e.target as HTMLElement
- const banner = collapseButton.closest('[role="banner"]') as HTMLElement | null
- if (banner) {
- banner.remove()
- }
+ const handleCollapse = () => {
+ emit('collapse')
}In the parent component:
<fwb-banner @collapse="handleBannerCollapse" />| <button v-if="closable" :class="defaultCollapseButtonClass" aria-label="Collapse" type="button" @click="handleCollapse"> | ||
| <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" | ||
| viewBox="0 0 24 24"> | ||
| <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | ||
| d="M6 18 17.94 6M18 18 6.06 6" /> | ||
| </svg> | ||
| </button> |
There was a problem hiding this comment.
Consider making the close button more accessible.
The close button uses an SVG for the icon. Ensure the button is accessible by providing a clear aria-label and considering keyboard accessibility.
- <button v-if="closable" :class="defaultCollapseButtonClass" aria-label="Collapse" type="button" @click="handleCollapse">
+ <button v-if="closable" :class="defaultCollapseButtonClass" aria-label="Close banner" type="button" @click="handleCollapse" tabindex="0">Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button v-if="closable" :class="defaultCollapseButtonClass" aria-label="Collapse" type="button" @click="handleCollapse"> | |
| <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" | |
| viewBox="0 0 24 24"> | |
| <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M6 18 17.94 6M18 18 6.06 6" /> | |
| </svg> | |
| </button> | |
| <button v-if="closable" :class="defaultCollapseButtonClass" aria-label="Close banner" type="button" @click="handleCollapse" tabindex="0"> | |
| <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" | |
| viewBox="0 0 24 24"> | |
| <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M6 18 17.94 6M18 18 6.06 6" /> | |
| </svg> | |
| </button> |
#207
Hi,
I hope the component turned out the way you wanted.
I'll be waiting for your feedback and advice. Have a nice day.
@Sqrcz @cogor @zoltanszogyenyi @robert1508
Summary by CodeRabbit
New Features
fwb-bannercomponent, including usage examples.Bug Fixes
Documentation
Chores
FwbBannerandFwbBannerCollapseButton.