@storybook/addon-knobs#array JavaScript Examples

Playground = () => ({
  template: hbs`
    <DenaliChipGroup class={{class}} as |Group| >
      {{#each items as |item index|}}
        <Group.Chip @backgroundColor="purple" @backgroundShade={{if index "500" "300"}} >
          {{item}}
        </Group.Chip>
      {{/each}}
    </DenaliChipGroup>
  `,
  context: {
    class: text('class', '', attribute),
    items: array('items', ['Denali', 'Chip', 'Group'], ',', example),
  },
})

loggedInWithContentInContainer = () => {
  const content = text("Sample Content", "This is sample content");
  const name = text("Name", "Phill Conrad");
  const role = select("Role", ["admin", "student", "guest"], "guest");
  const picture = text(
    "Image URL",
    "https://avatars3.githubusercontent.com/u/1119017"
  );
  const user = { name, role, picture };

  const names = array(
    "Names",
    [
      "Los Angeles",
      "Goleta",
      "Isla Vista",
      "San Jose",
      "Fremont",
      "Newport Beach",
      "Irvine",
      "Cupertino",
      "Santa Barbara",
      "San Diego",
      "Sunnyvale",
    ],
    ","
  );
  return (
    <Layout user={user} names={names} onChange={(event, newValue) => {}}>
      <Container className="py-3">{content}</Container>
    </Layout>
  );
}

loggedOutEmpty = () => {
  const names = array(
    "Names",
    [
      "Los Angeles",
      "Goleta",
      "Isla Vista",
      "San Jose",
      "Fremont",
      "Newport Beach",
      "Irvine",
      "Cupertino",
      "Santa Barbara",
      "San Diego",
      "Sunnyvale",
    ],
    ","
  );
  return <Layout names={names} onChange={(event, newValue) => {}} />;
}

SimpleCitiesSearch = () => {
  const names = array(
    "Names",
    [
      "Los Angeles",
      "Goleta",
      "Isla Vista",
      "San Jose",
      "Fremont",
      "Newport Beach",
      "Irvine",
      "Cupertino",
      "Santa Barbara",
      "San Diego",
      "Sunnyvale",
    ],
    ","
  );
  return (
    <AppBar>
      <Toolbar>
        <div>
          <CitiesSearch names={names} onChange={(event, newValue) => {}} />
        </div>
      </Toolbar>
    </AppBar>
  );
}

loggedIn = () => {
  const name = text("Name", "Phill Conrad");
  const role = select("Role", ["admin", "student", "guest"], "guest");
  const picture = text(
    "Image URL",
    "https://avatars3.githubusercontent.com/u/1119017"
  );
  const user = { name, role, picture };
  const names = array(
    "Names",
    [
      "Los Angeles",
      "Goleta",
      "Isla Vista",
      "San Jose",
      "Fremont",
      "Newport Beach",
      "Irvine",
      "Cupertino",
      "Santa Barbara",
      "San Diego",
      "Sunnyvale",
    ],
    ","
  );
  return (
    <AppNavbar user={user} names={names} onChange={(event, newValue) => {}} />
  );
}

loggedOut = () => {
  const names = array(
    "Names",
    [
      "Los Angeles",
      "Goleta",
      "Isla Vista",
      "San Jose",
      "Fremont",
      "Newport Beach",
      "Irvine",
      "Cupertino",
      "Santa Barbara",
      "San Diego",
      "Sunnyvale",
    ],
    ","
  );
  return <AppNavbar names={names} />;
}

SimplePieChartExpenses = () => {
  const labelsArr = ["Income", "Net Income"];
  const dataArr = [400, 500];
  const dataEnter = array("Data", [400, 300], ",");
  const labelsEnter = array("Labels", ["Shopping", "Other"], ",");
  const data = dataArr.concat(dataEnter);
  const labels = labelsArr.concat(labelsEnter);
  return <PieChartExpensesComponent data={data} labels={labels} />;
}

