github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/components/timeline.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  import moment from 'moment';
     3  
     4  export default {
     5    title: 'Components|Timeline',
     6  };
     7  
     8  export let Standard = () => {
     9    return {
    10      template: hbs`
    11        <h5 class="title is-5">Timeline</h5>
    12        <ol class="timeline">
    13          <li class="timeline-note">
    14            {{format-date yesterday}}
    15          </li>
    16          <li class="timeline-object">
    17            <div class="boxed-section">
    18              <div class="boxed-section-head is-light">
    19                Object number one
    20              </div>
    21            </div>
    22          </li>
    23          <li class="timeline-object">
    24            <div class="boxed-section">
    25              <div class="boxed-section-head is-light">
    26                Object number two
    27              </div>
    28            </div>
    29          </li>
    30          <li class="timeline-note">
    31            {{format-date today}}
    32          </li>
    33          <li class="timeline-object">
    34            <div class="boxed-section">
    35              <div class="boxed-section-head is-light">
    36                Object number three
    37              </div>
    38            </div>
    39          </li>
    40        </ol>
    41        <p class="annotation">Timelines are a combination of objects and notes. Objects compose with boxed sections to create structure.</p>
    42        <p class="annotation">Timeline notes should be used sparingly when possible. In this example there is a note per day rather than a note per object.</p>
    43        `,
    44      context: {
    45        yesterday: moment().subtract(1, 'd'),
    46        today: moment(),
    47      },
    48    };
    49  };
    50  
    51  export let Detailed = () => {
    52    return {
    53      template: hbs`
    54        <h5 class="title is-5">Detailed timeline</h5>
    55        <ol class="timeline">
    56          <li class="timeline-note">
    57            {{format-date today}}
    58          </li>
    59          <li class="timeline-object">
    60            <div class="boxed-section">
    61              <div class="boxed-section-head is-light">
    62                <span class="tag is-running">Running</span>
    63                <span class="bumper-left pair is-faded">
    64                  <span class="term">Stable</span>
    65                  <span class="badge is-light is-faded"><code>a387e243</code></span>
    66                </span>
    67                <span class="bumper-left pair is-faded">
    68                  <span class="term">Submitted</span>
    69                  <span class="tooltip" aria-label="{{format-month-ts (now)}}">{{moment-from-now (now)}}</span>
    70                </span>
    71              </div>
    72            </div>
    73          </li>
    74          <li class="timeline-object">
    75            <div class="boxed-section">
    76              <div class="boxed-section-head is-light">
    77                <span class="tag is-complete">Complete</span>
    78                <span class="bumper-left pair is-faded">
    79                  <span class="term">Expired</span>
    80                  <span class="badge is-light is-faded"><code>b3220efb</code></span>
    81                </span>
    82                <span class="bumper-left pair is-faded">
    83                  <span class="term">Submitted</span>
    84                  <span>{{format-month-ts yesterday}}</span>
    85                </span>
    86              </div>
    87            </div>
    88          </li>
    89          <li class="timeline-note">
    90            {{format-date yesterday}}
    91          </li>
    92          <li class="timeline-object">
    93            <div class="boxed-section">
    94              <div class="boxed-section-head is-light">
    95                <span class="tag is-error">Failed</span>
    96                <span class="bumper-left pair is-faded">
    97                  <span class="term">Reverted</span>
    98                  <span class="badge is-light is-faded"><code>fec9218e</code></span>
    99                </span>
   100                <span class="bumper-left pair is-faded">
   101                  <span class="term">Submitted</span>
   102                  <span>{{format-month-ts yesterday}}</span>
   103                </span>
   104              </div>
   105            </div>
   106          </li>
   107        </ol>
   108        `,
   109      context: {
   110        yesterday: moment().subtract(1, 'd'),
   111        today: moment(),
   112      },
   113    };
   114  };
   115  
   116  export let Toggling = () => {
   117    return {
   118      template: hbs`
   119        <h5 class="title is-5">Toggling timeline objects</h5>
   120        <ol class="timeline">
   121          <li class="timeline-note">
   122            {{format-date today}}
   123          </li>
   124          <li class="timeline-object">
   125            <div class="boxed-section">
   126              <div class="boxed-section-head is-light">
   127                <span class="tag is-running">Running</span>
   128                <span class="bumper-left pair is-faded">
   129                  <span class="term">Stable</span>
   130                  <span class="badge is-light is-faded"><code>a387e243</code></span>
   131                </span>
   132                <button
   133                  class="button is-light is-compact pull-right"
   134                  onclick={{action (mut toggle1) (not toggle1)}}>
   135                  {{if toggle1 "Close" "Open"}}
   136                </button>
   137              </div>
   138              {{#if toggle1}}
   139                <div class="boxed-section-body">
   140                  <p>Some details for the timeline object.</p>
   141                </div>
   142              {{/if}}
   143            </div>
   144          </li>
   145          <li class="timeline-note">
   146            {{format-date yesterday}}
   147          </li>
   148          <li class="timeline-object">
   149            <div class="boxed-section">
   150              <div class="boxed-section-head is-light">
   151                <span class="tag is-complete">Complete</span>
   152                <span class="bumper-left pair is-faded">
   153                  <span class="term">Expired</span>
   154                  <span class="badge is-light is-faded"><code>b3220efb</code></span>
   155                </span>
   156                <button
   157                  class="button is-light is-compact pull-right"
   158                  onclick={{action (mut toggle2) (not toggle2)}}>
   159                  {{if toggle2 "Close" "Open"}}
   160                </button>
   161              </div>
   162              {{#if toggle2}}
   163                <div class="boxed-section-body">
   164                  <p>Some details for the timeline object.</p>
   165                </div>
   166              {{/if}}
   167            </div>
   168          </li>
   169        </ol>
   170        <p class="annotation"></p>
   171        `,
   172      context: {
   173        yesterday: moment().subtract(1, 'd'),
   174        today: moment(),
   175      },
   176    };
   177  };
   178  
   179  export let Emphasizing = () => {
   180    return {
   181      template: hbs`
   182        <h5 class="title is-5">Emphasizing timeline objects</h5>
   183        <ol class="timeline">
   184          <li class="timeline-note">
   185            {{format-date today}}
   186          </li>
   187          <li class="timeline-object">
   188            <div class="boxed-section">
   189              <div class="boxed-section-head is-light">
   190                <span class="pair is-faded">
   191                  <span class="term">Stable</span>
   192                  <span class="badge is-light is-faded"><code>a387e243</code></span>
   193                </span>
   194                <span class="bumper-left pair is-faded">
   195                  <span class="term">Submitted</span>
   196                  <span class="tooltip" aria-label="{{format-ts (now)}}">{{moment-from-now (now)}}</span>
   197                </span>
   198              </div>
   199            </div>
   200          </li>
   201          <li class="timeline-object">
   202            <div class="boxed-section">
   203              <div class="boxed-section-head">
   204                Pay attention here
   205              </div>
   206              <div class="boxed-section-body">
   207                <span class="pair is-faded">
   208                  <span class="term">Expired</span>
   209                  <span class="badge is-light is-faded"><code>b3220efb</code></span>
   210                </span>
   211                <span class="bumper-left pair is-faded">
   212                  <span class="term">Submitted</span>
   213                  <span>{{format-ts yesterday}}</span>
   214                </span>
   215              </div>
   216            </div>
   217          </li>
   218          <li class="timeline-note">
   219            {{format-date yesterday}}
   220          </li>
   221          <li class="timeline-object">
   222            <div class="boxed-section">
   223              <div class="boxed-section-head is-light">
   224                <span class="pair is-faded">
   225                  <span class="term">Reverted</span>
   226                  <span class="badge is-light is-faded"><code>fec9218e</code></span>
   227                </span>
   228                <span class="bumper-left pair is-faded">
   229                  <span class="term">Submitted</span>
   230                  <span>{{format-ts yesterday}}</span>
   231                </span>
   232              </div>
   233            </div>
   234          </li>
   235        </ol>
   236        <p class="annotation">By using a full boxed-section for an emphasized timeline object, the object takes up more space and gets more visual weight. It also adheres to existing patterns.</p>
   237        `,
   238      context: {
   239        yesterday: moment().subtract(1, 'd'),
   240        today: moment(),
   241      },
   242    };
   243  };