Skip to content

Commit e4b12cb

Browse files
djthorpedjthorpe
committed
Updated code
1 parent c8799a2 commit e4b12cb

File tree

1 file changed

+88
-103
lines changed

1 file changed

+88
-103
lines changed

‎src/index.html

Lines changed: 88 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -47,108 +47,101 @@
4747
</wc-nav>
4848
</wc-sidebar>
4949
<wc-content>
50+
<div style="background-color: #fcfcfc; padding: 5px;">
51+
<wc-tab-group id="tab-group" backgroundColor="light">
52+
<wc-tab name="tab-tables" selected><wc-icon name="table" size="medium"></wc-icon> Tables</wc-tab>
53+
<wc-tab name="tab-buttons">Buttons</wc-tab>
54+
<wc-tab name="tab-badges">Badges</wc-tab>
55+
<wc-tab name="tab-icons">Icons</wc-tab>
56+
<wc-tab name="tab-code">Code</wc-tab>
57+
<wc-tab name="tab-disabled" disabled><wc-icon name="person-circle" size="medium"></wc-icon>
58+
Disabled</wc-tab>
59+
</wc-tab-group>
60+
<wc-view-group id="view-group" backgroundColor="light">
61+
<wc-view name="tab-tables" selected>
62+
<div class="container">
63+
<h1>Tables</h1>
64+
<wc-table id="table" backgroundColor="black" stripedRows>Table of Fruit</wc-table>
65+
<script>
66+
document.getElementById('table').data = [
67+
{ fruit: 'apple', color: 'green', weight: '100gr' },
68+
{ fruit: 'banana', color: 'yellow', weight: '140gr' }
69+
];
70+
</script>
71+
</div>
72+
</wc-view>
73+
<wc-view name="tab-buttons">
74+
<div class="container">
75+
<h1>Buttons</h1>
5076

77+
<h3>Individual</h3>
78+
<wc-button name="save" link="http://news.bbc.co.uk/" default>Save</wc-button>
79+
<wc-button name="retry">Retry</wc-button>
5180

52-
<div class="container">
53-
<h1>Code</h1>
54-
<div style="background-color: #fcfcfc; padding: 5px;">
55-
<wc-code language="javascript">
56-
console.log('hello');
57-
console.log('hello');
58-
console.log('hello');
59-
60-
/* this is some more javascript */
61-
console.log('hello');
62-
</wc-code>
63-
</div>
64-
</div>
65-
<hr>
66-
67-
<div class="container">
68-
<h1>Tab & View Group</h1>
69-
<div style="background-color: #fcfcfc; padding: 5px;">
70-
<wc-tab-group id="tab-group" backgroundColor="light">
71-
<wc-tab name="tab-tables" selected><wc-icon name="table" size="medium"></wc-icon> Tables</wc-tab>
72-
<wc-tab name="tab-buttons">Buttons</wc-tab>
73-
<wc-tab name="tab-badges">Badges</wc-tab>
74-
<wc-tab name="tab-icons">Icons</wc-tab>
75-
<wc-tab name="tab-disabled" disabled><wc-icon name="person-circle" size="medium"></wc-icon> Disabled</wc-tab>
76-
<wc-tab name="tab-buttons">Buttons</wc-tab>
77-
<wc-tab name="tab-badges">Badges</wc-tab>
78-
<wc-tab name="tab-icons">Icons</wc-tab>
79-
</wc-tab-group>
80-
<wc-view-group id="view-group" backgroundColor="light">
81-
<wc-view name="tab-tables" selected>
82-
<div class="container">
83-
<h1>Tables</h1>
84-
85-
<!-- Table of data -->
86-
<wc-table id="table" backgroundColor="black" stripedRows>Table of Fruit</wc-table>
87-
<script>
88-
document.getElementById('table').data = [
89-
{ fruit: 'apple', color: 'green', weight: '100gr' },
90-
{ fruit: 'banana', color: 'yellow', weight: '140gr' }
91-
];
92-
</script>
93-
</div>
94-
</wc-view>
95-
<wc-view name="tab-buttons">
96-
BUTTONS CONTENT
97-
</wc-view>
98-
<wc-view name="tab-badges">
99-
BADGES CONTENT
100-
</wc-view>
101-
<wc-view name="tab-icons">
102-
ICONS CONTENT
103-
</wc-view>
104-
</wc-view-group>
105-
</div>
106-
</div>
107-
<hr>
81+
<h3>Group</h3>
82+
<wc-button-group>
83+
<wc-button name="save" link="http://news.bbc.co.uk/">Save</wc-button>
84+
<wc-button name="retry">Retry</wc-button>
85+
<wc-button name="cancel" default>Cancel</wc-button>
86+
</wc-button-group>
87+
</div>
88+
</wc-view>
89+
<wc-view name="tab-badges">
90+
<div class="container">
91+
<h1>Badge</h1>
10892

109-
<div class="container">
110-
<h1>Buttons</h1>
93+
<h3>Individual</h3>
94+
<wc-badge textTransform="uppercase">default</wc-badge>
95+
<wc-badge textTransform="uppercase" backgroundColor="primary">primary</wc-badge>
96+
<wc-badge textTransform="uppercase" backgroundColor="secondary">secondary</wc-badge>
97+
<wc-badge textTransform="uppercase" backgroundColor="success">success</wc-badge>
98+
<wc-badge textTransform="uppercase" backgroundColor="warning">warning</wc-badge>
99+
<wc-badge textTransform="uppercase" backgroundColor="error">error</wc-badge>
100+
<wc-badge textTransform="uppercase" backgroundColor="light">light</wc-badge>
101+
<wc-badge textTransform="uppercase" backgroundColor="dark">dark</wc-badge>
102+
<hr>
111103

