Button component

assets/agenda/components/AgendaCoverageRequest.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import {gettext} from 'utils';
+import {Button} from '../../components/Buttons';
 
 
 class AgendaCoverageRequest extends React.Component<any, any> {
@@ -51,19 +52,17 @@ class AgendaCoverageRequest extends React.Component<any, any> {
                     </div>
                 </div>
                 <div className='nh-button__group'>
-                    <input
-                        type='button'
-                        className='nh-button nh-button--secondary'
+                    <Button
                         value={gettext('Cancel')}
+                        variant='secondary'
                         onClick={this.reset}
-                    ></input>
-                    <input
-                        type='button'
-                        className='nh-button nh-button--primary'
+                    />
+                    <Button
                         value={gettext('Submit inquiry')}
+                        variant='primary'
                         disabled={!this.state.message}
                         onClick={this.requestCoverage}
-                    ></input>
+                    />
                 </div>
             </div>
         </div>);

assets/agenda/components/AgendaListGroupHeader.tsx

@@ -5,7 +5,8 @@
 import {formatDate, gettext} from 'utils';
 import {getCoverageIcon} from '../utils';
 
 import {Skeleton} from 'primereact/skeleton';
+import {Button} from '../../components/Buttons';
 
 interface IProps {
     group: string;
@@ -46,7 +47,7 @@
         }
 
         if (coverageAdded) {
             itemCount += 1;
         }
     }
 
@@ -79,14 +80,14 @@
                 </React.Fragment>
             )}
             <div className="list-group-header__actions">
-                <button
-                    className="nh-button nh-button--tertiary nh-button--small"
+                <Button
+                    value={itemsShown ? gettext('Hide') : gettext('Show all')}
+                    variant='tertiary'
+                    size='small'
                     onClick={() => {
                         toggleHideItems(group);
                     }}
-                >
-                    {itemsShown ? gettext('Hide') : gettext('Show all')}
-                </button>
+                />
             </div>
         </div>
     );

assets/agenda/components/AgendaListItem.tsx

@@ -205,7 +205,7 @@
             const span = paragraph.getElementsByClassName('es-highlight');
 
             if (span.length > 0) {
                 [...arrayOfParagraphs].slice(i, arrayOfParagraphs.length).forEach((paragraph, i) => {
                     if (segmentsRemainingToBeAdded > 0) {
                         paragraphsInnerText += paragraph.innerText;
                         paragraph.innerHTML = paragraph.innerHTML.split('<br>').filter((p: string) => p.trim() !== '').slice(0, segmentsRemainingToBeAdded).join('<br>');
@@ -385,9 +385,8 @@
                 {!this.props.showShortcutActionIcons ? null : this.props.actions.map((action) => action.shortcut && (
                     <ActionButton
                         key={action.name}
-                        className="icon-button icon-button--primary"
+                        variant='primary'
                         action={action}
-                        isVisited={action.visited && action.visited(this.props.user, this.props.item)}
                         item={this.props.item}
                     />
                 ))}
@@ -415,9 +414,8 @@
                 {!this.props.showShortcutActionIcons ? null : this.props.actions.map((action) => action.shortcut && (
                     <ActionButton
                         key={action.name}
-                        className="icon-button icon-button--primary"
+                        variant='primary'
                         action={action}
-                        isVisited={action.visited && action.visited(this.props.user, this.props.item)}
                         item={this.props.item} />
                 ))}
 

assets/agenda/components/CoverageItemStatus.tsx

@@ -54,7 +54,7 @@
         }
     }
 
     componentWillReceiveProps(nextProps: any) {
         this.setWireItem(nextProps);
     }
 
@@ -83,10 +83,11 @@
             <ActionButton
                 key={action.name}
                 item={coverage}
-                className='icon-button icon-button--small icon-button--bordered icon-button--tertiary'
+                variant='tertiary'
+                border
+                size='small'
                 action={action}
                 plan={this.props.item}
-                isVisited={parentWatched}
                 disabled={parentWatched}
             />
         );

assets/agenda/components/preview/coverage/CoverageActions.tsx

@@ -59,15 +59,16 @@ function CoverageActionsComponent({
         <ActionButton
             key={action.name}
             item={coverage}
-            className="icon-button icon-button--small icon-button--bordered icon-button--tertiary ms-auto"
             action={{
                 ...action,
                 action: () => {
                     action.action(coverage, agenda);
                 },
             }}
+            variant='tertiary'
+            size='small'
+            border
             plan={agenda}
-            isVisited={parentWatched}
             disabled={parentWatched}
         />
     ));

assets/am-news/components/AmNewsListItem.tsx

@@ -147,9 +147,8 @@ class AmNewsListItem extends React.Component<any, any> {
                             action.shortcut &&
                           <ActionButton
                               key={action.name}
-                              className="icon-button icon-button--primary"
+                              variant='primary'
                               action={action}
-                              isVisited={action.visited && action.visited(this.props.user, this.props.item)}
                               item={this.props.item} />
                         )}
                     </div>

