github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/stories/components/boxed-section.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  import { withKnobs, optionsKnob } from '@storybook/addon-knobs';
     3  
     4  export default {
     5    title: 'Components/Boxed Section',
     6    decorators: [withKnobs],
     7  };
     8  
     9  export let Standard = () => {
    10    return {
    11      template: hbs`
    12        <h5 class="title is-5">Boxed section</h5>
    13        <div class="boxed-section {{variant}}">
    14          <div class="boxed-section-head">
    15            Boxed Section
    16          </div>
    17          <div class="boxed-section-body">
    18            <div class="mock-content">
    19              <div class="mock-image"></div>
    20              <div class="mock-copy"></div>
    21              <div class="mock-copy"></div>
    22            </div>
    23          </div>
    24        </div>
    25        `,
    26      context: contextFactory(),
    27    };
    28  };
    29  
    30  export let RightHandDetails = () => {
    31    return {
    32      template: hbs`
    33        <h5 class="title is-5">Boxed section with right hand details</h5>
    34        <div class="boxed-section {{variant}}">
    35          <div class="boxed-section-head">
    36            Boxed Section With Right Hand Details
    37            <span class="pull-right">{{now interval=1000}}</span>
    38          </div>
    39          <div class="boxed-section-body">
    40            <div class="mock-content">
    41              <div class="mock-image"></div>
    42              <div class="mock-copy"></div>
    43              <div class="mock-copy"></div>
    44            </div>
    45          </div>
    46        </div>
    47        `,
    48      context: contextFactory(),
    49    };
    50  };
    51  
    52  export let TitleDecoration = () => {
    53    return {
    54      template: hbs`
    55        <h5 class="title is-5">Boxed section with title decoration</h5>
    56        <div class="boxed-section {{variant}}">
    57          <div class="boxed-section-head">
    58            Boxed Section With Title Decoration
    59            <span class="badge is-white">7</span>
    60          </div>
    61          <div class="boxed-section-body">
    62            <div class="mock-content">
    63              <div class="mock-image"></div>
    64              <div class="mock-copy"></div>
    65              <div class="mock-copy"></div>
    66            </div>
    67          </div>
    68        </div>
    69        `,
    70      context: contextFactory(),
    71    };
    72  };
    73  
    74  export let Foot = () => {
    75    return {
    76      template: hbs`
    77        <h5 class="title is-5">Boxed section with foot</h5>
    78        <div class="boxed-section {{variant}}">
    79          <div class="boxed-section-head">
    80            Boxed Section With Large Header
    81          </div>
    82          <div class="boxed-section-body with-foot">
    83            <div class="mock-content">
    84              <div class="mock-image"></div>
    85              <div class="mock-copy"></div>
    86              <div class="mock-copy"></div>
    87            </div>
    88          </div>
    89          <div class="boxed-section-foot">
    90            <span>Left-aligned message</span>
    91            <a href="javascript:;" class="pull-right">Toggle or other action</a>
    92          </div>
    93        </div>
    94        `,
    95      context: contextFactory(),
    96    };
    97  };
    98  
    99  export let LargeHeader = () => {
   100    return {
   101      template: hbs`
   102        <h5 class="title is-5">Boxed section with large header</h5>
   103        <div class="boxed-section {{variant}}">
   104          <div class="boxed-section-head">
   105            <div class="boxed-section-row">
   106              Boxed Section With Large Header
   107              <span class="badge is-white is-subtle bumper-left">Status</span>
   108            </div>
   109            <div class="boxed-section-row">
   110              <span class="tag is-outlined">A tag that goes on a second line because it's rather long</span>
   111            </div>
   112          </div>
   113          <div class="boxed-section-body">
   114            <div class="mock-content">
   115              <div class="mock-image"></div>
   116              <div class="mock-copy"></div>
   117              <div class="mock-copy"></div>
   118            </div>
   119          </div>
   120        </div>
   121        `,
   122      context: contextFactory(),
   123    };
   124  };
   125  
   126  export let DarkBody = () => {
   127    return {
   128      template: hbs`
   129        <h5 class="title is-5">Boxed section with dark body</h5>
   130        <div class="boxed-section {{variant}}">
   131          <div class="boxed-section-head">
   132            Boxed Section With Dark Body
   133          </div>
   134          <div class="boxed-section-body is-dark">
   135            <div class="mock-content">
   136              <div class="mock-image"></div>
   137              <div class="mock-copy"></div>
   138              <div class="mock-copy"></div>
   139            </div>
   140          </div>
   141        </div>
   142        `,
   143      context: contextFactory(),
   144    };
   145  };
   146  
   147  function contextFactory() {
   148    return {
   149      variant: optionsKnob(
   150        'Variant',
   151        {
   152          Normal: '',
   153          Info: 'is-info',
   154          Warning: 'is-warning',
   155          Danger: 'is-danger',
   156        },
   157        '',
   158        {
   159          display: 'inline-radio',
   160        },
   161        'variant-id'
   162      ),
   163    };
   164  }