@performant-software/semantic-components 0.5.4 → 0.5.7

package/src/components/ItemsToggle.js

@@ -118,12 +118,14 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
         <>
           <Button
             active={this.state.view === Views.list}
+            aria-label='List View'
             basic
             icon='list'
             onClick={() => this.setState({ view: Views.list })}
           />
           <Button
             active={this.state.view === Views.grid}
+            aria-label='Grid View'
             basic
             icon='grid layout'
             onClick={() => this.setState({ view: Views.grid })}
@@ -136,11 +138,13 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
               }}
             >
               <Button
+                aria-label='Sort by'
                 content={this.getSortValue()}
                 icon={this.props.sortDirection === SORT_ASCENDING ? 'sort alphabet up' : 'sort alphabet down'}
                 onClick={(e) => this.sortDropdown.handleClick(e)}
               />
               <Dropdown
+                aria-label='Sort'
                 className='button icon'
                 floating
                 options={_.map(this.props.sort, (sort) => ({

package/src/components/List.js

@@ -544,6 +544,7 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       return (
         <Button
           active={this.props.filters.active}
+          aria-label='Filter'
           basic
           icon='filter'
           onClick={this.onFilterButton.bind(this)}

package/src/components/ListFilters.js

@@ -23,6 +23,7 @@ import i18n from '../i18n/i18n';
 import AssociatedDropdown from './AssociatedDropdown';
 import DropdownButton from './DropdownButton';
 import FuzzyDate from './FuzzyDate';
+import ModalContext from '../context/ModalContext';
 
 type Option = {
   key: string | number,
@@ -286,118 +287,123 @@ const ListFilters = (props: Props) => {
   }, []);
 
   return (
-    <Modal
-      as={Form}
-      centered={false}
-      className='list-filters-modal'
-      noValidate
-      open
-      size='small'
-    >
-      <Modal.Header>
-        <Grid
-          columns={2}
+    <ModalContext.Consumer>
+      { (mountNode) => (
+        <Modal
+          as={Form}
+          centered={false}
+          className='list-filters-modal'
+          mountNode={mountNode}
+          noValidate
+          open
+          size='small'
         >
-          <Grid.Column
-            verticalAlign='middle'
-          >
-            <Header
-              content={i18n.t('ListFilters.title')}
-            />
-          </Grid.Column>
-          <Grid.Column
-            textAlign='right'
-          >
-            <DropdownButton
-              color='green'
-              icon='plus'
-              options={_.map(filters, (filter) => ({
-                key: filter.key,
-                value: filter.key,
-                text: filter.label
-              }))}
-              onChange={(e, { value }) => {
-                const filter = _.findWhere(props.filters, { key: value });
-                props.onSaveChildAssociation('filters', {
-                  ...filter,
-                  uid: uuid(),
-                  operator: Operators.equal
-                });
-              }}
-              scrolling
-              text={i18n.t('ListFilters.buttons.add')}
-              value=''
-            />
-            <Button
-              color='red'
-              content={i18n.t('ListFilters.buttons.reset')}
-              icon='repeat'
-              onClick={() => props.onReset()}
-              style={{
-                marginLeft: '1em'
-              }}
-            />
-          </Grid.Column>
-        </Grid>
-      </Modal.Header>
-      <Modal.Content>
-        { !_.isEmpty(props.item.filters) && (
-          <Grid>
-            { _.map(props.item.filters, (filter) => (
-              <Grid.Row
-                columns={4}
-                key={filter.key}
+          <Modal.Header>
+            <Grid
+              columns={2}
+            >
+              <Grid.Column
                 verticalAlign='middle'
               >
-                <Grid.Column>
-                  <Header
-                    content={filter.label}
-                  />
-                </Grid.Column>
-                <Grid.Column
-                  width={5}
-                >
-                  <Dropdown
-                    options={getOperatorsByType(filter.type)}
-                    onChange={(e, { value }) => props.onSaveChildAssociation('filters', {
-                      ..._.omit(filter, 'value'),
-                      operator: value,
-                    })}
-                    selection
-                    value={filter.operator}
-                  />
-                </Grid.Column>
-                <Grid.Column
-                  width={5}
-                >
-                  { renderInput(filter) }
-                </Grid.Column>
-                <Grid.Column
-                  width={1}
-                >
-                  <Button
-                    basic
-                    icon='times'
-                    onClick={() => {
-                      /*
-                       * If we're removing the last filter, call the onReset prop to ensure the UI doesn't display
-                       * as active.
-                       */
-                      if (props.item.filters && props.item.filters.length === 1) {
-                        props.onReset();
-                      } else {
-                        props.onDeleteChildAssociation('filters', filter);
-                      }
-                    }}
-                  />
-                </Grid.Column>
-              </Grid.Row>
-            ))}
-          </Grid>
-        )}
-      </Modal.Content>
-      { props.children }
-    </Modal>
+                <Header
+                  content={i18n.t('ListFilters.title')}
+                />
+              </Grid.Column>
+              <Grid.Column
+                textAlign='right'
+              >
+                <DropdownButton
+                  color='green'
+                  icon='plus'
+                  options={_.map(filters, (filter) => ({
+                    key: filter.key,
+                    value: filter.key,
+                    text: filter.label
+                  }))}
+                  onChange={(e, { value }) => {
+                    const filter = _.findWhere(props.filters, { key: value });
+                    props.onSaveChildAssociation('filters', {
+                      ...filter,
+                      uid: uuid(),
+                      operator: Operators.equal
+                    });
+                  }}
+                  scrolling
+                  text={i18n.t('ListFilters.buttons.add')}
+                  value=''
+                />
+                <Button
+                  color='red'
+                  content={i18n.t('ListFilters.buttons.reset')}
+                  icon='repeat'
+                  onClick={() => props.onReset()}
+                  style={{
+                    marginLeft: '1em'
+                  }}
+                />
+              </Grid.Column>
+            </Grid>
+          </Modal.Header>
+          <Modal.Content>
+            { !_.isEmpty(props.item.filters) && (
+              <Grid>
+                { _.map(props.item.filters, (filter) => (
+                  <Grid.Row
+                    columns={4}
+                    key={filter.key}
+                    verticalAlign='middle'
+                  >
+                    <Grid.Column>
+                      <Header
+                        content={filter.label}
+                      />
+                    </Grid.Column>
+                    <Grid.Column
+                      width={5}
+                    >
+                      <Dropdown
+                        options={getOperatorsByType(filter.type)}
+                        onChange={(e, { value }) => props.onSaveChildAssociation('filters', {
+                          ..._.omit(filter, 'value'),
+                          operator: value,
+                        })}
+                        selection
+                        value={filter.operator}
+                      />
+                    </Grid.Column>
+                    <Grid.Column
+                      width={5}
+                    >
+                      { renderInput(filter) }
+                    </Grid.Column>
+                    <Grid.Column
+                      width={1}
+                    >
+                      <Button
+                        basic
+                        icon='times'
+                        onClick={() => {
+                          /*
+                           * If we're removing the last filter, call the onReset prop to ensure the UI doesn't display
+                           * as active.
+                           */
+                          if (props.item.filters && props.item.filters.length === 1) {
+                            props.onReset();
+                          } else {
+                            props.onDeleteChildAssociation('filters', filter);
+                          }
+                        }}
+                      />
+                    </Grid.Column>
+                  </Grid.Row>
+                ))}
+              </Grid>
+            )}
+          </Modal.Content>
+          { props.children }
+        </Modal>
+      )}
+    </ModalContext.Consumer>
   );
 };
 

package/src/components/ListTable.js

@@ -10,6 +10,8 @@ import type { Column } from './DataTable';
 
 type Props = {
   columns: Array<Column>,
+  defaultSort?: string,
+  defaultSortDirection?: string,
   page: number,
   onSort: (sortColumn: string, sortDirection: string, page?: number) => void,
   onInit: (page?: number) => void,
@@ -49,12 +51,13 @@ const ListTable = (props: Props) => {
    * sortable column.
    */
   useEffect(() => {
-    const { page, sortColumn, sortDirection = SORT_ASCENDING } = props;
+    const { page, defaultSort, defaultSortDirection = SORT_ASCENDING } = props;
 
-    if (props.sortColumn) {
-      props.onSort(sortColumn, sortDirection, page);
+    if (defaultSort) {
+      props.onSort(defaultSort, defaultSortDirection, page);
     } else {
       const sortableColumn = _.findWhere(props.columns, { sortable: true });
+
       if (sortableColumn) {
         onColumnClick(sortableColumn);
       } else {
@@ -62,7 +65,7 @@ const ListTable = (props: Props) => {
         props.onInit();
       }
     }
-  }, []);
+  }, [props.columns]);
 
   return (
     <DataTable

package/src/components/LoginModal.js

@@ -12,6 +12,7 @@ import {
   Modal
 } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 import './LoginModal.css';
 
 type Props = {
@@ -27,72 +28,78 @@ type Props = {
 };
 
 const LoginModal = (props: Props) => (
-  <Modal
-    as={Form}
-    className='login-modal'
-    error={props.loginFailed}
-    open={props.open}
-    size='small'
-    trigger={props.trigger}
-  >
-    <Header
-      icon='user circle'
-      content={i18n.t('LoginModal.header')}
-    />
-    <Message
-      error
-      header={i18n.t('LoginModal.loginErrorHeader')}
-      content={i18n.t('LoginModal.loginErrorContent')}
-    />
-    <Grid
-      padded='vertically'
-      textAlign='center'
-    >
-      <Grid.Column>
-        <Grid.Row>
-          <Input
-            autoFocus
-            className='form-field'
-            icon={<Icon name='at' />}
-            onChange={props.onUsernameChange.bind(this)}
-            placeholder={props.placeholder}
-            size='huge'
-          />
-        </Grid.Row>
-        <Grid.Row
-          className='row'
-        >
-          <Input
-            className='form-field'
-            icon={<Icon name='lock' />}
-            onChange={props.onPasswordChange.bind(this)}
-            placeholder={i18n.t('LoginModal.password')}
-            size='huge'
-            type='password'
-          />
-        </Grid.Row>
-      </Grid.Column>
-    </Grid>
-    <Modal.Actions>
-      <Button
-        disabled={props.disabled}
-        onClick={props.onLogin.bind(this)}
-        primary
-        size='large'
-        type='submit'
-      >
-        { i18n.t('LoginModal.buttonLogin') }
-      </Button>
-      <Button
-        inverted
-        onClick={props.onClose.bind(this)}
-        primary
-        size='large'
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        as={Form}
+        className='login-modal'
+        error={props.loginFailed}
+        mountNode={mountNode}
+        open={props.open}
+        size='small'
+        trigger={props.trigger}
       >
-        { i18n.t('LoginModal.buttonCancel') }
-      </Button>
-    </Modal.Actions>
-  </Modal>
+        <Header
+          icon='user circle'
+          content={i18n.t('LoginModal.header')}
+        />
+        <Message
+          error
+          header={i18n.t('LoginModal.loginErrorHeader')}
+          content={i18n.t('LoginModal.loginErrorContent')}
+        />
+        <Grid
+          padded='vertically'
+          textAlign='center'
+        >
+          <Grid.Column>
+            <Grid.Row>
+              <Input
+                autoFocus
+                className='form-field'
+                icon={<Icon name='at' />}
+                onChange={props.onUsernameChange.bind(this)}
+                placeholder={props.placeholder}
+                size='huge'
+              />
+            </Grid.Row>
+            <Grid.Row
+              className='row'
+            >
+              <Input
+                className='form-field'
+                icon={<Icon name='lock' />}
+                onChange={props.onPasswordChange.bind(this)}
+                placeholder={i18n.t('LoginModal.password')}
+                size='huge'
+                type='password'
+              />
+            </Grid.Row>
+          </Grid.Column>
+        </Grid>
+        <Modal.Actions>
+          <Button
+            disabled={props.disabled}
+            onClick={props.onLogin.bind(this)}
+            primary
+            size='large'
+            type='submit'
+          >
+            { i18n.t('LoginModal.buttonLogin') }
+          </Button>
+          { props.onClose && (
+            <Button
+              basic
+              onClick={props.onClose.bind(this)}
+              size='large'
+            >
+              { i18n.t('LoginModal.buttonCancel') }
+            </Button>
+          )}
+        </Modal.Actions>
+      </Modal>
+    )}
+  </ModalContext.Consumer>
 );
 
 LoginModal.defaultProps = {

package/src/components/MediaList.js

@@ -43,6 +43,7 @@ const MediaList = (props: Props) => (
           onClick={props.onClick.bind(this, item, i)}
         >
           <Image
+            alt={item.alt}
             src={item.image}
             style={{
               objectFit: 'cover'

package/src/components/MenuBar.js

@@ -50,8 +50,10 @@ const MenuBar = ({ header, items, ...props }: Props) => {
    */
   const renderDropdown = useCallback((item, index) => (
     <DropdownMenu
+      aria-label={item.content}
       item
       key={index}
+      role='group'
       text={item.content}
     >
       { _.map(item.items, (i) => (i.items ? renderDropdown(i) : renderDropdownItem(i)))}

package/src/components/ModalDropdown.js

@@ -3,13 +3,13 @@
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Button, Dropdown } from 'semantic-ui-react';
+import i18n from '../i18n/i18n';
 import './ModalDropdown.css';
 
 type Props = {
   onClear: () => void,
   renderModal: ({ onClose: () => void, open: boolean }) => void,
-  searchQuery: ?string,
-  t: (key: string) => string
+  searchQuery: ?string
 };
 
 type State = {
@@ -51,13 +51,16 @@ class ModalDropdown extends Component<Props, State> {
           onSearchChange={() => {}}
           open={false}
           search
+          searchInput={{
+            'aria-label': 'Search'
+          }}
           selection
           searchQuery={this.props.searchQuery || ''}
         />
         <Button.Group>
           <Button
             basic
-            content={this.props.t('Common.buttons.clear')}
+            content={i18n.t('Common.buttons.clear')}
             icon='times'
             onClick={this.props.onClear.bind(this)}
             type='button'

package/src/components/NestedAccordion.css

@@ -12,6 +12,10 @@
   color: #fff;
 }
 
+.nested-accordion.ui.styled.accordion .title {
+  color: rgba(0,0,0,.6);
+}
+
 .nested-accordion .title > .container {
   display: flex;
   flex-direction: row;

package/src/components/NestedAccordion.js

@@ -230,6 +230,7 @@ class NestedAccordion extends Component<Props, State> {
   renderToggle(item: any) {
     return (
       <Button
+        aria-label='Open'
         compact
         className={this.getButtonClass(item)}
         icon='dropdown'

package/src/components/PhotoViewer.js

@@ -2,9 +2,11 @@
 
 import React from 'react';
 import { Image, Modal } from 'semantic-ui-react';
+import ModalContext from '../context/ModalContext';
 import './PhotoViewer.css';
 
 type Props = {
+  alt?: string,
   image: string,
   onClose: () => void,
   open: boolean,
@@ -12,21 +14,27 @@ type Props = {
 };
 
 const PhotoViewer = (props: Props) => (
-  <Modal
-    centered={false}
-    className='photo-viewer'
-    closeIcon
-    onClose={props.onClose.bind(this)}
-    open={props.open}
-    size={props.size}
-  >
-    <Modal.Content>
-      <Image
-        fluid
-        src={props.image}
-      />
-    </Modal.Content>
-  </Modal>
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        centered={false}
+        className='photo-viewer'
+        closeIcon
+        mountNode={mountNode}
+        onClose={props.onClose.bind(this)}
+        open={props.open}
+        size={props.size}
+      >
+        <Modal.Content>
+          <Image
+            alt={props.alt}
+            fluid
+            src={props.image}
+          />
+        </Modal.Content>
+      </Modal>
+    )}
+  </ModalContext.Consumer>
 );
 
 PhotoViewer.defaultProps = {

package/src/components/ReferenceCodeModal.js

@@ -4,29 +4,35 @@ import type { EditContainerProps } from '@performant-software/shared-components'
 import React from 'react';
 import { Form, Modal } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 
 const ReferenceCodeModal = (props: EditContainerProps) => (
-  <Modal
-    as={Form}
-    centered={false}
-    open
-  >
-    <Modal.Header
-      content={props.item.id
-        ? i18n.t('ReferenceCodeModal.title.edit')
-        : i18n.t('ReferenceCodeModal.title.add')}
-    />
-    <Modal.Content>
-      <Form.Input
-        error={props.isError('name')}
-        label={i18n.t('ReferenceCodeModal.labels.name')}
-        onChange={props.onTextInputChange.bind(this, 'name')}
-        required={props.isRequired('name')}
-        value={props.item.name}
-      />
-    </Modal.Content>
-    { props.children }
-  </Modal>
+  <ModalContext.Consumer>
+    { (mountNode) => (
+      <Modal
+        as={Form}
+        centered={false}
+        mountNode={mountNode}
+        open
+      >
+        <Modal.Header
+          content={props.item.id
+            ? i18n.t('ReferenceCodeModal.title.edit')
+            : i18n.t('ReferenceCodeModal.title.add')}
+        />
+        <Modal.Content>
+          <Form.Input
+            error={props.isError('name')}
+            label={i18n.t('ReferenceCodeModal.labels.name')}
+            onChange={props.onTextInputChange.bind(this, 'name')}
+            required={props.isRequired('name')}
+            value={props.item.name}
+          />
+        </Modal.Content>
+        { props.children }
+      </Modal>
+    )}
+  </ModalContext.Consumer>
 );
 
 export default ReferenceCodeModal;