Pinion

The ultimate wrapper (sorry, 2Pac).

With a few exceptions (see Spacer and Anchor), the Pinion will wrap every component that exists on a given page. If you open up the dev-tools on one of our websites, you'll see them rendered as section elements in our HTML.

There's also an additional div involved that wraps the component (or children):

const Pinion = ({ component, children, ...props }) => (
  <$Pinion component={component} {...props}>
    <div>{children}</div>
  </$Pinion>
);

The additional div gives us the ultimate ability to customize many aspects of a component's layout, including:

1. The standardization of horizontal and vertical padding/margin across all breakpoints through our box utility.

2. The max width of the component in relation to our grid values.

3. The alignment of the component (left, center, right).

I'm looking at the Pinion file and it seems pretty bare bones to me. Where do I add the customizations you just mentioned? 🤔

Good question!

All of the styles are hidden away in the pinionTokens, for cleanliness.

By default, all the pinions will some base styling, such as:

• 100% width

• Consistent px values (shorthand for padding-left and padding-right)

• Consitent my values (margin-top and margin-bottom)

And the following styles applied to the wrapping div:

• A maxWidth of $content (evaluates to 6 columns in our grid system).

• Center aligned within the Pinion component.

Below these styles, we leverage Stitches variants to alter these values based on the name of the component (passed down via Rack).

👀 Beware: Any newly created components will need to be added to both the pinionTokens file as well as RackComponentList. This step is often overlooked - if you're not seeing your component rendered, check to make sure they're included in both of these files. 👀