fix(checkbox): integrate new icons

n

Author: Alyssa

CHANGELOG.md

@@ -1,3 +1,68 @@
+# [0.5.0](https://github.com/zepdev/zeppelin-element-library/compare/v0.4.5...v0.5.0) (2019-04-16)
+
+
+### Bug Fixes
+
+* **icons:** uncomment out file to all fonts to be bundled ([977fa65](https://github.com/zepdev/zeppelin-element-library/commit/977fa65))
+
+
+### Features
+
+* **grid:** started grid, added breakpoints ([d844f1a](https://github.com/zepdev/zeppelin-element-library/commit/d844f1a))
+* **theme:** allows for new themes, zeppelin, cat and rental ([4bb94bb](https://github.com/zepdev/zeppelin-element-library/commit/4bb94bb))
+
+## [0.4.5](https://github.com/zepdev/zeppelin-element-library/compare/v0.4.4...v0.4.5) (2019-04-12)
+
+
+### Bug Fixes
+
+* **bundler:** remove double zepicon naming ([b763376](https://github.com/zepdev/zeppelin-element-library/commit/b763376))
+
+## [0.4.4](https://github.com/zepdev/zeppelin-element-library/compare/v0.4.3...v0.4.4) (2019-04-12)
+
+
+### Bug Fixes
+
+* **a11y:** added sr-only for icons ([2d1a58f](https://github.com/zepdev/zeppelin-element-library/commit/2d1a58f))
+* **rename icons for build:** rename icons for build ([15893ac](https://github.com/zepdev/zeppelin-element-library/commit/15893ac))
+
+## [0.4.3](https://github.com/zepdev/zeppelin-element-library/compare/v0.4.2...v0.4.3) (2019-04-12)
+
+
+### Bug Fixes
+
+* **bundler:** changed icon naming ([b0ecf3e](https://github.com/zepdev/zeppelin-element-library/commit/b0ecf3e))
+* **bundler:** fix icon naming in bundler ([05d14e7](https://github.com/zepdev/zeppelin-element-library/commit/05d14e7))
+* **icons:** new icons svg for development use ([1328bfb](https://github.com/zepdev/zeppelin-element-library/commit/1328bfb))
+
+## [0.4.2](https://github.com/zepdev/zeppelin-element-library/compare/v0.4.1...v0.4.2) (2019-04-12)
+
+
+### Bug Fixes
+
+* **icons:** add back in icons ([7d2302e](https://github.com/zepdev/zeppelin-element-library/commit/7d2302e))
+
+## [0.4.1](https://github.com/zepdev/zeppelin-element-library/compare/v0.4.0...v0.4.1) (2019-04-11)
+
+
+### Bug Fixes
+
+* **npm:** Updated to react-scripts to minimum dependency ([1311e73](https://github.com/zepdev/zeppelin-element-library/commit/1311e73))
+
+# [0.4.0](https://github.com/zepdev/zeppelin-element-library/compare/v0.3.6...v0.4.0) (2019-04-10)
+
+
+### Bug Fixes
+
+* **bundle-script:** Removed shell hash removal ([198962c](https://github.com/zepdev/zeppelin-element-library/commit/198962c))
+* **Circle:** Added missing filters to the other jobs ([2d82fa0](https://github.com/zepdev/zeppelin-element-library/commit/2d82fa0))
+* **Circle:** Added tags filter because of transient dependency ([3dfba30](https://github.com/zepdev/zeppelin-element-library/commit/3dfba30))
+
+
+### Features
+
+* **tag:** new element added: tag ([3e52fd4](https://github.com/zepdev/zeppelin-element-library/commit/3e52fd4))
+
 ## [0.3.6](https://github.com/zepdev/zeppelin-element-library/compare/v0.3.5...v0.3.6) (2019-04-10)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zeppelin-element-library",
-  "version": "0.3.6",
+  "version": "0.5.0",
   "description": "Zeppelin Elements Library is an element library for digital Zeppelin products.",
   "main": "bundle/zeppelin-element-library.cjs.js",
   "module": "bundle/zeppelin-element-library.esm.js",

src/App.js

@@ -3,9 +3,13 @@ import elements from './elements/elements';
 import ButtonPage from './elements/button/ButtonPage.jsx';
 import TagPage from './elements/tag/TagPage.jsx';
 import CheckboxPage from './elements/checkbox/CheckboxPage.jsx';
+import InputPage from './elements/input/InputPage.jsx';
+import NumberInputPage from './elements/numberinput/NumberInputPage.jsx';
 import './base_bundle_entry.scss';
-import './zeppelin-element-library.css';
-// import './icons.font';
+import './icons.font';
+/* TODO: remove this import, the css itself and the icont font files,
+after the files are extracted in a separate repo/npm package */
+import './zeppelin-icons.css';
 
 function App() {
   const [content, setContent] = useState('welcome');
@@ -57,7 +61,8 @@ function App() {
             {content === 'tabs' && <p>This element is not ready</p>}
             {content === 'tag' && <TagPage />}
             {content === 'checkbox' && <CheckboxPage />}
-            <CheckboxPage />
+            {content === 'input' && <InputPage />}
+            {content === 'numberInput' && <NumberInputPage />}
           </div>
         </div>
       </div>

src/assets/fonts/zepicons.eot

@@ -28,3 +28,4 @@ $include-typography: true !default;
 @import './elements/button/button';
 @import './elements/tag/tag';
 @import './elements/checkbox/checkbox';
+@import './elements/input/input';

src/assets/fonts/zepicons.svg

@@ -65,6 +65,15 @@
     cursor: not-allowed;
   }
 
+  &.#{$prefix}button--number-input {
+    background-color: get('colors.gray.grayLighter.hex');
+    padding: 0;
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.375rem;
+    line-height: 1;
+  }
+
   .#{$prefix}button--full {
     display: block;
     width: 100%;

src/assets/fonts/zepicons.ttf

@@ -59,7 +59,7 @@
         display: inline-block;
         background: get('colors.gray.white.hex');
         line-height: $boxSize + $borderWidth;
-        font-size: 18px;
+        font-size: 1.125rem;
         text-align: center;
         transform: scale(1);
         @include themify($themes) {

src/assets/fonts/zepicons.woff

@@ -12,7 +12,14 @@ module.exports = {
     isReady: true
   },
   checkbox: {
-    name: 'checkbox',
+    name: 'checkbox'
+  },
+  input: {
+    name: 'input',
+    isReady: true
+  },
+  numberInput: {
+    name: 'numberInput',
     isReady: true
   }
 };

src/assets/fonts/zepicons.woff2

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Input() {
+  return (
+    <>
+      <input type="text" className="zep-input" defaultValue="Type Something" />
+    </>
+  );
+}
+
+export default Input;

src/assets/icons/zepicons-navigation-dropdown.svg

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import InputPage from '../InputPage.jsx';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<InputPage />, div);
+});

src/base_bundle_entry.scss

@@ -0,0 +1,34 @@
+//Tag - base style
+
+@mixin input {
+  .#{$prefix}input {
+    @extend %typo-normal-3;
+    border: solid 2px get('colors.gray.grayLighter.hex');
+    background-color: get('colors.gray.white.hex');
+    padding-left: 1.25rem;
+    padding-top: 0.25rem;
+
+    &:focus {
+      outline: 2px solid get('colors.primary.catYellow.hex');
+    }
+  }
+
+  .#{$prefix}input--number {
+    width: 3rem;
+    height: 3rem;
+    margin-left: 0.125rem;
+    margin-right: 0.125rem;
+    text-align: center;
+    padding-left: 0;
+  }
+
+  .#{$prefix}input__icon--number {
+    width: 1.375rem;
+    height: 1.375rem;
+    cursor: pointer;
+  }
+}
+
+@include exports('input') {
+  @include input;
+}

src/elements/button/_button.scss

@@ -0,0 +1,21 @@
+import React from 'react';
+
+function NumberInput() {
+  return (
+    <>
+      <button className="zep-button zep-button--number-input">
+        <span className="zepicons zepicons-minus" />
+      </button>
+      <input
+        type="text"
+        className="zep-input zep-input--number"
+        defaultValue="1"
+      />
+      <button className="zep-button zep-button--number-input">
+        <span className="zepicons zepicons-plus" />
+      </button>
+    </>
+  );
+}
+
+export default NumberInput;

src/elements/checkbox/_checkbox.scss

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import NumberInputPage from '../NumberInputPage.jsx';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<NumberInputPage />, div);
+});

src/elements/elements.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import closeIcon from '../../assets/icons/zepicons-close.svg';
 
 function Tag() {
   return (
     <>
       <span role="button" className="zep-tag">
         Tag
-        <img src={closeIcon} alt="close" />
+        <i className="zepicons zepicons-close" />
       </span>
     </>
   );

src/elements/input/InputPage.jsx

@@ -11,7 +11,7 @@
     &:hover,
     &:focus,
     &.#{$prefix}tag--hover {
-      background-color: get('colors.secondary.catYellowLighter.hex');
+      background-color: get('colors.secondary.catYellowLightest.hex');
     }
     img,
     i,

src/elements/input/__tests__/Input.spec.js

@@ -42,11 +42,6 @@ a {
   }
 }
 
-[aria-hidden='true'],
-[hidden] {
-  display: none;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;