Playground = () => ({
  template: hbs`
    <DenaliToggle
      @onChange={{queue onChange (fn (mut selectedItem))}}
      @activeOption={{selectedItem}}
      @options={{items}}
      @disabledOptions={{disabledItems}}
      @isInverse={{isInverse}}
      @isSmall={{isSmall}}
      class={{class}}
      as |item|
    >
      {{item}}
    </DenaliToggle>
  `,
  context: {
    isInverse: boolean('isInverse', false, argument),
    isSmall: boolean('isSmall', false, argument),
    items: array('items', ['Ember', 'Denali', 'Toggle'], ',', example),
    selectedItem: text('selectedItem', 'Denali', example),
    disabledItems: array('disabledItems', ['Toggle'], ',', example),
    onChange: action('onChange'),
    class: text('class', '', attribute),
  },
})

Playground = () => ({
  template: hbs`
    {{#each items as |item|}}
      <DenaliTag
        @state={{state}}
        @isSmall={{isSmall}}
        @isOutlined={{isOutlined}}
        @iconFront={{iconFront}}
        @iconFrontClass={{iconFrontClass}}
        @onIconFrontClick={{onIconFrontClick}}
        @iconBack={{iconBack}}
        @iconBackClass={{iconBackClass}}
        @onIconBackClick={{onIconBackClick}}
        class={{class}}
      >
        {{item}}
      </DenaliTag>
    {{/each}}
  `,
  context: {
    state: select('state', allStates, allStates[0], argument),
    isSmall: boolean('isSmall', false, argument),
    isOutlined: boolean('isOutlined', false, argument),
    iconFront: text('iconFront', '', argument),
    iconFrontClass: text('iconFrontClass', '', argument),
    onIconFrontClick: action('onIconFrontClick'),
    iconBack: text('iconBack', 'close', argument),
    iconBackClass: text('iconBackClass', '', argument),
    onIconBackClick: action('onIconBackClick'),
    items: array('items', ['Ember', 'Denali', 'Tags'], ',', example),
    class: text('class', '', attribute),
  },
})

Playground = () => ({
  template: hbs`
    <DenaliTabs class={{class}} @style={{style}} as |Tabs|>
      {{#each items as |item|}}
        <Tabs.Tab
          @isActive={{includes item activeItems}}
          @isDisabled={{includes item disabledItems}}
        >
          {{item}}
        </Tabs.Tab>
      {{/each}}
    </DenaliTabs>
  `,
  context: {
    style: select('style', STYLES, STYLES[0], argument),
    items: array('items', ['Ember', 'Denali', 'Tabs'], ',', example),
    activeItems: array('activeItems', ['Denali'], ',', example),
    disabledItems: array('disabledItems', ['Ember'], ',', example),
    class: text('class', '', attribute),
  },
})

Playground = () => ({
  template: hbs`
    <DenaliSidebar class={{class}} as |Sidebar|>
      {{#each items as |item|}}
        <Sidebar.Tab
          @isActive={{eq item activeItem}}
          @isDisabled={{includes item disabledItems}}
          {{on "click" (fn (mut activeItem) item)}}
        >
          {{item}}
        </Sidebar.Tab>
      {{/each}}
    </DenaliSidebar>
  `,
  context: {
    items: array('items', ['Ember', 'Denali', 'Sidebar'], ',', example),
    activeItem: text('activeItem', 'Denali', example),
    disabledItems: array('disabledItems', ['Ember'], ',', example),
    class: text('class', '', attribute),
  },
})

