docs: wrap code snippets with DocDemo

Signed-off-by: stsogoo <[email protected]>
coryrylan · Aug 7, 2020 · 6298a81 · 6298a81
1 parent e4ffbeb
commit 6298a81
Show file tree

Hide file tree

Showing 35 changed files with 544 additions and 38 deletions.
diff --git a/apps/website/.vuepress/theme/global-components/DocIconDetail.vue b/apps/website/.vuepress/theme/global-components/DocIconDetail.vue
@@ -151,11 +151,15 @@ export default {
 }
 
 .icon-snippet {
-  background-color: #f5f2f0;
+  background: #fafafa;
   padding: 0.5rem;
   margin: 1rem 0;
   border-radius: 0.15rem;
   border: 1px solid #ccc;
+
+  code {
+    background: inherit;
+  }
 }
 
 .icon-variants {

diff --git a/apps/website/components/accordion/api.md b/apps/website/components/accordion/api.md
@@ -13,10 +13,14 @@ An accordion allows generic content to be collapsed and allows users to expand t
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-accordion></clr-accordion>
 ```
 
+</DocDemo>
+
 #### Properties
 
 <DocComponentApi component="ClrAccordion" item="bindings" />
@@ -27,6 +31,8 @@ ClrAccordionContent is a child of [ClrAccordionPanel](./api/#clraccordionpanel)
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-accordion>
   <clr-accordion-panel>
@@ -35,12 +41,16 @@ ClrAccordionContent is a child of [ClrAccordionPanel](./api/#clraccordionpanel)
 </clr-accordion>
 ```
 
+</DocDemo>
+
 ### ClrAccordionDescription
 
 ClrAccordionDescription is a child of [ClrAccordionPanel](./api/#clraccordionpanel)
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-accordion>
   <clr-accordion-panel [(clrAccordionPanelOpen)]="stepOpen">
@@ -51,19 +61,25 @@ ClrAccordionDescription is a child of [ClrAccordionPanel](./api/#clraccordionpan
 </clr-accordion>
 ```
 
+</DocDemo>
+
 ### ClrAccordionPanel
 
 Use content projection and give the panel a title and content that can be hidden or shown.
 ClrAccordionPanel is a child of [ClrAccordion](./api/#clraccordion)
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-accordion>
   <clr-accordion-panel></clr-accordion-panel>
 </clr-accordion>
 ```
 
+</DocDemo>
+
 #### Bindings
 
 <DocComponentApi component="ClrAccordionPanel" item="bindings" />
@@ -76,10 +92,14 @@ ClrAccordionPanel is a child of [ClrAccordion](./api/#clraccordion)
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-accordion-title>Panel Title</clr-accordion-title>
 ```
 
+</DocDemo>
+
 ## Angular Directives
 
 {.section-header}
@@ -91,7 +111,11 @@ state. The panel content node is removed from the DOM when closed. The default i
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-accordion-content *clrIfExpanded>Panel content</clr-accordion-content>
 <clr-accordion-content [(clrIfExpanded)]="panelExpandedProperty">Panel content</clr-accordion-content>
 ```
+
+</DocDemo>
diff --git a/apps/website/components/alert/api.md b/apps/website/components/alert/api.md
@@ -20,10 +20,14 @@ The `ClrAlert` component displays a single alert.
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-alert clrAlertType="warning"></clr-alert>
 ```
 
+</DocDemo>
+
 #### Bindings
 
 <DocComponentApi component="ClrAlert" item="bindings" />
@@ -32,30 +36,40 @@ The `ClrAlert` component displays a single alert.
 
 The `ClrAlerts` component can host a group of alerts to enable pagination.
 
+<DocDemo toggle="false">
+
 ```html
 <clr-alerts>
   <clr-alert>...</clr-alert>
 </clr-alerts>
 ```
 
+</DocDemo>
+
 <DocComponentApi component="ClrAlerts" item="bindings" />
 
 ### ClrAlertItem
 
 The `ClrAlertItem` component wraps the alert content to support displaying an icon.
 
+<DocDemo toggle="false">
+
 ```html
 <clr-alert>
   <clr-alert-item>This is my alert text</clr-alert-item>
 </clr-alert>
 ```
 
+</DocDemo>
+
 ## CSS Classes
 
 ### Wrappers
 
 There are two types of wrappers that be placed inside of the `ClrAlertItem` component.
 
+<DocDemo toggle="false">
+
 ```html
 <clr-alert-item>
   <div class="alert-text">The alert text goes here.</div>
@@ -65,4 +79,6 @@ There are two types of wrappers that be placed inside of the `ClrAlertItem` comp
 </clr-alert-item>
 ```
 
+</DocDemo>
+
 <DocComponentApi component="ClrAlertItem" item="css" />
diff --git a/apps/website/components/button-group/README.md b/apps/website/components/button-group/README.md
@@ -461,6 +461,8 @@ Use the clrInMenu input to determine if a button belongs in the overflow menu or
 
 #### Default position
 
+<DocDemo toggle="false">
+
 ```html
 <clr-button-group class="btn-primary">
   <clr-button>Create</clr-button>
@@ -471,8 +473,12 @@ Use the clrInMenu input to determine if a button belongs in the overflow menu or
 </clr-button-group>
 ```
 
+</DocDemo>
+
 ### Menu Position
 
+<DocDemo toggle="false">
+
 ```html
 <clr-button-group class="btn-primary" [clrMenuPosition]="'bottom-right'">
   <clr-button>Create</clr-button>
@@ -483,6 +489,8 @@ Use the clrInMenu input to determine if a button belongs in the overflow menu or
 </clr-button-group>
 ```
 
+</DocDemo>
+
 ## Accessibility
 
 If your icon button has no text, we recommend adding the **title="" attribute** to your icon buttons. This adds some

diff --git a/apps/website/components/button-group/api.md b/apps/website/components/button-group/api.md
@@ -14,10 +14,14 @@ optionally be designated for an overflow menu.
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-button-group></clr-button-group>
 ```
 
+</DocDemo>
+
 #### Bindings
 
 <DocComponentApi component="ClrButtonGroup" item="bindings" />
@@ -28,10 +32,14 @@ Angular button component used only with [ClrButtonGroup](./api/#clrbuttongroup).
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-button></clr-button>
 ```
 
+</DocDemo>
+
 #### Bindings
 
 <DocComponentApi component="ClrButton" item="bindings" />

diff --git a/apps/website/components/checkbox/api.md b/apps/website/components/checkbox/api.md
@@ -11,6 +11,8 @@ Use checkboxes when users need to select multiple options in a list of related o
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-checkbox-container>
   <clr-checkbox-wrapper>
@@ -24,6 +26,8 @@ Use checkboxes when users need to select multiple options in a list of related o
 </clr-checkbox-container>
 ```
 
+</DocDemo>
+
 #### Bindings
 
 <DocComponentApi component="ClrCheckbox" item="bindings" />

diff --git a/apps/website/components/combobox/api.md b/apps/website/components/combobox/api.md
@@ -13,10 +13,14 @@ Combobox description here
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-combobox></clr-combobox>
 ```
 
+</DocDemo>
+
 #### Properties
 
 <DocComponentApi component="ClrCombobox" item="bindings" />
@@ -25,10 +29,14 @@ Combobox description here
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-combobox-container></clr-combobox-container>
 ```
 
+</DocDemo>
+
 #### Properties
 
 <DocComponentApi component="ClrComboboxContainer" item="bindings" />
@@ -37,10 +45,14 @@ Combobox description here
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clroption></clroption>
 ```
 
+</DocDemo>
+
 #### Properties
 
 <DocComponentApi component="ClrOption" item="bindings" />
@@ -49,10 +61,14 @@ Combobox description here
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-options></clr-options>
 ```
 
+</DocDemo>
+
 #### Properties
 
 <DocComponentApi component="ClrOptions" item="bindings" />
@@ -65,12 +81,16 @@ Combobox description here
 
 #### Selector & Basic Usage
 
+<DocDemo toggle="false">
+
 ```html
 <clr-option *clrOptionItems="let state of states; field:'name'" [clrValue]="state">
   <!-- elements with options data -->
 </clr-option>
 ```
 
+</DocDemo>
+
 #### Properties
 
 <DocComponentApi component="ClrOptionItems" item="bindings" />