fix(Card): Add Block Layout for Buttons (Full Width)

ost-cas-fee-adv-22-23 · Dec 13, 2022 · 8987844 · 8987844
1 parent 4248bac
commit 8987844
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/src/components/button.tsx b/src/components/button.tsx
@@ -10,6 +10,7 @@ import { Label } from './label';
 type BaseButtonProps = {
   color: 'Slate' | 'Violet' | 'Gradient';
   size: 'M' | 'L';
+  layout?: 'Default' | 'Block';
   children: ReactNode;
   as: 'button' | 'a';
 };
@@ -63,11 +64,14 @@ const isButton = (props: ButtonProps): props is HTMLButtonProps => props.as ===
 
 export const Button: FC<ButtonProps> = (props) => {
   const className = merge([
+    'justify-center',
+    'text-center',
     'will-change-auto',
     'text-white',
     'rounded-lg',
     'inline-flex flex-row items-center',
     'transition-all ease-in-out',
+    props.layout === 'Block' ? 'w-full' : '',
     colorMap[props.color],
     sizeMap[props.size],
   ]);

diff --git a/stories/button.stories.tsx b/stories/button.stories.tsx
@@ -7,6 +7,10 @@ export default {
   title: 'Components/Button',
   component: Button,
   argTypes: {
+    layout: {
+      options: ['Default', 'Block'],
+      control: { type: 'select' },
+    },
     color: {
       options: ['Slate', 'Violet', 'Gradient'],
       control: { type: 'select' },
@@ -37,6 +41,7 @@ ButtonComponent.args = {
   children: 'Button Label',
   as: 'a',
   href: '#',
+  layout: 'Default',
 };
 
 export const ButtonWithIconComponent: ComponentStory<typeof Button> = ({ children, ...args }) => (
@@ -54,4 +59,5 @@ ButtonWithIconComponent.args = {
   children: 'Button Label',
   as: 'a',
   href: '#',
+  layout: 'Default',
 };