From 15007833b11095f9e58482e3fb0e13b831829dba Mon Sep 17 00:00:00 2001
From: GerardoPM <gerardo.perezm@udem.edu>
Date: Wed, 8 Jun 2022 16:33:05 -0500
Subject: [PATCH] list-group

---
 .../display/list-group/demo/d01-list-group.md | 157 ++----------------
 .../list-group/demo/d02-list-of-links.md      |  47 ++++++
 .../demo/d03-text-wrapping-and-tooltips.md    |  31 ++++
 .../demo/d04-list-item-color-and-size.md      |  27 +++
 4 files changed, 115 insertions(+), 147 deletions(-)
 create mode 100644 packages/core/docs/display/list-group/demo/d02-list-of-links.md
 create mode 100644 packages/core/docs/display/list-group/demo/d03-text-wrapping-and-tooltips.md
 create mode 100644 packages/core/docs/display/list-group/demo/d04-list-item-color-and-size.md

diff --git a/packages/core/docs/display/list-group/demo/d01-list-group.md b/packages/core/docs/display/list-group/demo/d01-list-group.md
index 25ba36acc..bf85b47be 100644
--- a/packages/core/docs/display/list-group/demo/d01-list-group.md
+++ b/packages/core/docs/display/list-group/demo/d01-list-group.md
@@ -1,3 +1,12 @@
+---
+order: 1
+---
+
+ <EuiText>
+    <p>The <strong>EuiListGroup</strong> component is used to present <strong>EuiListGroupItems</strong> in a neatly formatted list. Use the <EuiCode>flush</EuiCode> and <EuiCode>bordered</EuiCode> properties for full-width and bordered presentations, respectively.
+Adjust the <EuiCode>gutterSize</EuiCode> prop to increase or decrease the spacing between items.</p>
+</EuiText>
+
 ```hbs template
 <EuiFlexGroup>
   <EuiFlexItem>
@@ -47,153 +56,7 @@
           <Input @type='checkbox' @checked={{this.flush}} name='flushed' />
           <label for='flushed'>Flush</label>
         </div>
-        <div>
-          <EuiText>Gutter size</EuiText>
-          <EuiBadge
-            @color={{if (eq this.gutterSize 'none') 'primary'}}
-            @onClick={{set this 'gutterSize' 'none'}}
-          >none</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.gutterSize 's') 'primary'}}
-            @onClick={{set this 'gutterSize' 's'}}
-          >small</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.gutterSize 'm') 'primary'}}
-            @onClick={{set this 'gutterSize' 'm'}}
-          >medium</EuiBadge>
-        </div>
-        <div>
-          <EuiText>Max width</EuiText>
-          <EuiBadge
-            @color={{if (eq this.maxWidthType 'bool') 'primary'}}
-            @onClick={{pipe
-              (set this 'maxWidthType' 'bool')
-              (set this 'maxWidth' false)
-            }}
-          >
-            boolean
-          </EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.maxWidthType 'num') 'primary'}}
-            @onClick={{pipe
-              (set this 'maxWidthType' 'num')
-              (set this 'maxWidth' 400)
-            }}
-          >
-            number
-          </EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.maxWidthType 'string') 'primary'}}
-            @onClick={{pipe
-              (set this 'maxWidthType' 'string')
-              (set this 'maxWidth' '')
-            }}
-          >
-            string
-          </EuiBadge>
-        </div>
-        <div>
-          {{#if (eq this.maxWidthType 'bool')}}
-            <Input
-              @type='checkbox'
-              @checked={{this.maxWidth}}
-              name='maxwidth'
-            />
-            <label for='maxwidth'>{{this.maxWidth}}</label>
-          {{else if (eq this.maxWidthType 'num')}}
-            <label for='maxwidth'>Enter value</label>
-            <input
-              type='number'
-              value={{this.maxWidth}}
-              {{on 'input' this.parseToNum}}
-              name='maxwidth'
-            />
-          {{else}}
-            <label for='maxwidth'>Enter value</label>
-            <Input @value={{this.maxWidth}} name='maxwidth' />
-          {{/if}}
-        </div>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiTitle @size='xs'>First Item</EuiTitle>
-        <div>
-          <Input @type='checkbox' @checked={{this.useHref}} name='useHref' />
-          <label for='useHref'>use Href</label>
-        </div>
-        <div>
-          <Input
-            @type='checkbox'
-            @checked={{this.useOnClick}}
-            name='useOnClick'
-          />
-          <label for='useOnClick'>use onClick</label>
-        </div>
-        <div>
-          <Input @type='checkbox' @checked={{this.isActive}} name='isActive' />
-          <label for='isActive'>isActive</label>
-        </div>
-        <div>
-          <Input
-            @type='checkbox'
-            @checked={{this.isDisabled}}
-            name='isDisabled'
-          />
-          <label for='isDisabled'>isDisabled</label>
-        </div>
-        <div>
-          <Input @type='checkbox' @checked={{this.wrapText}} name='wrapText' />
-          <label for='wrapText'>wrapText</label>
-        </div>
-        <div>
-          <EuiText>Size</EuiText>
-          <EuiBadge
-            @color={{if (eq this.size 'xs') 'primary'}}
-            @onClick={{set this 'size' 'xs'}}
-          >extra small</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.size 's') 'primary'}}
-            @onClick={{set this 'size' 's'}}
-          >small</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.size 'm') 'primary'}}
-            @onClick={{set this 'size' 'm'}}
-          >medium</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.size 'l') 'primary'}}
-            @onClick={{set this 'size' 'l'}}
-          >large</EuiBadge>
-        </div>
-        <div>
-          <EuiText>Color</EuiText>
-          <EuiBadge
-            @color={{if (eq this.color 'inherit') 'primary'}}
-            @onClick={{set this 'color' 'inherit'}}
-          >inherit</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'text') 'primary'}}
-            @onClick={{set this 'color' 'text'}}
-          >text</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'subdued') 'primary'}}
-            @onClick={{set this 'color' 'subdued'}}
-          >subdued</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'ghost') 'primary'}}
-            @onClick={{set this 'color' 'ghost'}}
-          >ghost</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'primary') 'primary'}}
-            @onClick={{set this 'color' 'primary'}}
-          >primary</EuiBadge>
-        </div>
-        <div>
-          <Input
-            @type='checkbox'
-            @checked={{this.useIconType}}
-            name='useIconType'
-          />
-          <label for='useIconType'>use iconType</label>
-        </div>
+
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiFlexItem>
diff --git a/packages/core/docs/display/list-group/demo/d02-list-of-links.md b/packages/core/docs/display/list-group/demo/d02-list-of-links.md
new file mode 100644
index 000000000..486a7fdc4
--- /dev/null
+++ b/packages/core/docs/display/list-group/demo/d02-list-of-links.md
@@ -0,0 +1,47 @@
+---
+order: 2
+---
+
+# List of links
+
+ <EuiText>
+   <p>Display <strong>EuiListGroupItems</strong> as links by providing an <EuiCode>href</EuiCode> value and change their state with the <EuiCode>isActive</EuiCode> and <EuiCode>isDisabled</EuiCode> properties.</p><p>As is done in this example, the <strong>EuiListGroup</strong> component can also accept an array of items via the <EuiCode>listItems</EuiCode> property.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup>
+  <EuiListGroupItem @href='#/display/list-group' @iconType='calendar' @size='s'>
+    First link
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='clock'
+    @size='s'
+    @isActive='true'
+  >
+    This is an active link with very long label that truncates
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='compute'
+    @size='s'
+    @isDisabled='true'
+  >
+    Third link is disabled
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='copyClipboard'
+    @size='s'
+  >
+    Fourth link
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='crosshairs'
+    @size='s'
+  >
+    Fifth link
+  </EuiListGroupItem>
+</EuiListGroup>
+```
diff --git a/packages/core/docs/display/list-group/demo/d03-text-wrapping-and-tooltips.md b/packages/core/docs/display/list-group/demo/d03-text-wrapping-and-tooltips.md
new file mode 100644
index 000000000..4f414afdd
--- /dev/null
+++ b/packages/core/docs/display/list-group/demo/d03-text-wrapping-and-tooltips.md
@@ -0,0 +1,31 @@
+---
+order: 3
+---
+
+# Text wrapping and tooltips
+
+ <EuiText>
+   <p>Optional props <EuiCode>showToolTip</EuiCode> and <EuiCode>wrapLines</EuiCode> can be used to augment the display of list items. Use these when lists are inside small containers where it is likely that the content will be truncated.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup @showToolTips>
+  <EuiListGroupItem>
+    First item
+  </EuiListGroupItem>
+
+  <EuiListGroupItem>
+    Second item
+  </EuiListGroupItem>
+
+  <EuiListGroupItem>
+    <span>
+      Third very, very long item that
+      <strong>will surely</strong>
+      force truncation
+    </span>
+  </EuiListGroupItem>
+  <EuiListGroupItem @wrapText={{true}}>Fourth very, very long item with wrapping
+    enabled that will not force truncation</EuiListGroupItem>
+</EuiListGroup>
+```
diff --git a/packages/core/docs/display/list-group/demo/d04-list-item-color-and-size.md b/packages/core/docs/display/list-group/demo/d04-list-item-color-and-size.md
new file mode 100644
index 000000000..9010a2da5
--- /dev/null
+++ b/packages/core/docs/display/list-group/demo/d04-list-item-color-and-size.md
@@ -0,0 +1,27 @@
+---
+order: 4
+---
+
+# List item color and size
+
+ <EuiText>
+   <p><strong>EuiListGroupItems</strong> will inherit the color from their element type whether it is a <EuiCode>button</EuiCode>, <EuiCode>anchor</EuiCode>, or <EuiCode>span</EuiCode>. You can enforce a different color of <EuiCode>primary</EuiCode>, <EuiCode>text</EuiCode>, or <EuiCode>subdued</EuiCode> with the <EuiCode>color</EuiCode> prop. Or provide the prop directly to <strong>EuiListGroup</strong>.</p><p>They also accept options for text size; <EuiCode><span class="token string">'xs'</span> <span class="token operator">|</span> <span class="token string">'s'</span> <span class="token operator">|</span> <span class="token string">'m'</span> <span class="token operator">|</span> <span class="token string">'l'</span></EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup>
+  <EuiListGroupItem @href='#' @label='Inherit by default (xs)' @size='xs' />
+
+  <EuiListGroupItem @label='Primary (s)' @color='primary' @size='s' />
+
+  <EuiListGroupItem @href='#' @label='Text (m)' @color='text' />
+
+  <EuiListGroupItem @href='#' @label='Subdued (l)' @color='subdued' @size='l' />
+</EuiListGroup>
+
+<EuiSpacer @size='s' />
+
+<EuiListGroup {{style (inline-styles background='black')}}>
+  <EuiListGroupItem @href='#' @label='Ghost' @color='ghost' />
+</EuiListGroup>
+```