1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/components/app/tab-bar/tab-bar.stories.js
Nidhi Kumari c5368c152b
Added storybook check to CI (#17092)
* added storybook test runner

* added test runner in ci

* updated test for ci and fixed lint error

* updated lavamoat policy

* updated test command

* updated playwright

* changed command to storybook;ci

* updated command

* updated instance for test-storybook

* updated playwright

* added playwright step

* replaced concurrently with start-server-and-test

* updated the static storybook directory

* replaced first with last

* updated lock file

* replaced first with last

* updated test-storybook with maxworkers

* updated .depchechrc

* updated yml

* removed id from banner base

* replaced broken stories with .stories-to-do.js extesnsion

* updated token allowance story

* removed duplicacies from yarn

* fixed lavamoat

* removed filename comment

* updated links for docs

* fixed file extension for stories

* updated path for stories.json

* updated stories.json path

* yarn updated

* updated stories

* updated yarn

* updated wait on
2023-01-21 00:57:46 +05:30

78 lines
1.6 KiB
JavaScript

import React, { useState } from 'react';
import TabBar from '.';
export default {
title: 'Components/App/TabBar',
argTypes: {
isActive: {
action: 'isActive',
},
tabs: {
control: 'array',
},
onSelect: {
action: 'onSelect',
},
},
args: {
tabs: [
{
icon: <i className="fa fa-cog" />,
content: 'General',
key: 'general',
},
{
icon: <i className="fa fa-address-book" />,
content: 'Contacts',
key: 'contacts',
},
{
icon: <i className="fa fa-flask" />,
content: 'Snaps',
key: 'snaps',
},
{
icon: <i className="fa fa-lock" />,
content: 'SecurityAndPrivacy',
key: 'securityAndPrivacy',
},
{
icon: <i className="fa fa-bell" />,
content: 'Alerts',
key: 'alerts',
},
{
icon: <i className="fa fa-plug" />,
content: 'Networks',
key: 'networks',
},
{
icon: <i className="fa fa-flask" />,
content: 'Experimental',
key: 'experimental',
},
{
icon: <i className="fa fa-info-circle" />,
content: 'About',
key: 'about',
},
],
},
};
export const DefaultStory = (args) => {
const [currentTab, setCurrentTab] = useState('');
const handleOnSelect = (key) => setCurrentTab(key);
const handleIsActive = (key) => currentTab === key;
return (
<TabBar
tabs={args.tabs}
isActive={handleIsActive}
onSelect={handleOnSelect}
/>
);
};
DefaultStory.storyName = 'Default';