github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/stories/Box.stories.tsx (about)

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React from 'react';
     3  import Box, { CollapseBox } from '@ui/Box';
     4  import Button from '@ui/Button';
     5  import { ComponentMeta } from '@storybook/react';
     6  import '../webapp/sass/profile.scss';
     7  
     8  export default {
     9    title: 'Components/Box',
    10    component: Box,
    11  } as ComponentMeta<typeof Box>;
    12  
    13  // Just a simple example on how to render other components
    14  export const BoxWithButton = () => (
    15    <Box>
    16      <Button>I am a button</Button>
    17    </Box>
    18  );
    19  
    20  // No Padding can be used
    21  // which is useful when defining your own padding
    22  export const BoxWithButtonNoPadding = () => (
    23    <Box noPadding>
    24      <h1>Hello, world</h1>
    25    </Box>
    26  );
    27  
    28  export const CollapseBoxWithContent = () => (
    29    <CollapseBox title="Title">
    30      <h1>Hello, world</h1>
    31    </CollapseBox>
    32  );
    33  
    34  export const CollapseBoxWhenTitleIsEmptyString = () => (
    35    <CollapseBox title="">
    36      <h1>Hello, world</h1>
    37    </CollapseBox>
    38  );