Merge pull request #128 from RocketCommunicationsInc/next

Updating to 5.1
RocketCommunicationsInc · May 13, 2021 · bd6c6ad · bd6c6ad
2 parents b6244c2 + 7efd83d
commit bd6c6ad
Show file tree

Hide file tree

Showing 139 changed files with 26,135 additions and 9,573 deletions.
diff --git a/.gitignore b/.gitignore
@@ -62,6 +62,7 @@ node_modules/
 /build 
 /dist
 /storybook-static
+/src/modules/rux-core/dist
 
 # ignore OS generated files
 ehthumbs.db

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   // stories: ['../stories/**/*.stories.js'], // load stories via preview.js per: https://github.com/storybookjs/storybook/issues/9793
   addons: [

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -1,132 +1,159 @@
-
-<!-- Styles to offer more control over UI than current Storybook Theme. Unsupported, not sure if class names will stay the same. -->
 <style type="text/css">
-/* .css-1d2iskc  is the auto-generated class name for the storybook container element. */
-/* .css-sqdry3 is the auto-generated class name for the storybook canvas/addons element, and others. */
-/* .css-1q7pov5 is the auto-generated class name for the sidebar element. */
-
-.css-1d2iskc > .css-sqdry3 {
-  border: 1px solid rgba(255,255,255, .125);
-}
-
-/* component list */
-nav .css-0 section a > div {
-  font-size: 16px;
-  line-height: 20px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  border-bottom: 1px solid rgba(140, 142, 145, 0.15);
-  align-items: baseline;
-}
-
-/* only the outermost children */
-nav .css-0 section > a > div {
-  padding-left: 12px;
-}
-nav .css-0 section > a > div > span:first-child {
-  border-left-color: rgb(77, 172, 255);
-  border-top-width: 5px;
-  border-bottom-width: 5px;
-  border-left-width: 5px;
-  margin-right: 10px;
-}
-/* group icons */
-nav .css-0 section > a > div > svg {
-  display: none;
-}
-/* only the innermost children */
-nav .css-0 section .css-0 > a > div { 
-  padding-left: 18px;
-}
-
-nav .css-0 section .css-0 > a > div > svg {
-  margin-right: 10px;
-}
-
-nav .css-0 section .css-0 > a > div > span:last-child {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-nav .css-0 section > div[type="section"] {
-  font-weight: bold;
-  margin: 0;
-  padding: 0px 20px 5px;
-  border-bottom: 1px solid rgba(140, 142, 145, 0.15);
-}
-/* addons panel */
-#storybook-panel-root .css-0 a,
-#storybook-panel-root .css-0 a span {
-  color: rgb(77,172,255);
-}
-.storybook-readme-story {
-  padding: 10px;
-}
-.storybook-readme-story p code,
-.storybook-readme-story li code { 
-  background: #182635; 
-  border-radius: 2px;
-}
-.storybook-readme-story code[class*="language-"], 
-.storybook-readme-story pre[class*="language-"]{
-  background: #060708; 
-  -webkit-font-smoothing: auto;
-}
-.storybook-readme-story .token.punctuation {
-  color: #a1acba;
-}
-.storybook-readme-story code.language-sh,
-.storybook-readme-story code.language-xml,
-.storybook-readme-story code.language-html,
-.storybook-readme-story code.language-js {
-  color: #ccd5e0;
-}
-.storybook-readme-story .markdown-body table thead tr {
-  background-color: #141f2c;
-}
-
-/* scrollbars */
-body {
-  scrollbar-color: var(--scrollBarThumbBackgroundColor, rgb(58, 129, 191))
-    var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70));
-}
-
-::-webkit-scrollbar {
-  width: 18px;
-  height: 18px;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--scrollBarThumbBackgroundColor, rgb(46, 103, 153));
-  border-radius: 10px;
-  border: 3px solid transparent;
-  background-clip: padding-box;
-}
-/* visually "centers" because the dark edge of the shadow gives the illusion this is offset */
-::-webkit-scrollbar-thumb:vertical {
-  border-left-width: 4px;
-}
-
-::-webkit-scrollbar-thumb:horizontal {
-  border-top-width: 4px;
-}
-
-::-webkit-scrollbar-thumb:active,
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(
-    --scrollBarThumbBackgroundHoverColor,
-    rgb(58, 129, 191)
-  );
-}
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-corner {
-  background-color: var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70));
-}
-::-webkit-scrollbar-track:vertical {
-  box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.15);
-}
-::-webkit-scrollbar-track:horizontal {
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
-}
-</style>
+  .sidebar-container .sidebar-item {
+    font-size: 16px;
+    line-height: 20px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid rgba(140, 142, 145, 0.15);
+    align-items: baseline;
+    font-weight: lighter;
+  }
+
+  /* drop down caret & active caret */
+  .sidebar-container .sidebar-item .css-bt79wf,
+  .sidebar-container .sidebar-item .css-1j9r8vi {
+    color: rgb(77, 172, 255);
+    border-top-width: 5px;
+    border-bottom-width: 5px;
+    border-left-width: 5px;
+    margin-right: 10px;
+  }
+
+  /* folder icon && grid icon */
+  .sidebar-container .sidebar-item .css-1res6at,
+  .sidebar-container .sidebar-item .css-12curbu {
+    display: none;
+  }
+
+  .sidebar-header .css-l8z9zc {
+    transform: scale(1.1);
+  }
+
+  .css-1d2iskc>.css-sqdry3 {
+    border: 1px solid rgba(255, 255, 255, .125);
+  }
+
+  /* component list */
+
+  /* only the outermost children */
+  nav.sidebar-container .css-0 section>a>div {
+    padding-left: 12px;
+  }
+
+  nav.sidebar-container .css-0 section>a>div>span:first-child {
+    border-left-color: rgb(77, 172, 255);
+    border-top-width: 5px;
+    border-bottom-width: 5px;
+    border-left-width: 5px;
+    margin-right: 10px;
+  }
+
+  /* group icons */
+  nav.sidebar-container .css-0 section>a>div>svg {
+    display: none;
+  }
+
+  /* only the innermost children */
+  nav.sidebar-container .css-0 section .css-0>a>div {
+    padding-left: 18px;
+  }
+
+  nav.sidebar-container .css-0 section .css-0>a>div>svg {
+    margin-right: 10px;
+  }
+
+  nav.sidebar-container .css-0 section .css-0>a>div>span:last-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  nav.sidebar-container .css-0 section>div[type="section"] {
+    font-weight: bold;
+    margin: 0;
+    padding: 0px 20px 5px;
+    border-bottom: 1px solid rgba(140, 142, 145, 0.15);
+  }
+
+  /* addons panel */
+  #storybook-panel-root .css-0 a,
+  #storybook-panel-root .css-0 a span {
+    color: rgb(77, 172, 255);
+  }
+
+  .storybook-readme-story {
+    padding: 10px;
+  }
+
+  .storybook-readme-story p code,
+  .storybook-readme-story li code {
+    background: #182635;
+    border-radius: 2px;
+  }
+
+  .storybook-readme-story code[class*="language-"],
+  .storybook-readme-story pre[class*="language-"] {
+    background: #060708;
+    -webkit-font-smoothing: auto;
+  }
+
+  .storybook-readme-story .token.punctuation {
+    color: #a1acba;
+  }
+
+  .storybook-readme-story code.language-sh,
+  .storybook-readme-story code.language-xml,
+  .storybook-readme-story code.language-html,
+  .storybook-readme-story code.language-js {
+    color: #ccd5e0;
+  }
+
+  .storybook-readme-story .markdown-body table thead tr {
+    background-color: #141f2c;
+  }
+
+  /* scrollbars */
+  body {
+    scrollbar-color: var(--scrollBarThumbBackgroundColor, rgb(58, 129, 191)) var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70));
+  }
+
+  ::-webkit-scrollbar {
+    width: 18px;
+    height: 18px;
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--scrollBarThumbBackgroundColor, rgb(46, 103, 153));
+    border-radius: 10px;
+    border: 3px solid transparent;
+    background-clip: padding-box;
+  }
+
+  /* visually "centers" because the dark edge of the shadow gives the illusion this is offset */
+  ::-webkit-scrollbar-thumb:vertical {
+    border-left-width: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:horizontal {
+    border-top-width: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:active,
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollBarThumbBackgroundHoverColor,
+        rgb(58, 129, 191));
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background-color: var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70));
+  }
+
+  ::-webkit-scrollbar-track:vertical {
+    box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.15);
+  }
 
