@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/global/variables.examples.js

@@ -1,160 +0,0 @@
-import darkVariables from '@jetbrains/ring-ui/components/global/variables_dark';
-
-export default {
-  title: 'Style-only/Theme palette',
-
-  parameters: {
-    notes: `
-Ring UI colors are based on CSS custom properties spec. You can use them in you markup directly.
-    `,
-    hermione: {skip: true}
-  }
-};
-
-function getDarkThemeStyle() {
-  return Object.entries(darkVariables).
-    map(([propName, val]) => `${propName}: ${val}`).
-    join('; ');
-}
-
-function getValue(propName) {
-  return getComputedStyle(document.body).getPropertyValue(propName).toUpperCase();
-}
-
-function renderColorItem(propName, isDark = propName.includes('-dark-')) {
-  return `
-    <div class="color-item ${isDark ? 'dark-background' : ''}">
-      <div class="color-square" style="background-color: var(${propName})"></div>
-      <div class="color-info">
-        <div>${propName}</div>
-        <div class="color-value">${getValue(propName)}</div>
-      </div>
-    </div>
-  `;
-}
-
-const renderColors = () => `
-  <div class="container">
-    <h3>Element colors:</h3>
-    <div class="colors-group">
-      ${renderColorItem('--ring-line-color')}
-      ${renderColorItem('--ring-borders-color')}
-      ${renderColorItem('--ring-icon-color')}
-      ${renderColorItem('--ring-icon-secondary-color')}
-      ${renderColorItem('--ring-border-disabled-color')}
-      ${renderColorItem('--ring-icon-disabled-color')}
-      ${renderColorItem('--ring-border-hover-color')}
-      ${renderColorItem('--ring-icon-hover-color')}
-      ${renderColorItem('--ring-main-color')}
-      ${renderColorItem('--ring-main-hover-color')}
-      ${renderColorItem('--ring-icon-error-color')}
-      ${renderColorItem('--ring-icon-warning-color')}
-      ${renderColorItem('--ring-icon-success-color')}
-      ${renderColorItem('--ring-pale-control-color')}
-      ${renderColorItem('--ring-popup-border-color')}
-      ${renderColorItem('--ring-popup-shadow-color')}
-      ${renderColorItem('--ring-message-shadow-color')}
-      ${renderColorItem('--ring-dark-line-color')}
-      ${renderColorItem('--ring-dark-borders-color')}
-      ${renderColorItem('--ring-dark-border-hover-color')}
-    </div>
-
-    <h3>Text colors:</h3>
-    <div class="colors-group">
-      ${renderColorItem('--ring-search-color')}
-      ${renderColorItem('--ring-hint-color')}
-      ${renderColorItem('--ring-link-color')}
-      ${renderColorItem('--ring-link-hover-color')}
-      ${renderColorItem('--ring-error-color')}
-      ${renderColorItem('--ring-warning-color')}
-      ${renderColorItem('--ring-success-color')}
-      ${renderColorItem('--ring-text-color')}
-      ${renderColorItem('--ring-heading-color')}
-      ${renderColorItem('--ring-secondary-color')}
-      ${renderColorItem('--ring-disabled-color')}
-      ${renderColorItem('--ring-dark-secondary-color')}
-      ${renderColorItem('--ring-dark-text-color')}
-      ${renderColorItem('--ring-dark-disabled-color')}
-      ${renderColorItem('--ring-dark-active-color')}
-    </div>
-
-    <h3>Background colors:</h3>
-    <div class="colors-group">
-      ${renderColorItem('--ring-content-background-color')}
-      ${renderColorItem('--ring-popup-background-color')}
-      ${renderColorItem('--ring-sidebar-background-color')}
-      ${renderColorItem('--ring-selected-background-color')}
-      ${renderColorItem('--ring-hover-background-color')}
-      ${renderColorItem('--ring-message-background-color')}
-      ${renderColorItem('--ring-navigation-background-color')}
-      ${renderColorItem('--ring-removed-background-color')}
-      ${renderColorItem('--ring-warning-background-color')}
-      ${renderColorItem('--ring-added-background-color')}
-      ${renderColorItem('--ring-tag-background-color')}
-      ${renderColorItem('--ring-dark-selected-background-color')}
-    </div>
-  </div>
-`;
-
-export const basic = () => `
-  <div>
-    <h2>Default theme</h2>
-    ${renderColors()}
-
-    <div style="${getDarkThemeStyle()}">
-      <h2>Dark theme</h2>
-      ${renderColors()}
-    </div>
-  </div>
-`;
-
-basic.storyName = 'Theme palette';
-
-basic.parameters = {
-  storyStyles: `
-<style>
-  .container {
-    background-color: var(--ring-content-background-color);
-    color: var(--ring-text-color);
-    font-family: var(--ring-font-family);
-  }
-
-  .colors-group {
-    display: flex;
-    flex-wrap: wrap;
-    font-family: var(--ring-font-family-monospace);
-  }
-
-  .dark-background {
-    background-color: var(--ring-navigation-background-color);
-    color: var(--ring-dark-text-color);
-  }
-
-  .color-square {
-    width: calc(var(--ring-unit) * 4);
-    height: calc(var(--ring-unit) * 4);
-    border-radius: var(--ring-border-radius);
-  }
-
-  .color-info {
-    margin-left: var(--ring-unit);
-  }
-
-  .color-value {
-    font-size: var(--ring-font-size-smaller);
-    color: var(--ring-secondary-color);
-  }
-
-  .dark-background .color-value {
-    color: var(--ring-dark-secondary-color);
-  }
-
-  .color-item {
-    display: flex;
-    flex-basis: 30%;
-    padding: 4px var(--ring-unit);
-    align-items: center;
-  }
-</style>
-      `
-};

