├── .gitignore ├── .idea ├── .gitignore ├── chromatic.iml ├── codeStyles │ └── codeStyleConfig.xml ├── jsLibraryMappings.xml ├── misc.xml ├── modules.xml └── vcs.xml ├── .meteor ├── .finished-upgraders ├── .gitignore ├── .id ├── packages ├── platforms ├── release └── versions ├── CHANGELOG.md ├── LICENSE.txt ├── README.md ├── client ├── index.jsx ├── main.less └── routes.js ├── icon-viewer ├── .gitignore ├── build │ ├── fonts │ │ ├── percolate.eot │ │ ├── percolate.svg │ │ ├── percolate.ttf │ │ └── percolate.woff │ ├── index.css │ └── index.html ├── package-lock.json ├── package.json └── src │ ├── index.html │ ├── index.less │ ├── mdg-borealis │ └── public │ └── fonts │ ├── percolate.eot │ ├── percolate.svg │ ├── percolate.ttf │ └── percolate.woff ├── package-lock.json ├── package.json ├── packages ├── animations │ ├── animations.js │ ├── main.js │ └── package.js ├── borealis │ ├── .gitignore │ ├── .npm │ │ └── package │ │ │ ├── .gitignore │ │ │ ├── README │ │ │ └── npm-shrinkwrap.json │ ├── fonts │ │ ├── PulpDisplay-Bold.ttf │ │ ├── PulpDisplay-Light.ttf │ │ ├── PulpDisplay-Medium.ttf │ │ ├── percolate.eot │ │ ├── percolate.svg │ │ ├── percolate.ttf │ │ └── percolate.woff │ ├── form-components │ │ ├── cardinal.import.less │ │ ├── checkbox.import.less │ │ ├── form-components.import.less │ │ ├── form.import.less │ │ ├── index.import.less │ │ ├── input.import.less │ │ ├── radio.import.less │ │ ├── ribbon.import.less │ │ ├── searchbar.import.less │ │ ├── select.import.less │ │ └── textarea.import.less │ ├── global │ │ ├── animation.import.less │ │ ├── base.import.less │ │ ├── boxes.import.less │ │ ├── button.import.less │ │ ├── drawer.import.less │ │ ├── formatting.import.less │ │ ├── global.import.less │ │ ├── header.import.less │ │ ├── link.import.less │ │ ├── list.import.less │ │ ├── mobile.import.less │ │ ├── nav.import.less │ │ ├── normalize.import.less │ │ ├── section.import.less │ │ ├── table.import.less │ │ └── transition.import.less │ ├── icons │ │ ├── apm-logo.svg │ │ ├── apm │ │ │ ├── Favicon.png │ │ │ ├── Favicon.svg │ │ │ ├── Favicon@2x.png │ │ │ ├── Favicon@3x.png │ │ │ ├── Icon.png │ │ │ ├── Icon.svg │ │ │ ├── Icon@2x.png │ │ │ └── Icon@3x.png │ │ ├── atmosphere-logo.svg │ │ ├── atmosphere │ │ │ ├── Favicon.png │ │ │ ├── Favicon.svg │ │ │ ├── Favicon@2x.png │ │ │ ├── Favicon@3x.png │ │ │ ├── Icon.png │ │ │ ├── Icon.svg │ │ │ ├── Icon@2x.png │ │ │ └── Icon@3x.png │ │ ├── box-bg.png │ │ ├── countries │ │ │ ├── ap-southeast-2.svg │ │ │ ├── eu-west-1.svg │ │ │ ├── localhost.svg │ │ │ ├── meet-eeyore.svg │ │ │ ├── staging.svg │ │ │ ├── ties.svg │ │ │ └── us-east-1.svg │ │ ├── dashboard-logo.svg │ │ ├── fonts │ │ │ ├── PulpDisplay-Bold.ttf │ │ │ ├── PulpDisplay-Light.ttf │ │ │ ├── PulpDisplay-Medium.ttf │ │ │ ├── percolate.eot │ │ │ ├── percolate.svg │ │ │ ├── percolate.ttf │ │ │ └── percolate.woff │ │ ├── forums.svg │ │ ├── galaxy-logo.svg │ │ ├── galaxy │ │ │ ├── Favicon.png │ │ │ ├── Favicon.svg │ │ │ ├── Favicon@2x.png │ │ │ ├── Favicon@3x.png │ │ │ ├── Icon.png │ │ │ ├── Icon.svg │ │ │ ├── Icon@2x.png │ │ │ └── Icon@3x.png │ │ ├── icons.import.less │ │ ├── lock-ok-empty.svg │ │ ├── lock-ok.svg │ │ ├── lock.svg │ │ ├── logo │ │ │ ├── HeaderLogo.js │ │ │ ├── LogoDark.js │ │ │ └── LogoLight.js │ │ ├── slack.svg │ │ ├── svg │ │ │ ├── add.svg │ │ │ ├── admin.svg │ │ │ ├── alert.svg │ │ │ ├── arrow-down.svg │ │ │ ├── arrow-left-alt.svg │ │ │ ├── arrow-left.svg │ │ │ ├── arrow-right-alt.svg │ │ │ ├── arrow-right.svg │ │ │ ├── arrow-up.svg │ │ │ ├── atmosphere.svg │ │ │ ├── back.svg │ │ │ ├── basket.svg │ │ │ ├── beaker.svg │ │ │ ├── bell.svg │ │ │ ├── book.svg │ │ │ ├── bookmark-hollow.svg │ │ │ ├── bookmark.svg │ │ │ ├── box.svg │ │ │ ├── browser.svg │ │ │ ├── button.svg │ │ │ ├── calendar.svg │ │ │ ├── camera.svg │ │ │ ├── category.svg │ │ │ ├── certificate.svg │ │ │ ├── check.svg │ │ │ ├── chevron-down.svg │ │ │ ├── circle-hollow.svg │ │ │ ├── circle.svg │ │ │ ├── close.svg │ │ │ ├── cog.svg │ │ │ ├── comment.svg │ │ │ ├── commit.svg │ │ │ ├── compass.svg │ │ │ ├── copy.svg │ │ │ ├── cpu.svg │ │ │ ├── credit.svg │ │ │ ├── cross.svg │ │ │ ├── dashboard.svg │ │ │ ├── database.svg │ │ │ ├── delete.svg │ │ │ ├── doc-chart.svg │ │ │ ├── doc-list.svg │ │ │ ├── document.svg │ │ │ ├── download.svg │ │ │ ├── edit.svg │ │ │ ├── ellipsis.svg │ │ │ ├── email.svg │ │ │ ├── expand-alt.svg │ │ │ ├── expand.svg │ │ │ ├── eye.svg │ │ │ ├── face-happy.svg │ │ │ ├── face-neutral.svg │ │ │ ├── face-sad.svg │ │ │ ├── facebook.svg │ │ │ ├── filter.svg │ │ │ ├── flag.svg │ │ │ ├── form.svg │ │ │ ├── gdrive.svg │ │ │ ├── github.svg │ │ │ ├── globe.svg │ │ │ ├── google.svg │ │ │ ├── graph-bar.svg │ │ │ ├── graph-line.svg │ │ │ ├── graphql.svg │ │ │ ├── grid.svg │ │ │ ├── grow.svg │ │ │ ├── headerLogo.svg │ │ │ ├── heart-hollow.svg │ │ │ ├── heart.svg │ │ │ ├── home.svg │ │ │ ├── hourglass.svg │ │ │ ├── info.svg │ │ │ ├── key.svg │ │ │ ├── lightning.svg │ │ │ ├── link.svg │ │ │ ├── list-unordered.svg │ │ │ ├── location.svg │ │ │ ├── lock.svg │ │ │ ├── logoDark.svg │ │ │ ├── logoLight.svg │ │ │ ├── memory.svg │ │ │ ├── menu.svg │ │ │ ├── meteor.svg │ │ │ ├── mobile.svg │ │ │ ├── nut.svg │ │ │ ├── outbox.svg │ │ │ ├── paintbrush.svg │ │ │ ├── paperclip.svg │ │ │ ├── paragraph.svg │ │ │ ├── phone.svg │ │ │ ├── photo.svg │ │ │ ├── pin.svg │ │ │ ├── play.svg │ │ │ ├── plus.svg │ │ │ ├── power.svg │ │ │ ├── print.svg │ │ │ ├── proceed.svg │ │ │ ├── profile.svg │ │ │ ├── question.svg │ │ │ ├── redirect.svg │ │ │ ├── redux.svg │ │ │ ├── reply.svg │ │ │ ├── request-change.svg │ │ │ ├── rss.svg │ │ │ ├── search.svg │ │ │ ├── share.svg │ │ │ ├── shield.svg │ │ │ ├── sidebar.svg │ │ │ ├── speaker.svg │ │ │ ├── star-hollow.svg │ │ │ ├── star.svg │ │ │ ├── stop.svg │ │ │ ├── structure.svg │ │ │ ├── support.svg │ │ │ ├── sync.svg │ │ │ ├── tablet.svg │ │ │ ├── thumbs-up.svg │ │ │ ├── time.svg │ │ │ ├── timer.svg │ │ │ ├── transfer.svg │ │ │ ├── trash.svg │ │ │ ├── twitter.svg │ │ │ ├── unlock.svg │ │ │ ├── upload.svg │ │ │ ├── user-add.svg │ │ │ ├── user-alt.svg │ │ │ ├── user.svg │ │ │ ├── users.svg │ │ │ ├── video.svg │ │ │ ├── watch.svg │ │ │ ├── wrench.svg │ │ │ └── youtube.svg │ │ └── tutorials.svg │ ├── index.import.less │ ├── overlays │ │ └── overlays.import.less │ ├── package-lock.json │ ├── package.js │ ├── package.json │ ├── react-components │ │ ├── Header.js │ │ ├── LetterAvatar.js │ │ ├── NavigationBar.js │ │ ├── PlanRibbon.js │ │ └── useHeaderInfo.js │ └── util │ │ ├── clearfix.import.less │ │ ├── color.import.less │ │ ├── easing.import.less │ │ ├── helper.import.less │ │ ├── index.import.less │ │ ├── lesshat.import.less │ │ ├── link.import.less │ │ ├── text.import.less │ │ ├── typography.import.less │ │ └── ui.import.less ├── buttons │ ├── LoadingButton.jsx │ ├── ProgressButton.jsx │ ├── main.js │ └── package.js ├── callout │ ├── Callout.jsx │ ├── Callout.less │ ├── main.js │ └── package.js ├── chromatic-api │ ├── README.md │ ├── chromatic-api.js │ └── package.js ├── chromatic-explorer │ ├── ChromaticExplorer.js │ ├── ChromaticLayout.jsx │ ├── ChromaticLayout.less │ ├── ComponentSpec.jsx │ ├── ComponentSpec.less │ ├── ComponentsPage.jsx │ ├── ComponentsPageSidebar.jsx │ ├── PageToggleButton.jsx │ ├── README.md │ ├── SingleComponentPage.jsx │ ├── SingleComponentPageHeader.jsx │ ├── SingleComponentPageSidebar.jsx │ ├── StyleguideNotFound.jsx │ ├── StyleguideReadme.jsx │ ├── StyleguideSpec.jsx │ ├── StylesPage.jsx │ ├── StylesPage.less │ ├── StylesPageSidebar.jsx │ ├── logotype-chromatic.svg │ ├── package.js │ └── styles │ │ ├── Buttons.jsx │ │ ├── Color.jsx │ │ ├── Forms.jsx │ │ ├── Icons.jsx │ │ ├── Table.jsx │ │ └── Typography.jsx ├── chromatic │ ├── main.js │ └── package.js ├── classnames │ └── .npm │ │ └── package │ │ ├── .gitignore │ │ ├── README │ │ └── npm-shrinkwrap.json ├── code-block │ ├── CodeBlock.jsx │ ├── CodeBlock.less │ ├── main.js │ └── package.js ├── color-grid │ ├── ColorGrid.jsx │ ├── README.md │ ├── color-grid.import.less │ ├── color-grid.less │ ├── for.import.less │ └── package.js ├── date-components │ ├── DateVar.js │ ├── FullDate.jsx │ ├── RelativeDate.jsx │ └── package.js ├── flow-router-extensions │ ├── README.md │ ├── flow-router-extensions.js │ └── package.js ├── form-components │ ├── .gitignore │ ├── Cardinal.jsx │ ├── Cardinal.less │ ├── Checkbox.jsx │ ├── Checkbox.less │ ├── Form.jsx │ ├── Form.less │ ├── FormStyleguide.jsx │ ├── FormattedInput.jsx │ ├── Input.jsx │ ├── Input.less │ ├── README.md │ ├── Radio.jsx │ ├── Radio.less │ ├── SearchBar.jsx │ ├── SearchBar.less │ ├── Select.jsx │ ├── Select.less │ ├── Stepper.jsx │ ├── SubmitButton.jsx │ ├── Textarea.jsx │ ├── Textarea.less │ ├── Toggle.jsx │ ├── Upload.jsx │ ├── makeField.jsx │ └── package.js ├── list │ ├── AnimatedListTester.jsx │ ├── List.jsx │ ├── Pagination.jsx │ └── package.js ├── loading-spinner │ ├── LoadingSpinner.jsx │ ├── LoadingSpinner.less │ └── package.js ├── outlines │ ├── README.md │ ├── outlines.css │ ├── outlines.js │ └── package.js ├── overlays │ ├── Overlay.jsx │ ├── OverlayController.js │ ├── OverlayLayout.jsx │ ├── OverlayLayout.less │ ├── index.js │ └── package.js ├── react-meteor-app │ ├── NotFound.jsx │ ├── README.md │ ├── ReactLayoutRenderer.jsx │ ├── ReactMeteorApp.jsx │ └── package.js ├── sortable │ ├── Sortable.jsx │ ├── SortableTableExample.jsx │ └── package.js ├── tooltips │ ├── TooltipStyleguide.jsx │ ├── WithTooltip.jsx │ ├── WithTooltip.less │ ├── jquery.qtip.import.less │ ├── jquery.qtip.js │ └── package.js └── utils │ ├── package.js │ └── utils.js └── thumbnail-video.png /.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | node_modules 3 | .DS_Store 4 | .npm 5 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /.idea/chromatic.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.idea/codeStyles/codeStyleConfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.meteor/.finished-upgraders: -------------------------------------------------------------------------------- 1 | # This file contains information which helps Meteor properly upgrade your 2 | # app when you run 'meteor update'. You should check it into version control 3 | # with your project. 4 | 5 | notices-for-0.9.0 6 | notices-for-0.9.1 7 | 0.9.4-platform-file 8 | notices-for-facebook-graph-api-2 9 | 1.2.0-standard-minifiers-package 10 | 1.2.0-meteor-platform-split 11 | 1.2.0-cordova-changes 12 | 1.2.0-breaking-changes 13 | 1.3.0-split-minifiers-package 14 | 1.4.0-remove-old-dev-bundle-link 15 | 1.4.1-add-shell-server-package 16 | 1.4.3-split-account-service-packages 17 | 1.5-add-dynamic-import-package 18 | 1.7-split-underscore-from-meteor-base 19 | 1.8.3-split-jquery-from-blaze 20 | -------------------------------------------------------------------------------- /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /.meteor/.id: -------------------------------------------------------------------------------- 1 | # This file contains a token that is unique to your project. 2 | # Check it into your repository along with the rest of this directory. 3 | # It can be used for purposes such as: 4 | # - ensuring you don't accidentally deploy one app on top of another 5 | # - providing package authors with aggregated statistics 6 | 7 | 11zsz801njq5lf1neim6k 8 | -------------------------------------------------------------------------------- /.meteor/packages: -------------------------------------------------------------------------------- 1 | # Meteor packages used by this project one per line. 2 | # Check this file (and the other files in this directory) into your repository. 3 | # 4 | # 'meteor add' and 'meteor remove' will edit this file for you, 5 | # but you can also edit it by hand. 6 | 7 | meteor-base@1.5.1 # Packages every Meteor app needs to have 8 | mongo@1.15.0 # The database Meteor supports right now 9 | session@1.2.0 # Client-side reactive dictionary for your app 10 | jquery@1.11.10 # Helpful client-side library 11 | tracker@1.2.0 # Meteor's client-side reactive programming library 12 | 13 | es5-shim@4.8.0 # ECMAScript 5 compatibility for older browsers. 14 | ecmascript@0.16.2 # Enable ECMAScript2015+ syntax in app code 15 | 16 | kadira:flow-router 17 | mdg:react-meteor-app 18 | mdg:chromatic 19 | 20 | standard-minifier-css@1.8.1 21 | standard-minifier-js@2.8.0 22 | 23 | mdg:animations 24 | mdg:buttons 25 | mdg:callout 26 | mdg:code-block 27 | mdg:color-grid 28 | mdg:date-components 29 | mdg:form-components 30 | mdg:list 31 | mdg:loading-spinner 32 | mdg:overlays 33 | mdg:sortable 34 | mdg:tooltips 35 | mdg:outlines 36 | numeral:numeral 37 | shell-server@0.5.0 38 | dynamic-import@0.7.2 39 | underscore@1.0.10 40 | less 41 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@2.7.3 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.3.1 2 | 3 | Update Meteor version to 2.7.3 4 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 - 2018 Meteor Development Group, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /client/index.jsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import { Meteor } from 'meteor/meteor'; 4 | import { ReactMeteorApp } from 'meteor/mdg:react-meteor-app'; 5 | 6 | Meteor.startup(function() { 7 | const root = document.createElement('div'); 8 | document.body.appendChild(root); 9 | ReactDOM.render(, root); 10 | }); 11 | -------------------------------------------------------------------------------- /client/main.less: -------------------------------------------------------------------------------- 1 | // import default borealis configuration: 2 | @import "{mdg:borealis}/index.import.less"; 3 | 4 | // example of custom colors: 5 | // @import '{mdg:borealis}/util/clearfix.import.less'; 6 | // @import '{mdg:borealis}/util/color.import.less'; 7 | 8 | // @color-primary: #56579B;// violet 9 | // @color-secondary: #E04E4B;// coral 10 | 11 | // @import '{mdg:borealis}/util/easing.import.less'; 12 | // @import '{mdg:borealis}/util/helper.import.less'; 13 | // @import '{mdg:borealis}/util/lesshat.import.less'; 14 | // @import '{mdg:borealis}/util/link.import.less'; 15 | // @import '{mdg:borealis}/util/text.import.less'; 16 | // @import '{mdg:borealis}/util/typography.import.less'; 17 | // @import '{mdg:borealis}/util/ui.import.less'; 18 | 19 | // @import "{mdg:borealis}/global/global.import.less"; 20 | 21 | -------------------------------------------------------------------------------- /client/routes.js: -------------------------------------------------------------------------------- 1 | import { ChromaticExplorer } from 'meteor/mdg:chromatic'; 2 | import { FlowRouter } from 'meteor/kadira:flow-router'; 3 | 4 | if (ChromaticExplorer) { 5 | ChromaticExplorer.configure({basePath: '/styleguide'}); 6 | } 7 | 8 | FlowRouter.notFound = NotFound; 9 | FlowRouter.route('/', { 10 | action: function() { 11 | FlowRouter.go('/styleguide'); 12 | } 13 | }); 14 | -------------------------------------------------------------------------------- /icon-viewer/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /icon-viewer/build/fonts/percolate.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/icon-viewer/build/fonts/percolate.eot -------------------------------------------------------------------------------- /icon-viewer/build/fonts/percolate.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/icon-viewer/build/fonts/percolate.ttf -------------------------------------------------------------------------------- /icon-viewer/build/fonts/percolate.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/icon-viewer/build/fonts/percolate.woff -------------------------------------------------------------------------------- /icon-viewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "start": "maw dev", 4 | "build": "maw build" 5 | }, 6 | "devDependencies": { 7 | "maw": "^0.5.5" 8 | }, 9 | "dependencies": { 10 | "mdg-borealis": "^1.0.8" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /icon-viewer/src/index.less: -------------------------------------------------------------------------------- 1 | @import '{mdg:borealis}/index.import.less'; 2 | 3 | body { 4 | color: white; 5 | width: 800px; 6 | text-align: center; 7 | margin: 0 auto; 8 | } 9 | 10 | span { 11 | display: inline-block; 12 | width: 150px; 13 | padding: 20px; 14 | font-size: 0.8em; 15 | 16 | &::before { 17 | font-size: 2em; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /icon-viewer/src/mdg-borealis: -------------------------------------------------------------------------------- 1 | ../node_modules/mdg-borealis -------------------------------------------------------------------------------- /icon-viewer/src/public/fonts/percolate.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/icon-viewer/src/public/fonts/percolate.eot -------------------------------------------------------------------------------- /icon-viewer/src/public/fonts/percolate.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/icon-viewer/src/public/fonts/percolate.ttf -------------------------------------------------------------------------------- /icon-viewer/src/public/fonts/percolate.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/icon-viewer/src/public/fonts/percolate.woff -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chromatic", 3 | "version": "1.0.0", 4 | "description": "Explore, visualize, and prototype your UI components.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/meteor/chromatic.git" 12 | }, 13 | "author": "", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/meteor/chromatic/issues" 17 | }, 18 | "homepage": "https://github.com/meteor/chromatic#readme", 19 | "dependencies": { 20 | "@babel/runtime": "^7.18.9", 21 | "assert": "^1.4.1", 22 | "autosize": "3.0.15", 23 | "babel-runtime": "^6.23.0", 24 | "classnames": "^2.2.5", 25 | "create-react-class": "^15.7.0", 26 | "faker": "^3.1.0", 27 | "meteor-node-stubs": "^1.2.5", 28 | "prop-types": "^15.8.1", 29 | "react": "^15.2.1", 30 | "react-addons-create-fragment": "^15.2.1", 31 | "react-addons-css-transition-group": "^15.2.1", 32 | "react-addons-linked-state-mixin": "^15.2.1", 33 | "react-addons-perf": "^15.2.1", 34 | "react-addons-pure-render-mixin": "^15.2.1", 35 | "react-addons-test-utils": "^15.2.1", 36 | "react-addons-transition-group": "^15.2.1", 37 | "react-addons-update": "^15.2.1", 38 | "react-dom": "^15.2.1", 39 | "react-input-autosize": "^1.1.0", 40 | "react-input-mask": "^0.7.2", 41 | "velocity-animate": "^1.2.3", 42 | "velocity-react": ">=1.1.4" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/animations/animations.js: -------------------------------------------------------------------------------- 1 | /* globals Animations:true */ 2 | /* globals VelocityHelpers */ 3 | 4 | import Velocity from 'velocity-animate' 5 | import 'velocity-animate/velocity.ui'; 6 | import {velocityHelpers as VelocityHelpers} from 'velocity-react'; 7 | 8 | export const Animations = { 9 | // These two are just POC 10 | scaleIn: VelocityHelpers.registerEffect({ 11 | defaultDuration: 1100, 12 | calls: [ 13 | [{ 14 | translateZ: 0, 15 | scale: [1, 0], 16 | opacity: [1, 0] 17 | }] 18 | ], 19 | }), 20 | 21 | scaleOut: VelocityHelpers.registerEffect({ 22 | defaultDuration: 200, 23 | calls: [ 24 | [{ 25 | translateZ: 0, 26 | scale: [0, 1], 27 | opacity: [0, 1] 28 | }] 29 | ], 30 | }), 31 | 32 | animateScaleIn: VelocityHelpers.registerEffect({ 33 | defaultDuration: 200, 34 | calls: [ 35 | [{ 36 | opacity: 1, 37 | scale: 1 38 | }, 1, { 39 | easing: [200, 15] 40 | }] 41 | ] 42 | }), 43 | 44 | component: { 45 | scaleIn: { 46 | duration: 150, 47 | easing: 'ease-out', 48 | animation: { 49 | opacity: 1, 50 | scale: [1, 0] 51 | } 52 | }, 53 | scaleOut: { 54 | duration: 125, 55 | easing: [ 150, 15 ], 56 | animation: { 57 | opacity: 0, 58 | scale: [0, 1] 59 | } 60 | } 61 | } 62 | 63 | }; 64 | 65 | _.each($.Velocity.Redirects, (val, key) => { Animations[key] = key; }); 66 | -------------------------------------------------------------------------------- /packages/animations/main.js: -------------------------------------------------------------------------------- 1 | import { checkNpmVersions } from 'meteor/tmeasday:check-npm-versions'; 2 | 3 | checkNpmVersions({ 4 | 'velocity-react': '^1.1.3', 5 | 'velocity-animate': '^1.2.3' 6 | }, 'mdg:animations'); 7 | 8 | export * from './animations'; 9 | -------------------------------------------------------------------------------- /packages/animations/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'mdg:animations', 3 | version: '0.2.4', 4 | summary: 'A set of defined, reusable animations for velocity', 5 | git: 'https://github.com/meteor/chromatic', 6 | documentation: null, 7 | }) 8 | 9 | Package.onUse(function (api) { 10 | api.versionsFrom('2.7.3') 11 | api.use(['tmeasday:check-npm-versions@0.3.1', 'ecmascript', 'jquery@1.11.10', 'underscore', 'modules']) 12 | 13 | api.mainModule('main.js', 'client') 14 | }) 15 | -------------------------------------------------------------------------------- /packages/borealis/.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | -------------------------------------------------------------------------------- /packages/borealis/.npm/package/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/borealis/.npm/package/README: -------------------------------------------------------------------------------- 1 | This directory and the files immediately inside it are automatically generated 2 | when you change this package's NPM dependencies. Commit the files in this 3 | directory (npm-shrinkwrap.json, .gitignore, and this README) to source control 4 | so that others run the same versions of sub-dependencies. 5 | 6 | You should NOT check in the node_modules directory that Meteor automatically 7 | creates; if you are using git, the .gitignore file tells git to ignore it. 8 | -------------------------------------------------------------------------------- /packages/borealis/.npm/package/npm-shrinkwrap.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1, 3 | "dependencies": { 4 | "lodash.keyby": { 5 | "version": "4.6.0", 6 | "resolved": "https://registry.npmjs.org/lodash.keyby/-/lodash.keyby-4.6.0.tgz", 7 | "integrity": "sha1-f2oavak/0k4icopNNh7YvLpaQ1Q=" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/borealis/fonts/PulpDisplay-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/fonts/PulpDisplay-Bold.ttf -------------------------------------------------------------------------------- /packages/borealis/fonts/PulpDisplay-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/fonts/PulpDisplay-Light.ttf -------------------------------------------------------------------------------- /packages/borealis/fonts/PulpDisplay-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/fonts/PulpDisplay-Medium.ttf -------------------------------------------------------------------------------- /packages/borealis/fonts/percolate.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/fonts/percolate.eot -------------------------------------------------------------------------------- /packages/borealis/fonts/percolate.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/fonts/percolate.ttf -------------------------------------------------------------------------------- /packages/borealis/fonts/percolate.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/fonts/percolate.woff -------------------------------------------------------------------------------- /packages/borealis/form-components/checkbox.import.less: -------------------------------------------------------------------------------- 1 | @import "../util/index.import.less"; 2 | 3 | label.checkbox { 4 | min-height: 1em; 5 | position: relative; 6 | 7 | cursor: pointer; 8 | 9 | input { 10 | .font-s2; 11 | margin: 0 .7em 0 0; 12 | visibility: hidden; 13 | 14 | & + span { 15 | display: inline-block; 16 | vertical-align: top; 17 | line-height: 1; 18 | 19 | &:before, 20 | &:after { 21 | .position(absolute, 0, auto, auto, 0, 14px, 14px); 22 | content: ''; 23 | display: block; 24 | } 25 | } 26 | 27 | 28 | & + span:before { box-shadow: @color-mediumdark 0 0 0 1px inset; } 29 | 30 | &:checked + span:before { box-shadow: @color-complementary 0 0 0 1px inset; } 31 | 32 | & + span:after { 33 | .transition(all 150ms ease-out); 34 | .transform(scale3d(0,0,1)); 35 | 36 | //overrides 37 | height: 10px; 38 | margin-left: 2px; 39 | margin-top: 2px; 40 | width: 10px; 41 | 42 | opacity: 0; 43 | } 44 | 45 | &:checked + span:after { 46 | .transform(scale3d(1,1,1)); 47 | background: @color-complementary; 48 | opacity: 1; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/borealis/form-components/form-components.import.less: -------------------------------------------------------------------------------- 1 | @import 'ribbon.import.less'; 2 | @import 'cardinal.import.less'; 3 | @import 'form.import.less'; 4 | @import 'input.import.less'; 5 | @import 'radio.import.less'; 6 | @import 'searchbar.import.less'; 7 | @import 'select.import.less'; 8 | -------------------------------------------------------------------------------- /packages/borealis/form-components/index.import.less: -------------------------------------------------------------------------------- 1 | @import 'cardinal.import.less'; 2 | @import 'checkbox.import.less'; 3 | @import 'ribbon.import.less'; 4 | @import 'form.import.less'; 5 | @import 'index.import.less'; 6 | @import 'input.import.less'; 7 | @import 'radio.import.less'; 8 | @import 'searchbar.import.less'; 9 | @import 'select.import.less'; 10 | @import 'textarea.import.less'; 11 | -------------------------------------------------------------------------------- /packages/borealis/form-components/radio.import.less: -------------------------------------------------------------------------------- 1 | @import "../util/index.import.less"; 2 | @import "checkbox.import.less"; 3 | 4 | label.radio { 5 | &:extend(label.checkbox all); 6 | 7 | input[type="radio"] + span:before, 8 | input[type="radio"] + span:after { border-radius: 1em; } 9 | } 10 | -------------------------------------------------------------------------------- /packages/borealis/form-components/ribbon.import.less: -------------------------------------------------------------------------------- 1 | @import '../util/index.import.less'; 2 | 3 | @color-primary: #ff6a3e; // coral 4 | @color-secondary: #4241A8; // pearl 5 | 6 | .ribbon { 7 | display: flex; 8 | flex-direction: row; 9 | align-items: center; 10 | padding: 2px 8px; 11 | border-radius: 29px; 12 | height: 30px; 13 | flex: none; 14 | order: 1; 15 | flex-grow: 0; 16 | margin: 8px 0px; 17 | font-style: normal; 18 | font-weight: bold; 19 | font-size: 12px; 20 | line-height: 14px; 21 | letter-spacing: 0.1em; 22 | text-transform: uppercase; 23 | &.primary { 24 | background: rgba(255, 106, 62, 1) !important; 25 | color: white; 26 | } 27 | &.secondary { 28 | background: #8D91A3 !important; 29 | color: white; 30 | } 31 | &.tertiary { 32 | background: rgba(27, 36, 72, 1) !important; 33 | color: white; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/borealis/form-components/searchbar.import.less: -------------------------------------------------------------------------------- 1 | @import "../util/index.import.less"; 2 | 3 | .search-box { 4 | .icon-search { 5 | margin-left: -2px; 6 | cursor: pointer; 7 | } 8 | 9 | .reveal-search { 10 | .transition(all 300ms @easing); 11 | overflow: hidden; 12 | max-width: 24px; 13 | white-space: nowrap; 14 | 15 | input[type="text"] { 16 | padding: 0px; 17 | background: transparent !important; 18 | 19 | &.nochrome { 20 | display: inline-block; 21 | position: relative; 22 | top: -1px; //visual adjustment 23 | margin-left: 0; 24 | } 25 | } 26 | 27 | &.active { 28 | max-width: 100%; // needed for animation 29 | input[type="text"] { 30 | padding-left: 30px !important; 31 | } 32 | } 33 | } 34 | } 35 | 36 | .section-heading > .action-group > .search-box { 37 | margin-top: -1rem; 38 | } 39 | -------------------------------------------------------------------------------- /packages/borealis/form-components/textarea.import.less: -------------------------------------------------------------------------------- 1 | @import '../util/index.import.less'; 2 | 3 | // Input's look like text fields 4 | textarea { 5 | .font-s2; 6 | .placeholder(#8d91a3); 7 | 8 | /* Support / Porcelain */ 9 | padding: 5px; 10 | height: 56px; 11 | border: 2px solid #f3f4f5; 12 | box-sizing: border-box; 13 | border-radius: 8px; 14 | &[disabled] { 15 | /* Support / Porcelain */ 16 | 17 | background: #f3f4f5; 18 | /* Support / Porcelain */ 19 | 20 | border: 2px solid #f3f4f5; 21 | box-sizing: border-box; 22 | border-radius: 8px; 23 | } 24 | } 25 | 26 | textarea.secondary { 27 | box-shadow: @color-mediumlight 0 0 0 1px inset; 28 | } 29 | -------------------------------------------------------------------------------- /packages/borealis/global/global.import.less: -------------------------------------------------------------------------------- 1 | @import 'normalize.import.less'; 2 | @import 'base.import.less'; 3 | @import 'animation.import.less'; 4 | @import 'button.import.less'; 5 | @import 'drawer.import.less'; 6 | @import 'formatting.import.less'; 7 | @import 'header.import.less'; 8 | @import 'link.import.less'; 9 | @import 'list.import.less'; 10 | @import 'mobile.import.less'; 11 | @import 'nav.import.less'; 12 | @import 'section.import.less'; 13 | @import 'table.import.less'; 14 | @import 'transition.import.less'; 15 | @import 'boxes.import.less'; 16 | -------------------------------------------------------------------------------- /packages/borealis/global/mobile.import.less: -------------------------------------------------------------------------------- 1 | // Show only on desktop 2 | .show-desktop { 3 | @media screen and (max-width: (@breakpoint - 1px)) { 4 | display: none !important; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/apm/Favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/apm/Favicon.png -------------------------------------------------------------------------------- /packages/borealis/icons/apm/Favicon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/apm/Favicon@2x.png -------------------------------------------------------------------------------- /packages/borealis/icons/apm/Favicon@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/apm/Favicon@3x.png -------------------------------------------------------------------------------- /packages/borealis/icons/apm/Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/apm/Icon.png -------------------------------------------------------------------------------- /packages/borealis/icons/apm/Icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/apm/Icon@2x.png -------------------------------------------------------------------------------- /packages/borealis/icons/apm/Icon@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/apm/Icon@3x.png -------------------------------------------------------------------------------- /packages/borealis/icons/atmosphere/Favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/atmosphere/Favicon.png -------------------------------------------------------------------------------- /packages/borealis/icons/atmosphere/Favicon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/atmosphere/Favicon@2x.png -------------------------------------------------------------------------------- /packages/borealis/icons/atmosphere/Favicon@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/atmosphere/Favicon@3x.png -------------------------------------------------------------------------------- /packages/borealis/icons/atmosphere/Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/atmosphere/Icon.png -------------------------------------------------------------------------------- /packages/borealis/icons/atmosphere/Icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/atmosphere/Icon@2x.png -------------------------------------------------------------------------------- /packages/borealis/icons/atmosphere/Icon@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/atmosphere/Icon@3x.png -------------------------------------------------------------------------------- /packages/borealis/icons/box-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/box-bg.png -------------------------------------------------------------------------------- /packages/borealis/icons/countries/ap-southeast-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/borealis/icons/countries/eu-west-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/borealis/icons/countries/localhost.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/borealis/icons/countries/meet-eeyore.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/borealis/icons/countries/staging.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/borealis/icons/countries/ties.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /packages/borealis/icons/countries/us-east-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /packages/borealis/icons/fonts/PulpDisplay-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/fonts/PulpDisplay-Bold.ttf -------------------------------------------------------------------------------- /packages/borealis/icons/fonts/PulpDisplay-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/fonts/PulpDisplay-Light.ttf -------------------------------------------------------------------------------- /packages/borealis/icons/fonts/PulpDisplay-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/fonts/PulpDisplay-Medium.ttf -------------------------------------------------------------------------------- /packages/borealis/icons/fonts/percolate.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/fonts/percolate.eot -------------------------------------------------------------------------------- /packages/borealis/icons/fonts/percolate.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/fonts/percolate.ttf -------------------------------------------------------------------------------- /packages/borealis/icons/fonts/percolate.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/fonts/percolate.woff -------------------------------------------------------------------------------- /packages/borealis/icons/galaxy/Favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/galaxy/Favicon.png -------------------------------------------------------------------------------- /packages/borealis/icons/galaxy/Favicon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/galaxy/Favicon@2x.png -------------------------------------------------------------------------------- /packages/borealis/icons/galaxy/Favicon@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/galaxy/Favicon@3x.png -------------------------------------------------------------------------------- /packages/borealis/icons/galaxy/Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/galaxy/Icon.png -------------------------------------------------------------------------------- /packages/borealis/icons/galaxy/Icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/galaxy/Icon@2x.png -------------------------------------------------------------------------------- /packages/borealis/icons/galaxy/Icon@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/borealis/icons/galaxy/Icon@3x.png -------------------------------------------------------------------------------- /packages/borealis/icons/lock-ok-empty.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/borealis/icons/lock-ok.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/borealis/icons/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/alert.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/arrow-left-alt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/arrow-right-alt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/atmosphere.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/beaker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/book.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/bookmark-hollow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/browser.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/camera.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/category.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/certificate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/circle-hollow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/comment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/commit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/compass.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/credit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/cross.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/dashboard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/doc-chart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/doc-list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/ellipsis.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/expand-alt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/eye.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/face-happy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/face-neutral.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/face-sad.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/flag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/form.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/gdrive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/globe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/graph-bar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/graph-line.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/grow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/lightning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/list-unordered.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/memory.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/meteor.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/nut.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/outbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/paintbrush.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/paragraph.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/photo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/pin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/power.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/proceed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/question.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/redirect.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/reply.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/request-change.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/shield.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/sidebar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/star-hollow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/stop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/support.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/tablet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/time.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/timer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/transfer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/trash.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/unlock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/user-add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/user-alt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/users.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/wrench.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/icons/svg/youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/borealis/index.import.less: -------------------------------------------------------------------------------- 1 | 2 | @import 'icons/icons.import.less'; 3 | 4 | @import 'util/index.import.less'; 5 | 6 | @import 'global/global.import.less'; 7 | @import 'form-components/index.import.less'; 8 | @import 'overlays/overlays.import.less'; 9 | -------------------------------------------------------------------------------- /packages/borealis/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "MDG's style guide via Less mixins", 3 | "keywords": [ 4 | "styleguide", 5 | "mdg", 6 | "meteor", 7 | "less" 8 | ], 9 | "license": "MIT", 10 | "main": "index.import.less", 11 | "name": "mdg-borealis", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/meteor/clnhromatic/tree/master/packages/borealis" 15 | }, 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1" 18 | }, 19 | "version": "1.0.10", 20 | "dependencies": { 21 | "prop-types": "^15.7.2", 22 | "lodash.keyby": "^4.6.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/borealis/react-components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useHeaderInfo } from './useHeaderInfo'; 3 | 4 | Header = ({ className, children }) => { 5 | const { showBack, title, label } = useHeaderInfo(); 6 | return ( 7 |
8 |
9 | {showBack && ( 10 | { 13 | history.back(); 14 | }} 15 | > 16 | 17 | {label} 18 | 19 | )} 20 | 21 |

