Import relationships

.firebaserc

@@ -1,8 +1,5 @@
 {
   "projects": {
-    "default": "impact-nz-dev",
-    "dev": "impact-nz-dev",
-    "development": "impact-nz-dev",
-    "a11y": "impact-nz-dev-a11y"
+    "default": "impactoss-demo-fw"
   }
 }

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.prettierignore

@@ -2,6 +2,8 @@ build/
 node_modules/
 internals/generators/
 internals/scripts/
+internals/webpack/
 package-lock.json
 yarn.lock
 package.json
+eslint.config.mjs

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 80,
+  "printWidth": 120,
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,

app/app.js

@@ -15,8 +15,14 @@ import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
+
+// Import ThemeProvider
+import { Grommet } from 'grommet';
+
+import { StyleSheetManager } from 'styled-components';
+import isPropValid from '@emotion/is-prop-valid';
+
 import 'sanitize.css/sanitize.css';
-import './fonts.css';
 
 // Import root app
 import App from 'containers/App';
@@ -27,13 +33,7 @@ import { makeSelectLocationState } from 'containers/App/selectors';
 // Import Language Provider
 import LanguageProvider from 'containers/LanguageProvider';
 
-// Import ThemeProvider
-import { Grommet } from 'grommet';
-
-import { StyleSheetManager } from 'styled-components';
-import isPropValid from '@emotion/is-prop-valid';
-
-import theme from 'themes/theme-nz';
+import theme from 'themes/theme-base';
 import './fonts/fonts.css';
 
 import configureStore from './store';
@@ -116,7 +116,7 @@ if (!window.Intl) {
 } else {
   render(translationMessages);
 }
-
+/*
 // Install ServiceWorker and AppCache in the end since
 // it's not most important operation and if main code fails,
 // we do not want it installed
@@ -129,4 +129,4 @@ if (process.env.NODE_ENV === 'production') {
       runtime.applyUpdate();
     },
   });
-}
+}*/