Playground = () => ({
  template: hbs`
    <DenaliSelect
      @options={{items}}
      @selectedOption={{selectedItem}}
      @disabledOptions={{disabledItems}}
      @size={{size}}
      @wrapperClass={{wrapperClass}}
      @isInverse={{isInverse}}
      @onChange={{queue onChange (fn (mut selectedItem))}}
      class={{class}}
      as |item|>
      {{item}}
    </DenaliSelect>
  `,
  context: {
    size: select('size', allSizes, allSizes[0], argument),
    isInverse: boolean('isInverse', false, argument),
    class: text('class', '', attribute),
    wrapperClass: text('wrapperClass', '', argument),
    items: array('items', ['Ember', 'Denali', 'Select'], ',', example),
    selectedItem: text('selectedItem', 'Denali', example),
    disabledItems: array('disabledItems', ['Select'], ',', example),
    onChange: action('onChange'),
  },
})

Playground = () => ({
  template: hbs`
    <DenaliRadio @onChanged={{queue onChange (fn (mut selectedItem))}} as |Radio|>
      {{#each items as |item|}}
        <Radio.Option
          @value={{item}}
          @checked={{eq item selectedItem}}
          @disabled={{eq item disabledItem}}
          class={{class}}
        >
          {{item}}
        </Radio.Option>
      {{/each}}
    </DenaliRadio>
  `,
  context: {
    class: text('class', '', attribute),
    items: array('items', ['Ember', 'Denali', 'Radio'], ',', example),
    selectedItem: text('selectedItem', 'Denali', example),
    disabledItem: text('disabledItem', 'Radio', example),
    onChange: action('onChange'),
  },
})

Playground = () => ({
  template: hbs`
    <DenaliRadioToggle
      @onChanged={{queue onChange (fn (mut selectedItem))}}
      @isInverse={{isInverse}}
      @isSmall={{isSmall}}
      class={{class}}
      as |Radio|
    >
      {{#each items as |item|}}
        <Radio.Option @value={{item}} @checked={{eq item selectedItem}} @disabled={{eq item disabledItem}}>
          {{item}}
        </Radio.Option>
      {{/each}}
    </DenaliRadioToggle>
  `,
  context: {
    isInverse: boolean('isInverse', false, argument),
    isSmall: boolean('isSmall', false, argument),
    items: array('items', ['Ember', 'Denali', 'Radio'], ',', example),
    selectedItem: text('selectedItem', 'Denali', example),
    disabledItem: text('disabledItem', 'Radio', example),
    onChange: action('onChange'),
    class: text('class', '', attribute),
  },
})

Playground = () => ({
  template: hbs`
    <PowerSelect
      @options={{items}}
      @selected={{selectedItem}}
      @searchEnabled={{searchEnabled}}
      @searchPlaceholder="Search"
      @placeholder="Select An Item..."
      @disabled={{disabled}}
      @onChange={{queue onChange (fn (mut selectedItem))}}
      @renderInPlace={{true}}
      @triggerClass={{sizeClass}}
      as |name|
    >
      {{name}}
    </PowerSelect>
  `,
  context: {
    items: array('items', ['Denali', 'Styled', 'Power', 'Select', 'Multiple'], ',', example),
    selectedItem: text('selectedItem', 'Denali', example),
    searchEnabled: boolean('searchEnabled', true, example),
    disabled: boolean('disabled', false, example),
    sizeClass: select('sizeClass', [undefined, 'is-small', 'is-medium', 'is-large'], undefined, example),
    onChange: action('onChange'),
  },
})

Playground = () => ({
  template: hbs`
    <PowerSelectMultiple
      @options={{items}}
      @selected={{selectedItems}}
      @searchEnabled={{true}}
      @placeholder="Select Some Items..."
      @disabled={{disabled}}
      @onChange={{queue onChange (fn (mut selectedItems))}}
      @renderInPlace={{true}}
      @triggerClass={{sizeClass}}
      as |name|
    >
      {{name}}
    </PowerSelectMultiple>
  `,
  context: {
    items: array('items', ['Denali', 'Styled', 'Power', 'Select', 'Multiple'], ',', example),
    selectedItems: array('selectedItems', ['Denali'], ',', example),
    disabled: boolean('disabled', false, example),
    sizeClass: select('sizeClass', [undefined, 'is-small', 'is-medium', 'is-large'], undefined, example),
    onChange: action('onChange'),
  },
})

