You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>The Sidebar Component is a shorter piece of text that appears next to and accompanies a longer article.</p>
25
-
26
-
<h3>Overview</h3>
27
-
<p>A sidebar is a column on the left or right side of a page which highlights the extra information related to the page.</p>
28
-
<p><strong>When to use:</strong></p>
29
-
<ul>
30
-
<li>When an extra piece of information needs to be added to the page.</li>
31
-
<li>When links to the supplementary information need to be added.</li>
32
-
</ul>
33
-
34
-
<h3>Formatting</h3>
35
-
36
-
<h4>Default</h4>
37
-
<p>The sidebar is a column that displays the supplementary information or links related to the page.</p>
38
-
39
-
<h3>Behaviors</h3>
40
-
41
-
<h4>States</h4>
42
-
<p>The sidebar First level row has two types: default and mobile with three states: default, hover, and selected. The mobile sidebar is used for mobile applications.</p>
43
-
<p>The following behavior modifiers are available:</p>
44
-
45
-
<h5>Default state:</h5>
46
-
<ol>
47
-
<li>The White colored box with the default state indicates that the sidebar is not opened or expanded yet.</li>
48
-
<li>The White colored box with down arrow and default state indicates that the sidebar isn’t open but expanded.</li>
49
-
<li>The White colored box with the up arrow and default state indicates that the sidebar is opened and expanded.</li>
50
-
</ol>
51
-
52
-
<h5>Hover state:</h5>
53
-
<ol>
54
-
<li>The Gray coloured box with hover state indicates that once the mouse is hovered over the sidebar it changes appearance.</li>
55
-
<li>The Gray colored box with down arrow and a hover state indicates that the sidebar changes appearance when the mouse hovers over it. The down arrow indicates that it is not opened but expanded.</li>
56
-
<li>The Gray colored box with the up arrow and hover state indicates that the sidebar changes appearance when the mouse hovers over it. The up arrow indicates that it is opened and expanded.</li>
57
-
</ol>
58
-
59
-
<h5>Selected state:</h5>
60
-
<ol>
61
-
<li>The Blue colored box with selected state indicates that the sidebar is selected but it isn’t opened or expanded.</li>
62
-
<li>The Blue colored box with a down arrow and selected state indicates that the sidebar is selected. The down arrow indicates that the sidebar is expanded but isn’t opened.</li>
63
-
<li>The Blue colored box with the up arrow and selected state indicates that the sidebar is selected. The up arrow indicates that the sidebar is opened and expanded.</li>
64
-
<li>The Second level row has two types: default and mobile with two states: default and hover. The font size is smaller for the mobile sidebar to make it more convenient as the mobile screen is smaller than the laptop/desktop.</li>
65
-
</ol>
66
-
67
-
<h4>Default state:</h4>
68
-
<ol>
69
-
<li>The White colored box with the default state indicates the second sidebar which contains more information regarding the page.</li>
70
-
</ol>
71
-
72
-
<h4>Hover state:</h4>
73
-
<p>The Grey colored box with hover state indicates that the sidebar changes appearance once the mouse hovers over it.</p>
74
-
75
-
<Canvas>
76
-
<Storyname="Sidebar">
77
-
{(args)=>(
78
-
<Sidebar
79
-
data={caption.sidebardata}
80
-
headerText={caption.headerText}
81
-
label={caption.label}
82
-
size="large-4"
83
-
active={"default"}
84
-
{...args}
85
-
/>
86
-
)}
87
-
</Story>
88
-
</Canvas>
89
-
90
-
<h3>Usage:</h3>
91
-
<ol>
92
-
<li>Copy HTML from the HTML tab of canvas and also include CSS and JS files listed below.</li>
93
-
<li>Initialize the sidebar for mobile and desktop by calling <code>sidebarNav()</code>, <code>sidebarMenu()</code> functions.</li>
<li>The hover state is applied to the entire button.</li>
112
-
<li>The selected state is applied to the entire button.</li>
113
-
</ul>
114
-
115
-
<h3>Changelog</h3>
116
-
<p>1.0 — Released component</p>
117
-
118
-
</>
119
-
)
20
+
page: ()=>(
21
+
<>
22
+
<h1>Sidebar</h1>
23
+
24
+
<p>The Sidebar Component is a shorter piece of text that appears next to and accompanies a longer article.</p>
25
+
26
+
<h3>Overview</h3>
27
+
<p>A sidebar is a column on the left or right side of a page which highlights the extra information related to the page.</p>
28
+
<p><strong>When to use:</strong></p>
29
+
<ul>
30
+
<li>When an extra piece of information needs to be added to the page.</li>
31
+
<li>When links to the supplementary information need to be added.</li>
32
+
</ul>
33
+
34
+
<h3>Formatting</h3>
35
+
36
+
<h4>Default</h4>
37
+
<p>The sidebar is a column that displays the supplementary information or links related to the page.</p>
38
+
39
+
<h3>Behaviors</h3>
40
+
41
+
<h4>States</h4>
42
+
<p>The sidebar First level row has two types: default and mobile with three states: default, hover, and selected. The mobile sidebar is used for mobile applications.</p>
43
+
<p>The following behavior modifiers are available:</p>
44
+
45
+
<h5>Default state:</h5>
46
+
<ol>
47
+
<li>The White colored box with the default state indicates that the sidebar is not opened or expanded yet.</li>
48
+
<li>The White colored box with down arrow and default state indicates that the sidebar isn’t open but expanded.</li>
49
+
<li>The White colored box with the up arrow and default state indicates that the sidebar is opened and expanded.</li>
50
+
</ol>
51
+
52
+
<h5>Hover state:</h5>
53
+
<ol>
54
+
<li>The Gray coloured box with hover state indicates that once the mouse is hovered over the sidebar it changes appearance.</li>
55
+
<li>The Gray colored box with down arrow and a hover state indicates that the sidebar changes appearance when the mouse hovers over it. The down arrow indicates that it is not opened but expanded.</li>
56
+
<li>The Gray colored box with the up arrow and hover state indicates that the sidebar changes appearance when the mouse hovers over it. The up arrow indicates that it is opened and expanded.</li>
57
+
</ol>
58
+
59
+
<h5>Selected state:</h5>
60
+
<ol>
61
+
<li>The Blue colored box with selected state indicates that the sidebar is selected but it isn’t opened or expanded.</li>
62
+
<li>The Blue colored box with a down arrow and selected state indicates that the sidebar is selected. The down arrow indicates that the sidebar is expanded but isn’t opened.</li>
63
+
<li>The Blue colored box with the up arrow and selected state indicates that the sidebar is selected. The up arrow indicates that the sidebar is opened and expanded.</li>
64
+
<li>The Second level row has two types: default and mobile with two states: default and hover. The font size is smaller for the mobile sidebar to make it more convenient as the mobile screen is smaller than the laptop/desktop.</li>
65
+
</ol>
66
+
67
+
<h4>Default state:</h4>
68
+
<ol>
69
+
<li>The White colored box with the default state indicates the second sidebar which contains more information regarding the page.</li>
70
+
</ol>
71
+
72
+
<h4>Hover state:</h4>
73
+
<p>The Grey colored box with hover state indicates that the sidebar changes appearance once the mouse hovers over it.</p>
74
+
75
+
<Canvas>
76
+
<Storyname="Sidebar">
77
+
{(args)=>(
78
+
<Sidebar
79
+
data={caption.sidebardata}
80
+
headerText={caption.headerText}
81
+
label={caption.label}
82
+
size="large-4"
83
+
active={"default"}
84
+
{...args}
85
+
/>
86
+
)}
87
+
</Story>
88
+
</Canvas>
89
+
90
+
<h3>Usage:</h3>
91
+
<ol>
92
+
<li>Copy HTML from the HTML tab of canvas and also include CSS and JS files listed below.</li>
93
+
<li>Initialize the sidebar for mobile and desktop by calling <code>sidebarNav()</code>, <code>sidebarMenu()</code> functions.</li>
0 commit comments