Skip to content
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.

Sign up for GitHub

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

Banner Component #90

Merged
merged 16 commits into from
Sep 6, 2023
Merged

Banner Component #90

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
c8a4be2
feat: intial banner component
Twonarly1 Sep 5, 2023
2d75847
refactor(banner): add optional close prop
Twonarly1 Sep 5, 2023
e7bcb02
feat: add open state for banner component
Twonarly1 Sep 5, 2023
0b94342
refactor(banner): override button props and storybook rendering for s…
Twonarly1 Sep 5, 2023
c52f491
chore: add initial spec
Twonarly1 Sep 6, 2023
4c4331a
Merge branch 'master' into feature/banner-component
Twonarly1 Sep 6, 2023
a5f4795
feat: add slots to recipe and spec file
Twonarly1 Sep 6, 2023
53e8817
feat: add example to next/example
Twonarly1 Sep 6, 2023
58ec7b5
refactor: banner recipe and variants
Twonarly1 Sep 6, 2023
2b921d6
feat: add banner component to example vite-react
Twonarly1 Sep 6, 2023
0619f23
chore: add wrapper and override styles for next example
Twonarly1 Sep 6, 2023
b0dbafe
chore: arrange banner demo component to match react example
Twonarly1 Sep 6, 2023
7679d50
feat: create changeset
Twonarly1 Sep 6, 2023
f811673
chore: change testing story to closeable
Twonarly1 Sep 6, 2023
f10628d
chore: add wrapper for banner and remove recipe default positioning
Twonarly1 Sep 6, 2023
48f8ba9
chore: add relative positioning to default recipe and remove unecessa…
Twonarly1 Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor(banner): override button props and storybook rendering for s… 
…izes
  • Loading branch information
@Twonarly1
Twonarly1 committed Sep 5, 2023
commit 0b94342a580c01b1c2d9d0ee73c6fa699f93ea1f
14 changes: 8 additions & 6 deletions src/components/client/core/Banner/Banner.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Banner } from "components/client";
import { Flex } from "generated/panda/jsx";
import { VStack } from "generated/panda/jsx";

import type { Meta, StoryObj } from "@storybook/react";

Expand All @@ -25,15 +25,17 @@ export const Outline: Story = {

export const Sizes: Story = {
render: () => (
<Flex gap={2} alignItems="center">
<Banner visible size="sm">
<VStack>
<Banner position="relative" visible size="sm">
Banner
</Banner>
<Banner visible>Banner</Banner>
<Banner visible size="lg">
<Banner position="relative" visible>
Banner
</Banner>
</Flex>
<Banner position="relative" visible size="lg">
Banner
</Banner>
</VStack>
),
};

Expand Down
6 changes: 4 additions & 2 deletions src/components/client/core/Banner/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,18 @@ const Banner = ({ children, variant, size, visible, ...props }: Props) => {
{children}
{visible && (
<Button
variant="ghost"
p={0}
onClick={() => setIsOpen(false)}
_focus={{
outline: "none",
}}
bgColor={{
base: "inherit",
_hover: "bg.subtle",
_hover: "none",
}}
>
<Icon as={CloseIcon} color="fg.default" />
<Icon as={CloseIcon} color="accent.fg" />
</Button>
)}
</panda.div>
Expand Down