├── .babelrc ├── .eslintignore ├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── DESIGN_PRINCIPLES.md ├── DEVELOPING.md ├── GOVERNANCE.md ├── LICENSE ├── README.md ├── circle.yml ├── docs ├── date picker mockups.bmpr ├── landing page.bmpr ├── sample application.bmpr └── select mockups.bmpr ├── lerna.json ├── package.json ├── packages ├── angular-playground │ ├── .gitignore │ ├── package.json │ ├── public │ │ └── index.html │ └── src │ │ ├── index.css │ │ └── index.js ├── angular │ ├── package.json │ └── src │ │ ├── 2016-12-01 │ │ ├── button.js │ │ ├── datepicker.js │ │ ├── index.js │ │ ├── select.js │ │ └── validators.js │ │ └── index.js ├── components │ ├── README.md │ ├── bower.json │ ├── package.json │ ├── scripts │ │ ├── browserify.js │ │ ├── remap-wct-coverage.js │ │ ├── report-coverage.js │ │ └── test-ci.js │ ├── src │ │ ├── 2016-12-01 │ │ │ ├── button-state.js │ │ │ ├── button-state.test.js │ │ │ ├── button.js │ │ │ ├── container.js │ │ │ ├── datepicker.js │ │ │ ├── datepicker │ │ │ │ ├── calendar-day.js │ │ │ │ ├── calendar-header.js │ │ │ │ ├── datepicker-calendar.js │ │ │ │ ├── datepicker-state.js │ │ │ │ └── datepicker-state.test.js │ │ │ ├── element.js │ │ │ ├── index.js │ │ │ ├── inline.js │ │ │ ├── input-state.js │ │ │ ├── list.js │ │ │ ├── select-menu.js │ │ │ ├── select-option.js │ │ │ ├── select-state.js │ │ │ ├── select-state.test.js │ │ │ └── select.js │ │ ├── index.js │ │ └── utils │ │ │ ├── apply-props.js │ │ │ ├── clear-children.js │ │ │ ├── event-key.js │ │ │ ├── event-key.test.js │ │ │ ├── format-moment.js │ │ │ ├── format-moment.test.js │ │ │ ├── inject-style-tag.js │ │ │ ├── inject-styles.js │ │ │ ├── private-registry.js │ │ │ ├── render-queue.js │ │ │ ├── render-queue.test.js │ │ │ ├── scroll-into-view.js │ │ │ └── scroll-into-view.test.js │ ├── test │ │ ├── bundle.js │ │ ├── button.test.html │ │ ├── datepicker.test.html │ │ ├── list.test.html │ │ ├── runner.html │ │ └── select.test.html │ └── wct.conf.json ├── design-dsl │ ├── .gitignore │ ├── README.md │ ├── examples │ │ ├── HelloWorld.oml │ │ └── HelloWorld.oml.js │ ├── modules │ │ ├── cli │ │ │ ├── orion-compile-test.ts │ │ │ └── orion.ts │ │ ├── experiments │ │ │ ├── demo-components │ │ │ │ └── toolbar.ts │ │ │ ├── hello-panel.ts │ │ │ ├── hello-primitives.ts │ │ │ ├── hello-toolbar.ts │ │ │ ├── hello-world-compiled-example.tsx │ │ │ ├── parser.ts │ │ │ ├── primitives.ts │ │ │ ├── react-example.tsx │ │ │ ├── tree-construction.test.ts │ │ │ ├── type-checking-scratch.ts │ │ │ └── utils │ │ │ │ ├── es6-identifier-regex.ts │ │ │ │ ├── gen-functional-component.ts │ │ │ │ └── gen-html.ts │ │ ├── generator │ │ │ └── visitors │ │ │ │ └── text.ts │ │ ├── index.ts │ │ ├── parser │ │ │ ├── tokenizer.test.ts │ │ │ └── tokenizer.ts │ │ └── version.ts │ ├── package.json │ ├── tsconfig.json │ └── typings_custom │ │ └── custom.d.ts ├── marketing-playground │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ └── index.html │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ ├── anchor.js │ │ ├── features-benefits.js │ │ ├── get-started.js │ │ └── nav.js │ │ ├── constants.js │ │ ├── index.css │ │ └── index.js ├── react-components │ ├── .gemini.yml │ ├── .storybook │ │ ├── addons.js │ │ ├── addons │ │ │ ├── example-addon │ │ │ │ └── index.js │ │ │ └── source-addon │ │ │ │ ├── index.js │ │ │ │ └── register.js │ │ └── config.js │ ├── gemini │ │ ├── .eslintrc.json │ │ ├── button-test.js │ │ ├── datepicker-test.js │ │ ├── screens │ │ │ ├── button │ │ │ │ ├── button-default │ │ │ │ │ └── default │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ ├── button-disabled │ │ │ │ │ └── disabled │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ ├── button-focus │ │ │ │ │ └── focus │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ ├── button-hover │ │ │ │ │ └── hover │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ ├── button-large │ │ │ │ │ └── large │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ └── button-small │ │ │ │ │ └── small │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ ├── datepicker │ │ │ │ ├── datepicker-clearable │ │ │ │ │ └── clearable │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ ├── datepicker-custom-date-formatting │ │ │ │ │ └── custom-date-formatting │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ ├── datepicker-custom-disabled-dates │ │ │ │ │ └── custom-disabled-dates │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ ├── datepicker-custom-placeholder-text │ │ │ │ │ └── custom-placeholder-text │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ ├── datepicker-focus-month-day │ │ │ │ │ └── focus-month-day │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ ├── datepicker-focus │ │ │ │ │ └── focus │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ ├── datepicker-unfocused-no-date │ │ │ │ │ └── unfocused-no-date │ │ │ │ │ │ ├── chrome.png │ │ │ │ │ │ ├── edge.png │ │ │ │ │ │ └── firefox.png │ │ │ │ └── datepicker-unfocused-with-date │ │ │ │ │ └── unfocused-with-date │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ └── select │ │ │ │ ├── select-clearable │ │ │ │ └── clearable │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ │ ├── select-collapsed │ │ │ │ └── collapsed │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ │ ├── select-disabled-option │ │ │ │ └── disabled-option │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ │ ├── select-disabled │ │ │ │ └── disabled │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ │ ├── select-expanded │ │ │ │ └── expanded │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ │ ├── select-focus │ │ │ │ └── focus │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ │ ├── select-no-search-results │ │ │ │ └── no-search-results │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ │ ├── select-option-focus │ │ │ │ └── option-focus │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ │ ├── select-scrolling │ │ │ │ └── scrolling │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ │ ├── select-selected-index │ │ │ │ └── selected-index │ │ │ │ │ ├── chrome.png │ │ │ │ │ ├── edge.png │ │ │ │ │ └── firefox.png │ │ │ │ └── select-some-search-results │ │ │ │ └── some-search-results │ │ │ │ ├── chrome.png │ │ │ │ ├── edge.png │ │ │ │ └── firefox.png │ │ └── select-test.js │ ├── package.json │ ├── src │ │ ├── 2016-12-01 │ │ │ ├── button.js │ │ │ ├── button.test.js │ │ │ ├── datepicker.js │ │ │ ├── index.js │ │ │ └── select.js │ │ └── index.js │ └── stories │ │ ├── button.js │ │ ├── button │ │ ├── disabled.js │ │ ├── focus.js │ │ ├── hover.js │ │ ├── large.js │ │ ├── small.js │ │ └── with-text.js │ │ ├── datepicker.js │ │ ├── datepicker │ │ ├── clearable.js │ │ ├── custom-date-formatting.js │ │ ├── custom-disabled-dates.js │ │ ├── custom-placeholder-text.js │ │ ├── disabled.js │ │ ├── focus-month-and-day.js │ │ ├── focus.js │ │ ├── i18n.js │ │ ├── interactive.js │ │ ├── unfocused-with-date.js │ │ └── unfocused-wo-date.js │ │ ├── select.js │ │ ├── select │ │ ├── clearable.js │ │ ├── collapsed.js │ │ ├── disabled-option.js │ │ ├── disabled.js │ │ ├── expanded.js │ │ ├── focus.js │ │ ├── interactive.js │ │ ├── kitchen-sink.js │ │ ├── no-search-results.js │ │ ├── option-focus.js │ │ ├── scrolling.js │ │ ├── selected-index.js │ │ └── some-search-results.js │ │ └── shared.js ├── react-hig │ └── README.md ├── react-playground │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg └── style │ ├── package.json │ └── src │ ├── 2016-12-01 │ └── index.js │ ├── border-radius.js │ ├── box-shadow.js │ ├── box-shadow.test.js │ ├── container.js │ ├── container.test.js │ ├── display.js │ ├── display.test.js │ ├── hovers.js │ ├── hovers.test.js │ ├── index.js │ ├── overflow.js │ ├── overflow.test.js │ ├── pointer-events.js │ ├── pointer-events.test.js │ ├── position.js │ ├── position.test.js │ ├── reset-focus-style.js │ ├── reset-focus-style.test.js │ ├── scale.js │ ├── skins.js │ ├── spacing.js │ ├── typography.js │ ├── typography.test.js │ ├── user-select.js │ └── user-select.test.js ├── rationale ├── MONOREPO.md └── VERSIONING.md └── scripts ├── copy-package-builds.js ├── deploy.js ├── ensure-copyright.js ├── modules ├── constants.js ├── deploy-config.js ├── github-upload-notification.js ├── github-upload-notification.test.js └── known-paths.js ├── set-package-to-root.js └── start-playground.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-app"] 3 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | build 3 | coverage 4 | gemini-report 5 | lib 6 | node_modules 7 | packages/*-playground 8 | packages/design-dsl 9 | packages/hig.web 10 | vendor -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "code": "100", 3 | "parser": "babel-eslint", 4 | "extends": [ 5 | "prettier", 6 | "prettier/react" 7 | ], 8 | "plugins": [ 9 | "react", 10 | "prettier" 11 | ], 12 | "parserOptions": { 13 | "ecmaVersion": 2016, 14 | "sourceType": "module", 15 | "ecmaFeatures": { 16 | "jsx": true, 17 | "experimentalObjectRestSpread": true 18 | } 19 | }, 20 | "env": { 21 | "es6": true, 22 | "browser": true, 23 | "node": true 24 | }, 25 | "rules": { 26 | "prettier/prettier": [ 27 | "error", 28 | { 29 | "trailingComma": "none", 30 | "singleQuote": true 31 | } 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Expected Behavior 4 | 5 | 6 | 7 | ## Current Behavior 8 | 9 | 10 | 11 | ## Possible Solution 12 | 13 | 14 | 15 | ## How do we reproduce the issue? 16 | 17 | Please post a public URL and ideally post a reduced test case. E.g. on jsbin.com that exhibits only your issue and nothing else. 18 | 19 | 1. Step 1 to reproduce 20 | 2. Step 2 to reproduce 21 | 3. … 22 | 23 | ## What browsers are affected? 24 | 25 | All browsers? Some specific browser? What device type? 26 | 27 | ## Which Orion version is affected? 28 | 29 | Is this a new issue? Or was it always broken? Paste your Orion version. You can find it in the browser dev tools. 30 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Description 4 | 5 | 6 | ## Motivation and Context 7 | 8 | 9 | 10 | ## How Has This Been Tested? 11 | 12 | 13 | 14 | 15 | ## Types of changes 16 | 17 | - [ ] Bug fix (non-breaking change which fixes an issue) 18 | - [ ] New feature (non-breaking change which adds functionality) 19 | - [ ] Breaking change (fix or feature that would cause existing functionality to change) 20 | 21 | ## Checklist: 22 | 23 | 24 | - [ ] My code follows the code style of this project. 25 | - [ ] My change requires a change to the documentation. 26 | - [ ] I have updated the documentation accordingly. 27 | - [ ] I have read the **CONTRIBUTING** document. 28 | - [ ] I have added tests to cover my changes. 29 | - [ ] All new and existing tests passed. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/* 2 | .nyc_output 3 | bower_components 4 | build 5 | coverage 6 | gemini-report 7 | lerna-debug.log 8 | lib 9 | node_modules 10 | npm-debug.log 11 | -------------------------------------------------------------------------------- /DESIGN_PRINCIPLES.md: -------------------------------------------------------------------------------- 1 | 16 | 17 | # Orion Design Principles 18 | 19 | These design principles are meant to guide the ongoing design and development of Orion. They should help us make internally consistent decisions. 20 | 21 | ## User Experience > Developer Experience > Ease of Implementation. 22 | 23 | When in doubt, do what’s best for the end user experience, even if it means that it’s harder for the page creator to build or for the library developer to implement. 24 | 25 | ## Don't Break Our Apps 26 | 27 | The primary contract between Orion and it's consumers is trusting in the API. Upgrading 28 | to a new version should **never** break an existing integration. See [VERSIONING](rationale/VERSIONING.md) for more details. 29 | 30 | ## Components are the lowest common denominator 31 | 32 | We believe that there will always be a new framework around the corner. Orion is designed originally for Autodesk where there are many front-end frameworks in use. We need to support the current and future UI frameworks. 33 | 34 | ## Modular distribution 35 | 36 | Ensure that if a consumer opts to use only a small number of components they don't pay the price of all the components. Orion will someday have 100s of components and needs to keep an eye on that. 37 | 38 | ## TODO... 39 | -------------------------------------------------------------------------------- /GOVERNANCE.md: -------------------------------------------------------------------------------- 1 | 16 | 17 | # Orion open source governance 18 | 19 | The Orion project's chief and primary concern is with the development of Orion HTML, an open source library of components which increase developer efficiency and provide a consistent look and feel to web applications across Autodesk. The look and feel of components is based on Autodesk Human Interface guidelines and the various product teams that contribute to Orion. The Orion project's governance model thus reflects only the need to steer the engineering direction of the components and not any other activities which are out of scope. 20 | 21 | Our governance model is as follows: 22 | 23 | * There is a single Tech Lead, who will have the final say on all decisions regarding technical direction. 24 | * The Tech Lead directs the Core Committers, whose members include the Tech Lead and those who have been appointed by the Tech Lead as Core Committers. 25 | * In the event the Tech Lead is unable to perform his or her duties, or abdicates, the Core Committers can select a new Tech Lead from amongst themselves. 26 | * In the event there are no Core Committers, Autodesk Inc. will appoint one. 27 | 28 | ## Core Committers: 29 | 30 | * Tech Lead: Cameron Westland (@camwest) 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2016 Autodesk,Inc. 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 7.8.0 4 | checkout: 5 | post: 6 | - | 7 | git submodule sync 8 | git submodule update --init || : 9 | - | 10 | git submodule sync 11 | git submodule update --init 12 | dependencies: 13 | pre: 14 | - echo -e "$NPM_USER\n$NPM_PASS\n$NPM_EMAIL" | npm login 15 | override: 16 | - unset NODE_ENV 17 | - npm install 18 | - npm run bootstrap 19 | cache_directories: 20 | - "node_modules" 21 | - "package/angular-playground/node_modules" 22 | - "packages/angular/node_modules" 23 | - "packages/components/bower_components" 24 | - "packages/components/node_modules" 25 | - "packages/design-dsl/node_modules" 26 | - "packages/marketing-playground/node_modules" 27 | - "packages/react-playground/node_modules" 28 | - "packages/react-components/node_modules" 29 | - "packages/style/node_modules" 30 | test: 31 | pre: 32 | - npm run build 33 | - npm run build-lib 34 | # - cd packages/react-components && npm run start-storybook: 35 | # background: true 36 | override: 37 | - npm run test-ci 38 | deployment: 39 | production: 40 | branch: master 41 | commands: 42 | - npm run build 43 | - npm run deploy-master 44 | # lerna uses git describe --abbrev=0 --tags which fails if it cannot find 45 | # the commit history for the latest tag. so to fix we do an unshallow fetch 46 | - "[[ ! -s \"$(git rev-parse --git-dir)/shallow\" ]] || git fetch --unshallow" 47 | - npm run publish-canary 48 | snapshot: 49 | branch: /.*/ 50 | commands: 51 | - npm run build 52 | - npm run deploy-snapshot 53 | -------------------------------------------------------------------------------- /docs/date picker mockups.bmpr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/docs/date picker mockups.bmpr -------------------------------------------------------------------------------- /docs/landing page.bmpr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/docs/landing page.bmpr -------------------------------------------------------------------------------- /docs/sample application.bmpr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/docs/sample application.bmpr -------------------------------------------------------------------------------- /docs/select mockups.bmpr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/docs/select mockups.bmpr -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0-rc.4", 3 | "version": "1.0.3" 4 | } -------------------------------------------------------------------------------- /packages/angular-playground/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # build 7 | lib 8 | 9 | # misc 10 | .DS_Store 11 | .env 12 | npm-debug.log 13 | -------------------------------------------------------------------------------- /packages/angular-playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-playground", 3 | "version": "1.0.3", 4 | "private": true, 5 | "author": "Autodesk Inc.", 6 | "homepage": ".", 7 | "license": "Apache-2.0", 8 | "devDependencies": { 9 | "@skatejs/web-components": "^1.0.0", 10 | "react-scripts": "^0.9.5" 11 | }, 12 | "dependencies": { 13 | "@orion-ui/angular": "^1.0.3", 14 | "angular": "^1.5.9", 15 | "moment": "^2.17.1" 16 | }, 17 | "scripts": { 18 | "start": "BROWSER=none PORT=3001 react-scripts start", 19 | "disable-build": "react-scripts build", 20 | "test": "echo 'No tests configured'" 21 | } 22 | } -------------------------------------------------------------------------------- /packages/angular-playground/public/index.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | 22 | Minimal Orion - Angular App 23 | 24 | 25 |

26 | Minimal Orion - Angular 27 |

28 | 32 | 33 |
34 |

35 | Button 36 |

37 | Hello, Orion! 38 | 39 |

Select

40 | 41 | 42 |

Datepicker

43 | 44 |
45 | 46 | -------------------------------------------------------------------------------- /packages/angular-playground/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | 6 | height: '100%'; 7 | padding: 28px 8 | } 9 | 10 | .grid { 11 | background-color: rgba(0, 0, 0, 0.05); 12 | background-image: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, 0.2) 1px, transparent 8px), repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0, 0, 0, 0.2) 1px, transparent 8px); 13 | background-size: 8px 8px; 14 | padding: 28px; 15 | } 16 | -------------------------------------------------------------------------------- /packages/angular-playground/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import '@skatejs/web-components'; 18 | import './index.css'; 19 | 20 | import 'angular'; 21 | import '@orion-ui/angular/lib/2016-12-01'; 22 | 23 | window.angular 24 | .module('app', ['orion']) 25 | .controller('Controller', function () { 26 | const app = this; 27 | 28 | app.options = [ 29 | { value: 'one', label: 'One', key: 1 }, 30 | { value: 'two', label: 'Two', key: 2 }, 31 | { value: 'three', label: 'Three', key: 3 } 32 | ]; 33 | }); 34 | -------------------------------------------------------------------------------- /packages/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orion-ui/angular", 3 | "private": true, 4 | "version": "1.0.3", 5 | "description": "orion ui angular components", 6 | "main": "lib/index.js", 7 | "scripts": { 8 | "disable-lib": "babel src --out-dir lib --copy-file", 9 | "disable-build": "NODE_ENV=production npm run lib", 10 | "start": "NODE_ENV=development npm run lib -- --watch" 11 | }, 12 | "author": "Autodesk Inc.", 13 | "license": "Apache-2.0", 14 | "dependencies": { 15 | "@orion-ui/components": "^1.0.3", 16 | "@orion-ui/style": "^1.0.3" 17 | }, 18 | "peerDependencies": { 19 | "angular": "^1.5.9" 20 | }, 21 | "devDependencies": { 22 | "babel-cli": "^6.18.0", 23 | "angular": "^1.5.9" 24 | } 25 | } -------------------------------------------------------------------------------- /packages/angular/src/2016-12-01/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const ButtonComponent = require('./button'); 18 | const SelectComponent = require('./select'); 19 | const DatepickerComponent = require('./datepicker'); 20 | 21 | // eslint-disable-next-line no-undef 22 | const orion = angular 23 | .module('orion', []) 24 | .component('orionButton', ButtonComponent) 25 | .component('orionSelect', SelectComponent) 26 | .component('orionDatepicker', DatepickerComponent); 27 | 28 | module.exports = orion; 29 | -------------------------------------------------------------------------------- /packages/angular/src/2016-12-01/validators.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | const { Skins } = require('@orion-ui/style/lib/2016-12-01'); 19 | 20 | const colors = Object.keys(Skins.colors); 21 | const sizes = ['small', 'medium', 'large']; 22 | 23 | function ValidationException(message) { 24 | this.name = 'ValidationException'; 25 | this.message = message; 26 | this.toString = () => { 27 | return `[${this.name}] ${this.message}`; 28 | }; 29 | } 30 | 31 | function InclusionValidator(name, validValues) { 32 | this.valid = val => { 33 | if (validValues.includes(val)) { 34 | return true; 35 | } 36 | 37 | const errMsg = `Invalid ${name}: ${val}. Must be one of: ${validValues.join(', ')}.`; 38 | throw new ValidationException(errMsg); 39 | }; 40 | } 41 | 42 | function ColorValidator() { 43 | return new InclusionValidator('color', colors); 44 | } 45 | 46 | function SizeValidator() { 47 | return new InclusionValidator('size', sizes); 48 | } 49 | 50 | module.exports = { ColorValidator, SizeValidator }; 51 | -------------------------------------------------------------------------------- /packages/angular/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const lib20161201 = require('./2016-12-01'); 18 | 19 | module.exports = { 20 | '2016-12-01': lib20161201 21 | }; 22 | -------------------------------------------------------------------------------- /packages/components/README.md: -------------------------------------------------------------------------------- 1 | ### Debugging Web Component Tester 2 | 3 | 1. Run `npm run browserify` to create the latest bundle 4 | 2. Run `npm run debug-wct` to launch webserver 5 | 3. Visit `http://127.0.0.1:8081/test/button.test.html` in browser -------------------------------------------------------------------------------- /packages/components/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "orion-ui", 4 | "version": "1.0.0", 5 | "description": "orion ui components", 6 | "author": "Autodesk Inc.", 7 | "license": "Apache-2.0", 8 | "devDependencies": { 9 | "web-component-tester": "4.2.2", 10 | "webcomponentsjs": "^0.7.23", 11 | "moment": "2.x" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orion-ui/components", 3 | "private": true, 4 | "version": "1.0.3", 5 | "description": "orion ui components", 6 | "main": "lib/index.js", 7 | "author": "Autodesk Inc.", 8 | "license": "Apache-2.0", 9 | "jest": { 10 | "coverageDirectory": "coverage/jest", 11 | "testPathIgnorePatterns": [ 12 | "/node_modules/", 13 | "/lib/" 14 | ], 15 | "collectCoverageFrom": [ 16 | "src/**/*.js", 17 | "!src/**/*.test.js" 18 | ] 19 | }, 20 | "scripts": { 21 | "prepublish": "bower install", 22 | "disable-lib": "babel src --out-dir lib --copy-file", 23 | "disable-build": "NODE_ENV=production npm run lib", 24 | "start": "NODE_ENV=development npm run lib -- --watch", 25 | "jest-coverage": "jest --coverage", 26 | "jest": "jest --watch", 27 | "browserify": "node scripts/browserify.js", 28 | "debug-wct": "polyserve .", 29 | "wct": "wct", 30 | "wct-sauce": "wct --plugin sauce --skip-plugin local", 31 | "disable-test-ci": "node scripts/test-ci.js", 32 | "disable-test": "npm run jest-coverage && npm run browserify && npm run wct" 33 | }, 34 | "dependencies": { 35 | "@orion-ui/style": "^1.0.3" 36 | }, 37 | "peerDependencies": { 38 | "moment": "^2.17.1" 39 | }, 40 | "devDependencies": { 41 | "@skatejs/web-components": "^1.0.0", 42 | "babel-cli": "^6.18.0", 43 | "bower": "^1.8.0", 44 | "browserify": "^13.3.0", 45 | "codacy-coverage": "^2.0.0", 46 | "jest": "^19.0.2", 47 | "moment": "^2.17.1", 48 | "polyserve": "^0.16.0", 49 | "remap-istanbul": "^0.9.5", 50 | "web-component-tester": "4.2.2" 51 | } 52 | } -------------------------------------------------------------------------------- /packages/components/scripts/browserify.js: -------------------------------------------------------------------------------- 1 | /* eslint-env shelljs */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | require('shelljs/global'); 19 | 20 | const path = require('path'); 21 | 22 | cd(path.join(__dirname, '..')); 23 | 24 | mkdir('-p', 'build'); 25 | exec( 26 | 'NODE_ENV=development ./node_modules/.bin/browserify test/bundle.js -t [ babelify ] -o build/bundle.js --debug' 27 | ); 28 | -------------------------------------------------------------------------------- /packages/components/scripts/remap-wct-coverage.js: -------------------------------------------------------------------------------- 1 | /* eslint-env shelljs */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | require('shelljs/global'); 19 | 20 | const { Collector } = require('istanbul'); 21 | 22 | const path = require('path'); 23 | 24 | cd(path.join(__dirname, '..')); 25 | 26 | const loadCoverage = require('remap-istanbul/lib/loadCoverage'); 27 | const remap = require('remap-istanbul/lib/remap'); 28 | const writeReport = require('remap-istanbul/lib/writeReport'); 29 | 30 | const wctCoverage = path.join( 31 | __dirname, 32 | '..', 33 | 'coverage', 34 | 'wct', 35 | 'coverage-final.json' 36 | ); 37 | const coverage = loadCoverage(wctCoverage); 38 | 39 | const collector = remap(coverage); 40 | 41 | const newCollector = new Collector(); 42 | 43 | /** 44 | * Manually filter some stuff out! 45 | */ 46 | collector.files().forEach(f => { 47 | if (f.match(/^src\//)) { 48 | newCollector.add({ 49 | [path.resolve(f)]: Object.assign({}, collector.fileCoverageFor(f), { 50 | path: path.resolve(f) 51 | }) 52 | }); 53 | } 54 | }); 55 | 56 | writeReport(newCollector, 'json', {}, wctCoverage); 57 | writeReport( 58 | newCollector, 59 | 'html', 60 | {}, 61 | path.join(path.dirname(wctCoverage), 'lcov-report') 62 | ); 63 | -------------------------------------------------------------------------------- /packages/components/scripts/report-coverage.js: -------------------------------------------------------------------------------- 1 | /* eslint-env shelljs */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | require('shelljs/global'); 19 | 20 | const path = require('path'); 21 | 22 | cd(path.join(__dirname, '..')); 23 | 24 | ['jest', 'wct'].forEach(dir => { 25 | console.log(`Sending coverage for ${dir}`); 26 | cat(path.join(__dirname, '..', 'coverage', dir, 'lcov.info')).exec( 27 | './node_modules/.bin/codacy-coverage' 28 | ); 29 | }); 30 | -------------------------------------------------------------------------------- /packages/components/scripts/test-ci.js: -------------------------------------------------------------------------------- 1 | /* eslint-env shelljs */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | require('shelljs/global'); 19 | 20 | const path = require('path'); 21 | 22 | cd(path.join(__dirname, '..')); 23 | 24 | const codes = [ 25 | 'npm run browserify', 26 | 'npm run wct-sauce', 27 | 'node scripts/remap-wct-coverage.js', 28 | 'npm run jest-coverage', 29 | 'node scripts/report-coverage.js' 30 | ].map(command => { 31 | return exec(command).code; 32 | }); 33 | 34 | if (codes.filter(c => c === 0).length !== codes.length) { 35 | process.exit(1); 36 | } 37 | -------------------------------------------------------------------------------- /packages/components/src/2016-12-01/button-state.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const ButtonState = { 18 | getInitialState(state = {}) { 19 | return { 20 | disabled: false, 21 | hasFocus: false, 22 | hover: false, 23 | ...state 24 | }; 25 | }, 26 | 27 | enterHover(state) { 28 | return { ...state, hover: true }; 29 | }, 30 | leaveHover(state) { 31 | return { ...state, hover: false }; 32 | }, 33 | 34 | enterDisabled(state) { 35 | return { ...state, disabled: true }; 36 | }, 37 | leaveDisabled(state) { 38 | return { ...state, disabled: false }; 39 | }, 40 | 41 | focus(state) { 42 | return { ...state, hasFocus: true }; 43 | }, 44 | blur(state) { 45 | return { ...state, hasFocus: false }; 46 | } 47 | }; 48 | 49 | module.exports = ButtonState; 50 | -------------------------------------------------------------------------------- /packages/components/src/2016-12-01/container.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Registry = require('../utils/private-registry.js'); 18 | const Element = require('./element'); 19 | 20 | class Container extends Element {} 21 | 22 | Registry.define('orion-container', Container); 23 | 24 | module.exports = Container; 25 | -------------------------------------------------------------------------------- /packages/components/src/2016-12-01/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Button = require('./button'); 18 | const Datepicker = require('./datepicker'); 19 | const Inline = require('./inline'); 20 | const Select = require('./select'); 21 | 22 | module.exports = { Button, Datepicker, Inline, Select }; 23 | -------------------------------------------------------------------------------- /packages/components/src/2016-12-01/inline.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Registry = require('../utils/private-registry.js'); 18 | const Element = require('./element'); 19 | 20 | class Inline extends Element { 21 | constructor() { 22 | super(); 23 | this.display = 'inline-block'; 24 | } 25 | } 26 | 27 | Registry.define('orion-inline', Inline); 28 | 29 | module.exports = Inline; 30 | -------------------------------------------------------------------------------- /packages/components/src/2016-12-01/input-state.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const InputState = { 18 | getInitialState(state = {}) { 19 | return { 20 | clearable: false, 21 | value: undefined, 22 | placeholder: undefined, 23 | ...state 24 | }; 25 | }, 26 | 27 | clear(state) { 28 | return { 29 | ...state, 30 | value: undefined 31 | }; 32 | }, 33 | 34 | updateValue(state, value) { 35 | return { 36 | ...state, 37 | value 38 | }; 39 | } 40 | }; 41 | 42 | module.exports = InputState; 43 | -------------------------------------------------------------------------------- /packages/components/src/2016-12-01/list.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Element = require('./element'); 18 | const applyProps = require('../utils/apply-props'); 19 | const clearChildren = require('../utils/clear-children.js'); 20 | const Registry = require('../utils/private-registry.js'); 21 | 22 | function hashFromItems(items) { 23 | return items.reduce( 24 | (memo, item) => { 25 | return memo + item.key; 26 | }, 27 | '' 28 | ); 29 | } 30 | 31 | class List extends Element { 32 | constructor() { 33 | super(); 34 | 35 | this.display = 'block'; 36 | } 37 | 38 | set items(newOptions) { 39 | this.state.items = newOptions; 40 | this._queueRender(); 41 | } 42 | 43 | get items() { 44 | return this.state.items || []; 45 | } 46 | 47 | set itemTagname(newValue) { 48 | this.state.itemTagname = newValue; 49 | this._queueRender(); 50 | } 51 | 52 | get itemTagname() { 53 | return this.state.itemTagname; 54 | } 55 | 56 | render() { 57 | // TODO: raise warning if no key 58 | // TODO: raise warning if duplicate key 59 | 60 | if (this.lastItemsHash !== hashFromItems(this.items)) { 61 | clearChildren(this); 62 | } 63 | 64 | this.items.forEach(item => { 65 | let itemEl = this.querySelector(`[data-key="${item.key}"]`); 66 | if (itemEl === null) { 67 | itemEl = document.createElement(this.state.itemTagname); 68 | itemEl.setAttribute('data-key', item.key); 69 | this.appendChild(itemEl); 70 | } 71 | applyProps(itemEl, item); 72 | }); 73 | 74 | this.lastItemsHash = hashFromItems(this.items); 75 | super.render(); 76 | } 77 | } 78 | 79 | Registry.define('orion-list', List); 80 | 81 | module.exports = List; 82 | -------------------------------------------------------------------------------- /packages/components/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const lib20161201 = require('./2016-12-01'); 18 | 19 | module.exports = { 20 | '2016-12-01': lib20161201 21 | }; 22 | -------------------------------------------------------------------------------- /packages/components/src/utils/clear-children.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | module.exports = function clearChildren(node) { 18 | while (node.firstChild) { 19 | node.removeChild(node.firstChild); 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /packages/components/src/utils/event-key.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const valueSets = [ 18 | { key: 'Tab', values: [9, 'Tab'] }, 19 | { key: 'Enter', values: [13, 'Enter'] }, 20 | { key: 'Escape', values: [27, 'Escape'] }, 21 | { key: 'ArrowLeft', values: [37, 'ArrowLeft', 'Left'] }, 22 | { key: 'ArrowUp', values: [38, 'ArrowUp', 'Up'] }, 23 | { key: 'ArrowRight', values: [39, 'ArrowRight', 'Right'] }, 24 | { key: 'ArrowDown', values: [40, 'ArrowDown', 'Down'] }, 25 | { key: 'Backspace', values: [8, 'Backspace'] } 26 | ]; 27 | 28 | function match(valueSet, keyCode, key) { 29 | return valueSet.values.includes(keyCode) || valueSet.values.includes(key); 30 | } 31 | 32 | module.exports = function eventKey(event) { 33 | const matchingSet = valueSets.find(valueSet => { 34 | return match(valueSet, event.key, event.keyCode); 35 | }); 36 | 37 | if (matchingSet === undefined) { 38 | return null; 39 | } 40 | return matchingSet.key; 41 | }; 42 | -------------------------------------------------------------------------------- /packages/components/src/utils/event-key.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | /* eslint-disable no-unused-expressions */ 3 | /** 4 | Copyright 2016 Autodesk,Inc. 5 | 6 | Licensed under the Apache License, Version 2.0 (the "License"); 7 | you may not use this file except in compliance with the License. 8 | You may obtain a copy of the License at 9 | 10 | http://www.apache.org/licenses/LICENSE-2.0 11 | 12 | Unless required by applicable law or agreed to in writing, software 13 | distributed under the License is distributed on an "AS IS" BASIS, 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | See the License for the specific language governing permissions and 16 | limitations under the License. 17 | 18 | */ 19 | import { expect } from 'chai'; 20 | import eventKey from './event-key'; 21 | 22 | describe('Utils.eventKey', () => { 23 | let event; 24 | 25 | describe('with a keyCode', () => { 26 | beforeEach(() => { 27 | event = { keyCode: 37 }; 28 | }); 29 | 30 | it('returns the standards-compliant key', () => { 31 | expect(eventKey(event)).to.eq('ArrowLeft'); 32 | }); 33 | }); 34 | 35 | describe('with a standards-compliant key', () => { 36 | beforeEach(() => { 37 | event = { key: 'ArrowLeft' }; 38 | }); 39 | 40 | it('returns the standards-compliant key', () => { 41 | expect(eventKey(event)).to.eq('ArrowLeft'); 42 | }); 43 | }); 44 | 45 | describe('with a key from Edge', () => { 46 | beforeEach(() => { 47 | event = { key: 'Left' }; 48 | }); 49 | 50 | it('returns the standards-compliant key', () => { 51 | expect(eventKey(event)).to.eq('ArrowLeft'); 52 | }); 53 | }); 54 | 55 | describe('with an unsupported key', () => { 56 | beforeEach(() => { 57 | event = { keyCode: 100 }; 58 | }); 59 | 60 | it('returns null', () => { 61 | expect(eventKey(event)).to.be.null; // eslint-disable-line no-unused-expressions 62 | }); 63 | }); 64 | }); 65 | -------------------------------------------------------------------------------- /packages/components/src/utils/format-moment.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | module.exports = function formatMoment(date, format, locale) { 18 | if (!date) { 19 | return ''; 20 | } 21 | 22 | if (locale) { 23 | return date.locale(locale).format(format); 24 | } 25 | 26 | return date.format(format); 27 | }; 28 | -------------------------------------------------------------------------------- /packages/components/src/utils/format-moment.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | /* eslint-disable no-unused-expressions */ 3 | /** 4 | Copyright 2016 Autodesk,Inc. 5 | 6 | Licensed under the Apache License, Version 2.0 (the "License"); 7 | you may not use this file except in compliance with the License. 8 | You may obtain a copy of the License at 9 | 10 | http://www.apache.org/licenses/LICENSE-2.0 11 | 12 | Unless required by applicable law or agreed to in writing, software 13 | distributed under the License is distributed on an "AS IS" BASIS, 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | See the License for the specific language governing permissions and 16 | limitations under the License. 17 | 18 | */ 19 | import { expect } from 'chai'; 20 | 21 | const formatMoment = require('./format-moment'); 22 | const moment = require('moment'); 23 | 24 | describe('Utils.formatMoment', () => { 25 | const date = moment('2017-04-01'); 26 | const format = 'MMMM Do, YYYY'; 27 | const locale = 'zh-cn'; 28 | 29 | describe('without a date', () => { 30 | it('returns empty string', () => { 31 | expect(formatMoment()).to.eq(''); 32 | }); 33 | }); 34 | 35 | describe('with date alone', () => { 36 | it('uses the default format', () => { 37 | const formattedDateWithoutZone = formatMoment(date).split('T')[0]; 38 | expect(formattedDateWithoutZone).to.eq('2017-04-01'); 39 | }); 40 | }); 41 | 42 | describe('with date and format', () => { 43 | it('uses the format', () => { 44 | expect(formatMoment(date, format)).to.eq('April 1st, 2017'); 45 | }); 46 | }); 47 | 48 | describe('with date, format, and locale', () => { 49 | it('uses the locale', () => { 50 | expect(formatMoment(date, format, locale)).to.eq('四月 1日, 2017'); 51 | }); 52 | }); 53 | }); 54 | -------------------------------------------------------------------------------- /packages/components/src/utils/inject-style-tag.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | module.exports = function injectStyleTag(id, style) { 18 | let scriptTag = document.body.querySelector(`[data-orion-id=${id}]`); 19 | if (scriptTag) { 20 | return; 21 | } 22 | 23 | scriptTag = document.createElement('style'); 24 | scriptTag.textContent = style; 25 | scriptTag.setAttribute('data-orion-id', id); 26 | document.body.appendChild(scriptTag); 27 | }; 28 | -------------------------------------------------------------------------------- /packages/components/src/utils/inject-styles.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const { 18 | BorderRadius, 19 | BoxShadow, 20 | Container, 21 | Display, 22 | Hovers, 23 | Overflow, 24 | PointerEvents, 25 | Position, 26 | ResetFocusStyle, 27 | Skins, 28 | Spacing, 29 | Typography, 30 | UserSelect 31 | } = require('@orion-ui/style/lib/2016-12-01'); 32 | 33 | (function injectStyles() { 34 | if (!document) { 35 | console.error('"document" is unavailable. Unable to inject orion styles.'); 36 | return; 37 | } 38 | 39 | if (!document.currentScript) { 40 | console.error( 41 | '"document.currentScript" is unavailable. Unable to inject orion styles.' 42 | ); 43 | return; 44 | } 45 | 46 | const styles = [ 47 | BorderRadius, 48 | BoxShadow, 49 | Container, 50 | Display, 51 | Hovers, 52 | Overflow, 53 | PointerEvents, 54 | Position, 55 | ResetFocusStyle, 56 | Skins, 57 | Spacing, 58 | Typography, 59 | UserSelect 60 | ]; 61 | 62 | let textContent = ''; 63 | 64 | styles.forEach(style => { 65 | textContent += style.css; 66 | }); 67 | 68 | const element = document.createElement('style'); 69 | element.textContent = textContent; 70 | document.currentScript.parentNode.appendChild(element); 71 | })(); 72 | -------------------------------------------------------------------------------- /packages/components/src/utils/private-registry.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const registry = new Map(); 18 | 19 | module.exports = { 20 | /** 21 | * Registers a customElement 22 | * 23 | * Throws an error if the tagName is registered with a different constructorFn 24 | */ 25 | define: (tagName, constructorFn) => { 26 | if (registry.get(tagName)) { 27 | if (registry.get(tagName) !== constructorFn) { 28 | throw new Error( 29 | `${tagName} already registered to a different constructor function` 30 | ); 31 | } 32 | } else { 33 | if (!window.customElements) { 34 | return; 35 | } 36 | window.customElements.define(tagName, constructorFn); 37 | } 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /packages/components/src/utils/render-queue.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | let instance = null; 18 | 19 | class RenderQueue { 20 | constructor() { 21 | if (!instance) { 22 | instance = this; 23 | } 24 | 25 | this.queue = new Set(); 26 | this.flush = this.flush.bind(this); 27 | this.clearQueue = this.clearQueue.bind(this); 28 | 29 | return instance; 30 | } 31 | 32 | add(element) { 33 | this.queue.add(element); 34 | if (this._renderQueued) { 35 | return; 36 | } 37 | 38 | this._renderQueued = true; 39 | requestAnimationFrame(this.clearQueue); 40 | } 41 | 42 | flush() { 43 | const elements = new Set(this.queue); 44 | this.queue.clear(); 45 | this._renderQueued = false; 46 | 47 | elements.forEach(element => { 48 | element.render(); // eslint-disable-line no-underscore-dangle 49 | }); 50 | } 51 | 52 | clearQueue() { 53 | while (this.queue.size > 0) { 54 | this.flush(); 55 | } 56 | } 57 | } 58 | 59 | module.exports = RenderQueue; 60 | -------------------------------------------------------------------------------- /packages/components/src/utils/scroll-into-view.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | module.exports = function scrollIntoView(element) { 18 | const parent = element.parentElement; 19 | if (parent === null) { 20 | return; 21 | } 22 | 23 | const showChildAtTop = element.offsetTop; 24 | const isChildAboveScrollView = parent.scrollTop > element.offsetTop; 25 | if (isChildAboveScrollView) { 26 | parent.scrollTop = showChildAtTop; 27 | return; 28 | } 29 | 30 | const showChildAtBottom = element.offsetTop - 31 | parent.clientHeight + 32 | element.offsetHeight; 33 | const isChildBelowScrollView = parent.scrollTop < showChildAtBottom; 34 | if (isChildBelowScrollView) { 35 | parent.scrollTop = showChildAtBottom; 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /packages/components/test/bundle.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | // eslint-disable-next-line 19 | require('@skatejs/web-components'); 20 | require('../src/2016-12-01/index.js'); 21 | window.RenderQueue = require('../src/utils/render-queue'); 22 | -------------------------------------------------------------------------------- /packages/components/test/runner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 | 19 | 20 | Orion UI Web Components Tests 21 | 22 | 23 | 24 | 25 | 26 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /packages/components/wct.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "verbose": false, 3 | "suites": [ 4 | "test/runner.html" 5 | ], 6 | "plugins": { 7 | "local": { 8 | "browsers": [ 9 | "chrome" 10 | ] 11 | }, 12 | "istanbul": { 13 | "disabled": false, 14 | "dir": "coverage/wct", 15 | "reporters": [ 16 | "text-summary", 17 | "lcov", 18 | "json" 19 | ], 20 | "include": [ 21 | "**/*.js" 22 | ], 23 | "exclude": [ 24 | "**/bower_components/**" 25 | ] 26 | }, 27 | "sauce": { 28 | "disabled": true, 29 | "browsers": [ 30 | { 31 | "browserName": "chrome", 32 | "platform": "macOS 10.12", 33 | "version": "54.0", 34 | "name": "web-component tester" 35 | } 36 | ] 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /packages/design-dsl/.gitignore: -------------------------------------------------------------------------------- 1 | 2017-02-06 -------------------------------------------------------------------------------- /packages/design-dsl/examples/HelloWorld.oml: -------------------------------------------------------------------------------- 1 | 2 | name> 3 | 4 | 5 | 6 | 7 | // component visitor 8 | 9 | - take filename (from world) and create a class 10 | - static everything 11 | - implement render 12 | - go to first child 13 | - create new template for that element 14 | - put template.initialRender in closure 15 | - put template.mount in mount section 16 | - put template.update in update section 17 | - put template.teardown in teardown section 18 | - a variable prefix will be provided by the component template 19 | - it uses the element tagName plus a number which increments 20 | every time it encounters the same tag name 21 | -------------------------------------------------------------------------------- /packages/design-dsl/examples/HelloWorld.oml.js: -------------------------------------------------------------------------------- 1 | import IntlMessageFormat from 'intl-messageformat'; 2 | 3 | export default class HelloWorld { 4 | constructor(mount, props) { 5 | this._props = props; 6 | this._fragment = render(this._props, this); 7 | this._fragment.mount(mount); 8 | } 9 | 10 | get(key) { 11 | return key ? this._props[key] : this._props; 12 | } 13 | 14 | set(newProps) { 15 | const oldProps = this._props; 16 | this._props = Object.assign({}, oldProps, newProps); 17 | this._fragment.update(newProps, this._props); 18 | } 19 | 20 | teardown() { 21 | this._fragment.teardown(); 22 | this._fragment = null; 23 | this._props = {}; 24 | } 25 | } 26 | 27 | render(props, component) { 28 | const text1 = document.createElement('span'); 29 | 30 | // simple classList assignment 31 | text1.classList = 'size-3'; 32 | 33 | // create message 34 | const text1ContentMessage = new IntlMessageFormat("Hello, {name}", "en-US"); 35 | 36 | // create text2 node 37 | const text1Content = document.createTextNode(); 38 | 39 | // Update text2 40 | text1Content.data = text1ContentMessage.format(props) 41 | 42 | // mount text2 43 | text1.appendChild(text1Content); 44 | 45 | return { 46 | mount: target => { 47 | // mount text 48 | target.appendChild(text1); 49 | }, 50 | 51 | update: (changed, props) => { 52 | // Update text2 53 | text1Content.data = text1ContentMessage.format(props); 54 | }, 55 | 56 | teardown: () => { 57 | // unmount text 58 | text1.parentNode.removeChild(text1); 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /packages/design-dsl/modules/cli/orion-compile-test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import { cd, exec, cat, ls } from 'shelljs'; 18 | import { expect } from 'chai'; 19 | 20 | import version from '../version'; 21 | 22 | describe('compile HelloWorld.oml', () => { 23 | ls('examples/*.oml').forEach(file => { 24 | it(`compiles ${file} to ${file}.js`, () => { 25 | const { stdout } = exec(`node ${version} compile ${file}`); 26 | expect(stdout.toString()).to.equal( cat(`${file}.js`).toString()); 27 | }); 28 | }); 29 | }); -------------------------------------------------------------------------------- /packages/design-dsl/modules/cli/orion.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | 19 | import * as program from 'commander'; 20 | import * as fs from 'fs'; 21 | import * as path from 'path'; 22 | 23 | import { World, getTokens, initWorld } from '../parser/tokenizer'; 24 | 25 | export default function cli(argv: string[]): void { 26 | program 27 | .command('compile ') 28 | .description('compiles an OML file to JavaScript') 29 | .action((file: string) => { 30 | const source = path.join(process.cwd(), file); 31 | const stream = fs.createReadStream(source); 32 | 33 | let start = initWorld(); 34 | 35 | stream.on('data', (chunk: Buffer) => { 36 | start = getTokens(chunk.toString(), start); 37 | }); 38 | 39 | stream.on('end', () => { 40 | console.log('done'); 41 | }); 42 | 43 | stream.on('error', (err: Error) => { 44 | console.error(err); 45 | }) 46 | }); 47 | 48 | program.parse(process.argv); 49 | } -------------------------------------------------------------------------------- /packages/design-dsl/modules/experiments/demo-components/toolbar.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import {Primitive} from '../primitives'; 18 | 19 | export const toolbarTemplate: Primitive = { 20 | type: 'container', 21 | props: { 22 | display: 'flex', 23 | layout: 'row', 24 | paddingAll: 'small', 25 | background: 'black' 26 | }, 27 | 28 | children: [ 29 | { 30 | type: 'map', 31 | collection: 'items', 32 | refs: { 33 | image: 'children[0]', 34 | label: 'children[1]' 35 | }, 36 | mappings: [ 37 | { source: 'width', destination: 'image.props.width' }, 38 | { source: 'height', destination: 'image.props.height' }, 39 | { source: 'icon', destination: 'image.src' }, 40 | { source: 'label', destination: 'label.textContent' } 41 | ], 42 | template: { 43 | type: 'container', 44 | props: { 45 | display: 'flex', 46 | layout: 'row', 47 | paddingAll: 'medium', 48 | background: 'grey' 49 | }, 50 | 51 | children: [ 52 | { type: 'image' }, 53 | { type: 'text' } 54 | ] 55 | } 56 | } 57 | ] 58 | } -------------------------------------------------------------------------------- /packages/design-dsl/modules/experiments/hello-panel.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | /** 18 | * Abstraction demo 19 | */ 20 | 21 | import { flattenPrimitive } from './utils/gen-functional-component'; 22 | import { primitiveToHtml } from './utils/gen-html'; 23 | import { Primitive } from './primitives'; 24 | import { toolbarTemplate } from './demo-components/toolbar'; 25 | 26 | const panel: Primitive = { 27 | type: 'container', 28 | props: { 29 | display: 'flex', 30 | layout: 'column' 31 | }, 32 | 33 | children: [ 34 | { 35 | type: 'text', 36 | textContent: 'Hello Toolbar' 37 | }, 38 | { 39 | type: 'component', 40 | component: { 41 | type: 'toolbar', 42 | props: { 43 | items: [ 44 | { label: 'Item 1', icon: 'item1.png', width: 20, height: 20 }, 45 | { label: 'Item 2', icon: 'item2.png', width: 20, height: 20 }, 46 | { label: 'Item 3', icon: 'item3.png', width: 20, height: 20 } 47 | ] 48 | } 49 | } 50 | } 51 | ] 52 | } 53 | 54 | console.log(); 55 | console.log('A template which uses a component type'); 56 | console.log(); 57 | 58 | console.log(JSON.stringify(panel, null, 4)); 59 | 60 | console.log(); 61 | console.log('When flattened with toolbarTemplate') 62 | console.log(); 63 | 64 | console.log(JSON.stringify(toolbarTemplate, null, 4)); 65 | 66 | console.log(); 67 | console.log('Makes the following primitive') 68 | console.log(); 69 | 70 | const flat = flattenPrimitive(panel, {}, {toolbar: toolbarTemplate}); 71 | 72 | console.log(JSON.stringify(flat, null, 4)); 73 | 74 | console.log(); 75 | console.log(); 76 | console.log(JSON.stringify(primitiveToHtml(flat), null, 4)); -------------------------------------------------------------------------------- /packages/design-dsl/modules/experiments/hello-primitives.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import {OContainer, OText} from './primitives'; 18 | import {primitiveToHtml} from './utils/gen-html'; 19 | 20 | const hello: OContainer = { 21 | type: 'container', 22 | props: { 23 | display: 'inline', 24 | paddingAll: 'small' 25 | }, 26 | 27 | children: [{ 28 | type: 'text', 29 | props: { 30 | color: 'white', 31 | fontSize: 'f1', 32 | lineHeight: 'title' 33 | }, 34 | textContent: 'Hello World' 35 | }] 36 | } 37 | 38 | console.log(JSON.stringify(hello, null, 4)); 39 | 40 | console.log(); 41 | console.log('Converted to HTML'); 42 | console.log(); 43 | 44 | console.log(JSON.stringify(primitiveToHtml(hello), null, 4)); 45 | -------------------------------------------------------------------------------- /packages/design-dsl/modules/experiments/hello-toolbar.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import { Primitive } from './primitives'; 18 | import { primitiveToComponent } from './utils/gen-functional-component'; 19 | import { primitiveToHtml } from './utils/gen-html'; 20 | import { toolbarTemplate } from './demo-components/toolbar'; 21 | 22 | interface ToolbarProps { 23 | items: ToolbarItem[]; 24 | } 25 | 26 | interface ToolbarItem { 27 | label: string; 28 | icon: string; 29 | width: number; 30 | height: number 31 | } 32 | 33 | console.log(); 34 | console.log('A template which uses a map type'); 35 | console.log(); 36 | 37 | console.log(JSON.stringify(toolbarTemplate, null, 4)); 38 | 39 | // output 40 | const toolbar = primitiveToComponent(toolbarTemplate); 41 | 42 | console.log(); 43 | console.log('Builds a function which when applied with this data'); 44 | console.log(); 45 | 46 | const props = { 47 | items: [ 48 | { label: 'Item 1', icon: 'item1.png', width: 20, height: 20 }, 49 | { label: 'Item 2', icon: 'item2.png', width: 20, height: 20 }, 50 | { label: 'Item 3', icon: 'item3.png', width: 20, height: 20 } 51 | ] 52 | }; 53 | 54 | console.log(JSON.stringify(props, null, 4)); 55 | 56 | console.log(); 57 | console.log('Produces the following primitives'); 58 | console.log(); 59 | 60 | console.log(JSON.stringify(toolbar(props), null, 4)); 61 | 62 | console.log(); 63 | console.log('Converted to HTML'); 64 | console.log(); 65 | 66 | console.log(JSON.stringify(primitiveToHtml(toolbar(props)), null, 4)); -------------------------------------------------------------------------------- /packages/design-dsl/modules/generator/visitors/text.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | interface TextOptions { 18 | prefix: string; 19 | props: Props; 20 | } 21 | 22 | interface Props { 23 | size: number; 24 | content: string; 25 | } 26 | 27 | class TextVisitor { 28 | private prefix: string; 29 | private props: Props; 30 | 31 | constructor({ props, prefix }: TextOptions) { 32 | this.prefix = prefix; 33 | this.props = props; 34 | } 35 | 36 | getInitial(): string { 37 | return ` 38 | const ${this.prefix} = document.createElement('span'); 39 | text1.classList = '${this._getClassList()}' 40 | ${this._getContentSetup()} 41 | ` 42 | } 43 | 44 | getDependencies(): string { 45 | // TODO: figure out how to de-dupe these imports 46 | return ` 47 | import IntlMessageFormat from 'intl-messageformat'; 48 | ` 49 | } 50 | 51 | _getContentSetup(): string { 52 | if (!this.props.content) { 53 | return ''; 54 | } else { 55 | return ` 56 | // create message 57 | const ${this.prefix}ContentMessage = new IntlMessageFormat() 58 | 59 | // create text node 60 | 61 | // update text node 62 | ` 63 | } 64 | } 65 | _getClassList(): string { 66 | return ''; 67 | } 68 | } -------------------------------------------------------------------------------- /packages/design-dsl/modules/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import cli from './cli/orion'; 18 | 19 | cli(process.argv); 20 | -------------------------------------------------------------------------------- /packages/design-dsl/modules/version.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | export default '2017-02-06'; -------------------------------------------------------------------------------- /packages/design-dsl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orion-ui/design-dsl", 3 | "version": "1.0.0", 4 | "description": "Exploring a JSON based design language", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "compile": "tsc", 9 | "hello-primitives": "node lib/hello-primitives.js", 10 | "hello-toolbar": "node lib/hello-toolbar.js", 11 | "hello-panel": "node lib/hello-panel.js", 12 | "test": "echo 'No tests configured'" 13 | }, 14 | "author": "Autodesk Inc.", 15 | "license": "Apache-2.0", 16 | "devDependencies": { 17 | "@types/chai": "^3.4.34", 18 | "@types/commander": "^2.3.31", 19 | "@types/intl-messageformat": "^1.3.0", 20 | "@types/mocha": "^2.2.39", 21 | "@types/node": "^6.0.52", 22 | "@types/shelljs": "^0.6.0", 23 | "intl": "^1.2.5", 24 | "mocha": "^3.2.0", 25 | "typescript": "^2.1.4" 26 | }, 27 | "dependencies": { 28 | "clone-deep": "^0.2.4", 29 | "intl-messageformat": "^1.3.0" 30 | } 31 | } -------------------------------------------------------------------------------- /packages/design-dsl/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.3", 3 | "compilerOptions": { 4 | "allowSyntheticDefaultImports": true, 5 | "declaration": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "jsx": "preserve", 8 | "module": "commonjs", 9 | "moduleResolution": "node", 10 | "noEmit": false, 11 | "noEmitOnError": true, 12 | "strictNullChecks": true, 13 | "noImplicitAny": true, 14 | "noImplicitThis": true, 15 | "sourceMap": true, 16 | "target": "es6", 17 | "outDir": "2017-02-06" 18 | }, 19 | "include": [ 20 | "typings_custom/custom.d.ts", 21 | "modules/**/*.ts" 22 | ], 23 | 24 | "types": [ 25 | "mocha", 26 | "shelljs", 27 | "node" 28 | ] 29 | } -------------------------------------------------------------------------------- /packages/design-dsl/typings_custom/custom.d.ts: -------------------------------------------------------------------------------- 1 | declare module "clone-deep"; -------------------------------------------------------------------------------- /packages/marketing-playground/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | coverage 8 | 9 | # production 10 | build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log 16 | -------------------------------------------------------------------------------- /packages/marketing-playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "marketing-playground", 3 | "version": "1.0.3", 4 | "private": true, 5 | "homepage": ".", 6 | "devDependencies": { 7 | "react-scripts": "0.9.5" 8 | }, 9 | "dependencies": { 10 | "@orion-ui/react-components": "^1.0.3", 11 | "@skatejs/web-components": "^1.0.0", 12 | "@webcomponents/custom-elements": "^1.0.0-rc.3", 13 | "react": "^15.4.2", 14 | "react-dom": "^15.4.2", 15 | "react-syntax-highlighter": "^5.1.3", 16 | "tachyons": "^4.6.1" 17 | }, 18 | "scripts": { 19 | "start": "BROWSER=none PORT=3003 react-scripts start", 20 | "disable-build": "react-scripts build" 21 | } 22 | } -------------------------------------------------------------------------------- /packages/marketing-playground/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 17 | 18 | 19 | 20 | 21 | Orion 22 | 23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /packages/marketing-playground/src/App.css: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | ul, ol { 18 | list-style: none; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | .fx-row { 24 | display: flex; 25 | flex-direction: row; 26 | } 27 | 28 | @media (min-width: 60em) { 29 | .fx-row-l { 30 | display: flex; 31 | flex-direction: row; 32 | } 33 | } 34 | 35 | .fx-g1 { 36 | flex-grow: 1; 37 | } 38 | 39 | .fx-g2 { 40 | flex-grow: 2; 41 | } 42 | 43 | .fx-w { 44 | flex-wrap: wrap; 45 | } 46 | 47 | .fai-c { 48 | align-items: center 49 | } 50 | -------------------------------------------------------------------------------- /packages/marketing-playground/src/components/anchor.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import React, { Component, PropTypes } from 'react'; 18 | import { Button } from '@orion-ui/react-components/lib/2016-12-01'; 19 | 20 | export default class Anchor extends Component { 21 | constructor(props) { 22 | super(props); 23 | 24 | this.handleClick = this.handleClick.bind(this); 25 | } 26 | 27 | handleClick(event) { 28 | event.preventDefault(); 29 | window.location.href = this.props.href; 30 | } 31 | 32 | render() { 33 | return ( 34 | 37 | ); 38 | } 39 | } 40 | 41 | Anchor.propTypes = { 42 | /** 43 | * The url to redirect to when clicked 44 | */ 45 | href: PropTypes.string.isRequired 46 | }; 47 | -------------------------------------------------------------------------------- /packages/marketing-playground/src/components/features-benefits.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | import React from 'react'; 19 | 20 | module.exports = function FeaturesBenefits() { 21 | const features = [ 22 | { 23 | title: 'HTML Components', 24 | body: 'Components are based on Web Component APIs at the core. This means they are compatible with any modern browser and framework.', 25 | }, 26 | { 27 | title: 'React & Angular', 28 | body: 'Adapters are available out of the box. This means developers will not know they are using Web Components under the hood.', 29 | }, 30 | { 31 | title: 'Rigorously Tested', 32 | body: 'All components have unit, integration, and visual regression tests baked in. All upgrades can be done without API breaks and knowing exactly how the components have changed.', 33 | }, 34 | { 35 | title: 'Atoms', 36 | body: `Instead of allowing arbitrary values our components take Atoms. 37 | This ensures visual consistency across all components.`, 38 | }, 39 | { 40 | title: 'Flexible', 41 | body: 'If the underlying atomic values change, the designs will still look great!' 42 | } 43 | ]; 44 | 45 | const featureNodes = features.map((feature) => { 46 | return ( 47 |
  • 48 |

    {feature.title}

    49 |

    {feature.body}

    50 |
  • 51 | ); 52 | }) 53 | 54 | return ( 55 | 58 | ) 59 | } 60 | -------------------------------------------------------------------------------- /packages/marketing-playground/src/components/nav.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | import React from 'react'; 19 | 20 | import constants from '../constants'; 21 | 22 | module.exports = function Nav() { 23 | const links = [ 24 | { label: 'See All Components', url: constants.storybookPath }, 25 | { label: 'GitHub', url: 'https://github.com/orion-ui/orion' }, 26 | ]; 27 | 28 | const linkNodes = links.map((link) => { 29 | return ( 30 |
  • 31 | {link.label} 32 |
  • 33 | ) 34 | }) 35 | 36 | return ( 37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /packages/marketing-playground/src/constants.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | export const values = { 18 | storybookPath: './react/index.html' 19 | } 20 | 21 | export default values; -------------------------------------------------------------------------------- /packages/marketing-playground/src/index.css: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | font-family: sans-serif; 22 | } 23 | -------------------------------------------------------------------------------- /packages/marketing-playground/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | import React from 'react'; 19 | import ReactDOM from 'react-dom'; 20 | import App from './App'; 21 | import './index.css'; 22 | 23 | ReactDOM.render( 24 | , 25 | document.getElementById('root') 26 | ); 27 | -------------------------------------------------------------------------------- /packages/react-components/.gemini.yml: -------------------------------------------------------------------------------- 1 | rootUrl: http://localhost:9001/ 2 | gridUrl: http://ondemand.saucelabs.com/wd/hub 3 | windowSize: 1024x768 4 | sessionsPerBrowser: 3 5 | system: 6 | plugins: 7 | sauce: 8 | username: 9 | accessKey: 10 | browsers: 11 | chrome: 12 | desiredCapabilities: 13 | browserName: 'chrome' 14 | version: '54.0' 15 | platform: 'macOs 10.12' 16 | name: 'gemini visual regression tests' 17 | firefox: 18 | desiredCapabilities: 19 | browserName: 'firefox' 20 | version: '46.0' 21 | platform: 'macOs 10.12' 22 | name: 'gemini visual regression tests' 23 | edge: 24 | desiredCapabilities: 25 | browserName: 'MicrosoftEdge' 26 | version: '14.14393' 27 | platform: 'Windows 10' 28 | name: 'gemini visual regression tests' 29 | -------------------------------------------------------------------------------- /packages/react-components/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | // To get our default addons (actions and links) 2 | import '@kadira/storybook/addons'; 3 | // To add the knobs addon 4 | import '@kadira/storybook-addon-knobs/register'; 5 | import './addons/source-addon/register'; 6 | -------------------------------------------------------------------------------- /packages/react-components/.storybook/addons/example-addon/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import React, { PropTypes } from 'react'; 18 | 19 | const containerStyle = { 20 | display: 'flex', 21 | justifyContent: 'center', 22 | alignItems: 'center', 23 | height: '100%', 24 | }; 25 | 26 | export class WithExampleInner extends React.Component { 27 | componentDidMount() { 28 | document.documentElement.style.height = '100%'; 29 | document.querySelector('#root').style.height = '100%'; 30 | 31 | const bodyStyle = { 32 | height: '100%', 33 | // Taken from https://github.com/airbnb/react-dates/blob/master/public/storybook.css 34 | backgroundColor: 'rgba(0, 0, 0, 0.05)', 35 | backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, 0.2) 1px, transparent 8px), repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0, 0, 0, 0.2) 1px, transparent 8px)', 36 | backgroundSize: '8px 8px', 37 | }; 38 | 39 | Object.assign(document.body.style, bodyStyle); 40 | } 41 | 42 | render() { 43 | const { children } = this.props; 44 | return ( 45 |
    46 | {children} 47 |
    48 | ); 49 | } 50 | } 51 | 52 | WithExampleInner.propTypes = { 53 | children: PropTypes.children, 54 | }; 55 | 56 | export const WithExample = story => {story()}; 57 | export default WithExample; 58 | 59 | -------------------------------------------------------------------------------- /packages/react-components/.storybook/addons/source-addon/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import React, { PropTypes } from 'react'; 18 | import addons from '@kadira/storybook-addons'; 19 | 20 | export class WithSource extends React.Component { 21 | render() { 22 | const { children, react, angular } = this.props; 23 | const channel = addons.getChannel(); 24 | 25 | channel.emit('kadira/source/add_react', react); 26 | channel.emit('kadira/source/add_angular', angular); 27 | 28 | // return children; 29 | return children; 30 | } 31 | } 32 | 33 | WithSource.propTypes = { 34 | children: PropTypes.element.isRequired, 35 | react: PropTypes.string.isRequired, 36 | angular: PropTypes.string.isRequired, 37 | }; 38 | 39 | export default WithSource; 40 | -------------------------------------------------------------------------------- /packages/react-components/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import '@skatejs/web-components'; 2 | 3 | import { configure, addDecorator } from '@kadira/storybook'; 4 | import { withKnobs } from '@kadira/storybook-addon-knobs'; 5 | 6 | import WithExample from './addons/example-addon'; 7 | 8 | function loadStories() { 9 | require('../stories/button.js'); 10 | require('../stories/select'); 11 | require('../stories/datepicker'); 12 | // You can require as many stories as you need. 13 | } 14 | 15 | addDecorator(WithExample); 16 | addDecorator(withKnobs) 17 | 18 | configure(loadStories, module); 19 | -------------------------------------------------------------------------------- /packages/react-components/gemini/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "gemini": true 4 | } 5 | } -------------------------------------------------------------------------------- /packages/react-components/gemini/button-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | function capture(name, url) { 19 | gemini.suite(`button-${name}`, suite => { 20 | suite.setUrl(url).setCaptureElements('.example').capture(name); 21 | }); 22 | } 23 | 24 | gemini.suite('button', () => { 25 | capture( 26 | 'default', 27 | '/iframe.html?selectedKind=Button&selectedStory=with%20text' 28 | ); 29 | capture( 30 | 'disabled', 31 | '/iframe.html?selectedKind=Button&selectedStory=disabled' 32 | ); 33 | capture('hover', 'iframe.html?selectedKind=Button&selectedStory=hover'); 34 | capture('small', '/iframe.html?selectedKind=Button&selectedStory=small'); 35 | capture('large', '/iframe.html?selectedKind=Button&selectedStory=large'); 36 | capture('focus', 'iframe.html?selectedKind=Button&selectedStory=focus'); 37 | }); 38 | -------------------------------------------------------------------------------- /packages/react-components/gemini/datepicker-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | function capture(name, url) { 19 | gemini.suite(`datepicker-${name}`, suite => { 20 | suite.setUrl(url).setCaptureElements('.example').capture(name); 21 | }); 22 | } 23 | 24 | gemini.suite('datepicker', () => { 25 | capture( 26 | 'unfocused-no-date', 27 | '/iframe.html?selectedKind=Datepicker&selectedStory=unfocused%20w%2Fo%20date' 28 | ); 29 | capture( 30 | 'unfocused-with-date', 31 | '/iframe.html?selectedKind=Datepicker&selectedStory=unfocused%20w%20date' 32 | ); 33 | capture('focus', '/iframe.html?selectedKind=Datepicker&selectedStory=focus'); 34 | capture( 35 | 'focus-month-day', 36 | '/iframe.html?selectedKind=Datepicker&selectedStory=focus%20month%20%26%20day' 37 | ); 38 | capture( 39 | 'custom-disabled-dates', 40 | '/iframe.html?selectedKind=Datepicker&selectedStory=custom%20disabled%20dates' 41 | ); 42 | capture( 43 | 'custom-date-formatting', 44 | '/iframe.html?selectedKind=Datepicker&selectedStory=custom%20date%20formatting' 45 | ); 46 | capture( 47 | 'custom-placeholder-text', 48 | '/iframe.html?selectedKind=Datepicker&selectedStory=custom%20placeholder%20text' 49 | ); 50 | capture( 51 | 'clearable', 52 | '/iframe.html?selectedKind=Datepicker&selectedStory=clearable' 53 | ); 54 | }); 55 | -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-default/default/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-default/default/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-default/default/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-default/default/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-default/default/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-default/default/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-disabled/disabled/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-disabled/disabled/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-disabled/disabled/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-disabled/disabled/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-disabled/disabled/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-disabled/disabled/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-focus/focus/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-focus/focus/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-focus/focus/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-focus/focus/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-focus/focus/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-focus/focus/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-hover/hover/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-hover/hover/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-hover/hover/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-hover/hover/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-hover/hover/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-hover/hover/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-large/large/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-large/large/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-large/large/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-large/large/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-large/large/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-large/large/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-small/small/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-small/small/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-small/small/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-small/small/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/button/button-small/small/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/button/button-small/small/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-clearable/clearable/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-clearable/clearable/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-clearable/clearable/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-clearable/clearable/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-clearable/clearable/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-clearable/clearable/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-custom-date-formatting/custom-date-formatting/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-custom-date-formatting/custom-date-formatting/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-custom-date-formatting/custom-date-formatting/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-custom-date-formatting/custom-date-formatting/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-custom-date-formatting/custom-date-formatting/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-custom-date-formatting/custom-date-formatting/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-custom-disabled-dates/custom-disabled-dates/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-custom-disabled-dates/custom-disabled-dates/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-custom-disabled-dates/custom-disabled-dates/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-custom-disabled-dates/custom-disabled-dates/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-custom-disabled-dates/custom-disabled-dates/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-custom-disabled-dates/custom-disabled-dates/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-custom-placeholder-text/custom-placeholder-text/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-custom-placeholder-text/custom-placeholder-text/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-custom-placeholder-text/custom-placeholder-text/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-custom-placeholder-text/custom-placeholder-text/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-custom-placeholder-text/custom-placeholder-text/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-custom-placeholder-text/custom-placeholder-text/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-focus-month-day/focus-month-day/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-focus-month-day/focus-month-day/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-focus-month-day/focus-month-day/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-focus-month-day/focus-month-day/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-focus-month-day/focus-month-day/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-focus-month-day/focus-month-day/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-focus/focus/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-focus/focus/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-focus/focus/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-focus/focus/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-focus/focus/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-focus/focus/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-unfocused-no-date/unfocused-no-date/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-unfocused-no-date/unfocused-no-date/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-unfocused-no-date/unfocused-no-date/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-unfocused-no-date/unfocused-no-date/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-unfocused-no-date/unfocused-no-date/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-unfocused-no-date/unfocused-no-date/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-unfocused-with-date/unfocused-with-date/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-unfocused-with-date/unfocused-with-date/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-unfocused-with-date/unfocused-with-date/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-unfocused-with-date/unfocused-with-date/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/datepicker/datepicker-unfocused-with-date/unfocused-with-date/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/datepicker/datepicker-unfocused-with-date/unfocused-with-date/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-clearable/clearable/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-clearable/clearable/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-clearable/clearable/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-clearable/clearable/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-clearable/clearable/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-clearable/clearable/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-collapsed/collapsed/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-collapsed/collapsed/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-collapsed/collapsed/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-collapsed/collapsed/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-collapsed/collapsed/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-collapsed/collapsed/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-disabled-option/disabled-option/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-disabled-option/disabled-option/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-disabled-option/disabled-option/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-disabled-option/disabled-option/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-disabled-option/disabled-option/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-disabled-option/disabled-option/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-disabled/disabled/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-disabled/disabled/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-disabled/disabled/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-disabled/disabled/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-disabled/disabled/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-disabled/disabled/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-expanded/expanded/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-expanded/expanded/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-expanded/expanded/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-expanded/expanded/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-expanded/expanded/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-expanded/expanded/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-focus/focus/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-focus/focus/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-focus/focus/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-focus/focus/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-focus/focus/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-focus/focus/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-no-search-results/no-search-results/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-no-search-results/no-search-results/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-no-search-results/no-search-results/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-no-search-results/no-search-results/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-no-search-results/no-search-results/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-no-search-results/no-search-results/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-option-focus/option-focus/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-option-focus/option-focus/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-option-focus/option-focus/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-option-focus/option-focus/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-option-focus/option-focus/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-option-focus/option-focus/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-scrolling/scrolling/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-scrolling/scrolling/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-scrolling/scrolling/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-scrolling/scrolling/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-scrolling/scrolling/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-scrolling/scrolling/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-selected-index/selected-index/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-selected-index/selected-index/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-selected-index/selected-index/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-selected-index/selected-index/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-selected-index/selected-index/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-selected-index/selected-index/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-some-search-results/some-search-results/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-some-search-results/some-search-results/chrome.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-some-search-results/some-search-results/edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-some-search-results/some-search-results/edge.png -------------------------------------------------------------------------------- /packages/react-components/gemini/screens/select/select-some-search-results/some-search-results/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-components/gemini/screens/select/select-some-search-results/some-search-results/firefox.png -------------------------------------------------------------------------------- /packages/react-components/gemini/select-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | function capture(name, url) { 19 | gemini.suite(`select-${name}`, suite => { 20 | suite.setUrl(url).setCaptureElements('.example').capture(name); 21 | }); 22 | } 23 | 24 | gemini.suite('select', () => { 25 | capture( 26 | 'collapsed', 27 | 'iframe.html?selectedKind=Select&selectedStory=collapsed' 28 | ); 29 | capture('expanded', 'iframe.html?selectedKind=Select&selectedStory=expanded'); 30 | capture( 31 | 'option-focus', 32 | 'iframe.html?selectedKind=Select&selectedStory=option%20focus' 33 | ); 34 | capture( 35 | 'selected-index', 36 | 'iframe.html?selectedKind=Select&selectedStory=selectedIndex' 37 | ); 38 | capture('focus', 'iframe.html?selectedKind=Select&selectedStory=focus'); 39 | capture( 40 | 'scrolling', 41 | 'iframe.html?selectedKind=Select&selectedStory=scrolling' 42 | ); 43 | capture('disabled', 'iframe.html?selectedKind=Select&selectedStory=disabled'); 44 | capture( 45 | 'disabled-option', 46 | 'iframe.html?selectedKind=Select&selectedStory=disabled%20option' 47 | ); 48 | capture( 49 | 'no-search-results', 50 | 'iframe.html?selectedKind=Select&selectedStory=no%20search%20results' 51 | ); 52 | capture( 53 | 'some-search-results', 54 | 'iframe.html?selectedKind=Select&selectedStory=some%20search%20results' 55 | ); 56 | capture( 57 | 'clearable', 58 | 'iframe.html?selectedKind=Select&selectedStory=clearable' 59 | ); 60 | }); 61 | -------------------------------------------------------------------------------- /packages/react-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orion-ui/react-components", 3 | "version": "1.0.3", 4 | "description": "orion ui react components", 5 | "main": "lib/index.js", 6 | "private": true, 7 | "jest": { 8 | "coverageDirectory": "coverage/jest", 9 | "testPathIgnorePatterns": [ 10 | "/node_modules/", 11 | "/lib/" 12 | ], 13 | "collectCoverageFrom": [ 14 | "src/**/*.js", 15 | "!src/**/*.test.js" 16 | ] 17 | }, 18 | "scripts": { 19 | "disable-lib": "babel src --out-dir lib --copy-file", 20 | "gemini-report": "gemini test gemini/* --reporter html --reporter flat", 21 | "gemini-update": "gemini update gemini/*", 22 | "gemini": "gemini test gemini/*", 23 | "jest-coverage": "jest --coverage", 24 | "jest": "jest --watch", 25 | "disable-build": "NODE_ENV=production npm run lib && npm run build-storybook", 26 | "report-coverage": "cat coverage/jest/lcov.info | codacy-coverage", 27 | "start-storybook": "start-storybook -p 9001 -c .storybook", 28 | "start": "NODE_ENV=development npm run lib -- --watch", 29 | "build-storybook": "build-storybook -c .storybook -o build", 30 | "disable-test": "jest --coverage", 31 | "disable-ci": "jest --coverage && npm run report-coverage && npm run gemini" 32 | }, 33 | "author": "Autodesk Inc.", 34 | "license": "Apache-2.0", 35 | "dependencies": { 36 | "@orion-ui/components": "^1.0.3", 37 | "@orion-ui/style": "^1.0.3" 38 | }, 39 | "peerDependencies": { 40 | "react": "^15.4.1", 41 | "react-dom": "^15.4.1" 42 | }, 43 | "devDependencies": { 44 | "@kadira/storybook": "^2.34.0", 45 | "@skatejs/web-components": "^1.0.0", 46 | "babel-cli": "^6.18.0", 47 | "codacy-coverage": "^2.0.0", 48 | "gemini": "^4.18.1", 49 | "gemini-sauce": "^1.0.1", 50 | "jest": "^19.0.2", 51 | "react": "^15.4.1", 52 | "react-dom": "^15.4.1", 53 | "react-syntax-highlighter": "^5.1.3" 54 | } 55 | } -------------------------------------------------------------------------------- /packages/react-components/src/2016-12-01/button.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const React = require('react'); 18 | const { mount } = require('enzyme'); 19 | const chai = require('chai'); 20 | const chaiEnzyme = require('chai-enzyme'); 21 | 22 | const expect = chai.expect; 23 | 24 | const OrionButton = require('./button'); 25 | 26 | chai.use(chaiEnzyme()); 27 | 28 | describe('', () => { 29 | it('passes props to button web component', () => { 30 | const props = { 31 | background: 'white', 32 | color: 'black' 33 | }; 34 | const wrapper = mount(); 35 | 36 | const element = wrapper.find('orion-button').getDOMNode(); 37 | 38 | expect(element.background).to.equal(props.background); 39 | expect(element.color).to.equal(props.color); 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /packages/react-components/src/2016-12-01/datepicker.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | require('@orion-ui/components/lib/2016-12-01/datepicker'); 18 | 19 | const React = require('react'); 20 | const applyProps = require('@orion-ui/components/lib/utils/apply-props'); 21 | 22 | class Datepicker extends React.Component { 23 | constructor(props) { 24 | super(props); 25 | this.updateState = this.updateState.bind(this); 26 | } 27 | 28 | componentDidMount() { 29 | applyProps(this._el, this.props); 30 | this._el.addEventListener('change', this.updateState); 31 | } 32 | 33 | componentWillReceiveProps(props) { 34 | applyProps(this._el, props); 35 | } 36 | 37 | updateState(event) { 38 | this.componentWillReceiveProps( 39 | Object.assign({}, event.detail.state, this.props) 40 | ); 41 | } 42 | 43 | render() { 44 | return ( 45 | { 47 | this._el = el; 48 | }} 49 | /> 50 | ); 51 | } 52 | } 53 | 54 | module.exports = Datepicker; 55 | -------------------------------------------------------------------------------- /packages/react-components/src/2016-12-01/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Button = require('./button'); 18 | const Datepicker = require('./datepicker'); 19 | const Select = require('./select'); 20 | 21 | module.exports = { Button, Datepicker, Select }; 22 | -------------------------------------------------------------------------------- /packages/react-components/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const lib20161201 = require('./2016-12-01'); 18 | 19 | module.exports = { 20 | '2016-12-01': lib20161201 21 | }; 22 | -------------------------------------------------------------------------------- /packages/react-components/stories/button.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | import { storiesOf } from '@kadira/storybook'; 19 | 20 | import withText from './button/with-text'; 21 | import disabled from './button/disabled'; 22 | import hover from './button/hover'; 23 | import small from './button/small'; 24 | import large from './button/large'; 25 | import focus from './button/focus'; 26 | 27 | storiesOf('Button', module) 28 | .add('with text', withText) 29 | .add('disabled', disabled) 30 | .add('hover', hover) 31 | .add('small', small) 32 | .add('large', large) 33 | .add('focus', focus); 34 | -------------------------------------------------------------------------------- /packages/react-components/stories/button/disabled.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import { boolean, text } from '@kadira/storybook-addon-knobs'; 20 | 21 | import Button from '../../src/2016-12-01/button'; 22 | import { WithSource } from '../../.storybook/addons/source-addon'; 23 | 24 | export default function disabled() { 25 | const buttonText = text('Text', 'Hello, button!'); 26 | const props = { 27 | disabled: boolean('Disabled', true) 28 | }; 29 | 30 | const react = ` 31 | import React from 'react'; 32 | import { Button } from '../../../react/lib/2016-12-01'; 33 | 34 | class App extends React.Component { 35 | render() { 36 | return ( 37 | 40 | ) 41 | } 42 | ReactDOM.render(React.createElement(App), document.body);`; 43 | 44 | const angular = ` 45 | // ------------------------------ 46 | // controller.js 47 | 48 | import 'angular'; 49 | import '@orion-ui/angular/lib/2016-12-01'; 50 | 51 | angular.module('app', ['orion']) // include orion module 52 | .controller('AppController', function () { 53 | var app = this; 54 | 55 | app.label = '${buttonText}'; 56 | app.disabled = ${props.disabled}; 57 | }); 58 | 59 | // ------------------------------ 60 | // index.html 61 | 62 | 63 | 64 | 65 |
    66 | 67 | {{ app.label }} 68 | 69 |
    70 | 71 | `; 72 | 73 | return ( 74 | 75 | 78 | 79 | ); 80 | } 81 | -------------------------------------------------------------------------------- /packages/react-components/stories/button/focus.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import { boolean, text } from '@kadira/storybook-addon-knobs'; 20 | 21 | import Button from '../../src/2016-12-01/button'; 22 | import { WithSource } from '../../.storybook/addons/source-addon'; 23 | 24 | export default function focus() { 25 | const buttonText = text('Text', 'Hello, button!'); 26 | const props = { 27 | hasFocus: boolean('Has focus', true) 28 | }; 29 | 30 | const react = ` 31 | import React from 'react'; 32 | import { Button } from '../../../react/lib/2016-12-01'; 33 | 34 | class App extends React.Component { 35 | render() { 36 | return ( 37 | 40 | ) 41 | } 42 | ReactDOM.render(React.createElement(App), document.body);`; 43 | 44 | const angular = ` 45 | // ------------------------------ 46 | // controller.js 47 | 48 | import 'angular'; 49 | import '@orion-ui/angular/lib/2016-12-01'; 50 | 51 | angular.module('app', ['orion']) // include orion module 52 | .controller('AppController', function () { 53 | var app = this; 54 | 55 | app.label = '${buttonText}'; 56 | app.hasFocus = ${props.hasFocus}; 57 | }); 58 | 59 | // ------------------------------ 60 | // index.html 61 | 62 | 63 | 64 | 65 |
    66 | 67 | {{ app.label }} 68 | 69 |
    70 | 71 | `; 72 | 73 | return ( 74 | 75 | 78 | 79 | ); 80 | } 81 | -------------------------------------------------------------------------------- /packages/react-components/stories/button/hover.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import { boolean, text } from '@kadira/storybook-addon-knobs'; 20 | 21 | import Button from '../../src/2016-12-01/button'; 22 | import { WithSource } from '../../.storybook/addons/source-addon'; 23 | 24 | export default function hover() { 25 | const buttonText = text('Text', 'Hello, button!'); 26 | const props = { 27 | hover: boolean('Hover', true) 28 | }; 29 | 30 | const react = ` 31 | import React from 'react'; 32 | import { Button } from '../../../react/lib/2016-12-01'; 33 | 34 | class App extends React.Component { 35 | render() { 36 | return ( 37 | 40 | ) 41 | } 42 | ReactDOM.render(React.createElement(App), document.body);`; 43 | 44 | const angular = ` 45 | // ------------------------------ 46 | // controller.js 47 | 48 | import 'angular'; 49 | import '@orion-ui/angular/lib/2016-12-01'; 50 | 51 | angular.module('app', ['orion']) // include orion module 52 | .controller('AppController', function () { 53 | var app = this; 54 | 55 | app.label = '${buttonText}'; 56 | app.hover = ${props.hover}; 57 | }); 58 | 59 | // ------------------------------ 60 | // index.html 61 | 62 | 63 | 64 | 65 |
    66 | 67 | {{ app.label }} 68 | 69 |
    70 | 71 | `; 72 | 73 | return ( 74 | 75 | 78 | 79 | ); 80 | } 81 | -------------------------------------------------------------------------------- /packages/react-components/stories/button/large.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import { select, text } from '@kadira/storybook-addon-knobs'; 20 | 21 | import Button from '../../src/2016-12-01/button'; 22 | import { WithSource } from '../../.storybook/addons/source-addon'; 23 | import { sizeOptions } from '../shared'; 24 | 25 | export default function large() { 26 | const buttonText = text('Text', 'Hello, button!'); 27 | const props = { 28 | size: select('Size', sizeOptions, 'large') 29 | }; 30 | 31 | const react = ` 32 | import React from 'react'; 33 | import { Button } from '../../../react/lib/2016-12-01'; 34 | 35 | class App extends React.Component { 36 | render() { 37 | return ( 38 | 41 | ) 42 | } 43 | ReactDOM.render(React.createElement(App), document.body);`; 44 | 45 | const angular = ` 46 | // ------------------------------ 47 | // controller.js 48 | 49 | import 'angular'; 50 | import '@orion-ui/angular/lib/2016-12-01'; 51 | 52 | angular.module('app', ['orion']) // include orion module 53 | .controller('AppController', function () { 54 | var app = this; 55 | 56 | app.label = '${buttonText}'; 57 | app.size = '${props.size}'; 58 | }); 59 | 60 | // ------------------------------ 61 | // index.html 62 | 63 | 64 | 65 | 66 |
    67 | 68 | {{ app.label }} 69 | 70 |
    71 | 72 | `; 73 | 74 | return ( 75 | 76 | 79 | 80 | ); 81 | } 82 | -------------------------------------------------------------------------------- /packages/react-components/stories/button/small.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import { select, text } from '@kadira/storybook-addon-knobs'; 20 | 21 | import Button from '../../src/2016-12-01/button'; 22 | import { WithSource } from '../../.storybook/addons/source-addon'; 23 | import { sizeOptions } from '../shared'; 24 | 25 | export default function small() { 26 | const buttonText = text('Text', 'Hello, button!'); 27 | const props = { 28 | size: select('Size', sizeOptions, 'small') 29 | }; 30 | 31 | const react = ` 32 | import React from 'react'; 33 | import { Button } from '../../../react/lib/2016-12-01'; 34 | 35 | class App extends React.Component { 36 | render() { 37 | return ( 38 | 41 | ) 42 | } 43 | ReactDOM.render(React.createElement(App), document.body);`; 44 | 45 | const angular = ` 46 | // ------------------------------ 47 | // controller.js 48 | 49 | import 'angular'; 50 | import '@orion-ui/angular/lib/2016-12-01'; 51 | 52 | angular.module('app', ['orion']) // include orion module 53 | .controller('AppController', function () { 54 | var app = this; 55 | 56 | app.label = '${buttonText}'; 57 | app.size = '${props.size}'; 58 | }); 59 | 60 | // ------------------------------ 61 | // index.html 62 | 63 | 64 | 65 | 66 |
    67 | 68 | {{ app.label }} 69 | 70 |
    71 | 72 | `; 73 | 74 | return ( 75 | 76 | 79 | 80 | ); 81 | } 82 | -------------------------------------------------------------------------------- /packages/react-components/stories/datepicker.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import { storiesOf } from '@kadira/storybook'; 18 | 19 | import unfocusedWoDate from './datepicker/unfocused-wo-date'; 20 | import unfocusedWithDate from './datepicker/unfocused-with-date'; 21 | import clearable from './datepicker/clearable'; 22 | import customPlaceholderText from './datepicker/custom-placeholder-text'; 23 | import focus from './datepicker/focus'; 24 | import focusMonthAndDay from './datepicker/focus-month-and-day'; 25 | import customDateFormatting from './datepicker/custom-date-formatting'; 26 | import i18n from './datepicker/i18n'; 27 | import customDisabledDates from './datepicker/custom-disabled-dates'; 28 | import disabled from './datepicker/disabled'; 29 | import interactive from './datepicker/interactive'; 30 | 31 | storiesOf('Datepicker', module) 32 | .add('unfocused w/o date', unfocusedWoDate) 33 | .add('unfocused w date', unfocusedWithDate) 34 | .add('clearable', clearable) 35 | .add('custom placeholder text', customPlaceholderText) 36 | .add('focus', focus) 37 | .add('focus month & day', focusMonthAndDay) 38 | .add('custom date formatting', customDateFormatting) 39 | .add('i18n', i18n) 40 | .add('custom disabled dates', customDisabledDates) 41 | .add('disabled', disabled) 42 | .add('interactive', interactive); 43 | -------------------------------------------------------------------------------- /packages/react-components/stories/datepicker/clearable.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import moment from 'moment'; 20 | import { boolean } from '@kadira/storybook-addon-knobs'; 21 | 22 | import Datepicker from '../../src/2016-12-01/datepicker'; 23 | import { WithSource } from '../../.storybook/addons/source-addon'; 24 | 25 | export default function clearable() { 26 | const props = { 27 | clearable: boolean('Clearable', true), 28 | date: moment('2017-01-01') 29 | }; 30 | 31 | const react = ` 32 | import React from 'react'; 33 | import moment from 'moment'; 34 | import {Datepicker} from '@orion-ui/react-components/lib/2016-12-01'; 35 | 36 | class App extends React.Component { 37 | render() { 38 | const date = moment(); 39 | return ; 40 | } 41 | } 42 | 43 | ReactDOM.render(React.createElement(App), document.body);`; 44 | 45 | const angular = ` 46 | // app controller 47 | 48 | import 'angular'; 49 | import moment from 'moment'; 50 | import '@orion-ui/angular/lib/2016-12-01'; 51 | 52 | angular.module('app', ['orion']) 53 | .controller('AppController', function() { 54 | var app = this; 55 | app.date = moment(); 56 | app.clearable = ${props.clearable}; 57 | }); 58 | 59 | // app.html 60 | 61 | 62 | 63 | 64 | ; 36 | } 37 | } 38 | 39 | ReactDOM.render(React.createElement(App), document.body);`; 40 | 41 | const angular = ` 42 | // app controller 43 | 44 | import 'angular'; 45 | import moment from 'moment'; 46 | import '@orion-ui/angular/lib/2016-12-01'; 47 | 48 | angular.module('app', ['orion']) 49 | .controller('AppController', function() { 50 | var app = this; 51 | app.placeholder = "${props.placeholder}"; 52 | }); 53 | 54 | // app.html 55 | 56 | 57 | 58 | 59 | 60 | 61 | `; 62 | 63 | return ( 64 | 65 | 66 | 67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /packages/react-components/stories/datepicker/disabled.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import { boolean } from '@kadira/storybook-addon-knobs'; 20 | 21 | // import { Datepicker } from '../../src/2016-12-01/datepicker'; 22 | import { WithSource } from '../../.storybook/addons/source-addon'; 23 | 24 | export default function disabled() { 25 | const props = { 26 | disabled: boolean('Disabled', true) 27 | }; 28 | 29 | const react = ` 30 | import React from 'react'; 31 | import moment from 'moment'; 32 | import {Datepicker} from '@orion-ui/react-components/lib/2016-12-01'; 33 | 34 | class App extends React.Component { 35 | render() { 36 | const date = moment(); 37 | return ; 38 | } 39 | } 40 | 41 | ReactDOM.render(React.createElement(App), document.body);`; 42 | 43 | const angular = ` 44 | // app controller 45 | 46 | import 'angular'; 47 | import moment from 'moment'; 48 | import '@orion-ui/angular/lib/2016-12-01'; 49 | 50 | angular.module('app', ['orion']) 51 | .controller('AppController', function() { 52 | var app = this; 53 | app.date = moment(); 54 | app.disabled = ${props.disabled}; 55 | }); 56 | 57 | // app.html 58 | 59 | 60 | 61 | 62 | 63 | 64 | `; 65 | 66 | return ( 67 | 68 | todo 69 | 70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /packages/react-components/stories/datepicker/focus.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import moment from 'moment'; 20 | import { boolean } from '@kadira/storybook-addon-knobs'; 21 | 22 | import Datepicker from '../../src/2016-12-01/datepicker'; 23 | import { WithSource } from '../../.storybook/addons/source-addon'; 24 | 25 | export default function focus() { 26 | const props = { 27 | focus: boolean('Focus', true), 28 | currentDate: moment('2015-01-14'), 29 | focusDate: moment('2015-01-14') 30 | }; 31 | 32 | const react = ` 33 | import React from 'react'; 34 | import moment from 'moment'; 35 | import {Datepicker} from '@orion-ui/react-components/lib/2016-12-01'; 36 | 37 | class App extends React.Component { 38 | render() { 39 | const date = moment(); 40 | return ; 41 | } 42 | } 43 | 44 | ReactDOM.render(React.createElement(App), document.body);`; 45 | 46 | const angular = ` 47 | // app controller 48 | 49 | import 'angular'; 50 | import * as moment from 'moment'; 51 | import '@orion-ui/angular/lib/2016-12-01'; 52 | 53 | angular.module('app', ['orion']) 54 | .controller('AppController', function() { 55 | var app = this; 56 | app.focus = ${props.focus}; 57 | }); 58 | 59 | // app.html 60 | 61 | 62 | 63 | 64 | 65 | 66 | `; 67 | 68 | return ( 69 | 70 | 71 | 72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /packages/react-components/stories/datepicker/unfocused-with-date.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import moment from 'moment'; 20 | 21 | import Datepicker from '../../src/2016-12-01/datepicker'; 22 | import { WithSource } from '../../.storybook/addons/source-addon'; 23 | 24 | export default function unfocusedWithDate() { 25 | const props = { 26 | currentDate: moment('2015-01-14'), 27 | date: moment('2015-01-14') 28 | }; 29 | 30 | const react = ` 31 | import React from 'react'; 32 | import moment from 'moment'; 33 | import {Datepicker} from '@orion-ui/react-components/lib/2016-12-01'; 34 | 35 | class App extends React.Component { 36 | render() { 37 | const date = moment(); 38 | return ; 39 | } 40 | } 41 | 42 | ReactDOM.render(React.createElement(App), document.body);`; 43 | 44 | const angular = ` 45 | // app controller 46 | 47 | import 'angular'; 48 | import moment from 'moment'; 49 | import '@orion-ui/angular/lib/2016-12-01'; 50 | 51 | angular.module('app', ['orion']) 52 | .controller('AppController', function() { 53 | var app = this; 54 | app.date = moment(); 55 | app.focus = false; 56 | }); 57 | 58 | // app.html 59 | 60 | 61 | 62 | 63 | 64 | 65 | `; 66 | 67 | return ( 68 | 69 | 70 | 71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /packages/react-components/stories/datepicker/unfocused-wo-date.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | 20 | import Datepicker from '../../src/2016-12-01/datepicker'; 21 | import { WithSource } from '../../.storybook/addons/source-addon'; 22 | 23 | export default function unfocusedWoDate() { 24 | const react = ` 25 | import React from 'react'; 26 | import {Datepicker} from '@orion-ui/react-components/lib/2016-12-01'; 27 | 28 | class App extends React.Component { 29 | render() { 30 | return ; 31 | } 32 | } 33 | 34 | ReactDOM.render(React.createElement(App), document.body);`; 35 | 36 | const angular = ` 37 | // app controller 38 | 39 | import 'angular'; 40 | import '@orion-ui/angular/lib/2016-12-01'; 41 | 42 | angular.module('app', ['orion']) 43 | .controller('AppController', function() { 44 | var app = this; 45 | app.date = null; 46 | app.focus = false; 47 | }); 48 | 49 | // app.html 50 | 51 | 52 | 53 | 54 | 55 | 56 | `; 57 | 58 | return ( 59 | 60 | 61 | 62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /packages/react-components/stories/select.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import { storiesOf } from '@kadira/storybook'; 18 | 19 | import collapsed from './select/collapsed'; 20 | import expanded from './select/expanded'; 21 | import disabledOption from './select/disabled-option'; 22 | import disabled from './select/disabled'; 23 | import optionFocus from './select/option-focus'; 24 | import focus from './select/focus'; 25 | import selectedIndex from './select/selected-index'; 26 | import noSearchResults from './select/no-search-results'; 27 | import someSearchResults from './select/some-search-results'; 28 | import clearable from './select/clearable'; 29 | import interactive from './select/interactive'; 30 | import kitchenSink from './select/kitchen-sink'; 31 | import scrolling from './select/scrolling'; 32 | 33 | storiesOf('Select', module) 34 | .add('collapsed', collapsed) 35 | .add('expanded', expanded) 36 | .add('disabled option', disabledOption) 37 | .add('disabled', disabled) 38 | .add('option focus', optionFocus) 39 | .add('focus', focus) 40 | .add('selectedIndex', selectedIndex) 41 | .add('no search results', noSearchResults) 42 | .add('some search results', someSearchResults) 43 | .add('clearable', clearable) 44 | .add('interactive', interactive) 45 | .add('kitchen sink', kitchenSink) 46 | .add('scrolling', scrolling); 47 | -------------------------------------------------------------------------------- /packages/react-components/stories/select/disabled.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import { boolean } from '@kadira/storybook-addon-knobs'; 20 | 21 | import Select from '../../src/2016-12-01/select'; 22 | import { WithSource } from '../../.storybook/addons/source-addon'; 23 | 24 | export default function disabled() { 25 | const props = { 26 | disabled: boolean('Disabled', true), 27 | options: [ 28 | { value: 'one', label: 'One', key: 1 }, 29 | { value: 'two', label: 'Two', key: 2 } 30 | ] 31 | }; 32 | 33 | const react = ` 34 | import React from 'react'; 35 | import ReactDOM from 'react-dom'; 36 | import {Select} from '@orion-ui/react-components/lib/2016-12-01'; 37 | 38 | class App extends React.Component { 39 | render() { 40 | const options = ${JSON.stringify(props.options, null, 2)}; 41 | 42 | return ( 43 | 74 | 75 | ); 76 | } 77 | -------------------------------------------------------------------------------- /packages/react-components/stories/select/expanded.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import { boolean } from '@kadira/storybook-addon-knobs'; 20 | 21 | import Select from '../../src/2016-12-01/select'; 22 | import { WithSource } from '../../.storybook/addons/source-addon'; 23 | 24 | export default function expanded() { 25 | const props = { 26 | open: boolean('Open', true), 27 | options: [ 28 | { value: 'one', label: 'One', key: 1 }, 29 | { value: 'two', label: 'Two', key: 2 } 30 | ] 31 | }; 32 | 33 | const react = ` 34 | import React from 'react'; 35 | import ReactDOM from 'react-dom'; 36 | import {Select} from '@orion-ui/react-components/lib/2016-12-01'; 37 | 38 | class App extends React.Component { 39 | render() { 40 | const options = ${JSON.stringify(props.options, null, 2)}; 41 | 42 | return 72 | 73 | ); 74 | } 75 | -------------------------------------------------------------------------------- /packages/react-components/stories/select/focus.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | import React from 'react'; 19 | import { boolean } from '@kadira/storybook-addon-knobs'; 20 | 21 | import Select from '../../src/2016-12-01/select'; 22 | import { WithSource } from '../../.storybook/addons/source-addon'; 23 | 24 | export default function focus() { 25 | const props = { 26 | hasFocus: boolean('Has focus', true), 27 | options: [ 28 | { value: 'one', label: 'One', key: 1 }, 29 | { value: 'two', label: 'Two', key: 2 } 30 | ] 31 | }; 32 | 33 | const react = ` 34 | import React from 'react'; 35 | import ReactDOM from 'react-dom'; 36 | import {Select} from '@orion-ui/react-components/lib/2016-12-01'; 37 | 38 | class App extends React.Component { 39 | render() { 40 | const options = ${JSON.stringify(props.options, null, 2)}; 41 | 42 | return ( 43 | 74 | 75 | ); 76 | } 77 | -------------------------------------------------------------------------------- /packages/react-components/stories/shared.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | module.exports = { 18 | colorOptions: { 19 | '': '', 20 | black: 'Black', 21 | white: 'White', 22 | blue: 'Blue' 23 | }, 24 | filterEmptyProps: props => { 25 | const newProps = {}; 26 | 27 | Object.entries(props).forEach(([key, value]) => { 28 | if (props[key] !== '') { 29 | newProps[key] = value; 30 | } else { 31 | newProps[key] = undefined; 32 | } 33 | }); 34 | 35 | return newProps; 36 | }, 37 | sizeOptions: { 38 | large: 'Large', 39 | '': 'Regular', 40 | small: 'Small' 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /packages/react-hig/README.md: -------------------------------------------------------------------------------- 1 | # react-hig 2 | 3 | React components for the HIG. 4 | 5 | 6 | This package has moved to the (HIG repo)[https://github.com/Autodesk/hig/tree/master/src/implementations/react]. -------------------------------------------------------------------------------- /packages/react-playground/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | coverage 8 | 9 | # production 10 | build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log 16 | -------------------------------------------------------------------------------- /packages/react-playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-playground", 3 | "version": "1.0.3", 4 | "private": true, 5 | "author": "Autodesk Inc.", 6 | "homepage": ".", 7 | "license": "Apache-2.0", 8 | "devDependencies": { 9 | "react-scripts": "0.9.5" 10 | }, 11 | "dependencies": { 12 | "@orion-ui/react-components": "^1.0.3", 13 | "@skatejs/web-components": "^1.0.0", 14 | "moment": "^2.17.1", 15 | "react": "^15.4.1", 16 | "react-dom": "^15.4.1" 17 | }, 18 | "scripts": { 19 | "disable-start": "BROWSER=none PORT=3004 react-scripts start", 20 | "disable-build": "react-scripts build" 21 | } 22 | } -------------------------------------------------------------------------------- /packages/react-playground/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Autodesk/orion-ui/6eda2fafba31104ac10a923f81bbb305b890d02e/packages/react-playground/public/favicon.ico -------------------------------------------------------------------------------- /packages/react-playground/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
    20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /packages/react-playground/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-playground/src/App.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import React from 'react'; 18 | import ReactDOM from 'react-dom'; 19 | import App from './App'; 20 | 21 | it('renders without crashing', () => { 22 | const div = document.createElement('div'); 23 | ReactDOM.render(, div); 24 | }); 25 | -------------------------------------------------------------------------------- /packages/react-playground/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /packages/react-playground/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | import React from 'react'; 18 | import ReactDOM from 'react-dom'; 19 | import App from './App'; 20 | import './index.css'; 21 | 22 | ReactDOM.render( 23 | , 24 | document.getElementById('root') 25 | ); 26 | -------------------------------------------------------------------------------- /packages/style/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@orion-ui/style", 3 | "version": "1.0.3", 4 | "description": "orion ui styles", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "disable-lib": "babel src --out-dir lib --copy-file", 8 | "disable-build": "NODE_ENV=production npm run lib", 9 | "start": "NODE_ENV=development npm run lib -- --watch" 10 | }, 11 | "author": "Autodesk Inc.", 12 | "license": "Apache-2.0", 13 | "devDependencies": { 14 | "babel-cli": "^6.18.0" 15 | } 16 | } -------------------------------------------------------------------------------- /packages/style/src/2016-12-01/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Scale = require('../scale.js'); 18 | const BorderRadius = require('../border-radius.js'); 19 | const BoxShadow = require('../box-shadow.js'); 20 | const Container = require('../container.js'); 21 | const Display = require('../display.js'); 22 | const Hovers = require('../hovers.js'); 23 | const Overflow = require('../overflow.js'); 24 | const PointerEvents = require('../pointer-events.js'); 25 | const Position = require('../position.js'); 26 | const ResetFocusStyle = require('../reset-focus-style.js'); 27 | const Skins = require('../skins.js'); 28 | const Spacing = require('../spacing.js'); 29 | const Typography = require('../typography.js'); 30 | const UserSelect = require('../user-select.js'); 31 | 32 | module.exports = { 33 | Scale, 34 | BorderRadius, 35 | BoxShadow, 36 | Container, 37 | Display, 38 | Hovers, 39 | Overflow, 40 | PointerEvents, 41 | Position, 42 | ResetFocusStyle, 43 | Skins, 44 | Spacing, 45 | Typography, 46 | UserSelect 47 | }; 48 | -------------------------------------------------------------------------------- /packages/style/src/border-radius.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const css = ` 18 | .br0 { border-radius: 0;} 19 | .br2 { border-radius: 0.25rem;} 20 | .br-pill { border-radius: 9999px; } 21 | `; 22 | 23 | const attributes = ['border-radius']; 24 | 25 | const scale = { 26 | 0: 'br0', 27 | 2: 'br2', 28 | pill: 'br-pill' 29 | }; 30 | 31 | function attributeChangedCallback(attrName, value) { 32 | return scale[value]; 33 | } 34 | 35 | module.exports = { 36 | css, 37 | attributes, 38 | attributeChangedCallback 39 | }; 40 | -------------------------------------------------------------------------------- /packages/style/src/box-shadow.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const css = ` 18 | .bsh-1 { 19 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 20 | } 21 | `; 22 | 23 | const attributes = ['box-shadow']; 24 | 25 | function attributeChangedCallback(attrName, value) { 26 | if (parseInt(value, 10) === 1) { 27 | return 'bsh-1'; 28 | } 29 | return ''; 30 | } 31 | 32 | module.exports = { 33 | css, 34 | attributes, 35 | attributeChangedCallback 36 | }; 37 | -------------------------------------------------------------------------------- /packages/style/src/box-shadow.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const BoxShadow = require('./box-shadow'); 18 | const chai = require('chai'); 19 | 20 | const expect = chai.expect; 21 | 22 | describe('Box Shadow', () => { 23 | describe('attributeChangedCallback', () => { 24 | context('with 1', () => { 25 | it('returns class bsh-1', () => { 26 | expect(BoxShadow.attributeChangedCallback('box-shadow', 1)).to.eq( 27 | 'bsh-1' 28 | ); 29 | }); 30 | }); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /packages/style/src/container.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const css = ` 18 | .con-col { 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | .con-row { 24 | display: flex; 25 | flex-direction: row; 26 | } 27 | `; 28 | 29 | const attrMap = { 30 | container: { 31 | column: 'con-col', 32 | row: 'con-row' 33 | } 34 | }; 35 | 36 | const attributes = Object.keys(attrMap); 37 | 38 | function attributeChangedCallback(attrName, value) { 39 | const styleClass = attrMap[attrName][value]; 40 | if (typeof styleClass === 'undefined') { 41 | throw new Error(`Unknown style for ${attrName}="${value}"`); 42 | } 43 | 44 | return styleClass; 45 | } 46 | 47 | module.exports = { 48 | css, 49 | attributes, 50 | attributeChangedCallback 51 | }; 52 | -------------------------------------------------------------------------------- /packages/style/src/container.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Container = require('./container'); 18 | const chai = require('chai'); 19 | 20 | const expect = chai.expect; 21 | 22 | describe('Container', () => { 23 | describe('attributeChangedCallback', () => { 24 | context('with a valid value', () => { 25 | [ 26 | { value: 'column', result: 'con-col' }, 27 | { value: 'row', result: 'con-row' } 28 | ].forEach(({ value, result }) => { 29 | context(`with ${value}`, () => { 30 | it(`returns class ${result}`, () => { 31 | expect( 32 | Container.attributeChangedCallback('container', value) 33 | ).to.eq(result); 34 | }); 35 | }); 36 | }); 37 | }); 38 | 39 | context('with an invalid value', () => { 40 | it('raises an error', () => { 41 | expect(() => { 42 | Container.attributeChangedCallback('container', 'foobar'); 43 | }).to.throw(Error); 44 | }); 45 | }); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /packages/style/src/display.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const css = ` 18 | .dis-blk { 19 | display: block; 20 | } 21 | 22 | .dis-flx { 23 | display: flex; 24 | justify-content: space-between; 25 | } 26 | 27 | .dis-inl { 28 | display: inline; 29 | } 30 | 31 | .dis-inb { 32 | display: inline-block; 33 | } 34 | 35 | .dis-none { 36 | display: none; 37 | } 38 | `; 39 | 40 | const attrMap = { 41 | display: { 42 | none: 'dis-none', 43 | block: 'dis-blk', 44 | flex: 'dis-flx', 45 | inline: 'dis-inl', 46 | 'inline-block': 'dis-inb' 47 | } 48 | }; 49 | 50 | const attributes = Object.keys(attrMap); 51 | 52 | function attributeChangedCallback(attrName, value) { 53 | const styleClass = attrMap[attrName][value]; 54 | if (typeof styleClass === 'undefined') { 55 | throw new Error(`Unknown style for ${attrName}="${value}"`); 56 | } 57 | 58 | return styleClass; 59 | } 60 | 61 | module.exports = { 62 | css, 63 | attributes, 64 | attributeChangedCallback 65 | }; 66 | -------------------------------------------------------------------------------- /packages/style/src/display.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Display = require('./display'); 18 | const chai = require('chai'); 19 | 20 | const expect = chai.expect; 21 | 22 | describe('Display', () => { 23 | describe('attributeChangedCallback', () => { 24 | context('with a valid value', () => { 25 | [ 26 | { value: 'block', result: 'dis-blk' }, 27 | { value: 'flex', result: 'dis-flx' }, 28 | { value: 'inline', result: 'dis-inl' }, 29 | { value: 'inline-block', result: 'dis-inb' } 30 | ].forEach(({ value, result }) => { 31 | context(`with ${value}`, () => { 32 | it(`returns class ${result}`, () => { 33 | expect(Display.attributeChangedCallback('display', value)).to.eq( 34 | result 35 | ); 36 | }); 37 | }); 38 | }); 39 | }); 40 | 41 | context('with an invalid value', () => { 42 | it('raises an error', () => { 43 | expect(() => { 44 | Display.attributeChangedCallback('display', 'foobar'); 45 | }).to.throw(Error); 46 | }); 47 | }); 48 | }); 49 | }); 50 | -------------------------------------------------------------------------------- /packages/style/src/hovers.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const css = ` 18 | .dim { 19 | opacity: 1; 20 | transition: opacity .15s ease-in; 21 | } 22 | .dim:hover, 23 | .dim:focus { 24 | opacity: .5; 25 | transition: opacity .15s ease-in; 26 | } 27 | .dim:active { 28 | opacity: .8; transition: opacity .15s ease-out; 29 | } 30 | 31 | .pointer:hover { 32 | cursor: pointer; 33 | } 34 | 35 | .notallowed:hover { 36 | cursor: not-allowed; 37 | } 38 | `; 39 | 40 | const attributes = ['dim', 'pointer', 'notallowed']; 41 | 42 | function attributeChangedCallback(attrName, value) { 43 | return value ? attrName : undefined; 44 | } 45 | 46 | module.exports = { 47 | css, 48 | attributes, 49 | attributeChangedCallback 50 | }; 51 | -------------------------------------------------------------------------------- /packages/style/src/hovers.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Hovers = require('./hovers'); 18 | const chai = require('chai'); 19 | 20 | const expect = chai.expect; 21 | 22 | describe('Hovers', () => { 23 | describe('attributeChangedCallback', () => { 24 | context('with a valid value', () => { 25 | [ 26 | { attrName: 'dim', value: true, result: 'dim' }, 27 | { attrName: 'dim', value: false, result: undefined }, 28 | { attrName: 'pointer', value: true, result: 'pointer' }, 29 | { attrName: 'pointer', value: false, result: undefined } 30 | ].forEach(({ attrName, value, result }) => { 31 | context(`with ${value}`, () => { 32 | it(`returns class ${result}`, () => { 33 | expect(Hovers.attributeChangedCallback(attrName, value)).to.eq( 34 | result 35 | ); 36 | }); 37 | }); 38 | }); 39 | }); 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /packages/style/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const lib20161201 = require('./2016-12-01'); 18 | 19 | module.exports = { 20 | '2016-12-01': lib20161201 21 | }; 22 | -------------------------------------------------------------------------------- /packages/style/src/overflow.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const css = ` 18 | .ovy-h { 19 | overflow-y: hidden; 20 | overflow-x: hidden; 21 | } 22 | 23 | .ovy-s { 24 | overflow-y: scroll; 25 | overflow-x: hidden 26 | } 27 | `; 28 | 29 | const attrMap = { 30 | 'overflow-y': { 31 | scroll: 'ovy-s', 32 | hidden: 'ovy-h' 33 | } 34 | }; 35 | 36 | const attributes = Object.keys(attrMap); 37 | 38 | function attributeChangedCallback(attrName, value) { 39 | const styleClass = attrMap[attrName][value]; 40 | if (typeof styleClass === 'undefined') { 41 | throw new Error(`Unknown style for ${attrName}="${value}"`); 42 | } 43 | return styleClass; 44 | } 45 | 46 | module.exports = { 47 | css, 48 | attributes, 49 | attributeChangedCallback 50 | }; 51 | -------------------------------------------------------------------------------- /packages/style/src/overflow.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Overflow = require('./overflow'); 18 | const chai = require('chai'); 19 | 20 | const expect = chai.expect; 21 | 22 | describe('Overflow', () => { 23 | describe('attributeChangedCallback', () => { 24 | context('with a valid value', () => { 25 | [ 26 | { value: 'scroll', result: 'ovy-s' }, 27 | { value: 'hidden', result: 'ovy-h' } 28 | ].forEach(({ value, result }) => { 29 | context(`with ${value}`, () => { 30 | it(`returns class ${result}`, () => { 31 | expect( 32 | Overflow.attributeChangedCallback('overflow-y', value) 33 | ).to.eq(result); 34 | }); 35 | }); 36 | }); 37 | }); 38 | 39 | context('with an invalid value', () => { 40 | it('raises an error', () => { 41 | expect(() => { 42 | Overflow.attributeChangedCallback('overflow-y', 'foobar'); 43 | }).to.throw(Error); 44 | }); 45 | }); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /packages/style/src/pointer-events.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const css = ` 18 | .pe-initial { 19 | pointer-events: initial; 20 | } 21 | 22 | .pe-none { 23 | pointer-events: none; 24 | } 25 | `; 26 | 27 | const attrMap = { 28 | pointerEvents: { 29 | initial: 'pe-initial', 30 | none: 'pe-none' 31 | } 32 | }; 33 | 34 | const attributes = Object.keys(attrMap); 35 | 36 | function attributeChangedCallback(attrName, value) { 37 | const styleClass = attrMap[attrName][value]; 38 | if (typeof styleClass === 'undefined') { 39 | throw new Error(`Unknown style for ${attrName}="${value}"`); 40 | } 41 | return styleClass; 42 | } 43 | 44 | module.exports = { 45 | css, 46 | attributes, 47 | attributeChangedCallback 48 | }; 49 | -------------------------------------------------------------------------------- /packages/style/src/pointer-events.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const PointerEvents = require('./pointer-events'); 18 | const chai = require('chai'); 19 | 20 | const expect = chai.expect; 21 | 22 | describe('PointerEvents', () => { 23 | describe('attributeChangedCallback', () => { 24 | context('with a valid value', () => { 25 | [ 26 | { value: 'initial', result: 'pe-initial' }, 27 | { value: 'none', result: 'pe-none' } 28 | ].forEach(({ value, result }) => { 29 | context(`with ${value}`, () => { 30 | it(`returns class ${result}`, () => { 31 | expect( 32 | PointerEvents.attributeChangedCallback('pointerEvents', value) 33 | ).to.eq(result); 34 | }); 35 | }); 36 | }); 37 | }); 38 | 39 | context('with an invalid value', () => { 40 | it('raises an error', () => { 41 | expect(() => { 42 | PointerEvents.attributeChangedCallback('pointerEvents', 'foobar'); 43 | }).to.throw(Error); 44 | }); 45 | }); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /packages/style/src/position.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const scale = require('./scale'); 18 | 19 | const concat = (acc, memo) => acc + memo; 20 | 21 | function buildPositions() { 22 | const dimensions = ['top', 'right', 'bottom', 'left']; 23 | 24 | return dimensions 25 | .map(dimension => { 26 | return scale 27 | .map((scaleValue, scaleIndex) => { 28 | return `.pos-${dimension}-${scaleIndex} { ${dimension}: ${scaleValue} } `; 29 | }) 30 | .reduce(concat); 31 | }) 32 | .reduce(concat); 33 | } 34 | 35 | const css = ` 36 | .pos-st { 37 | position: static; 38 | } 39 | 40 | .pos-rel { 41 | position: relative; 42 | } 43 | 44 | .pos-abs { 45 | position: absolute; 46 | } 47 | 48 | .pos-cov { 49 | position: absolute; 50 | top: 0; 51 | left: 0; 52 | right: 0; 53 | bottom: 0; 54 | } 55 | 56 | ${buildPositions()} 57 | `; 58 | 59 | const attributes = ['position', 'top', 'right', 'bottom', 'left']; 60 | 61 | function attributeChangedCallback(attrName, value) { 62 | // Absolute positioning dimensions 63 | if (['top', 'right', 'bottom', 'left'].includes(attrName)) { 64 | return `pos-${attrName}-${value}`; 65 | } 66 | 67 | // Positioning 68 | switch (value) { 69 | case 'absolute': 70 | return 'pos-abs'; 71 | case 'relative': 72 | return 'pos-rel'; 73 | case 'static': 74 | return 'pos-sta'; 75 | case 'cover': 76 | return 'pos-cov'; 77 | default: 78 | throw new Error('unknown style'); 79 | } 80 | } 81 | 82 | module.exports = { 83 | css, 84 | attributes, 85 | attributeChangedCallback 86 | }; 87 | -------------------------------------------------------------------------------- /packages/style/src/position.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Position = require('./position'); 18 | const chai = require('chai'); 19 | 20 | const expect = chai.expect; 21 | 22 | describe('Position', () => { 23 | describe('attributeChangedCallback', () => { 24 | context('with a valid value', () => { 25 | [ 26 | { value: 'absolute', result: 'pos-abs' }, 27 | { value: 'relative', result: 'pos-rel' }, 28 | { value: 'static', result: 'pos-sta' }, 29 | { value: 'cover', result: 'pos-cov' } 30 | ].forEach(({ value, result }) => { 31 | context(`with ${value}`, () => { 32 | it(`returns class ${result}`, () => { 33 | expect(Position.attributeChangedCallback('position', value)).to.eq( 34 | result 35 | ); 36 | }); 37 | }); 38 | }); 39 | }); 40 | 41 | context('with an invalid value', () => { 42 | it('raises an error', () => { 43 | expect(() => { 44 | Position.attributeChangedCallback('position', 'foobar'); 45 | }).to.throw(Error); 46 | }); 47 | }); 48 | }); 49 | }); 50 | -------------------------------------------------------------------------------- /packages/style/src/reset-focus-style.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const css = ` 18 | .rst-foc:focus { 19 | outline: none; 20 | } 21 | `; 22 | 23 | const attributes = ['reset-focus-style']; 24 | 25 | function attributeChangedCallback(attrName, value) { 26 | if (value) { 27 | return 'rst-foc'; 28 | } 29 | return ''; 30 | } 31 | 32 | module.exports = { 33 | css, 34 | attributes, 35 | attributeChangedCallback 36 | }; 37 | -------------------------------------------------------------------------------- /packages/style/src/reset-focus-style.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Focus = require('./reset-focus-style'); 18 | const chai = require('chai'); 19 | 20 | const expect = chai.expect; 21 | 22 | describe('ResetFocusStyle', () => { 23 | describe('attributeChangedCallback', () => { 24 | context('with true', () => { 25 | it('returns class foc-nope', () => { 26 | expect(Focus.attributeChangedCallback('reset-focus-style', true)).to.eq( 27 | 'rst-foc' 28 | ); 29 | }); 30 | }); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /packages/style/src/scale.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | module.exports = [ 18 | 0, 19 | '.25rem', 20 | '.5rem', 21 | '1rem', 22 | '2rem', 23 | '4rem', 24 | '8rem', 25 | '16rem' 26 | ]; 27 | -------------------------------------------------------------------------------- /packages/style/src/typography.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const css = ` 18 | .ta-l { 19 | text-align: left; 20 | } 21 | 22 | .ta-c { 23 | text-align: center; 24 | } 25 | 26 | .ta-r { 27 | text-align: right; 28 | } 29 | 30 | .ws-nw { 31 | white-space: nowrap; 32 | } 33 | `; 34 | 35 | const attrMap = { 36 | 'text-align': { 37 | left: 'ta-l', 38 | center: 'ta-c', 39 | right: 'ta-r' 40 | }, 41 | 'white-space': { 42 | nowrap: 'ws-nw' 43 | } 44 | }; 45 | 46 | const attributes = Object.keys(attrMap); 47 | 48 | function attributeChangedCallback(attrName, value) { 49 | const styleClass = attrMap[attrName][value]; 50 | if (typeof styleClass === 'undefined') { 51 | throw new Error(`Unknown style for ${attrName}="${value}"`); 52 | } 53 | 54 | return styleClass; 55 | } 56 | 57 | module.exports = { 58 | css, 59 | attributes, 60 | attributeChangedCallback 61 | }; 62 | -------------------------------------------------------------------------------- /packages/style/src/typography.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const Typography = require('./typography'); 18 | const chai = require('chai'); 19 | 20 | const expect = chai.expect; 21 | 22 | describe('Typography', () => { 23 | describe('attributeChangedCallback', () => { 24 | context('for attribute textAlign', () => { 25 | context('with a valid value', () => { 26 | [ 27 | { attr: 'text-align', value: 'left', result: 'ta-l' }, 28 | { attr: 'text-align', value: 'center', result: 'ta-c' }, 29 | { attr: 'text-align', value: 'right', result: 'ta-r' }, 30 | { attr: 'white-space', value: 'nowrap', result: 'ws-nw' } 31 | ].forEach(({ attr, value, result }) => { 32 | context(`with ${value}`, () => { 33 | it(`returns class ${result}`, () => { 34 | expect(Typography.attributeChangedCallback(attr, value)).to.eq( 35 | result 36 | ); 37 | }); 38 | }); 39 | }); 40 | }); 41 | }); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /packages/style/src/user-select.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const css = ` 18 | .user-select { 19 | user-select: none; 20 | -moz-user-select: none; 21 | -webkit-user-select: none; 22 | -ms-user-select: none; 23 | } 24 | `; 25 | 26 | const attributes = ['userSelect']; 27 | 28 | function attributeChangedCallback(attrName, value) { 29 | if (!value) { 30 | return 'user-select'; 31 | } 32 | return ''; 33 | } 34 | 35 | module.exports = { 36 | css, 37 | attributes, 38 | attributeChangedCallback 39 | }; 40 | -------------------------------------------------------------------------------- /packages/style/src/user-select.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const UserSelect = require('./user-select'); 18 | const chai = require('chai'); 19 | 20 | const expect = chai.expect; 21 | 22 | describe('UserSelect', () => { 23 | describe('attributeChangedCallback', () => { 24 | context('with false', () => { 25 | it('returns class user-select', () => { 26 | expect(UserSelect.attributeChangedCallback('userSelect', false)).to.eq( 27 | 'user-select' 28 | ); 29 | }); 30 | }); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /rationale/MONOREPO.md: -------------------------------------------------------------------------------- 1 | 16 | 17 | # Monorepo 18 | 19 | ## TL;DR 20 | 21 | All code for the Orion project will be divided into packages within the orion repo. 22 | We'll use [Lerna](https://github.com/lerna/lerna) to help manage. This makes bigger changes 23 | easier to make and allows us to easily split out components to a smaller level of granularity later. 24 | 25 | -------------------------------------------------------------------------------- /scripts/modules/constants.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | */ 16 | 17 | module.exports = { 18 | /** 19 | * All build directories should have the same name 20 | */ 21 | buildDirName: 'build', 22 | 23 | /** 24 | * Where we store all the packages 25 | */ 26 | packageDirName: 'packages', 27 | 28 | /** 29 | * Scripts for development and deployment of the project 30 | */ 31 | scriptsPackageDirName: 'scripts', 32 | 33 | /** 34 | * Where we store coverage reports 35 | */ 36 | coverageDirName: 'coverage' 37 | }; 38 | -------------------------------------------------------------------------------- /scripts/modules/deploy-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | module.exports = { 18 | /** 19 | * The standard bucket we upload everything to 20 | */ 21 | Bucket: 'cdn.web-platform.io', 22 | 23 | /** 24 | * Takes a buildId and returns the S3 snapshot prefix 25 | */ 26 | SnapshotPrefix: buildId => `orion-ui/orion/snapshot-${buildId}` 27 | }; 28 | -------------------------------------------------------------------------------- /scripts/modules/known-paths.js: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright 2016 Autodesk,Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | const path = require('path'); 18 | const constants = require('./constants'); 19 | 20 | const root = path.join(__dirname, '..', '..'); 21 | const build = path.join(root, constants.buildDirName); 22 | const packages = path.join(root, constants.packageDirName); 23 | const scripts = path.join(packages, constants.scriptsPackageDirName); 24 | const coverage = path.join(root, constants.coverageDirName); 25 | 26 | module.exports = { 27 | /** 28 | * Top level repo directory 29 | */ 30 | root, 31 | 32 | /** 33 | * Top level build directory 34 | */ 35 | build, 36 | 37 | /** 38 | * Top level packages directory 39 | */ 40 | packages, 41 | 42 | /** 43 | * The scripts package 44 | */ 45 | scripts, 46 | 47 | /** 48 | * Top level code coverage directory 49 | */ 50 | coverage 51 | }; 52 | -------------------------------------------------------------------------------- /scripts/set-package-to-root.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* eslint-env shelljs */ 3 | /** 4 | Copyright 2016 Autodesk,Inc. 5 | 6 | Licensed under the Apache License, Version 2.0 (the "License"); 7 | you may not use this file except in compliance with the License. 8 | You may obtain a copy of the License at 9 | 10 | http://www.apache.org/licenses/LICENSE-2.0 11 | 12 | Unless required by applicable law or agreed to in writing, software 13 | distributed under the License is distributed on an "AS IS" BASIS, 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | See the License for the specific language governing permissions and 16 | limitations under the License. 17 | 18 | */ 19 | 20 | require('shelljs/global'); 21 | 22 | const knownPaths = require('./modules/known-paths'); 23 | const path = require('path'); 24 | const program = require('commander'); 25 | 26 | program 27 | .description('copies contents of :build/:packageName to :build') 28 | .option('-p, --package [name]', 'The name of the package to copy') 29 | .parse(process.argv); 30 | 31 | if (!program.package) { 32 | console.error('package is required'); 33 | program.outputHelp(); 34 | process.exit(1); 35 | } 36 | 37 | const source = path.join(knownPaths.build, program.package); 38 | 39 | if (!test('-e', source)) { 40 | console.error(); 41 | console.error(`${program.package} was not found in ${knownPaths.build}`); 42 | console.error('Maybe run copy-package-builds first?'); 43 | console.error(); 44 | 45 | process.exit(1); 46 | } 47 | 48 | console.log(`Copying contents of ${program.package} to ${knownPaths.build}`); 49 | cp('-R', `${source}/*`, knownPaths.build); 50 | 51 | console.log(`Removing ${source}`); 52 | rm('-rf', source); 53 | -------------------------------------------------------------------------------- /scripts/start-playground.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /** 3 | Copyright 2016 Autodesk,Inc. 4 | 5 | Licensed under the Apache License, Version 2.0 (the "License"); 6 | you may not use this file except in compliance with the License. 7 | You may obtain a copy of the License at 8 | 9 | http://www.apache.org/licenses/LICENSE-2.0 10 | 11 | Unless required by applicable law or agreed to in writing, software 12 | distributed under the License is distributed on an "AS IS" BASIS, 13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | See the License for the specific language governing permissions and 15 | limitations under the License. 16 | 17 | */ 18 | /* eslint-env shelljs */ 19 | require('shelljs/global'); 20 | 21 | const knownPaths = require('./modules/known-paths'); 22 | const path = require('path'); 23 | const program = require('commander'); 24 | 25 | program 26 | .description('start up a playground development environment') 27 | .usage('[options] [name]') 28 | .option('-l, --list', 'list all playgrounds') 29 | .parse(process.argv); 30 | 31 | function getPlaygrounds() { 32 | return ls(knownPaths.packages).filter(pkg => pkg.match(/playground/)); 33 | } 34 | 35 | function isValidPlayground(name) { 36 | return getPlaygrounds().find(playground => playground === name); 37 | } 38 | 39 | function outputListItem(item) { 40 | console.log(`- ${item}`); 41 | } 42 | 43 | function outputList() { 44 | console.log(); 45 | console.log('Playgrounds: '); 46 | console.log(); 47 | const playgrounds = getPlaygrounds(); 48 | playgrounds.forEach(outputListItem); 49 | } 50 | 51 | function startPlayground(name) { 52 | if (!isValidPlayground(name)) { 53 | console.error('A valid playground name is required'); 54 | outputList(); 55 | program.outputHelp(); 56 | process.exit(1); 57 | } else { 58 | console.log(`start ${name}`); 59 | 60 | // Verify we are in root 61 | cd(path.join(__dirname, '..')); 62 | exec( 63 | `./node_modules/.bin/lerna run start --scope ${name} --include-filtered-dependencies --no-sort --stream` 64 | ); 65 | } 66 | } 67 | 68 | const [name] = program.args; 69 | 70 | if (name) { 71 | startPlayground(name); 72 | } else if (program.list) { 73 | outputList(); 74 | } else { 75 | console.error('playground name is required'); 76 | outputList(); 77 | program.outputHelp(); 78 | process.exit(1); 79 | } 80 | --------------------------------------------------------------------------------