All files / packages/design-system/ui/shared/doc-text index.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// 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 from 'react';
import PropTypes from 'prop-types';
import Blockquote from '../../../shared/components/Blockquote';
 
export let MobileBlurb = props => {
  const { patternSpecificText } = props;
 
  return (
    <Blockquote type="note">
      <p>
        On mobile devices, such as phones and other devices that have touch as
        the primary method of interaction, {patternSpecificText}.
      </p>
      <p>
        Below is a live example of what to expect in that context. No code
        changes are needed in the Salesforce platform context as this change
        occurs automatically in Salesforce native mobile applications. For
        those users not on the Salesforce platform, these modifications will
        occur automatically when the secondary touch stylesheet is loaded and
        the device has touch as the primary method of interaction.
      </p>
    </Blockquote>
  );
};
 
MobileBlurb.propTypes = {
  patternSpecificText: PropTypes.node.isRequired
};
 
export let MobileNotice = props => {
  const { docsLink, header, elementName } = props;
 
  return (
    <Blockquote type="note" header={header}>
      <p>
        Please be aware that in a mobile context <strong>{elementName}</strong>{' '}
        will automatically change slightly as shown in the example below. For
        more details{' '}
        <a href={docsLink}>please see the mobile specific documentation</a>{' '}
        above.
      </p>
    </Blockquote>
  );
};
 
MobileNotice.propTypes = {
  docsLink: PropTypes.string,
  header: PropTypes.string,
  elementName: PropTypes.string
};
 
export default MobileNotice;