From 6c10fab6c3224fc62bf8050ce6be23d19566259b Mon Sep 17 00:00:00 2001 From: marcelines Date: Wed, 25 Jan 2023 11:21:32 +0000 Subject: [PATCH] feat: add missing stories (#335) * feat: add missing stories * fix: figma links and removes console log --- .../src/accordion/accordion.stories.tsx | 76 +++++++++++++++++++ .../src/composer/composer.stories.tsx | 23 ++++++ .../components/src/topbar/topbar.stories.tsx | 54 +++++++++++++ 3 files changed, 153 insertions(+) create mode 100644 packages/components/src/accordion/accordion.stories.tsx create mode 100644 packages/components/src/composer/composer.stories.tsx create mode 100644 packages/components/src/topbar/topbar.stories.tsx diff --git a/packages/components/src/accordion/accordion.stories.tsx b/packages/components/src/accordion/accordion.stories.tsx new file mode 100644 index 00000000..27ffe8f3 --- /dev/null +++ b/packages/components/src/accordion/accordion.stories.tsx @@ -0,0 +1,76 @@ +import { Basketball, Collaboration, Play, Unicorn } from '../emoji' +import { Accordion } from './accordion' +import { AccordionItem } from './accordionItem' + +import type { Meta, StoryObj } from '@storybook/react' + +const meta: Meta = { + component: Accordion, + argTypes: {}, + args: { + numberOfNewMessages: 3, + title: 'Welcome', + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=14849%3A172544&t=4BeIzudVkio0c6Px-4', + }, + }, +} + +type Story = StoryObj + +export const Default: Story = { + args: { + children: ( + <> + } + title={'# welcome'} + channelStatus="withMessages" + numberOfMessages={1} + isSelected + onPress={() => { + // do nothing + }} + /> + } + title={'# general'} + channelStatus="withMentions" + numberOfMessages={2} + onPress={() => { + // do nothing + }} + mb={8} + /> + } + title={'# lounge'} + numberOfMessages={0} + onPress={() => { + // do nothing + }} + mb={8} + /> + } + title={'# random'} + channelStatus="muted" + numberOfMessages={0} + onPress={() => { + // do nothing + }} + mb={8} + /> + + ), + }, +} + +export default meta diff --git a/packages/components/src/composer/composer.stories.tsx b/packages/components/src/composer/composer.stories.tsx new file mode 100644 index 00000000..aa99681f --- /dev/null +++ b/packages/components/src/composer/composer.stories.tsx @@ -0,0 +1,23 @@ +import { Composer } from './composer' + +import type { Meta, StoryObj } from '@storybook/react' + +const meta: Meta = { + component: Composer, + argTypes: {}, + args: {}, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/qSIh8wh9EVdY8S2sZce15n/Composer-for-Web?node-id=7131%3A360528&t=11hKj5jyWVroXgdu-4', + }, + }, +} + +type Story = StoryObj + +export const Default: Story = { + args: {}, +} + +export default meta diff --git a/packages/components/src/topbar/topbar.stories.tsx b/packages/components/src/topbar/topbar.stories.tsx new file mode 100644 index 00000000..42695894 --- /dev/null +++ b/packages/components/src/topbar/topbar.stories.tsx @@ -0,0 +1,54 @@ +import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport' + +import { Topbar } from './topbar' + +import type { Meta, StoryObj } from '@storybook/react' + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta: Meta = { + title: 'Navigation/Topbar', + component: Topbar, + argTypes: {}, + parameters: { + viewport: { + viewports: MINIMAL_VIEWPORTS, + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/qSIh8wh9EVdY8S2sZce15n/Composer-for-Web?node-id=7213%3A553827&t=11hKj5jyWVroXgdu-4', + }, + }, +} + +type Story = StoryObj + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Default: Story = { + args: { + title: '# channel', + description: 'This is a channel description', + }, +} + +export const WithMembersSelected: Story = { + args: { + ...Default.args, + membersVisisble: true, + }, +} + +export const WithGoBack: Story = { + parameters: { + viewport: { + defaultViewport: 'mobile2', + }, + }, + args: { + ...Default.args, + goBack: () => { + // do nothing + }, + }, +} + +export default meta