■ ■ ■ ■ ■ ■
packages/web/src/components/ui/CardList/CardList.stories.tsx
| | 1 | + | import React from 'react'; |
| | 2 | + | import { ComponentMeta, ComponentStory } from '@storybook/react'; |
| | 3 | + | import Container from '../Container/Container'; |
| | 4 | + | import CardList from './CardList'; |
| | 5 | + | |
| | 6 | + | export default { |
| | 7 | + | title: 'Interface / Card List', |
| | 8 | + | component: CardList, |
| | 9 | + | parameters: { |
| | 10 | + | layout: 'fullscreen', |
| | 11 | + | }, |
| | 12 | + | } as ComponentMeta<typeof CardList>; |
| | 13 | + | |
| | 14 | + | const Template: ComponentStory<typeof CardList> = (args) => ( |
| | 15 | + | <Container> |
| | 16 | + | <CardList {...args} /> |
| | 17 | + | </Container> |
| | 18 | + | ); |
| | 19 | + | |
| | 20 | + | export const PopularSearchQueries = Template.bind({}); |
| | 21 | + | PopularSearchQueries.args = { |
| | 22 | + | cards: [ |
| | 23 | + | { |
| | 24 | + | title: 'github.com', |
| | 25 | + | icon: 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 26 | + | packageTags: { |
| | 27 | + | featuredPackages: ['mdast-util-from-markdown', 'react', 'react-dom'], |
| | 28 | + | restPackages: 45, |
| | 29 | + | }, |
| | 30 | + | }, |
| | 31 | + | { |
| | 32 | + | title: 'fingerprint.com', |
| | 33 | + | icon: 'https://avatars.githubusercontent.com/u/67208791?s=200&v=4', |
| | 34 | + | packageTags: { |
| | 35 | + | featuredPackages: ['mdast-util-from-markdown', 'react', 'react-dom'], |
| | 36 | + | restPackages: 45, |
| | 37 | + | }, |
| | 38 | + | }, |
| | 39 | + | { |
| | 40 | + | title: 'facebook.com', |
| | 41 | + | icon: 'https://avatars.githubusercontent.com/u/69631?s=200&v=4', |
| | 42 | + | packageTags: { |
| | 43 | + | featuredPackages: ['react'], |
| | 44 | + | restPackages: 45, |
| | 45 | + | }, |
| | 46 | + | }, |
| | 47 | + | ], |
| | 48 | + | }; |
| | 49 | + | |
| | 50 | + | export const PopularPackages = Template.bind({}); |
| | 51 | + | PopularPackages.args = { |
| | 52 | + | cards: [ |
| | 53 | + | { |
| | 54 | + | title: '@team-griffin/react-heading-section', |
| | 55 | + | description: "This package's job is to automatically determine...", |
| | 56 | + | featuredSites: { |
| | 57 | + | iconList: [ |
| | 58 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 59 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 60 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 61 | + | ], |
| | 62 | + | numberOfUses: 5265, |
| | 63 | + | }, |
| | 64 | + | }, |
| | 65 | + | { |
| | 66 | + | title: 'unist-util-generated', |
| | 67 | + | description: 'unist utility to check if a node is generated', |
| | 68 | + | featuredSites: { |
| | 69 | + | iconList: [ |
| | 70 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 71 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 72 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 73 | + | ], |
| | 74 | + | numberOfUses: 5265, |
| | 75 | + | }, |
| | 76 | + | }, |
| | 77 | + | { |
| | 78 | + | title: 'react-smooth', |
| | 79 | + | description: 'is a animation library work on React', |
| | 80 | + | featuredSites: { |
| | 81 | + | iconList: [ |
| | 82 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 83 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 84 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 85 | + | ], |
| | 86 | + | numberOfUses: 5265, |
| | 87 | + | }, |
| | 88 | + | }, |
| | 89 | + | { |
| | 90 | + | title: 'unist-util-position', |
| | 91 | + | description: 'unist utility to get the positional info of nodes', |
| | 92 | + | featuredSites: { |
| | 93 | + | iconList: [ |
| | 94 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 95 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 96 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 97 | + | ], |
| | 98 | + | numberOfUses: 5265, |
| | 99 | + | }, |
| | 100 | + | }, |
| | 101 | + | { |
| | 102 | + | title: 'vfile-message', |
| | 103 | + | description: 'Create vfile messages', |
| | 104 | + | featuredSites: { |
| | 105 | + | iconList: [ |
| | 106 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 107 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 108 | + | 'https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', |
| | 109 | + | ], |
| | 110 | + | numberOfUses: 5265, |
| | 111 | + | }, |
| | 112 | + | }, |
| | 113 | + | { |
| | 114 | + | title: 'Go to all Popular packages', |
| | 115 | + | variant: 'toAll', |
| | 116 | + | }, |
| | 117 | + | ], |
| | 118 | + | }; |
| | 119 | + | |
| | 120 | + | export const VulnerableSites = Template.bind({}); |
| | 121 | + | VulnerableSites.args = { |
| | 122 | + | variant: 'vertical', |
| | 123 | + | cards: [ |
| | 124 | + | { |
| | 125 | + | title: 'disneyland.omsk.ru/signup', |
| | 126 | + | vulnerablePackage: { |
| | 127 | + | name: 'mdast-util-from-markdown', |
| | 128 | + | }, |
| | 129 | + | variant: 'vulnerable', |
| | 130 | + | }, |
| | 131 | + | { |
| | 132 | + | title: 'disneyland.omsk.ru/signup', |
| | 133 | + | vulnerablePackage: { |
| | 134 | + | name: 'mdast-util-from-markdown', |
| | 135 | + | moreCount: 1, |
| | 136 | + | }, |
| | 137 | + | variant: 'vulnerable', |
| | 138 | + | }, |
| | 139 | + | { |
| | 140 | + | title: 'disneyland.omsk.ru/signup', |
| | 141 | + | vulnerablePackage: { |
| | 142 | + | name: 'mdast-util-from-markdown', |
| | 143 | + | }, |
| | 144 | + | variant: 'vulnerable', |
| | 145 | + | }, |
| | 146 | + | ], |
| | 147 | + | }; |
| | 148 | + | |
Dmitry Shakun
committed
2 years ago
1 parent b672425e
