index : www.armandphilippot.com	main
	The frontend of my personal website.	Armand Philippot

aboutsummaryrefslogtreecommitdiffstats

log msg author committer range

path: root/src/components/atoms/overlay

	Commit message (Collapse)	Author	Age	Files	Lines
*	feat(components): add an Overlay component	Armand Philippot	2023-11-11	5	-0/+150
	* add useScrollbarWidth hook * add useScrollLock hook * add a new component to lock scroll with an overlay (it can be useful especially on small screens to prevent background contents to be scrolled)

generated by cgit v1.2.3 (git 2.39.1) at 2025-11-03 18:41:20 +0000

import { ComponentMeta, ComponentStory } from '@storybook/react';
import Branding from './branding';

/**
 * Branding - Storybook Meta
 */
export default {
  title: 'Molecules/Layout/Branding',
  component: Branding,
  args: {
    isHome: false,
    withLink: false,
  },
  argTypes: {
    baseline: {
      control: {
        type: 'text',
      },
      description: 'The Branding baseline.',
      type: {
        name: 'string',
        required: false,
      },
    },
    isHome: {
      control: {
        type: 'boolean',
      },
      description: 'Use H1 if the current page is homepage.',
      table: {
        category: 'Options',
        defaultValue: { summary: false },
      },
      type: {
        name: 'boolean',
        required: false,
      },
    },
    photo: {
      control: {
        type: 'text',
      },
      description: 'The Branding photo.',
      type: {
        name: 'string',
        required: true,
      },
    },
    title: {
      control: {
        type: 'text',
      },
      description: 'The Branding title.',
      type: {
        name: 'string',
        required: true,
      },
    },
    withLink: {
      control: {
        type: 'boolean',
      },
      description: 'Wraps the title with a link to homepage.',
      table: {
        category: 'Options',
        defaultValue: { summary: false },
      },
      type: {
        name: 'boolean',
        required: false,
      },
    },
  },
} as ComponentMeta<typeof Branding>;

const Template: ComponentStory<typeof Branding> = (args) => (
  <Branding {...args} />
);

/**
 * Branding Stories - Default
 */
export const Default = Template.bind({});
Default.args = {
  title: 'Website title',
  photo: 'http://placeimg.com/640/480',
};

/**
 * Branding Stories - With baseline
 */
export const WithBaseline = Template.bind({});
WithBaseline.args = {
  title: 'Website title',
  baseline: 'Maiores corporis qui',
  photo: 'http://placeimg.com/640/480',
};