@bumped-inc/loyalty.design

Bumped, Inc. components of the design system

Usage no npm install needed!

<script type="module">
  import bumpedIncLoyaltyDesign from 'https://cdn.skypack.dev/@bumped-inc/loyalty.design';
</script>

README

@bumped-inc/loyalty.design

Bumped, Inc. components of the design system

Usage

yarn add @bumped-inc/loyalty.design

import { PrimaryButton } from "@bumped-inc/loyalty.design";

const MyComponent = () => {
  return (
    <PrimaryButton
      onClick={() => {
        console.log("wow!");
      }}
    >
      Click me!
    </PrimaryButton>
  );
};

Add or edit colors

To edit or add colors in loyalty.design, navigate to src/styled/internal/colors.tsx.

Steps:

  1. Add a new property to SharedThemeColors. This can be done by copy-pasting another color and changing its name. There is documentation for each color, so try to provide a good description of the color if you can.
  2. Add the default value to the convertColors function and add it to the object that is returned.

To preview, run the command yarn start, and navigate to the Colors section under Theme in your localhost (likely http://localhost:6006/?path=/story/theme-color--all-colors).