feat(heart): added new heart reaction state

added the `is-half` and `is-transparent` to the `heart` reaction

feat #246

docs/script.js

@@ -444,6 +444,8 @@ const sampleCollection = [
     code: `<section class="icon-list">
   <!-- heart -->
   <i class="nes-icon is-large heart"></i>
+  <i class="nes-icon is-large is-half heart"></i>
+  <i class="nes-icon is-large is-transparent heart"></i>
   <i class="nes-icon is-large heart is-empty"></i>
 
   <!-- star -->

scss/icons/heart.scss

@@ -19,6 +19,46 @@ $icon-heart: (
   (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
 );
 
+// prettier-ignore
+$icon-heart-half: (
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,2,2,2,0,0,0,0,0,2,2,2,0,0,0),
+  (0,2,3,3,3,2,0,0,0,2,0,0,0,2,0,0),
+  (2,3,1,1,3,3,2,0,2,0,0,0,0,0,2,0),
+  (2,3,1,3,3,3,3,2,0,0,0,0,0,0,2,0),
+  (2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
+  (2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
+  (2,3,3,3,3,3,3,3,0,0,0,0,0,0,2,0),
+  (0,2,3,3,3,3,3,3,0,0,0,0,0,2,0,0),
+  (0,0,2,3,3,3,3,3,0,0,0,0,2,0,0,0),
+  (0,0,0,2,3,3,3,3,0,0,0,2,0,0,0,0),
+  (0,0,0,0,2,3,3,3,0,0,2,0,0,0,0,0),
+  (0,0,0,0,0,2,3,3,0,2,0,0,0,0,0,0),
+  (0,0,0,0,0,0,2,4,2,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
+);
+
+// prettier-ignore
+$icon-heart-transparent: (
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,2,2,2,0,0,0,0,0,2,2,2,0,0,0),
+  (0,2,0,0,0,2,0,0,0,2,0,0,0,2,0,0),
+  (2,0,0,0,0,0,2,0,2,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,2,0,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
+  (2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0),
+  (0,2,0,0,0,0,0,0,0,0,0,0,0,2,0,0),
+  (0,0,2,0,0,0,0,0,0,0,0,0,2,0,0,0),
+  (0,0,0,2,0,0,0,0,0,0,0,2,0,0,0,0),
+  (0,0,0,0,2,0,0,0,0,0,2,0,0,0,0,0),
+  (0,0,0,0,0,2,0,0,0,2,0,0,0,0,0,0),
+  (0,0,0,0,0,0,2,0,2,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
+);
+
 $icon-heart-empty-colors: (#adafbb);
 // prettier-ignore
 $icon-heart-empty: (

scss/icons/icons.scss

@@ -70,6 +70,12 @@
   &.heart::before {
     @include pixelize($default-size, $icon-heart, $icon-heart-colors);
   }
+  &.heart.is-half::before {
+    @include pixelize($default-size, $icon-heart-half, $icon-heart-colors);
+  }
+  &.heart.is-transparent::before {
+    @include pixelize($default-size, $icon-heart-transparent, $icon-heart-colors);
+  }
   &.heart.is-empty::before {
     @include pixelize($default-size, $icon-heart-empty, $icon-heart-empty-colors);
   }

story/_helpers/icons.js

@@ -30,6 +30,12 @@ export const Sprites = {
   'snes-jp-logo': 'snes-jp-logo',
 };
 
+export const Reactions = {
+  heart: 'heart',
+  star: 'star',
+  like: 'like',
+};
+
 export const Size = {
   default: '',
   'is-small': 'is-small',

story/icons/icons.stories.js

@@ -3,8 +3,10 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import Icons from './icons.template';
 import Sprites from './sprites.template';
+import Reactions from './reactions.template';
 
 storiesOf('Icons', module)
   .addDecorator(withKnobs)
   .add('Icons', () => Icons())
-  .add('Sprites', () => Sprites());
+  .add('Sprites', () => Sprites())
+  .add('Reactions', () => Reactions());

story/icons/reactions.template.js

@@ -0,0 +1,33 @@
+import { select } from '@storybook/addon-knobs';
+import classNames from 'classnames';
+
+import { Reactions } from '../_helpers/icons';
+
+export default () => {
+  const reactionIcon = select('Reaction Icon', {
+    ...Reactions,
+  }, 'heart');
+
+  const reactionSize = select('Size Class', {
+    'is-small': 'is-small',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, 'is-large');
+
+  const reactionFill = select('Fill Class', {
+    default: '',
+    'is-half': 'is-half',
+    'is-transparent': 'is-transparent',
+    'is-empty': 'is-empty',
+  });
+
+  const reactionClasses = classNames(
+    'nes-icon',
+    reactionIcon,
+    reactionSize,
+    reactionFill,
+  );
+  return `
+    <i class="${reactionClasses}"></i>
+  `;
+};