diff --git a/.gitignore b/.gitignore
index 722ab86a..98d6c774 100644
--- 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
index 48d71a82..a92d6b63 100644
--- 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
index 9fa2ba5a..d3d78ef9 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -1,132 +1,159 @@
-
-
+ .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);
+ }
+
\ No newline at end of file
diff --git a/.storybook/manager.js b/.storybook/manager.js
index aeffa0f8..ac3f9555 100755
--- 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
index 914a0c9b..a3023991 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,10 +1,12 @@
-
+
+
+
\ No newline at end of file
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 1c5816e5..b31e92d1 100755
--- 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
new file mode 100644
index 00000000..fa30c822
--- /dev/null
+++ 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();
\ No newline at end of file
diff --git a/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/manifest.json b/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/manifest.json
new file mode 100644
index 00000000..00cefea9
--- /dev/null
+++ b/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/manifest.json
@@ -0,0 +1,24 @@
+{
+ "author" : "Rocket Communications",
+ "commands" : [
+ {
+ "script" : "script.js",
+ "name" : "astro-icon-export",
+ "handlers" : {
+ "run" : "onRun"
+ },
+ "identifier" : "com.bohemiancoding.sketch.runscriptidentifier"
+ }
+ ],
+ "menu" : {
+ "title" : "astro-icon-export",
+ "items" : [
+ "com.bohemiancoding.sketch.runscriptidentifier"
+ ]
+ },
+ "identifier" : "com.example.sketch.39b943b7-516d-4d1a-b2b5-cb3bb21ee4c9",
+ "version" : "1.0",
+ "description" : "",
+ "authorEmail" : "",
+ "name" : "astro-icon-export"
+}
\ No newline at end of file
diff --git a/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/script.js b/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/script.js
new file mode 100644
index 00000000..13d3f750
--- /dev/null
+++ b/bin/astro-icon-export/astro-icon-export.sketchplugin/Contents/Sketch/script.js
@@ -0,0 +1,18 @@
+/* eslint-disable */
+var onRun = function(context) {
+ var sketch = require('sketch/dom');
+ var document = sketch.getSelectedDocument();
+
+ if (document) {
+ var options = {
+ scales: '1',
+ formats: 'svg',
+ trimmed: true,
+ output: '~/Documents/astro-exports',
+ };
+
+ sketch.export(document.pages, options);
+ } else {
+ console.error('There was no open document');
+ }
+};
diff --git a/bin/astro-icon-export/index.js b/bin/astro-icon-export/index.js
new file mode 100644
index 00000000..810fbf76
--- /dev/null
+++ b/bin/astro-icon-export/index.js
@@ -0,0 +1,263 @@
+#!/usr/bin/env node
+/* eslint-disable */
+const Core = require('../core');
+const SVGO = require("svgo");
+const fs = require("fs");
+const os = require("os");
+const prompt = require("prompt-sync")();
+
+class AstroIconExport extends Core {
+ constructor(){
+ super();
+ this.defaultSvg = '/Documents/astro-exports/Solid.svg';
+ this.svgo_inst = new SVGO({
+ plugins: [
+ {
+ cleanupAttrs: true,
+ },
+ {
+ removeDoctype: true,
+ },
+ {
+ removeXMLProcInst: true,
+ },
+ {
+ removeComments: true,
+ },
+ {
+ removeMetadata: true,
+ },
+ {
+ removeTitle: true,
+ },
+ {
+ removeDesc: true,
+ },
+ {
+ removeUselessDefs: true,
+ },
+ {
+ removeEditorsNSData: true,
+ },
+ {
+ removeEmptyAttrs: true,
+ },
+ {
+ removeHiddenElems: true,
+ },
+ {
+ removeEmptyText: true,
+ },
+ {
+ removeEmptyContainers: true,
+ },
+ {
+ removeViewBox: false,
+ },
+ {
+ cleanupEnableBackground: false,
+ },
+ {
+ convertStyleToAttrs: true,
+ },
+ {
+ convertColors: true,
+ },
+ {
+ convertPathData: true,
+ },
+ {
+ convertTransform: true,
+ },
+ {
+ removeUnknownsAndDefaults: true,
+ },
+ {
+ removeNonInheritableGroupAttrs: true,
+ },
+ {
+ removeUselessStrokeAndFill: true,
+ },
+ {
+ removeUnusedNS: true,
+ },
+ {
+ cleanupIDs: false,
+ },
+ {
+ cleanupNumericValues: true,
+ },
+ {
+ moveElemsAttrsToGroup: true,
+ },
+ {
+ moveGroupAttrsToElems: true,
+ },
+ {
+ collapseGroups: true,
+ },
+ {
+ removeRasterImages: false,
+ },
+ {
+ mergePaths: true,
+ },
+ {
+ convertShapeToPath: true,
+ },
+ {
+ sortAttrs: true,
+ },
+ {
+ removeDimensions: true,
+ },
+ {
+ removeAttrs: { attrs: "(stroke|fill|transform)" },
+ },
+ {
+ removeAttributesBySelector: {
+ selector: "path",
+ attributes: ["id"],
+ },
+ },
+ {
+ removeOffCanvasPaths: true,
+ },
+ ],
+ js2svg: {
+ pretty: true,
+ },
+ });
+ }
+
+ run(){
+ // general guidance for a user
+ console.log('Pressing [ENTER] during prompts will use default values');
+
+ const filePath = this.getInputFilePath();
+ fs.readFile(filePath, "utf-8", (err, data) => {
+ if (err) throw err;
+ this.generateIconsJson(data);
+
+ this.svgo_inst.optimize(data).then((res) => {
+ res.data = this.cleanUpIds(res.data);
+
+ const fileName = prompt("Please enter desired file name: ", 'astro.svg');
+
+ fs.writeFile(this.iconsPath + fileName, res.data, (err) => {
+ if (err) throw err;
+ this.notify('warning', 'Modify svg viewBox to the size of exported icons');
+ this.notify('success', "The svg file successfully generated!");
+ });
+ });
+ });
+ };
+
+ generateIconsJson(data){
+ const arr = data.split('\n');
+ const iconsJson = {};
+
+ arr.forEach(line => {
+ const hasId = line.indexOf(" attr.toLowerCase())
+ const [category, style, name] = iconIdAttrs;
+
+ if(!iconsJson.hasOwnProperty(style)){
+ iconsJson[style] = {};
+ }
+
+ if(!iconsJson[style].hasOwnProperty(category)){
+ iconsJson[style][category] = [];
+ }
+
+ iconsJson[style][category].push({name});
+ }
+ }
+ }
+ });
+
+ Object.keys(iconsJson).forEach(style => {
+ iconsJson[style] = this.sortObject(iconsJson[style]);
+ // console.log('style', iconsJson[style]);
+ Object.keys(iconsJson[style]).forEach(category => {
+ iconsJson[style][category] = iconsJson[style][category].sort((a, b) => {
+ if (a.name < b.name) {
+ return -1;
+ }
+ if (a.name > b.name) {
+ return 1;
+ }
+ return 0;
+ });
+ })
+
+ })
+
+ fs.writeFile(`${this.staticPath}json/rux-icons.json`, JSON.stringify(iconsJson), (err) => {
+ if (err) throw err;
+ this.notify('success', "The json icons list file successfully generated!");
+ });
+ }
+
+ getInputFilePath(){
+ const homedir = os.homedir();
+ let filePath = prompt('Please enter path to file: ', this.defaultSvg);
+ return os.homedir() + filePath;
+ }
+
+ cleanUpIds(svgStr){
+ const arr = svgStr.split("\n");
+ let newArr = [];
+
+
+ arr.forEach((line) => {
+ const hasId = line.indexOf("")
+ .option("a", { alias: "action", describe: "Cli action", type: "string", demandOption: false })
+ .argv;
+
+switch(options.action){
+ case 'astro-icon-export':
+ astroIconExport.run();
+ break;
+ case 'astro-generate-icon-css':
+ astroGenerateIconCss.run();
+ break;
+}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index adeeb03b..1e7f4aff 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,76 +5,88 @@ const sourcemaps = require('gulp-sourcemaps');
const csso = require('gulp-csso');
const postcss = require('gulp-postcss');
const postcssColor = require('postcss-color-mod-function');
-const del = require('del');
-const gulpif = require('gulp-if');
const properties = require('postcss-custom-properties');
-// const autoprefixer = require('gulp-autoprefixer');
+const sass = require('gulp-sass');
-/*
- * * The color method handles the generation of the tint/shade
- * * color palettes using the CSS4 color-mod function (no longer)
- * * part of the spec. It takes a base color and increases the
- * * tint or shade by 20% increments
- */
-function color() {
- return gulp
- .src('./src/css/common/__variables.css')
- .pipe(postcss([postcssColor()]))
- .pipe(rename('_variables.css'))
- .pipe(gulp.dest('./src/css/common'));
-}
-function css() {
- const condition = (file) => file !== 'astro.css';
+sass.compiler = require('node-sass');
+const packageDist = './src/modules/rux-core/dist';
- return gulp
- .src('./src/css/*.css')
+gulp.task('rux-core-static', () => {
+ const folders = ['fonts', 'icons'];
+ return gulp.src(folders.map((folder) => `./static/${folder}/*`), {base: './static/'})
+ .pipe(gulp.dest(packageDist + '/static'));
+});
+
+gulp.task('rux-core-scss', () => {
+ return gulp.src('./src/scss/**/*.scss', {base: './src/scss'})
+ .pipe(gulp.dest(packageDist + '/scss'));
+});
+
+gulp.task('rux-core-dist', () => {
+ return gulp.src('./src/scss/*.scss')
+ .pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.init())
.pipe(cssimport())
- .pipe(gulpif(condition, postcss([properties()])))
- .pipe(gulp.dest('./static/css'))
+ .pipe(postcss([properties()]))
+ .pipe(gulp.dest(packageDist + '/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(csso())
+ .pipe(gulp.dest(packageDist + '/css'));
+});
+
+gulp.task('sass', () => {
+ return gulp.src('./src/scss/*.scss')
+ .pipe(sass().on('error', sass.logError))
+ .pipe(sourcemaps.init())
+ .pipe(cssimport())
+ .pipe(postcss([properties()]))
.pipe(gulp.dest('./static/css'))
- .pipe(sourcemaps.write('./'));
-}
+ .pipe(rename({ suffix: '.min' }))
+ .pipe(csso())
+ .pipe(gulp.dest('./static/css'));
+});
-/*
- * TODO: readd browser prefix
- */
/*
- * * Cleans the distribution folder before building
+ * * The color method handles the generation of the tint/shade
+ * * color palettes using the CSS4 color-mod function (no longer)
+ * * part of the spec. It takes a base color and increases the
+ * * tint or shade by 20% increments
*/
-function clean() {
- return del(['./static/css/dist/']);
-}
+
+gulp.task('color', () => {
+ return gulp
+ .src('./src/scss/common/__variables.scss')
+ .pipe(sass().on('error', sass.logError))
+ .pipe(postcss([postcssColor()]))
+ .pipe(rename('_variables.scss'))
+ .pipe(gulp.dest('./src/scss/common'));
+});
+
/*
* * Handles watching for file changes and triggering a browser reload
*/
function watch() {
// watch for color changes and generate palette
- gulp.watch('./src/css/common/__variables.css', gulp.series('color'));
+ gulp.watch('./src/css/common/__variables.scss', gulp.series('color'));
// compile and minify css
gulp.watch(
- './src/css/**/*.css',
+ './src/scss/**/*.scss',
{
- ignored: ['./src/css/common/__variables.css', './src/css/astro.core.css', './src/css/astro.css'],
+ ignored: ['./src/scss/common/__variables.scss'],
},
- gulp.series(css)
+ gulp.series('sass')
);
}
-const defaultTasks = gulp.series(clean, watch);
-gulp.task('default', defaultTasks);
-gulp.task('css:colors', gulp.series(color, css));
+// only used during pre lerna publish
+gulp.task('build-rux-core', gulp.series('rux-core-static', 'rux-core-scss', 'rux-core-dist'));
+
+gulp.task('default', gulp.series('sass', watch));
+gulp.task('css:colors', gulp.series('color', 'sass'));
-exports.css = css;
-exports.color = color;
exports.watch = watch;
-exports.build = gulp.series(clean, css, color);
-// exports.start = start;
-// exports.dev = dev;
-exports.clean = clean;
+exports.build = gulp.series('color', 'sass');
diff --git a/index.html b/index.html
index 7854bdad..c96d5075 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,18 @@
+
-
-
+
Astro App
+
-
+