@transferwise/components 0.0.0-experimental-8a15907 → 0.0.0-experimental-118c6ed

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -7,7 +7,7 @@ import CheckboxButton from './CheckboxButton';
 export default {
   component: CheckboxButton,
   title: 'Actions/CheckboxButton',
-  tags: ['autodocs'],
+
   args: {
     disabled: false,
     onBlur: action('blur'),

package/src/checkboxOption/CheckboxOption.story.tsx

@@ -11,7 +11,6 @@ import CheckboxOption from './CheckboxOption';
 const meta: Meta<typeof CheckboxOption> = {
   component: CheckboxOption,
   title: 'Option/CheckboxOption',
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/chevron/Chevron.story.tsx

@@ -5,7 +5,6 @@ import Chevron from './Chevron';
 export default {
   component: Chevron,
   title: 'Other/Chevron',
-  tags: ['autodocs'],
 } satisfies Meta<typeof Chevron>;
 
 type Story = StoryObj<typeof Chevron>;

package/src/chips/Chips.story.tsx

@@ -6,7 +6,6 @@ import Chips, { ChipsProps, ChipValue } from './Chips';
 const meta: Meta<typeof Chips> = {
   title: 'Actions/Chips',
   component: Chips,
-  tags: ['autodocs'],
 };
 export default meta;
 

package/src/circularButton/CircularButton.story.tsx

@@ -11,7 +11,7 @@ import Body from '../body';
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
-  tags: ['autodocs'],
+
   args: {
     children: 'Button text',
     icon: <Icons.Freeze />,

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -16,13 +16,14 @@ export default {
   component: BottomSheet,
   title: 'Dialogs/BottomSheet',
   args: {
-    open: true,
+    open: false,
   },
-  render: (args) => {
-    const [open, setOpen] = useState(args.open);
+
+  render: (args, { viewMode }) => {
+    const [open, setOpen] = useState(viewMode !== 'docs');
 
     return (
-      <div style={{ height: '2000px' }}>
+      <div>
         <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
         <BottomSheet
           {...args}

package/src/common/card/Card.story.tsx

@@ -9,7 +9,6 @@ import Card from '.';
 const meta: Meta<typeof Card> = {
   component: Card,
   title: 'Internal/Card',
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/common/circle/Circle.story.tsx

@@ -14,7 +14,6 @@ export default {
 type Story = StoryObj<typeof Circle>;
 
 export const Basic: Story = {
-  tags: ['autodocs'],
   args: {
     children: 'NP',
     size: 40,

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -6,7 +6,6 @@ import { storyConfig } from '../test-utils';
 export default {
   component: CriticalCommsBanner,
   title: 'Feedback/CriticalCommsBanner',
-  tags: ['autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 export const Basic = {

package/src/dateInput/DateInput.story.tsx

@@ -6,7 +6,6 @@ import { DateInput } from '..';
 const meta: Meta<typeof DateInput> = {
   component: DateInput,
   title: 'Forms/DateInput',
-  tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;
 
 export default meta;

package/src/divider/Divider.story.tsx

@@ -29,7 +29,7 @@ const hideControls = (args: string[]) => {
 const meta: Meta<typeof Divider> = {
   component: Divider,
   title: 'Layouts/Divider',
-  tags: ['autodocs'],
+
   decorators: [withContainer],
   parameters: {
     actions: { argTypesRegex: null },

package/src/emphasis/Emphasis.story.tsx

@@ -5,7 +5,6 @@ import Emphasis from './Emphasis';
 export default {
   component: Emphasis,
   title: 'Typography/Emphasis',
-  tags: ['autodocs'],
 } satisfies Meta<typeof Emphasis>;
 
 type Story = StoryObj<typeof Emphasis>;

package/src/field/Field.story.tsx

@@ -13,7 +13,7 @@ import Info from '../info';
 export default {
   component: Field,
   title: 'Forms/Field',
-  tags: ['autodocs'],
+
   argTypes: {
     messageIconLabel: {
       control: 'text',

package/src/iconButton/IconButton.story.tsx

@@ -81,7 +81,6 @@ const Template = ({ size, disabled }: Props) => {
 };
 
 export const Basic: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div

package/src/info/Info.story.tsx

@@ -13,6 +13,7 @@ const meta = {
     title: 'Fast transfer hint',
     content: lorem10,
   },
+
   render: (args) => (
     <p>
       <span>Fast transfer</span> <Info {...args} />

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -16,6 +16,7 @@ const meta: Meta<typeof InputWithDisplayFormat> = {
       </Field>
     );
   },
+
   args: {
     onFocus: fn(),
     onBlur: fn(),

package/src/inputs/SelectInput.story.tsx

@@ -22,7 +22,7 @@ import {
 const meta = {
   title: 'Forms/SelectInput',
   component: SelectInput,
-  tags: ['autodocs'],
+
   parameters: { actions: { argTypesRegex: '' } },
 } satisfies Meta<typeof SelectInput>;
 export default meta;

package/src/instructionsList/InstructionsList.story.tsx

@@ -10,7 +10,6 @@ export default {
   component: InstructionsList,
   title: 'Typography/InstructionsList',
   render: (args) => <InstructionsList {...args} />,
-  tags: ['autodocs'],
 } satisfies Meta<typeof InstructionsList>;
 
 type Story = StoryObj<typeof InstructionsList>;

package/src/label/Label.story.tsx

@@ -4,7 +4,6 @@ import { Label } from './Label';
 export default {
   component: Label,
   title: 'Forms/Label',
-  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -11,7 +11,6 @@ import LegacyListItem, { List } from '.';
 export default {
   component: LegacyListItem,
   title: 'Other/LegacyListItem',
-  tags: ['autodocs'],
 };
 
 const Template = ({

package/src/loader/Loader.story.tsx

@@ -16,7 +16,6 @@ export default {
       },
     },
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof Loader>;
 
 type Story = StoryObj<typeof Loader>;

package/src/logo/Logo.story.tsx

@@ -12,7 +12,6 @@ export default {
       </div>
     );
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof Logo>;
 
 type Story = StoryObj<typeof Logo>;

package/src/markdown/Markdown.story.tsx

@@ -5,7 +5,6 @@ import Markdown from './Markdown';
 export default {
   component: Markdown,
   title: 'Typography/Markdown',
-  tags: ['autodocs'],
 } satisfies Meta<typeof Markdown>;
 
 type Story = StoryObj<typeof Markdown>;

package/src/modal/Modal.story.tsx

@@ -10,10 +10,11 @@ import { lorem10, lorem100, lorem1000, storyConfig } from '../test-utils';
 export default {
   component: Modal,
   title: 'Dialogs/Modal',
+
   args: {
     size: 'md',
     position: 'center',
-    open: true,
+    open: false,
   },
   parameters: {
     chromatic: {
@@ -27,10 +28,11 @@ type Story = StoryObj<typeof Modal>;
 export interface StoryContentProps {
   args: CommonProps & ModalProps;
   screenMode?: ScreenMode;
+  viewMode?: string;
 }
 
-const StoryContent = ({ args, screenMode }: StoryContentProps) => {
-  const [open, setOpen] = useState(args.open);
+const StoryContent = ({ args, screenMode, viewMode }: StoryContentProps) => {
+  const [open, setOpen] = useState(viewMode !== 'docs');
 
   return (
     <>
@@ -70,7 +72,7 @@ export const Basic: Story = {
       </Button>
     ),
   },
-  render: (args) => <StoryContent args={args} />,
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
@@ -81,6 +83,7 @@ export const ContentScroll: Story = {
     body: lorem1000,
     scroll: Scroll.CONTENT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const ContentScrollMobile: Story = storyConfig(ContentScroll, { variants: ['mobile'] });
@@ -91,6 +94,7 @@ export const ViewportScroll: Story = {
     body: lorem1000,
     scroll: Scroll.VIEWPORT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const ViewportScrollMobile: Story = storyConfig(ViewportScroll, { variants: ['mobile'] });
@@ -100,6 +104,7 @@ export const WithoutTitle: Story = {
     body: lorem1000,
     scroll: Scroll.CONTENT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const WithoutTitleMobile: Story = storyConfig(WithoutTitle, { variants: ['mobile'] });
@@ -115,9 +120,9 @@ export const WithThemeProviderInContent: Story = {
       </Button>
     ),
   },
-  render: (args, { globals: { screenMode } }) => (
+  render: (args, { globals: { screenMode }, viewMode }) => (
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    <StoryContent args={args} screenMode={screenMode} />
+    <StoryContent args={args} screenMode={screenMode} viewMode={viewMode} />
   ),
 };
 

package/src/moneyInput/MoneyInput.story.tsx

@@ -41,7 +41,6 @@ export default {
       },
     },
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof MoneyInput>;
 
 type Story = StoryObj<typeof MoneyInput>;

package/src/navigationOption/NavigationOption.story.tsx

@@ -18,7 +18,6 @@ import NavigationOption from './NavigationOption';
 export default {
   component: NavigationOption,
   title: 'Option/NavigationOption',
-  tags: ['autodocs'],
 };
 
 type TemplateTypes = {

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -6,7 +6,6 @@ import PhoneNumberInput from './PhoneNumberInput';
 const meta = {
   component: PhoneNumberInput,
   title: 'Forms/PhoneNumberInput',
-  tags: ['autodocs'],
 } satisfies Meta<typeof PhoneNumberInput>;
 
 export default meta;

package/src/popover/Popover.story.tsx

@@ -26,7 +26,7 @@ const Content = () => (
 export default {
   component: Popover,
   title: 'Dialogs/Popover',
-  tags: ['autodocs'],
+
   args: {
     preferredPlacement: Position.BOTTOM,
     title: 'Guaranteed rate',

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -15,7 +15,6 @@ const meta: Meta<typeof PrimitiveAnchor> = {
     onMouseEnter: fn(),
     onMouseLeave: fn(),
   },
-  tags: ['autodocs'],
 };
 export default meta;
 

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -14,7 +14,6 @@ const meta: Meta<typeof PrimitiveButton> = {
     onMouseEnter: fn(),
     onMouseLeave: fn(),
   },
-  tags: ['autodocs'],
 };
 export default meta;
 

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx

@@ -9,7 +9,6 @@ const meta = {
   args: {
     children: 'Button text',
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof PrimitiveButton>;
 
 export default meta;

package/src/processIndicator/ProcessIndicator.story.tsx

@@ -7,7 +7,6 @@ import ProcessIndicator from './ProcessIndicator';
 export default {
   component: ProcessIndicator,
   title: 'Loading/ProcessIndicator',
-  tags: ['autodocs'],
 } satisfies Meta<typeof ProcessIndicator>;
 
 type Story = StoryObj<typeof ProcessIndicator>;

package/src/progressBar/ProgressBar.story.tsx

@@ -6,7 +6,6 @@ import Info from '../info';
 export default {
   component: ProgressBar,
   title: 'Content/ProgressBar',
-  tags: ['autodocs'],
 } satisfies Meta<typeof ProgressBar>;
 
 type Story = StoryObj<typeof ProgressBar>;

package/src/promoCard/PromoCard.story.tsx

@@ -6,7 +6,7 @@ import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from '
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,
   title: 'Layouts/PromoCard',
-  tags: ['autodocs'],
+
   parameters: {
     actions: { argTypesRegex: null },
   },

package/src/promoCard/PromoCardGroup.story.tsx

@@ -43,7 +43,6 @@ const PromoCards = () => {
 const meta: Meta<typeof PromoCardGroup> = {
   component: PromoCardGroup,
   title: 'Layouts/PromoCardGroup',
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/statusIcon/StatusIcon.story.tsx

@@ -8,7 +8,7 @@ import { storyConfig } from '../test-utils';
 export default {
   component: StatusIcon,
   title: 'Other/StatusIcon',
-  tags: ['autodocs'],
+
   argTypes: {
     iconLabel: {
       control: 'text',

package/src/stepper/Stepper.story.tsx

@@ -33,7 +33,6 @@ export default {
       options: [...Array(STEPS.length).keys()],
     },
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof Stepper>;
 
 type Story = StoryObj<typeof Stepper>;

package/src/sticky/Sticky.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../.storybook/modes';
 const meta: Meta<typeof Sticky> = {
   component: Sticky,
   title: 'Dialogs/Sticky',
-  tags: ['autodocs'],
+
   args: {
     open: true,
     position: 'bottom', // Default position

package/src/switch/Switch.story.tsx

@@ -18,7 +18,6 @@ const meta: Meta<typeof Switch> = {
     'aria-label': undefined,
     onClick: fn(),
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof Switch>;
 
 export default meta;

package/src/switchOption/SwitchOption.story.tsx

@@ -9,7 +9,7 @@ import SwitchOption, { type SwitchOptionProps } from './SwitchOption';
 const meta = {
   component: SwitchOption,
   title: 'Option/SwitchOption',
-  tags: ['autodocs'],
+
   argTypes: {
     title: { control: 'text' },
     content: { control: 'text' },

package/src/table/Table.story.tsx

@@ -6,7 +6,6 @@ import { TableRowType, TableRowClickableType } from './TableRow';
 export default {
   component: Table,
   title: 'Option/Table',
-  tags: ['autodocs'],
 } satisfies Meta<typeof Table>;
 
 type Story = StoryObj<typeof Table>;

package/src/tabs/Tabs.story.tsx

@@ -7,7 +7,6 @@ import Tabs from './Tabs';
 export default {
   component: Tabs,
   title: 'Navigation/Tabs',
-  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/tooltip/Tooltip.story.tsx

@@ -20,7 +20,6 @@ export default {
       </Tooltip>
     </div>
   ),
-  tags: ['autodocs'],
 } satisfies Meta<typeof Tooltip>;
 
 type Story = StoryObj<typeof Tooltip>;

package/src/typeahead/Typeahead.story.tsx

@@ -48,6 +48,7 @@ const meta: Meta<typeof Typeahead> = {
     onInputChange: fn(),
     onSearch: fn(),
   },
+
   argTypes: {
     size: {
       control: 'inline-radio',

package/src/upload/Upload.story.tsx

@@ -8,7 +8,7 @@ import { Field } from '../field/Field';
 const meta = {
   component: Upload,
   title: 'Forms/Upload',
-  tags: ['autodocs'],
+
   argTypes: {
     maxSize: {
       control: {

package/src/uploadInput/UploadInput.story.tsx

@@ -8,7 +8,6 @@ import { UploadResponse } from './types';
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput',
   component: UploadInput,
-  tags: ['autodocs'],
 };
 
 export default meta;