Skip to content

Commit d70aabd

Browse files
adamweeksadamweeks
committed
feat(samples): add basic components
1 parent 9fbf8ae commit d70aabd

File tree

3 files changed

+205
-0
lines changed

3 files changed

+205
-0
lines changed

‎samples/BasicComponents.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.iconButton {
2+
height: 50px;
3+
width: 50px;
4+
background-color: blueviolet;
5+
}

‎samples/BasicComponents.js

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import React from 'react';
2+
3+
import Button from '@ciscospark/react-component-button';
4+
import Icon, {ICONS} from '@ciscospark/react-component-icon';
5+
6+
7+
function BasicComponents() {
8+
function onClick() {
9+
// eslint-disable-next-line no-alert
10+
window.alert('onClick');
11+
}
12+
13+
const buttonContainerStyle = {
14+
width: '40px',
15+
height: '40px',
16+
border: '1px solid rgba(0, 0, 0, 0.06)',
17+
borderRadius: '50%'
18+
};
19+
20+
return (
21+
<div>
22+
<h3>Buttons</h3>
23+
<div style={{display: 'flex', flexDirection: 'row'}}>
24+
<div style={buttonContainerStyle}>
25+
<Button accessibilityLabel="Main Menu" iconColor="black" iconType={ICONS.ICON_TYPE_WAFFLE} onClick={onClick} />
26+
</div>
27+
<div style={buttonContainerStyle}>
28+
<Button
29+
iconColor="purple"
30+
iconType={ICONS.ICON_TYPE_DELETE}
31+
onClick={onClick}
32+
title="delete"
33+
/>
34+
</div>
35+
</div>
36+
<h3>Icons</h3>
37+
<div style={{display: 'flex', flexDirection: 'row'}}>
38+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
39+
<Icon
40+
color="white"
41+
title="Add Icon"
42+
type={ICONS.ICON_TYPE_ADD}
43+
/>
44+
</div>
45+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
46+
<Icon
47+
color="white"
48+
title="Contact Icon"
49+
type={ICONS.ICON_TYPE_CONTACT}
50+
/>
51+
</div>
52+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
53+
<Icon
54+
color="white"
55+
title="Delete Icon"
56+
type={ICONS.ICON_TYPE_DELETE}
57+
/>
58+
</div>
59+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
60+
<Icon
61+
color="white"
62+
title="DND Icon"
63+
type={ICONS.ICON_TYPE_DND}
64+
/>
65+
</div>
66+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
67+
<Icon
68+
color="white"
69+
title="Document Icon"
70+
type={ICONS.ICON_TYPE_DOCUMENT}
71+
/>
72+
</div>
73+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
74+
<Icon
75+
color="white"
76+
title="Exit Icon"
77+
type={ICONS.ICON_TYPE_EXIT}
78+
/>
79+
</div>
80+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
81+
<Icon
82+
color="white"
83+
title="External User Icon"
84+
type={ICONS.ICON_TYPE_EXTERNAL_USER}
85+
/>
86+
</div>
87+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
88+
<Icon
89+
color="white"
90+
title="External User Outline Icon"
91+
type={ICONS.ICON_TYPE_EXTERNAL_USER_OUTLINE}
92+
/>
93+
</div>
94+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
95+
<Icon
96+
color="white"
97+
title="Files Icon"
98+
type={ICONS.ICON_TYPE_FILES}
99+
/>
100+
</div>
101+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
102+
<Icon
103+
color="white"
104+
title="Flagged Icon"
105+
type={ICONS.ICON_TYPE_FLAGGED}
106+
/>
107+
</div>
108+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
109+
<Icon
110+
color="white"
111+
title="Flagged Outline Icon"
112+
type={ICONS.ICON_TYPE_FLAGGED_OUTLINE}
113+
/>
114+
</div>
115+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
116+
<Icon
117+
color="white"
118+
title="Invite Icon"
119+
type={ICONS.ICON_TYPE_INVITE}
120+
/>
121+
</div>
122+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
123+
<Icon
124+
color="white"
125+
title="Message Icon"
126+
type={ICONS.ICON_TYPE_MESSAGE}
127+
/>
128+
</div>
129+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
130+
<Icon
131+
color="white"
132+
title="Message Outline Icon"
133+
type={ICONS.ICON_TYPE_MESSAGE_OUTLINE}
134+
/>
135+
</div>
136+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
137+
<Icon
138+
color="white"
139+
title="More Icon"
140+
type={ICONS.ICON_TYPE_MORE}
141+
/>
142+
</div>
143+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
144+
<Icon
145+
color="white"
146+
title="Mute Icon"
147+
type={ICONS.ICON_TYPE_MUTE_OUTLINE}
148+
/>
149+
</div>
150+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
151+
<Icon
152+
color="white"
153+
title="Participant List Icon"
154+
type={ICONS.ICON_TYPE_PARTICIPANT_LIST}
155+
/>
156+
</div>
157+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
158+
<Icon
159+
color="white"
160+
title="PTO Icon"
161+
type={ICONS.ICON_TYPE_PTO}
162+
/>
163+
</div>
164+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
165+
<Icon
166+
color="white"
167+
title="Right Arrow Icon"
168+
type={ICONS.ICON_TYPE_RIGHT_ARROW}
169+
/>
170+
</div>
171+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
172+
<Icon
173+
color="white"
174+
title="Video Cross Outline Icon"
175+
type={ICONS.ICON_TYPE_VIDEO_CROSS_OUTLINE}
176+
/>
177+
</div>
178+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
179+
<Icon
180+
color="white"
181+
title="Video Outline Icon"
182+
type={ICONS.ICON_TYPE_VIDEO_OUTLINE}
183+
/>
184+
</div>
185+
<div style={{height: '25px', width: '25px', backgroundColor: 'blueviolet'}}>
186+
<Icon
187+
color="white"
188+
title="Waffle Icon"
189+
type={ICONS.ICON_TYPE_WAFFLE}
190+
/>
191+
</div>
192+
</div>
193+
</div>
194+
);
195+
}
196+
197+
export default BasicComponents;

‎samples/Main.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import React from 'react';
22

3+
import BasicComponents from './BasicComponents';
34
import RecentsComponents from './recents-components';
45

56
function Main() {
67
return (
78
<div>
89
<h1>React Samples</h1>
10+
<h2>Basic Components</h2>
11+
<BasicComponents />
912
<h2>Recents Components</h2>
1013
<RecentsComponents />
1114
</div>

0 commit comments

Comments
 (0)