{title}

22 |
23 | {children} 24 |
25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /packages/borealis/react-components/LetterAvatar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const getPercentFromValue = (percent, value) => (value * percent) / 100; 4 | 5 | export const LetterAvatar = ({ 6 | onClick, 7 | bgColor, 8 | textColor, 9 | size, 10 | children, 11 | bgOpacity = '1.0', 12 | margin = true, 13 | className, 14 | ...props 15 | }) => { 16 | const halfSize = getPercentFromValue(50, size); 17 | return ( 18 | 26 | 33 | 41 | {children.substring(0, 2)} 42 | 43 | 44 | ); 45 | }; 46 | -------------------------------------------------------------------------------- /packages/borealis/react-components/PlanRibbon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | PlanRibbon = function({ children }) { 4 | let className = 'tertiary'; 5 | if (children.toLowerCase() === 'professional') { 6 | className = 'primary'; 7 | } else if (children.toLowerCase() === 'essentials') { 8 | className = 'secondary'; 9 | } 10 | return
{children}
; 11 | }; 12 | -------------------------------------------------------------------------------- /packages/borealis/react-components/useHeaderInfo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // Only available for new react versions, otherwise this component is not defined 4 | if (!React.createContext) { 5 | return; 6 | } 7 | 8 | const HeaderContext = React.createContext({}); 9 | 10 | HeaderProvider = ({ children }) => { 11 | const [title, setTitle] = React.useState(''); 12 | const [showBack, setShowBack] = React.useState(false); 13 | const [label, setLabel] = React.useState('Back'); 14 | return ( 15 | { 19 | setTitle(newTitle); 20 | document.title = newTitle; 21 | }, 22 | showBack, 23 | setShowBack, 24 | label, 25 | setLabel 26 | }} 27 | > 28 | {children} 29 | 30 | ); 31 | }; 32 | 33 | export const useHeaderInfo = (newTitle, newShowBack, newLabel = 'Back') => { 34 | const { title, setTitle, showBack, setShowBack, label, setLabel } = React.useContext( 35 | HeaderContext 36 | ); 37 | React.useEffect(() => { 38 | if (newTitle) { 39 | setTitle(newTitle); 40 | } 41 | if (newShowBack !== null) { 42 | setShowBack(newShowBack); 43 | } 44 | 45 | setLabel(newLabel); 46 | }); 47 | 48 | return { 49 | title, 50 | label, 51 | setTitle, 52 | showBack, 53 | setShowBack, 54 | }; 55 | }; 56 | -------------------------------------------------------------------------------- /packages/borealis/util/clearfix.import.less: -------------------------------------------------------------------------------- 1 | // Modern Clearfix 2 | // Modified from http://nicolasgallagher.com/micro-clearfix-hack/ 3 | .clearfix() { 4 | *zoom: 1; 5 | 6 | &:after { 7 | clear: both; 8 | content: " "; /* 1 */ 9 | display: table; /* 2 */ 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/borealis/util/color.import.less: -------------------------------------------------------------------------------- 1 | // Primary 2 | @color-primary: #FF6A3E;// coral 3 | @color-secondary: #4241A8;// pearl 4 | @color-tertiary: #FF6A3E;// gold 5 | @color-complementary: #FFFFFF; // sea green 6 | @color-ancillary: #4241A8;// pearl 7 | 8 | // Monochrome 9 | @color-lightest: #fff; 10 | @color-lighter: #f8f8f8; 11 | @color-light: #f3f3f3; 12 | @color-mediumlight: #EEE; 13 | @color-medium: #CCC; 14 | @color-mediumdark: #999; 15 | @color-dark: #666; 16 | @color-darker: #444; 17 | @color-darkest: #333; 18 | 19 | // Accent 20 | @color-accent-coolest: #E2DFF3; // baby purple 21 | @color-accent-cooler: #DFECF2; // baby blue 22 | @color-accent-cool: #DEF2E9; // baby teal 23 | @color-accent-warm: #E5F2DE; // baby green 24 | @color-accent-warmer: #F2EFDE; // baby yellow 25 | @color-accent-warmest: #F2DFDF; // baby peach 26 | 27 | // Validation 28 | @color-positive: #63C131; // green 29 | @color-negative: #ff4800; // 30 | @color-neutral: #ffffe4; 31 | 32 | // Lifecycle 33 | @color-running: @color-positive; 34 | @color-crashed: #E80000; 35 | @color-degraded: #FFD600; 36 | @color-stopped: @color-medium; 37 | 38 | // Third-party 39 | @color-facebook: #3b5998; 40 | @color-google: #58586d; 41 | @color-twitter: #46c8f5; 42 | 43 | 44 | @header-gradient-stop1: #101926; 45 | @header-gradient-stop2: #101926; 46 | -------------------------------------------------------------------------------- /packages/borealis/util/easing.import.less: -------------------------------------------------------------------------------- 1 | @easing: cubic-bezier(0.175, 0.885, 0.335, 1.05); 2 | -------------------------------------------------------------------------------- /packages/borealis/util/helper.import.less: -------------------------------------------------------------------------------- 1 | .position(@type; @top: auto; @right: auto; @bottom: auto; @left: auto; @width: auto; @height: auto) { 2 | position: @type; 3 | top: @top; 4 | right: @right; 5 | bottom: @bottom; 6 | left: @left; 7 | width: @width; 8 | height: @height; 9 | } 10 | -------------------------------------------------------------------------------- /packages/borealis/util/index.import.less: -------------------------------------------------------------------------------- 1 | @import 'clearfix.import.less'; 2 | @import 'color.import.less'; 3 | @import 'easing.import.less'; 4 | @import 'helper.import.less'; 5 | @import 'lesshat.import.less'; 6 | @import 'link.import.less'; 7 | @import 'text.import.less'; 8 | @import 'typography.import.less'; 9 | @import 'ui.import.less'; 10 | -------------------------------------------------------------------------------- /packages/borealis/util/link.import.less: -------------------------------------------------------------------------------- 1 | .link(@color) { 2 | color: @color; 3 | &:link, 4 | &:visited { color: @color; } 5 | &:active { color: darken(@color, 5%); } 6 | } 7 | -------------------------------------------------------------------------------- /packages/borealis/util/text.import.less: -------------------------------------------------------------------------------- 1 | .subheading-caps() { 2 | .type-bold; 3 | letter-spacing: .35em; 4 | text-transform: uppercase; 5 | } 6 | .subheading-without-caps() { 7 | .type-bold; 8 | } 9 | 10 | .subheading-caps(center) { 11 | .subheading-caps(); 12 | text-indent: .35em; 13 | } 14 | .subheading-without-caps(center) { 15 | .subheading-without-caps(); 16 | } 17 | 18 | .ellipsized() { 19 | overflow: hidden; 20 | text-overflow: ellipsis; 21 | white-space: nowrap; 22 | } 23 | 24 | .force-wrap() { 25 | word-wrap: break-word; 26 | word-break: break-all; 27 | -ms-word-break: break-all; 28 | word-break: break-word; 29 | 30 | .hyphens(auto); 31 | } 32 | -------------------------------------------------------------------------------- /packages/borealis/util/ui.import.less: -------------------------------------------------------------------------------- 1 | @breakpoint: 600px; 2 | @page-margin: 5.55555%; 3 | 4 | @xs: ~"only screen and (min-width: 360px)"; 5 | @sm: ~"only screen and (min-width: 600px)"; 6 | @md: ~"only screen and (min-width: 960px)"; 7 | @lg: ~"only screen and (min-width: 1280px)"; 8 | @xl: ~"only screen and (min-width: 1920px)"; 9 | 10 | .page-margins() { 11 | @media screen and (min-width: (@breakpoint * 1)) { margin: 0 2*@page-margin; } 12 | @media screen and (min-width: (@breakpoint * 1.5)) { margin: 0 3*@page-margin; } 13 | @media screen and (min-width: (@breakpoint * 2)) { margin: 0 4*@page-margin; } 14 | } 15 | 16 | .std-ypadding() { 17 | padding-top: 1.25rem; //20px 18 | padding-bottom: 1.25rem; 19 | 20 | @media screen and (min-width: @breakpoint) { 21 | padding-top: 1.875rem; //30px 22 | padding-bottom: 1.875rem; 23 | } 24 | } 25 | 26 | .std-xpadding() { 27 | padding-left: 1.25rem; //20px 28 | padding-right: 1.25rem; 29 | 30 | @media screen and (min-width: @breakpoint) { 31 | padding-left: 1.875rem; //30 32 | padding-right: 1.875rem; 33 | } 34 | } 35 | 36 | .inline-block-whitespace() { 37 | // Removes whitespace from display:inline-block layouts 38 | // Sets font-size to 0 to remove whitespace and resets font-size for child elements 39 | // Used primarily in grids 40 | 41 | font-size: 0; 42 | > * { .font-s3; } 43 | } 44 | -------------------------------------------------------------------------------- /packages/buttons/LoadingButton.jsx: -------------------------------------------------------------------------------- 1 | /* global LoadingButton:true */ 2 | 3 | import React from 'react'; 4 | const {Chromatic} = Package['mdg:chromatic-api'] || {}; 5 | 6 | export const LoadingButton = React.createClass({ 7 | propTypes: { 8 | active: React.PropTypes.bool.isRequired, 9 | disabled: React.PropTypes.bool, 10 | className: React.PropTypes.string, 11 | restText: React.PropTypes.node, 12 | activeText: React.PropTypes.node 13 | }, 14 | render() { 15 | const {active, disabled, restText, className, activeText, ...other} = this.props; 16 | let classNames = `btn loading ${className || ''}`; 17 | if (active) { 18 | classNames += ' loading-active'; 19 | } 20 | return ( 21 | 26 | ); 27 | } 28 | }); 29 | 30 | if (Chromatic) { 31 | Chromatic.add(LoadingButton, { 32 | specs: [ 33 | new Chromatic.Spec('rest', {props: { 34 | active: false, 35 | className: 'primary', 36 | restText: 'Loading' 37 | }}), 38 | new Chromatic.Spec('active', {props: { 39 | active: true, 40 | className: 'primary', 41 | restText: 'Loading', 42 | activeText: 'One Moment' 43 | }}), 44 | ] 45 | }); 46 | } 47 | -------------------------------------------------------------------------------- /packages/buttons/main.js: -------------------------------------------------------------------------------- 1 | import { checkNpmVersions } from 'meteor/tmeasday:check-npm-versions'; 2 | 3 | checkNpmVersions({ 4 | 'react': '^15.0.0' 5 | }, 'mdg:buttons'); 6 | 7 | export { ProgressButton } from './ProgressButton.jsx'; 8 | export { LoadingButton } from './LoadingButton.jsx'; 9 | -------------------------------------------------------------------------------- /packages/buttons/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'mdg:buttons', 3 | version: '0.2.10', 4 | summary: 'button components', 5 | git: 'https://github.com/meteor/chromatic', 6 | documentation: null, 7 | }) 8 | 9 | Package.onUse(function (api) { 10 | api.versionsFrom('2.7.3') 11 | api.use(['ecmascript', 'mdg:borealis@0.2.24', 'tmeasday:check-npm-versions@0.3.1'], 'client') 12 | 13 | api.mainModule('main.js', 'client') 14 | }) 15 | -------------------------------------------------------------------------------- /packages/callout/Callout.less: -------------------------------------------------------------------------------- 1 | @import "{mdg:borealis}/util/index.import.less"; 2 | 3 | .callout { 4 | .font-s1; 5 | text-align: center; 6 | .std-xpadding; 7 | padding-top: .5em; 8 | padding-bottom: .5em; 9 | 10 | 11 | &.primary { 12 | background-color: @color-darker; 13 | color: @color-lightest; 14 | a { 15 | color: @color-lightest; 16 | } 17 | } 18 | 19 | &.secondary { 20 | background-color: @color-neutral; 21 | color: @color-darkest; 22 | a { 23 | color: @color-darkest; 24 | } 25 | } 26 | 27 | &.alert { 28 | background-color: @color-negative; 29 | color: @color-lightest; 30 | a { 31 | color: @color-lightest; 32 | } 33 | } 34 | 35 | .title-callout { 36 | .subheading-caps; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/callout/main.js: -------------------------------------------------------------------------------- 1 | import { checkNpmVersions } from 'meteor/tmeasday:check-npm-versions'; 2 | 3 | checkNpmVersions({ 4 | 'react': '^15.0.0', 5 | 'classnames': '^2.2.5' 6 | }, 'mdg:callout'); 7 | 8 | export { Callout } from './Callout.jsx'; 9 | -------------------------------------------------------------------------------- /packages/callout/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'mdg:callout', 3 | version: '0.2.8', 4 | summary: 'an important thing at the top of the screen', 5 | git: 'https://github.com/meteor/chromatic', 6 | documentation: null, 7 | }) 8 | 9 | Package.onUse(function (api) { 10 | api.versionsFrom('2.7.3') 11 | api.use(['ecmascript', 'less@2.8.0', 'mdg:borealis@0.2.24', 'mdg:chromatic-api@0.3.3'], 'client') 12 | 13 | api.mainModule('main.js', 'client') 14 | 15 | api.addFiles(['Callout.less'], 'client') 16 | }) 17 | -------------------------------------------------------------------------------- /packages/chromatic-api/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/chromatic-api/README.md -------------------------------------------------------------------------------- /packages/chromatic-api/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'mdg:chromatic-api', 3 | version: '0.3.3', 4 | summary: 'chromatic dev include', 5 | git: 'https://github.com/meteor/chromatic', 6 | debugOnly: true, 7 | documentation: null, 8 | }) 9 | 10 | Package.onUse(function (api) { 11 | api.versionsFrom('2.7.3') 12 | api.use(['ecmascript', 'underscore', 'check', 'reactive-dict'], 'client') 13 | api.mainModule('chromatic-api.js', 'client') 14 | }) 15 | -------------------------------------------------------------------------------- /packages/chromatic-explorer/ChromaticLayout.jsx: -------------------------------------------------------------------------------- 1 | /* global ChromaticLayout:true */ 2 | /* global FlowRouter */ 3 | 4 | import classnames from 'classnames'; 5 | import React from 'react'; 6 | 7 | ChromaticLayout = React.createClass({ 8 | propTypes: { 9 | sidebar: React.PropTypes.node, 10 | header: React.PropTypes.node, 11 | children: React.PropTypes.node, 12 | showSidebar: React.PropTypes.bool.isRequired 13 | }, 14 | getDefaultProps() { 15 | return { 16 | sidebar: null, 17 | header: null, 18 | showSidebar: false 19 | }; 20 | }, 21 | componentWillMount() { 22 | $('body').addClass('styleguide-dark'); 23 | }, 24 | render() { 25 | const {sidebar, showSidebar} = this.props; 26 | const header = this.props.header || ( 27 |
28 | 29 | Chromatic 30 | 31 |
32 | ); 33 | return ( 34 |
35 | {header} 36 | {sidebar} 37 | {this.props.children} 38 |
39 | ); 40 | } 41 | }); 42 | -------------------------------------------------------------------------------- /packages/chromatic-explorer/ComponentSpec.jsx: -------------------------------------------------------------------------------- 1 | /* global ComponentSpec:true */ 2 | /* global StyleguideSpec FlowRouter */ 3 | 4 | import React from 'react'; 5 | import {ReactMeteorData} from 'meteor/react-meteor-data'; 6 | const {Chromatic} = Package['mdg:chromatic-api'] || {}; 7 | 8 | ComponentSpec = React.createClass({ 9 | mixins: [ReactMeteorData], 10 | getMeteorData() { 11 | const entryName = FlowRouter.getParam('entryName'); 12 | const specName = FlowRouter.getParam('specName'); 13 | const entry = Chromatic.entry(entryName); 14 | return { 15 | entry, 16 | specName 17 | }; 18 | }, 19 | componentWillMount() { 20 | $('body').addClass('styleguide-white fill-iframe'); 21 | }, 22 | render() { 23 | const {entry, specName} = this.data; 24 | let specNames = []; 25 | 26 | if (!entry) { 27 | return null; 28 | } 29 | 30 | const makeSpec = (name) => { 31 | return ( 32 |
33 | 34 |
35 | ); 36 | }; 37 | 38 | if (specName === 'all') { 39 | specNames = entry.specs.map(s => s.name); 40 | } else { 41 | specNames = [specName]; 42 | } 43 | 44 | return ( 45 |
46 | {specNames.map(makeSpec)} 47 |
48 | ); 49 | } 50 | }); 51 | -------------------------------------------------------------------------------- /packages/chromatic-explorer/ComponentSpec.less: -------------------------------------------------------------------------------- 1 | @import "{mdg:borealis}/util/index.import.less"; 2 | 3 | .fill-iframe { 4 | position: absolute; 5 | top: 0; 6 | right: 0; 7 | bottom: 0; 8 | left: 0; 9 | overflow: hidden; 10 | } 11 | 12 | .spec-container { 13 | display: block; 14 | margin: 0 auto; 15 | height: 100%; 16 | .transition(background-color 300ms linear); 17 | 18 | &:only-child { 19 | position: absolute; 20 | top: 0; 21 | right: 0; 22 | bottom: 0; 23 | left: 0; 24 | overflow-y: scroll; 25 | } 26 | 27 | &.lightest { 28 | background-color: @color-lightest; 29 | } 30 | &.medium { 31 | background-color: @color-medium; 32 | } 33 | &.mediumdark { 34 | background-color: @color-mediumdark; 35 | } 36 | &.dark { 37 | background-color: @color-dark; 38 | } 39 | &.darkest { 40 | background-color: @color-darkest; 41 | } 42 | 43 | .spec { 44 | padding: 10px; 45 | border-bottom: 1px dashed @color-mediumdark; 46 | 47 | &:only-child { 48 | border: none; 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/chromatic-explorer/PageToggleButton.jsx: -------------------------------------------------------------------------------- 1 | /* global PageToggleButton:true */ 2 | /* global FlowRouter */ 3 | 4 | import classnames from 'classnames'; 5 | import React from 'react'; 6 | const {Chromatic} = Package['mdg:chromatic-api'] || {}; 7 | 8 | PageToggleButton = React.createClass({ 9 | render() { 10 | const currentPath = FlowRouter.current().path.split('?')[0]; 11 | 12 | const links = Chromatic.allPages().map(page => { 13 | const routeRE = new RegExp(`${page.name}$`), 14 | active = routeRE.test(currentPath) ? 'active' : ''; 15 | return ( 16 | {page.name.charAt(0).toUpperCase() + page.name.slice(1)} 18 | ); 19 | }).reverse(); 20 | 21 | return ( 22 |
23 | {links} 24 |
25 | ); 26 | } 27 | }); 28 | -------------------------------------------------------------------------------- /packages/chromatic-explorer/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/chromatic-explorer/README.md -------------------------------------------------------------------------------- /packages/chromatic-explorer/SingleComponentPageSidebar.jsx: -------------------------------------------------------------------------------- 1 | /* global SingleComponentPageSidebar:true */ 2 | /* global ReactMeteorData FlowRouter Form FormRadio StyleguideNotFound 3 | FormSelect ColorGrid */ 4 | 5 | import classnames from 'classnames'; 6 | import React from 'react'; 7 | const {Chromatic} = Package['mdg:chromatic-api'] || {}; 8 | 9 | SingleComponentPageSidebar = React.createClass({ 10 | propTypes: { 11 | entryName: React.PropTypes.string.isRequired, 12 | specName: React.PropTypes.string.isRequired, 13 | onSpecChange: React.PropTypes.func.isRequired 14 | }, 15 | render() { 16 | const {entryName, specName, onSpecChange} = this.props; 17 | const entry = Chromatic.entry(entryName); 18 | 19 | let radios = []; 20 | if (entry.specs.length > 1) { 21 | radios = entry.specs.map(s => { 22 | return ; 23 | }); 24 | } 25 | const radioForm = ( 26 |
27 | 28 | {radios} 29 | 30 | ); 31 | 32 | return ( 33 |
34 |
35 |

{entryName}

36 | {radioForm} 37 |
38 |
39 | ); 40 | } 41 | }); 42 | -------------------------------------------------------------------------------- /packages/chromatic-explorer/StyleguideNotFound.jsx: -------------------------------------------------------------------------------- 1 | /* global StyleguideNotFound:true */ 2 | /* global ChromaticLayout */ 3 | 4 | import React from 'react'; 5 | 6 | StyleguideNotFound = React.createClass({ 7 | render() { 8 | return ( 9 | 10 |
11 |

COMPONENT NOT FOUND

12 |
13 | 14 | ); 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /packages/chromatic-explorer/StylesPageSidebar.jsx: -------------------------------------------------------------------------------- 1 | /* global StylesPageSidebar:true */ 2 | /* global PageToggleButton */ 3 | 4 | import classnames from 'classnames'; 5 | import React from 'react'; 6 | 7 | StylesPageSidebar = React.createClass({ 8 | getInitialState() { 9 | return {selected: 'Color'}; 10 | }, 11 | onSectionClick(evt) { 12 | this.setState({selected: evt.target.innerHTML}); 13 | }, 14 | render() { 15 | const {selected} = this.state; 16 | const sections = ['Color', 'Icons', 'Typography', 'Code', 'Buttons', 'Links', 'Forms', 'Table']; 17 | const sectionLinks = sections.map(tag => { 18 | return ({tag}); 20 | }); 21 | 22 | return ( 23 |
24 |
25 | 26 |
27 | {sectionLinks} 28 |
29 |
30 |
31 | ); 32 | } 33 | }); 34 | -------------------------------------------------------------------------------- /packages/chromatic/main.js: -------------------------------------------------------------------------------- 1 | // use conditional exports for these as they are debug-only packages 2 | export const { Chromatic } = Package['mdg:chromatic-api'] || {}; 3 | export const { ChromaticExplorer } = Package['mdg:chromatic-explorer'] || {}; 4 | -------------------------------------------------------------------------------- /packages/chromatic/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'mdg:chromatic', 3 | version: '0.3.1', 4 | summary: 'a visualizer for react components', 5 | git: 'https://github.com/meteor/chromatic', 6 | documentation: null, 7 | }) 8 | 9 | Package.onUse(function (api) { 10 | api.versionsFrom('2.7.3') 11 | 12 | api.use(['ecmascript', 'mdg:chromatic-api@0.3.0', 'mdg:chromatic-explorer@0.3.1'], 'client') 13 | 14 | api.mainModule('main.js', 'client') 15 | }) 16 | -------------------------------------------------------------------------------- /packages/classnames/.npm/package/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/classnames/.npm/package/README: -------------------------------------------------------------------------------- 1 | This directory and the files immediately inside it are automatically generated 2 | when you change this package's NPM dependencies. Commit the files in this 3 | directory (npm-shrinkwrap.json, .gitignore, and this README) to source control 4 | so that others run the same versions of sub-dependencies. 5 | 6 | You should NOT check in the node_modules directory that Meteor automatically 7 | creates; if you are using git, the .gitignore file tells git to ignore it. 8 | -------------------------------------------------------------------------------- /packages/classnames/.npm/package/npm-shrinkwrap.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "classnames": { 4 | "version": "2.1.3", 5 | "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.1.3.tgz", 6 | "from": "classnames@2.1.3" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/code-block/CodeBlock.jsx: -------------------------------------------------------------------------------- 1 | /* global CodeBlock:true */ 2 | /* global hljs */ 3 | 4 | import classnames from 'classnames'; 5 | import React from 'react'; 6 | const {Chromatic} = Package['mdg:chromatic-api'] || {}; 7 | 8 | export const CodeBlock = React.createClass({ 9 | propTypes: { 10 | code: React.PropTypes.string, 11 | className: React.PropTypes.string 12 | }, 13 | render() { 14 | const {code, className, ...other} = this.props; 15 | const formattedCode = hljs.highlightAuto(code); 16 | return ( 17 | 
19 |     );
20 |   }
21 | });
22 | 
23 | 
24 | if (Chromatic) {
25 |   Chromatic.add(CodeBlock, {
26 |     specs: [
27 |       new Chromatic.Spec('default', {props: {
28 |         code: `{
29 |           "public": {
30 |             "environment": "production"
31 |           },
32 |           "logSettings": {
33 |             "level": "debug",
34 |             "options": {
35 |               "treatWarningsAsErrors": true
36 |             }
37 |           }
38 |         }`
39 |       }}),
40 |       new Chromatic.Spec('one-line', {props: {
41 |         code: `items.find().fetch().map(i => i.name);`
42 |       }}),
43 |     ]
44 |   });
45 | }
46 | 


--------------------------------------------------------------------------------
/packages/code-block/CodeBlock.less:
--------------------------------------------------------------------------------
 1 | @import "{mdg:borealis}/util/index.import.less";
 2 | 
 3 | .code-block {
 4 |   .type-code;
 5 |   .font-code;
 6 |   background-color: transparent;
 7 |   border: 1px solid @color-light;
 8 | 
 9 |   margin: 0;
10 |   padding: 1rem;
11 | }
12 | 


--------------------------------------------------------------------------------
/packages/code-block/main.js:
--------------------------------------------------------------------------------
1 | import { checkNpmVersions } from 'meteor/tmeasday:check-npm-versions';
2 | 
3 | checkNpmVersions({
4 |   'react': '^15.0.0',
5 |   'classnames': '^2.2.5'
6 | }, 'mdg:callout');
7 | 
8 | export { CodeBlock } from './CodeBlock.jsx';
9 | 


--------------------------------------------------------------------------------
/packages/code-block/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:code-block',
 3 |   version: '0.2.7',
 4 |   summary: 'Format a code block using simple:highlight.js',
 5 |   git: 'http://github.com/meteor/chromatic',
 6 |   documentation: null,
 7 | })
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom('2.7.3')
11 |   api.use(
12 |     ['ecmascript', 'less@2.8.0', 'mdg:borealis@0.2.24', 'mdg:chromatic@0.3.1', 'simple:highlight.js@1.0.9'],
13 |     'client',
14 |   )
15 | 
16 |   api.mainModule('main.js', 'client')
17 | 
18 |   api.addFiles(['CodeBlock.less'], 'client')
19 | })
20 | 


