@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/confirm/confirm.examples.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Button from '../button/button';
+
+import Confirm from './confirm';
+
+export default {
+  title: 'Components/Confirm',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'A component that shows a confirmation dialog.',
+    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
+    a11y: {element: '*[data-test~=ring-dialog]'}
+  }
+};
+
+interface ConfirmArgs {
+  onConfirm: () => void
+  onCancel: () => void
+}
+export const confirm = ({onConfirm, onCancel}: ConfirmArgs) => {
+  class ConfirmDemo extends React.Component {
+    state = {
+      confirm: {
+        show: true,
+        text: 'Do you really wish to proceed?',
+        description: 'A description of an action that is about to take place.',
+        inProgress: false,
+        onConfirm: () => {},
+        onReject: () => {}
+      }
+    };
+
+    componentDidMount() {
+      this.showConfirm();
+    }
+
+    hideConfirm = () => {
+      this.setState({confirm: {show: false}});
+    };
+
+    showConfirm = () =>
+      new Promise<void>((resolve, reject) => {
+        this.setState({
+          confirm: {
+            show: true,
+            text: 'Do you really wish to proceed?',
+            description: 'A description of an action that is about to take place.',
+            onConfirm: () => {
+              this.hideConfirm();
+              resolve();
+            },
+            onReject: () => {
+              this.hideConfirm();
+              reject();
+            }
+          }
+        });
+      }).
+        then(onConfirm).
+        catch(onCancel);
+
+    showWithAnotherText = () =>
+      new Promise<void>((resolve, reject) => {
+        this.setState({
+          confirm: {
+            show: true,
+            text: 'There is another question',
+            onConfirm: () => {
+              this.hideConfirm();
+              resolve();
+            },
+            onReject: () => {
+              this.hideConfirm();
+              reject();
+            }
+          }
+        });
+      }).
+        then(onConfirm).
+        catch(onCancel);
+
+    render() {
+      return (
+        <div>
+          <Button onClick={this.showConfirm}>Show confirm</Button>
+          <Button onClick={this.showWithAnotherText}>Show another message</Button>
+          <Confirm
+            show={this.state.confirm.show}
+            text={this.state.confirm.text}
+            description={this.state.confirm.description}
+            inProgress={this.state.confirm.inProgress}
+            confirmLabel="OK"
+            rejectLabel="Cancel"
+            onConfirm={this.state.confirm.onConfirm}
+            onReject={this.state.confirm.onReject}
+          />
+        </div>
+      );
+    }
+  }
+
+  return <ConfirmDemo/>;
+};
+
+confirm.argTypes = {onConfirm: {}, onCancel: {}};

package/components/confirm/confirm.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {mount, ReactWrapper} from 'enzyme';
+
+import islandStyles from '../island/island.css';
+
+import Confirm, {ConfirmAttributes} from './confirm';
+
+describe('Confirm', () => {
+  const defaultProps = {show: true, text: 'Foo'};
+  let wrapper: ReactWrapper;
+  const mountConfirm = (props: ConfirmAttributes) => {
+    wrapper = mount(<Confirm {...props}/>);
+    return wrapper;
+  };
+
+  const getContainer = () => document.querySelector('[data-test~="ring-dialog"]');
+
+  afterEach(() => wrapper.unmount());
+
+  it('should create component', () => {
+    mountConfirm(defaultProps).should.have.type(Confirm);
+  });
+
+  it('should render confirm', () => {
+    mountConfirm(defaultProps);
+    const container = getContainer();
+    should.exist(container);
+    container?.should.contain(`.${islandStyles.title}`);
+  });
+});

package/components/confirm/confirm.tsx

