Skip to content

Commit b76f4b3

Browse files
sroy3sroy3
authored
Added a story to visualize the icons (#3403)
* Added a story to visualize the icons * Disable chromatic snapshots
1 parent 87ffcf8 commit b76f4b3

File tree

4 files changed

+174
-0
lines changed

4 files changed

+174
-0
lines changed

‎webview/src/stories/Icons.stories.tsx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import { Story, Meta } from '@storybook/react/types-6-0'
2+
import React from 'react'
3+
4+
import './test-vscode-styles.scss'
5+
import '../shared/style.scss'
6+
import { IconWrapper } from './components/IconWrapper'
7+
import { IconsWrapper } from './components/IconsWrapper'
8+
import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
9+
import { Icon } from '../shared/components/Icon'
10+
import {
11+
Add,
12+
Check,
13+
ChevronDown,
14+
ChevronRight,
15+
Clock,
16+
Close,
17+
Copy,
18+
Dots,
19+
DownArrow,
20+
Ellipsis,
21+
Error,
22+
Filter,
23+
GitCommit,
24+
GraphLine,
25+
GraphScatter,
26+
Gripper,
27+
Lines,
28+
Pin,
29+
Refresh,
30+
SortPrecedence,
31+
StarEmpty,
32+
StarFull,
33+
Trash,
34+
UpArrow
35+
} from '../shared/components/icons'
36+
37+
export default {
38+
args: {
39+
data: {}
40+
},
41+
component: Icon,
42+
parameters: DISABLE_CHROMATIC_SNAPSHOTS,
43+
title: 'Icons'
44+
} as Meta
45+
46+
const Template: Story = () => {
47+
return (
48+
<IconsWrapper>
49+
<IconWrapper name="Add">
50+
<Icon icon={Add} />
51+
</IconWrapper>
52+
<IconWrapper name="Check">
53+
<Icon icon={Check} />
54+
</IconWrapper>
55+
<IconWrapper name="ChevronDown">
56+
<Icon icon={ChevronDown} />
57+
</IconWrapper>
58+
<IconWrapper name="ChevronRight">
59+
<Icon icon={ChevronRight} />
60+
</IconWrapper>
61+
<IconWrapper name="Clock">
62+
<Icon icon={Clock} />
63+
</IconWrapper>
64+
<IconWrapper name="Close">
65+
<Icon icon={Close} />
66+
</IconWrapper>
67+
<IconWrapper name="Copy">
68+
<Icon icon={Copy} />
69+
</IconWrapper>
70+
<IconWrapper name="Dots">
71+
<Icon icon={Dots} />
72+
</IconWrapper>
73+
<IconWrapper name="DownArrow">
74+
<Icon icon={DownArrow} />
75+
</IconWrapper>
76+
<IconWrapper name="Ellipsis">
77+
<Icon icon={Ellipsis} />
78+
</IconWrapper>
79+
<IconWrapper name="Error">
80+
<Icon icon={Error} />
81+
</IconWrapper>
82+
<IconWrapper name="Filter">
83+
<Icon icon={Filter} />
84+
</IconWrapper>
85+
<IconWrapper name="GitCommit">
86+
<Icon icon={GitCommit} />
87+
</IconWrapper>
88+
<IconWrapper name="GraphLine">
89+
<Icon icon={GraphLine} />
90+
</IconWrapper>
91+
<IconWrapper name="GraphScatter">
92+
<Icon icon={GraphScatter} />
93+
</IconWrapper>
94+
<IconWrapper name="Gripper">
95+
<Icon icon={Gripper} />
96+
</IconWrapper>
97+
<IconWrapper name="Lines">
98+
<Icon icon={Lines} />
99+
</IconWrapper>
100+
<IconWrapper name="Pin">
101+
<Icon icon={Pin} />
102+
</IconWrapper>
103+
<IconWrapper name="Refresh">
104+
<Icon icon={Refresh} />
105+
</IconWrapper>
106+
<IconWrapper name="SortPrecedence">
107+
<Icon icon={SortPrecedence} />
108+
</IconWrapper>
109+
<IconWrapper name="StarEmpty">
110+
<Icon icon={StarEmpty} />
111+
</IconWrapper>
112+
<IconWrapper name="StarFull">
113+
<Icon icon={StarFull} />
114+
</IconWrapper>
115+
<IconWrapper name="Trash">
116+
<Icon icon={Trash} />
117+
</IconWrapper>
118+
<IconWrapper name="UpArrow">
119+
<Icon icon={UpArrow} />
120+
</IconWrapper>
121+
</IconsWrapper>
122+
)
123+
}
124+
125+
export const AllIcons = Template.bind({})

‎webview/src/stories/components/IconWrapper.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React, { ReactNode } from 'react'
2+
import styles from './styles.module.scss'
3+
4+
export const IconWrapper: React.FC<{ children: ReactNode; name: string }> = ({
5+
children,
6+
name
7+
}) => (
8+
<div className={styles.iconWrapper}>
9+
{children}
10+
<h3 className={styles.iconTitle}>{name}</h3>
11+
</div>
12+
)

‎webview/src/stories/components/IconsWrapper.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React, { ReactNode } from 'react'
2+
import styles from './styles.module.scss'
3+
4+
export const IconsWrapper: React.FC<{ children: ReactNode }> = ({
5+
children
6+
}) => <div className={styles.iconsWrapper}>{children}</div>

‎webview/src/stories/components/styles.module.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@import '../../shared/variables.scss';
2+
3+
.iconsWrapper {
4+
display: flex;
5+
flex-wrap: wrap;
6+
gap: 10px;
7+
max-width: 100%;
8+
}
9+
10+
.iconWrapper {
11+
padding: 5px;
12+
border: 1px solid $fg-color;
13+
border-radius: 3px;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
width: 100px;
19+
height: 80px;
20+
21+
svg {
22+
fill: $fg-color;
23+
width: 20px;
24+
height: 20px;
25+
}
26+
}
27+
28+
.iconTitle {
29+
font-size: 0.6rem;
30+
padding: 3px;
31+
}

0 commit comments

Comments
 (0)