@heycar-uikit/logo/src/docs/Component.stories.mdx

HeyCar-UIKit logo

import { Meta, Story, Props } from '@storybook/addon-docs';
import { ComponentHeader, TabContainer } from 'storybook/blocks';

import Logo from '../index';
import { version } from '../../package.json';
import Description from './Description.mdx';
import Changelog from '../../CHANGELOG.md';

<!-- Meta -->

<Meta title="Components/Atoms/Logo" component={Logo} argTypes={{}} />

export const LogoTemplate = args => {
  const { usage } = args;
  const backgroundColors = {
    ['dark_bg']: '#052962',
    ['light_bg']: '#F1F4FA',
    ['mint_bg']: '#00CEA5',
  };
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
      }}
    >
      <div
        style={{
          backgroundColor: backgroundColors[usage || 'dark_bg'],
          padding: '15px',
          display: 'inline-block',
        }}
      >
        <Logo {...args} />
      </div>
    </div>
  );
};

<!-- Canvas -->

<Story
  name="Logo"
  args={{
    fontSize: 200,
  }}
  argTypes={{
    fontSize: {
      control: 'number',
    },
    color: {
      table: {
        disable: true,
      },
    },
    role: {
      table: {
        disable: true,
      },
    },
    dataTestId: {
      table: {
        disable: true,
      },
    },
    title: {
      table: {
        disable: true,
      },
    },
    children: {
      table: {
        disable: true,
      },
    },
    ariaHidden: {
      table: {
        disable: true,
      },
    },
    ariaLabel: {
      table: {
        disable: true,
      },
    },
  }}
>
  {LogoTemplate.bind({})}
</Story>

<!-- Docs -->

<ComponentHeader
  name="Logo"
  version={version}
  stage={3}
  design="https://www.figma.com/file/rrvkvQEoVTOHa7MzyKSaoz/OTP-Global-Design-System?node-id=1073%3A116234"
/>

The Logo component is used to display heycar logos

```tsx
import Logo from '@heycar-uikit/logo';
```

<!-- Description -->

<TabContainer
  tabs={[
    { label: 'Description', component: <Description /> },
    { label: 'Props', component: <Props of={Logo} /> },
    { label: 'Changelog', component: <Changelog /> },
  ]}
/>