@wix/design-system/dist/docs/components/CardFolderTabsExamples.md

@wix/design-system

## Feature Examples


### Structure
- description: This component is composed of a `<CardFolderTabs>` wrapper that holds any number of `<CardFolderTabs.Tab/>` items inside of it.
        You can specify content for each tab separately.
- example: 
```jsx 
() => {
  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>
  );
};
```

### Tab button width
- description: Specify maximum allowed tab width in pixels or percentage with `maxTabWidth` prop. Stretch tabs equally to fill the full width of a card with `fluid` prop.
        <br/>
        <br/>
        Initially all tab buttons are sized to be equal with a maximum width of 138px. Set `maxTabWidth` value  to “fit-content” to size them to match title width.
        <br/>
- example: 
```jsx 
() => {
  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>
  );
};
```

### Disabled
- description: Restrict users from opening a certain tab with `disabled` prop.
- example: 
```jsx 
<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>;
```

### Custom title
- description: Customize the tab title by overriding default text string value of `name` prop to any required components or their composition.
- example: 
```jsx 
<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>;
```

### Text overflow
- description: Control text overflow with `ellipsis` prop. By default, tab titles that exceed `maxTabWidth` will be truncated and displayed in a tooltip when the user hover over a tab. Set `ellipsis` to false to enable text wrapping.
- example: 
```jsx 
() => {
  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>
  );
};
```




    


## Common Use Case Examples


### Empty state
- description: Use section `<EmptyState/>`  as tab content when there’s no data to display. 
- example: 
```jsx 
() => {
  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."
            skin="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."
            skin="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."
            skin="section"
          >
            <TextButton prefixIcon={<Icons.Add />}>New reservation</TextButton>
          </EmptyState>
        </Card.Content>
      </CardFolderTabs.Tab>
    </CardFolderTabs>
  );
};
```