Skip to content

Commit e06e828

Browse files
tanhengyeowtanhengyeow
committed
Add initial draft for dynamic icons
1 parent 0ee2e17 commit e06e828

File tree

14 files changed

+674
-0
lines changed

14 files changed

+674
-0
lines changed

‎components/dynamic-icon/__docs__/site-stories.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// This object is imported into the documentation site. An example for the documentation site should be part of the pull request for the component. The object key is the kabob case of the "URL folder". In the case of `http://localhost:8080/components/app-launcher/`, `app-launcher` is the `key`. The folder name is created by `components.component` value in `package.json`. The following uses webpack's raw-loader plugin to get "text files" that will be eval()'d by CodeMirror within the documentation site on page load.
2+
3+
/* eslint-env node */
4+
/* eslint-disable global-require */
5+
6+
const siteStories = [
7+
require('raw-loader!@salesforce/design-system-react/components/dynamic-icon/__examples__/ellie.jsx'),
8+
require('raw-loader!@salesforce/design-system-react/components/dynamic-icon/__examples__/eq.jsx'),
9+
require('raw-loader!@salesforce/design-system-react/components/dynamic-icon/__examples__/score.jsx'),
10+
require('raw-loader!@salesforce/design-system-react/components/dynamic-icon/__examples__/strength.jsx'),
11+
require('raw-loader!@salesforce/design-system-react/components/dynamic-icon/__examples__/trend.jsx'),
12+
require('raw-loader!@salesforce/design-system-react/components/dynamic-icon/__examples__/typing.jsx'),
13+
require('raw-loader!@salesforce/design-system-react/components/dynamic-icon/__examples__/waffle.jsx'),
14+
];
15+
16+
module.exports = siteStories;

‎components/dynamic-icon/__docs__/storybook-stories.jsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import { DYNAMIC_ICONS } from '../../../utilities/constants';
4+
import IconSettings from '../../icon-settings';
5+
6+
import Ellie from '../__examples__/ellie';
7+
import Eq from '../__examples__/eq';
8+
import Score from '../__examples__/score';
9+
import Strength from '../__examples__/strength';
10+
import Trend from '../__examples__/trend';
11+
import Typing from '../__examples__/typing';
12+
import Waffle from '../__examples__/waffle';
13+
14+
storiesOf(DYNAMIC_ICONS, module)
15+
.addDecorator((getStory) => (
16+
<div className="slds-p-around_medium">
17+
<IconSettings iconPath="/assets/icons">{getStory()}</IconSettings>
18+
</div>
19+
))
20+
.add('Ellie', () => <Ellie />)
21+
.add('Eq', () => <Eq />)
22+
.add('Score', () => <Score />)
23+
.add('Strength', () => <Strength />)
24+
.add('Trend', () => <Trend />)
25+
.add('Typing', () => <Typing />)
26+
.add('Waffle', () => <Waffle />);

‎components/dynamic-icon/__examples__/ellie.jsx

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React from 'react';
2+
import DynamicIcons from '~/components/dynamic-icon'; // `~` is replaced with design-system-react at runtime
3+
import IconSettings from '~/components/icon-settings';
4+
5+
class Example extends React.Component {
6+
render() {
7+
const ellieSVG = (
8+
<svg viewBox="0 0 280 14" aria-hidden="true">
9+
<circle cx="7" cy="7" r="4" />
10+
<circle cx="7" cy="7" r="3" />
11+
<circle cx="21" cy="7" r="4" />
12+
<circle cx="21" cy="7" r="3" />
13+
<circle cx="35" cy="7" r="4" />
14+
<circle cx="35" cy="7" r="3" />
15+
<circle cx="49" cy="7" r="4" />
16+
<circle cx="49" cy="7" r="3" />
17+
<circle cx="63" cy="7" r="4" />
18+
<circle cx="63" cy="7" r="3" />
19+
<circle cx="77" cy="7" r="4" />
20+
<circle cx="77" cy="7" r="3" />
21+
<circle cx="91" cy="7" r="4" />
22+
<circle cx="91" cy="7" r="3" />
23+
<circle cx="105" cy="7" r="4" />
24+
<circle cx="105" cy="7" r="3" />
25+
<circle cx="119" cy="7" r="4" />
26+
<circle cx="119" cy="7" r="3" />
27+
<circle cx="133" cy="7" r="4" />
28+
<circle cx="133" cy="7" r="3" />
29+
<circle cx="147" cy="7" r="4" />
30+
<circle cx="147" cy="7" r="3" />
31+
<circle cx="161" cy="7" r="4" />
32+
<circle cx="161" cy="7" r="3" />
33+
<circle cx="175" cy="7" r="4" />
34+
<circle cx="175" cy="7" r="3" />
35+
<circle cx="189" cy="7" r="4" />
36+
<circle cx="189" cy="7" r="3" />
37+
<circle cx="203" cy="7" r="4" />
38+
<circle cx="203" cy="7" r="3" />
39+
<circle cx="217" cy="7" r="4" />
40+
<circle cx="217" cy="7" r="3" />
41+
<circle cx="231" cy="7" r="4" />
42+
<circle cx="231" cy="7" r="3" />
43+
<circle cx="245" cy="7" r="4" />
44+
<circle cx="245" cy="7" r="3" />
45+
<circle cx="259" cy="7" r="4" />
46+
<circle cx="259" cy="7" r="3" />
47+
<circle cx="273" cy="7" r="4" />
48+
<circle cx="273" cy="7" r="3" />
49+
</svg>
50+
);
51+
52+
return (
53+
<IconSettings iconPath="/assets/icons">
54+
<div className="slds-grid slds-grid_pull-padded slds-grid_vertical-align-center">
55+
<div className="slds-col_padded">
56+
<DynamicIcons
57+
title="Description of the icon"
58+
isAnimated
59+
paused={false}
60+
variant="ellie"
61+
>
62+
{ellieSVG}
63+
<span className="slds-assistive-text">Text alternative</span>
64+
</DynamicIcons>
65+
</div>
66+
<div className="slds-col_padded">
67+
<DynamicIcons
68+
title="Description of the icon"
69+
isAnimated={false}
70+
paused={false}
71+
variant="ellie"
72+
>
73+
{ellieSVG}
74+
<span className="slds-assistive-text">Text alternative</span>
75+
</DynamicIcons>
76+
</div>
77+
<div className="slds-col_padded">
78+
<DynamicIcons
79+
title="Description of the icon"
80+
isAnimated
81+
paused
82+
variant="ellie"
83+
>
84+
{ellieSVG}
85+
<span className="slds-assistive-text">Text alternative</span>
86+
</DynamicIcons>
87+
</div>
88+
</div>
89+
</IconSettings>
90+
);
91+
}
92+
}
93+
94+
Example.displayName = 'EllieExample'; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
95+
export default Example;

