How to use the @storybook/addon-knobs/vue.object function in @storybook/addon-knobs

To help you get started, we’ve selected a few @storybook/addon-knobs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dpc-sdp / ripple / packages / ripple-ui-components / src / storybook-components / _data / demoData.js View on Github external
grantSearchResultItems: () => (
    [
      {
        title: text('Title', 'Program Overview'),
        funding: object('Funding', {
          from: 10000,
          to: 30000
        }),
        link: object('Link', { text: 'Read more', url: '#' }),
        audience: text('Audience', 'individuals, organisations, local council'),
        startdate: text('Start Date', '2018-10-10T09:00:00.000+10:00'),
        enddate: text('End Date', '2018-12-10T09:00:00.000+10:00'),
        description: text('Description', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.'),
        tags: object('Tags', [{
          linkText: 'This is a content tag',
          linkUrl: '#'
        }, {
          linkText: 'This is a content tag',
          linkUrl: '#'
        }])
      },
      {
        title: text('Title', 'Program Overview'),
        funding: object('Funding', {
          from: 10000,
          to: 30000
        }),
        link: object('Link', { text: 'Read more', url: '#' }),
        audience: text('Audience', 'individuals, organisations, local council'),
        startdate: text('Start Date', '2018-10-10T09:00:00.000+10:00'),
github dpc-sdp / ripple / packages / ripple-ui-components / src / storybook-components / _data / demoData.js View on Github external
{
        text: 'Sitemap',
        url: '#'
      },
      {
        text: 'Accessibility Statement',
        url: '#'
      },
      {
        text: 'Help',
        url: '#'
      }
    ]),
    copyright: text('Copyright', '© Copyright State Government of Victoria'),
    acknowledgement: text('Acknowledgement', 'The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.'),
    logos: object('Logos', [
      {
        src: 'https://placehold.it/112x52',
        alt: 'Max native size',
        url: '#'
      },
      {
        src: 'https://placehold.it/32x32',
        alt: 'Smaller than max size',
        url: '#'
      },
      {
        src: 'https://placehold.it/80x200',
        alt: 'Portrait',
        url: '#'
      },
      {
github dpc-sdp / ripple / packages / ripple-ui-components / src / storybook-components / _data / demoData.js View on Github external
latestEvents: () => ({
    title: text('Title', 'Optional heading'),
    events: object('Events', [
      {
        image: 'https://placehold.it/580x340',
        dateStart: '2018-12-25T09:00:00.000+10:00',
        dateEnd: '2019-01-05T09:00:00.000+10:00',
        location: 'South Yarra',
        title: 'This is the headline of an event',
        summary: 'This event range occurs in 2018 and goes to 2019. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet lorem ipsum dolor sit amet.',
        link: { text: 'See event details', url: '#' }
      },
      {
        image: 'https://placehold.it/580x340',
        dateStart: '2018-05-09T09:00:00.000+10:00',
        dateEnd: '2018-05-10T09:00:00.000+10:00',
        location: 'South Yarra',
        title: 'This is the headline of an event',
        summary: 'This event range occurs in 2018, same month different day.',
github dpc-sdp / ripple / packages / components / Molecules / Sitemap / stories.js View on Github external
        default: () => object('Menu Links', [
          {
            text: 'Your services',
            url: '#',
            children: [
              { text: 'Sub child A', url: '#' },
              {
                text: 'Sub child B',
                url: '#',
                children: [
                  { text: 'Sub child I', url: '#' },
                  { text: 'Sub child II', url: '#' },
                  { text: 'Sub child III', url: '#' }
                ]
              },
              {
                text: 'Test Path 2',
github dpc-sdp / ripple / packages / components / Organisms / HeroBanner / stories.js View on Github external
        default: () => object('linkSecondary', { text: 'Subscribe for tips to prepare', url: '#' })
      },
github dpc-sdp / ripple / packages / ripple-ui-components / src / storybook-components / _data / demoData.js View on Github external
embeddedVideo: () => ({
    width: text('width', '854'),
    height: text('height', '480'),
    src: text('field_media_video_embed_field', 'https://www.youtube.com/embed/bSlnfyGTiss'),
    lang: text('langcode', 'en'),
    transcript: text('field_media_transcript', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?'),
    variant: selectV2('Variant', {full: 'full', link: 'link'}, 'full'),
    mediaLink: object('field_media_link', {text: 'View transcript', url: '#'})
  }),
github dpc-sdp / ripple / packages / ripple-ui-components / src / storybook-components / _data / demoData.js View on Github external
timeline: () => ({
    title: text('Title', 'Timeline Heading'),
    list: object('List', [{
      image: 'https://placehold.it/320x240',
      title: 'Timeline item with link',
      url: '#',
      dateStart: '2019-01-01T09:00:00.000+10:00',
      dateEnd: '2020-12-01T09:00:00.000+10:00',
      description: 'Contains image, title, internal URL, different start / end date and description.'
    }, {
      title: 'Timeline item 2',
      subtitle: 'Contains title and custom subtitle.'
    }, {
      image: 'https://placehold.it/88x88',
      title: 'Timeline item 3',
      dateStart: '2018-01-01T09:00:00.000+10:00',
      dateEnd: '2018-01-15T09:00:00.000+10:00',
      subtitle: 'Custom subtitle - this should not show.',
      description: 'Contains image, title, different start / end date, subtitle (hidden) and description.'
github dpc-sdp / ripple / packages / components / Molecules / Search / stories.js View on Github external
        default: () => object('Link', {
          linkText: 'www.education.vic.gov.au/Pages/schoolsprivacypolicy.aspx',
          linkUrl: '//www.education.vic.gov.au/Pages/schoolsprivacypolicy.aspx'
        })
      },
github dpc-sdp / ripple / packages / components / Organisms / CampaignPrimary / stories.js View on Github external
        default: () => object('Image', { src: 'http://placehold.it/699x411', alt: '' })
      },
github dpc-sdp / ripple / packages / components / Molecules / RelatedLinks / stories.js View on Github external
        default: () => object('Links', [
          { text: 'Link to external content', url: 'http://www.google.com' },
          { text: 'Second link it goes right here', url: '#' },
          { text: 'Third link to extra content', url: '#' },
          { text: 'This is a long link to extra content', url: '#' }
        ])
      }