move to ds accordion

packages/core/admin/admin/src/components/Roles/ConditionsButton/index.js

@@ -7,8 +7,6 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   position: relative;
-  margin-left: auto;
-  padding-right: ${({ theme }) => theme.spaces[6]};
 
   ${({ hasConditions, disabled, theme }) =>
     hasConditions &&
@@ -26,12 +24,12 @@ const Wrapper = styled.div`
   `}
 `;
 
-const ConditionsButton = ({ onClick, className, hasConditions }) => {
+const ConditionsButton = ({ onClick, className, hasConditions, variant }) => {
   const { formatMessage } = useIntl();
 
   return (
     <Wrapper hasConditions={hasConditions} className={className}>
-      <Button variant="secondary" startIcon={<Settings />} onClick={onClick}>
+      <Button variant={variant} startIcon={<Settings />} onClick={onClick}>
         {formatMessage({ id: 'app.components.LeftMenuLinkContainer.settings' })}
       </Button>
     </Wrapper>
@@ -41,11 +39,13 @@ const ConditionsButton = ({ onClick, className, hasConditions }) => {
 ConditionsButton.defaultProps = {
   className: null,
   hasConditions: false,
+  variant: 'secondary',
 };
 ConditionsButton.propTypes = {
   onClick: PropTypes.func.isRequired,
   className: PropTypes.string,
   hasConditions: PropTypes.bool,
+  variant: PropTypes.string,
 };
 
 // This is a styled component advanced usage :

packages/core/admin/admin/src/components/Roles/ContentTypeCollapse/Collapse/index.js

@@ -137,7 +137,7 @@ const Collapse = ({
         <Chevron paddingLeft={2}>{isActive ? <Up /> : <Down />}</Chevron>
       </RowLabelWithCheckbox>
 
-      <Row>
+      <Row style={{ flex: 1 }}>
         {checkboxesActions.map(
           ({
             actionId,
@@ -196,10 +196,12 @@ const Collapse = ({
           }
         )}
       </Row>
-      <ConditionsButton
-        onClick={handleToggleModalIsOpen}
-        hasConditions={doesConditionButtonHasConditions}
-      />
+      <Box paddingRight={6}>
+        <ConditionsButton
+          onClick={handleToggleModalIsOpen}
+          hasConditions={doesConditionButtonHasConditions}
+        />
+      </Box>
       {modalState.isMounted && (
         <ConditionsModal
           headerBreadCrumbs={[label, 'app.components.LeftMenuLinkContainer.settings']}

packages/core/admin/admin/src/components/Roles/PluginsAndSettings/ListWrapper.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const ListWrapper = styled.div`
-  background-color: ${({ theme }) => theme.main.colors.white};
-  border-bottom-left-radius: ${({ theme }) => theme.main.sizes.borderRadius};
-  border-bottom-right-radius: ${({ theme }) => theme.main.sizes.borderRadius};
-  padding: 1.8rem 0;
-`;
-
-export default ListWrapper;

packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/Wrapper.js

@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-import { Text } from '@buffetjs/core';
-
-const activeStyle = theme => `
-    background-color: ${theme.main.colors.lightestBlue};
-    border: 1px solid ${theme.main.colors.darkBlue};
-    ${Text} {
-      color: ${theme.main.colors.mediumBlue};
-    }
-    svg {
-      color: ${theme.main.colors.mediumBlue};
-    }
-`;
-
-const RowStyle = styled.div`
-  height: 5.4rem;
-  padding: 1rem 3rem;
-  border: 1px solid transparent;
-  background-color: ${({ theme, isWhite }) => theme.main.colors[isWhite ? 'white' : 'lightGrey']};
-  cursor: pointer;
-  &:hover {
-    background-color: ${({ theme }) => theme.main.colors.lightestBlue};
-    ${({ theme }) => activeStyle(theme)};
-  }
-  ${({ isActive, theme }) => isActive && activeStyle(theme)};
-`;
-
-export default RowStyle;

packages/core/admin/admin/src/components/Roles/PluginsAndSettings/Row/index.js

@@ -1,11 +1,9 @@
-import React, { useMemo } from 'react';
-import { Flex, Text } from '@buffetjs/core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { PermissionsWrapper, RowContainer } from '@strapi/helper-plugin';
+import { Accordion, AccordionContent, AccordionToggle, Box } from '@strapi/parts';
+import upperFirst from 'lodash/upperFirst';
 import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import SubCategory from '../SubCategory';
-import RowStyle from './Wrapper';
 
 const PermissionRow = ({
   childrenForm,
@@ -30,26 +28,18 @@ const PermissionRow = ({
   }, [name]);
 
   return (
-    <RowContainer isWhite={isWhite}>
-      <RowStyle isWhite={isWhite} isActive={isOpen} onClick={handleClick}>
-        <Flex alignItems="center" justifyContent="space-between">
-          <div>
-            <Text color="grey" fontWeight="bold" fontSize="xs" textTransform="uppercase">
-              {categoryName}
-            </Text>
-            <Text lineHeight="22px" color="grey">
-              {formatMessage({ id: 'Settings.permissions.category' }, { category: categoryName })}
-              &nbsp;{kind === 'plugins' ? 'plugin' : kind}
-            </Text>
-          </div>
-          <div>
-            <FontAwesomeIcon style={{ width: '11px' }} color="#9EA7B8" icon="chevron-down" />
-          </div>
-        </Flex>
-      </RowStyle>
+    <Accordion expanded={isOpen} toggle={handleClick} id="acc-1">
+      <AccordionToggle
+        title={upperFirst(categoryName)}
+        description={`${formatMessage(
+          { id: 'Settings.permissions.category' },
+          { category: categoryName }
+        )} ${kind === 'plugins' ? 'plugin' : kind}`}
+        variant={isWhite ? 'primary' : 'secondary'}
+      />
 
-      {isOpen && (
-        <PermissionsWrapper isWhite={isWhite}>
+      <AccordionContent>
+        <Box padding={6}>
           {childrenForm.map(({ actions, subCategoryName, subCategoryId }) => (
             <SubCategory
               key={subCategoryName}
@@ -60,9 +50,9 @@ const PermissionRow = ({
               pathToData={[...pathToData, subCategoryId]}
             />
           ))}
-        </PermissionsWrapper>
-      )}
-    </RowContainer>
+        </Box>
+      </AccordionContent>
+    </Accordion>
   );
 };
 

packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/CheckboxWrapper.js

@@ -1,22 +0,0 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-
-const CheckboxWrapper = styled.div`
-  min-width: 33%;
-  padding: 0.9rem;
-  height: 3.6rem;
-  position: relative;
-  ${({ hasConditions, disabled, theme }) =>
-    hasConditions &&
-    `
-    &:before {
-      content: '•';
-      position: absolute;
-      top: 2px;
-      left: 0px;
-      color: ${disabled ? theme.main.colors.grey : theme.main.colors.mediumBlue};
-    }
-  `}
-`;
-
-export default CheckboxWrapper;

packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/ConditionsButtonWrapper.js

@@ -1,13 +0,0 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-
-const ConditionsButtonWrapper = styled.div`
-  padding: 0.9rem;
-  ${({ hasConditions }) =>
-    hasConditions &&
-    `
-    padding-left: 22px;
-  `}
-`;
-
-export default ConditionsButtonWrapper;

packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/Wrapper.js

@@ -1,26 +0,0 @@
-/* eslint-disable indent */
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  padding-bottom: 2.6rem;
-  input[type='checkbox'] {
-    &:after {
-      color: ${({ theme }) => theme.main.colors.mediumBlue};
-    }
-  }
-  ${({ disabled, theme }) =>
-    disabled &&
-    `
-    label {
-      cursor: default !important;
-      color: ${theme.main.colors.grey};
-    }
-    input[type='checkbox'] {
-        &:after {
-          color: ${theme.main.colors.grey};
-        }
-      }
-    `}
-`;
-
-export default Wrapper;