‎components/dynamic-icon/__examples__/eq.jsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import DynamicIcons from '~/components/dynamic-icon'; // `~` is replaced with design-system-react at runtime
3+
import IconSettings from '~/components/icon-settings';
4+
5+
class Example extends React.Component {
6+
render() {
7+
return (
8+
<IconSettings iconPath="/assets/icons">
9+
<div className="slds-grid slds-grid_pull-padded slds-grid_vertical-align-center">
10+
<div className="slds-col_padded">
11+
<DynamicIcons
12+
title="Description of the icon when needed"
13+
isAnimated
14+
variant="eq"
15+
>
16+
<div className="slds-icon-eq__bar" />
17+
<div className="slds-icon-eq__bar" />
18+
<div className="slds-icon-eq__bar" />
19+
<span className="slds-assistive-text">
20+
Text alternative when needed
21+
</span>
22+
<span className="slds-assistive-text">Text alternative</span>
23+
</DynamicIcons>
24+
</div>
25+
<div className="slds-col_padded">
26+
<DynamicIcons
27+
title="Description of the icon when needed"
28+
isAnimated={false}
29+
variant="eq"
30+
>
31+
<div className="slds-icon-eq__bar" />
32+
<div className="slds-icon-eq__bar" />
33+
<div className="slds-icon-eq__bar" />
34+
<span className="slds-assistive-text">
35+
Text alternative when needed
36+
</span>
37+
<span className="slds-assistive-text">Text alternative</span>
38+
</DynamicIcons>
39+
</div>
40+
</div>
41+
</IconSettings>
42+
);
43+
}
44+
}
45+
46+
Example.displayName = 'EqExample'; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
47+
export default Example;

‎components/dynamic-icon/__examples__/score.jsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import DynamicIcons from '~/components/dynamic-icon'; // `~` is replaced with design-system-react at runtime
3+
import IconSettings from '~/components/icon-settings';
4+
5+
class Example extends React.Component {
6+
render() {
7+
return (
8+
<IconSettings iconPath="/assets/icons">
9+
<div className="slds-grid slds-grid_pull-padded slds-grid_vertical-align-center">
10+
<div className="slds-col_padded">
11+
<DynamicIcons
12+
title="Description of the icon when needed"
13+
polarity="positive"
14+
variant="score"
15+
>
16+
<svg
17+
viewBox="0 0 5 5"
18+
className="slds-icon-score__positive"
19+
aria-hidden="true"
20+
>
21+
<circle cx="50%" cy="50%" r="1.875" />
22+
</svg>
23+
<svg
24+
viewBox="0 0 5 5"
25+
className="slds-icon-score__negative"
26+
aria-hidden="true"
27+
>
28+
<circle cx="50%" cy="50%" r="1.875" />
29+
</svg>
30+
<span className="slds-assistive-text">
31+
Text alternative when needed
32+
</span>
33+
</DynamicIcons>
34+
</div>
35+
<div className="slds-col_padded">
36+
<DynamicIcons
37+
title="Description of the icon when needed"
38+
polarity="negative"
39+
variant="score"
40+
>
41+
<svg
42+
viewBox="0 0 5 5"
43+
className="slds-icon-score__positive"
44+
aria-hidden="true"
45+
>
46+
<circle cx="50%" cy="50%" r="1.875" />
47+
</svg>
48+
<svg
49+
viewBox="0 0 5 5"
50+
className="slds-icon-score__negative"
51+
aria-hidden="true"
52+
>
53+
<circle cx="50%" cy="50%" r="1.875" />
54+
</svg>
55+
<span className="slds-assistive-text">
56+
Text alternative when needed
57+
</span>
58+
</DynamicIcons>
59+
</div>
60+
</div>
61+
</IconSettings>
62+
);
63+
}
64+
}
65+
66+
Example.displayName = 'ScoreExample'; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
67+
export default Example;

