Skip to content

Commit 6c2d153

Browse files
nick-torresnick-torres
authored
Merge pull request #224 from fedspendingtransparency/mod/10700-share-icon-css
Mod/10700 share icon css
2 parents 7afde89 + b09d181 commit 6c2d153

15 files changed

+93
-56
lines changed

‎components/Picker.jsx‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ const propTypes = {
2828
isFixedWidth: PropTypes.bool,
2929
children: PropTypes.node,
3030
backgroundColor: PropTypes.string,
31-
notEnabled: PropTypes.bool
31+
notEnabled: PropTypes.bool,
32+
buttonClassNames: PropTypes.string,
33+
pickerListClassNames: PropTypes.string
3234
};
3335

3436
const defaultSort = (a, b, selectedOption) => {
@@ -52,7 +54,9 @@ const Picker = ({
5254
children,
5355
dropdownDirection = 'right',
5456
backgroundColor = '#1a4480',
55-
notEnabled
57+
notEnabled,
58+
buttonClassNames = "",
59+
pickerListClassNames = ""
5660
}) => {
5761
const pickerRef = useRef(null);
5862
const buttonRef = useRef(null);
@@ -97,11 +101,11 @@ const Picker = ({
97101
useEffect(() => {
98102
const closeMenu = (e) => {
99103
if ((
100-
expanded &&
101-
pickerRef.current &&
102-
!pickerRef.current.contains(e.target) &&
103-
e.target.id !== `${id}-${fontAwesomeIconId}` &&
104-
e.target.parentNode.id !== `${id}-${fontAwesomeIconId}`
104+
expanded
105+
&& pickerRef.current
106+
&& !pickerRef.current.contains(e.target)
107+
&& e.target.id !== `${id}-${fontAwesomeIconId}`
108+
&& e.target.parentNode.id !== `${id}-${fontAwesomeIconId}`
105109
)) {
106110
setExpanded(false);
107111
}
@@ -149,39 +153,40 @@ const Picker = ({
149153
};
150154

151155
return (
152-
<div id={id} className={`usa-dt-picker ${className}`} ref={pickerRef} style={{backgroundColor: backgroundColor}}>
153-
<div className="usa-dt-picker__dropdown-container" style={{ backgroundColor: backgroundColor }}>
156+
<div id={id} className={`usa-dt-picker ${className}`} ref={pickerRef} style={{ backgroundColor }}>
157+
<div className="usa-dt-picker__dropdown-container" style={{ backgroundColor }}>
154158
<button
155-
style={{ backgroundColor: backgroundColor }}
159+
style={{ backgroundColor }}
156160
ref={buttonRef}
161+
type="button"
157162
aria-label="Dropdown Toggle Button"
158-
className="usa-dt-picker__button"
163+
className={`usa-dt-picker__button ${buttonClassNames}`}
159164
onClick={toggleMenu}>
160165

161166
{icon && (
162-
<div className="usa-dt-picker__icon" >
167+
<div className="usa-dt-picker__icon">
163168
{icon}
164169
</div>
165170
)}
166171

167-
{children ?
168-
<>{ children }</> :
169-
<>
170-
<span className="usa-dt-picker__button-text" style={{ backgroundColor: backgroundColor }}>
171-
{selectedOption}
172-
</span>
173-
<span className="usa-dt-picker__button-icon">
174-
{!expanded && (
175-
<FontAwesomeIcon id={`${id}-${fontAwesomeIconId}`} icon="chevron-down" alt="Toggle menu" color="#555" />
176-
)}
177-
{expanded && (
178-
<FontAwesomeIcon id={`${id}-${fontAwesomeIconId}`} icon="chevron-up" alt="Toggle menu" color="#555" />
179-
)}
180-
</span>
181-
</>
182-
}
172+
{children
173+
|| (
174+
<>
175+
<span className="usa-dt-picker__button-text" style={{ backgroundColor }}>
176+
{selectedOption}
177+
</span>
178+
<span className="usa-dt-picker__button-icon">
179+
{!expanded && (
180+
<FontAwesomeIcon id={`${id}-${fontAwesomeIconId}`} icon="chevron-down" alt="Toggle menu" color="#555" />
181+
)}
182+
{expanded && (
183+
<FontAwesomeIcon id={`${id}-${fontAwesomeIconId}`} icon="chevron-up" alt="Toggle menu" color="#555" />
184+
)}
185+
</span>
186+
</>
187+
)}
183188
</button>
184-
<ul className={`usa-dt-picker__list ${expanded ? '' : 'hide'}`} style={getDropdownListStyles()}>
189+
<ul className={`usa-dt-picker__list ${pickerListClassNames} ${expanded ? '' : 'hide'}`} style={getDropdownListStyles()}>
185190
{options
186191
.sort(handleSort)
187192
.map((option) => ({
@@ -192,6 +197,7 @@ const Picker = ({
192197
<li key={uniqueId()} className={`usa-dt-picker__list-item ${option?.classNames ? option.classNames : ''}`}>
193198
<button
194199
className={`usa-dt-picker__item ${option.name === selectedOption ? 'active' : ''}`}
200+
type="button"
195201
value={`${option.value || option.name}`}
196202
onClick={(e) => {
197203
e.preventDefault();
@@ -205,8 +211,7 @@ const Picker = ({
205211
{option.component ? option.component : option.name}
206212
</button>
207213
</li>
208-
))
209-
}
214+
))}
210215
</ul>
211216
</div>
212217
</div>

‎components/ShareIcon.jsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,38 @@ const propTypes = {
1717
dropdownDirection: PropTypes.string,
1818
downloadInFlight: PropTypes.bool,
1919
isEnabled: PropTypes.bool,
20-
noShareText: PropTypes.bool
20+
noShareText: PropTypes.bool,
21+
keepText: PropTypes.bool,
22+
pickerButtonClassNames: PropTypes.string,
23+
pickerListClassNames: PropTypes.string
2124
};
2225

23-
function ShareIcon({
26+
const ShareIcon = ({
2427
includedDropdownOptions = [],
2528
classNames = '',
2629
url = '',
2730
onShareOptionClick = () => {},
2831
colors = {
2932
color: "#dfe1e2",
30-
backgroundColor: "#1a4480"
33+
backgroundColor: "#1a4480",
34+
confirmationBackgroundColor: "#f1f1f1"
3135
},
3236
dropdownDirection = 'left',
3337
downloadInFlight,
3438
isEnabled = true,
35-
noShareText
36-
}) {
39+
noShareText,
40+
keepText = false,
41+
pickerButtonClassNames = '',
42+
pickerListClassNames = ""
43+
}) => {
3744
const [showConfirmationText, setConfirmationText] = useState(false);
3845
const hideConfirmationText = debounce(() => setConfirmationText(false), 1750);
3946
const disabledClass = downloadInFlight || !isEnabled ? ' disabled' : '';
4047

4148
const copyLink = () => {
4249
Array
4350
.from(document.querySelectorAll('.js-dtui-url-for-share-icon'))
51+
// eslint-disable-next-line consistent-return
4452
.forEach((node) => {
4553
if (node.value.includes(url)) {
4654
return node.select();
@@ -107,6 +115,8 @@ function ShareIcon({
107115
value={url}
108116
readOnly />
109117
<Picker
118+
buttonClassNames={pickerButtonClassNames}
119+
pickerListClassNames={pickerListClassNames}
110120
dropdownDirection={dropdownDirection}
111121
options={socialSharePickerOptions}
112122
selectedOption="copy"
@@ -115,17 +125,17 @@ function ShareIcon({
115125
sortFn={() => 1}>
116126
<FontAwesomeIcon icon="share-alt" size="lg" color={colors.color} />
117127
</Picker>
118-
{!noShareText && <span className="usda-share-icon__share-text">Share</span>}
128+
{!noShareText && <span className={"usda-share-icon__share-text " + `${keepText ? 'keep-text' : ''}`}>Share</span>}
119129
{showConfirmationText && (
120-
<div className="copy-confirmation">
130+
<div className={"copy-confirmation " + `${keepText ? 'keep-text' : ''}`} style={{ backgroundColor: colors.confirmationBackgroundColor }}>
121131
<FontAwesomeIcon icon={faCheckCircle} />
122132
{' '}
123133
Copied!
124134
</div>
125135
)}
126136
</div>
127137
);
128-
}
138+
};
129139

130140
ShareIcon.propTypes = propTypes;
131141
ShareIcon.displayName = 'Share Icon';

0 commit comments

Comments
 (0)