Merge pull request #8 from chrisrhymes/feature/has-icon

Add has-icon

Author: chrisrhymes

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2

changelog.txt

@@ -0,0 +1,17 @@
+# 0.5
+* Added has-icon
+
+# 0.4.2
+* Add default styles for is-outlined
+
+# 0.4.1
+* Fix for li.is-outlined
+
+# 0.3
+* Added list item overrides
+
+# 0.2
+* Removed the Bulma imports from block-list.scss file as it caused some Bulma styles to be overwritten
+
+# 0.1
+* Initial release

docs/Gemfile

@@ -1,3 +1,3 @@
 source 'https://rubygems.org'
-gem "bulma-clean-theme",  '0.10.5'
-gem 'github-pages', group: :jekyll_plugins
+gem "bulma-clean-theme",  '0.11.1'
+gem 'github-pages', group: :jekyll_plugins

docs/Gemfile.lock

@@ -1,15 +1,15 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (6.0.3.4)
+    activesupport (6.0.3.6)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
       zeitwerk (~> 2.2, >= 2.2.2)
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
-    bulma-clean-theme (0.10.5)
+    bulma-clean-theme (0.11.1)
       jekyll (~> 3.9)
       jekyll-feed (~> 0.15)
       jekyll-paginate (~> 1.1)
@@ -23,7 +23,7 @@ GEM
     colorator (1.1.0)
     commonmarker (0.17.13)
       ruby-enum (~> 0.5)
-    concurrent-ruby (1.1.7)
+    concurrent-ruby (1.1.8)
     dnsruby (1.61.5)
       simpleidn (~> 0.1)
     em-websocket (0.5.2)
@@ -38,11 +38,11 @@ GEM
       multipart-post (>= 1.2, < 3)
       ruby2_keywords
     faraday-net_http (1.0.1)
-    ffi (1.14.2)
+    ffi (1.15.0)
     forwardable-extended (2.6.0)
     gemoji (3.0.1)
-    github-pages (209)
-      github-pages-health-check (= 1.16.1)
+    github-pages (213)
+      github-pages-health-check (= 1.17.0)
       jekyll (= 3.9.0)
       jekyll-avatar (= 0.7.0)
       jekyll-coffeescript (= 1.1.1)
@@ -57,9 +57,9 @@ GEM
       jekyll-readme-index (= 0.3.0)
       jekyll-redirect-from (= 0.16.0)
       jekyll-relative-links (= 0.6.1)
-      jekyll-remote-theme (= 0.4.2)
+      jekyll-remote-theme (= 0.4.3)
       jekyll-sass-converter (= 1.5.2)
-      jekyll-seo-tag (= 2.6.1)
+      jekyll-seo-tag (= 2.7.1)
       jekyll-sitemap (= 1.4.0)
       jekyll-swiss (= 1.0.0)
       jekyll-theme-architect (= 0.1.1)
@@ -83,13 +83,13 @@ GEM
       mercenary (~> 0.3)
       minima (= 2.5.1)
       nokogiri (>= 1.10.4, < 2.0)
-      rouge (= 3.23.0)
+      rouge (= 3.26.0)
       terminal-table (~> 1.4)
-    github-pages-health-check (1.16.1)
+    github-pages-health-check (1.17.0)
       addressable (~> 2.3)
       dnsruby (~> 1.60)
       octokit (~> 4.0)
-      public_suffix (~> 3.0)
+      public_suffix (>= 2.0.2, < 5.0)
       typhoeus (~> 1.3)
     html-pipeline (2.14.0)
       activesupport (>= 2)
@@ -143,15 +143,15 @@ GEM
       jekyll (>= 3.3, < 5.0)
     jekyll-relative-links (0.6.1)
       jekyll (>= 3.3, < 5.0)
-    jekyll-remote-theme (0.4.2)
+    jekyll-remote-theme (0.4.3)
       addressable (~> 2.0)
       jekyll (>= 3.5, < 5.0)
       jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
       rubyzip (>= 1.3.0, < 3.0)
     jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
-    jekyll-seo-tag (2.6.1)
-      jekyll (>= 3.3, < 5.0)
+    jekyll-seo-tag (2.7.1)
+      jekyll (>= 3.8, < 5.0)
     jekyll-sitemap (1.4.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-swiss (1.0.0)
@@ -208,7 +208,7 @@ GEM
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.3)
-    listen (3.4.1)
+    listen (3.5.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.3.6)
@@ -217,26 +217,26 @@ GEM
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
-    minitest (5.14.3)
+    minitest (5.14.4)
     multipart-post (2.1.1)
-    nokogiri (1.11.1)
+    nokogiri (1.11.2)
       mini_portile2 (~> 2.5.0)
       racc (~> 1.4)
     octokit (4.20.0)
       faraday (>= 0.9)
       sawyer (~> 0.8.0, >= 0.5.3)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (3.1.1)
+    public_suffix (4.0.6)
     racc (1.5.2)
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.4)
-    rouge (3.23.0)
-    ruby-enum (0.8.0)
+    rouge (3.26.0)
+    ruby-enum (0.9.0)
       i18n
-    ruby2_keywords (0.0.2)
+    ruby2_keywords (0.0.4)
     rubyzip (2.3.0)
     safe_yaml (1.0.5)
     sass (3.7.4)
