Fix indents.

Author: mkrause

src/components/containers/Banner/Banner.stories.tsx

@@ -55,7 +55,7 @@ export default {
     layout: 'padded',
   },
   decorators: [
-    Story => <LayoutDecorator size="large" resize="inline"><Story/></LayoutDecorator>,
+    Story => <LayoutDecorator size="large" /*resize="inline"*/><Story/></LayoutDecorator>,
   ],
   tags: ['autodocs'],
   args: {},
@@ -67,6 +67,12 @@ const ExampleActionButton = () =>
   <Banner.ActionButton onPress={() => alert('clicked')}>Button</Banner.ActionButton>;
 const ExampleActionIcon = () =>
   <Banner.ActionIcon label="Copy" onPress={() => alert('clicked')}><Icon icon="copy"/></Banner.ActionIcon>;
+const ExampleActions = () => (
+  <>
+    <ExampleActionButton/>
+    <ExampleActionIcon/>
+  </>
+);
 
 
 export const BannerStandard: Story = {
@@ -112,12 +118,7 @@ export const BannerWithMultipleActions: Story = {
   args: {
     children: 'A banner with two actions.',
     onClose: () => {},
-    actions: (
-      <>
-        <ExampleActionButton/>
-        <ExampleActionIcon/>
-      </>
-    ),
+    actions: <ExampleActions/>,
   },
 };
 
@@ -142,29 +143,19 @@ export const BannerWithTextWrap: Story = {
   args: {
     children: <LoremIpsum/>,
     onClose: () => {},
-    actions: (
-      <>
-        <ExampleActionButton/>
-        <ExampleActionIcon/>
-      </>
-    ),
-  },
-};
+    actions: <ExampleActions/>,
+      },
+    };
 
-export const BannerWithTitleOverflowAndTextWrap: Story = {
-  ...storyDescription(dedent`
+    export const BannerWithTitleOverflowAndTextWrap: Story = {
+      ...storyDescription(dedent`
     This shows both the title truncation and message wrap at the same time.
   `),
   args: {
     title: loremIpsum(),
     children: <LoremIpsum/>,
     onClose: () => {},
-    actions: (
-      <>
-        <ExampleActionButton/>
-        <ExampleActionIcon/>
-      </>
-    ),
+    actions: <ExampleActions/>,
   },
 };
 
@@ -199,7 +190,7 @@ export const BannerInformational: Story = {
     title: loremIpsum(),
     children: <LoremIpsum/>,
     onClose: () => {},
-    actions: <ExampleActionButton/>,
+    actions: <ExampleActions/>,
   },
 };
 
@@ -210,7 +201,7 @@ export const BannerSuccess: Story = {
     title: loremIpsum(),
     children: <LoremIpsum/>,
     onClose: () => {},
-    actions: <ExampleActionButton/>,
+    actions: <ExampleActions/>,
   },
 };
 
@@ -221,7 +212,7 @@ export const BannerWarning: Story = {
     title: loremIpsum(),
     children: <LoremIpsum/>,
     onClose: () => {},
-    actions: <ExampleActionButton/>,
+    actions: <ExampleActions/>,
   },
 };
 
@@ -232,7 +223,7 @@ export const BannerError: Story = {
     title: loremIpsum(),
     children: <LoremIpsum/>,
     onClose: () => {},
-    actions: <ExampleActionButton/>,
+    actions: <ExampleActions/>,
   },
 };
 

src/styling/lib/reset.css

@@ -1,115 +1,115 @@
 /* stylelint-disable */
 /***
-    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
-    GitHub page: https://github.com/elad2412/the-new-css-reset
+  The new CSS reset - version 1.11.3 (last updated 25.08.2024)
+  GitHub page: https://github.com/elad2412/the-new-css-reset
 ***/
 
 /*
-    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
-    - The "symbol *" part is to solve Firefox SVG sprite bug
-    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+  Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+  - The "symbol *" part is to solve Firefox SVG sprite bug
+  - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
  */
 *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
-    all: unset;
-    display: revert;
+  all: unset;
+  display: revert;
 }
 
 /* Preferred box-sizing value */
 *,
 *::before,
 *::after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 /* Fix mobile Safari increase font-size on landscape mode */
 html {
-    -moz-text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
 }
 
 /* Reapply the pointer cursor for anchor tags */
 a, button {
-    cursor: revert;
+  cursor: revert;
 }
 
 /* Remove list styles (bullets/numbers) */
 ol, ul, menu, summary {
-    list-style: none;
+  list-style: none;
 }
 
 /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
 ol {
-    counter-reset: revert;
+  counter-reset: revert;
 }
 
 /* For images to not be able to exceed their container */
 img {
-    max-inline-size: 100%;
-    max-block-size: 100%;
+  max-inline-size: 100%;
+  max-block-size: 100%;
 }
 
 /* removes spacing between cells in tables */
 table {
-    border-collapse: collapse;
+  border-collapse: collapse;
 }
 
 /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
 input, textarea {
-    -webkit-user-select: auto;
+  -webkit-user-select: auto;
 }
 
 /* revert the 'white-space' property for textarea elements on Safari */
 textarea {
-    white-space: revert;
+  white-space: revert;
 }
 
 /* minimum style to allow to style meter element */
 meter {
-    -webkit-appearance: revert;
-    appearance: revert;
+  -webkit-appearance: revert;
+  appearance: revert;
 }
 
 /* preformatted text - use only for this feature */
 :where(pre) {
-    all: revert;
-    box-sizing: border-box;
+  all: revert;
+  box-sizing: border-box;
 }
 
 /* reset default text opacity of input placeholder */
 ::placeholder {
-    color: unset;
+  color: unset;
 }
 
 /* fix the feature of 'hidden' attribute.
    display:revert; revert to element instead of attribute */
 :where([hidden]) {
-    display: none;
+  display: none;
 }
 
 /* revert for bug in Chromium browsers
    - fix for the content editable attribute will work properly.
    - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
 :where([contenteditable]:not([contenteditable="false"])) {
-    -moz-user-modify: read-write;
-    -webkit-user-modify: read-write;
-    overflow-wrap: break-word;
-    -webkit-line-break: after-white-space;
-    -webkit-user-select: auto;
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  -webkit-user-select: auto;
 }
 
 /* apply back the draggable feature - exist only in Chromium and Safari */
 :where([draggable="true"]) {
-    -webkit-user-drag: element;
+  -webkit-user-drag: element;
 }
 
 /* Revert Modal native behavior */
 :where(dialog:modal) {
-    all: revert;
-    box-sizing: border-box;
+  all: revert;
+  box-sizing: border-box;
 }
 
 /* Remove details summary webkit styles */
 ::-webkit-details-marker {
-    display: none;
+  display: none;
 }