--------------------------------------------------------------------------------
/packages/color-grid/ColorGrid.jsx:
--------------------------------------------------------------------------------
 1 | /* global ColorGrid:true React */
 2 | 
 3 | import React from 'react';
 4 | const {Chromatic} = Package['mdg:chromatic-api'] || {};
 5 | 
 6 | ColorGrid = React.createClass({
 7 |   propTypes: {
 8 |     size: React.PropTypes.number.isRequired
 9 |   },
10 |   getDefaultProps() {
11 |     return { size: 8 };
12 |   },
13 |   render() {
14 |     const {size} = this.props;
15 |     return (
16 |       

17 |         
18 |           
19 |             {_.times(size, (r) => {
20 |               _.times(size, (c) => )}
22 |           
23 |         
)
21 |             }

24 |       
);
25 |   }
26 | });
27 | 
28 | if (Chromatic) {
29 |   Chromatic.add(ColorGrid, {
30 |     specs: [
31 |       new Chromatic.Spec('default', {
32 |         props() {
33 |           return {
34 |             size: 8
35 |           };
36 |         }
37 |       })
38 |     ]
39 |   });
40 | }
41 | 


--------------------------------------------------------------------------------
/packages/color-grid/README.md:
--------------------------------------------------------------------------------
 1 | ### Usage:
 2 | ```less
 3 | @import '{color-grid}/color-grid.import.less';
 4 | .clr-grid {
 5 |   width: 300px; // must size the component yourself
 6 |   height: 300px;
 7 |   .color-grid(@size, @top-left, @top-right, @bottom-right, @bottom-left);
 8 | }
 9 | ```
