From b44a717fcfc77cc65c165428e8bdbf5623678ee8 Mon Sep 17 00:00:00 2001
From: Takashi Kitajima <inc@2inc.org>
Date: Tue, 21 Aug 2018 14:27:26 +0900
Subject: [PATCH] Fix #7

---
 block/pricing-table/block.js                  |   8 +-
 block/rating-box/_block.scss                  |  42 +++++
 block/rating-box/block.js                     | 150 ++++++++++++++++++
 block/section-has-items/block.js              |   2 +-
 .../snow-monkey-awesome-custom-blocks-ja.mo   | Bin 3490 -> 3782 bytes
 .../snow-monkey-awesome-custom-blocks-ja.po   |  81 +++++++---
 src/css/blocks.scss                           |   1 +
 src/js/blocks.js                              |   1 +
 8 files changed, 253 insertions(+), 32 deletions(-)
 create mode 100644 block/rating-box/_block.scss
 create mode 100644 block/rating-box/block.js

diff --git a/block/pricing-table/block.js b/block/pricing-table/block.js
index 69f0ed5e..dda7b52d 100644
--- a/block/pricing-table/block.js
+++ b/block/pricing-table/block.js
@@ -1,7 +1,5 @@
 'use strict';
 
-import classnames from 'classnames';
-
 const { get, times } = lodash;
 const { registerBlockType } = wp.blocks;
 const { RichText, InspectorControls, ColorPalette } = wp.editor;