package/components/global/variables_dark.js

@@ -1,55 +0,0 @@
-export default {
-  '--ring-line-color': '#475159',
-  '--ring-borders-color': '#406380',
-  '--ring-icon-color': '#80929d',
-  '--ring-icon-secondary-color': '#80929d',
-  '--ring-border-disabled-color': '#475159',
-  '--ring-border-hover-color': '#70b1e6',
-  '--ring-icon-error-color': '#c22731',
-  '--ring-icon-warning-color': '#cc8b00',
-  '--ring-icon-success-color': '#1c8c32',
-  '--ring-popup-border-components': '0, 42, 76',
-  '--ring-popup-border-color': 'rgba(var(--ring-popup-border-components), 0.1)',
-  '--ring-popup-shadow-color': 'rgba(var(--ring-popup-border-components), 0.15)',
-  '--ring-message-shadow-color': 'rgba(var(--ring-popup-border-components), 0.3)',
-  '--ring-pinned-shadow-color': '#000',
-
-  /* Text */
-  '--ring-hint-color': '#80929d',
-  '--ring-link-color': '#70b1e6',
-  '--ring-error-color': '#db5860',
-  '--ring-warning-color': '#eda200',
-  '--ring-success-color': '#59a869',
-  '--ring-text-color': '#bbb',
-  '--ring-heading-color': 'var(--ring-text-color)',
-  '--ring-secondary-color': '#80929d',
-  '--ring-disabled-color': '#80929d',
-
-  /* Background */
-  '--ring-content-background-color': '#23272b',
-  '--ring-popup-background-color': '#111314',
-  '--ring-sidebar-background-color': '#28343d',
-  '--ring-selected-background-color': '#062640',
-  '--ring-hover-background-color': '#0b1a26',
-  '--ring-message-background-color': 'var(--ring-popup-background-color)',
-  '--ring-navigation-background-color': '#111314',
-  '--ring-tag-background-color': '#3e4d59',
-  '--ring-removed-background-color': '#8f5247',
-  '--ring-warning-background-color': '#593d01',
-  '--ring-added-background-color': '#365947',
-
-  /* Code */
-  '--ring-code-background-color': '#2b2b2b',
-  '--ring-code-color': '#a9b7c6',
-  '--ring-code-meta-color': '#bbb529',
-  '--ring-code-keyword-color': '#cc7832',
-  '--ring-code-tag-background-color': '#2b2b2b',
-  '--ring-code-tag-color': '#e8BF6a',
-  '--ring-code-tag-font-weight': 'normal',
-  '--ring-code-field-color': '#9876aa',
-  '--ring-code-attribute-color': '#bababa',
-  '--ring-code-number-color': '#6897bb',
-  '--ring-code-string-color': '#6a8759',
-  '--ring-code-addition-color': '#447152',
-  '--ring-code-deletion-color': '#656e76'
-};

package/components/grid/grid.examples.js