10 | `@size`: an integer number of cells per side in the grid, and the rest of the arguments are colors for every corner.
11 | 


--------------------------------------------------------------------------------
/packages/color-grid/color-grid.import.less:
--------------------------------------------------------------------------------
 1 | @import 'for.import.less';
 2 | 
 3 | @angle: 30deg;
 4 | @animationDuration: 5s;
 5 | @animationStagger: 100ms;
 6 | 
 7 | .anim() {
 8 | 
 9 |   // 0%, 60% { transform: rotate3d(1, 1, 0, 0); }
10 |   // 30% {
11 |   //   transform: rotate3d(1, 1, 0, @angle);
12 |   // }
13 | 
14 |   0%, 60%, 100% { opacity: 0.7; }
15 |   30% {
16 |     opacity: 1;
17 |   }
18 | 
19 | }
20 | 
21 | @-webkit-keyframes anim { .anim; }
22 | @keyframes anim { .anim; }
23 | 
24 | .color-grid(@size, @tl, @tr, @br, @bl) {
25 |   table tbody {
26 |     >*>* {
27 |       width: 100% / @size;
28 |       height: 100% / @size;
29 |     }
30 |     .for(@size); .-each(@i) {
31 |       >*:nth-child(@{i}) {
32 |         @rl: mix(@bl, @tl, 100% * @i / @size);
33 |         @rr: mix(@br, @tr, 100% * @i / @size);
34 |         .for(@size); .-each(@j) {
35 |           >*:nth-child(@{j}) {
36 |             background-color: mix(@rr, @rl, 100% * @j / @size);
37 |             animation: anim @animationDuration infinite ease-in-out;
38 |             animation-delay: @i * (@j - @size / 2) * @animationStagger;
39 |           }
40 |         }
41 |       }
42 |     }
43 |   }
44 | }
45 | 
46 | .simple-color-grid(@size) {
47 |   @green: #33ff00;
48 |   @purple: #6c00ff;
49 |   @orange: #ff8a00;
50 |   @yellow: #ffff00;
51 |   @boost: 2;
52 |   .color-grid(@size, mix(@green, #416185, @boost * 0%),
53 |                  mix(@purple, #334f6f, @boost * 10%),
54 |                  mix(@orange, #596068, @boost * 7%),
55 |                  mix(@yellow, #656c77, @boost * 3%));
56 | }
57 | 


--------------------------------------------------------------------------------
/packages/color-grid/color-grid.less:
--------------------------------------------------------------------------------
 1 | @import 'color-grid.import.less';
 2 | 
 3 | .clr-grid {
 4 |   width: 600px;
 5 |   height: 600px;
 6 |   margin: 0 auto;
 7 |   table {
 8 |     width: 100%;
 9 |     height: 100%;
10 |     border-collapse: separate;
11 |     border-spacing: 0px;
12 |   }
13 |   .simple-color-grid(8);
14 | }
15 | 


--------------------------------------------------------------------------------
/packages/color-grid/for.import.less:
--------------------------------------------------------------------------------
 1 | // ............................................................
 2 | // .for
 3 | 
 4 | .for(@i, @n) {.-each(@i)}
 5 | .for(@n)     when (isnumber(@n)) {.for(1, @n)}
 6 | .for(@i, @n) when not (@i = @n)  {
 7 |     .for((@i + (@n - @i) / abs(@n - @i)), @n);
 8 | }
 9 | 
10 | // ............................................................
11 | // .for-each
12 | 
13 | .for(@array)   when (default()) {.for-impl_(length(@array))}
14 | .for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
15 | .for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i))}
16 | 
17 | 
18 | 
19 | // for-each usage:
20 | 
21 | // @list: banana, apple, pear, potato, carrot, peach;
22 | 
23 | // #basic-usage {
24 | //     .for(@list); .-each(@value) {
25 | //         value: @value;
26 | //     }
27 | // }
28 | 
29 | // for usage:
30 | 
31 | // #basic-usage {
32 | //     .for(6); .-each(@i) {
33 | //         i: @i;
34 | //     }
35 | // }
36 | 


--------------------------------------------------------------------------------
/packages/color-grid/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:color-grid',
 3 |   version: '0.2.6',
 4 |   summary: 'Generate a pretty grid of colored boxes',
 5 |   documentation: 'README.md',
 6 |   git: 'https://github.com/meteor/chromatic',
 7 | })
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom('2.7.3')
11 |   api.use(['ecmascript', 'less@2.8.0', 'mdg:borealis@0.2.24', 'mdg:chromatic-api@0.3.3'], 'client')
12 |   api.addFiles(['for.import.less', 'color-grid.import.less', 'color-grid.less', 'ColorGrid.jsx'], 'client')
13 |   api.export('ColorGrid', 'client')
14 | })
15 | 


