Skip to content

Commit 42cbd6d

Browse files
donniebergdonnieberg
committed
Add table of contents on hompage
1 parent de60a3a commit 42cbd6d

10 files changed

+70
-13
lines changed

‎demo/pages/HomePage/ButtonGroupSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ module.exports = React.createClass( {
3636
return (
3737

3838
<div className='slds-p-around--medium'>
39-
<h3 className='slds-text-heading--medium slds-truncate'>
39+
<h3 id='buttonGroupSection' className='slds-text-heading--medium slds-truncate'>
4040
Button Group
4141
</h3>
4242

‎demo/pages/HomePage/ButtonSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ module.exports = React.createClass( {
5555
return (
5656

5757
<div className='slds-p-around--medium'>
58-
<h3 className='slds-text-heading--medium slds-truncate'>
58+
<h3 id='buttonSection' className='slds-text-heading--medium slds-truncate'>
5959
Button
6060
</h3>
6161

‎demo/pages/HomePage/DatePickerSingleSelectSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ module.exports = React.createClass( {
3737

3838
<div className="slds-p-around--medium">
3939

40-
<h3 className="slds-text-heading--medium slds-truncate">
40+
<h3 id='datepickerSection' className="slds-text-heading--medium slds-truncate">
4141
Datepickers (Work in progress)
4242
</h3>
4343

‎demo/pages/HomePage/DropdownBaseSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ module.exports = React.createClass( {
4444

4545
<div className="slds-p-around--medium">
4646

47-
<h3 className="slds-text-heading--medium slds-truncate">
47+
<h3 id='dropdownSection' className="slds-text-heading--medium slds-truncate">
4848
Dropdown Base
4949
</h3>
5050

‎demo/pages/HomePage/IconSection.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ module.exports = React.createClass( {
3939
return (
4040

4141
<div className='slds-p-around--medium'>
42-
<h3 className='slds-text-heading--medium slds-truncate'>
43-
Utility Icon
42+
<h3 id='iconSection' className='slds-text-heading--medium slds-truncate'>
43+
Icon
4444
</h3>
4545
<PrismCode className='language-markup'>
4646
{require('raw-loader!../../code-snippets/SLDSIcon.txt')}

‎demo/pages/HomePage/LookupBaseSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ module.exports = React.createClass( {
6161

6262
<div className="slds-p-around--medium">
6363

64-
<h3 className="slds-text-heading--medium slds-truncate">
64+
<h3 id='lookupSection' className="slds-text-heading--medium slds-truncate">
6565
Lookups
6666
</h3>
6767

‎demo/pages/HomePage/ModalSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ module.exports = React.createClass( {
125125
return (
126126
<div className='slds-p-around--medium'>
127127

128-
<h3 className='slds-text-heading--medium slds-truncate'>
128+
<h3 id='modalSection' className='slds-text-heading--medium slds-truncate'>
129129
Modal
130130
</h3>
131131
<PrismCode className='language-markup'>

‎demo/pages/HomePage/NotificationSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ module.exports = React.createClass( {
8383
return (
8484

8585
<div className='slds-p-around--medium'>
86-
<h3 className='slds-text-heading--medium slds-truncate'>
86+
<h3 id='notificationSection' className='slds-text-heading--medium slds-truncate'>
8787
Notification
8888
</h3>
8989
<h4>

‎demo/pages/HomePage/PicklistBaseSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ module.exports = React.createClass( {
4646

4747
<div className="slds-p-around--medium">
4848

49-
<h3 className="slds-text-heading--medium slds-truncate">
49+
<h3 id='picklistSection' className="slds-text-heading--medium slds-truncate">
5050
Picklist Base
5151
</h3>
5252

‎demo/pages/HomePage/index.jsx

Lines changed: 60 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,29 @@ module.exports = React.createClass( {
4949
return {};
5050
},
5151

52+
animate(elem,style,unit,from,to,time,prop) {
53+
if( !elem) return;
54+
var start = new Date().getTime(),
55+
timer = setInterval(function() {
56+
var step = Math.min(1,(new Date().getTime()-start)/time);
57+
if (prop) {
58+
elem[style] = (from+step*(to-from))+unit;
59+
} else {
60+
elem.style[style] = (from+step*(to-from))+unit;
61+
}
62+
if( step == 1) clearInterval(timer);
63+
},25);
64+
elem.style[style] = from+unit;
65+
},
66+
67+
scrollTo(elemId) {
68+
let that = this;
69+
return function() {
70+
var target = document.getElementById(elemId);
71+
that.animate(document.body, "scrollTop", "", 0, target.offsetTop, 500, true);
72+
};
73+
},
74+
5275
render() {
5376
return (
5477
<SLDSGrid flavor='vertical' className='stage slds-nowrap'>
@@ -75,8 +98,42 @@ module.exports = React.createClass( {
7598

7699
<main className='stage-main slds-grid slds-wrap slds-grow' role='main'>
77100
<div className='region region--main slds-grow slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--8-of-12 slds-col-rule--right slds-p-around--large'>
78-
79-
<h1 className="slds-text-heading--large">Current Components</h1>
101+
<section className="slds-p-bottom--large">
102+
<h3 className="slds-text-heading--medium">Current Components</h3>
103+
<ul>
104+
<li>
105+
<a href="javascript:void(0)" onClick={this.scrollTo('buttonSection')}>Button</a>
106+
</li>
107+
<li>
108+
<a href="javascript:void(0)" onClick={this.scrollTo('buttonGroupSection')}>Button Group</a>
109+
</li>
110+
<li>
111+
<a href="javascript:void(0)" onClick={this.scrollTo('dropdownSection')}>Dropdown</a>
112+
</li>
113+
<li>
114+
<a href="javascript:void(0)" onClick={this.scrollTo('iconSection')}>Icon</a>
115+
</li>
116+
<li>
117+
<a href="javascript:void(0)" onClick={this.scrollTo('lookupSection')}>Lookup</a>
118+
</li>
119+
<li>
120+
<a href="javascript:void(0)" onClick={this.scrollTo('modalSection')}>Modal</a>
121+
</li>
122+
<li>
123+
<a href="javascript:void(0)" onClick={this.scrollTo('notificationSection')}>Notification</a>
124+
</li>
125+
<li>
126+
<a href="javascript:void(0)" onClick={this.scrollTo('picklistSection')}>Picklist</a>
127+
</li>
128+
</ul>
129+
130+
<h3 className="slds-text-heading--medium slds-p-top--medium">Future Components</h3>
131+
<ul>
132+
<li>
133+
<a href="javascript:void(0)" onClick={this.scrollTo('datepickerSection')}>Date Picker</a>
134+
</li>
135+
</ul>
136+
</section>
80137

81138
<ButtonSection/>
82139

@@ -100,7 +157,7 @@ module.exports = React.createClass( {
100157

101158
<PicklistBaseCustomSection />
102159

103-
<h1 className="slds-text-heading--large">Work in Progress</h1>
160+
<h1 className="slds-text-heading--large slds-p-top--large">Future Components</h1>
104161

105162
<DatePickerSingleSelectSection />
106163
</div>

0 commit comments

Comments
 (0)