Skip to content

Commit 94e8fe7

Browse files
david-poindexterdavid-poindexter
committed
Implemented usage documentation for dnn-collapsible
1 parent 22b35de commit 94e8fe7

File tree

6 files changed

+229
-23
lines changed

6 files changed

+229
-23
lines changed

‎packages/stencil-library/custom-elements.json

+12-12
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
"type": {
6262
"text": "\"button\" | \"reset\" | \"submit\""
6363
},
64-
"description": "Optional button type,\ncan be either submit, reset or button and defaults to button if not specified.\nWarning: DNN wraps the whole page in a form, only use this if you are handling\nform submission manually.",
64+
"description": "Optional button type,\r\ncan be either submit, reset or button and defaults to button if not specified.\r\nWarning: DNN wraps the whole page in a form, only use this if you are handling\r\nform submission manually.",
6565
"default": "'button'",
6666
"required": false
6767
},
@@ -88,7 +88,7 @@
8888
"type": {
8989
"text": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\""
9090
},
91-
"description": "Optional button style,\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
91+
"description": "Optional button style,\r\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
9292
"default": "'primary'",
9393
"required": false
9494
}
@@ -447,7 +447,7 @@
447447
"text": "{ contrast: string; preview: string; cancel: string; confirm: string; normal: string; light: string; dark: string; }"
448448
},
449449
"description": "Can be used to customize the text language.",
450-
"default": "{\n contrast: \"Contrast\",\n preview: \"Preview\",\n cancel: \"Cancel\",\n confirm: \"Confirm\",\n normal: \"Normal\",\n light: \"Light\",\n dark: \"Dark\",\n }",
450+
"default": "{\r\n contrast: \"Contrast\",\r\n preview: \"Preview\",\r\n cancel: \"Cancel\",\r\n confirm: \"Confirm\",\r\n normal: \"Normal\",\r\n light: \"Light\",\r\n dark: \"Dark\",\r\n }",
451451
"required": false
452452
}
453453
],
@@ -563,7 +563,7 @@
563563
"type": {
564564
"text": "boolean"
565565
},
566-
"description": "If true, will allow the user to take a snapshot\nusing the device camera. (only works over https).",
566+
"description": "If true, will allow the user to take a snapshot\r\nusing the device camera. (only works over https).",
567567
"default": "false",
568568
"required": false
569569
},
@@ -572,7 +572,7 @@
572572
"type": {
573573
"text": "number"
574574
},
575-
"description": "Specifies the jpeg quality for when the device\ncamera is used to generate a picture.\nNeeds to be a number between 0 and 1 and defaults to 0.8",
575+
"description": "Specifies the jpeg quality for when the device\r\ncamera is used to generate a picture.\r\nNeeds to be a number between 0 and 1 and defaults to 0.8",
576576
"default": "0.8",
577577
"required": false
578578
},
@@ -600,7 +600,7 @@
600600
"type": {
601601
"text": "string[]"
602602
},
603-
"description": "A list of allowed file extensions.\nIf not specified, any file is allowed.\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]",
603+
"description": "A list of allowed file extensions.\r\nIf not specified, any file is allowed.\r\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]",
604604
"required": false
605605
},
606606
{
@@ -816,7 +816,7 @@
816816
"kind": "class",
817817
"name": "dnn-image-cropper.tsx",
818818
"tagName": "dnn-image-cropper",
819-
"description": "Allows cropping an image in-browser with the option to enforce a specific final size.\nAll computation happens in the browser and the final image is emmited\nin an event that has a data-url of the image.",
819+
"description": "Allows cropping an image in-browser with the option to enforce a specific final size.\r\nAll computation happens in the browser and the final image is emmited\r\nin an event that has a data-url of the image.",
820820
"attributes": [
821821
{
822822
"name": "height",
@@ -868,7 +868,7 @@
868868
"type": {
869869
"text": "ImageCropperResx"
870870
},
871-
"description": "Can be used to customize controls text.\nSome values support tokens, see default values for examples.",
871+
"description": "Can be used to customize controls text.\r\nSome values support tokens, see default values for examples.",
872872
"required": false
873873
},
874874
{
@@ -1144,7 +1144,7 @@
11441144
"type": {
11451145
"text": "string"
11461146
},
1147-
"description": "Optionally pass the aria-label text for the close button.\nDefaults to \"Close modal\" if not provided.",
1147+
"description": "Optionally pass the aria-label text for the close button.\r\nDefaults to \"Close modal\" if not provided.",
11481148
"default": "\"Close modal\"",
11491149
"required": false
11501150
},
@@ -1162,7 +1162,7 @@
11621162
"type": {
11631163
"text": "boolean"
11641164
},
1165-
"description": "Optionally you can pass false to not show the close button.\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\nor provide your own dismissal logic in the modal content.",
1165+
"description": "Optionally you can pass false to not show the close button.\r\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\nor provide your own dismissal logic in the modal content.",
11661166
"default": "true",
11671167
"required": false
11681168
},
@@ -1535,7 +1535,7 @@
15351535
"type": {
15361536
"text": "string"
15371537
},
1538-
"description": "Fires up each time the search query changes.\nThe data passed is the new query."
1538+
"description": "Fires up each time the search query changes.\r\nThe data passed is the new query."
15391539
}
15401540
],
15411541
"slots": [],
@@ -2124,7 +2124,7 @@
21242124
"kind": "class",
21252125
"name": "dnn-vertical-splitview.tsx",
21262126
"tagName": "dnn-vertical-splitview",
2127-
"description": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\n- The content for the left part should be injected in the `left` slot.\n- The content for the right part should be injected in the `right` slot.\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component.",
2127+
"description": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\r\n- The content for the left part should be injected in the `left` slot.\r\n- The content for the right part should be injected in the `right` slot.\r\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component.",
21282128
"attributes": [
21292129
{
21302130
"name": "split-width-percentage",

‎packages/stencil-library/licenses.json

+82-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,94 @@
11
{
2+
"@babel/code-frame@7.12.11": {
3+
"licenses": "MIT",
4+
"repository": "https://github.com/babel/babel",
5+
"publisher": "Sebastian McKenzie",
6+
"email": "sebmck@gmail.com",
7+
"path": "node_modules\\@babel\\code-frame",
8+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@babel\\code-frame\\LICENSE"
9+
},
210
"@dnncommunity/dnn-elements@0.23.3-alpha.7": {
311
"licenses": "MIT",
412
"repository": "https://github.com/dnncommunity/dnn-elements",
513
"path": "",
6-
"licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\README.md"
14+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\README.md"
15+
},
16+
"@eslint/eslintrc@0.4.3": {
17+
"licenses": "MIT",
18+
"repository": "https://github.com/eslint/eslintrc",
19+
"publisher": "Nicholas C. Zakas",
20+
"path": "node_modules\\@eslint\\eslintrc",
21+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@eslint\\eslintrc\\LICENSE"
22+
},
23+
"@humanwhocodes/config-array@0.5.0": {
24+
"licenses": "Apache-2.0",
25+
"repository": "https://github.com/humanwhocodes/config-array",
26+
"publisher": "Nicholas C. Zakas",
27+
"path": "node_modules\\@humanwhocodes\\config-array",
28+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@humanwhocodes\\config-array\\LICENSE"
29+
},
30+
"@stencil/eslint-plugin@0.4.0": {
31+
"licenses": "MIT",
32+
"repository": "https://github.com/ionic-team/stencil-eslint",
33+
"path": "node_modules\\@stencil\\eslint-plugin",
34+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@stencil\\eslint-plugin\\LICENSE.md"
35+
},
36+
"eslint-utils@2.1.0": {
37+
"licenses": "MIT",
38+
"repository": "https://github.com/mysticatea/eslint-utils",
39+
"publisher": "Toru Nagashima",
40+
"path": "node_modules\\eslint\\node_modules\\eslint-utils",
41+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\eslint\\node_modules\\eslint-utils\\LICENSE"
42+
},
43+
"eslint-visitor-keys@1.3.0": {
44+
"licenses": "Apache-2.0",
45+
"repository": "https://github.com/eslint/eslint-visitor-keys",
46+
"publisher": "Toru Nagashima",
47+
"path": "node_modules\\espree\\node_modules\\eslint-visitor-keys",
48+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\espree\\node_modules\\eslint-visitor-keys\\LICENSE"
49+
},
50+
"eslint@7.32.0": {
51+
"licenses": "MIT",
52+
"repository": "https://github.com/eslint/eslint",
53+
"publisher": "Nicholas C. Zakas",
54+
"email": "nicholas+npm@nczconsulting.com",
55+
"path": "node_modules\\eslint",
56+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\eslint\\LICENSE"
57+
},
58+
"espree@7.3.1": {
59+
"licenses": "BSD-2-Clause",
60+
"repository": "https://github.com/eslint/espree",
61+
"publisher": "Nicholas C. Zakas",
62+
"email": "nicholas+npm@nczconsulting.com",
63+
"path": "node_modules\\espree",
64+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\espree\\LICENSE"
65+
},
66+
"ignore@4.0.6": {
67+
"licenses": "MIT",
68+
"repository": "https://github.com/kaelzhang/node-ignore",
69+
"publisher": "kael",
70+
"path": "node_modules\\ignore",
71+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\ignore\\LICENSE-MIT"
72+
},
73+
"tslib@1.14.1": {
74+
"licenses": "0BSD",
75+
"repository": "https://github.com/Microsoft/tslib",
76+
"publisher": "Microsoft Corp.",
77+
"path": "node_modules\\tslib",
78+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\tslib\\LICENSE.txt"
79+
},
80+
"tsutils@3.0.0": {
81+
"licenses": "MIT",
82+
"repository": "https://github.com/ajafff/tsutils",
83+
"publisher": "Klaus Meinhardt",
84+
"path": "node_modules\\tsutils",
85+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\tsutils\\LICENSE"
786
},
8-
"typescript@5.2.2": {
87+
"typescript@4.9.5": {
988
"licenses": "Apache-2.0",
1089
"repository": "https://github.com/Microsoft/TypeScript",
1190
"publisher": "Microsoft Corp.",
1291
"path": "node_modules\\typescript",
13-
"licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt"
92+
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt"
1493
}
1594
}

‎packages/stencil-library/src/components/dnn-collapsible/readme.md

+69
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,75 @@
55
<!-- Auto Generated Below -->
66

77

8+
## Usage
9+
10+
### HTML
11+
12+
```html
13+
<div class="collapse-row">
14+
<style type="text/css">
15+
.collapse-row{
16+
border: 1px solid grey;
17+
}
18+
.collapse-row .collapse-title{
19+
display:flex;
20+
align-items: center;
21+
background-color: whitesmoke;
22+
}
23+
.collapse-row .collapse-title>*{
24+
margin: 10px;
25+
}
26+
</style>
27+
<div class="collapse-title">
28+
<dnn-chevron id="dnn-chevron1" expanded="false"></dnn-chevron>
29+
<strong>Collapsible Panel</strong>
30+
</div>
31+
<dnn-collapsible id="dnn-collapsible1" expanded="false" transition-duration="300">
32+
<div id="collapsible-slot-content" style="padding: 15px;">
33+
<h2>Details</h2>
34+
<p>
35+
Spicy jalapeno bacon ipsum dolor amet bresaola kielbasa doner ham hock biltong, swine shoulder leberkas cupim. Sausage capicola buffalo, tongue jerky frankfurter biltong pork swine landjaeger. Porchetta alcatra burgdoggen beef ribs short ribs corned beef, biltong flank bresaola kielbasa. Ham hock beef kielbasa, cupim cow beef ribs doner. T-bone cow shoulder chuck pastrami. Alcatra pig filet mignon shank. Pancetta shankle meatloaf sausage meatball cupim.
36+
</p>
37+
</div>
38+
</dnn-collapsible>
39+
</div>
40+
```
41+
42+
43+
### JSX-TSX
44+
45+
```tsx
46+
<div class="collapse-row">
47+
<style type="text/css">
48+
.collapse-row{
49+
border: 1px solid grey;
50+
}
51+
.collapse-row .collapse-title{
52+
display:flex;
53+
align-items: center;
54+
background-color: whitesmoke;
55+
}
56+
.collapse-row .collapse-title>*{
57+
margin: 10px;
58+
}
59+
</style>
60+
<div class="collapse-title">
61+
<dnn-chevron id="dnn-chevron1" expanded="false"></dnn-chevron>
62+
<strong>Collapsible Panel</strong>
63+
</div>
64+
<dnn-collapsible id="dnn-collapsible1" expanded="false" transitionDuration="300">
65+
<div id="collapsible-slot-content" style="padding: 15px;">
66+
<h2>Details</h2>
67+
<p>
68+
Spicy jalapeno bacon ipsum dolor amet bresaola kielbasa doner ham hock biltong, swine shoulder leberkas cupim. Sausage capicola buffalo, tongue jerky frankfurter biltong pork swine landjaeger. Porchetta alcatra burgdoggen beef ribs short ribs corned beef, biltong flank bresaola kielbasa. Ham hock beef kielbasa, cupim cow beef ribs doner. T-bone cow shoulder chuck pastrami. Alcatra pig filet mignon shank. Pancetta shankle meatloaf sausage meatball cupim.
69+
</p>
70+
</div>
71+
</dnn-collapsible>
72+
</div>
73+
```
74+
75+
76+
877
## Properties
978

1079
| Property | Attribute | Description | Type | Default |

‎packages/stencil-library/src/components/dnn-collapsible/usage/HTML.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```html
2+
<div class="collapse-row">
3+
<style type="text/css">
4+
.collapse-row{
5+
border: 1px solid grey;
6+
}
7+
.collapse-row .collapse-title{
8+
display:flex;
9+
align-items: center;
10+
background-color: whitesmoke;
11+
}
12+
.collapse-row .collapse-title>*{
13+
margin: 10px;
14+
}
15+
</style>
16+
<div class="collapse-title">
17+
<dnn-chevron id="dnn-chevron1" expanded="false"></dnn-chevron>
18+
<strong>Collapsible Panel</strong>
19+
</div>
20+
<dnn-collapsible id="dnn-collapsible1" expanded="false" transition-duration="300">
21+
<div id="collapsible-slot-content" style="padding: 15px;">
22+
<h2>Details</h2>
23+
<p>
24+
Spicy jalapeno bacon ipsum dolor amet bresaola kielbasa doner ham hock biltong, swine shoulder leberkas cupim. Sausage capicola buffalo, tongue jerky frankfurter biltong pork swine landjaeger. Porchetta alcatra burgdoggen beef ribs short ribs corned beef, biltong flank bresaola kielbasa. Ham hock beef kielbasa, cupim cow beef ribs doner. T-bone cow shoulder chuck pastrami. Alcatra pig filet mignon shank. Pancetta shankle meatloaf sausage meatball cupim.
25+
</p>
26+
</div>
27+
</dnn-collapsible>
28+
</div>
29+
```

‎packages/stencil-library/src/components/dnn-collapsible/usage/JSX-TSX.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```tsx
2+
<div class="collapse-row">
3+
<style type="text/css">
4+
.collapse-row{
5+
border: 1px solid grey;
6+
}
7+
.collapse-row .collapse-title{
8+
display:flex;
9+
align-items: center;
10+
background-color: whitesmoke;
11+
}
12+
.collapse-row .collapse-title>*{
13+
margin: 10px;
14+
}
15+
</style>
16+
<div class="collapse-title">
17+
<dnn-chevron id="dnn-chevron1" expanded="false"></dnn-chevron>
18+
<strong>Collapsible Panel</strong>
19+
</div>
20+
<dnn-collapsible id="dnn-collapsible1" expanded="false" transitionDuration="300">
21+
<div id="collapsible-slot-content" style="padding: 15px;">
22+
<h2>Details</h2>
23+
<p>
24+
Spicy jalapeno bacon ipsum dolor amet bresaola kielbasa doner ham hock biltong, swine shoulder leberkas cupim. Sausage capicola buffalo, tongue jerky frankfurter biltong pork swine landjaeger. Porchetta alcatra burgdoggen beef ribs short ribs corned beef, biltong flank bresaola kielbasa. Ham hock beef kielbasa, cupim cow beef ribs doner. T-bone cow shoulder chuck pastrami. Alcatra pig filet mignon shank. Pancetta shankle meatloaf sausage meatball cupim.
25+
</p>
26+
</div>
27+
</dnn-collapsible>
28+
</div>
29+
```

0 commit comments

Comments
 (0)