chore(components): fix storybook import of CSS and add card story (#273)

botpress · Dec 3, 2021 · 57d2b21 · 57d2b21
1 parent 67906da
commit 57d2b21
Show file tree

Hide file tree

Showing 5 changed files with 342 additions and 311 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -29,13 +29,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
-    "@storybook/addon-essentials": "^6.4.3",
-    "@storybook/addon-links": "^6.4.3",
-    "@storybook/addon-measure": "^6.4.3",
-    "@storybook/components": "^6.4.3",
-    "@storybook/core-events": "^6.4.3",
-    "@storybook/react": "^6.4.3",
-    "@storybook/theming": "^6.4.3",
+    "@storybook/addon-essentials": "^6.4.4",
+    "@storybook/addon-links": "^6.4.4",
+    "@storybook/addon-measure": "^6.4.4",
+    "@storybook/components": "^6.4.4",
+    "@storybook/core-events": "^6.4.4",
+    "@storybook/react": "^6.4.4",
+    "@storybook/theming": "^6.4.4",
     "@testing-library/dom": "^8.10.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",

diff --git a/packages/components/src/css/botpress-default.css b/packages/components/src/css/botpress-default.css
@@ -467,7 +467,6 @@ body {
   box-sizing: border-box;
   color: rgba(0, 0, 0, 1);
   line-height: 1.28em;
-  margin-right: 3px;
   min-height: 150px;
   max-height: 410px;
   border: 1px solid rgba(0, 0, 0, 0.1);

diff --git a/packages/components/story/card.stories.tsx b/packages/components/story/card.stories.tsx
@@ -0,0 +1,32 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import React from 'react'
+import { Card } from '../src/renderer/carousel'
+import { defaultMessageConfig } from '../src/utils'
+
+export default {
+  title: 'Card',
+  component: Card
+} as ComponentMeta<typeof Card>
+
+const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />
+
+export const Primary = Template.bind({})
+
+Primary.args = {
+  title: 'Card 1',
+  subtitle: 'Subtitle 1',
+  image: 'https://via.placeholder.com/150/150',
+  actions: [
+    {
+      title: 'Button 1',
+      action: 'Postback',
+      payload: 'button_clicked'
+    }
+  ],
+  config: {
+    ...defaultMessageConfig,
+    onSendData: async (data) => {
+      alert('onSendData called with: ' + JSON.stringify(data))
+    }
+  }
+}
diff --git a/packages/components/story/config/preview.ts b/packages/components/story/config/preview.ts
@@ -1,4 +1,4 @@
-import '../../css/botpress-default.css'
+import '../../src/css/botpress-default.css'
 import './custom.css'
 
 export const parameters = {