{"version":3,"sources":["webpack:///./src/pages/installing-spark/html-add-components.mdx","webpack:///./src/components/layouts/InstallingSparkLayout.js"],"names":["_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","parentName","href","target","className","style","src","spinnergif","alt","isMDXComponent","InstallingSparkLayout","children","location","initialContext"],"mappings":"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","file":"component---src-pages-installing-spark-html-add-components-mdx-0df57e50c4e6306071a4.js","sourcesContent":["import * as React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"/opt/build/repo/src/components/layouts/InstallingSparkLayout.js\";\nimport spinnergif from '../../images/installing-spark/html/html-spinner.gif';\nexport const _frontmatter = {};\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return <div {...props} />;\n};\n\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n\n    <blockquote>\n      <p parentName=\"blockquote\">{`This the final Part of a 3-Part series. You can also check out\n`}<a parentName=\"p\" {...{\n          \"href\": \"/installing-spark/html-environment-setup\"\n        }}>{`Part 1 - Setting Up Your Environment`}</a>{` and\n`}<a parentName=\"p\" {...{\n          \"href\": \"/installing-spark/html-installation\"\n        }}>{`Part 2 - Installation`}</a>{`.`}</p>\n    </blockquote>\n    <h1>{`Part 3: Adding Spark Components in an HTML Project`}</h1>\n    <p>{`This guide will cover how to add components for HTML, CSS and JavaScript.`}</p>\n    <p>{`Our `}<a href=\"https://github.com/sparkdesignsystem/spark-starter-html/\" target=\"_blank\">{`Starter Github Repositories`}</a>{` are also available for reference:`}</p>\n    <ul>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"https://github.com/sparkdesignsystem/spark-starter-html/tree/kitchen-sink\"\n        }}>{`'kitchen-sink' branch`}</a>{` (Spark Installed with component examples.)`}</li>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"https://github.com/sparkdesignsystem/spark-starter-html/tree/without-spark\"\n        }}>{`'without-spark' branch`}</a>{` (all of the prerequisites before Spark Installation.)`}</li>\n    </ul>\n    <p>{`For instructions on setting up Spark in other environments, check out the\nguides for `}<a parentName=\"p\" {...{\n        \"href\": \"/installing-spark/angular\"\n      }}>{`Angular`}</a>{` and `}<a parentName=\"p\" {...{\n        \"href\": \"/installing-spark/react\"\n      }}>{`React`}</a>{`.`}</p>\n    <h2>{`Adding Your First Spark Component`}</h2>\n    <p>{`Adding a Spinner Button can confirm you've installed Spark's Styles and JavaScript correctly.`}</p>\n    <p>{`This is just one example to implement functionality and get your project started.`}</p>\n    <ol>\n      <li parentName=\"ol\">{`Add Spark Button code into your `}<inlineCode parentName=\"li\">{`index.html`}</inlineCode>{` and include an `}<inlineCode parentName=\"li\">{`onclick`}</inlineCode>{` and a `}<inlineCode parentName=\"li\">{`data-id`}</inlineCode>{`.`}</li>\n    </ol>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-html\"\n      }}>{`  <button\n    class=\"sprk-c-Button\"\n    data-id=\"button-spinner-1\"\n    onclick=\"startSpinner()\"\n  >\n    Start Spinning\n  </button>\n`}</code></pre>\n    <blockquote>\n      <p parentName=\"blockquote\"><strong parentName=\"p\">{`Note`}</strong>{`: Inside the `}<inlineCode parentName=\"p\">{`<body>`}</inlineCode>{` tag of `}<inlineCode parentName=\"p\">{`index.html`}</inlineCode>{`, the line `}<inlineCode parentName=\"p\">{`<script src=\"main.js\"></script>`}</inlineCode>{` should be after\nany other HTML elements.`}</p>\n    </blockquote>\n    <ol {...{\n      \"start\": 2\n    }}>\n      <li parentName=\"ol\">{`In the `}<inlineCode parentName=\"li\">{`index.js`}</inlineCode>{` file, import `}<inlineCode parentName=\"li\">{`setSpinning`}</inlineCode>{` from Spark and create a `}<inlineCode parentName=\"li\">{`startSpinner`}</inlineCode>{` function (this is the function that will run `}<inlineCode parentName=\"li\">{`onclick`}</inlineCode>{`).`}</li>\n    </ol>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-javascript\"\n      }}>{`import { setSpinning } from '@sparkdesignsystem/spark';\n\nwindow.startSpinner = () => {\n  const spinningButton = document.querySelector('[data-id=\"button-spinner-1\"]');\n  setSpinning(spinningButton, {});\n}\n`}</code></pre>\n    <ol {...{\n      \"start\": 3\n    }}>\n      <li parentName=\"ol\">{`Build your app with `}<inlineCode parentName=\"li\">{`npm run build`}</inlineCode>{`, and you should find a Spark Button that loads a Spinner on click.`}</li>\n    </ol>\n    <div className=\"sprk-u-Measure\">\n  <img className=\"sprk-u-mbm\" style={{\n        \"margin\": \"auto\",\n        \"display\": \"block\"\n      }} src={spinnergif} alt=\"A Spark Button Spinner component.\" />\n    </div>\n    <blockquote>\n      <p parentName=\"blockquote\">{`Learn more about Buttons and Spinner functionality in the `}<a parentName=\"p\" {...{\n          \"href\": \"https://html.sparkdesignsystem.com/?path=/docs/components-button--primary\"\n        }}>{`Button Storybook documentation`}</a>{`.`}</p>\n    </blockquote>\n    <h2>{`Finding the code to other Spark Components`}</h2>\n    <ol>\n      <li parentName=\"ol\">{`Go to the `}<a parentName=\"li\" {...{\n          \"href\": \"https://html.sparkdesignsystem.com/\"\n        }}>{`Spark HTML Storybook`}</a></li>\n      <li parentName=\"ol\">{`Find the Component you need in the \"Components\" section.`}</li>\n      <li parentName=\"ol\">{`Navigate to the `}<em parentName=\"li\">{`Docs`}</em>{` tab. It's typically at the top of screen next to `}<em parentName=\"li\">{`Canvas`}</em>{`.`}</li>\n      <li parentName=\"ol\">{`Navigate down the page until you find your component variant.`}</li>\n      <li parentName=\"ol\">{`The `}<em parentName=\"li\">{`Show code`}</em>{` button will toggle a code sample.`}</li>\n    </ol>\n    <blockquote>\n      <p parentName=\"blockquote\">{`These code samples represent the `}<em parentName=\"p\">{`rendered state`}</em>{`\nafter Spark's JavaScript functions run. Some functionality requires additional engineering.`}</p>\n    </blockquote>\n    <p>{`The `}<em parentName=\"p\">{`Docs`}</em>{` section of each page will give implementation details for each component.`}</p>\n    <h2>{`Additional Topics`}</h2>\n    <ul>\n      <li parentName=\"ul\">{`The `}<a parentName=\"li\" {...{\n          \"href\": \"/installing-spark/installing-icons\"\n        }}>{`Icon Installation Guide`}</a>{` for\nimporting the Spark SVG icon set.`}</li>\n      <li parentName=\"ul\">{`The `}<a parentName=\"li\" {...{\n          \"href\": \"/installing-spark/installing-fonts\"\n        }}>{`Font Installation Guide`}</a>{` for\ninstructions on using the Rocket Sans font.`}</li>\n    </ul>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      ","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Layout from './Layout';\n\nfunction InstallingSparkLayout({ children, location }) {\n  return (\n    <Layout initialContext=\"installing-spark\" location={location}>\n      {children}\n    </Layout>\n  );\n}\n\nInstallingSparkLayout.propTypes = {\n  children: PropTypes.node,\n  location: PropTypes.shape({\n    pathname: PropTypes.string,\n  }),\n};\n\nexport default InstallingSparkLayout;\n"],"sourceRoot":""}