@@ -266,7 +266,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  bulma-clean-theme (= 0.10.5)
+  bulma-clean-theme (= 0.11.1)
   github-pages
 
 BUNDLED WITH

docs/_config.yml

@@ -13,3 +13,5 @@ markdown: kramdown
 plugins:
   - jekyll-feed
   - github-pages
+
+livereload: true

docs/_data/menu.yaml

@@ -14,7 +14,9 @@
       link: '/#has-radius'
     - name: Is Highlighted
       link: '/#highlighted'
+    - name: Has Icon
+      link: '/#has-icon'
     - name: List Item Overrides
       link: '/#list-item-overrides'
     - name: Combinations
-      link: '/#combinations'
+      link: '/#combinations'

docs/_sass/_block-list.scss

@@ -73,6 +73,28 @@ $block-list-highlight-width: 5px !default;
         color: $text;
     }
 
+    li.has-icon {
+        display: flex;
+
+        .icon {
+            flex-grow: 0;
+            flex-shrink: 0;
+            flex-basis: auto;
+            margin-right: 1em;
+        }
+
+        span {
+            flex-grow: 1;
+        }
+
+        &.is-right {
+            .icon {
+                margin-right: 0;
+                margin-left: 1em
+            }
+        }
+    }
+
     @each $name, $pair in $colors {
 
         $color: nth($pair, 1);
@@ -83,7 +105,7 @@ $block-list-highlight-width: 5px !default;
             background: $color;
             color: $color-invert;
         }
-        
+
         li.is-#{$name}.is-outlined {
             @include outlined($color);
         }
@@ -106,4 +128,4 @@ $block-list-highlight-width: 5px !default;
             }
         }
     }
-}
+}

docs/index.html

@@ -5,7 +5,7 @@
 menubar: menu
 hero_height: is-medium
 ---
-        
+
 <div class="columns is-multiline">
     <div class="column is-12 has-text-right">
         <a href="https://github.com/chrisrhymes/bulma-block-list/stargazers">
@@ -200,6 +200,97 @@ <h2 id="how-to-use">How to use</h2>
         </ul>
     </div>
 
+    <div class="column is-12">
+        <p class="title is-4" id="has-icon">Has Icon</p>
+        <p>In v0.5 you can add icons</p>
+        <div class="highlight highlight-text-html-basic">
+            <pre>
+&lt;li class="has-icon"&gt;
+    &lt;span class="icon"&gt;
+        &lt;i class="fas fa-plane"&gt;&lt;/i&gt;
+    &lt;/span&gt;
+    &lt;span&gt;Item one&lt;/span&gt;
+&lt;/li&gt;
+
+// .is-right
+&lt;li class="has-icon is-right"&gt;
+    &lt;span&gt;Item one&lt;/span&gt;
+    &lt;span class="icon"&gt;
+        &lt;i class="fas fa-plane"&gt;&lt;/i&gt;
+    &lt;/span&gt;
+&lt;/li&gt;</pre>
+        </div>
+    </div>
+    <div class="column is-4">
+        <p class="title is-5">li.has-icon</p>
+        <ul class="block-list">
+            <li class="has-icon">
+                <span class="icon">
+                    <i class="fas fa-plane"></i>
+                </span>
+                <span>Item one</span>
+            </li>
+            <li class="has-icon">
+                <span class="icon">
+                    <i class="fas fa-paper-plane"></i>
+                </span>
+                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat eu massa sodales auctor.</span>
+            </li>
+            <li>
+                <span class="icon">
+                    <i class="fas fa-plane"></i>
+                </span>
+                <span>Item Three</span>
+            </li>
+        </ul>
+    </div>
+    <div class="column is-4">
+        <p class="title is-5">li.has-icon.is-right</p>
+        <ul class="block-list">
+            <li class="has-icon is-right">
+                <span>Item one</span>
+                <span class="icon">
+                    <i class="fas fa-plane"></i>
+                </span>
+            </li>
+            <li class="has-icon is-right">
+                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat eu massa sodales auctor.</span>
+                <span class="icon">
+                    <i class="fas fa-paper-plane"></i>
+                </span>
+            </li>
+            <li class="has-icon is-right">
+                <span>Item Three</span>
+                <span class="icon">
+                    <i class="fas fa-plane"></i>
+                </span>
+            </li>
+        </ul>
+    </div>
+    <div class="column is-4">
+        <p class="title is-5">Combining styles</p>
+        <ul class="block-list has-radius">
+            <li class="has-icon">
+                <span class="icon">
+                    <i class="fas fa-plane"></i>
+                </span>
+                <span>Item one</span>
+            </li>
+            <li class="has-icon is-highlighted is-primary">
+                <span class="icon">
+                    <i class="fas fa-paper-plane"></i>
+                </span>
+                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat eu massa sodales auctor.</span>
+            </li>
+            <li>
+                <span class="icon">
+                    <i class="fas fa-plane"></i>
+                </span>
+                <span>Item Three</span>
+            </li>
+        </ul>
+    </div>
+
     <div class="column is-12">
         <p class="title is-4" id="list-item-overrides">List Item Overrides</p>
         <p>In v0.3 you can override the classes on a list item</p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma-block-list",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "A simple scss package extending Bulma with block style list elements",
   "homepage": "https://github.com/chrisrhymes/bulma-block-list#readme",
   "bugs": {