wix-style-react/src/CardFolderTabs/docs/CardFolderTabs.examples.js

wix-style-react

export const _structure = `
() => {
  const [activeTabId, setActiveTabId] = React.useState('1');

  return (
    <CardFolderTabs
      activeId={activeTabId}
      onTabChange={tabId => setActiveTabId(tabId)}
    >
      <CardFolderTabs.Tab name="Tab 1" id="1">
        <Card.Content>
          <StorybookComponents.Placeholder height="180px">
            First tab content
          </StorybookComponents.Placeholder>
        </Card.Content>
      </CardFolderTabs.Tab>
      <CardFolderTabs.Tab name="Tab 2" id="2">
        <Card.Content>
          <StorybookComponents.Placeholder height="180px">
            Second tab content
          </StorybookComponents.Placeholder>
        </Card.Content>
      </CardFolderTabs.Tab>
      <CardFolderTabs.Tab name="Tab 3" id="3">
        <Card.Content>
          <StorybookComponents.Placeholder height="180px">
            Third tab content
          </StorybookComponents.Placeholder>
        </Card.Content>
      </CardFolderTabs.Tab>
    </CardFolderTabs>
  );
};
`;

export const _tabButtonWidth = `
() => {
  const renderCardTab = ({ name, id }) => (
    <CardFolderTabs.Tab name={name} id={id}>
      <Card.Content>
        <StorybookComponents.Placeholder height="180px" />
      </Card.Content>
    </CardFolderTabs.Tab>
  );

  return (
    <StorybookComponents.Stack flexDirection="column">
      <CardFolderTabs activeId={'1'} maxTabWidth="120px">
        {renderCardTab({ name: 'Tab 1', id: '1' })}
        {renderCardTab({ name: 'Tab 2', id: '2' })}
        {renderCardTab({ name: 'Tab 3', id: '3' })}
      </CardFolderTabs>
      <CardFolderTabs activeId={'1'} fluid>
        {renderCardTab({ name: 'Tab 1', id: '1' })}
        {renderCardTab({ name: 'Tab 2', id: '2' })}
        {renderCardTab({ name: 'Tab 3', id: '3' })}
      </CardFolderTabs>
      <CardFolderTabs activeId={'1'} maxTabWidth="fit-content">
        {renderCardTab({ name: 'Short Title', id: '1' })}
        {renderCardTab({ name: 'Short Title', id: '2' })}
        {renderCardTab({ name: 'Long Title Stretches Tab Width', id: '3' })}
      </CardFolderTabs>
    </StorybookComponents.Stack>
  );
};
`;

export const _disabled = `
<CardFolderTabs activeId={'1'}>
  <CardFolderTabs.Tab name="Tab 1" id="1">
    <Card.Content>
      <StorybookComponents.Placeholder height="180px" />
    </Card.Content>
  </CardFolderTabs.Tab>
  <CardFolderTabs.Tab name="Disabled" id="3" disabled>
    <Card.Content>
      <StorybookComponents.Placeholder height="180px" />
    </Card.Content>
  </CardFolderTabs.Tab>
</CardFolderTabs>;
`;

export const _customTitle = `
<CardFolderTabs activeId={'1'} maxTabWidth="180px">
  <CardFolderTabs.Tab
    name={
      <StorybookComponents.Stack gap="6px">
        <Icons.Inbox />
        <Text skin="dark">Tab Title 1</Text>
      </StorybookComponents.Stack>
    }
    id="1"
  >
    <Card.Content>
      <StorybookComponents.Placeholder height="180px" />
    </Card.Content>
  </CardFolderTabs.Tab>
  <CardFolderTabs.Tab
    name={
      <StorybookComponents.Stack gap="6px">
        <Icons.Notification />
        <Text skin="dark">Tab Title 2</Text>
      </StorybookComponents.Stack>
    }
    id="2"
  >
    <Card.Content>
      <StorybookComponents.Placeholder height="180px" />
    </Card.Content>
  </CardFolderTabs.Tab>
</CardFolderTabs>;
`;

export const _textOverflow = `
() => {
  const renderCardTab = ({ name, id }) => (
    <CardFolderTabs.Tab name={name} id={id}>
      <Card.Content>
        <StorybookComponents.Placeholder height="180px" />
      </Card.Content>
    </CardFolderTabs.Tab>
  );

  return (
    <StorybookComponents.Stack flexDirection="column">
      <CardFolderTabs activeId={'1'} maxTabWidth="138px">
        {renderCardTab({ name: 'Hover over to see the full title', id: '1' })}
        {renderCardTab({ name: 'Hover over to see the full title', id: '2' })}
      </CardFolderTabs>

      <CardFolderTabs activeId={'1'} maxTabWidth="138px" ellipsis={false}>
      {renderCardTab({ name: 'Multiline Tab Title', id: '1' })}
      {renderCardTab({ name: 'Multiline Tab Title', id: '2' })}
      </CardFolderTabs>
    </StorybookComponents.Stack>
  );
};
`;

export const _emptyState = `
() => {
  const [activeTabId, setActiveTabId] = React.useState('1');

  return (
    <CardFolderTabs
      activeId={activeTabId}
      onTabChange={tabId => setActiveTabId(tabId)}
    >
      <CardFolderTabs.Tab name="All" id="1">
        <Card.Content>
          <EmptyState
            title="No reservations"
            subtitle="You’ll see all your online reservations here."
            theme="section"
          >
            <TextButton prefixIcon={<Icons.Add />}>New reservation</TextButton>
          </EmptyState>
        </Card.Content>
      </CardFolderTabs.Tab>
      <CardFolderTabs.Tab name="Open" id="2">
        <Card.Content>
          <EmptyState
            title="No open reservations"
            subtitle="There are no pending reservations that need your attention."
            theme="section"
          >
            <TextButton prefixIcon={<Icons.Add />}>New reservation</TextButton>
          </EmptyState>
        </Card.Content>
      </CardFolderTabs.Tab>
      <CardFolderTabs.Tab name="Upcoming" id="3">
        <Card.Content>
          <EmptyState
            title="No upcoming reservations"
            subtitle="There are no reservations for the next 24 hours."
            theme="section"
          >
            <TextButton prefixIcon={<Icons.Add />}>New reservation</TextButton>
          </EmptyState>
        </Card.Content>
      </CardFolderTabs.Tab>
    </CardFolderTabs>
  );
};
`;