Easel Design System 🎨 by Phillips Auction House

Seldon is the source for design guidelines, component documentation, and resources for building apps with the Phillips.com Design System.

We use Storybook to document the components. Our storybook is hosted in Netlify at here.

Installation

# With NPM
npm install @phillips/seldon

# With yarn
yarn add @phillips/seldon

Styling

The project contains a scss folder. Here you will find the main export of our sass styles for our components. There's also a scss export that contains our mixins, tokens, and other utilities.

@use '@phillips/seldon/dist/scss/componentStyles'; // our component tyles
@use '@phillips/seldon/dist/scss/allPartials'; // our scss utilities

If you wish to only import specific component styles you can find them in their respective directories inside the scss folder.

@use '@phillips/seldon/dist/scss/components/Button/button';

Components

Each component can be imported in your project by referencing the named exports from main index file.

import { Button } from '@phillips/seldon';

Contributing Guidelines

Before you start contributing to this project please check out our guidelines found here

Git worktrees (new-worktree.sh)

You can use Git worktrees to keep multiple branches checked out at once (for example when reviewing a PR or spiking a change) without re-running all setup steps every time.

Use the scripts/new-worktree.sh helper to create a new worktree and copy ignored files (like .env) into the new directory:

# New worktree at ../my-feature using the current branch
./scripts/new-worktree.sh ../my-feature

# New worktree on an existing branch
./scripts/new-worktree.sh ../my-feature feature-branch

# New worktree with a new branch (e.g. from main)
./scripts/new-worktree.sh ../my-feature -b new-branch main

# Optionally copy node_modules instead of running npm install in the new worktree
COPY_NODE_MODULES=1 ./scripts/new-worktree.sh ../my-feature

The script runs git worktree add, copies ignored config files into the new directory, runs npm install, and then opens the new worktree in Cursor or VS Code.

To remove a worktree, you can run the following command:

git worktree remove ../my-feature

This will remove the worktree from the git repository.