--------------------------------------------------------------------------------
/packages/date-components/DateVar.js:
--------------------------------------------------------------------------------
 1 | /* global DateVar:true */
 2 | 
 3 | DateVar = class extends Tracker.Dependency {
 4 |   constructor(delay) {
 5 |     super();
 6 |     this.delay = delay;
 7 |   }
 8 |   get() {
 9 |     this.depend();
10 |     if (!this._timeout) {
11 |       Meteor.setTimeout(() => {
12 |         this.changed();
13 |       }, this.delay);
14 |     }
15 |     return new Date();
16 |   }
17 | };
18 | 


--------------------------------------------------------------------------------
/packages/date-components/FullDate.jsx:
--------------------------------------------------------------------------------
 1 | /* global FullDate:true */
 2 | /* global moment */
 3 | 
 4 | import React from 'react';
 5 | const {Chromatic} = Package['mdg:chromatic-api'] || {};
 6 | 
 7 | FullDate = React.createClass({
 8 |   propTypes: {
 9 |     date: React.PropTypes.instanceOf(Date).isRequired,
10 |     machine: React.PropTypes.bool
11 |   },
12 |   render() {
13 |     let formattedDate;
14 |     const momentDate = moment(this.props.date);
15 |     if (this.props.machine) {
16 |       formattedDate = momentDate.format('YYYY-MM-DD HH:mm:ssZ');
17 |     } else {
18 |       formattedDate = momentDate.format('dddd, MMMM D, YYYY [at] h:mma');
19 |     }
20 | 
21 |     return {formattedDate};
22 |   }
23 | });
24 | 
25 | if (Chromatic) {
26 |   Chromatic.add(FullDate, {
27 |     specs: [
28 |       new Chromatic.Spec('human', {
29 |         props: {
30 |           date: moment().subtract(3, 'hours').subtract(10, 'minutes').toDate(),
31 |           machine: false
32 |         }
33 |       }),
34 |       new Chromatic.Spec('machine', {
35 |         props: {
36 |           date: moment().subtract(3, 'hours').subtract(10, 'minutes').toDate(),
37 |           machine: true
38 |         }
39 |       })
40 |     ]
41 |   });
42 | }
43 | 


