D24 Checkout components

This guide explains how to integrate and use the theme in your project using ThemeProvider and styled-components. By following this approach, your components will be able to dynamically adapt to theme changes.

Prerequisites

• Ensure you have styled-components installed in your project.
• Ensure you have the ThemeProvider from styled-components.

Setup

1. Define Your Theme

First, define your theme object. This object contains all the styles and properties you want to use across your project.

You can find the theme definition in the checkoutTheme.js file. Link to checkoutTheme.js

2. Set Up ThemeProvider

Wrap your application with ThemeProvider and pass the theme object as a prop.

// ./index.js

import { ThemeProvider } from 'styled-components';
import { checkoutTheme } from '@d24/ui-checkout-lib';

ReactDOM.render(
  <ThemeProvider theme={checkoutTheme}>
    <Provider store={store}>
      <App />
    </Provider>
  </ThemeProvider>,
  document.getElementById('root')
);

3. Use Theme in Styled Components

Use the theme in your styled-components by accessing the theme prop. Here's some examples:

export const StyledTitle = styled.h2`
  ${({ theme }) => theme.font.body.title.default};
  ...
`;

const buttonTypeStyles = {
  primary: css`
    background-color: ${({ theme }) => theme.color.button.primary.background.default};
    color: ${({ theme }) => theme.color.button.primary.text.color.default};

    &:hover:not(:disabled) {
      background-color: ${({ theme }) => theme.color.button.primary.background.hover};
    }

    &:active:not(:disabled) {
      background-color: ${({ theme }) => theme.color.button.primary.background.active};
    }
  `,
  secondary: css`
    background-color: ${({ theme }) => theme.color.button.secondary.background.default};
    color: ${({ theme }) => theme.color.button.secondary.text.color.default};
    border: 1px solid ${({ theme }) => theme.color.button.secondary.border.color.default};

    &:hover:not(:disabled) {
      border: 2px solid ${({ theme }) => theme.color.button.secondary.border.color.default};
    }

    &:active:not(:disabled) {
      background-color: ${({ theme }) => theme.color.button.secondary.background.active};
      color: ${({ theme }) => theme.color.button.secondary.text.color.active};
      border: 2px solid ${({ theme }) => theme.color.button.secondary.border.color.default};
    }

    &:disabled {
      background-color: ${({ theme }) => theme.color.button.secondary.background.default};
      color: ${({ theme }) => theme.color.button.secondary.text.color.disabled};
      border: 1px solid ${({ theme }) => theme.color.button.secondary.border.color.disabled};
    }
  `,
  link: css`
    color: ${({ theme }) => theme.color.button.tertiary.text.color.default};
    font-size: ${({ theme }) => theme.font.body.paragraphXxs.default.fontSize};
  `,
};

By following this setup, your components will adapt to the theme changes provided by the ThemeProvider.

4. Using the Render Function in Tests Wrapped with Theme

In your .test files, make sure to use the render function as demonstrated below. This will wrap the components with the ThemeProvider, allowing them to receive the theme prop correctly.

import { CheckoutThemeWrapper, createRenderFunction } from './test.utils';

const render = createRenderFunction(CheckoutThemeWrapper);

Integrating the Library into Other Projects

To integrate this library into another project, follow these steps:

1. Install the Library

Install the library using npm or yarn.

npm i @d24/ui-checkout-lib
# or
yarn add @d24/ui-checkout-lib

2. Import and Wrap Your Application

Import the ThemeProvider and your theme from the library, then wrap your application with ThemeProvider and pass the theme object as a prop.

// ./index.js

import { ThemeProvider } from 'styled-components';
import { checkoutTheme } from '@d24/ui-checkout-lib';

ReactDOM.render(
  <ThemeProvider theme={checkoutTheme}>
    <Provider store={store}>
      <App />
    </Provider>
  </ThemeProvider>,
  document.getElementById('root')
);