Skip to content
Designer Decisions

ShowDecisionCard

import { ShowDecisionCard } from '@noodlestan/designer-shows/astro';

Renders the appropriate visualization according to the decision type, along with any decision details you might want to display.

Action Color
#9b2c5a

Used for buttons, links and navigation

Intended For:

  • Link Foreground
  • Action Background
  • Action Foreground
  • Action Border
  • Navigation Item Background

Not For:

  • Non-interactive elements

Props

༶ DecisionProps: store and d

These two mandatory props serve to identify and retrieve the decision.

༶ ValueProps: value and viz

You can use these props to control how the visualization and value are displayed.

In this example we are rendering a ColorValueDecision and both

  • hiding the visualization;
  • and displaying its value in rgb and hsl formats.
<ShowDecisionCard store={store} d="Action Color" value={['rgb', 'oklch']} />
Action Color
#9b2c5a
oklch(47.63% 0.15 359.38deg)

Used for buttons, links and navigation

Intended For:

  • Link Foreground
  • Action Background
  • Action Foreground
  • Action Border
  • Navigation Item Background

Not For:

  • Non-interactive elements

༶ name (true): boolean

Provide this flag to hide the decision’s name.

<ShowDecisionCard store={store} d="Space Unit" name={false} />
5px

Base unit for space scales

༶ description (true): boolean

Provide this flag to hide the decision’s description.

<ShowDecisionCard store={store} d="Action Color" description={false} />
Action Color
#9b2c5a

Intended For:

  • Link Foreground
  • Action Background
  • Action Foreground
  • Action Border
  • Navigation Item Background

Not For:

  • Non-interactive elements

༶ usage (true): boolean

Provide this flag to hide the decision usage guidelines.

<ShowDecisionCard store={store} d="Action Color" usage={false} />
Action Color
#9b2c5a

Used for buttons, links and navigation

༶ model (optional): boolean

༶ params (optional): boolean

Provide these flag to display the decision model and input params at the bottom of the card

<ShowDecisionCard store={store} d="Action Color" model params />
Action Color
#9b2c5a

Used for buttons, links and navigation

Intended For:

  • Link Foreground
  • Action Background
  • Action Foreground
  • Action Border
  • Navigation Item Background

Not For:

  • Non-interactive elements

Model:

color-value/explicit

Params:

  • value

    #9B2C5A

༶ contexts (optional): boolean

Provide this flag to display the decision’s contexts at the bottom of the card

<ShowDecisionCard store={store} d="Action Color" contexts />
Action Color
#9b2c5a

Used for buttons, links and navigation

Intended For:

  • Link Foreground
  • Action Background
  • Action Foreground
  • Action Border
  • Navigation Item Background

Not For:

  • Non-interactive elements
🚧 ShowDecisionContexts

༶ data (optional): boolean

Provide this flag to display the decision’s raw data at the bottom of the card

<ShowDecisionCard store={store} d="Action Color" data />
Action Color
#9b2c5a

Used for buttons, links and navigation

Intended For:

  • Link Foreground
  • Action Background
  • Action Foreground
  • Action Border
  • Navigation Item Background

Not For:

  • Non-interactive elements
{
  "model": "color-value/explicit",
  "name": "Action Color",
  "description": "Used for buttons, links and navigation",
  "usage": {
    "intendedFor": [
      "Link Foreground",
      "Action Background",
      "Action Foreground",
      "Action Border",
      "Navigation Item Background"
    ],
    "notFor": [
      "Non-interactive elements"
    ]
  },
  "params": {
    "value": "#9B2C5A"
  }
}