@performant-software/semantic-components 0.5.4 → 0.5.5

package/src/index.js

@@ -1,5 +1,8 @@
 // @flow
 
+// Semantic UI styles
+import './css/style.less';
+
 // Components
 export { default as AccordionDataList } from './components/AccordionDataList';
 export { default as AccordionList } from './components/AccordionList';

package/types/components/AccordionDataList.js.flow

@@ -61,6 +61,7 @@ const Accordion = useList((props: AccordionProps) => {
       <Button.Group>
         { _.map(actions, (action, index) => (
           <Button
+            aria-label={action.name}
             basic
             color={action.color}
             icon={action.icon}
@@ -166,11 +167,13 @@ const AccordionDataList = (props: Props) => {
         }}
       >
         <Button
+          aria-label='Sort by'
           content={sortValue}
           icon={props.sortDirection === SORT_ASCENDING ? 'sort alphabet up' : 'sort alphabet down'}
           onClick={(e) => sortDropdown.current && sortDropdown.current.handleClick(e)}
         />
         <Dropdown
+          aria-label='Sort by toggle'
           className='button icon'
           floating
           options={_.map(props.sort, (sort) => ({

package/types/components/AccordionList.js.flow

@@ -267,6 +267,7 @@ class AccordionList extends Component<Props, State> {
           className='accordion-header'
         >
           <Input
+            aria-label='Search'
             autoFocus
             className='search'
             icon='search'
@@ -329,6 +330,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Add'
         basic
         compact
         icon='plus'
@@ -349,6 +351,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Checkbox
+        aria-label='Select All'
         onClick={(e, el) => this.props.onSelectAll(el, toBeSelected, this.state.items, e)}
         checked={!toBeSelected.length}
       />
@@ -399,6 +402,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Delete'
         basic
         compact
         icon='trash'
@@ -421,6 +425,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Edit'
         basic
         compact
         icon='edit'
@@ -443,6 +448,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Copy'
         basic
         compact
         icon='copy'
@@ -551,6 +557,7 @@ class AccordionList extends Component<Props, State> {
     const selected = this.props.selectedRows.find((r) => r.id === item.id);
     return (
       <Checkbox
+        aria-label='Select'
         key={`select-checkbox-${item.id}`}
         className='row-select-checkbox'
         onClick={(e, el) => this.props.onRowSelect(el, item, e)}

package/types/components/ArrowButtons.js.flow

@@ -23,11 +23,13 @@ const ArrowButtons = (props: Props) => (
     vertical
   >
     <Button
+      aria-label='Move Right'
       basic
       icon='arrow right'
       onClick={props.onRight.bind(this)}
     />
     <Button
+      aria-label='Move Left'
       basic
       icon='arrow left'
       onClick={props.onLeft.bind(this)}

package/types/components/CancelButton.js.flow

@@ -11,10 +11,9 @@ type Props = {
 
 const CancelButton = (props: Props) => (
   <Button
+    basic
     disabled={props.disabled}
-    inverted
     onClick={props.onClick.bind(this)}
-    primary
     size='medium'
     type='button'
   >

package/types/components/DataList.js.flow

@@ -471,6 +471,7 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
 
       return (
         <Input
+          aria-label='Search'
           type='text'
           icon='search'
           input={{

package/types/components/DataTable.js.flow

@@ -240,6 +240,7 @@ class DataTable extends Component<Props, State> {
 
     const actionButton = (
       <Button
+        aria-label={action.name}
         basic
         compact
         color={action.color}

package/types/components/DataTableColumnSelector.js.flow

@@ -111,11 +111,12 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
         <>
           { this.props.renderListHeader && this.props.renderListHeader() }
           <Dropdown
+            aria-label='Select Columns'
             basic
             button
             icon='cog'
             className='icon configure-button open-right'
-            simple
+            closeOnBlur={false}
           >
             <Dropdown.Menu>
               { this.state.columns
@@ -127,11 +128,15 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
                     key={c.name}
                     onDrag={this.onDrag.bind(this)}
                   >
-                    <Dropdown.Item>
+                    <Dropdown.Item
+                      aria-dropeffect='move'
+                      onClick={(e) => e.stopPropagation()}
+                    >
                       <Icon
                         name='bars'
                       />
                       <Checkbox
+                        aria-label='Select Column'
                         checked={!c.hidden}
                         label={c.label}
                         onClick={this.onColumnCheckbox.bind(this, c)}

package/types/components/DateInput.js.flow

@@ -28,6 +28,7 @@ const DateInput = (props: Props) => {
 
   return (
     <Input
+      aria-label='Date Input'
       className='date-input icon'
       icon='calendar alternate outline'
       iconPosition='left'

package/types/components/DatePicker.js.flow

@@ -62,9 +62,13 @@ const DatePicker = (props: Props) => {
                 setCalendar(false);
               }
             }}
+            next2AriaLabel='Next Year'
             next2Label={<Icon name='angle double right' />}
+            nextAriaLabel='Next Month'
             nextLabel={<Icon name='chevron right' />}
+            prev2AriaLabel='Previous Year'
             prev2Label={<Icon name='angle double left' />}
+            prevAriaLabel='Previous Month'
             prevLabel={<Icon name='chevron left' />}
             value={props.value}
           />

package/types/components/DropdownButton.js.flow

@@ -34,12 +34,14 @@ const DropdownButton = (props: Props) => {
       color={props.color}
     >
       <Button
+        aria-label='Select'
         content={props.text}
         disabled={props.disabled}
         icon={props.icon}
         onClick={(e) => dropdownRef.current && dropdownRef.current.handleClick(e)}
       />
       <Dropdown
+        aria-label='Select'
         className='button icon'
         direction={props.direction}
         disabled={props.disabled}

package/types/components/EditModal.js.flow

@@ -78,10 +78,9 @@ const EditModal = (props: Props) => {
           )}
         </Button>
         <Button
+          basic
           disabled={props.saving}
-          inverted
           onClick={props.onClose.bind(this)}
-          primary
           size='medium'
           type='button'
         >

package/types/components/HorizontalCards.js.flow

@@ -170,6 +170,7 @@ const HorizontalCards = (props: Props) => {
     if (_.isString(image) || !image) {
       return (
         <Image
+          alt={item.alt}
           className='image-placeholder'
           src={image}
           style={{
@@ -201,12 +202,14 @@ const HorizontalCards = (props: Props) => {
             className='pagination'
           >
             <Button
+              aria-label='Left'
               basic
               circular
               icon='angle left'
               onClick={onPageChange.bind(this, -1)}
             />
             <Button
+              aria-label='Right'
               basic
               circular
               icon='angle right'

package/types/components/Items.js.flow

@@ -168,6 +168,7 @@ class Items extends Component<Props, {}> {
           >
             { _.map(this.getActions(item), (action, actionIndex) => (
               <Button
+                aria-label={action.name}
                 basic
                 color={action.resolveColor ? action.resolveColor(item) : action.color}
                 icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
@@ -177,6 +178,7 @@ class Items extends Component<Props, {}> {
             ))}
             { this.isSelectable() && (
               <Button
+                aria-label='Select'
                 basic
                 color={this.props.isRowSelected && this.props.isRowSelected(item) ? 'green' : undefined}
                 icon='checkmark'

package/types/components/ItemsToggle.js.flow

@@ -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/types/components/List.js.flow

@@ -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/types/components/MediaList.js.flow

@@ -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/types/components/MenuBar.js.flow

@@ -50,6 +50,7 @@ const MenuBar = ({ header, items, ...props }: Props) => {
    */
   const renderDropdown = useCallback((item, index) => (
     <DropdownMenu
+      aria-label={item.content}
       item
       key={index}
       text={item.content}

package/types/components/ModalDropdown.js.flow

@@ -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/types/components/NestedAccordion.js.flow

@@ -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/types/components/RemoteDropdown.js.flow

@@ -311,6 +311,7 @@ class RemoteDropdown extends Component<Props, State> {
         scrolling
         search={() => this.getSearchOptions()}
         searchInput={{
+          'aria-label': 'Search',
           className: 'remote-dropdown-search-input',
           onKeyDown: Timer.clearSearchTimer.bind(this),
           onKeyUp: Timer.setSearchTimer.bind(this, this.onSearch.bind(this))

package/types/css/theme.js.flow

@@ -0,0 +1,5 @@
+// @flow
+
+import 'semantic-ui-less/semantic.less';
+
+export default {};

package/types/index.js.flow

@@ -1,5 +1,8 @@
 // @flow
 
+// Semantic UI styles
+import './css/style.less';
+
 // Components
 export { default as AccordionDataList } from './components/AccordionDataList';
 export { default as AccordionList } from './components/AccordionList';

package/webpack.config.js

@@ -1,3 +1,28 @@
 const { configure } = require('@performant-software/webpack-config');
+const path = require('path');
 
-module.exports = configure(__dirname);
+module.exports = configure(__dirname, {
+  resolve: {
+    alias: {
+      '../../theme.config$': path.join(__dirname, '/src/css/theme.config'),
+      '../src/css/site': path.join(__dirname, '/src/css/site')
+    }
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        semantic: {
+          name: 'semantic-ui',
+          test: /\.less$/,
+          chunks: 'all',
+          enforce: true
+        },
+        main: {
+          name: 'main',
+          chunks: 'all',
+          enforce: true
+        }
+      }
+    }
+  }
+});