@@ -1,291 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid';
-
-export default {
-  title: 'Components/Grid',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      'Implements a flexbox-like grid system for components placement. Inspired by react-flexbox-grid, see http://roylee0704.github.io/react-flexbox-grid/ and http://flexboxgrid.com/ for additional information.'
-  }
-};
-
-export const responsive = () => (
-  <Grid>
-    <Row start="xs">
-      <Col xs={12} sm={4} md={6} lg={3}>
-        <div className="cell">Cell 1</div>
-      </Col>
-      <Col xs={12} sm={8} md={6} lg={3}>
-        <div className="cell">Cell 2</div>
-      </Col>
-      <Col xs={12} smOffset={4} sm={8} md={12} lg={6}>
-        <div className="cell">Cell 3</div>
-      </Col>
-    </Row>
-  </Grid>
-);
-
-responsive.storyName = 'responsive';
-
-responsive.parameters = {
-  storyStyles: `
-<style>
-  .cell {
-    background-color: silver;
-  }
-</style>`
-};
-
-export const offset = () => (
-  <div>
-    <h4>Offset a column.</h4>
-    <Grid data-test="offset">
-      <Row>
-        <Col xsOffset={11} xs={1}>
-          <div className="cell">
-            xsOffset={11} xs={1}
-          </div>
-        </Col>
-        <Col xsOffset={10} xs={2}>
-          <div className="cell">
-            xsOffset={10} xs={2}
-          </div>
-        </Col>
-        <Col xsOffset={9} xs={3}>
-          <div className="cell">
-            xsOffset={9} xs={3}
-          </div>
-        </Col>
-        <Col xsOffset={8} xs={4}>
-          <div className="cell">
-            xsOffset={8} xs={4}
-          </div>
-        </Col>
-        <Col xsOffset={7} xs={5}>
-          <div className="cell">
-            xsOffset={7} xs={5}
-          </div>
-        </Col>
-        <Col xsOffset={6} xs={6}>
-          <div className="cell">
-            xsOffset={6} xs={6}
-          </div>
-        </Col>
-        <Col xsOffset={5} xs={7}>
-          <div className="cell">
-            xsOffset={5} xs={7}
-          </div>
-        </Col>
-        <Col xsOffset={4} xs={8}>
-          <div className="cell">
-            xsOffset={4} xs={8}
-          </div>
-        </Col>
-        <Col xsOffset={3} xs={9}>
-          <div className="cell">
-            xsOffset={3} xs={9}
-          </div>
-        </Col>
-        <Col xsOffset={2} xs={10}>
-          <div className="cell">
-            xsOffset={2} xs={10}
-          </div>
-        </Col>
-        <Col xsOffset={1} xs={11}>
-          <div className="cell">
-            xsOffset={1} xs={11}
-          </div>
-        </Col>
-      </Row>
-    </Grid>
-  </div>
-);
-
-offset.storyName = 'offset';
-
-offset.parameters = {
-  storyStyles: `
-<style>
-  .cell {
-    background-color: silver;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>`
-};
-
-export const autoSize = () => (
-  <div>
-    <h4>Auto Width: add any number of auto sizing columns to a row. Let the grid figure it out.</h4>
-    <Grid data-test="auto-size">
-      <Row>
-        <Col xs>
-          <div className="cell">Autosize</div>
-        </Col>
-        <Col xs>
-          <div className="cell">Autosize column with larger text</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col xs>
-          <div className="cell">Autosize</div>
-        </Col>
-        <Col xs>
-          <div className="cell">Autosize column with much much much larger text</div>
-        </Col>
-        <Col xs>
-          <div className="cell">Autosize</div>
-        </Col>
-      </Row>
-    </Grid>
-  </div>
-);
-
-autoSize.storyName = 'auto size';
-
-autoSize.parameters = {
-  storyStyles: `
-<style>
-  .cell {
-    background-color: silver;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>`
-};
-
-export const alignment = () => (
-  <div>
-    <h4>
-      Add classes to align elements to the start or end of row as well as the top, bottom, or center
-      of a column
-    </h4>
-    <Grid data-test="alignment">
-      <Row>
-        <Col xs={12}>
-          <Row start="xs">
-            <Col xs={6} className="cell">
-              start
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={12}>
-          <Row center="xs">
-            <Col xs={6} className="cell">
-              center
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={12}>
-          <Row end="xs">
-            <Col xs={6} className="cell">
-              end
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={12}>
-          <Row top="xs">
-            <Col xs={6}>
-              <div className="cell">top</div>
-            </Col>
-            <Col xs={6}>
-              <div className="cell cell_tall"/>
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={12}>
-          <Row middle="xs">
-            <Col xs={6}>
-              <div className="cell">middle</div>
-            </Col>
-            <Col xs={6}>
-              <div className="cell cell_tall"/>
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={12}>
-          <Row bottom="xs">
-            <Col xs={6}>
-              <div className="cell">bottom</div>
-            </Col>
-            <Col xs={6}>
-              <div className="cell cell_tall"/>
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-    </Grid>
-  </div>
-);
-
-alignment.storyName = 'alignment';
-
-alignment.parameters = {
-  storyStyles: `
-<style>
-  .cell {
-    background-color: silver;
-  }
-  .cell_tall {
-    height: 64px;
-  }
-</style>`
-};
-
-export const columnsDistribution = () => (
-  <div>
-    <h4>Distribution: add classes to distribute the contents of a row or column.</h4>
-    <Grid data-test="distribution">
-      <Row around="xs">
-        <Col xs={2}>
-          <div className="cell">around</div>
-        </Col>
-        <Col xs={2}>
-          <div className="cell">around</div>
-        </Col>
-        <Col xs={2}>
-          <div className="cell">around</div>
-        </Col>
-      </Row>
-      <Row between="xs">
-        <Col xs={2}>
-          <div className="cell">between</div>
-        </Col>
-        <Col xs={2}>
-          <div className="cell">between</div>
-        </Col>
-        <Col xs={2}>
-          <div className="cell">between</div>
-        </Col>
-      </Row>
-    </Grid>
-  </div>
-);
-
-columnsDistribution.storyName = 'columns distribution';
-
-columnsDistribution.parameters = {
-  storyStyles: `
-<style>
-  .cell {
-    background-color: silver;
-  }
-</style>`
-};

