Add bojagi

.gitignore

@@ -13,3 +13,4 @@ package-lock.json
 # Demo specific
 demo/**/*
 utils/storybook/coverage
+.bojagi/tmp

package.json

@@ -36,6 +36,7 @@
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.13.12",
     "@babel/preset-react": "7.13.13",
+    "@bojagi/cli": "^0.17.1",
     "@rollup/plugin-commonjs": "19.0.0",
     "@rollup/plugin-node-resolve": "13.0.0",
     "@rollup/plugin-replace": "2.4.2",

packages/dropdowns/stories/3-Select.stories.tsx

@@ -10,7 +10,10 @@ import { Select } from '@zendeskgarden/react-dropdowns';
 
 export default {
   title: 'Components/Dropdowns/Select',
-  component: Select
+  component: Select,
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export { Default } from './examples/Select/Default';

packages/dropdowns/stories/4-Autocomplete.stories.tsx

@@ -10,7 +10,10 @@ import { Autocomplete } from '@zendeskgarden/react-dropdowns';
 
 export default {
   title: 'Components/Dropdowns/Autocomplete',
-  component: Autocomplete
+  component: Autocomplete,
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export { Default } from './examples/Autocomplete/Default';

packages/dropdowns/stories/6-Combobox.stories.tsx

@@ -10,7 +10,10 @@ import { Combobox } from '@zendeskgarden/react-dropdowns';
 
 export default {
   title: 'Components/Dropdowns/Combobox',
-  component: Combobox
+  component: Combobox,
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export { Default } from './examples/Combobox/Default';

packages/forms/stories/10-Range.stories.tsx

@@ -15,7 +15,10 @@ import { IRangeStoryProps, RANGE_ARGS, RANGE_ARG_TYPES } from './story-types';
 export default {
   title: 'Components/Forms/Range',
   component: Range,
-  subcomponents: { Field, Label, Hint, Message, Range }
+  subcomponents: { Field, Label, Hint, Message, Range },
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export const Default: Story<IRangeStoryProps & InputHTMLAttributes<HTMLInputElement>> = ({

packages/forms/stories/11-MultiThumbRange.stories.tsx

@@ -22,7 +22,10 @@ import { IRangeStoryProps, RANGE_ARGS, RANGE_ARG_TYPES } from './story-types';
 export default {
   title: 'Components/Forms/MultiThumbRange',
   component: MultiThumbRange,
-  subcomponents: { Field, Label, Hint, Message, MultiThumbRange }
+  subcomponents: { Field, Label, Hint, Message, MultiThumbRange },
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export const Default: Story<IRangeStoryProps & IMultiThumbRangeProps> = ({

packages/forms/stories/15-Fieldset.stories.tsx

@@ -27,6 +27,9 @@ export default {
   subcomponents: {
     Fieldset,
     'Fieldset.Legend': Fieldset.Legend
+  },
+  parameters: {
+    layout: 'padded'
   }
 } as Meta;
 

packages/forms/stories/2-Input.stories.tsx

@@ -14,7 +14,10 @@ import { IInputStoryProps, INPUT_ARGS, INPUT_ARG_TYPES } from './story-types';
 export default {
   title: 'Components/Forms/Input',
   component: Input,
-  subcomponents: { Field, Label, Hint, Message, Input }
+  subcomponents: { Field, Label, Hint, Message, Input },
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export const Default: Story<IInputStoryProps & IInputProps> = ({

packages/forms/stories/3-Textarea.stories.tsx

@@ -14,7 +14,10 @@ import { IInputStoryProps, INPUT_ARGS, INPUT_ARG_TYPES } from './story-types';
 export default {
   title: 'Components/Forms/Textarea',
   component: Textarea,
-  subcomponents: { Field, Label, Hint, Message, Textarea }
+  subcomponents: { Field, Label, Hint, Message, Textarea },
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export const Default: Story<IInputStoryProps & ITextareaProps> = ({

packages/forms/stories/4-MediaInput.stories.tsx

@@ -23,7 +23,10 @@ import { IInputStoryProps, INPUT_ARGS, INPUT_ARG_TYPES } from './story-types';
 export default {
   title: 'Components/Forms/MediaInput',
   component: MediaInput,
-  subcomponents: { Field, Label, Hint, Message, MediaInput }
+  subcomponents: { Field, Label, Hint, Message, MediaInput },
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export const Default: Story<IInputStoryProps & IMediaInputProps> = ({

packages/forms/stories/5-FauxInput.stories.tsx

@@ -22,7 +22,10 @@ import { IInputStoryProps, INPUT_ARGS, INPUT_ARG_TYPES } from './story-types';
 export default {
   title: 'Components/Forms/FauxInput',
   component: FauxInput,
-  subcomponents: { Field, Label, Hint, Message, FauxInput }
+  subcomponents: { Field, Label, Hint, Message, FauxInput },
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export const Default: Story<IInputStoryProps & IFauxInputProps> = ({

packages/forms/stories/6-Select.stories.tsx

@@ -15,7 +15,10 @@ import { IInputStoryProps, INPUT_ARGS, INPUT_ARG_TYPES } from './story-types';
 export default {
   title: 'Components/Forms/Select',
   component: Select,
-  subcomponents: { Field, Label, Hint, Message, Select }
+  subcomponents: { Field, Label, Hint, Message, Select },
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export const Default: Story<IInputStoryProps & ISelectProps> = ({

packages/forms/stories/7-Checkbox.stories.tsx

@@ -15,7 +15,10 @@ import { ICheckboxStoryProps, CHECKBOX_ARGS, CHECKBOX_ARGS_TYPES } from './story
 export default {
   title: 'Components/Forms/Checkbox',
   component: Checkbox,
-  subcomponents: { Field, Label, Hint, Message, Checkbox }
+  subcomponents: { Field, Label, Hint, Message, Checkbox },
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export const Default: Story<ICheckboxStoryProps & ICheckboxProps> = ({

packages/forms/stories/8-Radio.stories.tsx

@@ -15,7 +15,10 @@ import { ICheckboxStoryProps, CHECKBOX_ARGS, CHECKBOX_ARGS_TYPES } from './story
 export default {
   title: 'Components/Forms/Radio',
   component: Radio,
-  subcomponents: { Field, Label, Hint, Message, Radio }
+  subcomponents: { Field, Label, Hint, Message, Radio },
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export const Default: Story<ICheckboxStoryProps & IRadioProps> = ({

packages/notifications/stories/3-Notification.stories.tsx

@@ -12,7 +12,10 @@ import { Col, Grid, Row } from '@zendeskgarden/react-grid';
 
 export default {
   title: 'Components/Notifications/Notification',
-  component: Notification
+  component: Notification,
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 export const Default: Story = ({ type, isRegular, isMultiLine }) => (

packages/tooltips/stories/2-Tooltip.stories.tsx

@@ -14,7 +14,10 @@ import { Alert, Title as AlertTitle } from '@zendeskgarden/react-notifications';
 
 export default {
   title: 'Components/Tooltips',
-  subcomponents: { Tooltip, Title, Paragraph }
+  subcomponents: { Tooltip, Title, Paragraph },
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 type TOOLTIP_SIZE = 'default' | 'small' | 'medium' | 'large' | 'extra-large';

packages/typography/stories/3-CodeBlock.stories.tsx

@@ -476,7 +476,10 @@ export const execute = async (args: IGitHubPagesArgs): Promise<string | undefine
 
 export default {
   title: 'Components/Typography/CodeBlock',
-  component: CodeBlock
+  component: CodeBlock,
+  parameters: {
+    layout: 'padded'
+  }
 } as Meta;
 
 interface IDefaultStoryProps {