Skip to content

Commit cd0e86f

Browse files
smorrisodssmorrisods
authored
DS-2391: Add framework example tabs to docs (take 2) (#158)
These files need a deeper review that is outside the scope of the Docusaurs Docs overhaul to align component READMEs with the new multi-framework tabs pattern. - Convert component README examples to Docusaurus Tabs with HTML/React/Angular variants. - Add Angular property bindings and camelCase React props across examples. - Preserve live React renders and clean up inline examples (icons wrapped in `<div>`). ### Sample <img width="2914" height="1302" alt="image" src="https://github.com/user-attachments/assets/668dce4f-ee75-48cc-b34b-bf91b2f58923" />Tabs updates.
2 parents 9be75f3 + 7ab3e05 commit cd0e86f

File tree

30 files changed

+4207
-538
lines changed

30 files changed

+4207
-538
lines changed

‎packages/ontario-design-system-component-library/src/components/ontario-accordion/readme.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { OntarioAccordion } from '@ongov/ontario-design-system-component-library-react';
2+
import Tabs from '@theme/Tabs';
3+
import TabItem from '@theme/TabItem';
24

35
# ontario-accordion
46

@@ -16,6 +18,19 @@ Once the component package has been installed (see Ontario Design System Compone
1618

1719
Example of an accordion component, where the user is explicitly passing in content through the `accordionData` property.
1820

21+
```mdx-code-block
22+
<Tabs
23+
defaultValue="html"
24+
values={[
25+
{label: 'HTML', value: 'html'},
26+
{label: 'React', value: 'react'},
27+
{label: 'Angular', value: 'angular'},
28+
]}
29+
groupId="framework"
30+
queryString="framework">
31+
<TabItem value="html">
32+
```
33+
1934
```html
2035
<ontario-accordion
2136
title="My Accordion"
@@ -30,6 +45,53 @@ Example of an accordion component, where the user is explicitly passing in conte
3045
></ontario-accordion>
3146
```
3247

48+
```mdx-code-block
49+
</TabItem>
50+
<TabItem value="react">
51+
```
52+
53+
```tsx
54+
<OntarioAccordion
55+
title="My Accordion"
56+
expandCollapseButton={{
57+
expandAllSectionsLabel: 'Expand All',
58+
collapseAllSectionsLabel: 'Collapse All',
59+
}}
60+
accordionData={[
61+
{ label: 'Accordion 1', content: 'This is a string' },
62+
{
63+
label: 'Accordion 2',
64+
accordionContentType: 'html',
65+
content: '<ul><li>List A</li><li>List B</li><li>List C</li></ul>',
66+
},
67+
]}
68+
/>
69+
```
70+
71+
```mdx-code-block
72+
</TabItem>
73+
<TabItem value="angular">
74+
```
75+
76+
```html
77+
<ontario-accordion
78+
[title]="'My Accordion'"
79+
[expandCollapseButton]="{
80+
expandAllSectionsLabel: 'Expand All',
81+
collapseAllSectionsLabel: 'Collapse All'
82+
}"
83+
[accordionData]="[
84+
{ label: 'Accordion 1', content: 'This is a string' },
85+
{ label: 'Accordion 2', accordionContentType: 'html', content: '<ul><li>List A</li><li>List B</li><li>List C</li></ul>' }
86+
]"
87+
></ontario-accordion>
88+
```
89+
90+
```mdx-code-block
91+
</TabItem>
92+
</Tabs>
93+
```
94+
3395
<div>
3496
<OntarioAccordion
3597
title="My Accordion"

‎packages/ontario-design-system-component-library/src/components/ontario-aside/readme.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { OntarioAside } from '@ongov/ontario-design-system-component-library-react';
2+
import Tabs from '@theme/Tabs';
3+
import TabItem from '@theme/TabItem';
24

35
# ontario-aside
46

@@ -16,6 +18,19 @@ Once the component package has been installed (see Ontario Design System Compone
1618

1719
Example of an aside component, where the user is explicitly passing in content through the `content` property.
1820

21+
```mdx-code-block
22+
<Tabs
23+
defaultValue="html"
24+
values={[
25+
{label: 'HTML', value: 'html'},
26+
{label: 'React', value: 'react'},
27+
{label: 'Angular', value: 'angular'},
28+
]}
29+
groupId="framework"
30+
queryString="framework">
31+
<TabItem value="html">
32+
```
33+
1934
```html
2035
<ontario-aside
2136
heading-type="h2"
@@ -25,6 +40,39 @@ Example of an aside component, where the user is explicitly passing in content t
2540
></ontario-aside>
2641
```
2742

43+
```mdx-code-block
44+
</TabItem>
45+
<TabItem value="react">
46+
```
47+
48+
```tsx
49+
<OntarioAside
50+
headingType="h2"
51+
headingContentType="html"
52+
headingContent="<a href='#'>This is an aside heading that is a link</a>"
53+
content="This is the content for the aside component."
54+
/>
55+
```
56+
57+
```mdx-code-block
58+
</TabItem>
59+
<TabItem value="angular">
60+
```
61+
62+
```html
63+
<ontario-aside
64+
[headingType]="'h2'"
65+
[headingContentType]="'html'"
66+
[headingContent]="'<a href='#'>This is an aside heading that is a link</a>'"
67+
[content]="'This is the content for the aside component.'"
68+
></ontario-aside>
69+
```
70+
71+
```mdx-code-block
72+
</TabItem>
73+
</Tabs>
74+
```
75+
2876
<div>
2977
<OntarioAside
3078
heading-type="h2"
@@ -36,6 +84,19 @@ Example of an aside component, where the user is explicitly passing in content t
3684

3785
This is another example of an aside. This time, the content is passed as a child of the `ontario-aside` component, which allows for HTML content to be passed. A `highlightColour` option is also passed.
3886

87+
```mdx-code-block
88+
<Tabs
89+
defaultValue="html"
90+
values={[
91+
{label: 'HTML', value: 'html'},
92+
{label: 'React', value: 'react'},
93+
{label: 'Angular', value: 'angular'},
94+
]}
95+
groupId="framework"
96+
queryString="framework">
97+
<TabItem value="html">
98+
```
99+
39100
```html
40101
<ontario-aside
41102
heading-type="h4"
@@ -51,6 +112,53 @@ This is another example of an aside. This time, the content is passed as a child
51112
</ontario-aside>
52113
```
53114

115+
```mdx-code-block
116+
</TabItem>
117+
<TabItem value="react">
118+
```
119+
120+
```tsx
121+
<OntarioAside
122+
headingType="h4"
123+
headingContentType="string"
124+
headingContent="This is an aside heading"
125+
highlightColour="purple"
126+
>
127+
<p>
128+
As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of
129+
global emissions.
130+
</p>
131+
<p>
132+
<a href="#">Learn more about Canada's global missions.</a>
133+
</p>
134+
</OntarioAside>
135+
```
136+
137+
```mdx-code-block
138+
</TabItem>
139+
<TabItem value="angular">
140+
```
141+
142+
```html
143+
<ontario-aside
144+
[headingType]="'h4'"
145+
[headingContentType]="'string'"
146+
[headingContent]="'This is an aside heading'"
147+
[highlightColour]="'purple'"
148+
>
149+
<p>
150+
As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of
151+
global emissions.
152+
</p>
153+
<p><a href="#">Learn more about Canada's global missions.</a></p>
154+
</ontario-aside>
155+
```
156+
157+
```mdx-code-block
158+
</TabItem>
159+
</Tabs>
160+
```
161+
54162
<div>
55163
<OntarioAside
56164
heading-type="h4"

‎packages/ontario-design-system-component-library/src/components/ontario-back-to-top/readme.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { OntarioBackToTop } from '@ongov/ontario-design-system-component-library-react';
2+
import Tabs from '@theme/Tabs';
3+
import TabItem from '@theme/TabItem';
24

35
# ontario-back-to-top
46

@@ -16,10 +18,46 @@ Once the component package has been installed (see Ontario Design System Compone
1618

1719
By default, the Back to Top button will have its language set to English ('en'). However, a property can be passed to set the language to French by default. For example:
1820

21+
```mdx-code-block
22+
<Tabs
23+
defaultValue="html"
24+
values={[
25+
{label: 'HTML', value: 'html'},
26+
{label: 'React', value: 'react'},
27+
{label: 'Angular', value: 'angular'},
28+
]}
29+
groupId="framework"
30+
queryString="framework">
31+
<TabItem value="html">
32+
```
33+
1934
```html
2035
<ontario-back-to-top language="fr"> </ontario-back-to-top>
2136
```
2237

38+
```mdx-code-block
39+
</TabItem>
40+
<TabItem value="react">
41+
```
42+
43+
```tsx
44+
<OntarioBackToTop language="fr"> </OntarioBackToTop>
45+
```
46+
47+
```mdx-code-block
48+
</TabItem>
49+
<TabItem value="angular">
50+
```
51+
52+
```html
53+
<ontario-back-to-top [language]="'fr'"> </ontario-back-to-top>
54+
```
55+
56+
```mdx-code-block
57+
</TabItem>
58+
</Tabs>
59+
```
60+
2361
<div style={{height: '75px'}}>
2462
<div class="ontario-back-to-top">
2563
<OntarioBackToTop language="fr" style={{position: 'inherit', bottom: '50%', right:'65%'}}> </OntarioBackToTop>
@@ -28,10 +66,46 @@ By default, the Back to Top button will have its language set to English ('en').
2866

2967
Otherwise, a default Back to Top button can be used as follows:
3068

69+
```mdx-code-block
70+
<Tabs
71+
defaultValue="html"
72+
values={[
73+
{label: 'HTML', value: 'html'},
74+
{label: 'React', value: 'react'},
75+
{label: 'Angular', value: 'angular'},
76+
]}
77+
groupId="framework"
78+
queryString="framework">
79+
<TabItem value="html">
80+
```
81+
3182
```html
3283
<ontario-back-to-top> </ontario-back-to-top>
3384
```
3485

86+
```mdx-code-block
87+
</TabItem>
88+
<TabItem value="react">
89+
```
90+
91+
```tsx
92+
<OntarioBackToTop> </OntarioBackToTop>
93+
```
94+
95+
```mdx-code-block
96+
</TabItem>
97+
<TabItem value="angular">
98+
```
99+
100+
```html
101+
<ontario-back-to-top> </ontario-back-to-top>
102+
```
103+
104+
```mdx-code-block
105+
</TabItem>
106+
</Tabs>
107+
```
108+
35109
<div class="ontario-back-to-top'">
36110
<div>
37111
<OntarioBackToTop style={{position: 'inherit', bottom: '50%', right:'65%', visbility:'visible'}}> </OntarioBackToTop>

0 commit comments

Comments
 (0)