Merge pull request #409 from danskernesdigitalebibliotek/allow-padded…

…-layout Padded layout in Storybook
danskernesdigitalebibliotek · Dec 29, 2023 · 8a5d3d0 · 8a5d3d0
2 parents f465f0e + c4a80c4
commit 8a5d3d0
Show file tree

Hide file tree

Showing 14 changed files with 20 additions and 16 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,4 +1,5 @@
 export const parameters = {
+  layout: "fullscreen",
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
@@ -13,6 +14,6 @@ export const parameters = {
     // Set the viewport widths that Chromatic tests with globally.
     // 400 lies between our screen-xs & screen-s variables.
     // 1200 is the chromatic viewport we were using as default before adding an extra one for phones.
-    viewports: [400, 1200]
+    viewports: [400, 1200],
   },
 };
diff --git a/src/stories/Library/Buttons/button-favourite/ButtonFavourite.stories.tsx b/src/stories/Library/Buttons/button-favourite/ButtonFavourite.stories.tsx
@@ -12,6 +12,7 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=656%3A5407",
     },
+    layout: "centered",
   },
   argTypes: {
     fill: {

diff --git a/src/stories/Library/Buttons/button/button-expand/button-expand.stories.tsx b/src/stories/Library/Buttons/button/button-expand/button-expand.stories.tsx
@@ -4,7 +4,9 @@ import ButtonExpand, { ButtonExpandProps } from "./ButtonExpand";
 export default {
   title: "Library / Buttons / Button Expand",
   component: ButtonExpand,
-  parameters: {},
+  parameters: {
+    layout: "centered",
+  },
   argTypes: {
     showMore: {
       control: {

diff --git a/src/stories/Library/Buttons/toggle-button/ToggleButton.stories.tsx b/src/stories/Library/Buttons/toggle-button/ToggleButton.stories.tsx
@@ -11,6 +11,7 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=607%3A35282",
     },
+    layout: "centered",
   },
   argTypes: {
     isChecked: {

diff --git a/src/stories/Library/Forms/checkbox/Checkbox.stories.tsx b/src/stories/Library/Forms/checkbox/Checkbox.stories.tsx
@@ -36,7 +36,9 @@ export default {
       },
     },
   },
-  parameters: {},
+  parameters: {
+    layout: "centered",
+  },
 } as ComponentMeta<typeof Checkbox>;
 
 const Template: ComponentStory<typeof Checkbox> = (args) => (

diff --git a/src/stories/Library/Forms/date-picker/DatePicker.stories.tsx b/src/stories/Library/Forms/date-picker/DatePicker.stories.tsx
@@ -17,7 +17,7 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7605%3A54868&mode=design&t=MoXpQuI4TAXRxRDe-1",
     },
-    layout: "fullscreen",
+    layout: "padded",
   },
 } as ComponentMeta<typeof DatePicker>;
 

diff --git a/src/stories/Library/Forms/input/Input.stories.tsx b/src/stories/Library/Forms/input/Input.stories.tsx
@@ -24,7 +24,7 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=1239%3A66174",
     },
-    layout: "fullscreen",
+    layout: "padded",
   },
 } as ComponentMeta<typeof Input>;
 

diff --git a/src/stories/Library/accordion/Accordion.stories.tsx b/src/stories/Library/accordion/Accordion.stories.tsx
@@ -15,6 +15,7 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=1357%3A9754",
     },
+    layout: "padded",
   },
   argTypes: {
     list: {

diff --git a/...rary/date-calendar/DatePicker.stories.tsx → ...ry/date-calendar/DateCalendar.stories.tsx b/...rary/date-calendar/DatePicker.stories.tsx → ...ry/date-calendar/DateCalendar.stories.tsx
@@ -12,7 +12,7 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7605%3A54868&mode=design&t=MoXpQuI4TAXRxRDe-1",
     },
-    layout: "fullscreen",
+    layout: "padded",
   },
 } as ComponentMeta<typeof DateCalendar>;
 

diff --git a/src/stories/Library/dropdown/Dropdown.stories.tsx b/src/stories/Library/dropdown/Dropdown.stories.tsx
@@ -19,6 +19,7 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=274%3A6642",
     },
+    layout: "padded",
   },
 };
 

diff --git a/src/stories/Library/progress-bar/progressBar.stories.tsx b/src/stories/Library/progress-bar/progressBar.stories.tsx
@@ -9,7 +9,7 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=1239%3A66855",
     },
-    layout: "fullscreen",
+    layout: "padded",
   },
   argTypes: {
     amount: {

diff --git a/src/stories/Library/status-label/StatusLabel.stories.tsx b/src/stories/Library/status-label/StatusLabel.stories.tsx
@@ -7,7 +7,9 @@ export default {
   component: StatusLabel,
   decorators: [withDesign],
   argTypes: {},
-  parameters: {},
+  parameters: {
+    layout: "centered",
+  },
 } as ComponentMeta<typeof StatusLabel>;
 
 const Template: ComponentStory<typeof StatusLabel> = (args) => (

diff --git a/src/stories/Library/typography/Typography.stories.tsx b/src/stories/Library/typography/Typography.stories.tsx
@@ -12,6 +12,7 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=2%3A476",
     },
+    layout: "padded",
   },
 } as Meta;
 

diff --git a/src/styles/scss/internal.scss b/src/styles/scss/internal.scss
@@ -122,14 +122,6 @@ code {
   background-color: #f5f8fa;
 }
 
-.sb-main-padded {
-  padding: 0 !important;
-}
-
-.sb-show-main {
-  padding: 0 !important;
-}
-
 // Shadows
 .shadow-box-container {
   display: flex;
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ export default { @@
           type: "figma",
           url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=274%3A6642",
         },
+        layout: "padded",
       },
     };
@@ Expand Down @@