@bigcommerce/[email protected]

Patch Changes

• Updated dependencies [eef4d38]
• Updated dependencies [66bc0c8]
  • @bigcommerce/[email protected]

@bigcommerce/[email protected]

Patch Changes

• eef4d38: Fix header wrapping on smaller screens
• 66bc0c8: Fixed page width definition to expand to the available area

@bigcommerce/[email protected]

Patch Changes

• Updated dependencies [8e09cdf]
  • @bigcommerce/[email protected]

@bigcommerce/[email protected]

Patch Changes

• dbd50a6: Added Header component documentation
• 8d80893: Added Action Bar pattern component documentation
• 7b4f5a5: Added Page pattern component documentation
• Updated dependencies [fd0ab6e]
• Updated dependencies [8e09cdf]
• Updated dependencies [a3e0fda]
• Updated dependencies [14ddc22]
  • @bigcommerce/[email protected]
  • @bigcommerce/[email protected]

@bigcommerce/[email protected]

Patch Changes

• 8e09cdf: Adds default props to styled-components

@bigcommerce/[email protected]

Minor Changes

• fd0ab6e: Added ActionBar component to complement the overall Page pattern

Patch Changes

• a3e0fda: Updates the Page and ActionBar components to work outside of iframes. In the context of our Control Panel, we may have pages that are directly rendered. This allows a "fixed" position item to float only within the page context.
• 14ddc22: Removes unused PropsWithChildren type.
• Updated dependencies [8e09cdf]
  • @bigcommerce/[email protected]

@bigcommerce/[email protected]

Patch Changes

• Updated dependencies [cc19989]
  • @bigcommerce/[email protected]

@bigcommerce/[email protected]

Major Changes

• cc19989: Releases @bigcommerce/big-design-pattern, a collections of useful patterns for BigDesign.

  New components:

  Header

  A header component that can be used to display a title, description, and actions.

  import { Text, Link } from '@bigcommerce/big-design';
  import { AddIcon. ArrowDropDownIcon } from '@bigcommerce/big-design-icons';
  import { Header } from '@bigcommerce/big-design-patterns';
  
  export const Component = () => {
    return (
      <Header
        actions={[
          {
            text: 'Main action',
            variant: 'primary',
            iconLeft: <AddIcon />,
          },
          {
            items: [],
            toggle: {
              text: 'Secondary',
              variant: 'secondary',
              iconRight: <ArrowDropDownIcon />,
            },
          },
        ]}
        backLink={{
          text: 'Back link',
          href: '#',
          onClick: () => {
            window.alert('Back button clicked');
          },
        }}
        badge={{
          variant: 'primary',
          label: 'Beta',
        }}
        description={
          <Text>
            Main description of the page. It provides a comprehensive overview, accurately capturing
            the essence of the topic in a concise manner.{' '}
            <Link external={true} href="#" target="_blank">
              Learn more
            </Link>
          </Text>
        }
        icon={<img alt="" height={40} src="logo.svg" width={40} />}
        title="Page Title"
      />
    );
  };

  Page

  A page component that can be used to display a header and main content.

  import { Panel } from '@bigcommerce/big-design';
  import { Page, Header } from '@bigcommerce/big-design-patterns';
  
  export const Component = () => {
    return (
      <Page
        background={{
          src: 'background.jpg',
        }}
        header={<Header {...} />}
        message={{
          header: 'Optional headline',
          type: 'info',
          messages: [
            { text: 'Required description copy.', link: { text: 'Optional link', href: '#' } },
          ],
        }}
      >
        <Panel header="Main content">
          ...
        </Panel>
      </Page>
    );
  };

@bigcommerce/[email protected]

Patch Changes

• Updated dependencies [f8665f3]
• Updated dependencies [d2f010d]
  • @bigcommerce/[email protected]
  • @bigcommerce/[email protected]
  • @bigcommerce/[email protected]

All notable changes to this project will be documented in this file.
See Conventional Commits for commit guidelines.

@bigcommerce/[email protected]

Minor Changes

• f8665f3: Added wide breakpoint to theme definition to best adapt responsive features to wide screens

Patch Changes

• 63aeebc: Replaces the next-transpile-modules package with the native built-in Next.js functionality.
• fbe979e: Uses the package.json version from the @bigcommerce/examples package instead of relying on a dependency from the docs package.json.
• Updated dependencies [f8665f3]
• Updated dependencies [d2f010d]
  • @bigcommerce/[email protected]
  • @bigcommerce/[email protected]
  • @bigcommerce/[email protected]

All notable changes to this project will be documented in this file.
See Conventional Commits for commit guidelines.