Skip to content
Designer Decisions

ShowDecisionCard

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

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

By default it renders only the decision description and usage guidelines.

Action Color
#9c2e5c

Used for buttons, links and navigation

For:

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

Not For:

  • Non-interactive elements

Composes

This component composes:

Props

༶ DecisionProps: d

The mandatory prop d serves to identify and retrieve the decision.

༶ DecisionProps: layout

The optional layout prop controls the flow of items in set/scale decisions and the relative position of the value/viz pair.

The layout of the card adapts automatically to the layout of set/scale decisions in order to use the available space:

  • row - card uses column layout, rendering visualization first, then values.
  • column - card uses row layout, rendering visualization and details side by side.
<ShowDecisionCard d="Pink Palette" value={false} size="m" />
Pink Palette

Wide range shades of Pink

For:

  • Icons
  • Backgrounds

Not For:

  • Typography

The layout of the card is otherwise unaffected by the layout prop if the decision produces a single value.

༶ ValueProps: value

This prop control whether the value should be shown and how to format it.

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

༶ VizProps: viz, size, and options

These props control whether the visualization should be shown, which specific visualization to show, and how to customize it.

In this example we are rendering a ColorValueDecision, hiding its value and increasing the size of the color swatch.

<ShowDecisionCard d="Action Color" value={false} size="l" />
Action Color

Used for buttons, links and navigation

For:

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

Not For:

  • Non-interactive elements

Refer to the table on Composable Types for details on available visualizations and options.

༶ name (true): boolean

Provide this flag to hide the decision’s name.

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

Base unit for space scales

༶ description (true): boolean

Provide this flag to hide the decision’s description.

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

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 d="Action Color" usage={false} />

༶ model: (optional) boolean

༶ params: (optional) boolean

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

<ShowDecisionCard d="Action Color" model params />
Action Color
#9c2e5c

Used for buttons, links and navigation

For:

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

Not For:

  • Non-interactive elements

Model:

color-value/explicit

Params:

  • value

    [object Object]

༶ contexts: (optional) boolean

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

<ShowDecisionCard d="Action Color" contexts />
Action Color
#9c2e5c

Used for buttons, links and navigation

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 d="Action Color" data />
Action Color
#9c2e5c

Used for buttons, links and navigation

For:

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

Not For:

  • Non-interactive elements
{
  "name": "Action Color",
  "model": "color-value/explicit",
  "params": {
    "value": {
      "l": 0.48,
      "c": 0.15,
      "h": {
        "$name": "Brand Pink Hue"
      }
    }
  },
  "description": "Used for buttons, links and navigation",
  "usage": {
    "isFor": [
      "Link Foreground",
      "Action Background",
      "Action Foreground",
      "Action Border",
      "Navigation Item Background"
    ],
    "notFor": [
      "Non-interactive elements"
    ]
  }
}