tweaks

Author: selvagsz

stories/PowerSelect.stories.js

@@ -23,7 +23,7 @@ const PowerSelectWithHooks = props => {
         setCountry(args.option);
       }}
       optionLabelPath={text('optionLabelPath', 'name')}
-      placeholder={text('placeholder', 'Select your favourite country')}
+      placeholder={text('placeholder', 'Select your favorite country')}
       disabled={boolean('disabled', false)}
       showClear={boolean('showClear', true)}
       searchEnabled={boolean('searchEnabled', true)}
@@ -42,7 +42,7 @@ powerSelect.add('customOptionComponent', () => (
       return (
         <div>
           <img className="flag" src={option.flag} />
-          <span>{option.name}</span>
+          <span>{option.name}&nbsp;</span>
           <small className="code">{option.code}</small>
         </div>
       );

stories/PowerSelectMultiple.stories.js

@@ -19,7 +19,7 @@ const PowerSelectMultipleWithHooks = props => {
         setSelectedCountries(args.options);
       }}
       optionLabelPath={text('optionLabelPath', 'name')}
-      placeholder={text('placeholder', 'Select your favourite countries')}
+      placeholder={text('placeholder', 'Select your favorite countries')}
       disabled={boolean('disabled', false)}
       showClear={boolean('showClear', true)}
       searchIndices={array('searchIndices', ['name', 'code'])}

stories/PowerSelectTypeAhead.stories.js

@@ -19,7 +19,7 @@ const TypeAheadWithHooks = () => {
         setCountry(args.option);
       }}
       optionLabelPath={text('optionLabelPath', 'name')}
-      placeholder={text('placeholder', 'Select your favourite country')}
+      placeholder={text('placeholder', 'Select your favorite country')}
       disabled={boolean('disabled', false)}
       showClear={boolean('showClear', true)}
       searchPlaceholder={text('searchPlaceholder', 'Search...')}

docs/app/index.scss renamed to stories/index.scss

@@ -37,15 +37,6 @@ html, body {
   @include placeholder()
 }
 
-.icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
-  fill: currentColor;
-}
-
 .flag {
   width: 20px;
   height: 13px;
@@ -77,8 +68,17 @@ html, body {
   border-top: 1px dashed rgba(89, 96, 206, 0.5);
 }
 
+.code {
+  float: right;
+  font-size: 11px;
+  color: #666;
+  letter-spacing: 2px;
+  margin-top: 4px;
+}
+
 .highlight {
   background-color: yellow;
+  font-weight: bold;
 }
 
 .help {

stories/index.stories.js

@@ -1,2 +1,2 @@
 import 'src/styles';
-import 'docs/app/index.scss';
+import './index.scss';