Theme

Sound

Jump to a component

AniCanonKit · Story

QuestionRow

QuestionRow is one open question the audience is waiting on: planted → raised → answered, each step a real event with its place.

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

QuestionRow is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

QuestionRow is made for the web, and isn’t part of Sakuga for Android yet.

Use it for: One open question the audience is waiting on, from planted to raised to answered, each step a real event with its place.
Not for: A character, place or event on StoryEntityRow
A conflict found in writingProposalCard
Where a person is in a flow they step throughStepper

Guidelines

An empty Answered step invites the event that pays it off. quiet flags a question nothing has touched for a long time; answered fades the row's pictures and arrows, and its words drop only to the faintest text that reads, so they stay legible.

QuestionRowExample.jsxReact

import { QuestionRow } from '@anicanon/sakuga/anicanonkit';

export default function QuestionRowExample() {
  return (
    <QuestionRow
      question="Where is Arthur?"
      note="Raised in Cell four"
      planted={{ label: 'Arthur taken' }}
      raised={[{ label: 'Cell four' }]}
      selected
    />
  );
}

Props`QuestionRowProps`

questionrequired

string

plantedrequired

QuestionStep

state

'waiting' | 'quiet' | 'answered'

note

string

selected

boolean

raised

QuestionStep[]

answered

QuestionStep

Types

interface QuestionStep {
    label: string;
    image?: string;
    told?: string;
}

QuestionRowExample.swiftiOS · coming soon

QuestionRowExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

question-pipOpen question track: a step not reached.

bg-fillshade-a12rgba(11,10,16,0.12)

bg-fillwhite-a14rgba(255,255,255,0.14)

question-pip-onOpen question track: a step reached.

accentcamellia-600#c2335f

accentcamellia-400#f4779f

question-bgQuestionRow: surface.

bg-surfaceneutral-0#ffffff

bg-surfaceneutral-900#111117

question-borderQuestionRow: outline.

border-hairlineshade-a08rgba(11,10,16,0.08)

border-hairlinewhite-a06rgba(255,255,255,0.06)

question-selectedQuestionRow: the selected question.

accentcamellia-600#c2335f

accentcamellia-400#f4779f

question-titleQuestionRow: question and event names.

text-primaryneutral-925#0b0a10

text-primaryneutral-0#ffffff

question-noteQuestionRow: notes, step labels and arrows.

text-mutedneutral-600#5c5b67

text-mutedneutral-400#a3a3a7

question-event-bgQuestionRow: an event in a step.

bg-canvasneutral-50#f6f6f8

bg-canvasneutral-950#07070a

question-empty-borderQuestionRow: an empty step.

border-placeholdershade-a24rgba(11,10,16,0.24)

border-placeholderwhite-a22rgba(255,255,255,0.22)

Space and shape

question-gap

gap-lg

12px

question-padding-y

inset-md

12px

question-padding-x

inset-lg

16px

question-radius

radius-md

12px

question-inset-ring-width

line-hairline

1px

question-selected-inset-ring-width

line-strong

2px

question-done-opacity

opacity-muted

0.6

question-q-width

its own value

200px

question-q-gap

gap-sm

6px

question-q-span-gap

gap-md

8px

question-steps-gap

gap-md

8px

question-step-gap

gap-xs

4px

question-event-gap

gap-md

8px

question-event-padding-y

inset-xs

4px

question-event-padding-right

inset-sm

8px

question-event-padding-left

inset-xs

4px

question-event-radius

radius-sm

8px

question-empty-gap

gap-sm

6px

question-empty-height

its own value

40px

question-empty-radius

radius-sm

8px

question-empty-inset-ring-width

line-strong

2px

question-arrow-margin-top

gap-xl

16px

question-arrow-icon-size

icon-size-xs

14px

question-empty-icon-size

icon-size-xs

14px

question-forced-selected-width

line-strong

2px

Type

question-q-b-font

text-title-4

700 17px/22px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

question-q-span-font

text-small

500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

question-step-small-font

text-eyebrow

700 11px/14px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

question-step-small-letter-spacing

tracking-caps

.06em

question-event-b-font

text-small-strong

600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

question-empty-font

text-small-strong

600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

question-opacity-duration

motion-base

240ms

question-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)

question-box-shadow-duration

motion-fast

160ms

QuestionRow

Guidelines

PropsQuestionRowProps

Types

Colour

Space and shape

Type

Motion

Props`QuestionRowProps`