github.com/GoogleCloudPlatform/testgrid@v0.0.174/web/stories/testgrid-index.stories.ts (about)

     1  import { html, TemplateResult } from 'lit';
     2  import '../src/testgrid-index.js';
     3  
     4  export default {
     5    title: 'Index',
     6    component: 'testgrid-index',
     7    argTypes: {
     8      backgroundColor: { control: 'color' },
     9    },
    10  };
    11  
    12  interface Story<T> {
    13    (args: T): TemplateResult;
    14    args?: Partial<T>;
    15    argTypes?: Record<string, unknown>;
    16  }
    17  
    18  interface ArgTypes {
    19    backgroundColor?: string;
    20  }
    21  
    22  // dummy data
    23  const dashboards: Array<string> = [
    24    // dashboard-group_name-id
    25    'dashboard-g1-1',
    26    'dashboard-g1-2',
    27    'dashboard-g1-3',
    28    'dashboard-g1-4',
    29    'dashboard-g2-5',
    30    'dashboard-g2-6',
    31    'dashboard-g3-7',
    32    'dashboard-g3-8',
    33    'dashboard-g4-9',
    34    'dashboard-10',
    35  ];
    36  
    37  const dashboardGroups: Array<string> = [
    38    'Group-1',
    39    'Group-2',
    40    'Group-3',
    41    'Group-4',
    42  ];
    43  
    44  const respectiveDashboards: Record<string, Array<string>> = {
    45    'Group-1': [
    46      'dashboard-g1-1',
    47      'dashboard-g1-2',
    48      'dashboard-g1-3',
    49      'dashboard-g1-4',
    50    ],
    51  };
    52  
    53  const Template: Story<ArgTypes> = ({
    54    backgroundColor = 'white',
    55  }: ArgTypes) => html`
    56    <testgrid-index
    57      style="--example-app-background-color: ${backgroundColor}"
    58    ></testgrid-index>
    59  `;
    60  
    61  export const App = Template.bind({});
    62  App.args = {
    63    backgroundColor: '#ededed',
    64  };
    65  
    66  export const Dashboards: Story<ArgTypes> = ({
    67    backgroundColor = 'white',
    68  }: ArgTypes) => html`
    69    <testgrid-index
    70      style="--example-app-background-color: ${backgroundColor}"
    71      .dashboards=${dashboards}
    72    ></testgrid-index>
    73  `;
    74  
    75  export const DashboardGroups: Story<ArgTypes> = ({
    76    backgroundColor = 'white',
    77  }: ArgTypes) => html`
    78    <testgrid-index
    79      style="--example-app-background-color: ${backgroundColor}"
    80      .dashboardGroups=${dashboardGroups}
    81    ></testgrid-index>
    82  `;
    83  
    84  export const RespectiveDashboards: Story<ArgTypes> = ({
    85    backgroundColor = 'white',
    86  }: ArgTypes) => html`
    87    <testgrid-index
    88      style="--example-app-background-color: ${backgroundColor}"
    89      .show=${false}
    90      .dashboardGroups=${[dashboardGroups[0]]}
    91      .respectiveDashboards=${respectiveDashboards[dashboardGroups[0]]}
    92    ></testgrid-index>
    93  `;