All files / packages/design-system/shared/components SpacingCodeView.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import CodeBlock from './CodeBlock';
 
// Used to showcase Margin and Padding docs without showing
// internal, doc-only styling classes
class SpacingCodeView extends Component {
  render() {
    let { position, size, type } = this.props;
    let typeName = type === 'p' ? 'padding' : 'margin';
    let spacingClass = `slds-${type}-${position}_${size}`;
    return (
      <div className="docs-codeblock">
        <div className="docs-codeblock-example">
          <div className="doc-spacing">
            <div
              className={classNames(
                `doc-${typeName}`,
                type === 'm' && 'doc-margin_content',
                spacingClass
              )}
            />
          </div>
        </div>
        <CodeBlock toggleCode={false}>
          <div className={`${spacingClass}`} />
        </CodeBlock>
      </div>
    );
  }
}
 
SpacingCodeView.propTypes = {
  position: PropTypes.oneOf([
    'left',
    'right',
    'top',
    'bottom',
    'vertical',
    'horizontal',
    'around'
  ]).isRequired,
  size: PropTypes.oneOf([
    'xxx-small',
    'xx-small',
    'x-small',
    'small',
    'medium',
    'large',
    'x-large',
    'xx-large',
    'none'
  ]).isRequired,
  type: PropTypes.oneOf(['m', 'p']).isRequired
};
 
export default SpacingCodeView;