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

Jump to bottom

chore(Button): Revert Button upgrade commits #259

Merged
merged 2 commits into from
Sep 18, 2024
Merged

chore(Button): Revert Button upgrade commits #259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ebb3db
Revert "refactor(Button): enable loading state for button (#253)"
araujobarret Sep 18, 2024
5d82b19
Revert "feat(Button): swaps the current button by the new button usin…
araujobarret Sep 18, 2024
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
1 change: 1 addition & 0 deletions .storybook/storybook.requires.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const getStories = () => {
require("../src/elements/Banner/Banner.stories.tsx"),
require("../src/elements/Box/Box.stories.tsx"),
require("../src/elements/Button/Button.stories.tsx"),
require("../src/elements/ButtonNew/Button.stories.tsx"),
require("../src/elements/Checkbox/Checkbox.stories.tsx"),
require("../src/elements/Collapse/Collapse.stories.tsx"),
require("../src/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.tsx"),
Expand Down
172 changes: 16 additions & 156 deletions src/elements/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import { capitalize } from "lodash"
import { useState } from "react"
import { Button as RNButton } from "react-native"
import { Button, ButtonProps } from "./Button"
import { CTAButton } from "./CTAButton"
import { FollowButton } from "./FollowButton"
import { DataList, List } from "../../storybook/helpers"
import { BellIcon, LinkIcon } from "../../svgs"
import { Wrap } from "../../utils/Wrap"
import { NoUndefined } from "../../utils/types"
import { Box } from "../Box"
import { Flex } from "../Flex"
import { Spacer } from "../Spacer"
import { LinkText } from "../Text"

const sizes: Array<NoUndefined<ButtonProps["size"]>> = ["small", "large"]
Expand Down Expand Up @@ -43,6 +37,7 @@ export const Sizes = () => (

export const States = () => {
const [variant, setVariant] = useState<NoUndefined<ButtonProps["variant"]>>("fillDark")

return (
<List>
<Flex flexDirection="row" flexWrap="wrap" px={2}>
Expand All @@ -61,9 +56,6 @@ export const States = () => {
<Button variant={variant} onPress={() => console.log(`tapped`)} loading>
Loading
</Button>
<Button variant={variant} onPress={() => console.log(`tapped`)} testOnly_pressed>
Pressed
</Button>
</List>
)
}
Expand All @@ -88,153 +80,21 @@ export const Variants = () => (
export const VariantsLoading = () => (
<DataList
data={variants}
renderItem={({ item: variant }) => (
<Wrap if={variant === "outlineLight"} key={`variant_loading_${variant}`}>
<Flex backgroundColor="black100" p={1}>
<Wrap.Content>
<Button variant={variant} loading onPress={() => console.log(`tapped ${variant}`)}>
{variant}
</Button>
</Wrap.Content>
renderItem={({ item: variant }) => {
if (variant !== "outlineLight") {
return (
<Button variant={variant} loading onPress={() => console.log(`tapped ${variant}`)}>
{variant}
</Button>
)
}
return (
<Flex backgroundColor="pink" py={0.5}>
<Button variant={variant} loading onPress={() => console.log(`tapped ${variant}`)}>
{variant}
</Button>
</Flex>
</Wrap>
)}
)
}}
/>
)

export const VariantsDisabled = () => (
<DataList
data={variants}
renderItem={({ item: variant }) => (
<Wrap if={variant === "outlineLight"}>
<Flex backgroundColor="black100" p={1}>
<Wrap.Content>
<Button variant={variant} disabled onPress={() => console.log(`tapped ${variant}`)}>
{variant}
</Button>
</Wrap.Content>
</Flex>
</Wrap>
)}
/>
)

export const TheFollowButton = () => {
const [follow, setFollow] = useState(true)

return (
<List>
<FollowButton loading isFollowed={follow} onPress={() => setFollow((v) => !v)} />
<FollowButton isFollowed={follow} onPress={() => setFollow((v) => !v)} />
<FollowButton followCount={4} isFollowed={follow} onPress={() => setFollow((v) => !v)} />
<FollowButton followCount={40} isFollowed={follow} onPress={() => setFollow((v) => !v)} />
<FollowButton followCount={4000} isFollowed={follow} onPress={() => setFollow((v) => !v)} />
<FollowButton followCount={400000} isFollowed={follow} onPress={() => setFollow((v) => !v)} />
<FollowButton
followCount={40000000}
isFollowed={follow}
onPress={() => setFollow((v) => !v)}
/>
</List>
)
}

export const TheCTAButton = () => (
<List>
<CTAButton onPress={() => console.log("pressed")}>cta button</CTAButton>
</List>
)

export const Miscellaneous = () => (
<List>
<Button loading disabled>
loading and disabled
</Button>
<Button loading disabled icon={<LinkIcon />}>
loading and disabled with icon
</Button>
<Button block>block</Button>
<Flex
backgroundColor="orange"
width={400}
height={80}
alignItems="center"
justifyContent="center"
>
<Button variant="fillLight" icon={<LinkIcon />}>
left icon
</Button>
</Flex>
<Button icon={<LinkIcon fill="white100" />} iconPosition="right">
right icon
</Button>
<Button size="small" icon={<LinkIcon fill="white100" />} iconPosition="right">
Right Icon Small
</Button>
<Button
variant="fillDark"
size="small"
icon={<BellIcon fill="white100" width="16px" height="16px" />}
>
Create Alert
</Button>
<Box flexDirection="row">
<Box width={2} height="100%" backgroundColor="green100" />
<Box>
<Button
size="small"
icon={<LinkIcon fill="white100" />}
iconPosition="right"
longestText="this is a very long text"
>
shortest text
</Button>
<Spacer y={1} />
<Button
size="small"
icon={<LinkIcon fill="white100" />}
iconPosition="right"
longestText="this is a very long text"
>
this is a very long text
</Button>
</Box>
<Box width={2} height="100%" backgroundColor="green100" />
</Box>
<Button icon={<LinkIcon fill="white100" />} block iconPosition="left-start">
left-start aligned icon
</Button>
</List>
)

export const Playground = () => {
const [loading, setLoading] = useState(false)
const [disabled, setDisabled] = useState(true)
const [block, setBlock] = useState(false)

return (
<>
<RNButton title="loading" onPress={() => setLoading((v) => !v)} />
<RNButton title="disabled" onPress={() => setDisabled((v) => !v)} />
<RNButton title="block" onPress={() => setBlock((v) => !v)} />
<List>
<Button
loading={loading}
disabled={disabled}
block={block}
longestText="loading false, disabled false, block false"
>
loading {loading ? "true" : "false"}, disabled {disabled ? "true" : "false"}, block{" "}
{block ? "true" : "false"}
</Button>
</List>
</>
)
}

export const SpacingAround = () => (
<Box>
<Button m={2}>wow 1</Button>
<Button>wow 2</Button>
</Box>
)
Loading