🎉 (@hzcore/icons-social) create basic section for icons

hzdg · Feb 14, 2020 · 1452e9f · 1452e9f
1 parent 249aa18
commit 1452e9f
Show file tree

Hide file tree

Showing 14 changed files with 421 additions and 2 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,5 @@
+email=[email protected]
+always-auth=true
+save-exact=true
+registry=http://npmregistry.hzdg.com/
+//npmregistry.hzdg.com/:_authToken="10kAGqqn+A0+qyQL+MqlL/UGYlfkBSD6971Q9ZO4hsS0NzWxAnSSmmy/CL1alYC64L/1ukVy5Qd3nCmrPdRN7A=="
diff --git a/doczrc.js b/doczrc.js
@@ -17,6 +17,7 @@ module.exports = {
     'Styled Components',
     'Utilities',
     'UI Components',
+    'Reusable Icons',
   ],
   htmlContext: {
     favicon: 'public/favicon.ico',

diff --git a/lerna.json b/lerna.json
@@ -23,6 +23,7 @@
     "packages/conventional-commits/*",
     "packages/simple-actions/*",
     "packages/utilities/*",
-    "packages/ui-components/*"
+    "packages/ui-components/*",
+    "packages/icons/*"
   ]
 }
diff --git a/package.json b/package.json
@@ -39,7 +39,8 @@
     "packages/conventional-commits/*",
     "packages/simple-actions/*",
     "packages/utilities/*",
