github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/Image/index.stories.js (about)

     1  import Text from "./index";
     2  import { PanelStoryDecorator } from "../../../utils/storybook";
     3  
     4  const story = {
     5    title: "Primitives/Text",
     6    component: Text,
     7  };
     8  
     9  export default story;
    10  
    11  const Template = (args) => (
    12    <PanelStoryDecorator definition={args} panelType="text" />
    13  );
    14  
    15  export const markdownWithTitle = Template.bind({});
    16  markdownWithTitle.args = {
    17    title: "Injected title for the text",
    18    properties: { value: "This is the original text" },
    19  };
    20  
    21  export const markdownCode = Template.bind({});
    22  markdownCode.args = {
    23    properties: {
    24      value: `\`\`\`
    25  10 PRINT "Steampipe is great"
    26  20 GOTO 10 
    27  \`\`\``,
    28    },
    29  };
    30  
    31  export const markdownEmphasis = Template.bind({});
    32  markdownEmphasis.args = {
    33    properties: { value: `_Lean_ machine` },
    34  };
    35  
    36  export const markdownLink = Template.bind({});
    37  markdownLink.args = {
    38    properties: { value: "[Click to go somewhere](https://foo.bar)" },
    39  };
    40  
    41  export const markdownHeading1 = Template.bind({});
    42  markdownHeading1.args = {
    43    properties: { value: "# Welcome to Steampipe Dashboards" },
    44  };
    45  
    46  export const markdownHeading2 = Template.bind({});
    47  markdownHeading2.args = {
    48    properties: { value: "## Welcome to Steampipe Dashboards" },
    49  };
    50  
    51  export const markdownHeading3 = Template.bind({});
    52  markdownHeading3.args = {
    53    properties: { value: "### Welcome to Steampipe Dashboards" },
    54  };
    55  
    56  export const markdownHeading4 = Template.bind({});
    57  markdownHeading4.args = {
    58    properties: { value: "#### Welcome to Steampipe Dashboards" },
    59  };
    60  
    61  export const markdownHeading5 = Template.bind({});
    62  markdownHeading5.args = {
    63    properties: { value: "##### Welcome to Steampipe Dashboards" },
    64  };
    65  
    66  export const markdownHeading6 = Template.bind({});
    67  markdownHeading6.args = {
    68    properties: { value: "###### Welcome to Steampipe Dashboards" },
    69  };
    70  
    71  export const markdownHorizontalRule = Template.bind({});
    72  markdownHorizontalRule.args = {
    73    properties: {
    74      value: `Above the fold
    75  ***
    76  Below the fold`,
    77    },
    78  };
    79  
    80  export const markdownImage = Template.bind({});
    81  markdownImage.args = {
    82    properties: {
    83      value: `![Steampipe](https://steampipe.io/images/steampipe_logo_wordmark_color.svg)`,
    84    },
    85  };
    86  
    87  export const markdownOrderedList = Template.bind({});
    88  markdownOrderedList.args = {
    89    properties: {
    90      value: `1. foo
    91  2. bar`,
    92    },
    93  };
    94  
    95  export const markdownUnorderedList = Template.bind({});
    96  markdownUnorderedList.args = {
    97    properties: {
    98      value: `- foo
    99  - bar`,
   100    },
   101  };
   102  
   103  export const markdownParagraph = Template.bind({});
   104  markdownParagraph.args = {
   105    properties: { value: "I am a paragraph of text" },
   106  };
   107  
   108  export const markdownParagraphWithInlineCode = Template.bind({});
   109  markdownParagraphWithInlineCode.args = {
   110    properties: { value: "I am a paragraph of text containing `inline code`" },
   111  };
   112  
   113  export const markdownStrikethrough = Template.bind({});
   114  markdownStrikethrough.args = {
   115    properties: { value: `Just ~~cross out~~ the bits you don't want` },
   116  };
   117  
   118  export const markdownStrong = Template.bind({});
   119  markdownStrong.args = {
   120    properties: { value: `**Bold** is best` },
   121  };
   122  
   123  export const markdownTable = Template.bind({});
   124  markdownTable.args = {
   125    properties: {
   126      value: `| Name | Company | Position |
   127  | ----- | ----- | ----- |
   128  | David Brent | Wernham Hogg | General Manager |
   129  | Michael Scott | Dunder Mifflin | Regional Manager |`,
   130    },
   131  };
   132  
   133  export const markdownKitchenSink = Template.bind({});
   134  markdownKitchenSink.args = {
   135    properties: {
   136      value: `# Start with a heading
   137  
   138  Then some intro text
   139  
   140  ## Followed by a sub-heading
   141  
   142  Then we'll [link](https://some.where), **bold** some text, _emphasise_ some text, or perhaps even *__both__*.
   143  
   144  Todo:
   145  
   146  - Write more components
   147  - Drink more coffee
   148  - Try \`inline\` code
   149  
   150  ***
   151  
   152  Finally, here's a poem:
   153  
   154  \`\`\`
   155  Shall I compare thee to a summer’s day?
   156  Thou art more lovely and more temperate.
   157  Rough winds do shake the darling buds of May,
   158  And summer’s lease hath all too short a date.
   159  Sometime too hot the eye of heaven shines,
   160  And often is his gold complexion dimmed;
   161  And every fair from fair sometime declines,
   162  By chance, or nature’s changing course, untrimmed;
   163  But thy eternal summer shall not fade,
   164  Nor lose possession of that fair thou ow’st,
   165  Nor shall death brag thou wand’rest in his shade,
   166  When in eternal lines to Time thou grow’st.
   167  So long as men can breathe, or eyes can see,
   168  So long lives this, and this gives life to thee.
   169  \`\`\``,
   170    },
   171  };
   172  
   173  export const rawWithMarkdown = Template.bind({});
   174  rawWithMarkdown.args = {
   175    properties: {
   176      value: `## Title goes here
   177  
   178  **Bold** is best`,
   179      type: "raw",
   180    },
   181  };