@carbon-labs/react-whats-new

The @carbon-labs/react-whats-new package contains elements used in the "What's New" pattern. The What's New pattern is comprised of the Carbon for IBM Product's Tearsheet component, a few Carbon components and icons, along with the components from this package. The following components are provided by @carbon-labs/react-whats-new:

Toc:

• Toc
• TocList
• TocItem
• TocSections
• TocSection

Bubble:

• Bubble
• BubbleHeader

ViewStack:

• ViewStack
• View

📦 Getting started

To install @carbon-labs/react-whats-new in your project, you will need to run the following command using npm:

npm install -S @carbon/react @carbon/ibm-products @carbon-labs/react-whats-new

If you prefer Yarn, use the following command instead:

yarn add @carbon/react @carbon/ibm-products @carbon-labs/react-whats-new

⚡ Usage

To use this package you will need to import components from both @carbon/react, @carbon/ibm-products and @carbon-labs/react-whats-new to compose the What's New pattern.

import React, { useCallback, useRef, useState } from 'react';

import {
  Toc,
  TocList,
  TocItem,
  TocSections,
  TocSection,
  Bubble,
  BubbleHeader,
  ViewStack,
  View,
} from '@carbon-labs/react-whats-new/es/index';
import { Tearsheet } from '@carbon/ibm-products';

function App() {
  return (
    <>
      {/* Tier 2 - release notification pattern */}
      <Bubble>
        <BubbleHeader>...</BubbleHeader>
        <ViewStack>
          <View>...</View>
        </ViewStack>
        ...
      </Bubble>

      {/* Tier 1 - what's new center pattern */}
      <Toc ref={tocRef}>
        <Tearsheet
          influencer={
            <TocList>
              <TocItem>Feature 1</TocItem>
              <TocItem>Feature 2</TocItem>
            </TocList>
          }>
          <TocSections threshold={0.2}>
            <TocSection as="div">...</TocSection>
            ...
          </TocSections>
        </Tearsheet>
      </Toc>
    </>
  );
}

export default App;

SCSS

Import the styles from @carbon/react, @carbon/ibm-products and @carbon-labs/react-whats-new in your stylesheet:

@use '@carbon/react' with (
  $font-path: '@ibm/plex'
);
@use '@carbon/ibm-products/scss/components/Tearsheet';
@use '@carbon-labs/react-whats-new/scss/whats-new';

Storybook

You can explore the available components, see different configuration options, and learn how to compose them in Storybook.

🙌 Contributing

Want to contribute to @carbon-labs? Read through the Carbon Labs contribution section before diving into our developer guide:

• Developer Guide

📖 Changelog

See the latest updates and version history in the changelog.

📝 License

Licensed under the Apache 2.0 License.

IBM Telemetry

This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.