fix(InfoCard): issue on smaller screens

dnbexperience · Feb 23, 2022 · 9512980 · 9512980
1 parent a2ef6fb
commit 9512980
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 13 deletions.
diff --git a/packages/dnb-eufemia/src/components/info-card/InfoCard.tsx b/packages/dnb-eufemia/src/components/info-card/InfoCard.tsx
@@ -191,14 +191,14 @@ const InfoCard = (localProps: InfoCardProps & ISpacingProps) => {
 
     return (
       <Div
-        top={centered ? 'medium' : 'small'}
         className={classnames(
           'dnb-info-card--buttons',
           centered && 'dnb-info-card--buttons-centered'
         )}
       >
         {!acceptButtonIsHidden && (
           <Button
+            top={centered ? 'medium' : 'small'}
             type="button"
             data-testid="info-card-accept-button"
             variant="secondary"
@@ -213,7 +213,7 @@ const InfoCard = (localProps: InfoCardProps & ISpacingProps) => {
             type="button"
             data-testid="info-card-close-button"
             variant="tertiary"
-            top={centered && 'small'}
+            top="small"
             on_click={onClose}
             icon="close"
             icon_position="left"

diff --git a/packages/dnb-eufemia/src/components/info-card/__tests__/__snapshots__/InfoCard.test.tsx.snap b/packages/dnb-eufemia/src/components/info-card/__tests__/__snapshots__/InfoCard.test.tsx.snap
@@ -75,6 +75,7 @@ exports[`InfoCard InfoCard scss have to match snapshot 1`] = `
   border: 1px solid var(--color-black-8);
   border-radius: 0.25rem;
   padding: 1rem;
+  overflow: hidden;
   box-shadow: var(--shadow-default); }
   .dnb-info-card--centered {
     flex-direction: column;
@@ -93,7 +94,8 @@ exports[`InfoCard InfoCard scss have to match snapshot 1`] = `
     width: 4rem; }
   .dnb-info-card--buttons {
     display: flex;
-    flex-direction: row; }
+    flex-direction: row;
+    flex-wrap: wrap; }
     .dnb-info-card--buttons-centered {
       flex-direction: column;
       align-items: center;

diff --git a/packages/dnb-eufemia/src/components/info-card/stories/InfoCard.stories.js b/packages/dnb-eufemia/src/components/info-card/stories/InfoCard.stories.js
@@ -79,25 +79,25 @@ export const InfoCardSandbox = () => (
     </Box>
     <Box>
       <InfoCard
-        on_accept={() => console.log('accept')}
-        accept_button_text="accept"
+        onAccept={() => console.log('accept')}
+        acceptButtonText="accept"
         text="This is a description of some information or a tip that will inform the user of something that will help them."
       />
       <InfoCard
-        on_accept={() => console.log('accept')}
-        accept_button_text="Accept"
-        on_close={() => console.log('close')}
-        close_button_text="Close"
+        onAccept={() => console.log('accept')}
+        acceptButtonText="Accept"
+        onClose={() => console.log('close')}
+        closeButtonText="Closeeeeeeeeeeeeeee"
         text="This is a description of some information or a tip that will inform the user of something that will help them."
       />
     </Box>
     <Box>
       <InfoCard
         centered
-        on_accept={() => console.log('accept')}
-        accept_button_text="Accept"
-        on_close={() => console.log('close')}
-        close_button_text="Close"
+        onAccept={() => console.log('accept')}
+        acceptButtonText="Accept"
+        onClose={() => console.log('close')}
+        closeButtonText="Close"
         text="This is a description of some information or a tip that will inform the user of something that will help them."
       />
     </Box>

diff --git a/packages/dnb-eufemia/src/components/info-card/style/_info-card.scss b/packages/dnb-eufemia/src/components/info-card/style/_info-card.scss
@@ -13,6 +13,8 @@
   border-radius: 0.25rem;
   padding: 1rem;
 
+  overflow: hidden;
+
   @include defaultDropShadow();
 
   &--centered {
@@ -43,6 +45,7 @@
   &--buttons {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     &-centered {
       flex-direction: column;
       align-items: center;