irisrad-ui/src/components/SizeTweeking/SizeTweeking.stories.js

UI elements developered for IRIS R&D Group Inc

import React, { useRef } from "react";

import { SizeTweeking } from "./SizeTweeking"; // ui element
import { IrisButton } from "../irisButton/IrisButton";
import { IrisMUIcon } from "../irisMUIcon";

// export for StoryBook as a tab
export default {
  title: "Example/SizeTweeking", // could be represent on the url, example could be a root of the node
  component: SizeTweeking,
  //   parameters: {
  //     layout: "none", // centered | fullscreen | padded | none,
  //   },

  // custom arg types with storybook's add on here
  // https://storybook.js.org/docs/react/essentials/controls
  // argTypes: {
  //   backgroundColor: {control: "color"}
  // },
};

const BtnWithRef = React.forwardRef((props, refs) => {
  debugger;
  return (
    <IrisButton ref={refs} {...props}>
      Nice
    </IrisButton>
  );
});

export const ButtonSizing = (args) => {
  const btnRef = useRef(null);
  const btnSmall = useRef(null);
  const btnLarge = useRef(null);
  return (
    <div style={{ display: "flex", alignItems: "center" }}>
      <IrisButton
        iconProps={{
          iconTitle: "search",
          size: "small",
        }}
        size="small"
      >
        button
      </IrisButton>
      <IrisButton
        iconProps={{
          iconTitle: "search",
          size: "medium",
        }}
        size="medium"
      >
        button
      </IrisButton>
      <IrisButton
        iconProps={{
          iconTitle: "search",
          size: "large",
        }}
        size="large"
        disabled={true}
      >
        Button
      </IrisButton>
      <IrisButton
        iconProps={{
          iconTitle: "search",
          size: "large",
        }}
        size="large"
      ></IrisButton>
      <IrisButton
        size="large"
        iconProps={{
          iconTitle: "summarize",
        }}
      >
        Summary
      </IrisButton>
    </div>
  );
};