@@ -67,7 +65,7 @@ registerBlockType('snow-monkey-awesome-custom-blocks/pricing-table', {
 
             return (
               <PanelBody
-                title={ sprintf( __('(%s) Button Settings', 'snow-monkey-awesome-custom-blocks'), index + 1) }
+                title={ sprintf( __('(%d) Button Settings', 'snow-monkey-awesome-custom-blocks'), index + 1) }
                 initialOpen={ false }
                 >
                 <TextControl
@@ -110,7 +108,7 @@ registerBlockType('snow-monkey-awesome-custom-blocks/pricing-table', {
           } ) }
         </InspectorControls>
 
-        <div className={ classnames('smacb-pricing-table', [`smacb-pricing-table--${columns}`]) }>
+        <div className={ `smacb-pricing-table smacb-pricing-table--${columns}` }>
           <div className="smacb-pricing-table__row">
             { times(columns, (index) => {
               const title              = get(content, [index, 'title'], []);
@@ -193,7 +191,7 @@ registerBlockType('snow-monkey-awesome-custom-blocks/pricing-table', {
     const { content, columns } = attributes;
 
     return (
-      <div className={ classnames('smacb-pricing-table', [`smacb-pricing-table--${columns}`]) }>
+      <div className={ `smacb-pricing-table smacb-pricing-table--${columns}` }>
         <div className="smacb-pricing-table__row">
           { times(columns, (index) => {
             const title              = get(content, [index, 'title'], []);
diff --git a/block/rating-box/_block.scss b/block/rating-box/_block.scss
new file mode 100644
index 00000000..9f85a87e
--- /dev/null
+++ b/block/rating-box/_block.scss
@@ -0,0 +1,42 @@
+.smacb-rating-box {
+  &__body {}
+
+  &__item {
+    &:not(:first-child) {
+      @include _padding-top(.5);
+    }
+
+    &__title {
+      font-weight: bold;
+    }
+
+    &__evaluation {
+      &__bar,
+      &__rating {
+        height: 10px;
+        border-radius: 3px;
+      }
+
+      &__bar {
+        position: relative;
+        background-color: _lighter($_color-gray);
+      }
+
+      &__rating {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: #f9bb2d;
+      }
+
+      &__numeric {
+        position: absolute;
+        top: $_base-font-size-px * -1;
+        right: 0;
+        @include _font-size($_base-font-size-px - 4);
+        line-height: 1;
+        color: $_color-gray;
+      }
+    }
+  }
+}
diff --git a/block/rating-box/block.js b/block/rating-box/block.js
new file mode 100644
index 00000000..42ab7a7e
--- /dev/null
+++ b/block/rating-box/block.js
@@ -0,0 +1,150 @@
+'use strict';
+
+const { get, times } = lodash;
+const { registerBlockType } = wp.blocks;
+const { RichText, InspectorControls, ColorPalette } = wp.editor;
+const { PanelBody, RangeControl, BaseControl } = wp.components;
+const { Fragment } = wp.element;
+const { __, sprintf } = wp.i18n;
+
+registerBlockType('snow-monkey-awesome-custom-blocks/rating-box', {
+  title: __('Rating box', 'snow-monkey-awesome-custom-blocks'),
+  icon: 'editor-alignleft',
+  category: 'smacb',
+  attributes: {
+    ratings: {
+      type: 'array',
+      default: [
+        {
+          title: [],
+          rating: 0,
+          color: '',
+        }
+      ],
+    },
+    rows: {
+      type: 'number',
+      default: 1,
+    },
+  },
+
+  edit({ attributes, setAttributes, isSelected }) {
+    const { rows, ratings } = attributes;
+
+    const generateUpdatedAttribute = (parent, index, attribute, value) => {
+      let newParent = [...parent];
+      newParent[ index ] = get(newParent, index, {});
+      newParent[ index ][ attribute ] = value;
+      return newParent;
+    }
+
+    return (
+      <Fragment>
+        <InspectorControls>
+          <PanelBody title={ __('Rating box Settings', 'snow-monkey-awesome-custom-blocks') }>
+            <RangeControl
+              label={ __('Rows', 'snow-monkey-awesome-custom-blocks') }
+              value={ rows }
+              onChange={ value => setAttributes({ rows: value }) }
+              min="1"
+              max="10"
+            />
+          </PanelBody>
+
+          { times(rows, (index) => {
+            const title  = get(ratings, [index, 'title'], []);
+            const rating = get(ratings, [index, 'rating'], 0);
+            const color  = get(ratings, [index, 'color'], '');
+
+            return (
+              <PanelBody
+                title={ sprintf( __('(%d) Rating Settings', 'snow-monkey-awesome-custom-blocks'), index + 1) }
+                initialOpen={ false }
+                >
+                <RangeControl
+                  label={ __('Rating', 'snow-monkey-awesome-custom-blocks') }
+                  value={ rating }
+                  onChange={ value => setAttributes({ ratings: generateUpdatedAttribute(ratings, index, 'rating', value) }) }
+                  min="1"
+                  max="10"
+                />
+
+                <BaseControl label={ __('Color', 'snow-monkey-awesome-custom-blocks') }>
+                  <ColorPalette
+                    value={ color }
+                    onChange={ value => setAttributes({ ratings: generateUpdatedAttribute(ratings, index, 'color', value) }) }
+                  />
+                </BaseControl>
+              </PanelBody>
+            );
+          } ) }
+        </InspectorControls>
+
+        <div className="smacb-rating-box">
+          <div className="smacb-rating-box__body">
+            { times(rows, (index) => {
+              const title  = get(ratings, [index, 'title'], []);
+              const rating = get(ratings, [index, 'rating'], 0);
+              const color  = get(ratings, [index, 'color'], '');
+
+              return (
+                <div className="smacb-rating-box__item">
+                  <RichText
+                    className="smacb-rating-box__item__title"
+                    placeholder={ __('Write title…', 'snow-monkey-awesome-custom-blocks') }
+                    value={ title }
+                    formattingControls={ [] }
+                    multiline={ false }
+                    onChange={ value => setAttributes({ ratings: generateUpdatedAttribute(ratings, index, 'title', value) }) }
+                  />
+
+                  <div className="smacb-rating-box__item__evaluation">
+                    <div className="smacb-rating-box__item__evaluation__bar">
+                      <div className="smacb-rating-box__item__evaluation__numeric">
+                        {rating}
+                      </div>
+                      <div className="smacb-rating-box__item__evaluation__rating" style={{ width: `${rating * 10}%`, backgroundColor: color }}></div>
+                    </div>
+                  </div>
+                </div>
+              );
+            } ) }
+          </div>
+        </div>
+      </Fragment>
+    );
+  },
+
+  save({ attributes }) {
+    const { rows, ratings } = attributes;
+
+    return (
+      <div className="smacb-rating-box">
+        <div className="smacb-rating-box__body">
+          { times(rows, (index) => {
+            const title  = get(ratings, [index, 'title'], []);
+            const rating = get(ratings, [index, 'rating'], 0);
+            const color  = get(ratings, [index, 'color'], '');
+
+            return (
+              <div className="smacb-rating-box__item">
+                <div className="smacb-rating-box__item__title" >
+                  { title }
+                </div>
+
+                <div className="smacb-rating-box__item__evaluation">
+                  <div className="smacb-rating-box__item__evaluation__bar">
+                    <div className="smacb-rating-box__item__evaluation__numeric">
+                      {rating}
+                    </div>
+                    <div className="smacb-rating-box__item__evaluation__rating" style={{ width: `${rating * 10}%`, backgroundColor: color }}></div>
+                  </div>
+                </div>
+              </div>
+            );
+          } ) }
+        </div>
+      </div>
+    );
+  },
+} );
diff --git a/block/section-has-items/block.js b/block/section-has-items/block.js
index 033c861b..b5c0d1f6 100644
--- a/block/section-has-items/block.js
+++ b/block/section-has-items/block.js
@@ -100,7 +100,7 @@ registerBlockType('snow-monkey-awesome-custom-blocks/section-has-items', {
 
             return (
               <PanelBody
-                title={ sprintf( __('(%s) Button Settings', 'snow-monkey-awesome-custom-blocks'), index + 1) }
+                title={ sprintf( __('(%d) Button Settings', 'snow-monkey-awesome-custom-blocks'), index + 1) }
                 initialOpen={ false }
                 >
                 <TextControl
diff --git a/languages/snow-monkey-awesome-custom-blocks-ja.mo b/languages/snow-monkey-awesome-custom-blocks-ja.mo
index ac79f69d61625ca9ca1835c69685429deedbdafd..692ac9be1d392214079a73d725ec8e22715f820b 100644
GIT binary patch
delta 1586
zcmaKsOKgl$6vyxAbUHPIQSY|HR9k&ej92TCYFOBKB%MWrP3sY1(UOjmMlvyz2tgu7
z7eqvfuu#MZ$|Ojz5JDvuL`CuiwULNeh%Ws8-&_)rIGJ;Q_n!MW=bn4MIal&HoOoB{
z?J>wQv=klo7!!kU^JtLjd}GGL8p}qgshDL8<YzY0jD~G61b4y$xZjQs!64&PmKP!C
zB+LzKxD9<Qcm&75r*I^E3&+7vcK#>iXGXAC4*XCKLvSiAgGI0jx`Dy~;}*!zY^E6t
zcfis3H~Z)mVmJ)Fum`%4x(kfC2uESRY55Q;u$NGQ4MGL{)!IEorE`K%0gk0nU{j#h
zH(0KQA^e+GI%RMdl%q7{EYl0+=n~X{8K@iGhFX`k_9svocy8_QEx$lL$*^U>pF6i0
zDuZP((KW)DDmr@OGk6Qb43wh*%U4htc@34?k5C!=VeNV3SN0Ipx^k$D%(detJHG~M
zU#p$p5g`8)Fmz)mfybb3ei<r&4Ah2OPzOGMi{SuNN&|S4!&(~cuZP+nv*Qg=`?{?C
zfaOs*8T*MK`KNFCXcWjDD2Feg9K3-Q@CVclr;>L$h*~y4Iam&>;5w+M++%qX>fF0_
zJOJhR8`L?$1P>&K<1E8aH?M-a(M+g?tDpi{3w1!79d}zEwf3`6>-(YJ_&(%|c7sr0
zsuS&(=z^+0GZ)pjuZ<0;q%McQS_L49=I~c5XS#@_8l8mB(*RkD)}mb6m2z5LlK-59
zTX58%D@$m}w42f?P@fC6=~h2Q>{fFPlvJX#(P?NgItN{Vs*r!nLOS}^e~X@S209as
zpaK2W&7wmgo9XC$R0SrPi0VxxdWuD8y$02lTWTUJcE{r#?UC5lczk>Nw$7ZfxlMy~
z)|>Toq&xGUh23#vQ^#JDn^O1Bo^+$H)Z5&#r!%wOcfnH-jYJnLnYSpN?=Q3c`b?ca
z>#4<?lRE7r?>VW=(51c)S5D=;IjPG|D(j>UILY%&Imv73?}eZ9h7MiN434buto(Og
h$D~qD@~V^UH~*i`IXWIJ@eTDJ`Pg$UQye_#`2~D?&G`TT

delta 1299
zcmY+@KWGzS7{~GV+Wa$r)U;7+Vryzz+ca9+L~T{1Aav-Wh~iMeK_?ZeU?U<*s2v;>
zmk?a)B04w(ln8<i=paQps6(KO6eNPJiztE>GWh*n-VVOx$>-kp?tSjL_q|)_e4HpO
zw|Pp2HbU$mYK}1zc)yiD+H;RFF?@j<TCgsnm;MLbh&9}db@bzJ+izf)euRr<9F?c9
z*)Nz32R;TyaTAVV5Kmw`PTKQRsKj~Hjc#KXKEO6CqY}Tx5WYj@{e)3mLKV7-8*mLh
zreI79SE({T>Vg<XFl8M^w=i@ILlrWKD&Rb-&>3q9Rp2x1#@DEPpOK&W&Y$x9L=X2j
z4GvVfLsnhrMOMwUqY`!4@w9aWRp_|&G%E20<e|(ZyxwBWRn*pf<8hV0Vb$IBz#c4U
z>7pEHNqX#wLDcvW+dqz4fwQ)M*`B|Fns?8hFX0yYPceb>sKS;|*Da&+tl%MB3$p%N
z!Ymu6icX>?o<mK%Y5Oy%iI41f+4>SY7@tSYub~R~g1X@!)Pp#jRK6H0PXhZe6K4Ij
zN2eH&c~pXjwqHiw;3F!*3M%mr>tEE;wz6+3+>g30g}U(oYW`8%KV!XU$8Qxl(1a3d
z@8*y%@V_=hPoF2NW(EoEz21xMgqm)=m(b^XkkE?iAylYZx{3R*qSRE>0iv*zzZ{{~
zOYlIZhuB7FMTUt0v5VlHa-Vh|>XTBz>n+K_9wJNd-nmULUyA5&cFh2?Bks$sp$zY^
zblYyL_D3tC{b4cOwx9nvq0ek9(Mg#8-fQXPvHbM(m8s%{w^|JO-WPxQ;+3fXiQ^wi
vW^;#gqs3~Vd;PfbHBfcJ%&E`L)$hEi&sK_y!PUyEP|7KGMdFpQ$X(|j!9i^6

diff --git a/languages/snow-monkey-awesome-custom-blocks-ja.po b/languages/snow-monkey-awesome-custom-blocks-ja.po
index b874ae01..117a27b6 100644
--- a/languages/snow-monkey-awesome-custom-blocks-ja.po
+++ b/languages/snow-monkey-awesome-custom-blocks-ja.po
@@ -4,8 +4,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Snow Monkey Awesome Custom Blocks\n"
 "Report-Msgid-Bugs-To: https://make.wordpress.org/polyglots/\n"
-"POT-Creation-Date: 2018-08-20 23:38+0900\n"
-"PO-Revision-Date: 2018-08-20 23:38+0900\n"
+"POT-Creation-Date: 2018-08-21 14:26+0900\n"
+"PO-Revision-Date: 2018-08-21 14:27+0900\n"
 "Last-Translator: inc2734 <inc@2inc.org>\n"
 "Language-Team: Takashi Kitajima <inc@2inc.org>\n"
 "Language: ja_JP\n"
@@ -77,9 +77,10 @@ msgid "Box Settings"
 msgstr "ボックス設定"
 
 #: block/box/block.js:36 block/btn-box/block.js:60 block/btn-box/block.js:95
-#: block/btn/block.js:88 block/pricing-table/block.js:95
+#: block/btn/block.js:88 block/pricing-table/block.js:93
 #: block/section-has-image/block.js:95 block/section-has-items/block.js:87
 #: block/section-has-items/block.js:128 block/section/block.js:35
+#: dist/js/blocks-build.js:12
 msgid "Background Color"
 msgstr "背景色"
 
@@ -88,7 +89,7 @@ msgid "Border Color"
 msgstr "枠線の色"
 
 #: block/box/block.js:50 block/btn-box/block.js:102 block/btn/block.js:95
-#: block/pricing-table/block.js:102 block/section-has-items/block.js:135
+#: block/pricing-table/block.js:100 block/section-has-items/block.js:135
 msgid "Text Color"
 msgstr "文字色"
 
@@ -102,7 +103,7 @@ msgstr "ボタンボックス"
 
 #: block/btn-box/block.js:33 block/btn-box/block.js:130 block/btn/block.js:12
 #: block/btn/block.js:20 block/btn/block.js:113 block/btn/block.js:150
-#: block/pricing-table/block.js:175 block/section-has-items/block.js:237
+#: block/pricing-table/block.js:173 block/section-has-items/block.js:237
 msgid "Button"
 msgstr "ボタン"
 
@@ -115,26 +116,26 @@ msgid "Button Settings"
 msgstr "ボタン設定"
 
 #: block/btn-box/block.js:74 block/btn/block.js:51
-#: block/pricing-table/block.js:74 block/section-has-items/block.js:107
+#: block/pricing-table/block.js:72 block/section-has-items/block.js:107
 msgid "URL"
 msgstr "URL"
 
 #: block/btn-box/block.js:80 block/btn/block.js:57
-#: block/pricing-table/block.js:80 block/section-has-items/block.js:113
+#: block/pricing-table/block.js:78 block/section-has-items/block.js:113
 msgid "Target"
 msgstr "Target"
 
 #: block/btn-box/block.js:86 block/btn/block.js:63
-#: block/pricing-table/block.js:85 block/section-has-items/block.js:118
+#: block/pricing-table/block.js:83 block/section-has-items/block.js:118
 msgid "_self"
 msgstr "_self"
 
 #: block/btn-box/block.js:90 block/btn/block.js:67
-#: block/pricing-table/block.js:89 block/section-has-items/block.js:122
+#: block/pricing-table/block.js:87 block/section-has-items/block.js:122
 msgid "_blank"
 msgstr "_blank"
 
-#: block/btn-box/block.js:119 block/pricing-table/block.js:150
+#: block/btn-box/block.js:119 block/pricing-table/block.js:148
 #: block/section-has-items/block.js:211
 msgid "Write lede…"
 msgstr "リード文を書く…"
@@ -151,39 +152,65 @@ msgstr "ノーマルボタン"
 msgid "Full button"
 msgstr "フルサイズのボタン"
 
-#: block/pricing-table/block.js:13
+#: block/pricing-table/block.js:11
 msgid "Pricing table"
 msgstr "価格表"
 
-#: block/pricing-table/block.js:52 block/section-has-items/block.js:70
+#: block/pricing-table/block.js:50 block/section-has-items/block.js:70
 msgid "Columns Settings"
 msgstr "カラム設定"
 
-#: block/pricing-table/block.js:54 block/section-has-items/block.js:72
+#: block/pricing-table/block.js:52 block/section-has-items/block.js:72
 msgid "Columns"
 msgstr "カラム"
 
-#: block/pricing-table/block.js:70 block/section-has-items/block.js:103
+#: block/pricing-table/block.js:68 block/section-has-items/block.js:103
 #, javascript-format
-msgid "(%s) Button Settings"
-msgstr "(%s) ボタン設定"
+msgid "(%d) Button Settings"
+msgstr "(%d) ボタン設定"
 
-#: block/pricing-table/block.js:131 block/section-has-bgimage/block.js:119
-#: block/section-has-image/block.js:115 block/section-has-items/block.js:158
-#: block/section-has-items/block.js:203 block/section/block.js:53
+#: block/pricing-table/block.js:129 block/rating-box/block.js:94
+#: block/section-has-bgimage/block.js:122 block/section-has-image/block.js:115
+#: block/section-has-items/block.js:158 block/section-has-items/block.js:203
+#: block/section/block.js:53 dist/js/blocks-build.js:12
 msgid "Write title…"
 msgstr "タイトルを書く…"
 
-#: block/pricing-table/block.js:140
+#: block/pricing-table/block.js:138
 msgid "Write price…"
 msgstr "価格を書く…"
 
+#: block/rating-box/block.js:11
+msgid "Rating box"
+msgstr "レーティングボックス"
+
+#: block/rating-box/block.js:44
+msgid "Rating box Settings"
+msgstr "レーティングボックス設定"
+
+#: block/rating-box/block.js:46
+msgid "Rows"
+msgstr "行数"
+
+#: block/rating-box/block.js:61
+#, javascript-format
+msgid "(%d) Rating Settings"
+msgstr "(%d) レーティング設定"
+
+#: block/rating-box/block.js:65
+msgid "Rating"
+msgstr ""
+
+#: block/rating-box/block.js:72
+msgid "Color"
+msgstr "色"
+
 #: block/section-has-bgimage/block.js:12
 msgid "Section (has background image)"
 msgstr "セクション（背景画像あり）"
 
 #: block/section-has-bgimage/block.js:59 block/section-has-image/block.js:62
-#: block/section/block.js:34
+#: block/section/block.js:34 dist/js/blocks-build.js:12
 msgid "Section Settings"
 msgstr "セクション設定"
 
@@ -204,6 +231,7 @@ msgid "Contents alignment"
 msgstr "コンテンツの水平位置"
 
 #: block/section-has-bgimage/block.js:82 block/section-has-image/block.js:73
+#: dist/js/blocks-build.js:12
 msgid "Left side"
 msgstr "左側"
 
@@ -212,26 +240,27 @@ msgid "Center"
 msgstr "中央"
 
 #: block/section-has-bgimage/block.js:90 block/section-has-image/block.js:69
+#: dist/js/blocks-build.js:12
 msgid "Right side"
 msgstr "右側"
 
-#: block/section-has-image/block.js:12
+#: block/section-has-image/block.js:12 dist/js/blocks-build.js:12
 msgid "Section (has image)"
 msgstr "セクション（画像あり）"
 
-#: block/section-has-image/block.js:64
+#: block/section-has-image/block.js:64 dist/js/blocks-build.js:12
 msgid "Image Position"
 msgstr "画像の位置"
 
-#: block/section-has-image/block.js:80
+#: block/section-has-image/block.js:80 dist/js/blocks-build.js:12
 msgid "Image Column Size"
 msgstr "画像カラムのサイズ"
 
-#: block/section-has-image/block.js:85
+#: block/section-has-image/block.js:85 dist/js/blocks-build.js:12
 msgid "75%"
 msgstr "75%"
 
-#: block/section-has-image/block.js:89
+#: block/section-has-image/block.js:89 dist/js/blocks-build.js:12
 msgid "33%"
 msgstr "33%"
 
diff --git a/src/css/blocks.scss b/src/css/blocks.scss
index 9fafaf9e..69f7feda 100644
--- a/src/css/blocks.scss
+++ b/src/css/blocks.scss
@@ -24,3 +24,4 @@ $_font-path: '../../../../themes/snow-monkey/vendor/inc2734/wp-basis/src/assets/
 @import '../../block/section-has-bgimage/block';
 @import '../../block/section-has-items/block';
 @import '../../block/btn-box/block';
+@import '../../block/rating-box/block';
diff --git a/src/js/blocks.js b/src/js/blocks.js
index 1e1046c6..848bd334 100644
--- a/src/js/blocks.js
+++ b/src/js/blocks.js
@@ -10,3 +10,4 @@ import '../../block/section-has-image/block.js';
 import '../../block/section-has-bgimage/block.js';
 import '../../block/section-has-items/block.js';
 import '../../block/btn-box/block.js';
+import '../../block/rating-box/block.js';