Merge pull request #1445 from dxc-technology/gomezivann-fix-icons

Fix custom icons sizing
dxc-technology · Jan 26, 2023 · 5aa300b · 5aa300b
2 parents 1b8b460 + 8dd341d
commit 5aa300b
Show file tree

Hide file tree

Showing 23 changed files with 504 additions and 383 deletions.
diff --git a/lib/src/accordion/Accordion.stories.tsx b/lib/src/accordion/Accordion.stories.tsx
@@ -30,10 +30,33 @@ const folderIcon = (
   </svg>
 );
 
-const thumbIcon = (
-  <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
-    <path d="M0 0h24v24H0V0z" fill="none" />
-    <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z" />
+const smallIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
+    <path d="m7.646 18.333-.313-2.625q-.208-.125-.458-.27-.25-.146-.458-.271l-2.438 1.021-2.354-4.063 2.083-1.583V9.458L1.625 7.875l2.354-4.063 2.438 1.021q.208-.125.458-.27.25-.146.458-.271l.313-2.625h4.708l.313 2.625q.208.125.458.271.25.145.458.27l2.438-1.021 2.354 4.063-2.063 1.583v1.084l2.063 1.583-2.354 4.063-2.438-1.021q-.208.125-.458.271-.25.145-.458.27l-.313 2.625ZM10 12.979q1.229 0 2.104-.875T12.979 10q0-1.229-.875-2.104T10 7.021q-1.229 0-2.104.875T7.021 10q0 1.229.875 2.104t2.104.875Zm0-1.75q-.5 0-.865-.364-.364-.365-.364-.865t.364-.865q.365-.364.865-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.166q.605-.167 1.167-.5.562-.334 1.021-.792l2.021.854.833-1.375-1.771-1.354q.104-.292.146-.604.042-.313.042-.646 0-.292-.042-.594t-.125-.635l1.771-1.375-.834-1.375-2.02.875q-.48-.479-1.032-.802-.552-.323-1.156-.49l-.271-2.187H9.167l-.271 2.187q-.604.167-1.156.49-.552.323-1.011.781l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.459.458 1.011.781.552.323 1.156.49Z" />
+  </svg>
+);
+
+const facebookIcon = (
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    width="438.536px"
+    height="438.536px"
+    viewBox="0 0 438.536 438.536"
+    fill="currentColor"
+  >
+    <g>
+      <path
+        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+  C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
+  h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
+  C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
+  c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
+  c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+      />
+    </g>
   </svg>
 );
 