--------------------------------------------------------------------------------
/packages/date-components/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:date-components',
 3 |   version: '0.2.6',
 4 |   summary: 'Simple rendering of dates',
 5 |   git: 'https://github.com/meteor/chromatic',
 6 |   documentation: null,
 7 | })
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom('2.7.3')
11 |   api.use(
12 |     [
13 |       'ecmascript',
14 |       'mdg:borealis@0.2.24',
15 |       'mdg:chromatic-api@0.3.3',
16 |       'mdg:tooltips@0.2.12',
17 |       'momentjs:moment@2.10.6',
18 |       'react-meteor-data@0.2.9',
19 |       'tracker',
20 |     ],
21 |     'client',
22 |   )
23 |   api.addFiles(['DateVar.js', 'RelativeDate.jsx', 'FullDate.jsx'], 'client')
24 |   api.export(['RelativeDate', 'FullDate'], 'client')
25 | })
26 | 


--------------------------------------------------------------------------------
/packages/flow-router-extensions/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/flow-router-extensions/README.md


--------------------------------------------------------------------------------
/packages/flow-router-extensions/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:flow-router-extensions',
 3 |   version: '0.2.10',
 4 |   summary: 'Update flow router to use a pattern that is more contained',
 5 |   git: 'https://github.com/meteor/chromatic',
 6 |   documentation: null,
 7 | })
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom('1.2')
11 |   api.use(['ecmascript', 'kadira:flow-router@2.4.0'])
12 |   api.mainModule('flow-router-extensions.js')
13 | })
14 | 


