Skip to content

Commit

Permalink
chore(Button): Revert Button upgrade commits (#259)
Browse files Browse the repository at this point in the history
  • Loading branch information
@araujobarret
araujobarret authored Sep 18, 2024
1 parent ef900dc commit 2c6ee6b
Show file tree
Hide file tree
Showing 15 changed files with 1,136 additions and 432 deletions.
1 change: 1 addition & 0 deletions .storybook/storybook.requires.js
View file
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
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

0 comments on commit 2c6ee6b

Please sign in to comment.