assets/cards/components/EditCard.tsx

@@ -11,6 +11,8 @@ import {
     CARD_TYPES,
     getCardEditComponent,
 } from 'components/cards/utils';
+import {Button} from 'components/Buttons';
+import CloseButton from 'components/CloseButton';
 
 
 class EditCard extends React.Component<any, any> {
@@ -45,15 +47,7 @@ class EditCard extends React.Component<any, any> {
             <div className='list-item__preview' role={gettext('dialog')} aria-label={gettext('Edit Cards')}>
                 <div className='list-item__preview-header'>
                     <h3>{this.props.card.label}</h3>
-                    <button
-                        id='hide-sidebar'
-                        type='button'
-                        className='icon-button'
-                        data-bs-dismiss='modal'
-                        aria-label={gettext('Close')}
-                        onClick={this.props.onClose}>
-                        <i className="icon--close-thin" aria-hidden='true'></i>
-                    </button>
+                    <CloseButton onClick={this.props.onClose} />
                 </div>
                 <AuditInformation item={this.props.card} />
                 <form>
@@ -84,16 +78,16 @@ class EditCard extends React.Component<any, any> {
                         <CardComponent {...cardProps}/>
                     </div>
                     <div className='list-item__preview-footer'>
-                        <input
-                            type='button'
-                            className='nh-button nh-button--secondary'
+                        <Button
                             value={gettext('Delete')}
-                            onClick={this.props.onDelete}/>
-                        <input
-                            type='button'
-                            className='nh-button nh-button--primary'
+                            variant='secondary'
+                            onClick={this.props.onDelete}
+                        />
+                        <Button
                             value={gettext('Save')}
-                            onClick={this.props.onSave}/>
+                            variant='primary'
+                            onClick={this.props.onSave}
+                        />
                     </div>
                 </form>
             </div>

assets/companies/components/CompanyPermissions.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {gettext} from 'utils';
 
 import CheckboxInput from 'components/CheckboxInput';
+import {Button} from 'components/Buttons';
 
 function CompanyPermissions({
     company,
@@ -160,11 +161,11 @@ function CompanyPermissions({
 
                 </div>
                 <div className='list-item__preview-footer'>
-                    <input
+                    <Button
                         data-test-id="save-btn"
-                        type='submit'
-                        className='nh-button nh-button--primary'
                         value={gettext('Save')}
+                        type='submit'
+                        variant='primary'
                     />
                 </div>
             </form>

assets/companies/components/EditCompany.tsx

@@ -24,6 +24,8 @@ import CompanyPermissions from './CompanyPermissions';
 import EditCompanyAPI from './EditCompanyAPI';
 import AuditInformation from 'components/AuditInformation';
 import {EditCompanyDetails} from './EditCompanyDetails';
+import {Button} from 'components/Buttons';
+import CloseButton from 'components/CloseButton';
 
 interface IStateProps {
     company: ICompany;
@@ -164,14 +166,7 @@ class EditCompany extends React.Component<IProps, IState> {
             >
                 <div className='list-item__preview-header'>
                     <h3>{this.props.company.name}</h3>
-                    <button
-                        id='hide-sidebar'
-                        type='button'
-                        className='icon-button'
-                        aria-label={gettext('Close')}
-                        onClick={this.props.cancelEdit}>
-                        <i className="icon--close-thin" aria-hidden='true' />
-                    </button>
+                    <CloseButton onClick={this.props.cancelEdit} />
                 </div>
                 <AuditInformation item={this.props.company} />
                 {this.props.company.is_approved !== false ? null : (
@@ -182,14 +177,13 @@ class EditCompany extends React.Component<IProps, IState> {
                             </label>
                         </div>
                         <div className="list-item__preview-toolbar-right">
-                            <button
-                                type="submit"
-                                className="nh-button nh-button--tertiary nh-button--small"
-                                aria-label={gettext('Approve Company & Users')}
+                            <Button
+                                value={gettext('Approve Company & Users')}
+                                type='submit'
+                                variant='tertiary'
+                                size='small'
                                 onClick={this.approveCompany}
-                            >
-                                {gettext('Approve Company & Users')}
-                            </button>
+                            />
                         </div>
                     </div>
                 )}

assets/companies/components/EditCompanyDetails.tsx

@@ -8,6 +8,7 @@ import TextInput from 'components/TextInput';
 import SelectInput from 'components/SelectInput';
 import DateInput from 'components/DateInput';
 import CheckboxInput from 'components/CheckboxInput';
+import {Button} from 'components/Buttons';
 import TextListInput from 'components/TextListInput';
 
 interface IProps {
@@ -191,17 +192,17 @@ export function EditCompanyDetails({
 
             </div>
             <div className='list-item__preview-footer'>
-                {company._id && <input
-                    type='button'
-                    className='nh-button nh-button--secondary'
-                    value={gettext('Delete')}
-                    onClick={deleteCompany}
-                />}
-                <input
-                    data-test-id="save-btn"
-                    type='button'
-                    className='nh-button nh-button--primary'
+                {company._id && (
+                    <Button
+                        value={gettext('Delete')}
+                        variant='secondary'
+                        onClick={deleteCompany}
+                    />
+                )}
+                <Button
                     value={gettext('Save')}
+                    variant='primary'
+                    data-test-id="save-btn"
                     onClick={save}
                 />
             </div>

assets/company-admin/components/CompanyDetailsProductRow.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import {gettext, getConfig} from 'utils';
 import classNames from 'classnames';
+import {Button} from 'components/Buttons';
 
 export function CompanyDetailsProductRow({product, onNameClicked, showSeatRequestModal}: any) {
     const unlimited = product.max_seats == null || product.max_seats < 1;
@@ -28,12 +29,12 @@ export function CompanyDetailsProductRow({product, onNameClicked, showSeatReques
             <td className="font-light">{product.description}</td>
             {getConfig('allow_companies_to_manage_products') && !unlimited && (
                 <td>
-                    <button
-                        className="nh-button nh-button--tertiary nh-button--small"
+                    <Button
+                        value={gettext('Request more seats')}
+                        variant='tertiary'
+                        size='small'
                         onClick={() => showSeatRequestModal([product._id])}
-                    >
-                        {gettext('Request more seats')}
-                    </button>
+                    />
                 </td>
             )}
         </tr>

assets/company-reports/components/CompanyReportsApp.tsx

@@ -9,7 +9,6 @@ import {
 } from '../actions';
 import {gettext} from 'utils';
 import {panels} from '../utils';
-
 import type {IProduct, ICompany} from 'interfaces';
 import type {UserType} from 'company-reports/types';
 

assets/company-reports/components/ContentActivity.tsx

@@ -5,6 +5,7 @@ import {gettext, formatTime} from '../../utils';
 import {fetchReport, REPORTS} from '../actions';
 
 import ReportsTable from './ReportsTable';
+import {Button} from 'components/Buttons';
 import {ContentActivityFilters} from './ContentActivityFilters';
 
 
@@ -156,14 +157,12 @@ class ContentActivity extends React.Component<IProps, any> {
                 <div className="align-items-center d-flex flex-sm-nowrap flex-wrap m-0 px-3 wire-column__main-header-agenda">
                     <ContentActivityFilters />
 
-                    <button
-                        key='content_activity_export'
-                        className="nh-button nh-button--secondary ms-auto me-3"
-                        type="button"
+                    <Button
+                        value={gettext('Export to CSV')}
+                        variant='secondary'
+                        className='ms-auto me-3'
                         onClick={this.exportToCSV}
-                    >
-                        {gettext('Export to CSV')}
-                    </button>
+                    />
                 </div>
                 <ReportsTable
                     key='report_table'