Playground = () => ({
  template: hbs`
    <DenaliBreadcrumb @items={{items}} class={{class}} as |item|>
      <span class="link">{{item}}</span>
    </DenaliBreadcrumb>
  `,
  context: {
    items: array('items', ['North America', 'United States', 'Alaska', 'Denali'], ',', argument),
    class: text('class', '', attribute),
  },
})

SimpleChart = () => {
  const data = array("Data", [1, 2], ",");
  const labels = array("Labels", ["Income", "Net Income"], ",");
  return <ChartComponent data={data} labels={labels} />;
}

SimplePieChartIncome = () => {
  const data = array("Data", [1, 2], ",");
  const labels = ["Income", "Net Income"];
  return <PieChartIncomeComponent data={data} labels={labels} />;
}

SimpleTable = () => {
  const data = array("Data", [300, 200], ",");
  const labels = array("Labels", ["Income", "Transportation"], ",");
  return <TableComponent price={data} category={labels} />;
}

Playground = () => ({
  template: hbs`
    <DenaliNavbar
      @isResponsive={{this.isResponsive}}
      @isFixedTop={{this.isFixedTop}}
      style="background:{{this.navBackground}};" as |Nav|
    >
      <Nav.Left as |Left|>
        <Left.Logo @src={{this.logo}} />
      </Nav.Left>

      <Nav.Center as |Center|>
        {{#each this.centerItems as |item|}}
          <Center.Item @isActive={{eq item this.activeCenter}}>{{item}}</Center.Item>
        {{/each}}
      </Nav.Center>

      <Nav.Right as |Right|>
        {{#if this.menuItems.length}}
          <Right.Menu as |Menu|>
            <Menu.Trigger>{{this.menu}}<DenaliIcon @size="small" @icon="arrowhead-down" /></Menu.Trigger>

            <Menu.Content>
              {{#each this.menuItems as |item|}}
                <DenaliLink>{{item}}</DenaliLink>
              {{/each}}
            </Menu.Content>
          </Right.Menu>
        {{/if}}

        {{#each this.rightIcons as |icon|}}
          <Right.Icon @icon={{icon}} @name={{icon}} />
        {{/each}}
      </Nav.Right>
    </DenaliNavbar>
  `,
  context: {
    isResponsive: boolean('isResponsive', false, argument),
    isFixedTop: boolean('isFixedTop', false, argument),

    logo: text('logo', 'https://denali-design.github.io/denali-css/denali-logo.svg', example),
    navBackground: text('navBackground', '', example),
    activeCenter: text('activeCenter', 'Home', example),
    centerItems: array('centerItems', ['Home', 'About', 'Contact'], ',', example),
    menu: text('menu', 'Menu', example),
    menuItems: array('menuItems', ['Menu Item #1', 'Menu Item #2'], ',', example),
    rightIcons: array('rightIcons', ['dashboard', 'user-profile-circle'], ',', example),
  },
})

AverageCompBarGraph = () => {
  const labels = array("Categories", ["Average", "Chris Gaucho"], ",");
  const data = array("Data", [3, 3], ",");
  const title = text("Title", "Hour(s) of Screen Time Per Day");
  return <CompBarGraph labels={labels} data={data} title={title} />;
}

AboveAverageCompBarGraph = () => {
  const labels = array("Categories", ["Average", "Chris Gaucho"], ",");
  const data = array("Data", [3, 6], ",");
  const title = text("Title", "Hour(s) of Screen Time Per Day");
  return <CompBarGraph labels={labels} data={data} title={title} />;
}

BelowAverageCompBarGraph = () => {
  const labels = array("Categories", ["Average", "Chris Gaucho"], ",");
  const data = array("Data", [3, 2], ",");
  const title = text("Title", "Hour(s) of Screen Time Per Day");
  return <CompBarGraph labels={labels} data={data} title={title} />;
}