Skip to content
Designer Decisions

Astro Component Common Props

DecisionProps

All components that render a decision, such as the <ShowDecisionCard/> component, require the following props.

༶ d: string

A string with the name of the decision to visualize.

<ShowDecision d="Brand Color Set" />
#d45084
#16b2dd
#0f0f0f
#f5f5f5

If the decision does not exist, it renders a notice.

<ShowDecision d="Brand Green" />
Decision not found "Brand Green"

༶ store: Store

The store prop provides access to all decision input data so that components can retrieve decision objects and resolve values.

The store can be retrieved from the Astro integration.

import { integrationAPI } from '@noodlestan/designer-integration-astro';


export const store = await integrationAPI.build();


<div class="custom-component">
    <ShowDecision store={store} d="Brand Blue" />
</div>

༶ layout: ShowDecisionLayout

In case of the decision holding a single value, this prop determines how value and visualization sit next to each other.

By default they show side by side but column layout will make values show under the visualization.

<ShowDecision d="Brand Pink" layout="column" size="m" />
#d45084

In case of set/scale decisions, this prop determines how items should be laid out.

By default, they will show side by side, but providing column will result in a single stack. The layout for each items’s value and viz will default to row in this case. But you can also provide an array with two items in order to have full control over both the item list and individual items.

<ShowDecision d="Brand Color Set" layout="column" />
<ShowDecision d="Brand Color Set" layout={['column', 'column']} />
#d45084
#16b2dd
#0f0f0f
#f5f5f5
#d45084
#16b2dd
#0f0f0f
#f5f5f5

ValueProps

All components that directly render a decision or a decision value also accept the following optional props.

༶ value (true): boolean | string | object

Provide this flag to hide the value or to customize how it is formatted.

Refer to the table on Composable Types to learn which value options are available for each decision type.

<ShowDecision d="Brand Pink" value={false} size="m" />
<ShowDecision d="Brand Pink" value={['hsl', 'oklch']} size="m" />
hsl(336.4deg 60.2% 57.2%)
oklch(62% 0.172 359deg)

VizProps

All components that directly render a decision or a decision visualization also accept the following optional props.

༶ viz (true): boolean | string

Provide this flag to chose between available visualizations or to hide the decision visualization altogether, displaying only its value(s).

Refer to the table on Composable Types to learn which value options are available for each decision type.

༶ size (auto): ShowVizSize

Constrains the visualization to a specific size.

<ShowDecision d="Action Color" size={'s'} />
<ShowDecision d="Sizing Space Scale" size={'xs'} />
#9c2e5c
32px
48px
72px
108px

Refer to ShowVizSize for available sizes.

༶ options: (optional) object

Provide this prop to configure visualization options.

Refer to the table on Composable Types to learn which value options are available for each decision type.