app/components/Accordion/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'grommet';
+import styled from 'styled-components';
+import { without } from 'lodash/array';
+
+import AccordionHeader from 'components/AccordionHeader';
+
+const getActives = ({ activePanels, panelId, single }) => {
+  const changeToOpen = activePanels.indexOf(panelId) === -1;
+  if (single) {
+    return changeToOpen ? [panelId] : [];
+  }
+  return changeToOpen ? [...activePanels, panelId] : without(activePanels, panelId);
+};
+
+const StyledButton = styled((p) => <Button plain {...p} />)`
+  width: 100%;
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+export function Accordion({
+  activePanels,
+  onActive,
+  single,
+  options,
+}) {
+  return (
+    <div>
+      {options.filter((o) => !!o).map((option) => {
+        const open = activePanels.indexOf(option.id) > -1;
+        return (
+          <div key={option.id}>
+            <div>
+              <StyledButton
+                onClick={() => onActive(
+                  getActives({ activePanels, panelId: option.id, single })
+                )}
+              >
+                <AccordionHeader
+                  title={option.titleButton}
+                  open={open}
+                />
+              </StyledButton>
+            </div>
+            {open && option.content && (
+              <div>
+                {option.content}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+Accordion.propTypes = {
+  activePanels: PropTypes.array,
+  onActive: PropTypes.func,
+  single: PropTypes.bool,
+  options: PropTypes.array,
+};
+
+export default Accordion;

app/components/AccordionHeader/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Heading, Text } from 'grommet';
+import { Up, Down } from 'grommet-icons';
+import styled from 'styled-components';
+
+import PrintHide from 'components/styled/PrintHide';
+import PrintOnly from 'components/styled/PrintOnly';
+
+const StyledBox = styled((p) => (
+  <Box
+    direction="row"
+    gap="small"
+    align="center"
+    pad={{ vertical: 'small', left: 'xxsmall', right: 'xsmall' }}
+    {...p}
+  />
+))`
+  border-bottom: 1px solid;
+`;
+
+function AccordionHeader({ title, open, level = 1 }) {
+  // prettier-ignore
+  return (
+    <StyledBox>
+      <Box>
+        <Heading
+          responsive={false}
+          level={6}
+          margin={{ vertical: 'xsmall' }}
+          style={level === 2 ? { fontWeight: 400 } : {}}
+        >
+          {title}
+        </Heading>
+      </Box>
+      <Box margin={{ left: 'auto' }}>
+        <PrintHide>
+          {!open && <Down size="small" />}
+          {open && <Up size="small" />}
+        </PrintHide>
+        <PrintOnly>
+          {!open && <Text size="xsmall">(hidden)</Text>}
+        </PrintOnly>
+      </Box>
+    </StyledBox>
+  );
+}
+
+AccordionHeader.propTypes = {
+  title: PropTypes.string,
+  open: PropTypes.bool,
+  level: PropTypes.number,
+};
+
+export default AccordionHeader;

app/components/EntityListDownload/OptionGroupToggle.js

@@ -52,7 +52,7 @@ export function OptionGroupToggle({
           <Box direction="row" align="center" gap="xsmall">
             {typeof activeCount !== 'undefined' && activeCount > 0 && (
               <Count alignContent="center" align="center" justify="center">
-                <Text color="black" size="small">{`${activeCount}/${optionCount}`}</Text>
+                <Text color="white" size="small">{`${activeCount}/${optionCount}`}</Text>
               </Count>
             )}
             {expanded && (

app/components/EntityListDownload/index.js

@@ -393,25 +393,25 @@ export function EntityListDownload({
               margin={{ top: 'xlarge' }}
             >
               <Box
-                direction={(isMinSize(size, 'medium') || !csvSuffix) ? 'row' : 'column'}
-                align={(isMinSize(size, 'medium') || !csvSuffix) ? 'center' : 'start'}
+                direction={(isMinSize(size, 'small') || !csvSuffix) ? 'row' : 'column'}
+                align={(isMinSize(size, 'small') || !csvSuffix) ? 'center' : 'start'}
                 gap="small"
                 fill={false}
               >
                 <OptionLabel htmlFor="input-filename">
                   <FormattedMessage {...messages.filenameLabel} />
                 </OptionLabel>
                 <Box
-                  direction={(isMinSize(size, 'medium') || !csvSuffix) ? 'row' : 'column'}
-                  align={(isMinSize(size, 'medium') || !csvSuffix) ? 'center' : 'start'}
-                  gap={(isMinSize(size, 'medium') || !csvSuffix) ? 'none' : 'small'}
+                  direction={(isMinSize(size, 'small') || !csvSuffix) ? 'row' : 'column'}
+                  align={(isMinSize(size, 'small') || !csvSuffix) ? 'center' : 'start'}
+                  gap={(isMinSize(size, 'small') || !csvSuffix) ? 'none' : 'small'}
                 >
                   <TextInput
                     minLength={1}
                     debounceTimeout={500}
                     value={csvFilename}
                     onChange={(evt) => setCSVFilename(evt.target.value)}
-                    style={{ maxWidth: '250px', textAlign: isMinSize(size, 'medium') ? 'right' : 'left' }}
+                    style={{ maxWidth: '250px', textAlign: isMinSize(size, 'small') ? 'right' : 'left' }}
                   />
                   <Text size="xsmall">
                     {`${csvSuffix ? csvDateSuffix : ''}.csv`}

app/components/EntityListMain/index.js

@@ -116,18 +116,19 @@ class EntityListMain extends React.Component { // eslint-disable-line react/pref
     const expandNo = config.expandableColumns && locationQuery.get('expand')
       ? parseInt(locationQuery.get('expand'), 10)
       : 0;
-
+    const currentFWid = locationQuery.get('fw') || '1';
     let groupSelectValue = locationQuery.get('group');
     const groupforFramework = config.taxonomies
       && config.taxonomies.defaultGroupsByFramework
       && frameworks
       && frameworks.size === 1;
+
     if (config.taxonomies && !groupSelectValue) {
       if (groupforFramework) {
         /* eslint-disable prefer-destructuring */
         groupSelectValue = config.taxonomies.defaultGroupsByFramework[frameworks.first().get('id')][1];
         /* eslint-enable prefer-destructuring */
-      } else {
+      } else if (currentFWid !== 'all'){
         groupSelectValue = getGroupValue(
           taxonomies,
           config.taxonomies.defaultGroupAttribute,

app/components/EntityListSidebar/EntityListSidebarGroups.js

@@ -12,13 +12,7 @@ import { palette } from 'styled-theme';
 import EntityListSidebarGroupLabel from './EntityListSidebarGroupLabel';
 import EntityListSidebarOption from './EntityListSidebarOption';
 
-const Group = styled.div`
-  border-top: 1px solid;
-  border-color: ${(props) => props.expanded ? palette('aside', 0) : palette('light', 2)};
-  &:last-child {
-    border-bottom: 0;
-  }
-`;
+const Group = styled.div``;
 
 class EntityListSidebarGroups extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {

app/components/EntityListSidebar/EntityListSidebarOption.js

@@ -29,14 +29,11 @@ const Styled = styled(Button)`
   background-color: ${(props) => props.active ? palette('asideListItem', 3) : palette('asideListItem', 2)};
   border-bottom: 1px solid ${palette('asideListItem', 4)};
   &:hover, &:focus-visible {
-    color: ${(props) => props.active ? palette('taxonomiesHover', 1) : palette('asideListItemHover', 0)};
+    color: ${(props) => props.active ? palette('asideListItemHover', 1) : palette('asideListItemHover', 0)};
     background-color: ${(props) => props.active ? palette('asideListItemHover', 3) : palette('asideListItemHover', 2)};
     border-bottom-color: ${palette('asideListItemHover', 4)};
     outline: none;
   }