--------------------------------------------------------------------------------
/packages/form-components/.gitignore:
--------------------------------------------------------------------------------
1 | .npm
2 | 


--------------------------------------------------------------------------------
/packages/form-components/Checkbox.less:
--------------------------------------------------------------------------------
 1 | @import "{mdg:borealis}/util/index.import.less";
 2 | 
 3 | label.checkbox {
 4 | 	min-height: 1em;
 5 | 	position: relative;
 6 | 
 7 | 	cursor: pointer;
 8 | 
 9 | 	input {
10 | 	  .font-s2;
11 |     margin: 0 .7em 0 0;
12 | 	  visibility: hidden;
13 | 
14 |     & + span {
15 |       display: inline-block;
16 |       vertical-align: top;
17 |       line-height: 1;
18 | 
19 |       &:before,
20 |       &:after {
21 |         .position(absolute, 0, auto, auto, 0, 14px, 14px);
22 |         content: '';
23 |         display: block;
24 |       }
25 |     }
26 | 
27 | 
28 | 	  & + span:before { box-shadow: @color-mediumdark 0 0 0 1px inset; }
29 | 
30 | 	  &:checked + span:before { box-shadow: @color-complementary 0 0 0 1px inset; }
31 | 
32 | 		& + span:after {
33 |       .transition(all 150ms ease-out);
34 |       .transform(scale3d(0,0,1));
35 | 
36 |       //overrides
37 |       height: 10px;
38 |       margin-left: 2px;
39 |       margin-top: 2px;
40 |       width: 10px;
41 | 
42 |       opacity: 0;
43 | 	  }
44 | 
45 | 		&:checked + span:after {
46 |       .transform(scale3d(1,1,1));
47 |       background: @color-complementary;
48 |       opacity: 1;
49 |     }
50 | 	}
51 | }
52 | 


--------------------------------------------------------------------------------
/packages/form-components/Radio.less:
--------------------------------------------------------------------------------
 1 | @import "{mdg:borealis}/util/index.import.less";
 2 | @import "/Checkbox.less";
 3 | 
 4 | label.radio {
 5 | 	&:extend(label.checkbox all);
 6 | 
 7 | 	input[type="radio"] + span:before,
 8 |   input[type="radio"] + span:after { border-radius: 1em; }
 9 | }
10 | 


--------------------------------------------------------------------------------
/packages/form-components/SearchBar.less:
--------------------------------------------------------------------------------
 1 | @import "{mdg:borealis}/util/index.import.less";
 2 | 
 3 | .search-box {
 4 |   .icon-search {
 5 |     cursor: pointer;
 6 |   }
 7 | 
 8 |   .reveal-search {
 9 |     .transition(all 300ms @easing);
10 |     overflow: hidden;
11 |     max-width: 24px;
12 |     white-space: nowrap;
13 | 
14 |     input[type="text"] {
15 |       background: transparent !important;
16 | 
17 |       &.nochrome {
18 |         display: inline-block;
19 |         position: relative;
20 |         top: -1px; //visual adjustment
21 |         margin-left: 0;
22 |       }
23 |     }
24 | 
25 |     &.active {
26 |       max-width: 100%; // needed for animation
27 |       input[type="text"] {
28 |         padding-left: 30px !important;
29 |       }
30 |     }
31 |   }
32 | }
33 | 
34 | .section-heading > .action-group > .search-box {
35 |   margin-top: -1rem;
36 | }
37 | 


--------------------------------------------------------------------------------
/packages/form-components/SubmitButton.jsx:
--------------------------------------------------------------------------------
 1 | /* global SubmitButton:true */
 2 | 
 3 | import React from 'react';
 4 | import {LoadingButton} from 'meteor/mdg:buttons';
 5 | 
 6 | SubmitButton = React.createClass({
 7 |   propTypes: {
 8 |     title: React.PropTypes.string.isRequired,
 9 |     submittingTitle: React.PropTypes.string,
10 |     disabled: React.PropTypes.bool,
11 |     className: React.PropTypes.string
12 |   },
13 |   contextTypes: {
14 |     submitting: React.PropTypes.bool
15 |   },
16 |   render() {
17 |     const {title, submittingTitle, disabled, className} = this.props;
18 |     const submitting = !!this.context.submitting;
19 |     return (
20 |       
23 |     );
24 |   }
25 | });
26 | 


--------------------------------------------------------------------------------
/packages/form-components/Textarea.less:
--------------------------------------------------------------------------------
 1 | @import "{mdg:borealis}/util/index.import.less";
 2 | 
 3 | // Input's look like text fields
 4 | textarea {
 5 |   .font-s2;
 6 | 	.placeholder(@color-mediumdark);
 7 | 
 8 |   padding: .7111em 1em; //40
 9 | 
10 |   background: @color-lightest;
11 |   border:none;
12 |   box-sizing: border-box;
13 |   border-radius: 0;
14 |   color: @color-darkest;
15 |   display: block;
16 |   outline: none;
17 |   width: 100%;
18 |   -webkit-appearance: none;
19 | 
20 |   &[disabled] { opacity: .5; }
21 | 
22 |   &.alert { box-shadow: @color-negative 0 0 1px 0 inset; }
23 | 
24 |   &.inverse {
25 |     .placeholder(@color-medium);
26 |     background-color: @color-darkest;
27 |     color: @color-lightest;
28 |   }
29 | 
30 | 	// a form input with no chrome at all (ie. appears just as text)
31 | 	&.nochrome {
32 | 		padding: 0;
33 | 
34 | 		border: none;
35 | 		box-shadow: none;
36 | 		background: none;
37 | 
38 | 		&:focus,
39 | 		&:active,
40 | 		&:hover {}
41 | 	}
42 | }
43 | 
44 | textarea.secondary {
45 |     box-shadow: @color-mediumlight 0 0 0 1px inset;
46 | }
47 | 


--------------------------------------------------------------------------------
/packages/form-components/Toggle.jsx:
--------------------------------------------------------------------------------
 1 | /* global Toggle:true, FormToggle:true */
 2 | /* global makeField */
 3 | 
 4 | import React from 'react';
 5 | const {Chromatic} = Package['mdg:chromatic-api'] || {};
 6 | 
 7 | Toggle = React.createClass({
 8 |   propTypes: {
 9 |     value: React.PropTypes.bool.isRequired,
10 |     error: React.PropTypes.string,
11 |     onChange: React.PropTypes.func.isRequired,
12 |     className: React.PropTypes.string,
13 |     label: React.PropTypes.string
14 |   },
15 |   onChange(event) {
16 |     this.props.onChange(event.target.checked);
17 |   },
18 |   render() {
19 |     const {value, error, onChange, className, label, ...other} = this.props;
20 |     const classNames = `checkbox toggle ${className || ''}`;
21 |     return (
22 |       // TODO: offer non-checkbox custom implementation?
23 |       
28 |     );
29 |   }
30 | });
31 | 
32 | FormToggle = makeField(Toggle, 'FormToggle', false);
33 | 
34 | if (Chromatic) {
35 |   const noop = function() {};
36 |   // Uggh the div here is gross but doesn't seem to matter
37 |   Chromatic.add(Toggle, {
38 |     specs: [
39 |       new Chromatic.Spec('off', {props: {
40 |         onChange: noop, value: false, error: null, label: 'Toggle'
41 |       }}),
42 |       new Chromatic.Spec('on', {props: {
43 |         onChange: noop, value: true, error: null, label: 'Toggle'
44 |       }})
45 |     ]
46 |   });
47 | }
48 | 


--------------------------------------------------------------------------------
/packages/form-components/Upload.jsx:
--------------------------------------------------------------------------------
 1 | /* global Upload:true */
 2 | /* global File */
 3 | 
 4 | import React from 'react';
 5 | 
 6 | Upload = React.createClass({
 7 |   propTypes: {
 8 |     value: React.PropTypes.instanceOf(File),
 9 |     onChange: React.PropTypes.func.isRequired
10 |   },
11 |   onChange(event) {
12 |     this.props.onChange(event.target.files[0]);
13 |   },
14 |   onClear() {
15 |     this.props.onChange(null);
16 |   },
17 |   render() {
18 |     const {value} = this.props;
19 | 
20 |     const input = ;
21 | 
22 |     if (value) {
23 |       return (
24 |         
25 |           
26 |             {input}{value.name}
27 |           {' '}
28 |           
29 |             
30 |           
31 |         
32 |       );
33 |     }
34 | 
35 |     return (
36 |       {input}Choose File
37 |     );
38 |   }
39 | });
40 | 


--------------------------------------------------------------------------------
/packages/form-components/makeField.jsx:
--------------------------------------------------------------------------------
 1 | /* global makeField:true */
 2 | 
 3 | import React from 'react';
 4 | 
 5 | makeField = function(Component, displayName, defaultValue = '') {
 6 |   return React.createClass({
 7 |     displayName: displayName,
 8 |     propTypes: {
 9 |       name: React.PropTypes.string.isRequired
10 |     },
11 |     contextTypes: {
12 |       getValue: React.PropTypes.func.isRequired,
13 |       setValue: React.PropTypes.func.isRequired,
14 |       getError: React.PropTypes.func.isRequired
15 |     },
16 |     onChange(value) {
17 |       this.context.setValue(this.props.name, value);
18 |     },
19 |     render() {
20 |       const {name, ...other} = this.props;
21 |       const {getValue, getError} = this.context;
22 | 
23 |       const value = getValue(name) || defaultValue;
24 | 
25 |       return (
26 |         
28 |       );
29 |     }
30 |   });
31 | };
32 | 


