How to use idyll-components - 10 common examples

name: 'shareImageWidth',
                type: 'string',
                description: 'The width of the share image in pixels.'
              },
              {
                name: 'shareImageHeight',
                type: 'string',
                description: 'The height of the share image in pixels.'
              }
            ]
          }
        },
        {
          Preload: {
            thumbnail: 'preload.png',
            component: COMPONENTS.Preload,
            description:
              'This will preload an array of images, useful if you want to show them later on in the article and not have a loading flash.',
            liveExample: false
          }
        }
      ]
    }
  }
];

function slugify(text) {
  return text
    .toString()
    .split(/([A-Z][a-z]+)/)
    .join('-')
    .toLowerCase()

component: COMPONENTS.Stepper,
            liveExample: false
          }
        }
      ]
    }
  },
  {
    Input: {
      description:
        'The components are used to accept reader input and update variables in response.',
      components: [
        {
          Action: {
            thumbnail: 'action.png',
            component: COMPONENTS.Action,
            description:
              'The `action` component allows you to add event handlers to text. For example:',
            liveExample: true
          }
        },
        {
          Boolean: {
            thumbnail: 'boolean.png',
            image: 'boolean.gif',
            component: COMPONENTS.Boolean,
            description: 'This will display a checkbox.',
            liveExample: true
          }
        },
        {
          Button: {

'Plays a video from YouTube. All of the parameters are optional except for id, which must be provided. See all available options at https://developers.google.com/youtube/player_parameters',
            liveExample: true
          }
        }
      ]
    }
  },
  {
    Helpers: {
      description:
        "These components don't affect the page content, but help with common tasks. The `Analytics` component makes it easy to add Google Analytics to your page.",
      components: [
        {
          Analytics: {
            thumbnail: 'analytics.png',
            component: COMPONENTS.Analytics,
            description:
              'This component makes it easy to insert a Google Analytics code on your page.',
            liveExample: false
          }
        },
        {
          Meta: {
            thumbnail: 'meta.png',
            component: COMPONENTS.Meta,
            description:
              'The meta component adds context to the page template when building your app for publication. The following variables are available and will be inserted as `` properties into the head of your HTML page if you define them:',
            liveExample: false,
            idyllProps: [
              {
                name: 'title',
                type: 'string',

import * as COMPONENTS from 'idyll-components';

const components = [
  {
    Layout: {
      description:
        'These components help manage page layout, for example putting text in the `Aside` component will render it in the article margin instead of inline with the rest of your text.',
      components: [
        {
          Aside: {
            description:
              'Content inside of an aside component will be displayed in the margin of your document. For example, the [consumer complaints](https://mathisonian.github.io/consumer-complaints/) article uses the `Aside` component to display a small chart and caption:',
            image: 'aside.png',
            thumbnail: 'aside.png',
            component: COMPONENTS.Aside,
            liveExample: false
          }
        },
        {
          FullWidth: {
            description:
              "A `FullWidth` component will break out of the text container and expand to fill the full width of the reader's browser.",
            image: 'feature.png',
            thumbnail: 'feature.png',
            liveExample: false
          }
        },
        {
          Fixed: {
            description:
              'Content inside of a `fixed` component will be locked in place, even when the rest of the document scrolls. The [scroll](https://idyll-lang.github.io/idyll/scroll) example uses the `fixed` component to keep the dynamic chart in place:',

'The components are used to accept reader input and update variables in response.',
      components: [
        {
          Action: {
            thumbnail: 'action.png',
            component: COMPONENTS.Action,
            description:
              'The `action` component allows you to add event handlers to text. For example:',
            liveExample: true
          }
        },
        {
          Boolean: {
            thumbnail: 'boolean.png',
            image: 'boolean.gif',
            component: COMPONENTS.Boolean,
            description: 'This will display a checkbox.',
            liveExample: true
          }
        },
        {
          Button: {
            thumbnail: 'button.png',
            description:
              'This will display a button. To control what happens when the button is clicked, add an `onClick` property:',
            image: 'button.gif',
            component: COMPONENTS.Button,
            liveExample: true
          }
        },
        {
          Dynamic: {

{
          Boolean: {
            thumbnail: 'boolean.png',
            image: 'boolean.gif',
            component: COMPONENTS.Boolean,
            description: 'This will display a checkbox.',
            liveExample: true
          }
        },
        {
          Button: {
            thumbnail: 'button.png',
            description:
              'This will display a button. To control what happens when the button is clicked, add an `onClick` property:',
            image: 'button.gif',
            component: COMPONENTS.Button,
            liveExample: true
          }
        },
        {
          Dynamic: {
            thumbnail: 'dynamic.png',
            description: 'This will render a dynamic variable to the screen.',
            image: 'dynamic.gif',
            component: COMPONENTS.Dynamic,
            liveExample: true
          }
        },
        {
          Radio: {
            thumbnail: 'radio.png',
            component: COMPONENTS.Radio,

description: 'A user-editable text input field.',
            liveExample: true
          }
        }
      ]
    }
  },
  {
    Presentation: {
      description:
        'These components render something to the screen, for example the `Chart` component takes data as input and can display several types of charts.',
      components: [
        {
          Chart: {
            thumbnail: 'chart.png',
            component: COMPONENTS.Chart,
            description: 'This will display a chart.',
            image: 'chart.png',
            liveExample: true
          }
        },
        {
          Conditional: {
            thumbnail: 'conditional.png',
            description:
              'This component will conditionally display its children.',
            component: COMPONENTS.Conditional,
            liveExample: true
          }
        },
        {
          Display: {

components: [
        {
          Chart: {
            thumbnail: 'chart.png',
            component: COMPONENTS.Chart,
            description: 'This will display a chart.',
            image: 'chart.png',
            liveExample: true
          }
        },
        {
          Conditional: {
            thumbnail: 'conditional.png',
            description:
              'This component will conditionally display its children.',
            component: COMPONENTS.Conditional,
            liveExample: true
          }
        },
        {
          Display: {
            thumbnail: 'display.png',
            component: COMPONENTS.Display,
            description:
              'This will render the value of a variable to the screen. It is mostly useful for debugging:',
            image: 'displayvar.gif',
            liveExample: true
          }
        },
        {
          Equation: {
            thumbnail: 'equation.png',

liveExample: true
          }
        },
        {
          Conditional: {
            thumbnail: 'conditional.png',
            description:
              'This component will conditionally display its children.',
            component: COMPONENTS.Conditional,
            liveExample: true
          }
        },
        {
          Display: {
            thumbnail: 'display.png',
            component: COMPONENTS.Display,
            description:
              'This will render the value of a variable to the screen. It is mostly useful for debugging:',
            image: 'displayvar.gif',
            liveExample: true
          }
        },
        {
          Equation: {
            thumbnail: 'equation.png',
            component: COMPONENTS.Equation,
            description:
              'This uses [KaTeX](https://github.com/Khan/KaTeX) to typeset mathematical equations. Example:',
            image: 'equation.png',
            liveExample: true
          }
        },

{
          Button: {
            thumbnail: 'button.png',
            description:
              'This will display a button. To control what happens when the button is clicked, add an `onClick` property:',
            image: 'button.gif',
            component: COMPONENTS.Button,
            liveExample: true
          }
        },
        {
          Dynamic: {
            thumbnail: 'dynamic.png',
            description: 'This will render a dynamic variable to the screen.',
            image: 'dynamic.gif',
            component: COMPONENTS.Dynamic,
            liveExample: true
          }
        },
        {
          Radio: {
            thumbnail: 'radio.png',
            component: COMPONENTS.Radio,
            description: 'This component displays a set of radio buttons.',
            liveExample: true
          }
        },
        {
          Range: {
            thumbnail: 'range.png',
            component: COMPONENTS.Range,
            description: 'This component displays a range slider.',