package/components/grid/grid.test.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import styles from './grid.css';
-import {Col, Grid, Row} from './grid';
-
-describe('Grid', () => {
-  const shallowGrid = props => shallow(<Grid {...props}/>);
-  const mountGrid = props => mount(<Grid {...props}/>);
-
-  it('should create component', () => {
-    mountGrid().should.have.type(Grid);
-  });
-
-  it('should wrap children with div', () => {
-    shallowGrid().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowGrid({className: 'test-class'}).should.have.className('test-class');
-  });
-});
-
-describe('Row', () => {
-  const shallowRow = props => shallow(<Row {...props}/>);
-  const mountRow = props => mount(<Row {...props}/>);
-
-  it('should create component', () => {
-    mountRow().should.have.type(Row);
-  });
-
-  it('should wrap children with div', () => {
-    shallowRow().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowRow({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should convert "center" modifier to appropriate className', () => {
-    shallowRow({center: 'md'}).should.have.className(styles['center-md']);
-  });
-
-  it('should convert "reverse" modifier to appropriate className', () => {
-    shallowRow({reverse: true}).should.have.className(styles.reverse);
-  });
-});
-
-describe('Col', () => {
-  const shallowCol = props => shallow(<Col {...props}/>);
-  const mountCol = props => mount(<Col {...props}/>);
-
-  it('should create component', () => {
-    mountCol().should.have.type(Col);
-  });
-
-  it('should wrap children with div', () => {
-    shallowCol().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowCol({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should convert digital value to appropriate className', () => {
-    shallowCol({xs: 2}).should.have.className(styles['col-xs-2']);
-  });
-
-  it('should convert autosize to appropriate className', () => {
-    shallowCol({xs: true}).should.have.className(styles['col-xs']);
-  });
-});

package/components/group/group.examples.js

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Badge from '@jetbrains/ring-ui/components/badge/badge';
-import Link from '@jetbrains/ring-ui/components/link/link';
-
-import Group from '@jetbrains/ring-ui/components/group/group';
-
-export default {
-  title: 'Components/Group',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Places inner components with fixed spacing between them.'
-  }
-};
-
-export const basic = () => (
-  <Group>
-    <Badge valid>Badge</Badge>
-    <span>Text</span>
-    <Link>Link</Link>
-  </Group>
-);
-
-basic.storyName = 'Group';

package/components/group/group.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Group from './group';
-
-describe('Group', () => {
-  const shallowGroup = props => shallow(<Group {...props}/>);
-  const mountGroup = props => mount(<Group {...props}/>);
-
-  it('should create component', () => {
-    mountGroup().should.have.type(Group);
-  });
-
-  it('should wrap children with div', () => {
-    shallowGroup().should.have.tagName('span');
-  });
-
-  it('should use passed className', () => {
-    shallowGroup({className: 'test-class'}).should.have.className('test-class');
-  });
-});