--------------------------------------------------------------------------------
/packages/list/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:list',
 3 |   version: '0.2.16',
 4 |   summary: 'A infinite-scroll list component',
 5 |   git: 'https://github.com/meteor/chromatic',
 6 |   documentation: null,
 7 | })
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom('2.7.3')
11 |   api.use(
12 |     ['ecmascript', 'mdg:borealis@0.2.24', 'underscore', 'mdg:form-components@0.2.13', 'mdg:animations@0.2.3'],
13 |     'client',
14 |   )
15 |   api.addFiles(['List.jsx', 'AnimatedListTester.jsx', 'Pagination.jsx'], 'client')
16 |   api.export(['List', 'Pagination'], 'client')
17 | })
18 | 


--------------------------------------------------------------------------------
/packages/loading-spinner/LoadingSpinner.jsx:
--------------------------------------------------------------------------------
 1 | /* global LoadingSpinner:true */
 2 | /* global */
 3 | 
 4 | import classnames from 'classnames';
 5 | import React from 'react';
 6 | import CreateReactClass from 'create-react-class'
 7 | import PropTypes from 'prop-types'
 8 | const {Chromatic} = Package['mdg:chromatic-api'] || {};
 9 | 
10 | const TICK_COUNTS = {small: 16, medium: 24, large: 32};
11 | 
12 | LoadingSpinner = CreateReactClass({
13 |   propTypes: {
14 |     size: PropTypes.oneOf(['small', 'medium', 'large']).isRequired,
15 |     className: PropTypes.string
16 |   },
17 |   render() {
18 |     const {size, className} = this.props;
19 | 
20 |     return (
21 |       

22 |         

23 |         

24 |           {_.times(TICK_COUNTS[size], (i) => 
)}
25 |         

26 |       

27 |     );
28 |   }
29 | });
30 | 
31 | if (Chromatic) {
32 |   Chromatic.add(LoadingSpinner, {
33 |     specs: [
34 |       new Chromatic.Spec('small', {props: {size: 'small'}}),
35 |       new Chromatic.Spec('medium', {props: {size: 'medium'}}),
36 |       new Chromatic.Spec('large', {props: {size: 'large'}}),
37 |     ]
38 |   });
39 | }
40 | 


--------------------------------------------------------------------------------
/packages/loading-spinner/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: "mdg:loading-spinner",
 3 |   version: "0.2.14",
 4 |   summary: "Basic in-place spinner",
 5 |   git: "https://github.com/meteor/chromatic",
 6 |   documentation: null,
 7 | });
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom("2.7.3");
11 |   api.use(["ecmascript", "less@2.8.0", "mdg:borealis@0.2.24"]);
12 |   api.addFiles(["LoadingSpinner.jsx", "LoadingSpinner.less"], "client");
13 |   api.export("LoadingSpinner", "client");
14 | });
15 | 


--------------------------------------------------------------------------------
/packages/outlines/README.md:
--------------------------------------------------------------------------------
1 | # Outlines
2 | Press ctrl+~ to show outlines around all dom elements


--------------------------------------------------------------------------------
/packages/outlines/outlines.css:
--------------------------------------------------------------------------------
1 | .debug-outlines * {
2 |   outline: 1px dashed rgba(255, 170, 170, 0.6);
3 | }


--------------------------------------------------------------------------------
/packages/outlines/outlines.js:
--------------------------------------------------------------------------------
1 | window.addEventListener('keyup', (e) => {
2 |   if (e.keyCode === 192 && e.ctrlKey) {
3 |     $('html').toggleClass('debug-outlines');
4 |   }
5 | });
6 | 


--------------------------------------------------------------------------------
/packages/outlines/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:outlines',
 3 |   version: '0.2.4',
 4 |   readme: 'README.md',
 5 |   summary: 'Press ctrl+~ to show outlines around all dom elements',
 6 |   git: 'https://github.com/meteor/chromatic',
 7 |   debugOnly: true,
 8 | })
 9 | 
10 | Package.onUse(function (api) {
11 |   api.versionsFrom('2.7.3')
12 |   api.use(['ecmascript', 'jquery@1.11.10'], 'client')
13 |   api.addFiles(['outlines.js', 'outlines.css'], 'client')
14 | })
15 | 


--------------------------------------------------------------------------------
/packages/overlays/OverlayController.js:
--------------------------------------------------------------------------------
 1 | import assert from 'assert';
 2 | 
 3 | /*
 4 |  * This is essentially equivalent to the Router.
 5 |  *
 6 |  * Opening + Closing the overlay should be done through changing the URL params.
 7 |  * This is out of the hands of the Overlay router itself, it just listens.
 8 |  */
 9 | class OverlayRouter {
10 |   constructor() {
11 |     this._routeGetters = Object.create(null);
12 |   }
13 | 
14 |   route(name, getter) {
15 |     if (typeof name === 'string') {
16 |       assert.strictEqual(typeof getter, 'function');
17 |     } else {
18 |       const component = name;
19 |       name = component.displayName; // eslint-disable-line
20 |       assert.strictEqual(typeof name, 'string');
21 |       assert.strictEqual(typeof component, 'function');
22 |       getter = () => component; // eslint-disable-line
23 |     }
24 | 
25 |     this._routeGetters[name] = getter;
26 |   }
27 | 
28 |   getComponent(name) {
29 |     const getter = this._routeGetters[name];
30 |     if (getter) {
31 |       const component = getter();
32 |       assert.strictEqual(component.displayName, name);
33 |       return component;
34 |     }
35 | 
36 |     return null;
37 |   }
38 | }
39 | 
40 | const OverlayController = new OverlayRouter();
41 | export { OverlayController };
42 | 


--------------------------------------------------------------------------------
/packages/overlays/index.js:
--------------------------------------------------------------------------------
1 | export { Overlay } from './Overlay';
2 | export { OverlayController } from './OverlayController';
3 | 


--------------------------------------------------------------------------------
/packages/overlays/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:overlays',
 3 |   version: '0.2.12',
 4 |   summary: 'Overlay layout and mechanism to drive overlays',
 5 |   git: 'https://github.com/meteor/chromatic',
 6 |   documentation: null,
 7 | })
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom('2.7.3')
11 |   api.use(
12 |     ['ecmascript', 'less@2.8.0', 'mdg:borealis@0.2.24', 'mdg:animations@0.2.3', 'react-meteor-data@0.2.9'],
13 |     'client',
14 |   )
15 |   api.mainModule('index.js', 'client')
16 | })
17 | 


--------------------------------------------------------------------------------
/packages/react-meteor-app/NotFound.jsx:
--------------------------------------------------------------------------------
 1 | /* global NotFound:true */
 2 | /* global Layout */
 3 | 
 4 | import React from 'react';
 5 | 
 6 | NotFound = React.createClass({
 7 |   render() {
 8 |     return (
 9 |       

10 |         

11 |           
The content you were looking for could not be found

12 |           Go Home
13 |         

14 |       

15 |     );
16 |   }
17 | });
18 | 


--------------------------------------------------------------------------------
/packages/react-meteor-app/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/packages/react-meteor-app/README.md


--------------------------------------------------------------------------------
/packages/react-meteor-app/ReactMeteorApp.jsx:
--------------------------------------------------------------------------------
 1 | /* global ReactMeteorApp:true */
 2 | /* global ReactMeteorData FlowRouter NotFound ReactLayoutRenderer */
 3 | 
 4 | import React from 'react';
 5 | 
 6 | ReactMeteorApp = React.createClass({
 7 |   mixins: [ReactMeteorData],
 8 |   getMeteorData() {
 9 |     // We need to make sure we invalidate if the current route changes too
10 |     FlowRouter.watchPathChange();
11 |     return {
12 |       Component: FlowRouter.getRouteHandler(),
13 |       currentRoute: FlowRouter.current(),
14 |       status: Meteor.status()
15 |     };
16 |   },
17 |   render() {
18 |     const {Component, currentRoute, status} = this.data;
19 | 
20 |     if (!Component) {
21 |       return ;
22 |     }
23 | 
24 |     return ;
25 |   }
26 | });
27 | 


--------------------------------------------------------------------------------
/packages/react-meteor-app/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:react-meteor-app',
 3 |   version: '0.2.9',
 4 |   summary: 'Baseline for React component rendering and Meteor + FlowRouter integration',
 5 |   git: 'https://github.com/meteor/chromatic',
 6 |   documentation: null,
 7 | })
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom('2.7.3')
11 |   api.use(
12 |     ['ecmascript', 'react-meteor-data@0.2.9', 'kadira:flow-router@2.4.0', 'mdg:flow-router-extensions@0.2.9'],
13 |     'client',
14 |   )
15 |   api.addFiles(['ReactMeteorApp.jsx', 'ReactLayoutRenderer.jsx', 'NotFound.jsx'], 'client')
16 |   api.export(['ReactMeteorApp', 'ReactLayoutRenderer', 'NotFound'], 'client')
17 | })
18 | 


--------------------------------------------------------------------------------
/packages/sortable/SortableTableExample.jsx:
--------------------------------------------------------------------------------
 1 | /* global SortableTableExample:true */
 2 | /* global Sortable */
 3 | 
 4 | import React from 'react';
 5 | 
 6 | const {Chromatic} = Package['mdg:chromatic-api'] || {};
 7 | 
 8 | SortableTableExample = React.createClass({
 9 |   componentWillMount() {
10 |     this.sortableData = new Mongo.Collection(null);
11 |     const faker = require("faker/locale/en");
12 |     _.times(5, () => {
13 |       this.sortableData.insert({
14 |         name: faker.name.findName(),
15 |         email: faker.internet.email()
16 |       });
17 |     });
18 |   },
19 |   getInitialState() {
20 |     return {
21 |       specifier: {name: 1}
22 |     };
23 |   },
24 |   onSort(specifier) {
25 |     this.setState({specifier});
26 |   },
27 |   render() {
28 |     const {specifier} = this.state;
29 |     const items = this.sortableData.find({}, {sort: specifier}).fetch();
30 | 
31 |     return (
32 |       
33 |         
34 |           
35 |             Name
36 |             Email
37 |           
38 |         
39 |         
40 |           {items.map(item => {
41 |             return ;
42 |           })}
43 |         
44 |       
{item.name}{item.email}

45 |     );
46 |   }
47 | });
48 | 
49 | if (Chromatic) {
50 |   Chromatic.add(SortableTableExample);
51 | }
52 | 


--------------------------------------------------------------------------------
/packages/sortable/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:sortable',
 3 |   version: '0.2.13',
 4 |   summary: 'Components to create sortable things',
 5 |   git: 'https://github.com/meteor/chromatic',
 6 |   documentation: null,
 7 | })
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom('2.7.3')
11 |   api.use(['ecmascript', 'mdg:borealis@0.2.24'], 'client')
12 |   api.addFiles(['Sortable.jsx', 'SortableTableExample.jsx'], 'client')
13 |   api.export('Sortable', 'client')
14 | })
15 | 


--------------------------------------------------------------------------------
/packages/tooltips/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:tooltips',
 3 |   version: '0.2.13',
 4 |   summary: 'Basic tooltip wrapper for elements',
 5 |   git: 'https://github.com/meteor/chromatic',
 6 |   documentation: null,
 7 | })
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom('2.7.3')
11 |   api.use(['ecmascript', 'less@2.8.0', 'underscore', 'mdg:borealis@0.2.24', 'mdg:chromatic-api@0.2.4'], 'client')
12 | 
13 |   api.addFiles(['WithTooltip.jsx', 'TooltipStyleguide.jsx'], 'client')
14 | 
15 |   api.export('WithTooltip', 'client')
16 | })
17 | 


--------------------------------------------------------------------------------
/packages/utils/package.js:
--------------------------------------------------------------------------------
 1 | Package.describe({
 2 |   name: 'mdg:utils',
 3 |   version: '0.2.5',
 4 |   summary: 'common utility functions',
 5 |   git: 'https://github.com/meteor/chromatic',
 6 |   documentation: null,
 7 | })
 8 | 
 9 | Package.onUse(function (api) {
10 |   api.versionsFrom('2.7.3')
11 |   api.use(['ecmascript', 'underscore'])
12 |   api.addFiles(['utils.js'])
13 |   api.export(['Utils'])
14 | })
15 | 


--------------------------------------------------------------------------------
/thumbnail-video.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/meteor/chromatic/84704d5131c645f42a92f79f180f93a1116e179e/thumbnail-video.png


--------------------------------------------------------------------------------