-    "packages/ui-components/*"
+    "packages/ui-components/*",
+    "packages/icons/*"
   ],
   "config": {
     "commitizen": {

diff --git a/packages/icons/hzcore-icons-arrow/CHANGELOG.md b/packages/icons/hzcore-icons-arrow/CHANGELOG.md
@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
diff --git a/packages/icons/hzcore-icons-arrow/README.mdx b/packages/icons/hzcore-icons-arrow/README.mdx
@@ -0,0 +1,70 @@
+---
+name: arrow
+menu: Reusable Icons
+route: /icons-arrow
+---
+
+# arrow
+
+These are Reusable SVGs to use for your projects! 
+Designers, these are the SVGs that have been reused in several projects.
+Developers, these are the SVGs that are available in HZ-Core!
+
+## Installation
+
+```shell
+yarn add @hzcore/icons-arrow
+
+```
+
+## Arrow Icons:
+
+<Playground>  
+    <span style={{padding:'20px'}}>
+      <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          xmlnsXlink="http://www.w3.org/1999/xlink" 
+          x="0px" 
+          y="0px"
+          width="90px" 
+	        fill="currentColor" 
+          viewBox="0 0 477.175 477.175" 
+        >
+            <g>
+	        <path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225
+		      c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/>
+            </g>
+        </svg>
+    </span>
+    <span style={{padding:'20px'}}>
+      <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          xmlnsXlink="http://www.w3.org/1999/xlink" 
+          x="0px" 
+          y="0px"
+          width="90px" 
+	        fill="currentColor" 
+          viewBox="0 0 477.175 477.175" 
+        >
+            <g>
+              <path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
+              c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z
+              "/>
+            </g>
+        </svg>
+        </span>
+            <span style={{padding:'20px'}}>
+            <svg
+              x="0px" 
+              y="0px" 
+              width="90"
+              viewBox="0 0 490.656 490.656"
+              fill="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M487.536,355.12L252.869,120.453c-4.16-4.16-10.923-4.16-15.083,      0L3.12,355.12c-4.16,4.16-4.16,10.923,0,15.083
+                c4.16,4.16,10.923,4.16,15.083,0l227.115-227.136l227.115,227.136c2.091,2.069,4.821,3.115,7.552,3.115s5.461-1.045,7.552-3.115
+                C491.696,366.043,491.696,359.28,487.536,355.12z"/>
+            </svg>
+        </span>
+</Playground>
diff --git a/packages/icons/hzcore-icons-arrow/__tests__/arrow_test.tsx b/packages/icons/hzcore-icons-arrow/__tests__/arrow_test.tsx
@@ -0,0 +1,7 @@
+/* eslint-env jest, browser */
+import arrow from '../src';
+
+test('arrow is implemented', () => {
+  expect(() => arrow()).not.toThrow();
+  throw new Error('implement arrow and write some tests!');
+});
diff --git a/packages/icons/hzcore-icons-arrow/package.json b/packages/icons/hzcore-icons-arrow/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@hzcore/icons-arrow",
+  "version": "0.0.1",
+  "author": "Caroline Lee",
+  "main": "cjs/index.js",
+  "module": "es/index.js",
+  "typings": "src/index.tsx",
+  "publishConfig": {
+    "registry": "http://npmregistry.hzdg.com"
+  },
+  "files": [
+    "cjs",
+    "es",
+    "src",
+    "types",
+    "!**/__test*"
+  ],
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.4.3"
+  }
+}
diff --git a/packages/icons/hzcore-icons-arrow/src/index.tsx b/packages/icons/hzcore-icons-arrow/src/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+export const Facebook = () => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fab"
+      data-icon="facebook"
+      className="facebookSVG"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <path
+        fill="currentColor"
+        d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
+      ></path>
+    </svg>
+  );
+};
+
+export const Instagram = () => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fab"
+      data-icon="instagram"
+      className="instagramSVG"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+    >
+      <path
+        fill="currentColor"
+        d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+      ></path>
+    </svg>
+  );
+};
+
+export const Twitter = () => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fab"
+      data-icon="twitter"
+      className="twitterSVG"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <path
+        fill="currentColor"
+        d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+      ></path>
+    </svg>
+  );
+};
+
+export const Github = () => {
+  return (
+    <svg
+      ariaHidden="true"
+      focusable="false"
+      class="githubSVG"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 496 512"
+      width="90"
+    >
+      <path
+        fill="currentColor"
+        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+      ></path>
+    </svg>
+  );
+};
diff --git a/packages/icons/hzcore-icons-social/CHANGELOG.md b/packages/icons/hzcore-icons-social/CHANGELOG.md
@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
diff --git a/packages/icons/hzcore-icons-social/README.mdx b/packages/icons/hzcore-icons-social/README.mdx
@@ -0,0 +1,89 @@
+---
+name: social
+menu: Reusable Icons
+route: /icons-social
+---
+
+# social
+
+These are Reusable SVGs to use for your projects! 
+Designers, these are the SVGs that have been reused in several projects.
+Developers, these are the SVGs that are available in HZ-Core!
+
+## Installation
+
+```shell
+yarn add @hzcore/icons-social
+
+```
+
+## Social Icons:
+
+<Playground>  
+    <span style={{padding:'20px'}}>
+    <svg
+      aria-hidden="true"   
+      focusable="false" 
+      data-prefix="fab"
+      data-icon="twitter"
+      className="svg-inline--fa fa-twitter fa-w-16"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      width="90"
+    >
+      <path
+        fill="currentColor"
+        d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+      ></path>
+    </svg>
+    </span>
+    <span style={{padding:'20px'}}>
+        <svg
+      aria-hidden="true"
+      focusable="false" 
+      data-prefix="fab"
+      data-icon="instagram"
+      className="svg-inline--fa fa-instagram fa-w-14"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      width="90"
+    >
+      <path
+        fill="currentColor"
+        d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+      ></path>
+    </svg>
+    </span>
+    <span style={{padding:'20px'}}>
+        <svg
+      aria-hidden="true" 
+      focusable="false"
+      data-prefix="fab"
+      data-icon="facebook"
+      className="svg-inline--fa fa-facebook fa-w-16"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      width="90"
+    >
+      <path
+        fill="currentColor"
+        d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
+      ></path>
+    </svg>
+    </span>
+    <span style={{padding:'20px'}}>
+        <svg 
+        ariaHidden="true" 
+        focusable="false" 
+        class="svg-inline--fa fa-github fa-w-16"
+        xmlns="http://www.w3.org/2000/svg" 
+        viewBox="0 0 512 512"
+        width="90"
+        >
+            <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
+        </svg>
+    </span>
+</Playground>
diff --git a/packages/icons/hzcore-icons-social/__tests__/social_test.tsx b/packages/icons/hzcore-icons-social/__tests__/social_test.tsx
@@ -0,0 +1,7 @@
+/* eslint-env jest, browser */
+import social from '../src';
+
+test('social is implemented', () => {
+  expect(() => social()).not.toThrow();
+  throw new Error('implement social and write some tests!');
+});
diff --git a/packages/icons/hzcore-icons-social/package.json b/packages/icons/hzcore-icons-social/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@hzcore/icons-social",
+  "version": "0.0.1",
+  "author": "Caroline Lee",
+  "main": "cjs/index.js",
+  "module": "es/index.js",
+  "typings": "src/index.tsx",
+  "publishConfig": {
+    "registry": "http://npmregistry.hzdg.com"
+  },
+  "files": [
+    "cjs",
+    "es",
+    "src",
+    "types",
+    "!**/__test*"
+  ],
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.4.3"
+  }
+}