Skip to content

Commit

Permalink
Merge pull request #250 from ZeroGachis/SORD-564-Update-button
Browse files Browse the repository at this point in the history 
Sord 564 update button
  • Loading branch information
@clementdejoie
clementdejoie authored Jul 19, 2024
2 parents aa306ab + a0e236e commit 19d8b06
Show file tree
Hide file tree
Showing 3 changed files with 276 additions and 96 deletions.
205 changes: 169 additions & 36 deletions Storybook/components/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,187 @@
import type { Meta, StoryObj } from '@storybook/react-native';
import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { View } from 'react-native';
import { Button } from '../../../src/components/buttons/Button';

import { Button } from 'smartway-react-native-ui';
type ButtonType = typeof Button;

export default {
title: 'components/Button',
component: Button,
argTypes: {
variant: {
control: { type: 'radio' },
options: ['filled', 'outlined', 'text'],
},
size: {
control: { type: 'radio' },
options: ['s', 'm', null],
},
status: {
control: { type: 'radio' },
options: ['primary', 'default', null],
},
onPress: { action: 'clicked' },
},
decorators: [
(Story) => {
const styles = StyleSheet.create({
container: { alignItems: 'center', justifyContent: 'center', flex: 1 },
});
return (
<View style={styles.container}>
<View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
<Story />
</View>
);
},
],
parameters: {
notes: `
# Button
A simple button.
} as ComponentMeta<ButtonType>;

`,
export const Default: ComponentStory<ButtonType> = (args) => {
return <Button {...args}>Button</Button>;
};
Default.argTypes = {
size: {
control: { type: 'radio' },
options: ['s', 'm'],
},
} as Meta<typeof Button>;

type Story = StoryObj<typeof Button>;

export const Default: Story = {
args: {
children: 'Button',
variant: {
control: { type: 'radio' },
options: ['filled', 'outlined', 'text'],
},
status: {
control: { type: 'radio' },
options: ['default', 'primary', 'info', 'success', 'warning', 'error', 'inherit'],
},
disabled: {
control: { type: 'boolean' },
},
onPress: { action: 'clicked' },
};

export const Catalog: ComponentStory<ButtonType> = (args) => {
return (
<View style={{ gap: 8 }}>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="filled" status="default">
Button
</Button>
<Button {...args} variant="filled" status="primary">
Button
</Button>
<Button {...args} variant="filled" status="info">
Button
</Button>
<Button {...args} variant="filled" status="success">
Button
</Button>
<Button {...args} variant="filled" status="warning">
Button
</Button>
<Button {...args} variant="filled" status="error">
Button
</Button>
<Button {...args} variant="filled" status="inherit">
Button
</Button>
</View>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="filled" status="default" disabled>
Button
</Button>
<Button {...args} variant="filled" status="primary" disabled>
Button
</Button>
<Button {...args} variant="filled" status="info" disabled>
Button
</Button>
<Button {...args} variant="filled" status="success" disabled>
Button
</Button>
<Button {...args} variant="filled" status="warning" disabled>
Button
</Button>
<Button {...args} variant="filled" status="error" disabled>
Button
</Button>
<Button {...args} variant="filled" status="inherit" disabled>
Button
</Button>
</View>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="outlined" status="default">
Button
</Button>
<Button {...args} variant="outlined" status="primary">
Button
</Button>
<Button {...args} variant="outlined" status="info">
Button
</Button>
<Button {...args} variant="outlined" status="success">
Button
</Button>
<Button {...args} variant="outlined" status="warning">
Button
</Button>
<Button {...args} variant="outlined" status="error">
Button
</Button>
<Button {...args} variant="outlined" status="inherit">
Button
</Button>
</View>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="outlined" status="default" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="primary" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="info" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="success" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="warning" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="error" disabled>
Button
</Button>
<Button {...args} variant="outlined" status="inherit" disabled>
Button
</Button>
</View>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="text" status="default">
Button
</Button>
<Button {...args} variant="text" status="primary">
Button
</Button>
<Button {...args} variant="text" status="info">
Button
</Button>
<Button {...args} variant="text" status="success">
Button
</Button>
<Button {...args} variant="text" status="warning">
Button
</Button>
<Button {...args} variant="text" status="error">
Button
</Button>
<Button {...args} variant="text" status="inherit">
Button
</Button>
</View>
<View style={{ flexDirection: 'row', gap: 8 }}>
<Button {...args} variant="text" status="default" disabled>
Button
</Button>
<Button {...args} variant="text" status="primary" disabled>
Button
</Button>
<Button {...args} variant="text" status="info" disabled>
Button
</Button>
<Button {...args} variant="text" status="success" disabled>
Button
</Button>
<Button {...args} variant="text" status="warning" disabled>
Button
</Button>
<Button {...args} variant="text" status="error" disabled>
Button
</Button>
<Button {...args} variant="text" status="inherit" disabled>
Button
</Button>
</View>
</View>
);
};
Default.parameters = { noSafeArea: false };
4 changes: 3 additions & 1 deletion src/components/alert/Alert.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,9 @@ const Alert = ({
</View>
<View style={styles.actionsContainer}>
{onButtonPress && buttonText && (
<Button onPress={onButtonPress}>{buttonText}</Button>
<Button status={status} onPress={onButtonPress}>
{buttonText}
</Button>
)}
{onDismiss && (
<Pressable
Expand Down
Loading

0 comments on commit 19d8b06

Please sign in to comment.