packages/core/admin/admin/src/components/Roles/PluginsAndSettings/SubCategory/index.js

@@ -1,25 +1,39 @@
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Flex, Padded, Text, Checkbox } from '@buffetjs/core';
+import { Row, Box, TableLabel, Checkbox, Grid, GridItem } from '@strapi/parts';
+
 import { useIntl } from 'react-intl';
-import { BaselineAlignment } from '@strapi/helper-plugin';
 import { get } from 'lodash';
 import IS_DISABLED from 'ee_else_ce/components/Roles/PluginsAndSettings/SubCategory/utils/constants';
 import { usePermissionsDataManager } from '../../../../hooks';
 import { getCheckboxState, removeConditionKeyFromData } from '../../utils';
 import ConditionsButton from '../../ConditionsButton';
 import ConditionsModal from '../../ConditionsModal';
-import CheckboxWrapper from './CheckboxWrapper';
-import ConditionsButtonWrapper from './ConditionsButtonWrapper';
-import Wrapper from './Wrapper';
 import { formatActions, getConditionsButtonState } from './utils';
 
 const Border = styled.div`
   flex: 1;
   align-self: center;
-  border-top: 1px solid #f6f6f6;
-  padding: 0px 10px;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+
+const CheckboxWrapper = styled.div`
+  position: relative;
+  ${({ hasConditions, disabled, theme }) =>
+    hasConditions &&
+    `
+    &:before {
+      content: '';
+      position: absolute;
+      top: -4px;
+      left: -8px;
+      width: 6px;
+      height: 6px;
+      border-radius: 20px;
+      background: ${disabled ? theme.colors.neutral100 : theme.colors.primary600};
+    }
+  `}
 `;
 
 const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, pathToData }) => {
@@ -56,61 +70,67 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
 
   return (
     <>
-      <Wrapper>
-        <Flex justifyContent="space-between" alignItems="center">
-          <Padded right size="sm">
-            <Text
-              lineHeight="18px"
-              color="#919bae"
-              fontWeight="bold"
-              fontSize="xs"
-              textTransform="uppercase"
-            >
-              {subCategoryName}
-            </Text>
-          </Padded>
+      <Box>
+        <Row justifyContent="space-between" alignItems="center">
+          <Box paddingRight={4}>
+            <TableLabel textColor="neutral600">{subCategoryName}</TableLabel>
+          </Box>
           <Border />
-          <Padded left size="sm">
-            <BaselineAlignment top size="1px" />
+          <Box paddingLeft={4}>
             <Checkbox
               name={pathToData.join('..')}
-              message={formatMessage({ id: 'app.utils.select-all' })}
               disabled={isFormDisabled || IS_DISABLED}
-              onChange={onChangeParentCheckbox}
-              someChecked={hasSomeActionsSelected}
+              // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
+              onValueChange={value =>
+                onChangeParentCheckbox({
+                  target: {
+                    name: pathToData.join('..'),
+                    value,
+                  },
+                })}
+              indeterminate={hasSomeActionsSelected}
               value={hasAllActionsSelected}
-            />
-          </Padded>
-        </Flex>
-        <BaselineAlignment top size="1px" />
-        <Padded top size="xs">
-          <Flex flexWrap="wrap">
+            >
+              {formatMessage({ id: 'app.utils.select-all' })}
+            </Checkbox>
+          </Box>
+        </Row>
+        <Row paddingTop={6} paddingBottom={6}>
+          <Grid gap={2} style={{ flex: 1 }}>
             {formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
               return (
-                <CheckboxWrapper
-                  disabled={isFormDisabled || IS_DISABLED}
-                  hasConditions={hasConditions}
-                  key={action}
-                >
-                  <Checkbox
-                    name={checkboxName}
+                <GridItem col={3} key={action}>
+                  <CheckboxWrapper
                     disabled={isFormDisabled || IS_DISABLED}
-                    message={displayName}
-                    onChange={onChangeSimpleCheckbox}
-                    value={value}
-                  />
-                </CheckboxWrapper>
+                    hasConditions={hasConditions}
+                  >
+                    <Checkbox
+                      name={checkboxName}
+                      disabled={isFormDisabled || IS_DISABLED}
+                      // Keep same signature as packages/core/admin/admin/src/components/Roles/Permissions/index.js l.91
+                      onValueChange={value =>
+                        onChangeSimpleCheckbox({
+                          target: {
+                            name: checkboxName,
+                            value,
+                          },
+                        })}
+                      value={value}
+                    >
+                      {displayName}
+                    </Checkbox>
+                  </CheckboxWrapper>
+                </GridItem>
               );
             })}
-          </Flex>
-          <ConditionsButtonWrapper disabled={isFormDisabled} hasConditions={doesButtonHasCondition}>
-            <ConditionsButton
-              hasConditions={doesButtonHasCondition}
-              onClick={handleToggleModalIsOpen}
-            />
-          </ConditionsButtonWrapper>
-        </Padded>
-      </Wrapper>
+          </Grid>
+          <ConditionsButton
+            hasConditions={doesButtonHasCondition}
+            onClick={handleToggleModalIsOpen}
+            variant="tertiary"
+          />
+        </Row>
+      </Box>
       {modalState.isMounted && (
         <ConditionsModal
           headerBreadCrumbs={[categoryName, subCategoryName]}

packages/core/admin/admin/src/components/Roles/PluginsAndSettings/index.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Padded } from '@buffetjs/core';
-import ListWrapper from './ListWrapper';
+import { Box } from '@strapi/parts';
 import PermissionRow from './Row';
 
 const PluginsAndSettingsPermissions = ({ isFormDisabled, kind, layout }) => {
@@ -12,25 +11,23 @@ const PluginsAndSettingsPermissions = ({ isFormDisabled, kind, layout }) => {
   };
 
   return (
-    <ListWrapper>
-      <Padded left right size="md">
-        {layout.map(({ category, categoryId, childrenForm }, index) => {
-          return (
-            <PermissionRow
-              key={category}
-              childrenForm={childrenForm}
-              kind={kind}
-              isFormDisabled={isFormDisabled}
-              isOpen={openedCategory === category}
-              isWhite={index % 2 === 1}
-              name={category}
-              onOpenCategory={handleOpenCategory}
-              pathToData={[kind, categoryId]}
-            />
-          );
-        })}
-      </Padded>
-    </ListWrapper>
+    <Box padding={6} background="neutral0">
+      {layout.map(({ category, categoryId, childrenForm }, index) => {
+        return (
+          <PermissionRow
+            key={category}
+            childrenForm={childrenForm}
+            kind={kind}
+            isFormDisabled={isFormDisabled}
+            isOpen={openedCategory === category}
+            isWhite={index % 2 === 1}
+            name={category}
+            onOpenCategory={handleOpenCategory}
+            pathToData={[kind, categoryId]}
+          />
+        );
+      })}
+    </Box>
   );
 };
 

packages/core/admin/admin/src/components/Roles/RowLabelWithCheckbox/index.js

@@ -1,7 +1,8 @@
-import React, { memo } from 'react';
+import { Box, Checkbox, Text } from '@strapi/parts';
+import upperFirst from 'lodash/upperFirst';
 import PropTypes from 'prop-types';
+import React, { memo } from 'react';
 import styled from 'styled-components';
-import { Checkbox, Text, Box } from '@strapi/parts';
 import CollapseLabel from '../CollapseLabel';
 import { firstRowWidth } from '../Permissions/utils/constants';
 
@@ -67,7 +68,7 @@ const RowLabelWithCheckbox = ({
           role: 'button',
         })}
       >
-        <StyledText>{label.charAt(0).toUpperCase() + label.slice(1)}</StyledText>
+        <StyledText>{upperFirst(label)}</StyledText>
         {children}
       </CollapseLabel>
     </Wrapper>