+  ::-webkit-scrollbar-track:horizontal {
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+</style>
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -4,4 +4,8 @@ addons.setConfig({
   panelPosition: 'right',
   selectedPanel: 'REACT_STORYBOOK/readme/panel',
   theme: themes.dark,
+  enableShortcuts: false,
+  sidebar: {
+    showRoots: true
+  }
 });
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,10 +1,12 @@
 <script>
 	window.addEventListener('DOMContentLoaded', (event) => {
 		const previewFrame = document.querySelector('body');
-		
-		if(!previewFrame.classList.contains('dark-theme')){
+
+		if (!previewFrame.classList.contains('dark-theme')) {
 			previewFrame.classList.add('dark-theme');
 		}
 	});
 </script>
-<link href="/css/astro.css" rel="stylesheet">
+
+<link rel="stylesheet" type="text/css" href="./css/astro.css">
+<link rel="stylesheet" type="text/css" href="./css/astro.icons.css">
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -5,7 +5,7 @@ import {
   addParameters,
   addDecorator,
 } from '@storybook/web-components';
-import {withA11y} from '@storybook/addon-a11y';
+import { withA11y } from '@storybook/addon-a11y';
 import { addReadme } from 'storybook-readme/html';
 
 addDecorator(withA11y);

diff --git a/bin/astro-generate-icon-css/index.js b/bin/astro-generate-icon-css/index.js
@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+/* eslint-disable */
+const Core = require('../core');
+const fs = require("fs");
+
+class AstroGenerateIconCss extends Core{
+
+    constructor(){
+        super();
+        this.icons = [];
+    }
+
+    run(){
+        const file = `${this.iconsPath}astro.svg`;
+        fs.readFile(file, "utf-8", (err, data) => {
+            if (err) throw err;
+            const generatedCss = this.generateCssFile(data);
+
+            const cssFileName = 'astro-icons.scss';
+            fs.writeFile(`${this.cssPath}/${cssFileName}`, generatedCss, (err) => {
+                if (err) throw err;
+                this.notify('success', "The css icons file successfully generated!");
+            });
+        });
+    }
+
+    generateCssFile(svgStr){
+        const arr = svgStr.split("\n");
+        const newArr = [
+            `/**** DO NOT EDIT: AUTO GENERATED CSS ****/`
+        ];
+
+        arr.forEach((line) => {
+            const hasId = line.indexOf("g id=");
+            const matches = line.match(/\"(.*?)\"/g);
+
+            if (hasId > -1 && matches && matches.length > 0 && matches[0].indexOf('-icon') === -1) {
+                const id = matches[0].replace(/\"/g, "");
+                this.icons.push({
+                    "id": id
+                });
+                newArr.push(`.rux-icon--${id}{-webkit-mask: url("../icons/astro.svg#${id}") no-repeat;mask: url("../icons/astro.svg#${id}") no-repeat;}`);
+            }   
+        });
+        return newArr.join('\n');
+    }
+}
+
+module.exports = new AstroGenerateIconCss();