112-
<h3>Individual</h3>
113-
<wc-button name="save" link="http://news.bbc.co.uk/" default>Save</wc-button>
114-
<wc-button name="retry">Retry</wc-button>
104+
<h3>Group</h3>
105+
<wc-badge-group>
106+
<wc-badge textTransform="uppercase">default</wc-badge>
107+
<wc-badge textTransform="uppercase" backgroundColor="primary">primary</wc-badge>
108+
<wc-badge textTransform="uppercase" backgroundColor="secondary">secondary</wc-badge>
109+
<wc-badge textTransform="uppercase" backgroundColor="success">success</wc-badge>
110+
<wc-badge textTransform="uppercase" backgroundColor="warning">warning</wc-badge>
111+
<wc-badge textTransform="uppercase" backgroundColor="error">error</wc-badge>
112+
<wc-badge textTransform="uppercase" backgroundColor="light">light</wc-badge>
113+
<wc-badge textTransform="uppercase" backgroundColor="dark">dark</wc-badge>
114+
</wc-badge-group>
115+
</div>
116+
</wc-view>
117+
<wc-view name="tab-icons">
118+
<div class="container">
119+
<h1>Icon</h1>
120+
<wc-icon name="0-circle-fill"></wc-icon> DEFAULT
121+
<wc-icon name="1-circle-fill" size="small"></wc-icon> SMALL
122+
<wc-icon name="2-circle-fill" size="medium"></wc-icon> MEDIUM
123+
<wc-icon name="3-circle-fill" size="large"></wc-icon> LARGE
124+
<wc-icon name="4-circle-fill" size="xlarge"></wc-icon> XLARGE
125+
</div>
126+
</wc-view>
127+
<wc-view name="tab-code">
128+
<div class="container">
129+
<h1>Code</h1>
130+
<div style="background-color: #fcfcfc; padding: 5px;">
131+
<wc-code language="javascript">
132+
console.log('hello');
133+
console.log('hello');
134+
console.log('hello');
115135

116-
<h3>Group</h3>
117-
<wc-button-group>
118-
<wc-button name="save" link="http://news.bbc.co.uk/">Save</wc-button>
119-
<wc-button name="retry">Retry</wc-button>
120-
<wc-button name="cancel" default>Cancel</wc-button>
121-
</wc-button-group>
136+
/* this is some more javascript */
137+
console.log('hello');
138+
</wc-code>
139+
</div>
140+
</div>
141+
</wc-view>
142+
</wc-view-group>
122143
</div>
123-
<hr>
124-
125-
<div class="container">
126-
<h1>Badge</h1>
127-
128-
<h3>Individual</h3>
129-
<wc-badge textTransform="uppercase">default</wc-badge>
130-
<wc-badge textTransform="uppercase" backgroundColor="primary">primary</wc-badge>
131-
<wc-badge textTransform="uppercase" backgroundColor="secondary">secondary</wc-badge>
132-
<wc-badge textTransform="uppercase" backgroundColor="success">success</wc-badge>
133-
<wc-badge textTransform="uppercase" backgroundColor="warning">warning</wc-badge>
134-
<wc-badge textTransform="uppercase" backgroundColor="error">error</wc-badge>
135-
<wc-badge textTransform="uppercase" backgroundColor="light">light</wc-badge>
136-
<wc-badge textTransform="uppercase" backgroundColor="dark">dark</wc-badge>
137-
<hr>
138-
139-
<h3>Group</h3>
140-
<wc-badge-group>
141-
<wc-badge textTransform="uppercase">default</wc-badge>
142-
<wc-badge textTransform="uppercase" backgroundColor="primary">primary</wc-badge>
143-
<wc-badge textTransform="uppercase" backgroundColor="secondary">secondary</wc-badge>
144-
<wc-badge textTransform="uppercase" backgroundColor="success">success</wc-badge>
145-
<wc-badge textTransform="uppercase" backgroundColor="warning">warning</wc-badge>
146-
<wc-badge textTransform="uppercase" backgroundColor="error">error</wc-badge>
147-
<wc-badge textTransform="uppercase" backgroundColor="light">light</wc-badge>
148-
<wc-badge textTransform="uppercase" backgroundColor="dark">dark</wc-badge>
149-
</wc-badge-group>
150144
</div>
151-
<hr>
152145

153146
<div class="container wc-card">
154147
<h1>Close Button</h1>
@@ -160,14 +153,6 @@ <h1>Close Button</h1>
160153
</div>
161154
<hr>
162155

163-
<div class="container">
164-
<h1>Icon</h1>
165-
<wc-icon name="0-circle-fill"></wc-icon> DEFAULT
166-
<wc-icon name="1-circle-fill" size="small"></wc-icon> SMALL
167-
<wc-icon name="2-circle-fill" size="medium"></wc-icon> MEDIUM
168-
<wc-icon name="3-circle-fill" size="large"></wc-icon> LARGE
169-
<wc-icon name="4-circle-fill" size="xlarge"></wc-icon> XLARGE
170-
</div>
171156
</div>
172157
<hr>
173158

0 commit comments

Comments
 (0)