Merge branch 'master' of https://github.com/dxc-technology/halstack-react

jsardid · jsardid · commit 0d5cdafb0cb6 · 2021-04-30T11:56:57.000+02:00
diff --git a/app/src/pages/AccordionGroup.jsx b/app/src/pages/AccordionGroup.jsx
@@ -39,6 +39,18 @@ function App() {
           </DxcAccordionGroup.Accordion>
         </DxcAccordionGroup>
       </div>
+      <div className="test-case" id="accordion-group-one-children">
+        <h4>Accordion Group with one children</h4>
+        <DxcAccordionGroup>
+          <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
+              eget.
+            </div>
+          </DxcAccordionGroup.Accordion>
+        </DxcAccordionGroup>
+      </div>
       <div className="test-case" id="light-theme-default">
         <h4>Accordion Group Uncontrolled with undefined ActiveIndex</h4>
 
diff --git a/docs/src/pages/components/cdk-components/card/api.jsx b/docs/src/pages/components/cdk-components/card/api.jsx
@@ -12,7 +12,11 @@ const buttonPropsTable = () => {
       <tr>
         <td>imageSrc: string</td>
         <td></td>
-        <td>URL of the image that will be placed in the card component.</td>
+        <td>
+          URL of the image that will be placed in the card component. In case of
+          omission, the image container will not appear and the content will
+          occupy its space.
+        </td>
       </tr>
       <tr>
         <td>imageBgColor: string</td>
diff --git a/docs/src/pages/components/cdk-components/card/examples/actionCard.js b/docs/src/pages/components/cdk-components/card/examples/actionCard.js
@@ -11,6 +11,7 @@ const code = `() => {
       imageSrc={iceCreamImagePath} 
       imageCover={true} 
       margin="small"
+      contentPadding="xsmall"
     >
       Lorem Ipsum
     </DxcCard>
diff --git a/docs/src/pages/components/cdk-components/card/examples/defaultCard.js b/docs/src/pages/components/cdk-components/card/examples/defaultCard.js
@@ -4,7 +4,12 @@ import iceCreamImagePath from "./images/ice-cream.jpg";
 
 const code = `() => {
   return (
-    <DxcCard imageSrc={iceCreamImagePath} imageCover={true} margin="small">
+    <DxcCard 
+      imageSrc={iceCreamImagePath} 
+      imageCover={true} 
+      margin="small"
+      contentPadding="xsmall"
+    >
       Lorem Ipsum
     </DxcCard>
   );
@@ -13,7 +18,7 @@ const code = `() => {
 const scope = {
   DxcCard,
   iceCreamImagePath,
-  useState
+  useState,
 };
 
 export default { code, scope };
diff --git a/docs/src/pages/components/cdk-components/card/examples/linkCard.js b/docs/src/pages/components/cdk-components/card/examples/linkCard.js
@@ -9,6 +9,7 @@ const code = `() => {
       imageSrc={iceCreamImagePath} 
       imageCover={true} 
       margin="small"
+      contentPadding="xsmall"
     >
       Lorem Ipsum
     </DxcCard>
diff --git a/docs/src/pages/components/cdk-components/card/examples/outlinedCard.js b/docs/src/pages/components/cdk-components/card/examples/outlinedCard.js
diff --git a/docs/src/pages/components/cdk-components/card/examples/themesCard.js b/docs/src/pages/components/cdk-components/card/examples/themesCard.js
diff --git a/docs/src/pages/themeBuilder/JSONView.jsx b/docs/src/pages/themeBuilder/JSONView.jsx
@@ -22,11 +22,12 @@ const JSONViewContainer = styled.div`
   height: calc(100vh - 64px);
   padding: 5px;
   width: 30%;
-  overflow-y: auto;
+  overflow: auto;
 
   /* width */
   ::-webkit-scrollbar {
     width: 8px;
+    height: 8px;
   }
 
   /* Track */
diff --git a/docs/src/pages/themeBuilder/components/ComponentPreview.jsx b/docs/src/pages/themeBuilder/components/ComponentPreview.jsx
@@ -47,12 +47,13 @@ const ComponentPreview = ({ customTheme, componentId }) => {
 };
 
 const ComponentPreviewContainer = styled.div`
-  overflow-y: auto;
   height: 70%;
+  overflow: auto;
 
   /* width */
   ::-webkit-scrollbar {
     width: 8px;
+    height: 8px;
   }
 
   /* Track */
diff --git a/docs/src/pages/themeBuilder/components/ThemeInputsConfig.jsx b/docs/src/pages/themeBuilder/components/ThemeInputsConfig.jsx
@@ -47,7 +47,11 @@ const ThemeInputsConfig = ({ componentInputs, onChangeCustomTheme }) => {
             .map((propertyName) => (
               <LogoContainer>
                 <PropertyName>{propertyName}</PropertyName>
-                <LogoConfig propertyName={propertyName} propertyValue={componentInputs[propertyName]} onChangeCustomTheme={onChangeCustomTheme} />
+                <LogoConfig
+                  propertyName={propertyName}
+                  propertyValue={componentInputs[propertyName]}
+                  onChangeCustomTheme={onChangeCustomTheme}
+                />
               </LogoContainer>
             ))}
         </ColorInfoColumn>
@@ -73,6 +77,31 @@ const PropertiesContent = styled.div`
   display: flex;
   justify-content: flex-start;
   flex-grow: 1;
+  flex-wrap: wrap;
+  overflow: auto;
+
+  /* width */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #d9d9d9;
+    border-radius: 26px;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #666666;
+    border-radius: 26px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
 `;
 
 const PropertyContainer = styled.div`
diff --git a/lib/src/accordion-group/AccordionGroup.jsx b/lib/src/accordion-group/AccordionGroup.jsx
@@ -32,7 +32,7 @@ const DxcAccordionGroup = ({ disabled = false, onActiveChange, indexActive = und
   return (
     <ThemeProvider theme={colorsTheme.accordion}>
       <AccordionGroupContainer margin={margin} disabled={disabled}>
-        {children
+        {(Array.isArray(children) ? children : [children])
           .filter((el) => el.type === Accordion)
           .map((el, index) =>
             React.cloneElement(el, {
diff --git a/lib/src/alert/Alert.jsx b/lib/src/alert/Alert.jsx
@@ -104,7 +104,7 @@ const AlertModal = styled.div`
   left: ${(props) => (props.mode === "modal" ? "0" : "")};
   position: ${(props) => (props.mode === "modal" ? "fixed" : "")};
   display: ${(props) => (props.mode === "modal" ? "flex" : "")};
-  z-index: 200;
+  z-index: ${(props) => (props.mode === "modal" ? "200" : "")};
 `;
 
 const OverlayContainer = styled.div`
@@ -148,7 +148,7 @@ const AlertContainer = styled.div`
     (props.type === "warning" && props.theme.warningColor) ||
     (props.type === "error" && props.theme.errorColor) ||
     props.theme.lightPink};
-  z-index: 300;
+  z-index: ${(props) => (props.mode === "modal" ? "300" : "")};
   cursor: default;
 `;
 
diff --git a/lib/src/button/Button.jsx b/lib/src/button/Button.jsx
@@ -19,13 +19,20 @@ const DxcButton = ({
   onClick = "",
   margin,
   size,
-  tabIndex=0
+  tabIndex = 0,
 }) => {
   const colorsTheme = useTheme();
 
   return (
     <ThemeProvider theme={colorsTheme.button}>
-      <DxCButton type={type} margin={margin} mode={mode} disabled={disabled} iconPosition={iconPosition} size={size}>
+      <DxCButton
+        type={type}
+        margin={margin}
+        mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
+        disabled={disabled}
+        iconPosition={iconPosition}
+        size={size}
+      >
         <Button
           disabled={disabled}
           type={type}
@@ -198,7 +205,7 @@ const DxCButton = styled.div`
       } else if (mode === "text") {
         return `
             background-color: ${props.theme.textBackgroundColor};
-            color: ${(props.disabled && props.theme.disabledTextFontColor) || props.theme.textFontColor} !important;;
+            color: ${(props.disabled && props.theme.disabledTextFontColor) || props.theme.textFontColor} !important;
             padding: ${(props.size === "small" && "11px") || "12px 30px"};
             &:hover{
               background-color: ${props.theme.textHoverBackgroundColor};
@@ -240,7 +247,6 @@ DxcButton.propTypes = {
   iconSrc: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   type: PropTypes.oneOf(["button", "reset", "submit"]),
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
 };
-
 export default DxcButton;
diff --git a/lib/src/common/variables.js b/lib/src/common/variables.js
@@ -37,6 +37,7 @@ export const globalTokens = {
   lightWhite: "#f2f2f2",
   softGrey: "#cecece",
   softBlack: "#565656",
+  fontSize10: "10px",
   type_sans: "Open Sans, sans-serif",
   type_scale_root: "16px",
   type_scale_08: "3.75rem",
diff --git a/lib/src/input-text/InputText.jsx b/lib/src/input-text/InputText.jsx
@@ -241,7 +241,7 @@ const DxcInputText = ({
         />
       </TextContainer>
 
-      <Popper
+      <DxcSuggestions
         open={isOpen}
         anchorEl={anchorEl}
         anchororigin={{
@@ -285,7 +285,7 @@ const DxcInputText = ({
             </Paper>
           </React.Fragment>
         </SuggestionsContainer>
-      </Popper>
+      </DxcSuggestions>
     </ThemeProvider>
   );
 };
@@ -318,6 +318,10 @@ const getCursor = (interactuable, disabled) => {
   return "cursor:default; outline:none;";
 };
 
+const DxcSuggestions = styled(Popper)`
+  z-index: 1301;
+`;
+
 const SuggestionsContainer = styled.div`
   width: ${(props) => calculateWidth(props.margin, props.size)};
   .MuiPaper-root {
diff --git a/lib/src/layout/ApplicationLayout.jsx b/lib/src/layout/ApplicationLayout.jsx
diff --git a/lib/src/link/Link.jsx b/lib/src/link/Link.jsx
diff --git a/lib/test/AccordionGroup.test.js b/lib/test/AccordionGroup.test.js

Original file line number	Diff line number	Diff line change
@@ -11,6 +11,7 @@ const code = `() => {
`11`	`11`	`imageSrc={iceCreamImagePath}`
`12`	`12`	`imageCover={true}`
`13`	`13`	`margin="small"`
	`14`	`+ contentPadding="xsmall"`
`14`	`15`	`>`
`15`	`16`	`Lorem Ipsum`
`16`	`17`	`</DxcCard>`
Original file line number	Diff line number	Diff line change
@@ -9,6 +9,7 @@ const code = `() => {
`9`	`9`	`imageSrc={iceCreamImagePath}`
`10`	`10`	`imageCover={true}`
`11`	`11`	`margin="small"`
	`12`	`+ contentPadding="xsmall"`
`12`	`13`	`>`
`13`	`14`	`Lorem Ipsum`
`14`	`15`	`</DxcCard>`