Prechádzať zdrojové kódy

Add storybooks for Button and IconButton components

Tatiana Inama 6 rokov pred
rodič
commit
0847860b56

+ 18 - 12
recipes/src/components/Button/Button.stories.tsx

@@ -7,40 +7,46 @@ import Button, { CBKButtonProps as ButttonProps } from './index';
 export default {
   title: 'Components/Button',
   component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
   decorators: [
     story => <div>{story()}</div>
   ]
 } as Meta;
 
-const Template: (label: string) => Story<ButttonProps> = label => (args) => <Button {...args}>{label}</Button>;
+const Template: Story<ButttonProps> = (args) => <Button {...args}>{args.children}</Button>;
 
-export const Raised = Template('raised').bind({});
+export const Raised = Template.bind({});
 Raised.args = {
   raised: true,
+  children: 'raised'
 };
 
-export const Unelevated = Template('unelevated').bind({});
+export const Unelevated = Template.bind({});
 Unelevated.args = {
   unelevated: true,
+  children: 'unelevated'
 };
 
-export const Outlined = Template('outlined').bind({});
+export const Outlined = Template.bind({});
 Outlined.args = {
   outlined: true,
+  children: 'outlined'
 };
 
-export const Link = Template('link').bind({});
+export const Link = Template.bind({});
 Link.args = {
   link: true,
   active: false,
+  children: 'link'
 };
 
-export const IconButton = Template('').bind({});
-IconButton.args = {
+export const ButtonWithIcon = Template.bind({});
+ButtonWithIcon.args = {
   icon: 'favorite',
-  onClick: () => {},
-  small: true
+  active: true
 };
+
+export const ButtonWithCustomIcon = Template.bind({});
+ButtonWithCustomIcon.args = {
+  custom: true,
+  icon: 'carrots'
+}

+ 2 - 6
recipes/src/components/Button/index.tsx

@@ -45,14 +45,10 @@ export default function CBKButton(props: CBKButtonProps) {
   }
 
   if (props.icon) {
+    let icon = props.custom ? <Icon material={false} icon={props.icon} /> : props.icon;
     return (
       <IconButton
-        icon={
-          <Icon 
-            material={!props.custom} 
-            icon={props.icon}
-          />
-        }
+        icon={icon}
         onClick={onClick}
         className={classnames({
           'btn-small': props.small,

+ 16 - 0
recipes/src/stories/IconButton.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import { IconButton, IconButtonProps } from '@rmwc/icon-button';
+
+export default {
+  title: 'RMWC/IconButton',
+  components: IconButton
+} as Meta;
+
+const Template: Story<IconButtonProps> = args => <IconButton {...args}/>
+
+export const Basic = Template.bind({});
+Basic.args = {
+  icon: 'star'
+}