orcs-design-system/es/components/FloatingPanels/FloatingPanels.stories.js

TeamForm's Design System, aka: ORCS

import React from "react";
import FloatingPanels from ".";
import { far } from "@fortawesome/free-regular-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
import Box from "../Box";
import TextInput from "../TextInput";
import Toggle from "../Toggle";
import Spacer from "../Spacer";
import Badge from "../Badge";
import { P } from "../Typography";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
library.add(far);
export default {
  title: "Components/FloatingPanels",
  component: FloatingPanels
};
const PanelContent = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsxs(Spacer, {
    mb: "r",
    children: [/*#__PURE__*/_jsx(Badge, {
      variant: "secondary",
      children: "Blah"
    }), /*#__PURE__*/_jsx(P, {
      children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    }), /*#__PURE__*/_jsx(Toggle, {
      id: "toggle1",
      label: "Group items",
      small: true
    }), /*#__PURE__*/_jsx(Toggle, {
      id: "toggle2",
      label: "Show teams",
      small: true
    })]
  }), /*#__PURE__*/_jsx(TextInput, {
    id: "textInput1",
    type: "text",
    label: "Full name",
    placeholder: "E.g. John Smith",
    my: "20px"
  }, "textInput1")]
});
export const defaultFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
  minHeight: "600px",
  children: /*#__PURE__*/_jsx(FloatingPanels, {
    containerHeight: "500px",
    defaultSelectedPanelId: "view-options",
    panels: [{
      id: "view-options",
      title: "View Options",
      iconName: "eye",
      content: /*#__PURE__*/_jsx(PanelContent, {})
    }, {
      id: "properties",
      title: "Properties",
      iconName: "sun",
      content: /*#__PURE__*/_jsx(PanelContent, {})
    }, {
      id: "person-details",
      title: "Person Details",
      iconName: "user",
      content: /*#__PURE__*/_jsx(PanelContent, {})
    }]
  })
});
defaultFloatingPanels.storyName = "Default Floating Panels";
export const alignedFloatingPanels = () => /*#__PURE__*/_jsxs(Box, {
  minHeight: "160px",
  children: [/*#__PURE__*/_jsx(FloatingPanels, {
    alignPanels: "left",
    position: {
      top: 0,
      left: 0
    },
    defaultSelectedPanelId: "view-options",
    panels: [{
      id: "view-options",
      title: "View Options",
      iconName: "eye",
      content: /*#__PURE__*/_jsx("p", {
        children: "left"
      })
    }, {
      id: "properties",
      title: "Properties",
      iconName: "sun",
      content: /*#__PURE__*/_jsx("p", {
        children: "center"
      })
    }, {
      id: "person-details",
      title: "Person Details",
      iconName: "user",
      content: /*#__PURE__*/_jsx("p", {
        children: "right"
      })
    }]
  }), /*#__PURE__*/_jsx(FloatingPanels, {
    alignPanels: "center",
    centered: true,
    defaultSelectedPanelId: "properties",
    panels: [{
      id: "view-options",
      title: "View Options",
      iconName: "eye",
      content: /*#__PURE__*/_jsx("p", {
        children: "left"
      })
    }, {
      id: "properties",
      title: "Properties",
      iconName: "sun",
      content: /*#__PURE__*/_jsx("p", {
        children: "center"
      })
    }, {
      id: "person-details",
      title: "Person Details",
      iconName: "user",
      content: /*#__PURE__*/_jsx("p", {
        children: "right"
      })
    }]
  }), /*#__PURE__*/_jsx(FloatingPanels, {
    alignPanels: "right",
    position: {
      top: 0,
      right: 0
    },
    defaultSelectedPanelId: "person-details",
    panels: [{
      id: "view-options",
      title: "View Options",
      iconName: "eye",
      content: /*#__PURE__*/_jsx("p", {
        children: "left"
      })
    }, {
      id: "properties",
      title: "Properties",
      iconName: "sun",
      content: /*#__PURE__*/_jsx("p", {
        children: "center"
      })
    }, {
      id: "person-details",
      title: "Person Details",
      iconName: "user",
      content: /*#__PURE__*/_jsx("p", {
        children: "right"
      })
    }]
  })]
});
alignedFloatingPanels.storyName = "Aligned Floating Panels";
export const buttonFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
  minHeight: "60px",
  children: /*#__PURE__*/_jsx(FloatingPanels, {
    onClick: panelId => alert(`Panel ${panelId} clicked`),
    panels: [{
      id: "view-options",
      title: "View Options",
      iconName: "eye"
    }, {
      id: "properties",
      title: "Properties",
      iconName: "sun"
    }, {
      id: "person-details",
      title: "Person Details",
      iconName: "user"
    }]
  })
});
buttonFloatingPanels.storyName = "Button Floating Panels";
export const unselectableFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
  minHeight: "160px",
  children: /*#__PURE__*/_jsx(FloatingPanels, {
    disablePanelSelect: true,
    defaultSelectedPanelId: "selected",
    panels: [{
      id: "selected",
      title: "Selected",
      iconName: "smile",
      content: /*#__PURE__*/_jsxs("span", {
        children: ["You cannot change this selection due to", " ", /*#__PURE__*/_jsx("code", {
          children: "disablePanelSelect"
        })]
      })
    }, {
      id: "unselectable",
      title: "Unselectable",
      iconName: "frown",
      content: "You cannot select this panel due to disablePanelSelect"
    }]
  })
});
unselectableFloatingPanels.storyName = "Unselectable Floating Panels";
export const highlightedFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
  minHeight: "60px",
  children: /*#__PURE__*/_jsx(FloatingPanels, {
    panels: [{
      id: "1",
      title: "Smiling",
      iconName: "smile",
      forceHighlight: true
    }, {
      id: "2",
      title: "Frowning",
      iconName: "frown",
      forceHighlight: true
    }, {
      id: "3",
      title: "Laughing",
      iconName: "laugh",
      forceHighlight: true
    }]
  })
});
highlightedFloatingPanels.storyName = "Highlighted Floating Panels";
export const groupedFloatingPanels = () => /*#__PURE__*/_jsx(Box, {
  minHeight: "60px",
  children: /*#__PURE__*/_jsx(FloatingPanels, {
    panels: [{
      id: "1",
      title: "Laughing",
      iconName: "user",
      grouping: undefined
    }, {
      id: "1",
      title: "Laughing",
      iconName: "laugh",
      grouping: "happy"
    }, {
      id: "2",
      title: "Smiling",
      iconName: "smile",
      grouping: "happy"
    }, {
      id: "3",
      title: "Frowning",
      iconName: "frown",
      grouping: "sad"
    }]
  })
});
groupedFloatingPanels.storyName = "Grouped Floating Panels";
defaultFloatingPanels.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultFloatingPanels"
};
alignedFloatingPanels.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "alignedFloatingPanels"
};
buttonFloatingPanels.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "buttonFloatingPanels"
};
unselectableFloatingPanels.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "unselectableFloatingPanels"
};
highlightedFloatingPanels.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "highlightedFloatingPanels"
};
groupedFloatingPanels.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "groupedFloatingPanels"
};