@uva-glass/component-library/dist/components/GridRow/GridRow.stories.js

React components UvA

import { jsxs as r, jsx as i } from "react/jsx-runtime";
import { GridRow as e } from "./GridRow.js";
import '../../assets/GridRow.css';const n = {
  0: { "--grid-gap": "0.25rem" },
  "025": { "--grid-gap": "0.25rem" },
  "050": { "--grid-gap": "0.5rem" },
  "075": { "--grid-gap": "0.75rem" },
  100: { "--grid-gap": "1rem" },
  125: { "--grid-gap": "1.25rem" },
  150: { "--grid-gap": "1.5rem" },
  175: { "--grid-gap": "1.75rem" },
  200: { "--grid-gap": "2rem" },
  250: { "--grid-gap": "2.5rem" },
  300: { "--grid-gap": "3rem" },
  350: { "--grid-gap": "3.5rem" }
}, m = `
  <GridRow gutter={gutter} marginTop={marginTop} marginBottom={marginBottom}>
    // Up to 12 GridRow.Column's can be added as needed.
    <GridRow.Column size={size} mediumSize={mediumSize} startPositon={startPositon}
      mediumStartPosition={mediumStartPosition}> {children} </GridRow.Column> </GridRow>
`, p = {
  title: "Organisms/GridRow",
  component: e,
  argTypes: {
    gutter: {
      options: ["0", "025", "050", "075", "100", "125", "150", "175", "200", "250", "300", "350"],
      control: { type: "select" }
    },
    marginBottom: {
      options: ["0", "025", "050", "075", "100", "125", "150", "175", "200", "250", "300", "350"],
      control: { type: "select" }
    },
    marginTop: {
      options: ["0", "025", "050", "075", "100", "125", "150", "175", "200", "250", "300", "350"],
      control: { type: "select" }
    }
  },
  parameters: {
    inspectComponent: e,
    codeString: m
  }
}, t = (o) => /* @__PURE__ */ r("div", { className: "page-wrapper", style: o.gutter && n[o.gutter], children: [
  /* @__PURE__ */ i(e, { ...o, children: /* @__PURE__ */ i(e.Column, { children: "Col-12" }) }),
  /* @__PURE__ */ r(e, { ...o, children: [
    /* @__PURE__ */ i(e.Column, { size: "1", children: "Col-1" }),
    /* @__PURE__ */ i(e.Column, { size: "11", children: "Col-11" })
  ] }),
  /* @__PURE__ */ r(e, { ...o, children: [
    /* @__PURE__ */ i(e.Column, { size: "2", children: "Col-2" }),
    /* @__PURE__ */ i(e.Column, { size: "10", children: "Col-10" })
  ] }),
  /* @__PURE__ */ r(e, { ...o, children: [
    /* @__PURE__ */ i(e.Column, { size: "3", children: "Col-3" }),
    /* @__PURE__ */ i(e.Column, { size: "9", children: "Col-9" })
  ] }),
  /* @__PURE__ */ r(e, { ...o, children: [
    /* @__PURE__ */ i(e.Column, { size: "4", children: "Col-4" }),
    /* @__PURE__ */ i(e.Column, { size: "8", children: "Col-8" })
  ] }),
  /* @__PURE__ */ r(e, { ...o, children: [
    /* @__PURE__ */ i(e.Column, { size: "5", children: "Col-5" }),
    /* @__PURE__ */ i(e.Column, { size: "7", children: "Col-7" })
  ] }),
  /* @__PURE__ */ r(e, { ...o, children: [
    /* @__PURE__ */ i(e.Column, { size: "6", children: "Col-6" }),
    /* @__PURE__ */ i(e.Column, { size: "6", children: "Col-6" })
  ] })
] }), l = {
  gutter: "200",
  marginBottom: "050",
  marginTop: "0"
}, d = t.bind({});
d.args = {
  ...l
};
const s = (o) => /* @__PURE__ */ r("div", { className: "page-wrapper", style: o.gutter && n[o.gutter], children: [
  /* @__PURE__ */ r(e, { ...o, children: [
    /* @__PURE__ */ i(e.Column, { size: "4", mediumSize: "6", children: "L: 4, Md: 6, S: 12" }),
    /* @__PURE__ */ i(e.Column, { size: "4", mediumSize: "6", children: "L: 4, Md: 6, S: 12" }),
    /* @__PURE__ */ i(e.Column, { size: "4", mediumSize: "12", children: "L: 4, Md: 12" })
  ] }),
  /* @__PURE__ */ r(e, { ...o, children: [
    /* @__PURE__ */ i(e.Column, { size: "3", mediumSize: "6", children: "L: 3, Md: 6, S: 12" }),
    /* @__PURE__ */ i(e.Column, { size: "3", mediumSize: "6", children: "L: 3, Md: 12" }),
    /* @__PURE__ */ i(e.Column, { size: "6", mediumSize: "12", children: "L: 6, Md: 12, S: 12" })
  ] })
] }), a = s.bind({});
d.args = {
  ...l
};
export {
  d as GridRowExample,
  a as WithMediumBreakpoint,
  p as default
};
//# sourceMappingURL=GridRow.stories.js.map