Skip to content

Commit 6b10580

Browse files
groberts314groberts314
committed
Merge branch 'release/10.9.0'
2 parents 0d3ae7f + 9c3d238 commit 6b10580

24 files changed

Lines changed: 387 additions & 16 deletions

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
# Change Log
22
This project adheres to [Semantic Versioning](http://semver.org/).
33

4+
## 10.9.0
5+
_November 14, 2023_
6+
- Add ability to show various form inputs in 'redacted' mode for displaying sensitive data with new `isRedacted` prop. [PR #477](https://github.com/saddlebackdev/react-cm-ui/pull/477)
7+
48
## 10.8.0
59
_November 9, 2023_
610
- Add ability to have Apply and Clear buttons in the `<FiltersRail>` for Pages and Drawers. [PR #474](https://github.com/saddlebackdev/react-cm-ui/pull/474)

‎docs/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
# Change Log
22
This project adheres to [Semantic Versioning](http://semver.org/).
33

4+
## 0.18.2 - 11/14/2023
5+
- [PR #477](https://github.com/saddlebackdev/react-cm-ui/pull/477) / Merge Commit e442f9a
6+
- Add examples of using new `isRedacted` prop to show various form inputs in 'redacted' mode for displaying sensitive data.
7+
48
## 0.18.1 - 11/09/2023
59
- [PR #474](https://github.com/saddlebackdev/react-cm-ui/pull/474) / Merge Commit 7d9954f
610
- Add ability to have Apply and Clear buttons in the `<FiltersRail>` for Pages and Drawers. Update Demo Page and Drawer to show this new capability.

‎docs/package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-cm-ui-docs",
3-
"version": "0.18.1",
3+
"version": "0.18.2",
44
"scripts": {
55
"build": "webpack",
66
"build:clean": "rimraf build",

‎docs/src/inputs/checkbox/checkbox.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,19 @@ export default class ToggleSample extends React.Component {
157157
158158
}`;
159159

160+
const isRedactedSample = `import React from 'react';
161+
import { Checkbox } from '@saddlebackchurch/react-cm-ui';
162+
163+
export default class ToggleSample extends React.Component {
164+
165+
render() {
166+
return (
167+
<Checkbox isRedacted label="Sensitive data" />
168+
);
169+
}
170+
171+
}`;
172+
160173
export default class ElementsCheckbox extends React.Component {
161174
constructor(props) {
162175
super(props);
@@ -202,6 +215,12 @@ export default class ElementsCheckbox extends React.Component {
202215
default: '',
203216
description: 'Give a checkbox an id.',
204217
allowedTypes: '',
218+
}, {
219+
name: 'isRedacted',
220+
type: 'bool',
221+
default: 'false',
222+
description: 'To prevent sensitive data from being read, we need to be able to block the contents of the control with a gray placeholder. This flag triggers this kind of display instead of the usual one.',
223+
allowedTypes: '',
205224
}, {
206225
name: 'label',
207226
type: 'string',
@@ -426,6 +445,20 @@ export default class ElementsCheckbox extends React.Component {
426445
<Highlighter customStyle={{ marginBottom: '44px', marginTop: '44px' }}>
427446
{toggleSample}
428447
</Highlighter>
448+
449+
{/* isRedacted */}
450+
<Header size="large" style={{ marginTop: '55px' }} sub>
451+
isRedacted
452+
<Header.Subheader>
453+
To prevent sensitive data from being read, we need to be able to block the contents of the control with a gray placeholder. This flag triggers this kind of display instead of the usual one.
454+
</Header.Subheader>
455+
</Header>
456+
457+
<Checkbox isRedacted label="Sensitive data" />
458+
459+
<Highlighter customStyle={{ marginBottom: '44px', marginTop: '44px' }}>
460+
{isRedactedSample}
461+
</Highlighter>
429462
</Main.Content>
430463
</Main>
431464
);

‎docs/src/inputs/input/devSandbox/devSandbox.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import ExampleInputPlaceholder from '../examples/exampleInputPlaceholder';
3030
import ExampleInputRequired from '../examples/exampleInputRequired';
3131
import ExampleInputType from '../examples/exampleInputType';
3232
import ExampleInputMask from '../examples/exampleInputMask';
33+
import ExampleInputIsRedacted from '../examples/exampleInputIsRedacted';
3334
import Heading from '../../../global/heading';
3435
import Main from '../../../global/main';
3536
import MarkdownContainer from '../../../global/markdownContainer';
@@ -557,6 +558,27 @@ function InputDevSandbox() {
557558
>
558559
<ExampleInputMask />
559560
</Example>
561+
562+
<MarkdownContainer>
563+
<Heading
564+
anchorLink="isRedacted"
565+
variant="h2"
566+
>
567+
isRedacted
568+
</Heading>
569+
570+
<Typography
571+
variant="body1"
572+
>
573+
To prevent sensitive data from being read, we need to be able to block the contents of the control with a gray placeholder. This flag triggers this kind of display instead of the usual one.
574+
</Typography>
575+
</MarkdownContainer>
576+
577+
<Example
578+
rawCode={require('!!raw-loader!../examples/exampleInputIsRedacted').default}
579+
>
580+
<ExampleInputIsRedacted />
581+
</Example>
560582
</Main.Content>
561583
</Main>
562584
);

‎docs/src/inputs/input/examples/exampleInputIsRedacted.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Input } from '@saddlebackchurch/react-cm-ui';
2+
import React from 'react';
3+
4+
function ExampleInputIsRedacted() {
5+
6+
return (
7+
<Input isRedacted label="Label" value="Sensitive data" />
8+
);
9+
}
10+
11+
export default ExampleInputIsRedacted;

‎docs/src/inputs/radio/radio.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,21 @@ export default class RadioGroupPillSample extends React.Component {
195195
196196
}`;
197197

198+
const isRedactedSample = `import React from 'react';
199+
200+
import { Radio } from '@saddlebackchurch/react-cm-ui';
201+
202+
export default class RadioGroupSample extends React.Component {
203+
204+
render() {
205+
return (
206+
<Radio isRedacted label="Sensitive data 1" /><br /><br />
207+
<Radio checked isRedacted label="Sensitive data 2" />
208+
);
209+
}
210+
211+
}`;
212+
198213
export default class ElementsRadio extends React.Component {
199214
constructor(props) {
200215
super(props);
@@ -270,6 +285,12 @@ export default class ElementsRadio extends React.Component {
270285
default: '',
271286
description: 'Give a radio input an id.',
272287
allowedTypes: '',
288+
}, {
289+
name: 'isRedacted',
290+
type: 'bool',
291+
default: 'false',
292+
description: 'To prevent sensitive data from being read, we need to be able to block the contents of the control with a gray placeholder. This flag triggers this kind of display instead of the usual one.',
293+
allowedTypes: '',
273294
}, {
274295
name: 'label',
275296
type: 'string',
@@ -561,6 +582,23 @@ export default class ElementsRadio extends React.Component {
561582
<Highlighter customStyle={{ marginBottom: '44px', marginTop: '44px' }}>
562583
{radioGroupPillSample}
563584
</Highlighter>
585+
586+
{/* isRedacted */}
587+
<Header size="large" style={{ marginTop: '55px' }} sub>
588+
isRedacted
589+
<Header.Subheader>
590+
To prevent sensitive data from being read, we need to be able to block the contents of the control with a gray placeholder. This flag triggers this kind of display instead of the usual one.
591+
</Header.Subheader>
592+
</Header>
593+
594+
<Radio isRedacted label="Sensitive data 1" />
595+
<br />
596+
<br />
597+
<Radio checked isRedacted label="Sensitive data 2" />
598+
599+
<Highlighter customStyle={{ marginBottom: '44px', marginTop: '44px' }}>
600+
{isRedactedSample}
601+
</Highlighter>
564602
</Main.Content>
565603
</Main>
566604
);

‎docs/src/inputs/select/devSandbox/devSandbox.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import ExampleDisableSelect from '../examples/exampleDisableSelect';
1313
import ExampleErrorSelect from '../examples/exampleErrorSelect';
1414
import ExampleLabelSelect from '../examples/exampleLabelSelect';
1515
import ExampleMultipleSelect from '../examples/exampleMultipleSelect';
16+
import ExampleIsRedactedSelect from '../examples/exampleIsRedactedSelect';
1617
import ExampleRequiredSelect from '../examples/exampleRequiredSelect';
1718
import ExampleSearchableSelect from '../examples/exampleSearchableSelect';
1819
import Heading from '../../../global/heading';
@@ -156,6 +157,27 @@ function ElementsSelect() {
156157
>
157158
<ExampleCreatableAdvancedSelect />
158159
</Example>
160+
161+
<MarkdownContainer>
162+
<Heading
163+
anchorLink="select-is-redacted"
164+
variant="h2"
165+
>
166+
isRedacted
167+
</Heading>
168+
169+
<Typography
170+
variant="body1"
171+
>
172+
To prevent sensitive data from being read, we need to be able to block the contents of the control with a gray placeholder. This flag triggers this kind of display instead of the usual one.
173+
</Typography>
174+
</MarkdownContainer>
175+
176+
<Example
177+
rawCode={require('!!raw-loader!../examples/exampleIsRedactedSelect').default}
178+
>
179+
<ExampleIsRedactedSelect />
180+
</Example>
159181
</MarkdownContainer>
160182
</Main.Content>
161183
</Main>

‎docs/src/inputs/select/examples/exampleIsRedactedSelect.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { isEmpty } from 'lodash';
2+
import React, { useState } from 'react';
3+
import {
4+
Select,
5+
} from '@saddlebackchurch/react-cm-ui';
6+
import { options } from '../constants';
7+
8+
function ExampleIsRedactedSelect() {
9+
const [selectedValue, setOption] = useState({});
10+
11+
const onSelect = (selectedOption) => {
12+
setOption(selectedOption);
13+
};
14+
15+
return (
16+
<div>
17+
<Select
18+
id="block--is_redacted_select_id"
19+
isRedacted
20+
label="Select User"
21+
onChange={onSelect}
22+
options={options}
23+
placeholder="Select Option"
24+
value={!isEmpty(selectedValue) ? selectedValue : null}
25+
/>
26+
</div>
27+
);
28+
}
29+
30+
export default ExampleIsRedactedSelect;

0 commit comments

Comments
 (0)