‎components/dynamic-icon/__examples__/strength.jsx

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import React from 'react';
2+
import DynamicIcons from '~/components/dynamic-icon'; // `~` is replaced with design-system-react at runtime
3+
import IconSettings from '~/components/icon-settings';
4+
5+
class Example extends React.Component {
6+
render() {
7+
return (
8+
<IconSettings iconPath="/assets/icons">
9+
<div className="slds-grid slds-grid_pull-padded slds-grid_vertical-align-center">
10+
<div className="slds-col_padded">
11+
<DynamicIcons
12+
title="Description of the icon when needed"
13+
strengthLevel={-1}
14+
variant="strength"
15+
>
16+
<svg viewBox="0 0 27 7" aria-hidden="true">
17+
<circle r="3.025" cx="3.5" cy="3.5" />
18+
<circle r="3.025" cx="13.5" cy="3.5" />
19+
<circle r="3.025" cx="23.5" cy="3.5" />
20+
</svg>
21+
<span className="slds-assistive-text">
22+
Text alternative when needed
23+
</span>
24+
</DynamicIcons>
25+
</div>
26+
<div className="slds-col_padded">
27+
<DynamicIcons
28+
title="Description of the icon when needed"
29+
strengthLevel={-2}
30+
variant="strength"
31+
>
32+
<svg viewBox="0 0 27 7" aria-hidden="true">
33+
<circle r="3.025" cx="3.5" cy="3.5" />
34+
<circle r="3.025" cx="13.5" cy="3.5" />
35+
<circle r="3.025" cx="23.5" cy="3.5" />
36+
</svg>
37+
<span className="slds-assistive-text">
38+
Text alternative when needed
39+
</span>
40+
</DynamicIcons>
41+
</div>
42+
<div className="slds-col_padded">
43+
<DynamicIcons
44+
title="Description of the icon when needed"
45+
isAnimated
46+
strengthLevel={-3}
47+
variant="strength"
48+
>
49+
<svg viewBox="0 0 27 7" aria-hidden="true">
50+
<circle r="3.025" cx="3.5" cy="3.5" />
51+
<circle r="3.025" cx="13.5" cy="3.5" />
52+
<circle r="3.025" cx="23.5" cy="3.5" />
53+
</svg>
54+
<span className="slds-assistive-text">
55+
Text alternative when needed
56+
</span>
57+
</DynamicIcons>
58+
</div>
59+
<div className="slds-col_padded">
60+
<DynamicIcons
61+
title="Description of the icon when needed"
62+
strengthLevel={1}
63+
variant="strength"
64+
>
65+
<svg viewBox="0 0 27 7" aria-hidden="true">
66+
<circle r="3.025" cx="3.5" cy="3.5" />
67+
<circle r="3.025" cx="13.5" cy="3.5" />
68+
<circle r="3.025" cx="23.5" cy="3.5" />
69+
</svg>
70+
<span className="slds-assistive-text">
71+
Text alternative when needed
72+
</span>
73+
</DynamicIcons>
74+
</div>
75+
<div className="slds-col_padded">
76+
<DynamicIcons
77+
title="Description of the icon when needed"
78+
strengthLevel={2}
79+
variant="strength"
80+
>
81+
<svg viewBox="0 0 27 7" aria-hidden="true">
82+
<circle r="3.025" cx="3.5" cy="3.5" />
83+
<circle r="3.025" cx="13.5" cy="3.5" />
84+
<circle r="3.025" cx="23.5" cy="3.5" />
85+
</svg>
86+
<span className="slds-assistive-text">
87+
Text alternative when needed
88+
</span>
89+
</DynamicIcons>
90+
</div>
91+
<div className="slds-col_padded">
92+
<DynamicIcons
93+
title="Description of the icon when needed"
94+
isAnimated
95+
strengthLevel={3}
96+
variant="strength"
97+
>
98+
<svg viewBox="0 0 27 7" aria-hidden="true">
99+
<circle r="3.025" cx="3.5" cy="3.5" />
100+
<circle r="3.025" cx="13.5" cy="3.5" />
101+
<circle r="3.025" cx="23.5" cy="3.5" />
102+
</svg>
103+
<span className="slds-assistive-text">
104+
Text alternative when needed
105+
</span>
106+
</DynamicIcons>
107+
</div>
108+
</div>
109+
</IconSettings>
110+
);
111+
}
112+
}
113+
114+
Example.displayName = 'ScoreExample'; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
115+
export default Example;

0 commit comments

Comments
 (0)