@@ -0,0 +1,116 @@
+import React, {PureComponent, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+
+import Dialog from '../dialog/dialog';
+import Button from '../button/button';
+import {Content, Header} from '../island/island';
+import Panel from '../panel/panel';
+
+import styles from './confirm.css';
+
+export interface ConfirmProps {
+  text: string
+  description: ReactNode
+  show: boolean
+  rejectOnEsc: boolean
+  inProgress: boolean
+  cancelIsDefault: boolean
+  confirmLabel: string
+  rejectLabel: string
+  onConfirm: ((event: React.MouseEvent<HTMLButtonElement>) => void)
+  onReject: ((event?: React.MouseEvent<HTMLButtonElement>) => void)
+  className?: string | undefined
+}
+
+/**
+ * @name Confirm
+ */
+
+export default class Confirm extends PureComponent<ConfirmProps> {
+  static propTypes = {
+    className: PropTypes.string,
+    text: PropTypes.string,
+    description: PropTypes.node,
+
+    show: PropTypes.bool,
+    rejectOnEsc: PropTypes.bool,
+    inProgress: PropTypes.bool,
+    cancelIsDefault: PropTypes.bool,
+    confirmLabel: PropTypes.string,
+    rejectLabel: PropTypes.string,
+
+    onConfirm: PropTypes.func,
+    onReject: PropTypes.func
+  };
+
+  static defaultProps = {
+    text: null,
+    description: null,
+    show: false,
+    rejectOnEsc: true,
+    inProgress: false,
+    cancelIsDefault: false,
+    confirmLabel: 'OK',
+    rejectLabel: 'Cancel',
+    onConfirm: () => {},
+    onReject: () => {}
+  };
+
+  onEscPress = () => {
+    if (this.props.rejectOnEsc) {
+      this.props.onReject();
+    }
+  };
+
+  render() {
+    const {
+      show,
+      className,
+      inProgress,
+      cancelIsDefault,
+      text,
+      description,
+      confirmLabel,
+      rejectLabel,
+      onConfirm,
+      onReject
+    } = this.props;
+
+    return (
+      <Dialog
+        label={text || (typeof description === 'string' ? description : undefined)}
+        className={className}
+        onEscPress={this.onEscPress}
+        show={show}
+        trapFocus
+        data-test="ring-confirm"
+      >
+        {text && <Header>{text}</Header>}
+        <Content>
+          {description && <div className={styles.description}>{description}</div>}
+        </Content>
+        <Panel>
+          <Button
+            data-test="confirm-ok-button"
+            primary={!cancelIsDefault}
+            loader={inProgress}
+            disabled={inProgress}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </Button>
+          <Button
+            data-test="confirm-reject-button"
+            onClick={onReject}
+            disabled={inProgress}
+            primary={cancelIsDefault}
+          >
+            {rejectLabel}
+          </Button>
+        </Panel>
+      </Dialog>
+    );
+  }
+}
+
+export type ConfirmAttributes = JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>

package/components/confirm-ng/confirm-ng.examples.js

@@ -2,9 +2,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import {hideConfirm} from '@jetbrains/ring-ui/components/confirm-service/confirm-service';
+import {hideConfirm} from '../confirm-service/confirm-service';
 
-import ConfirmNG from '@jetbrains/ring-ui/components/confirm-ng/confirm-ng';
+import ConfirmNG from './confirm-ng';
 
 export default {
   title: 'Legacy Angular/Confirm Ng',

package/components/confirm-service/confirm-service.examples.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Button from '../button/button';
+
+import confirm, {hideConfirm} from './confirm-service';
+
+export default {
+  title: 'Services/Confirm Service',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes:
+      ' wrapper for the Confirm component. Allows showing the confirmation dialog * without mounting the Confirm component first. Can be used outside React.',
+    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
+    a11y: {element: '*[data-test~=ring-dialog]'}
+  }
+};
+
+interface ConfirmServiceArgs {
+  onConfirm: () => void
+  onCancel: () => void
+}
+export const confirmService = ({onConfirm, onCancel}: ConfirmServiceArgs) => {
+  class ConfirmDemo extends React.Component {
+    componentDidMount() {
+      this.showConfirm();
+    }
+
+    componentWillUnmount() {
+      hideConfirm();
+    }
+
+    showConfirm = () =>
+      confirm({text: 'Do you really wish to proceed?'}).
+        then(onConfirm).
+        catch(onCancel);
+
+    showWithAnotherText = () =>
+      confirm({
+        text: 'There is another confirmation',
+        description: 'Confirmation description',
+        confirmLabel: 'OK',
+        rejectLabel: 'Cancel',
+        cancelIsDefault: true,
+        onBeforeConfirm: () => new Promise(resolve => setTimeout(resolve, 1000))
+      }).
+        then(onConfirm).
+        catch(onCancel);
+
+    render() {
+      return (
+        <div>
+          <Button onClick={this.showConfirm}>Show confirm</Button>
+          <Button onClick={this.showWithAnotherText}>Show another message</Button>
+        </div>
+      );
+    }
+  }
+
+  return <ConfirmDemo/>;
+};
+
+confirmService.argTypes = {onConfirm: {}, onCancel: {}};

package/components/confirm-service/confirm-service.test.ts

@@ -0,0 +1,73 @@
+import {Simulate} from 'react-dom/test-utils';
+import {unmountComponentAtNode} from 'react-dom';
+
+import islandStyles from '../island/island.css';
+
+import confirm, {containerElement} from './confirm-service';
+
+describe('Confirm Service', () => {
+  const getContainer = () => document.querySelector('[data-test~="ring-dialog"]');
+
+  afterEach(() => {
+    unmountComponentAtNode(containerElement);
+  });
+
+  it('should show confirm', () => {
+    confirm({text: 'foo'});
+    const container = getContainer();
+    should.exist(container);
+    container?.should.contain(`.${islandStyles.title}`);
+  });
+
+  it('should show confirm text', () => {
+    confirm({text: 'foo'});
+    const container = getContainer();
+    should.exist(container);
+    container?.should.contain.text('foo');
+  });
+
+  it('should show confirm description', () => {
+    confirm({text: 'foo', description: 'descr'});
+    const container = getContainer();
+    should.exist(container);
+    container?.should.contain.text('descr');
+  });
+
+  it('should show confirm button text', () => {
+    confirm({text: 'foo', confirmLabel: 'confirm text'});
+    const container = getContainer();
+    should.exist(container);
+    container?.should.contain.text('confirm text');
+  });
+
+  it('should show reject button text', () => {
+    confirm({text: 'foo', rejectLabel: 'reject text'});
+    const container = getContainer();
+    should.exist(container);
+    container?.should.contain.text('reject text');
+  });
+
+  it('should resolve on confirm', async () => {
+    const spy = sandbox.spy();
+    const promise = confirm({text: 'foo'}).then(spy);
+    const container = getContainer();
+    const okButton = container?.querySelector('*[data-test="confirm-ok-button"]');
+    should.exist(okButton);
+    okButton && Simulate.click(okButton);
+
+    await promise;
+    spy.should.have.been.called;
+  });
+
+  it('should reject on reject', async () => {
+    const spy = sandbox.spy();
+    const promise = confirm({text: 'foo'}).catch(spy);
+    const container = getContainer();
+    const okButton = container?.querySelector('*[data-test="confirm-reject-button"]');
+    should.exist(okButton);
+    okButton && Simulate.click(okButton);
+
+    await promise;
+    spy.should.have.been.called;
+  });
+});

package/components/confirm-service/confirm-service.tsx

@@ -0,0 +1,74 @@
+import React, {ReactNode} from 'react';
+import {render} from 'react-dom';
+
+import Confirm, {ConfirmAttributes} from '../confirm/confirm';
+
+/**
+ * @name Confirm Service
+ */
+
+export const containerElement = document.createElement('div');
+
+/**
+ * Renders Confirm into virtual node to skip maintaining container
+ */
+function renderConfirm(props: ConfirmAttributes) {
+  render(<Confirm {...props}/>, containerElement);
+}
+
+export interface ConfirmServiceParams {
+  text?: string | undefined
+  description?: ReactNode
+  cancelIsDefault?: boolean | undefined
+  confirmLabel?: string | undefined
+  rejectLabel?: string | undefined
+  onBeforeConfirm?: (() => void) | undefined
+}
+
+export default function confirm({
+  text,
+  description,
+  confirmLabel = 'OK',
+  rejectLabel = 'Cancel',
+  cancelIsDefault,
+  onBeforeConfirm
+}: ConfirmServiceParams) {
+  return new Promise<void>((resolve, reject) => {
+    const props = {
+      text,
+      description,
+      confirmLabel,
+      rejectLabel,
+      cancelIsDefault,
+      show: true,
+
+      onConfirm: () => {
+        if (onBeforeConfirm) {
+          renderConfirm({...props, inProgress: true});
+          return Promise.resolve(onBeforeConfirm()).
+            then(() => {
+              renderConfirm({...props, show: false});
+              resolve();
+            }).
+            catch(err => {
+              renderConfirm({...props, show: false});
+              reject(err);
+            });
+        }
+        renderConfirm({...props, show: false});
+        return resolve();
+      },
+
+      onReject: () => {
+        renderConfirm({...props, show: false});
+        reject(new Error('Confirm(@jetbrains/ring-ui): null exception'));
+      }
+    };
+
+    renderConfirm(props);
+  });
+}
+
+export function hideConfirm() {
+  renderConfirm({text: '', show: false});
+}

package/components/content-layout/content-layout.examples.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import ContentLayout from './content-layout';
+import Sidebar from './sidebar';
+
+export default {
+  title: 'Components/Content Layout',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: 'A component for simple content layout.'
+  }
+};
+
+export const basic = () => (
+  <ContentLayout>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </ContentLayout>
+);
+
+basic.storyName = 'basic';
+
+export const withSidebarOnTheLeft = () => (
+  <div>
+    <div>
+      <h4>Some title</h4>
+    </div>
+    <ContentLayout>
+      <Sidebar className="sidebar">
+        This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit
+        amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+        do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is sidebar. Lorem ipsum
+        dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+        dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is sidebar.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur
+        adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </Sidebar>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
+      sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+      ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+      qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+      officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+      officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+      officia deserunt mollit anim id est laborum.
+    </ContentLayout>
+    <div>
+      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+    <div>
+      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+    <div>
+      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+  </div>
+);
+
+withSidebarOnTheLeft.storyName = 'with sidebar on the left';
+
+withSidebarOnTheLeft.parameters = {
+  storyStyles: `
+<style>
+    body {
+      margin: 0 !important;
+    }
+
+    .sidebar {
+      background-color: #EEEEEE;
+    }
+</style>`
+};
+
+export const withSidebarOnTheRight = () => (
+  <div>
+    <div>
+      <h4>Some title</h4>
+    </div>
+    <ContentLayout>
+      <Sidebar className="sidebar" right>
+        This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit
+        amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+        do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is sidebar. Lorem ipsum
+        dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+        dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is sidebar.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. This is sidebar. Lorem ipsum dolor sit amet, consectetur
+        adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </Sidebar>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
+      sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+      sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+      ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+      qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+      officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+      officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+      officia deserunt mollit anim id est laborum.
+    </ContentLayout>
+    <div>
+      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+    <div>
+      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+    <div>
+      Some content below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+  </div>
+);
+
+withSidebarOnTheRight.storyName = 'with sidebar on the right';
+
+withSidebarOnTheRight.parameters = {
+  storyStyles: `
+<style>
+    body {
+      margin: 0 !important;
+    }
+
+    .sidebar {
+      background-color: #EEEEEE;
+    }
+</style>
+      `
+};