-  &:last-child {
-    border-bottom: 0;
-  }
   @media (min-width: ${(props) => props.theme.breakpoints.small}) {
     padding: ${(props) => props.small ? '0.5em 8px 0.5em 36px' : '0.75em 8px 0.75em 16px'};
   }

app/components/Header/LinkAdmin.js

@@ -3,5 +3,5 @@ import styled from 'styled-components';
 import LinkPage from './LinkPage';
 
 export default styled(LinkPage)`
-  font-weight: normal;
+  font-weight: 600;
 `;

app/components/Header/LinkMain.js

@@ -19,17 +19,16 @@ export default styled(Link)`
   height: ${(props) => props.theme.sizes.header.nav.heightMobile - 1}px;
   border-left: 1px solid ${palette('dark', 3)};
   @media (min-width: ${(props) => props.theme.breakpoints.small}) {
-    min-width: 120px;
+    min-width: 100px;
     font-size: 0.9em;
     padding: 5px ${(props) => props.theme.sizes.header.paddingLeft.small}px;
-    height: ${(props) => props.theme.sizes.header.nav.height - 1}px;
+    height: ${(props) => props.theme.sizes.header.nav.height}px;
   }
   @media (min-width: ${(props) => props.theme.breakpoints.medium}) {
-    min-width: 160px;
     padding-top: 4px;
   }
   @media (min-width: ${(props) => props.theme.breakpoints.large}) {
-    min-width: 200px;
+    min-width: 160px;
     font-size: 1em;
     padding-top: 4px;
     padding-left: ${(props) => props.theme.sizes.header.paddingLeft.large}px;

app/components/Header/LinkPage.js

@@ -4,15 +4,16 @@ import { palette } from 'styled-theme';
 import LinkSecondary from './LinkSecondary';
 
 export default styled(LinkSecondary)`
-  color:${(props) => props.active ? palette('headerNavPagesItem', 1) : palette('headerNavPagesItem', 0)};
-  background-color: transparent;  
+  color: ${(props) => props.active ? palette('headerNavPagesItem', 1) : palette('headerNavPagesItem', 0)};
+  background-color: ${(props) => props.active ? palette('headerNavPagesItem', 3) : palette('headerNavPagesItem', 2)};
   &:hover {
-    text-decoration: ${(props) => props.active ? 'none' : 'underline'};
+    text-decoration: ${(props) => props.active ? 'underline' : 'underline'};
   }
   &:focus-visible {
     text-decoration: underline;
   }
   &:hover, &:focus-visible {
     color:${(props) => props.active ? palette('headerNavPagesItemHover', 1) : palette('headerNavPagesItemHover', 0)};
+    background-color: ${(props) => props.active ? palette('headerNavPagesItemHover', 3) : palette('headerNavPagesItemHover', 2)};
   }
 `;

app/components/Header/NavAccount.js

@@ -15,9 +15,6 @@ import messages from './messages';
 
 const Styled = styled.div`
   background-color: ${palette('headerNavAccount', 0)};
-  @media (min-width: ${(props) => props.theme.breakpoints.small}) {
-    float: right;
-  }
 `;
 class NavAccount extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   onClick = (evt, path, currentPath, fullPath) => {

app/components/Header/NavMain.js

@@ -1,8 +1,9 @@
+import React from 'react';
 import styled from 'styled-components';
 import { palette } from 'styled-theme';
-import PrintHide from 'components/styled/PrintHide';
+import { Box } from 'grommet';
 
-export default styled(PrintHide)`
+export default styled((p) => <Box direction="row" justify="between" {...p} />)`
   height:${(props) => props.theme.sizes.header.nav.heightMobile}px;
   @media (min-width: ${(props) => props.theme.breakpoints.small}) {
     height:${(props) => props.theme.sizes.header.nav.height}px;
@@ -16,4 +17,7 @@ export default styled(PrintHide)`
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
+  @media print {
+    display: none !important;
+  }
 `;

app/components/Header/NavPages.js

@@ -1,9 +1,7 @@
 import styled from 'styled-components';
 import { palette } from 'styled-theme';
+import { Box } from 'grommet';
 
-export default styled.div`
+export default styled(Box)`
   background-color: ${palette('headerNavPages', 0)};
-  @media (min-width: ${(props) => props.theme.breakpoints.small}) {
-    float: right;
-  }
 `;