import { box_label, bolt } from 'pn-design-assets/pn-assets/icons';
import docs from "./pn-titletag-docs.json";

export default {
  title: 'Components/Minor/Title tag',
  parameters: {
    notes: docs,
    layout: 'centered',
  },
};

const Template = ({ ...args }) => {
  return `
  <div style="padding:1rem;display:flex;gap:1em;">
    <pn-titletag icon='${box_label}' >Tag text here</pn-titletag>
    <pn-titletag icon='${bolt}' color="blue700">Tag text here</pn-titletag>
    <pn-titletag color="blue700">No icon</pn-titletag>
    <pn-titletag color="coral">Coral</pn-titletag>
    <pn-titletag color="grey">Grey</pn-titletag>
    <pn-titletag color="gray25">Light grey</pn-titletag>
  </fieldset>
  `;
};

export const Primary = Template.bind({});
Primary.args = {};
