github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/common/DashboardIcon.stories.tsx (about)

     1  import DashboardIcon from "./DashboardIcon";
     2  import { ComponentMeta, ComponentStory } from "@storybook/react";
     3  
     4  export default {
     5    title: "Dashboard Icon",
     6    component: DashboardIcon,
     7  } as ComponentMeta<typeof DashboardIcon>;
     8  
     9  const Template: ComponentStory<typeof DashboardIcon> = (args) => (
    10    <div className="h-full overflow-y-auto p-4">
    11      <DashboardIcon {...args} />
    12    </div>
    13  );
    14  
    15  export const heroIconDefaultOutline = Template.bind({});
    16  heroIconDefaultOutline.args = {
    17    icon: "arrow-up-circle",
    18  };
    19  
    20  export const heroIconDefaultOutlineWithColor = Template.bind({});
    21  heroIconDefaultOutlineWithColor.args = {
    22    icon: "arrow-up-circle",
    23    style: { color: "red" },
    24  };
    25  
    26  export const heroIconOutlineFullyNamespaced = Template.bind({});
    27  heroIconOutlineFullyNamespaced.args = {
    28    icon: "heroicons-outline:arrow-up-circle",
    29  };
    30  
    31  export const heroIconOutlineFullyNamespacedWithColor = Template.bind({});
    32  heroIconOutlineFullyNamespacedWithColor.args = {
    33    icon: "heroicons-outline:arrow-up-circle",
    34    style: { color: "red" },
    35  };
    36  
    37  export const heroIconSolid = Template.bind({});
    38  heroIconSolid.args = {
    39    icon: "heroicons-solid:arrow-up-circle",
    40  };
    41  
    42  export const heroIconSolidWithColor = Template.bind({});
    43  heroIconSolidWithColor.args = {
    44    icon: "heroicons-solid:arrow-up-circle",
    45    style: { color: "red" },
    46  };
    47  
    48  export const materialSymbolDefaultOutline = Template.bind({});
    49  materialSymbolDefaultOutline.args = {
    50    icon: "cloud",
    51  };
    52  
    53  export const materialSymbolDefaultOutlineWithColor = Template.bind({});
    54  materialSymbolDefaultOutlineWithColor.args = {
    55    icon: "cloud",
    56    style: { color: "red" },
    57  };
    58  
    59  export const materialSymbolOutlineFullyNamespaced = Template.bind({});
    60  materialSymbolOutlineFullyNamespaced.args = {
    61    icon: "materialsymbols-outline:cloud",
    62  };
    63  
    64  export const materialSymbolOutlineFullyNamespacedWithColor = Template.bind({});
    65  materialSymbolOutlineFullyNamespacedWithColor.args = {
    66    icon: "materialsymbols-outline:cloud",
    67    style: { color: "red" },
    68  };
    69  
    70  export const materialSymbolSolid = Template.bind({});
    71  materialSymbolSolid.args = {
    72    icon: "materialsymbols-solid:cloud",
    73  };
    74  
    75  export const materialSymbolSolidWithColor = Template.bind({});
    76  materialSymbolSolidWithColor.args = {
    77    icon: "materialsymbols-solid:cloud",
    78    style: { color: "red" },
    79  };
    80  
    81  export const text1Letter = Template.bind({});
    82  text1Letter.args = {
    83    icon: "text:A",
    84  };
    85  
    86  export const text2Letter = Template.bind({});
    87  text2Letter.args = {
    88    icon: "text:AB",
    89  };
    90  
    91  export const text3Letter = Template.bind({});
    92  text3Letter.args = {
    93    icon: "text:ABC",
    94  };
    95  
    96  export const text4Letter = Template.bind({});
    97  text4Letter.args = {
    98    icon: "text:ABCD",
    99  };
   100  
   101  export const text5Letter = Template.bind({});
   102  text5Letter.args = {
   103    icon: "text:ABCDE",
   104  };
   105  
   106  export const text6Letter = Template.bind({});
   107  text6Letter.args = {
   108    icon: "text:ABCDEF",
   109  };
   110  
   111  export const textSpaces = Template.bind({});
   112  textSpaces.args = {
   113    icon: "text:Foo Bar",
   114  };
   115  
   116  export const SVGDataURL = Template.bind({});
   117  SVGDataURL.args = {
   118    icon: "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0idy02IGgtNiIgaGVpZ2h0PSI0OCIgd2lkdGg9IjQ4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00NC4wODMgMzIuNTgxYTcyLjg1MyA3Mi44NTMgMCAwMC0yLjA4Mi4xOTFsLS4xNjguMDE4Yy0xLjc2NS4xODItMy43NjMuMzg3LTQuNzE0LjI1Ny0uNTk0LS4wODUtMS42ODgtLjU2LTIuODQ4LTEuMDYzLTEuOTY2LS44NTItNC40MTQtMS45MTQtNi42MjctMi4wODQtMy4wNDYtLjIzNC04LjMxLjM0LTExLjcwMyAxLjkzMS0xLjk2Mi0uMDg4LTMuNzgyLS42MTYtNS4xOTYtMS40ODhhNDYuNDQgNDYuNDQgMCAwMS0uMDEyLS42NDljMC00LjEzNiAxLjkzOC04LjAxNSA1LjMyLTEwLjY1YTE1LjE3NiAxNS4xNzYgMCAwMTcuNjYtMi4wNTJjNi4xMiAwIDExLjU1MyAzLjYxNyAxMy42NzIgOC45NDJoLS44MTNjLS44MTQgMC0xLjQ5Ni41NzYtMS42NjMgMS4zNGwtLjQxMi0uMTU2Yy0yLjAzLS43ODMtNC44MTMtMS44NTQtOC4wMzEtMS42NjMtNC43MDUuMjc2LTcuMDIuNTYtOC44NDMgMS4wOGwuNTQ5IDEuOTI0YzEuNjY4LS40NzcgMy44NjgtLjc0IDguNDEtMS4wMDggMi43ODUtLjE1OCA1LjMzOC44MTggNy4xOTUgMS41MzMuMzk1LjE1My43NTIuMjg2IDEuMDkuNDA3di4yMDVjMCAuOTM5Ljc2NiAxLjcwNCAxLjcwNSAxLjcwNGgzLjY0N2MuOTM3IDAgMS43LS43NjIgMS43MDQtMS42OThsLjM1NC0uMDMyYTE3NS41NyAxNzUuNTcgMCAwMDEuNTk1LS4xNTFsLjIxLS4wMjF2My4xODN6TTkuNzk5IDM0LjI0OWMtMi42NS4zNjMtNC43NDIuMDM5LTUuNjA4LS40OTYuNTI1LS4zNzEgMS43MS0uODkgMi41NDQtMS4yNTRhNDMuNDgyIDQzLjQ4MiAwIDAwMi4xNi0xLjAwNGMxLjE1NC44NzkgMi41ODMgMS41MzggNC4xNjUgMS45MzEtLjkxNS4zNjgtMi4wNDguNjU4LTMuMjYxLjgyM3pNMzYuODY4IDI5LjNoMy4wNTV2LTEuMzY2aC0zLjA1NVYyOS4zek0yNi41ODYgMTNjOC4zNjggMCAxNS4zOTYgNi4yOTUgMTYuNDMgMTQuNDkyLS4yODcuMDI4LS41OTEuMDU3LS45MTIuMDg2bC0uMTg1LjAxNmExLjcwNCAxLjcwNCAwIDAwLTEuNy0xLjY2aC0uNzExYy0yLjIwMS02LjQ3Ny04LjU3Ni0xMC45NDItMTUuNzk1LTEwLjk0Mi0yLjY3NCAwLTUuMjkuNjEyLTcuNjQxIDEuNzc1LjAxNy0uMDE0LjAzLS4wMjkuMDQ2LS4wNDJBMTYuNTkgMTYuNTkgMCAwMTI2LjU4NiAxM3ptMTguOTQgMTQuNzk0YTEuNjI1IDEuNjI1IDAgMDAtLjQ5Ny0uMjk4QzQzLjk4MyAxOC4xODUgMzYuMDQ5IDExIDI2LjU4NiAxMWExOC41OTUgMTguNTk1IDAgMDAtMTEuNzMyIDQuMTc1IDE4LjUwNCAxOC41MDQgMCAwMC02Ljg1IDE0LjQwNmMwIC4wNDEuMDA0LjA4Mi4wMDQuMTIzLS42NjcuMzM1LTEuMzcyLjY1NS0yLjA3My45NjItMi4xMzYuOTM0LTMuNjggMS42MDgtMy45MSAyLjgyNi0uMDU3LjMwOS0uMDY3LjkxNC41MiAxLjUwMiAxLjAzOCAxLjAzNyAzLjAyOCAxLjQwOSA1LjA1IDEuNDA5Ljg0MiAwIDEuNjg4LS4wNjQgMi40NzQtLjE3MiAxLjMzOS0uMTgyIDMuODM5LS42NzMgNS41MzYtMS45MTUgMi42NzgtMS45NDEgOC43MzMtMi42NjcgMTEuODg2LTIuNDIyIDEuODc5LjE0NSA0LjE1NSAxLjEzMiA1Ljk4NSAxLjkyNSAxLjM5Ni42MDcgMi41IDEuMDg1IDMuMzY2IDEuMjA4IDEuMTkuMTYzIDMuMTM2LS4wMzcgNS4xOTUtLjI0OGwuMTczLS4wMTdhNjIuNjI3IDYyLjYyNyAwIDAxMS41OTItLjE1MWMuMjE1LS4wMjEuNDI4LS4wMzYuNzEyLS4wNTYuODgtLjA2MiAxLjU2OS0uOCAxLjU2OS0xLjY4di0zLjgyOWMwLS40NzgtLjIwMi0uOTM0LS41NTYtMS4yNTJ6IiBmaWxsPSIjQkYwODE2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjwvcGF0aD48L3N2Zz4=",
   119  };