2 |
6 |
--------------------------------------------------------------------------------
/docs/html/image/image--4by3.html:
--------------------------------------------------------------------------------
1 |
3 | 
4 |
5 |
4 |
2 |
6 |
--------------------------------------------------------------------------------
/packages/core-react/.storybook/preview-head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/docs/html/image/image--16by9.html:
--------------------------------------------------------------------------------
1 |
3 | 
4 |
5 |
4 |
2 |
6 |
--------------------------------------------------------------------------------
/packages/core/.dsmrc:
--------------------------------------------------------------------------------
1 | {
2 | "authToken": "SJzSKQm2B",
3 | "dsmHost": "weworkdesign.invisionapp.com",
4 | "organization": "we-work",
5 | "outputDir": ".dsm",
6 | "storyPath": "stories/**/*.stories.js"
7 | }
8 |
--------------------------------------------------------------------------------
/packages/product-react/.storybook/preview-head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/docs/html/typography/typography-links.html:
--------------------------------------------------------------------------------
1 |
3 | 
4 |
5 |
4 |
2 | this is an anchor tag
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/core/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | displayName: '@wework/ray-core',
3 | testMatch: ['
2 |
6 |
7 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Grid/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/prefer-default-export */
2 | export { default as Container } from './Container';
3 | export { default as Grid } from './Grid';
4 | export { default as Cell } from './Cell';
5 |
--------------------------------------------------------------------------------
/docs/html/typography/typography-blockquote.html:
--------------------------------------------------------------------------------
1 | 2 | What works good is better than what looks good, because what works good lasts. 3 | 4 |5 | -------------------------------------------------------------------------------- /packages/docs-app/src/data/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "items": [ 3 | { 4 | "item": "Button", 5 | "added": "1.0.0", 6 | "vanilla": "ready", 7 | "react": false, 8 | "experimental": "ready" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /docs/html/typography/typography-body.html: -------------------------------------------------------------------------------- 1 |
Body large
2 | Body default
3 | Body small
4 | Body x-small
5 |
--------------------------------------------------------------------------------
/packages/core/src/components/index.js:
--------------------------------------------------------------------------------
1 | import Select from './select';
2 | import Dropdown from './dropdown';
3 | import { TextField, TextArea } from './text-field';
4 | import Chip from './chip';
5 |
6 | export { Select, Dropdown, TextField, TextArea, Chip };
7 |
--------------------------------------------------------------------------------
/packages/core-react/test/index.test.js:
--------------------------------------------------------------------------------
1 | describe('@wework/ray-core-react', () => {
2 | test('can be imported with no errors', () => {
3 | expect(() => {
4 | require('../src'); // eslint-disable-line global-require
5 | }).not.toThrow();
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/packages/core/tools/build_chromatic.sh:
--------------------------------------------------------------------------------
1 | if [ "${CIRCLE_BRANCH}" != "master" ];
2 | then
3 | npx chromatic test "${@}"
4 | else
5 | # We know any changes that make it to master *must* have been approved
6 | npx chromatic test --auto-accept-changes "${@}"
7 | fi
8 |
--------------------------------------------------------------------------------
/packages/product-react/test/index.test.ts:
--------------------------------------------------------------------------------
1 | describe('@wework/ray-product-react', () => {
2 | test('can be imported with no errors', () => {
3 | expect(() => {
4 | require('../src'); // eslint-disable-line global-require
5 | }).not.toThrow();
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/docs/html/image/image--caption.html:
--------------------------------------------------------------------------------
1 |
2 |
8 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Grid/__snapshots__/Grid.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Grid should match snapshot and styles 1`] = `
4 |
3 |
4 |
5 |
6 |
4 | A beautiful graphic
7 | {children}
: <>{children});
7 |
8 | export default RTLWrapper;
9 |
--------------------------------------------------------------------------------
/docs/html/text-area/text-area.html:
--------------------------------------------------------------------------------
1 |
2 |
8 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/product-react/stories/Checkbox.story.tsx:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/react';
2 | import React from 'react';
3 |
4 | import { Checkbox } from '../src/components/Checkbox';
5 |
6 | storiesOf('Core Comps | Checkbox', module).add('default', () => (
7 |
2 |
8 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Container/__snapshots__/Container.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Container should match snapshot and styles 1`] = `
4 | -
2 |
- Item one 3 |
- Item two 4 |
- Item three 5 |
-
6 | Item four
7 |
-
8 |
- and a one 9 |
- and a two 10 |
- and a three 11 |
13 | - Item five 14 |
2 | Heading 2
3 | Heading 3
4 | Heading 4
5 | Heading 5
6 | Heading 6
7 | -------------------------------------------------------------------------------- /packages/core-react/stories/radio.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import Radio from '../src/components/Radio'; 5 | 6 | storiesOf('Radio', module).add('default', () => ( 7 |
8 |
11 | ));
12 |
--------------------------------------------------------------------------------
/packages/docs-app/NOTICE:
--------------------------------------------------------------------------------
1 | Ray Design System
2 | Copyright 2019 WeWork Companies Inc.
3 | Copyright 2018 IBM Corp.
4 |
5 | This product includes software developed by
6 | WeWork Companies Inc. (https://www.wework.com).
7 |
8 | This product includes software developed by
9 | IBM Corp (https://www.ibm.com).
10 | Licensed under the Apache License, Version 2.0
11 |
--------------------------------------------------------------------------------
/packages/product-react/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | displayName: '@wework/ray-product-react',
3 | testMatch: ['Better Together
2 |3 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa architecto non 4 | dolorem atque dolore provident, velit commodi, nobis itaque voluptatibus ipsam 5 | impedit numquam? Est eos corrupti numquam placeat quam soluta! 6 |
7 | -------------------------------------------------------------------------------- /packages/docs-app/.storybook/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "targets": { 7 | "browsers": ["last 1 versions", "Firefox ESR"] 8 | } 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ], 13 | "plugins": [ 14 | "@babel/plugin-proposal-class-properties" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/product-react/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-typescript', 4 | [ 5 | '@babel/preset-env', 6 | { 7 | targets: { 8 | node: 'current' 9 | } 10 | } 11 | ], 12 | '@babel/preset-react' 13 | ], 14 | plugins: ['@babel/plugin-proposal-class-properties'] 15 | }; 16 | -------------------------------------------------------------------------------- /docs/html/text-area/text-area-multi-row.html: -------------------------------------------------------------------------------- 1 |
2 |
9 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/core/stories/util/placeholder.js:
--------------------------------------------------------------------------------
1 | const images = {
2 | '3x4': '/images/image_3x4.jpg',
3 | '4x3': '/images/image_4x3.jpg',
4 | '16x9': '/images/image_16x9.jpg'
5 | };
6 |
7 | const DEFAULT_RATIO = '4x3';
8 |
9 | export default function getPlaceholderURL(dimensions = DEFAULT_RATIO) {
10 | return images[dimensions] || images[DEFAULT_RATIO];
11 | }
12 |
--------------------------------------------------------------------------------
/packages/core/src/components/select/constants.js:
--------------------------------------------------------------------------------
1 | export const CSS_CLASSES = {
2 | ACTIVE: 'ray-select--active',
3 | REQUIRED: 'ray-select--required',
4 | HAS_VALUE: 'ray-select--has-value',
5 | PLACEHOLDER_MODE: 'ray-select--placeholder-mode',
6 | EL__INPUT: 'ray-select__input'
7 | };
8 |
9 | export const STRINGS = {
10 | INIT_SELECTOR: '.ray-select'
11 | };
12 |
--------------------------------------------------------------------------------
/docs/html/text-field/rtl-text-field.html:
--------------------------------------------------------------------------------
1 |
2 |
14 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Avatar should match snapshot and styles 1`] = `
4 |
3 |
9 |
12 |
13 | {children}
9 | ) : (
10 | <>{children}
11 | );
12 |
13 | export default FormItemWrapper;
14 |
--------------------------------------------------------------------------------
/packages/core/README.md:
--------------------------------------------------------------------------------
1 | # [Ray](https://ray.wework.com/)
2 |
3 | Resources for building interfaces with WeWork's design system.
4 |
5 | This package contains Ray's core UI as CSS and JavaScript.
6 |
7 | ## Installation
8 |
9 | ```
10 | npm install --save @wework/ray-core
11 | ```
12 |
13 | ### [Full Documentation](https://ray.wework.com) | [Source Code](https://github.com/wework/ray)
14 |
--------------------------------------------------------------------------------
/packages/core/src/global/mixins/_exports.scss:
--------------------------------------------------------------------------------
1 | $_imported: () !default;
2 |
3 | /** Module exports mixin
4 | * This mixin makes sure a module is imported only once.
5 | * @param {String} $name - Name of exported module
6 | **/
7 | @mixin exports($name) {
8 | @if (index($_imported, $name) == null) {
9 | $_imported: append($_imported, $name) !global;
10 | @content;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/docs/html/table/table.html:
--------------------------------------------------------------------------------
1 | | Name | 5 ||
|---|---|
| Arya Stark | 11 |arya@winterfell.org | 12 |
| Jon Snow | 15 |jon@thewatch.org | 16 |
{children}
9 | ) : (
10 | <>{children}
11 | );
12 |
13 | export default FieldWrapper;
14 |
--------------------------------------------------------------------------------
/docs/html/breadcrumb/rtl-breadcrumbs.html:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/docs-app/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | jobs:
3 | build:
4 | docker:
5 | - image: circleci/node:8.11
6 | working_directory: ~/repo
7 | steps:
8 | - checkout
9 | - run:
10 | name: Install dependencies
11 | command: yarn install
12 | - run:
13 | name: Confirm project can build
14 | command: |
15 | yarn build
16 |
--------------------------------------------------------------------------------
/packages/docs-app/src/pages/404.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Layout from '../components/Layouts';
3 | import FourOhFour from '../components/404';
4 |
5 | import '../polyfills';
6 |
7 | class NotFoundPage extends React.Component {
8 | render() {
9 | return (
10 | {children}
9 | ) : (
10 | <>{children}
11 | );
12 |
13 | export default IconWrapper;
14 |
--------------------------------------------------------------------------------
/docs/html/image/bg--16by9.html:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
13 |
--------------------------------------------------------------------------------
/packages/product-react/README.md:
--------------------------------------------------------------------------------
1 | # [Ray Product React Components](https://ray.wework.com/)
2 |
3 | 🚧 Currently in alpha, work-in-progress
4 |
5 | Resources for building interfaces with WeWork's design system.
6 |
7 | ## Installation
8 |
9 | ```
10 | npm install --save @wework/ray-product-react
11 | ```
12 |
13 | ### [Full Documentation](https://ray.wework.com) | [Source Code](https://github.com/wework/ray)
14 |
--------------------------------------------------------------------------------
/docs/html/image/rtl-image--caption.html:
--------------------------------------------------------------------------------
1 |
9 | Vangelis Drake Equation explorations venture Rig Veda encyclopaedia
10 | galactica.
11 |
12 |
2 |
13 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Grid/Container.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import clsx from 'clsx';
4 |
5 | export default function Container({ className, ...props }) {
6 | const classes = clsx('ray-page-container', className);
7 |
8 | return ;
9 | }
10 |
11 | Container.propTypes = {
12 | className: PropTypes.string
13 | };
14 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Common/Icon.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const Icon = ({ prepend, icon }) => {
5 | if (prepend) {
6 | return
3 |
12 |
4 |
5 |
6 |
7 |
5 |
8 | שנתי לחשבון מתמטיקה מתן גם. כימיה אינטרנט אנציקלופדיה אם צעד, את העיר
9 | הסביבה אחר גם.
10 |
11 | {icon}
;
7 | }
8 | return {icon}
;
9 | };
10 |
11 | export default Icon;
12 |
13 | Icon.propTypes = {
14 | prepend: PropTypes.bool,
15 | icon: PropTypes.node
16 | };
17 |
--------------------------------------------------------------------------------
/packages/core/stories/tag.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | storiesOf('Tag', module)
5 | .add('default', () => (
6 | <>
7 | Enterprise
8 |
9 | ))
10 | .add('as a link', () => (
11 | <>
12 |
13 | Enterprise
14 |
15 |
16 | ));
17 |
--------------------------------------------------------------------------------
/docs/html/chip/chip--with-icon.html:
--------------------------------------------------------------------------------
1 |
2 |
15 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | testPathIgnorePatterns: ['node_modules/*', '.cache/*'],
3 | projects: [
4 | '
3 |
12 | Furnished
13 |
14 |
2 |
6 |
7 |
12 |
--------------------------------------------------------------------------------
/docs/html/select/select.html:
--------------------------------------------------------------------------------
1 |
8 | Consciousness are creatures of the cosmos rings of Uranus another world
9 | colonies concept of the number one.
10 |
11 |
2 |
8 |
9 |
12 |
13 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "command": {
3 | "publish": {
4 | "conventionalCommits": true
5 | },
6 | "version": {
7 | "message": "chore(release): publish %s",
8 | "conventionalCommits": true,
9 | "gitHubRelease": true,
10 | "allowBranch": "master"
11 | }
12 | },
13 | "packages": [
14 | "packages/*"
15 | ],
16 | "version": "1.16.9",
17 | "npmClient": "yarn",
18 | "useWorkspaces": true
19 | }
20 |
--------------------------------------------------------------------------------
/packages/core-react/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | '@babel/preset-env',
5 | {
6 | targets: {
7 | node: 'current'
8 | },
9 | ...(process.env.NODE_ENV === 'test'
10 | ? { modules: 'auto' }
11 | : { modules: false })
12 | }
13 | ],
14 | '@babel/preset-react'
15 | ],
16 | plugins: ['@babel/plugin-proposal-class-properties']
17 | };
18 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | '@babel/preset-env',
5 | {
6 | targets: {
7 | node: 'current'
8 | },
9 | ...(process.env.NODE_ENV === 'test'
10 | ? { modules: 'auto' }
11 | : { modules: false })
12 | }
13 | ],
14 | '@babel/preset-react',
15 | '@babel/preset-typescript'
16 | ],
17 | plugins: ['@babel/plugin-proposal-class-properties']
18 | };
19 |
--------------------------------------------------------------------------------
/docs/html/dropdown/dropdown.html:
--------------------------------------------------------------------------------
1 |
2 |
13 |
--------------------------------------------------------------------------------
/docs/html/select/select--error.html:
--------------------------------------------------------------------------------
1 |
3 |
8 |
9 |
12 |
2 |
8 |
9 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/core/stories/tabs.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | if (process.env.NODE_ENV === 'development') {
5 | storiesOf('Tabs', module).add('default', () => (
6 | -
7 |
- Desktop 8 |
- Tablet 9 |
- Mobile 10 |
2 |
8 |
9 |
12 |
13 |
--------------------------------------------------------------------------------
/docs/html/table/rtl-table.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/core/stories/static/bg.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/core/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | '@babel/preset-env',
5 | {
6 | targets: {
7 | node: 'current',
8 | browsers: ['> 5%', 'Last 3 versions and not ie < 11']
9 | },
10 | ...(process.env.NODE_ENV === 'test'
11 | ? { modules: 'auto' }
12 | : { modules: false })
13 | }
14 | ]
15 | ],
16 | plugins: ['@babel/plugin-proposal-class-properties']
17 | };
18 |
--------------------------------------------------------------------------------
/packages/product-react/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components/Container';
2 | export * from './components/Image';
3 | export * from './components/Grid';
4 | export * from './components/Tabs';
5 | export * from './components/Button'
6 | export * from './components/Card';
7 | export * from './components/Select';
8 | export * from './components/Checkbox';
9 | export * from './components/TextArea';
10 | export * from './components/Radio';
11 | export * from './components/List';
12 |
13 |
--------------------------------------------------------------------------------
/packages/docs-app/src/content/global/images/bg.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 |
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
14 |
15 | [{package,bower}.json]
16 | indent_style = space
17 | indent_size = 2
18 |
19 | [{.eslintrc,.scss-lint.yml}]
20 | indent_style = space
21 | indent_size = 2
22 |
23 | [*.{scss,sass}]
24 | indent_style = space
25 | indent_size = 2
26 |
--------------------------------------------------------------------------------
/docs/html/select/rtl-select.html:
--------------------------------------------------------------------------------
1 | | שֵׁם | 6 |דואר אלקטרוני | 7 |
|---|---|
| אריה סטארק | 12 |arya@winterfell.org | 13 |
| ג'ון שלג | 16 |jon@thewatch.org | 17 |
2 |
15 |
--------------------------------------------------------------------------------
/docs/html/text-field/text-field-with-hint.html:
--------------------------------------------------------------------------------
1 |
3 |
9 |
10 |
13 |
14 |
2 |
17 |
--------------------------------------------------------------------------------
/packages/core/stories/breadcrumb.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | storiesOf('Breadcrumb', module).add('example', () => (
5 |
3 |
9 |
12 |
13 |
14 | Hint hint, your name of choice goes here.
15 |
16 | -
6 |
- 7 | Home 8 | 9 |
- 10 | New York City 11 | 12 |
- Tribeca 13 |
2 |
13 |
--------------------------------------------------------------------------------
/docs/html/select/select--with-placeholder.html:
--------------------------------------------------------------------------------
1 |
3 |
8 |
9 |
12 |
2 |
10 |
11 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Card/Card.scss:
--------------------------------------------------------------------------------
1 | $card-compact-padding: 1rem;
2 | $card-compact-div: 0;
3 | $card-compact-inactive: #666;
4 | $card-card-content: break-word;
5 |
6 | .ray-card {
7 | &--compact {
8 | padding: $card-compact-padding;
9 | }
10 |
11 | &--compact > div {
12 | margin-bottom: $card-compact-div;
13 | }
14 |
15 | &--inactive {
16 | color: $card-compact-inactive;
17 | }
18 |
19 | &__content {
20 | overflow-wrap: $card-card-content;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/core/src/global/_functions.scss:
--------------------------------------------------------------------------------
1 | @mixin no-select {
2 | -webkit-touch-callout: none; /* iOS Safari */
3 | -webkit-user-select: none; /* Safari */
4 | -khtml-user-select: none; /* Konqueror HTML */
5 | -moz-user-select: none; /* Firefox */
6 | -ms-user-select: none; /* Internet Explorer/Edge */
7 | user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
8 | }
9 |
10 | @function rem($px, $base-font-size: 16px) {
11 | @return ($px / $base-font-size) * 1rem;
12 | }
13 |
--------------------------------------------------------------------------------
/docs/html/select/rtl-select--error.html:
--------------------------------------------------------------------------------
1 |
2 |
15 |
--------------------------------------------------------------------------------
/packages/core-react/README.md:
--------------------------------------------------------------------------------
1 | # [Ray React Components](https://ray.wework.com/)
2 |
3 | 🚧 Currently in alpha, work-in-progress
4 |
5 | Resources for building interfaces with WeWork's design system.
6 |
7 | This package contains Ray's React components.
8 |
9 | ## Installation
10 |
11 | ```
12 | npm install --save @wework/ray-core-react
13 | ```
14 |
15 | ### [React Storybook](https://ray.wework.com/core-react/storybook) | [Full Documentation](https://ray.wework.com) | [Source Code](https://github.com/wework/ray)
16 |
--------------------------------------------------------------------------------
/docs/html/fieldset/fieldset.html:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/docs/html/select/rtl-select--compact.html:
--------------------------------------------------------------------------------
1 |
3 |
9 |
10 |
13 |
14 |
2 |
15 |
--------------------------------------------------------------------------------
/packages/docs-app/src/polyfills/custom-event.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/no-extraneous-dependencies
2 | import CustomEventPolyfill from 'custom-event';
3 |
4 | // eslint-disable-next-line consistent-return
5 | const missingNativeCustomEvent = (() => {
6 | try {
7 | new CustomEvent('test-event'); // eslint-disable-line no-new
8 | } catch (error) {
9 | return true;
10 | }
11 | })();
12 | if (missingNativeCustomEvent && typeof window !== 'undefined') {
13 | window.CustomEvent = CustomEventPolyfill;
14 | }
15 |
--------------------------------------------------------------------------------
/docs/html/dropdown/rtl-dropdown.html:
--------------------------------------------------------------------------------
1 |
3 |
9 |
10 |
13 |
14 |
2 |
15 |
--------------------------------------------------------------------------------
/docs/components/breadcrumb.md:
--------------------------------------------------------------------------------
1 | ---
2 | label: Component
3 | title: Breadcrumb
4 | ---
5 |
6 |
3 |
14 |
4 |
9 |
10 |
13 |
2 |
19 |
--------------------------------------------------------------------------------
/packages/docs-app/src/polyfills/element-closest.js:
--------------------------------------------------------------------------------
1 | if (
2 | typeof Element !== 'undefined' &&
3 | typeof Element.prototype.closest !== 'function'
4 | ) {
5 | Element.prototype.closest = function closestElement(selector) {
6 | const doc = this.ownerDocument;
7 | for (
8 | let traverse = this;
9 | traverse && traverse !== doc;
10 | traverse = traverse.parentNode
11 | ) {
12 | if (traverse.matches(selector)) {
13 | return traverse;
14 | }
15 | }
16 | return null;
17 | };
18 | }
19 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Button/__snapshots__/Button.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Button should match snapshot and styles for default props 1`] = `
4 | ""
7 | `;
8 |
--------------------------------------------------------------------------------
/packages/core-react/stories/grid.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import { Container, Grid, Cell } from '../src/components/Grid';
5 |
6 | storiesOf('Grid', module).add('default', () => (
7 |
3 |
18 |
4 |
10 |
13 |
14 |
15 | הזן את השם שלך כאן
16 |
17 |
2 |
17 |
--------------------------------------------------------------------------------
/packages/docs-app/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { configure, setAddon, addDecorator } from '@storybook/react';
3 | import infoAddon from '@storybook/addon-info';
4 | import Container from './Container';
5 |
6 | // addDecorator(checkA11y);
7 | addDecorator(story =>
3 |
7 |
8 |
9 |
7 |
10 |
16 | Better Together
11 |
12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
13 | minima itaque sint! Doloremque odio quia saepe.
14 |
15 |
2 |
17 |
--------------------------------------------------------------------------------
/docs/html/card/card.html:
--------------------------------------------------------------------------------
1 |
3 |
11 |
12 |
15 |
16 |
2 |
17 |
--------------------------------------------------------------------------------
/docs/html/dropdown/dropdown--error.html:
--------------------------------------------------------------------------------
1 |
3 |
7 |
8 |
9 |
7 |
10 |
16 | Better Together
11 |
12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
13 | minima itaque sint! Doloremque odio quia saepe.
14 |
15 |
2 |
13 | Is anything wrong?
14 |
--------------------------------------------------------------------------------
/docs/html/dropdown/rtl-dropdown--compact.html:
--------------------------------------------------------------------------------
1 |
3 |
8 |
11 |
12 |
2 |
15 |
--------------------------------------------------------------------------------
/packages/core-react/.storybook/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | const SRC_PATH = path.resolve(__dirname, '../src');
4 |
5 | module.exports = function({ config }) {
6 | // Add SCSS support, since Ray Design System needs it
7 | config.module.rules.push({
8 | test: /\.scss$/,
9 | loaders: ['style-loader', 'css-loader', 'sass-loader']
10 | });
11 |
12 | // Make root imports from `src/` work in storybooks
13 | config.resolve.alias = {
14 | ...config.resolve.alias,
15 | src: SRC_PATH
16 | };
17 |
18 | return config;
19 | };
20 |
--------------------------------------------------------------------------------
/packages/core/test/index.test.js:
--------------------------------------------------------------------------------
1 | describe('RayCore', () => {
2 | describe('library can be imported', () => {
3 | test('with no errors thrown', done => {
4 | expect(async () => {
5 | const { settings } = await require('../src'); // eslint-disable-line global-require
6 | expect(settings).toEqual({
7 | prefix: 'ray-',
8 | breakpointsInPixels: {
9 | phone: 0,
10 | tablet: 600,
11 | desktop: 1195
12 | }
13 | });
14 | done();
15 | }).not.toThrow();
16 | });
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/TextArea/textArea.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 |
4 | import TextArea from '.';
5 |
6 | describe('TextArea', () => {
7 | test('it renders a text field', () => {
8 | const wrapper = mount();
9 | expect(wrapper.find('textarea').length).toBe(1);
10 | });
11 |
12 | test('it renders a text area with a label', () => {
13 | const wrapper = mount();
14 | expect(wrapper.find('label.ray-text-area__label').length).toBe(1);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/packages/core/src/global/js/accessibility.js:
--------------------------------------------------------------------------------
1 | function attachAccessibilityEvents() {
2 | if (typeof document !== 'undefined') {
3 | const ENABLE_ACCESSIBILITY_CLASS = 'js-ray-enable-accessibility';
4 |
5 | document.addEventListener('keydown', function addAccessibilityClass() {
6 | document.body.classList.add(ENABLE_ACCESSIBILITY_CLASS);
7 | });
8 |
9 | document.addEventListener('mousedown', function removeAccessibilityClass() {
10 | document.body.classList.remove(ENABLE_ACCESSIBILITY_CLASS);
11 | });
12 | }
13 | }
14 |
15 | export default attachAccessibilityEvents;
16 |
--------------------------------------------------------------------------------
/docs/html/fieldset/rtl-fieldset.html:
--------------------------------------------------------------------------------
1 |
3 |
14 |
4 |
9 |
10 |
13 |
2 |
15 |
16 |
--------------------------------------------------------------------------------
/docs/html/card/rtl-card--row.html:
--------------------------------------------------------------------------------
1 |
2 |
19 |
--------------------------------------------------------------------------------
/packages/core/src/global/spacing/_spacing.scss:
--------------------------------------------------------------------------------
1 | $ray-spacing-baseline: 1rem !default;
2 |
3 | $ray-spacing-3xs: $ray-spacing-baseline * 0.125 !default;
4 | $ray-spacing-2xs: $ray-spacing-baseline * 0.25 !default;
5 | $ray-spacing-xs: $ray-spacing-baseline * 0.5 !default;
6 | $ray-spacing-sm: $ray-spacing-baseline * 0.75 !default;
7 | $ray-spacing-md: $ray-spacing-baseline !default;
8 | $ray-spacing-lg: $ray-spacing-baseline * 1.25 !default;
9 | $ray-spacing-xl: $ray-spacing-baseline * 1.5 !default;
10 | $ray-spacing-2xl: $ray-spacing-baseline * 2 !default;
11 | $ray-spacing-3xl: $ray-spacing-baseline * 5 !default;
12 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/TextArea/TextArea.test.tsx:
--------------------------------------------------------------------------------
1 | import Enzyme from 'enzyme';
2 | import React from 'react';
3 | import { TextArea } from './TextArea';
4 |
5 | describe('TextArea', () => {
6 | test('it renders a text field', () => {
7 | const wrapper = Enzyme.mount();
8 | expect(wrapper.find('textarea').length).toBe(1);
9 | });
10 |
11 | test('it renders a text area with a label', () => {
12 | const wrapper = Enzyme.mount();
13 | expect(wrapper.find('label.ray-text-area__label').length).toBe(1);
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/docs/html/card/rtl-card.html:
--------------------------------------------------------------------------------
1 |
3 |
18 |
4 |
8 |
9 |
10 |
8 |
11 |
17 | יחד טוב יותר
12 |
13 | תרומה גרמנית אל לוח, דת חפש ספינות טבלאות. מלא גם תרבות לחיבור חרטומים.
14 | צילום ננקטת בקר ב, עוד ביולי והגולשים.
15 |
16 |
2 |
19 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Radio/radio.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 |
4 | import Radio from '.';
5 |
6 | describe('Radio', () => {
7 | test('it renders a radio', () => {
8 | const wrapper = mount(
3 |
18 |
4 |
8 |
9 |
10 |
8 |
11 |
17 | יחד טוב יותר
12 |
13 | תרומה גרמנית אל לוח, דת חפש ספינות טבלאות. מלא גם תרבות לחיבור חרטומים.
14 | צילום ננקטת בקר ב, עוד ביולי והגולשים.
15 |
16 |
2 |
16 |
--------------------------------------------------------------------------------
/packages/docs-app/src/components/SpaceExample/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /* eslint-disable react/prop-types */
4 | function SpaceExample(props) {
5 | const rem = Number(props.rem);
6 | return (
7 |
3 |
14 | Is anything wrong?
15 |
4 |
9 |
10 |
13 |
8 |
15 |
21 | );
22 | }
23 |
24 | export default SpaceExample;
25 |
--------------------------------------------------------------------------------
/packages/core/src/components/fieldset/_fieldset.scss:
--------------------------------------------------------------------------------
1 | @import '../../global/variables';
2 | @import '../../global/mixins/exports';
3 |
4 | @include exports('ray-fieldset') {
5 | .#{$ray-class-prefix}fieldset {
6 | border: 0;
7 | padding: 0;
8 | margin: $ray-spacing-2xl 0 $ray-spacing-lg;
9 | }
10 |
11 | .#{$ray-class-prefix}fieldset__legend {
12 | font-family: $ray-font-stack-mono;
13 | font-size: 0.875rem;
14 | margin-bottom: $ray-spacing-xl;
15 | text-transform: uppercase;
16 | line-height: 1;
17 | overflow: hidden;
18 | white-space: nowrap;
19 | text-overflow: ellipsis;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/docs-app/src/components/PageHeader/PageHeader.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import { action } from '@storybook/addon-actions';
4 | import { withKnobs, text, boolean, number, color, select } from '@storybook/addon-knobs';
5 |
6 | import PageHeader from './PageHeader';
7 |
8 | const stories = storiesOf('PageHeader', module);
9 |
10 | stories.addDecorator(withKnobs);
11 |
12 | stories.add('default', () => {
13 | const label = text('label', 'Label');
14 | const title = text('title', 'Component');
15 | return
16 | {rem}rem
17 |
18 | {rem * 16}px 19 |
20 | 18 | {rem * 16}px 19 |
8 |
9 |
12 |
13 | );
14 | }
15 |
16 | Radio.propTypes = {
17 | className: PropTypes.string,
18 | id: PropTypes.string,
19 | name: PropTypes.string,
20 | label: PropTypes.node
21 | };
22 |
--------------------------------------------------------------------------------
/packages/docs-app/.storybook/Container.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './_container.scss';
3 |
4 | export default class Container extends Component {
5 | render() {
6 | const { story } = this.props;
7 |
8 | return (
9 |
20 | {story()}
21 |
22 |
7 |
18 | );
19 | }
20 | }
21 |
22 | export default FourOhFour;
23 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Image/image.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 |
4 | import Image from '.';
5 |
6 | describe('Image', () => {
7 | test('it renders an image', () => {
8 | const wrapper = mount(
8 |
14 |
15 |
17 | 404: Page not found
16 |
9 |
13 |
14 |
15 |
13 |
16 |
23 |
24 |
--------------------------------------------------------------------------------
/docs/components/tag.md:
--------------------------------------------------------------------------------
1 | ---
2 | label: Component
3 | title: Tag
4 | ---
5 |
6 | Better Together
17 |
18 |
19 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
20 | minima itaque sint! Doloremque odio quia saepe.
21 |
22 |
2 |
20 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Checkbox/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import PropTypes from 'prop-types';
4 |
5 | export default function Checkbox({ className, id, name, label }) {
6 | return (
7 |
3 |
15 |
16 |
19 |
8 |
14 |
17 |
18 | );
19 | }
20 |
21 | Checkbox.propTypes = {
22 | className: PropTypes.string,
23 | id: PropTypes.string,
24 | name: PropTypes.string,
25 | label: PropTypes.node
26 | };
27 |
--------------------------------------------------------------------------------
/packages/core/src/global/js/boot.js:
--------------------------------------------------------------------------------
1 | import * as components from '../../components';
2 |
3 | export function initializeAllComponents() {
4 | Object.keys(components).forEach(componentKey => {
5 | const Component = components[componentKey];
6 |
7 | Component.createAll();
8 | });
9 | }
10 |
11 | export default function boot() {
12 | if (typeof window !== 'undefined' && typeof document !== 'undefined') {
13 | if (
14 | document.readyState === 'complete' ||
15 | document.readyState === 'loaded' ||
16 | document.readyState === 'interactive'
17 | ) {
18 | initializeAllComponents();
19 | } else {
20 | window.addEventListener('DOMContentLoaded', initializeAllComponents);
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Checkbox/Checkbox.test.tsx:
--------------------------------------------------------------------------------
1 | import Enzyme from 'enzyme';
2 | import React from 'react';
3 |
4 | import Checkbox from './Checkbox';
5 |
6 | describe('Checkbox', () => {
7 | test('it renders a checkbox', () => {
8 | const wrapper = Enzyme.mount({this.props.children}
; 7 | } 8 | } 9 | 10 | export class FlexGroup extends React.Component { 11 | render() { 12 | return{this.props.children}
;
13 | }
14 | }
15 |
16 | export class ul extends React.Component {
17 | render() {
18 | return - {this.props.children}
- {this.props.children}
8 |
14 | );
15 | }
16 |
17 | Card.propTypes = {
18 | heading: PropTypes.node,
19 | body: PropTypes.node,
20 | img: PropTypes.node,
21 | row: PropTypes.bool,
22 | className: PropTypes.string
23 | };
24 |
--------------------------------------------------------------------------------
/packages/docs-app/src/components/ComponentDocs/ComponentDocs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export default class ComponentDocs extends React.Component {
5 | static propTypes = {
6 | component: PropTypes.string
7 | };
8 |
9 | render() {
10 | const componentDocUrl = '';
11 | // Loading README.md causes Storybook build failure as of now
12 | // componentDocUrl = require(`@wework/ray/src/components/${component}/README.md`);
13 |
14 | return (
15 | {img}
9 |
10 |
13 | {heading}
11 | {body}
12 |
16 |
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/product-react/.storybook/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | const SRC_PATH = path.resolve(__dirname, '../src');
4 |
5 | module.exports = function({ config }) {
6 | // Add SCSS support, since Ray Design System needs it
7 | config.module.rules.push(
8 | {
9 | test: /\.(ts|tsx)$/,
10 | use: [
11 | {
12 | loader: require.resolve('awesome-typescript-loader')
13 | }
14 | ]
15 | },
16 | {
17 | test: /\.(css|scss)$/,
18 | loaders: ['style-loader', 'css-loader', 'sass-loader'],
19 | include: path.resolve(__dirname, '../../')
20 | }
21 | );
22 |
23 | // Make root imports from `src/` work in storybooks
24 | config.resolve.extensions.push('.ts', '.tsx');
25 |
26 | return config;
27 | };
28 |
--------------------------------------------------------------------------------
/packages/core/src/components/tag/_tag.scss:
--------------------------------------------------------------------------------
1 | @import '../../global/mixins/exports';
2 | @import '../../global/variables';
3 |
4 | @include exports('ray-tag') {
5 | .#{$ray-class-prefix}tag {
6 | font-family: $ray-font-stack-mono;
7 | border: 1px solid $ray-color-gray-30;
8 | border-radius: $ray-border-radius;
9 | display: inline-block;
10 | padding: 0.125rem $ray-spacing-xs;
11 | text-transform: uppercase;
12 | font-weight: 400;
13 | font-size: 0.75rem;
14 | line-height: 1.4;
15 | }
16 |
17 | a.#{$ray-class-prefix}tag {
18 | border-color: $ray-color-black;
19 | color: $ray-color-black;
20 |
21 | &:hover {
22 | border-color: $ray-color-blue-50;
23 | color: $ray-color-blue-50;
24 | text-decoration: none;
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es6: true,
5 | jest: true
6 | },
7 | extends: [
8 | 'airbnb-base',
9 | 'plugin:prettier/recommended',
10 | 'plugin:react/recommended'
11 | ],
12 | parser: 'babel-eslint',
13 | parserOptions: {
14 | ecmaVersion: 6,
15 | sourceType: 'module'
16 | },
17 | plugins: ['prettier'],
18 | rules: {
19 | 'prettier/prettier': 'error',
20 | 'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
21 | 'no-console': 'error',
22 | 'class-methods-use-this': 'off',
23 | 'no-underscore-dangle': [
24 | 'error',
25 | {
26 | allowAfterThis: true
27 | }
28 | ],
29 | 'no-use-before-define': 'off',
30 | 'no-script-url': 'off'
31 | }
32 | };
33 |
--------------------------------------------------------------------------------
/packages/docs-app/src/polyfills/toggle-class.js:
--------------------------------------------------------------------------------
1 | if (typeof DOMTokenList !== 'undefined') {
2 | const missingNativeDOMTokenListToggleForce = (() => {
3 | const elem = document.createElement('div');
4 | const randomClass = `_random_class_${Math.random()
5 | .toString(36)
6 | .slice(2)}`;
7 | elem.classList.toggle(randomClass, false);
8 | return elem.classList.contains(randomClass);
9 | })();
10 | if (missingNativeDOMTokenListToggleForce) {
11 | (() => {
12 | const origToggle = DOMTokenList.prototype.toggle;
13 | DOMTokenList.prototype.toggle = function toggleDOMTokenList(name, add) {
14 | return arguments.length < 2 || this.contains(name) === !add
15 | ? origToggle.call(this, name)
16 | : add;
17 | };
18 | })();
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Type/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import clsx from 'clsx';
4 |
5 | export default function Type({ Tag, style, className, ...rest }) {
6 | const classes = clsx(className, `ray-text--${style}`);
7 |
8 | return Documentation
17 | 22 |
19 | {story()}
20 |
21 | ));
22 |
23 | addParameters({
24 | options: {
25 | theme: {
26 | brandTitle: 'ray-core-react',
27 | brandImage: null
28 | },
29 | panelPosition: 'right',
30 | sortStoriesByKind: true
31 | }
32 | });
33 |
34 | configure(loadStories, module);
35 |
--------------------------------------------------------------------------------
/packages/docs-app/src/components/SpaceExample/space-example.scss:
--------------------------------------------------------------------------------
1 | .space-example-set {
2 | display: flex;
3 | margin-bottom: 4rem;
4 | }
5 |
6 | .space-example {
7 | margin-right: 5rem;
8 | }
9 |
10 | .space-example__box {
11 | border: 1px solid $ray-color-black;
12 | }
13 |
14 | .space-example__label {
15 | position: relative;
16 | background-color: $ray-color-blue-50;
17 | color: $ray-color-white;
18 | display: inline-block;
19 | line-height: 1.5;
20 | font-family: $ray-font-stack-mono;
21 | text-transform: uppercase;
22 | margin-top: 1rem;
23 | font-size: 0.625rem;
24 | padding: 2px;
25 |
26 | &::before {
27 | content: '';
28 | position: absolute;
29 | width: 100%;
30 | left: 0;
31 | top: -1rem;
32 | height: 1rem;
33 | border-left: 1px dashed $ray-color-black;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/packages/docs-app/README.md:
--------------------------------------------------------------------------------
1 | # Ray Docs
2 |
3 | This is the [Ray Design System website](http://ray.wework.com) which is built using GatsbyJS.
4 |
5 | ## Structure
6 |
7 | ```
8 | src
9 | ├── components
10 | ├── content
11 | ├── data
12 | ├── layouts
13 | ├── pages
14 | ├── styles
15 | ├── templates
16 | ```
17 |
18 | ## Development
19 |
20 | Install dependencies
21 |
22 | ```
23 | $ yarn
24 | ```
25 |
26 | Run dev environment
27 |
28 | ```
29 | $ yarn dev
30 | ```
31 |
32 | ## Build
33 |
34 | Runing the build commands generates all the files and places them in the `public` folder.
35 |
36 | Build
37 |
38 | ```
39 | $ yarn build
40 | ```
41 |
42 | ## Attribution
43 |
44 | This product includes software developed at
45 | IBM Corp (https://www.ibm.com), from the [carbon-website](https://github.com/carbon-design-system/carbon-website) repository.
46 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Checkbox/Checkbox.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 |
4 | export interface ICheckboxProps extends React.HTMLProps
20 |
27 |
30 |
31 | );
32 | };
33 |
34 | export default Checkbox;
35 |
--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | rules: {
3 | 'block-no-empty': true,
4 | 'color-no-invalid-hex': true,
5 | 'selector-pseudo-class-no-unknown': [
6 | true,
7 | {
8 | ignorePseudoClasses: ['export']
9 | }
10 | ],
11 | 'selector-pseudo-element-no-unknown': true,
12 | 'selector-type-no-unknown': true,
13 | 'selector-class-pattern':
14 | '^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$',
15 | 'no-eol-whitespace': true,
16 | 'max-empty-lines': 2,
17 | 'rule-empty-line-before': [
18 | 'always',
19 | {
20 | except: ['first-nested'],
21 | ignore: ['after-comment']
22 | }
23 | ],
24 | 'property-blacklist': ['transition']
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/docs/html/dropdown/rtl-dropdown--with-placeholder.html:
--------------------------------------------------------------------------------
1 |
2 |
23 |
--------------------------------------------------------------------------------
/packages/core/config/rollup.config.js:
--------------------------------------------------------------------------------
1 | const commonjs = require('rollup-plugin-commonjs');
2 | const resolve = require('rollup-plugin-node-resolve');
3 | const babel = require('rollup-plugin-babel');
4 | const replace = require('rollup-plugin-replace');
5 | const babelConfig = require('../babel.config');
6 |
7 | module.exports = {
8 | input: 'src/index.js',
9 | output: {
10 | name: 'Ray.Core',
11 | file: 'scripts/ray-core.js',
12 | format: 'iife',
13 | sourcemap: true
14 | },
15 | plugins: [
16 | resolve(),
17 | commonjs({
18 | include: /node_modules/
19 | }),
20 | babel({
21 | babelrc: false,
22 | plugins: babelConfig.plugins,
23 | presets: [['@babel/env', { modules: false }]]
24 | }),
25 | replace({
26 | 'process.env.NODE_ENV': JSON.stringify('production')
27 | })
28 | ]
29 | };
30 |
--------------------------------------------------------------------------------
/packages/core/src/components/text-field/constants.js:
--------------------------------------------------------------------------------
1 | export const CSS_CLASSES = {
2 | TEXT_FIELD: {
3 | BASE: 'ray-text-field',
4 | ACTIVE: 'ray-text-field--active',
5 | REQUIRED: 'ray-text-field--required',
6 | EL__INPUT: 'ray-text-field__input',
7 | EL__LABEL: 'ray-text-field__label',
8 | HAS_VALUE: 'ray-text-field--has-value'
9 | },
10 | TEXT_AREA: {
11 | BASE: 'ray-text-area',
12 | ACTIVE: 'ray-text-area--active',
13 | REQUIRED: 'ray-text-area--required',
14 | EL__INPUT: 'ray-text-area__input',
15 | EL__LABEL: 'ray-text-area__label',
16 | HAS_VALUE: 'ray-text-area--has-value'
17 | }
18 | };
19 |
20 | export const STRINGS = {
21 | TEXT_FIELD: {
22 | INIT_SELECTOR: `.${CSS_CLASSES.TEXT_FIELD.BASE}`
23 | },
24 | TEXT_AREA: {
25 | INIT_SELECTOR: `.${CSS_CLASSES.TEXT_AREA.BASE}`
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/packages/product-react/stories/radio.story.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import { Radio } from '../src/components/Radio';
5 |
6 | storiesOf('Core Comps | Radio', module)
7 | .add('Default', () => (
8 |
3 |
22 |
4 |
17 |
18 |
21 |
9 |
12 | ))
13 | .add('Pills', () => (
14 |
15 |
23 |
24 | ));
25 |
--------------------------------------------------------------------------------
/docs/components/fieldset.md:
--------------------------------------------------------------------------------
1 | ---
2 | label: Component
3 | title: Fieldset
4 | ---
5 |
6 |
19 | {story()}
20 |
21 | ));
22 |
23 | addDecorator(withA11y);
24 |
25 | addParameters({
26 | options: {
27 | theme: {
28 | brandTitle: 'ray-product-react',
29 | brandImage: null
30 | },
31 | panelPosition: 'right',
32 | sortStoriesByKind: true
33 | }
34 | });
35 |
36 | configure(loadStories, module);
37 |
--------------------------------------------------------------------------------
/docs/html/dropdown/dropdown--optgroups.html:
--------------------------------------------------------------------------------
1 |
2 |
24 |
--------------------------------------------------------------------------------
/docs/html/dropdown/dropdown--with-prepend.html:
--------------------------------------------------------------------------------
1 |
3 |
19 |
20 |
23 |
2 |
28 |
--------------------------------------------------------------------------------
/docs/foundations/breakpoints.md:
--------------------------------------------------------------------------------
1 | ---
2 | label: Guidelines
3 | title: Breakpoints
4 | ---
5 |
6 |
3 |
5 | 🇺🇸
4 |
6 |
23 |
26 |
27 |
2 |
26 |
27 |
--------------------------------------------------------------------------------
/docs/html/radio/radio.html:
--------------------------------------------------------------------------------
1 |
37 |
--------------------------------------------------------------------------------
/packages/core/src/components/tabs/_tabs.scss:
--------------------------------------------------------------------------------
1 | @import '../../global/variables';
2 | @import '../../global/typography';
3 | @import '../../global/mixins/exports';
4 |
5 | $tabs-border-size: 1px;
6 |
7 | @include exports('ray-tabs') {
8 | .#{$ray-class-prefix}tabs {
9 | border-bottom: $tabs-border-size solid $ray-color-blue-50;
10 | display: flex;
11 |
12 | &__item {
13 | @extend .#{$ray-class-prefix}text--body-large;
14 | display: block;
15 | cursor: pointer;
16 | color: $ray-color-blue-50;
17 | text-align: center;
18 | min-width: 200px;
19 | padding-top: 1rem;
20 | padding-bottom: 1rem;
21 | margin-bottom: -$tabs-border-size !important;
22 |
23 | &:hover {
24 | background-color: $ray-color-blue-50;
25 | border-bottom: 1px solid $ray-color-blue-50;
26 | }
27 |
28 | &--active {
29 | border-bottom: 1px solid $ray-color-blue-50;
30 | }
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/docs-app/src/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import '../../../core/src/ray-core.scss';
2 | @import '../../../core/src/ray-debug.scss';
3 |
4 | $font-family: 'Apercu', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
5 | $transition--base: 0.3s;
6 | $code-bg: #282a36;
7 | $code-border: transparent;
8 | $top-nav-height: 4rem;
9 |
10 | @import 'mixins';
11 | @import 'page';
12 |
13 | @import '../components/404/404.scss';
14 | @import '../components/markdown/markdown.scss';
15 | @import '../components/markdown/image-grid.scss';
16 | @import '../components/PageHeader/page-header.scss';
17 | @import '../components/TopNav/top-nav.scss';
18 | @import '../components/SideNav/side-nav.scss';
19 | @import '../components/ComponentCode/component-code.scss';
20 | @import '../components/CodeExample/code-example.scss';
21 | @import '../components/CodeSnippet/code-snippet.scss';
22 | @import '../components/ColorTable/color-table.scss';
23 | @import '../components/SpaceExample/space-example.scss';
24 | @import 'syntax';
25 |
--------------------------------------------------------------------------------
/packages/core/src/global/_base.scss:
--------------------------------------------------------------------------------
1 | @import './mixins/exports';
2 |
3 | @include exports('ray-base') {
4 | html {
5 | font-size: $ray-base-font-size;
6 | }
7 |
8 | body {
9 | font-family: $ray-font-stack-sans-serif;
10 | color: $ray-color-text-dark;
11 | -webkit-text-size-adjust: 100%;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | text-rendering: optimizeLegibility;
15 | font-weight: 400;
16 | font-size: 1rem;
17 | line-height: $ray-base-line-height;
18 | }
19 |
20 | * {
21 | box-sizing: border-box;
22 | }
23 |
24 | [disabled] {
25 | cursor: not-allowed;
26 | }
27 |
28 | a {
29 | text-decoration: none;
30 | color: $ray-color-blue-50;
31 |
32 | &:hover,
33 | &:focus {
34 | text-decoration: underline;
35 | }
36 |
37 | &.no-underline {
38 | &:hover,
39 | &:focus {
40 | text-decoration: none !important;
41 | }
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/core/src/ray-core.scss:
--------------------------------------------------------------------------------
1 | @import './global/css-reset';
2 | @import './global/css-normalize';
3 |
4 | @import './global/mixins/breakpoints';
5 |
6 | @import './global/colors';
7 | @import './global/variables';
8 | @import './global/base';
9 | @import './global/typography';
10 | @import './global/material-grid/mdc-layout-grid';
11 |
12 | @import './components/card/card';
13 | @import './components/chip/chip';
14 | @import './components/button/button';
15 | @import './components/breadcrumb/breadcrumb';
16 | @import './components/radio-checkbox/radio-checkbox';
17 | @import './components/radio-pill/radio-pill';
18 | @import './components/form-item/form-item';
19 | @import './components/fieldset/fieldset';
20 | @import './components/text-field/text-field';
21 | @import './components/select/select';
22 | @import './components/dropdown/dropdown';
23 | @import './components/image/image';
24 | @import './components/table/table';
25 | @import './components/tabs/tabs';
26 | @import './components/tag/tag';
27 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Typography/Typography.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React, { ReactHTML, ReactNode } from 'react';
3 |
4 | export type ITypographyProps = {
5 | as?: keyof ReactHTML;
6 | children?: ReactNode;
7 | className?: string;
8 | style?:
9 | | 'h1'
10 | | 'h2'
11 | | 'h3'
12 | | 'h4'
13 | | 'h5'
14 | | 'h6'
15 | | 'body'
16 | | 'body-large'
17 | | 'body-small'
18 | | 'body-x-small'
19 | | 'display-1'
20 | | 'display-2';
21 | } & typeof defaultProps;
22 |
23 | export const Typography = ({
24 | as: Tag,
25 | children,
26 | style,
27 | className,
28 | ...rest
29 | }: ITypographyProps) => {
30 | const classes = clsx(className, `ray-text--${style}`);
31 | return (
32 |
24 | {story()}
25 |
26 | ));
27 |
28 | addParameters({
29 | options: {
30 | theme: {
31 | brandTitle: 'Ray',
32 | brandImage: './logo.svg'
33 | },
34 | showPanel: false,
35 | panelPosition: 'right',
36 | sortStoriesByKind: true
37 | }
38 | });
39 |
40 | function loadStories() {
41 | req.keys().forEach(filename => req(filename));
42 | }
43 |
--------------------------------------------------------------------------------
/packages/docs-app/src/components/CodeSnippet/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Prism from 'prismjs';
4 |
5 | function highlightCode(code, language) {
6 | try {
7 | return Prism.highlight(code, Prism.languages[language], language);
8 | } catch {
9 | return code;
10 | }
11 | }
12 |
13 | /* eslint-disable class-methods-use-this */
14 | class CodeSnippet extends React.Component {
15 | static propTypes = {
16 | children: PropTypes.any
17 | };
18 |
19 | render() {
20 | const code = this.props.children[0].props.children[0];
21 | // eslint-disable-next-line react/prop-types
22 | const { className } = this.props.children[0].props;
23 | const language = className.replace('language-', '');
24 | return (
25 |
29 | );
30 | }
31 | }
32 |
33 | export default CodeSnippet;
34 |
--------------------------------------------------------------------------------
/docs/html/dropdown/rtl-dropdown--optgroups.html:
--------------------------------------------------------------------------------
1 |
2 |
26 |
--------------------------------------------------------------------------------
/packages/core-react/config/rollup.config.js:
--------------------------------------------------------------------------------
1 | const commonjs = require('rollup-plugin-commonjs');
2 | const resolve = require('rollup-plugin-node-resolve');
3 | const babel = require('rollup-plugin-babel');
4 | const replace = require('rollup-plugin-replace');
5 | const babelConfig = require('../babel.config');
6 |
7 | module.exports = {
8 | input: 'src/index.js',
9 | output: {
10 | name: 'Ray.CoreReact',
11 | file: 'dist/index.bundle.js',
12 | format: 'umd',
13 | sourcemap: true,
14 | globals: {
15 | react: 'React',
16 | clsx: 'clsx'
17 | }
18 | },
19 | plugins: [
20 | resolve(),
21 | commonjs({
22 | include: /node_modules/
23 | }),
24 | babel({
25 | babelrc: false,
26 | plugins: babelConfig.plugins,
27 | presets: [['@babel/env', { modules: false }]]
28 | }),
29 | replace({
30 | 'process.env.NODE_ENV': JSON.stringify('production')
31 | })
32 | ],
33 | // peer dependencies
34 | external: ['react', 'react-dom']
35 | };
36 |
--------------------------------------------------------------------------------
/packages/core/src/global/mixins/_breakpoints.scss:
--------------------------------------------------------------------------------
1 | @import '../variables';
2 |
3 | @function errorMessage($breakpointName) {
4 | @return 'No value found for `#{$breakpointName}`. ' +
5 | 'Available breakpoints are: #{map-keys($ray-layout-grid-breakpoints)}.';
6 | }
7 |
8 | @mixin ray-breakpoint($minBreakpoint, $maxBreakpoint: false) {
9 | @if map-has-key($ray-layout-grid-breakpoints, $minBreakpoint) {
10 | @if $maxBreakpoint {
11 | @if map-has-key($ray-layout-grid-breakpoints, $maxBreakpoint) {
12 | @media (min-width: map-get($ray-layout-grid-breakpoints, $minBreakpoint)) and (max-width: map-get($ray-layout-grid-breakpoints, $maxBreakpoint) - 0.5) {
13 | @content;
14 | }
15 | } @else {
16 | @warn errorMessage($maxBreakpoint);
17 | }
18 | } @else {
19 | @media (min-width: map-get($ray-layout-grid-breakpoints, $minBreakpoint)) {
20 | @content;
21 | }
22 | }
23 | } @else {
24 | @warn errorMessage($minBreakpoint);
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/docs/foundations/fonts.md:
--------------------------------------------------------------------------------
1 | ---
2 | label: Guidelines
3 | title: Fonts
4 | ---
5 |
6 |
3 |
25 |
4 |
20 |
21 |
24 |
2 |
30 |
--------------------------------------------------------------------------------
/docs/html/radio/rtl-radio.html:
--------------------------------------------------------------------------------
1 |
3 |
29 |
4 |
6 | 🇺🇸
5 |
7 |
24 |
27 |
28 |
2 |
34 |
35 |
--------------------------------------------------------------------------------
/packages/core/src/components/table/_table.scss:
--------------------------------------------------------------------------------
1 | @import '../../global/variables';
2 | @import '../../global/mixins/exports';
3 |
4 | @include exports('ray-table') {
5 | .#{$ray-class-prefix}table {
6 | width: 100%;
7 | border-collapse: collapse;
8 |
9 | thead {
10 | tr {
11 | border-bottom: 1px solid $ray-color-blue-50;
12 | }
13 | }
14 |
15 | th {
16 | font-size: 12px;
17 | font-weight: 400;
18 | font-family: $ray-font-stack-mono;
19 | color: $ray-color-gray-60;
20 | text-align: left;
21 | text-transform: uppercase;
22 | padding: 1rem 0;
23 |
24 | [dir='rtl'] & {
25 | text-align: right;
26 | }
27 |
28 | &:not(:last-child) {
29 | padding-right: 1rem;
30 | }
31 | }
32 |
33 | tr {
34 | border-bottom: 1px solid $ray-color-gray-10;
35 | }
36 |
37 | td {
38 | padding: 1rem 0;
39 |
40 | &:not(:last-child) {
41 | padding-right: 1rem;
42 | }
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Button/button.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 |
4 | import Button from '.';
5 |
6 | describe('Button', () => {
7 | test('it renders a primary button', () => {
8 | const wrapper = mount();
9 | expect(wrapper.find('.ray-button--primary')).toHaveLength(1);
10 | });
11 |
12 | test('it supports a custom class', () => {
13 | const wrapper = mount(
14 |
15 | );
16 | expect(wrapper.find('.ray-button.some-custom-class')).toHaveLength(1);
17 | });
18 |
19 | test('it supports type & variant attributes', () => {
20 | const wrapper = mount(
21 |
24 | );
25 | const buttonWrapper = wrapper.find(Button);
26 | expect(buttonWrapper.props().type).toEqual('submit');
27 | expect(buttonWrapper.props().variant).toEqual('secondary');
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/docs/html/button/button--secondary.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
31 |
--------------------------------------------------------------------------------
/docs/html/button/button--tertiary.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
18 |
32 |
--------------------------------------------------------------------------------
/docs/html/checkbox/checkbox.html:
--------------------------------------------------------------------------------
1 |
37 |
--------------------------------------------------------------------------------
/docs/html/button/button--primary.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
19 |
33 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Image/image.test.tsx:
--------------------------------------------------------------------------------
1 | import Enzyme from 'enzyme';
2 | import React from 'react';
3 |
4 | import Image from './Image';
5 |
6 | describe('Image', () => {
7 | test('it renders an image', () => {
8 | const wrapper = Enzyme.mount(
9 |
2 |
34 |
35 |
--------------------------------------------------------------------------------
/docs/html/typography/typography-running-text.html:
--------------------------------------------------------------------------------
1 |
2 |
31 |
--------------------------------------------------------------------------------
/docs/html/button/button--primary--dark.html:
--------------------------------------------------------------------------------
1 |
4 |
7 |
21 |
35 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Radio/Radio.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 |
4 | export interface IRadio extends React.HTMLPropsTitle
3 |4 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel quia magnam at 5 | eligendi, incidunt amet eaque distinctio veniam atque, beatae laudantium 6 | vitae autem molestias repellendus exercitationem in inventore accusamus 7 | eveniet. 8 |
9 | 10 |Title 2
11 |-
12 |
- Item the
first.
13 | - Item the second. 14 |
- Item the third. 15 |
Title 3
18 | 30 |
30 |
37 |
43 |
44 | );
45 | };
46 | Radio.defaultProps = {
47 | pill: false
48 | };
49 | export default Radio;
50 |
--------------------------------------------------------------------------------
/docs/html/button/button--danger.html:
--------------------------------------------------------------------------------
1 |
4 |
7 |
21 |
35 |
--------------------------------------------------------------------------------
/docs/html/button/rtl-button--secondary.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
32 |
33 |
--------------------------------------------------------------------------------
/docs/html/button/rtl-button--tertiary.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
19 |
33 |
34 |
--------------------------------------------------------------------------------
/docs/html/button/button--secondary--dark.html:
--------------------------------------------------------------------------------
1 |
4 |
7 |
21 |
35 |
--------------------------------------------------------------------------------
/docs/html/button/rtl-button--primary.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
20 |
34 |
35 |
--------------------------------------------------------------------------------
/docs/html/button/button--tertiary--dark.html:
--------------------------------------------------------------------------------
1 |
4 |
7 |
21 |
22 |
36 |
--------------------------------------------------------------------------------
/docs/html/radio/radio-group.html:
--------------------------------------------------------------------------------
1 |
39 |
--------------------------------------------------------------------------------
/docs/html/select/select-with-icon.html:
--------------------------------------------------------------------------------
1 |
2 |
22 |
23 |
--------------------------------------------------------------------------------
/docs/html/text-field/text-field-with-prepend.html:
--------------------------------------------------------------------------------
1 |
2 |
25 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Grid/Cell.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import clsx from 'clsx';
4 |
5 | const BREAKPOINTS = ['phone', 'tablet', 'desktop'];
6 |
7 | export default function Cell({ className, push, span, ...props }) {
8 | const breakpointClasses = BREAKPOINTS.reduce((memo, breakpointName) => {
9 | const spanKey = `span-${breakpointName}`;
10 | if (props[spanKey]) {
11 | memo.push(`ray-grid__cell--span-${props[spanKey]}-${breakpointName}`);
12 | }
13 |
14 | const pushKey = `push-${breakpointName}`;
15 | if (props[pushKey]) {
16 | memo.push(`ray-grid__cell--push-${props[pushKey]}-${breakpointName}`);
17 | }
18 |
19 | return memo;
20 | }, []);
21 |
22 | const classes = clsx(
23 | 'ray-grid__cell',
24 | {
25 | [`ray-grid__cell--span-${span}`]: span,
26 | [`ray-grid__cell--push-${push}`]: push
27 | },
28 | breakpointClasses,
29 | className
30 | );
31 |
32 | return ;
33 | }
34 |
35 | Cell.propTypes = {
36 | className: PropTypes.string,
37 | span: PropTypes.number,
38 | push: PropTypes.number
39 | };
40 |
--------------------------------------------------------------------------------
/docs/foundations/spacing.md:
--------------------------------------------------------------------------------
1 | ---
2 | label: Foundations
3 | title: Spacing
4 | ---
5 |
6 |
3 |
24 |
4 |
11 |
12 |
13 |
19 |
22 |
23 |
11 |
12 |
23 |
24 |
25 |
26 | #### Less common building blocks
27 |
28 |
29 |
30 |
37 |
38 | #### Least common building blocks
39 |
40 |
41 |
42 |
31 | {children}
32 |
33 | );
34 | });
35 |
36 | Button.propTypes = {
37 | variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
38 | compact: PropTypes.bool,
39 | danger: PropTypes.bool,
40 | children: PropTypes.node,
41 | Tag: PropTypes.oneOf(['button', 'a']),
42 | disabled: PropTypes.bool,
43 | className: PropTypes.string
44 | };
45 |
46 | Button.defaultProps = {
47 | Tag: 'button',
48 | variant: 'primary',
49 | compact: false,
50 | danger: false
51 | };
52 |
53 | Button.displayName = 'Button';
54 |
55 | export default Button;
56 |
--------------------------------------------------------------------------------
/packages/product-react/config/rollup.config.js:
--------------------------------------------------------------------------------
1 | const typescript = require('rollup-plugin-typescript2');
2 | const commonjs = require('rollup-plugin-commonjs');
3 | const resolve = require('rollup-plugin-node-resolve');
4 | const babel = require('rollup-plugin-babel');
5 | const replace = require('rollup-plugin-replace');
6 | const postcss = require('rollup-plugin-postcss');
7 | const babelConfig = require('../babel.config');
8 |
9 | const pkg = require('../package.json');
10 |
11 | module.exports = {
12 | input: 'src/index.ts',
13 | output: {
14 | name: 'Ray.ProductReact',
15 | file: 'dist/index.bundle.js',
16 | format: 'umd',
17 | sourcemap: true,
18 | globals: {
19 | react: 'React',
20 | clsx: 'clsx'
21 | }
22 | },
23 | plugins: [
24 | typescript(),
25 | resolve(),
26 | postcss(),
27 | commonjs({
28 | include: '/node_modules/'
29 | }),
30 | babel({
31 | babelrc: false,
32 | plugins: babelConfig.plugins,
33 | presets: [['@babel/env', { modules: false }]]
34 | }),
35 | replace({
36 | 'process.env.NODE_ENV': JSON.stringify('production')
37 | })
38 | ],
39 | // peer dependencies
40 | external: [
41 | ...Object.keys(pkg.dependencies),
42 | ...Object.keys(pkg.peerDependencies)
43 | ]
44 | };
45 |
--------------------------------------------------------------------------------
/packages/core/src/components/breadcrumb/_breadcrumb.scss:
--------------------------------------------------------------------------------
1 | @import '../../global/mixins/exports';
2 | @import '../../global/variables';
3 | @import '../../global/typography';
4 |
5 | @include exports('ray-breadcrumb') {
6 | .#{$ray-class-prefix}breadcrumbs {
7 | font-family: $ray-font-stack-mono;
8 | text-transform: uppercase;
9 | font-size: 0.75rem;
10 | white-space: nowrap;
11 | overflow-x: auto;
12 | display: flex;
13 | }
14 |
15 | .#{$ray-class-prefix}breadcrumb {
16 | color: $ray-color-text-medium;
17 | display: flex;
18 | line-height: 1.5;
19 |
20 | &:not(:last-child) {
21 | margin-right: 0.5rem;
22 |
23 | [dir='rtl'] & {
24 | margin-right: 0;
25 | margin-left: 0.5rem;
26 | }
27 |
28 | &::after {
29 | margin-left: 0.5rem;
30 | content: '➝';
31 | font-size: 1.25rem;
32 | position: relative;
33 | top: -6px;
34 | line-height: 1.5;
35 |
36 | [dir='rtl'] & {
37 | margin-right: 0.5rem;
38 | margin-left: 0;
39 | transform: scaleX(-1);
40 | }
41 | }
42 | }
43 |
44 | a {
45 | color: inherit;
46 |
47 | &:hover,
48 | &:focus {
49 | text-decoration: underline;
50 | }
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/packages/product-react/stories/Container.story.tsx:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/react';
2 | import * as React from 'react';
3 | import { Container } from '../src/components/Container';
4 |
5 | storiesOf('Core Comps | Container', module)
6 | .add('default', () => {
7 | return This is in a container ;
8 | })
9 | .add('justify left', () => {
10 | return (
11 | This is in a container justify left
12 | );
13 | })
14 | .add('justify center', () => {
15 | return (
16 |
17 | This is in a container justify center
18 |
19 | );
20 | })
21 | .add('justify right', () => {
22 | return (
23 |
24 | This is in a container justify right
25 |
26 | );
27 | })
28 | .add('align left', () => {
29 | return (
30 | This is in a container align left
31 | );
32 | })
33 | .add('align right', () => {
34 | return (
35 | This is in a container align right
36 | );
37 | });
38 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ray – WeWork Design System
2 |
3 | [](https://circleci.com/gh/wework/ray) [](http://commitizen.github.io/cz-cli/) [](https://coveralls.io/github/wework/ray?branch=master) [](https://www.npmjs.com/package/@wework/ray-core) [](#contributors)
4 |
5 | Resources for building interfaces with WeWork's design system. [npm package](https://www.npmjs.com/package/@wework/ray-core)
6 |
7 | ## Getting Started
8 |
9 | See the [getting started docs](https://ray.wework.com/getting-started/).
10 |
11 | ## Development
12 |
13 | See https://ray.wework.com/contributing for documentation.
14 |
15 | ## [Release](https://github.com/wework/ray/releases) (WeWork staff)
16 |
17 | See [RELEASING.md](./RELEASING.md) for documentation.
18 |
19 | ## Ownership
20 |
21 | This repository is maintained by the Consumer Web team of Product Engineering at WeWork.
22 |
23 | Reach out to the team at [ray@wework.com](mailto:ray@wework.com) for questions or concerns.
24 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Tabs/TabView.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { IContext, TabContext } from './context';
3 |
4 | import './TabView.scss';
5 |
6 | interface IProps {
7 | children: React.ReactNode;
8 | id: string;
9 | }
10 |
11 | export const TabView = (props: IProps) => {
12 | const tabContext = React.useContext(TabContext);
13 |
14 | if (tabContext === null) {
15 | return null;
16 | }
17 |
18 | const { selectedTab } = validateInputs(props, tabContext);
19 |
20 | if (selectedTab !== props.id) {
21 | return null;
22 | }
23 |
24 | return (
25 | ;
7 |
8 | beforeEach(() => {
9 | component = mount(",
16 | "Titus Wormer ",
17 | "Ciaran Wood ",
18 | "Juho Vepsalainen ",
19 | "Jason Trill ",
20 | "Tsuyusato Kitsune ",
21 | "Jeremy Stucki ",
22 | "rhysd "
23 | ],
24 | "dependencies": {
25 | "@mapbox/hast-util-table-cell-style": "^0.1.3",
26 | "has": "^1.0.1",
27 | "hast-to-hyperscript": "^7.0.0"
28 | },
29 | "devDependencies": {
30 | "hastscript": "^3.1.0",
31 | "react": "^16.2.0",
32 | "react-dom": "^16.2.0",
33 | "remark": "^10.0.1",
34 | "remark-cli": "^4.0.0",
35 | "remark-preset-wooorm": "^3.0.0",
36 | "unified": "^6.1.6",
37 | "unist-builder": "^1.0.2"
38 | },
39 | "files": [
40 | "index.js"
41 | ],
42 | "scripts": {
43 | "build-md": "remark . -qfo"
44 | },
45 | "remarkConfig": {
46 | "plugins": [
47 | "preset-wooorm"
48 | ]
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/docs/components/card.md:
--------------------------------------------------------------------------------
1 | ---
2 | label: Component
3 | title: Card
4 | ---
5 |
6 | Cards are a unit of content, they typically have an image, a heading, and a small amount of copy. They are often used as links.
7 |
8 |
13 |
14 |
15 |
20 |
21 |
22 |
27 |
28 |
29 |
34 |
35 |
36 |
41 |
42 |
43 |
48 |
49 |
50 | ## Modifiers
51 |
52 | Use these modifiers with `.ray-card` class.
53 |
54 | | Selector | Description |
55 | | ----------------- | ------------------------------------------- |
56 | | `.ray-card--link` | Selector for applying link and hover styles |
57 | | `.ray-card--row` | Selector for applying row direction |
58 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Image/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import PropTypes from 'prop-types';
4 |
5 | function ratioToPercentageString(ratio) {
6 | return `${100 / ratio}%`;
7 | }
8 |
9 | const ASPECT_RATIOS_MAP = {
10 | '16by9': ratioToPercentageString(16 / 9),
11 | '1by1': ratioToPercentageString(1),
12 | '3by4': ratioToPercentageString(3 / 4),
13 | '4by3': ratioToPercentageString(4 / 3),
14 | cinema: ratioToPercentageString(2.4)
15 | };
16 |
17 | const ASPECT_RATIOS = Object.keys(ASPECT_RATIOS_MAP);
18 |
19 | export default function Image({ className, src, aspect, bg, ...rest }) {
20 | if (bg) {
21 | return (
22 |
36 | );
37 | }
38 |
39 | return (
40 | & {
5 | id?: string;
6 | placeholder?: string;
7 | disabled?: boolean;
8 | required?: boolean;
9 | compact?: boolean;
10 | value?: string;
11 | error?: string;
12 | label?: React.ReactNode;
13 | className?: string;
14 | };
15 |
16 | export const TextArea: React.FC = ({
17 | id,
18 | placeholder,
19 | disabled,
20 | required,
21 | value,
22 | error,
23 | compact,
24 | label,
25 | className,
26 | ...rest
27 | }) => {
28 | const wrapperClass = clsx(
29 | 'ray-text-area',
30 | {
31 | 'ray-text-area--has-value': value,
32 | 'ray-text-area--error': error,
33 | 'ray-text-area--disabled': disabled,
34 | 'ray-text-area--required': required,
35 | 'ray-text-area--compact': compact
36 | },
37 | className
38 | );
39 | return (
40 |
10 |
11 | | hello world |
12 |
13 |
14 | );
15 | expect(wrapper.html()).toBe(
16 | ''
17 | );
18 | });
19 |
20 | test('it renders special cells', () => {
21 | const wrapper = mount(
22 |
23 | hello world
24 | |
25 | );
26 | expect(wrapper.html()).toBe(
27 | '
34 | hello world
35 | |
36 | );
37 | expect(wrapper.html()).toBe(
38 | '
2 |
3 |
17 |
18 |
19 |
33 |
34 |
37 |
38 |
--------------------------------------------------------------------------------
/docs/html/select/rtl-select-with-icon.html:
--------------------------------------------------------------------------------
1 |
2 |
25 |
--------------------------------------------------------------------------------
/docs/html/button/rtl-button--danger.html:
--------------------------------------------------------------------------------
1 |
3 |
23 |
24 |
2 |
5 |
8 |
22 |
36 |
37 |
--------------------------------------------------------------------------------
/docs/html/text-field/rtl-text-field-with-prepend.html:
--------------------------------------------------------------------------------
1 |
2 |
27 |
--------------------------------------------------------------------------------
/docs/html/radio/rtl-radio-group.html:
--------------------------------------------------------------------------------
1 |
3 |
26 |
4 |
25 |
5 |
12 |
13 |
14 |
20 |
23 |
24 |
2 |
40 |
41 |
--------------------------------------------------------------------------------
/packages/core/src/global/_colors.scss:
--------------------------------------------------------------------------------
1 | $ray-color-white: #ffffff;
2 | $ray-color-black: #000000;
3 |
4 | $ray-color-blue-03: hsl(240, 100%, 100% - 03%);
5 | $ray-color-blue-10: hsl(240, 100%, 100% - 10%);
6 | $ray-color-blue-20: hsl(240, 100%, 100% - 20%);
7 | $ray-color-blue-50: hsl(240, 100%, 100% - 50%);
8 | $ray-color-blue-60: hsl(240, 100%, 100% - 60%);
9 | $ray-color-blue-70: hsl(240, 100%, 100% - 70%);
10 |
11 | $ray-color-yellow-50: hsl(50, 100%, 100% - 50%);
12 |
13 | $ray-color-red-10: hsl(0, 100%, 100% - 10%);
14 | $ray-color-red-20: hsl(0, 100%, 100% - 20%);
15 | $ray-color-red-50: hsl(0, 100%, 100% - 50%);
16 | $ray-color-red-60: hsl(0, 100%, 100% - 60%);
17 | $ray-color-red-70: hsl(0, 100%, 100% - 70%);
18 |
19 | $ray-color-green-10: hsl(132, 76%, 100% - 10%);
20 | $ray-color-green-20: hsl(132, 76%, 100% - 20%);
21 | $ray-color-green-70: hsl(132, 76%, 100% - 70%);
22 | $ray-color-green-80: hsl(132, 76%, 100% - 80%);
23 | $ray-color-green-90: hsl(132, 76%, 100% - 90%);
24 |
25 | $ray-color-gray-03: hsl(0, 0%, 100% - 03%);
26 | $ray-color-gray-10: hsl(0, 0%, 100% - 11%);
27 | $ray-color-gray-30: hsl(0, 0%, 100% - 30%);
28 | $ray-color-gray-31: hsl(0, 0%, 100% - 31%);
29 | $ray-color-gray-50: hsl(0, 0%, 100% - 50%);
30 | $ray-color-gray-60: hsl(0, 0%, 100% - 60%);
31 |
--------------------------------------------------------------------------------
/packages/rehype-react/LICENSE:
--------------------------------------------------------------------------------
1 | (The MIT License)
2 |
3 | Copyright (c) 2019 WeWork Companies Inc.
4 | Copyright (c) 2016 rhysd
5 | Copyright (c) 2015 Mapbox
6 | Copyright (c) 2015 Titus Wormer
7 |
8 | Permission is hereby granted, free of charge, to any person obtaining a copy
9 | of this software and associated documentation files (the "Software"), to deal
10 | in the Software without restriction, including without limitation the rights
11 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
12 | copies of the Software, and to permit persons to whom the Software is
13 | furnished to do so, subject to the following conditions:
14 |
15 | The above copyright notice and this permission notice shall be included in
16 | all copies or substantial portions of the Software.
17 |
18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
21 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
22 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
23 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
24 | THE SOFTWARE.
25 |
--------------------------------------------------------------------------------
/docs/html/select/select-with-prepend.html:
--------------------------------------------------------------------------------
1 |
2 |
27 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Button/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import PropTypes from 'prop-types';
4 |
5 | const Button = React.forwardRef((props, ref) => {
6 | const {
7 | Tag,
8 | children,
9 | variant,
10 | compact,
11 | danger,
12 | disabled,
13 | className,
14 | ...rest
15 | } = props;
16 | return (
17 |
3 |
26 |
4 |
11 |
12 |
13 |
20 |
21 |
24 |
25 |
33 | {props.children}
34 |
35 | );
36 | };
37 |
38 | TabView.displayName = 'TabView';
39 |
40 | function validateInputs(props: IProps, context: IContext) {
41 | const { tabs } = context;
42 | const possibleIds = tabs.map(({ id }) => id);
43 |
44 | if (!possibleIds.includes(props.id)) {
45 | const possibleIdsString = possibleIds.join(', ');
46 |
47 | throw new Error(
48 | `Invalid id passed to TabView. Valid id's include: ${possibleIdsString}`,
49 | );
50 | }
51 |
52 | return context;
53 | }
54 |
--------------------------------------------------------------------------------
/packages/docs-app/src/components/TopNav/top-nav.scss:
--------------------------------------------------------------------------------
1 | .top-nav {
2 | background: #fff;
3 | border-bottom: 1px solid $ray-color-gray-10;
4 | top: 0;
5 | width: 100%;
6 | z-index: 9999;
7 | position: fixed;
8 | }
9 |
10 | .top-nav__inner {
11 | display: flex;
12 | align-items: center;
13 | flex-wrap: wrap;
14 | padding-top: 0;
15 | padding-bottom: 0;
16 | height: $top-nav-height;
17 | }
18 |
19 | .top-nav__heading {
20 | @extend .ray-text--h3;
21 | display: inline-block;
22 | text-decoration: none;
23 | line-height: 1.2;
24 | margin: 0 auto 0 0;
25 | white-space: nowrap;
26 | color: inherit !important;
27 |
28 | &:hover {
29 | color: inherit;
30 | text-decoration: none;
31 | }
32 |
33 | &:focus {
34 | outline: none;
35 | text-decoration: none;
36 | color: $ray-color-blue-60;
37 | }
38 |
39 | .top-nav__version {
40 | font-size: 1rem;
41 | color: $ray-color-text-light;
42 | font-weight: 400;
43 | }
44 | }
45 |
46 | .top-nav__feedback {
47 | @include ray-breakpoint(phone, desktop) {
48 | display: none;
49 | }
50 | }
51 |
52 | .top-nav__mobile-toggle {
53 | margin-right: 0.5rem;
54 | display: inline-block;
55 |
56 | &:hover,
57 | &:focus {
58 | text-decoration: none;
59 | }
60 |
61 | @include ray-breakpoint(desktop) {
62 | display: none;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Grid/Grid.test.tsx:
--------------------------------------------------------------------------------
1 | import { mount, ReactWrapper } from 'enzyme';
2 | import * as React from 'react';
3 | import { Grid } from './Grid';
4 |
5 | describe('Grid', () => {
6 | let component: ReactWrapper
2 |
29 |
--------------------------------------------------------------------------------
/packages/rehype-react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rehype-react",
3 | "description": "Compile Hast tree to React with remark",
4 | "version": "1.9.0",
5 | "private": true,
6 | "keywords": [
7 | "compile",
8 | "html",
9 | "markdown",
10 | "remark",
11 | "stringify"
12 | ],
13 | "license": "MIT",
14 | "contributors": [
15 | "Tom MacWright
3 |
28 |
4 |
27 |
5 |
12 |
13 |
14 |
21 |
22 |
25 |
26 |
45 | 
46 |
47 | );
48 | }
49 |
50 | Image.propTypes = {
51 | className: PropTypes.string,
52 | src: PropTypes.string,
53 | aspect: PropTypes.oneOf(ASPECT_RATIOS),
54 | bg: PropTypes.bool
55 | };
56 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/Avatar/Avatar.scss:
--------------------------------------------------------------------------------
1 | $avatar-background-color: #e6e6e6;
2 | $avatar-fill-color: #b3b3b3;
3 | $avatar-iconSize: (
4 | small: 32px,
5 | medium: 40px,
6 | large: 148px
7 | );
8 |
9 | @mixin avatar-size($size) {
10 | height: map-get($avatar-iconSize, $size);
11 | width: map-get($avatar-iconSize, $size);
12 | }
13 |
14 | .lucia-avatar {
15 | border-radius: 50%;
16 | display: inline-block;
17 | position: relative;
18 |
19 | img {
20 | border-radius: 50%;
21 | max-height: 100%;
22 | max-width: 100%;
23 | }
24 |
25 | span {
26 | float: left;
27 | left: 50%;
28 | position: relative;
29 | text-transform: uppercase;
30 | top: 50%;
31 | transform: translate(-50%, -50%);
32 | }
33 |
34 | &--small {
35 | @include avatar-size(small);
36 | }
37 |
38 | &--medium {
39 | @include avatar-size(medium);
40 | }
41 |
42 | &--large {
43 | @include avatar-size(large);
44 | }
45 | }
46 |
47 | .lucia-no-avatar {
48 | background-color: $avatar-background-color;
49 | }
50 |
51 | .lucia-avatar--action {
52 | cursor: pointer;
53 | height: 100%;
54 | position: absolute;
55 | width: 100%;
56 |
57 | svg {
58 | background-color: $avatar-fill-color;
59 | border-radius: 50%;
60 | bottom: 0;
61 | fill: $avatar-fill-color;
62 | height: 48px;
63 | padding: 8px;
64 | position: absolute;
65 | right: 0;
66 | width: 48px;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/packages/product-react/src/components/TextArea/TextArea.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 |
4 | type TextAreaProps = React.HTMLProps
41 |
49 | {label && (
50 |
53 | )}
54 |
55 | );
56 | };
57 |
58 | export default TextArea;
59 |
--------------------------------------------------------------------------------
/packages/core-react/src/components/Grid/grid.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 |
4 | import { Container, Grid, Cell } from '.';
5 |
6 | describe('Grid', () => {
7 | test('it renders a grid', () => {
8 | const wrapper = mount(
9 | hello world
hello world
'
28 | );
29 | });
30 |
31 | test('it renders a cell with breakpoint settings', () => {
32 | const wrapper = mount(
33 | hello world
'
39 | );
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/docs/html/button/rtl-button--compact.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
22 |
25 |
28 |
29 |
43 |
44 |
--------------------------------------------------------------------------------
/packages/rehype-react/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file.
4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5 |
6 | # 1.9.0 (2019-08-27)
7 |
8 |
9 | ### Bug Fixes
10 |
11 | * typography running text margins ([#43](https://github.com/wework/ray/issues/43)) ([fef06de](https://github.com/wework/ray/commit/fef06de))
12 |
13 |
14 |
15 |
16 |
17 | ## [3.1.5](https://github.com/wework/ray/compare/rehype-react@3.1.4...rehype-react@3.1.5) (2019-05-03)
18 |
19 | **Note:** Version bump only for package rehype-react
20 |
21 |
22 |
23 |
24 |
25 | ## [3.1.4](https://github.com/wework/ray/compare/rehype-react@3.1.3...rehype-react@3.1.4) (2019-05-02)
26 |
27 | **Note:** Version bump only for package rehype-react
28 |
29 |
30 |
31 |
32 |
33 | ## 3.1.3 (2019-04-16)
34 |
35 |
36 | ### Bug Fixes
37 |
38 | * typography running text margins ([#43](https://github.com/wework/ray/issues/43)) ([fef06de](https://github.com/wework/ray/commit/fef06de))
39 |
40 |
41 |
42 |
43 |
44 | ## [3.1.2](https://github.com/WeConnect/ray/compare/rehype-react@3.1.1...rehype-react@3.1.2) (2019-03-18)
45 |
46 | **Note:** Version bump only for package rehype-react
47 |
48 |
49 |
50 |
51 |
52 | ## 3.1.1 (2019-03-14)
53 |
54 |
55 | ### Bug Fixes
56 |
57 | * typography running text margins ([#43](https://github.com/WeConnect/ray/issues/43)) ([661e53f](https://github.com/WeConnect/ray/commit/661e53f))
58 |
--------------------------------------------------------------------------------
/RELEASING.md:
--------------------------------------------------------------------------------
1 | # Releasing
2 |
3 | We use conventional commits to dynamically version the packages. It's imperative that maintainers of Ray `squash and merge` all pull requests and edit the commit message/description to follow the guidelines of [Conventional Commits][conventional-commits]. All releases must follow [Semantic Versioning][semver].
4 |
5 | ## Automatic Releases
6 |
7 | Releases are automatically created when a commit is merged into master. Lerna will automatically determine the correct version for each package based on the contents of the commits. Circle CI will kick off a job, bump the version and publish to the npm registry.
8 |
9 | > Note: All packages within the repo that contain `private: true` in its `package.json` will not be published to the registry.
10 |
11 | The [Ray documentation site](https://ray.wework.com/) is automatically built and published on Netlify after any merge to master. Deploy previews are also available on any pull request.
12 |
13 | ## Manual Publish
14 |
15 | Manual publishing is not recommended, and may result in unexpected behavior. If a manual release needs to be created for some reason, a Ray maintainer may do the following:
16 |
17 | > Note: Ensure you are logged into NPM (`npm whoami`/`npm login`) with an account with write access to the `@wework` NPM space
18 |
19 | ```bash
20 | $ yarn bootstrap
21 | $ yarn build
22 | $ yarn lerna:publish
23 | ```
24 |
25 | [conventional-commits]: https://www.conventionalcommits.org
26 | [semver]: https://semver.org/
27 |
--------------------------------------------------------------------------------
/packages/product-react/stories/TextArea.story.tsx:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/react';
2 | import React from 'react';
3 | import { TextArea } from '../src/components/TextArea';
4 |
5 | storiesOf('Core Comps | TextArea', module)
6 | .add('default', () => (
7 |
13 | ))
14 | .add('required', () => (
15 |
22 | ))
23 | .add('error', () => (
24 |
30 | ))
31 | .add('with value', () => (
32 |