@@ -78,8 +101,30 @@ export const Chromatic = () => (
       </DxcAccordion>
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="With bigger icon 48x48" theme="light" level={4} />
-      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={thumbIcon}>
+      <Title title="With smaller icon" theme="light" level={4} />
+      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={smallIcon}>
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With bigger icon (SVG)" theme="light" level={4} />
+      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={facebookIcon}>
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With bigger icon (image)" theme="light" level={4} />
+      <DxcAccordion
+        label="Accordion"
+        assistiveText="Assistive text"
+        icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png"
+      >
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -134,12 +179,7 @@ export const Chromatic = () => (
           padding="medium"
         >
           <div style={{ display: "flex", flexDirection: "column", gap: "36px" }}>
-            <DxcTextInput
-              label="Label"
-              helperText="HelperText"
-              placeholder="Placeholder"
-              size="fillParent"
-            />
+            <DxcTextInput label="Label" helperText="HelperText" placeholder="Placeholder" size="fillParent" />
             <DxcButton label="Submit" size="medium" />
           </div>
         </DxcAccordion>

diff --git a/lib/src/accordion/Accordion.tsx b/lib/src/accordion/Accordion.tsx
@@ -59,7 +59,7 @@ const DxcAccordion = ({
               <AccordionLabel>
                 {icon && (
                   <IconContainer disabled={disabled}>
-                    {typeof icon === "string" ? <IconImg src={icon} /> : icon}
+                    {typeof icon === "string" ? <img src={icon} /> : icon}
                   </IconContainer>
                 )}
                 <DxcTypography
@@ -193,18 +193,15 @@ const AccordionLabel = styled.span`
 
 const IconContainer = styled.span<{ disabled: boolean }>`
   display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  height: ${(props) => props.theme.iconSize};
-  width: ${(props) => props.theme.iconSize};
   margin-left: ${(props) => props.theme.iconMarginLeft};
   margin-right: ${(props) => props.theme.iconMarginRigth};
   color: ${(props) => (props.disabled ? props.theme.disabledIconColor : props.theme.iconColor)};
-`;
 
-const IconImg = styled.img`
-  height: ${(props) => props.theme.iconSize};
-  width: ${(props) => props.theme.iconSize};
+  svg,
+  img {
+    height: ${(props) => props.theme.iconSize};
+    width: ${(props) => props.theme.iconSize};
+  }
 `;
 
 const AccordionAssistiveText = styled.span<{ disabled: boolean }>`

diff --git a/lib/src/button/Button.stories.tsx b/lib/src/button/Button.stories.tsx
@@ -12,11 +12,42 @@ export default {
 };
 
 const iconSVG = (
-  <svg viewBox="0 0 24 24" fill="currentColor">
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor">
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
   </svg>
 );
+
+const facebookIcon = (
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    width="438.536px"
+    height="438.536px"
+    viewBox="0 0 438.536 438.536"
+    fill="currentColor"
+  >
+    <g>
+      <path
+        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+  C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
+  h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
+  C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
+  c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
+  c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+      />
+    </g>
+  </svg>
+);
+
+const smallIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20" fill="currentColor">
+    <path d="m7.646 18.333-.313-2.625q-.208-.125-.458-.27-.25-.146-.458-.271l-2.438 1.021-2.354-4.063 2.083-1.583V9.458L1.625 7.875l2.354-4.063 2.438 1.021q.208-.125.458-.27.25-.146.458-.271l.313-2.625h4.708l.313 2.625q.208.125.458.271.25.145.458.27l2.438-1.021 2.354 4.063-2.063 1.583v1.084l2.063 1.583-2.354 4.063-2.438-1.021q-.208.125-.458.271-.25.145-.458.27l-.313 2.625ZM10 12.979q1.229 0 2.104-.875T12.979 10q0-1.229-.875-2.104T10 7.021q-1.229 0-2.104.875T7.021 10q0 1.229.875 2.104t2.104.875Zm0-1.75q-.5 0-.865-.364-.364-.365-.364-.865t.364-.865q.365-.364.865-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.166q.605-.167 1.167-.5.562-.334 1.021-.792l2.021.854.833-1.375-1.771-1.354q.104-.292.146-.604.042-.313.042-.646 0-.292-.042-.594t-.125-.635l1.771-1.375-.834-1.375-2.02.875q-.48-.479-1.032-.802-.552-.323-1.156-.49l-.271-2.187H9.167l-.271 2.187q-.604.167-1.156.49-.552.323-1.011.781l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.459.458 1.011.781.552.323 1.156.49Z" />
+  </svg>
+);
+
 export const Chromatic = () => (
   <>
     <Title title="Primary" theme="light" level={2} />
@@ -52,6 +83,18 @@ export const Chromatic = () => (
       <Title title="Only icon" theme="light" level={4} />
       <DxcButton icon={iconSVG} />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Big icon (SVG)" theme="light" level={4} />
+      <DxcButton icon={facebookIcon} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Big icon (image)" theme="light" level={4} />
+      <DxcButton icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small icon" theme="light" level={4} />
+      <DxcButton icon={smallIcon} />
+    </ExampleContainer>
     <Title title="Secondary" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
@@ -77,6 +120,10 @@ export const Chromatic = () => (
       <Title title="With icon" theme="light" level={4} />
       <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Only icon (image)" theme="light" level={4} />
+      <DxcButton mode="secondary" icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png" />
+    </ExampleContainer>
     <Title title="Text" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
@@ -102,6 +149,10 @@ export const Chromatic = () => (
       <Title title="With icon" theme="light" level={4} />
       <DxcButton label="Text" mode="text" icon={iconSVG} />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Only icon (image)" theme="light" level={4} />
+      <DxcButton mode="text" icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png" />
+    </ExampleContainer>
     <BackgroundColorProvider color="#333333">
       <DarkContainer>
         <Title title="Primary" theme="dark" level={2} />

diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx
@@ -36,12 +36,6 @@ const DxcButton = ({
   const colorsTheme = useTheme();
   const backgroundType = useContext(BackgroundColorContext);
 
-  const labelComponent = (
-    <LabelContainer icon={icon} iconPosition={iconPosition}>
-      {label}
-    </LabelContainer>
-  );
-
   return (
     <ThemeProvider theme={colorsTheme.button}>
       <Button
@@ -57,13 +51,21 @@ const DxcButton = ({
           onClick();
         }}
       >
-        {label && iconPosition === "after" && labelComponent}
+        {label && iconPosition === "after" && (
+          <LabelContainer icon={icon} iconPosition={iconPosition}>
+            {label}
+          </LabelContainer>
+        )}
         {icon && (
           <IconContainer label={label} iconPosition={iconPosition}>
-            {typeof icon === "string" ? <ButtonIcon src={icon} /> : icon}
+            {typeof icon === "string" ? <img src={icon} /> : icon}
           </IconContainer>
         )}
-        {label && iconPosition === "before" && labelComponent}
+        {label && iconPosition === "before" && (
+          <LabelContainer icon={icon} iconPosition={iconPosition}>
+            {label}
+          </LabelContainer>
+        )}
       </Button>
     </ThemeProvider>
   );
@@ -303,26 +305,16 @@ type IconPropsType = {
 };
 
 const IconContainer = styled.div<IconPropsType>`
-  max-height: 24px;
-  max-width: 24px;
+  display: flex;
   margin-left: ${(props) =>
     !props.label ? "0px" : (props.iconPosition === "after" && props.label !== "" && "8px") || "8px"};
   margin-right: ${(props) =>
     !props.label ? "0px" : (props.iconPosition === "before" && props.label !== "" && "8px") || "8px"};
-  overflow: hidden;
-  display: flex;
-  img,
-  svg {
-    height: 100%;
-    width: 100%;
-  }
-`;
 
-const ButtonIcon = styled.img`
   img,
   svg {
-    height: 100%;
-    width: 100%;
+    height: 24px;
+    width: 24px;
   }
 `;
 

diff --git a/lib/src/chip/Chip.stories.tsx b/lib/src/chip/Chip.stories.tsx
@@ -10,9 +10,32 @@ export default {
 };
 
 const iconSVG = (
-  <svg viewBox="0 0 24 24" fill="currentColor">
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    width="438.536px"
+    height="438.536px"
+    viewBox="0 0 438.536 438.536"
+    fill="currentColor"
+  >
+    <g>
+      <path
+        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
+h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
+C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
+c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
+c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+      />
+    </g>
+  </svg>
+);
+
+const smallIconSVG = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
+    <path d="m10 17-1.042-.938q-2.083-1.854-3.437-3.177-1.354-1.323-2.136-2.354Q2.604 9.5 2.302 8.646 2 7.792 2 6.896q0-1.854 1.271-3.125T6.396 2.5q1.021 0 1.979.438.958.437 1.625 1.229.667-.792 1.625-1.229.958-.438 1.979-.438 1.854 0 3.125 1.271T18 6.896q0 .896-.292 1.729-.291.833-1.073 1.854-.781 1.021-2.145 2.365-1.365 1.344-3.49 3.26Zm0-2.021q1.938-1.729 3.188-2.948 1.25-1.219 1.989-2.125.74-.906 1.031-1.614.292-.709.292-1.396 0-1.229-.833-2.063Q14.833 4 13.604 4q-.729 0-1.364.302-.636.302-1.094.844L10.417 6h-.834l-.729-.854q-.458-.542-1.114-.844Q7.083 4 6.396 4q-1.229 0-2.063.833-.833.834-.833 2.063 0 .687.271 1.364.271.678.989 1.573.719.896 1.98 2.125Q8 13.188 10 14.979Zm0-5.5Z" />
   </svg>
 );
 
@@ -23,20 +46,29 @@ export const Chromatic = () => (
       <DxcChip label="Default Chip" />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Chip with prefix" theme="light" level={4} />
-      <DxcChip label="Chip with prefix" prefixIcon={iconSVG} />
+      <Title title="Chip with prefix SVG (small icon)" theme="light" level={4} />
+      <DxcChip label="Chip with prefix" prefixIcon={smallIconSVG} />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Chip with suffix" theme="light" level={4} />
+      <Title title="Chip with suffix SVG (large icon)" theme="light" level={4} />
       <DxcChip label="Chip with suffix" suffixIcon={iconSVG} />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Chip with prefix and suffix" theme="light" level={4} />
-      <DxcChip label="Chip with prefix and suffix" prefixIcon={iconSVG} suffixIcon={iconSVG} />
+      <Title title="Chip with prefix (SVG) and suffix (URL)" theme="light" level={4} />
+      <DxcChip
+        label="Chip with prefix and suffix"
+        prefixIcon={iconSVG}
+        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
+      />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled chip" theme="light" level={4} />
-      <DxcChip label="Disabled" disabled prefixIcon={iconSVG} suffixIcon={iconSVG} />
+      <DxcChip
+        label="Disabled"
+        disabled
+        prefixIcon={iconSVG}
+        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
+      />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with ellipsis" theme="light" level={4} />