shared.stories.ts 5.75 KB
Newer Older
1 2 3 4
import { NgrxFormsModule } from "ngrx-forms";
import { InlineSVGModule } from "ng-inline-svg";
import { StoreModule } from "@ngrx/store";
import { HttpClientModule } from "@angular/common/http";
David Burke's avatar
David Burke committed
5
import { storiesOf, moduleMetadata } from "@storybook/angular";
6
import { withKnobs, boolean, text, select } from "@storybook/addon-knobs";
David Burke's avatar
David Burke committed
7
import { RouterTestingModule } from "@angular/router/testing";
8

David Burke's avatar
David Burke committed
9
import { SharedModule } from "../app/shared/shared.module";
David Burke's avatar
David Burke committed
10 11 12 13 14

storiesOf("Shared", module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
Brendan's avatar
Brendan committed
15 16
      imports: [
        RouterTestingModule,
17 18 19
        NgrxFormsModule,
        HttpClientModule,
        InlineSVGModule.forRoot(),
20
        StoreModule.forRoot({}),
Brendan's avatar
Brendan committed
21
        SharedModule
22
      ],
23
      declarations: []
David Burke's avatar
David Burke committed
24 25
    })
  )
Emily Jensen's avatar
Emily Jensen committed
26 27 28
  .add("Marketing Frame", () => ({
    template: `<app-marketing-frame></app-marketing-frame>`
  }))
29
  .add("Text Link", () => {
30
    const defaultCaretState = "right";
31
    const caretStates = {
32
      None: "",
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
      Right: defaultCaretState,
      Left: "left"
    };
    // I think I need to use the any type because storybook is 4.0 but types aren't
    const caretControl: any = select(
      "Label State",
      caretStates,
      defaultCaretState
    );

    return {
      template: `
        <app-text-link
          caret="${caretControl}"
          [isMinor]="${boolean("Is Minor", false)}"
        >This is a text link.</app-text-link>
        <hr style="margin: 40px 0" />
        <app-text-link>
          Text link uses ng-content so you can <em>include</em>&nbsp;<strong>markup</strong>. Don't put elements that use display: block inside, though. It'll error!
        </app-text-link>
        <br /><br />
        <app-text-link>
          <em>Another sample with markup</em>
        </app-text-link>
        <h3>
          <app-text-link>
            This sample wraps app-text-link with a h3 tag
          </app-text-link>
        </h3>
        <app-text-link caret="right">
          Don't end a link with a period AND use a caret
        </app-text-link>
        &nbsp;&nbsp;&nbsp;
        <app-text-link caret="right">
          <del>This is bad.</del>
        </app-text-link>
        &nbsp;&nbsp;&nbsp;
        <app-text-link>
          Do this.
        </app-text-link>
        &nbsp;&nbsp;or&nbsp;&nbsp;
        <app-text-link caret="right">
          Or do this
        </app-text-link>
        <br /><br />
        When making <app-text-link>inline links</app-text-link>, never use the caret.
        <br /><br />
Brendan's avatar
Brendan committed
80 81 82 83 84 85 86 87
        <div style="font-size: 20px; font-weight: 400;">
          <app-text-link>
            Once you get over 19px, the link will inherit the font-weight rather than be set to 600.
          </app-text-link>
        </div>
        <div style="font-size: 20px; font-weight: 600;">
          <app-text-link>
            This one is inheriting the bold.
88 89
          </app-text-link>
        </div>
Brendan's avatar
Brendan committed
90 91 92 93 94
        <br /><br />
        This component is built with internal routerLinks in mind. If you want to go to an
        <app-text-link link="https://bing.com" [isExternal]="true">
          outside site
        </app-text-link>, add [isExternal]="true".
Brendan's avatar
Brendan committed
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
        <p>
          <app-text-link caret="right">Right Caret</app-text-link> |
          <app-text-link caret="left">Left Caret</app-text-link> |
          <app-text-link>No Caret</app-text-link>
        </p>
        <p>
          <app-text-link [isMinor]="true">"Minor" styling</app-text-link>
        </p>
        <p>
          Smart bold is Brendan leveraging a component to do more consistent styling. Shouldn't need
          to worry about it; it's on by default. But here's what it's doing:
        </p>
        <p style="font-weight: 400;">
          Here is a sample paragraph with <app-text-link>Smart bold on</app-text-link> and
          <app-text-link [smartBold]="false">Smart bold off</app-text-link>. Paragraph font weight is 400.
        </p>
        <p style="font-weight: 600;">
          Here is a sample paragraph with <app-text-link>Smart bold on</app-text-link> and
          <app-text-link [smartBold]="false">Smart bold off</app-text-link>. Paragraph font weight is 600.
        </p>
        <p style="font-weight: 700;">
          Here is a sample paragraph with <app-text-link>Smart bold on</app-text-link> and
          <app-text-link [smartBold]="false">Smart bold off</app-text-link>. Paragraph font weight is 700.
          (No changes - we don't have anything weightier than 700 at the moment!)
        </p>
        <p style="font-weight: 400; font-size: 20px;">
          Once you get over 19px font size, smart bold turns off and the link will always inherit the style.
          <app-text-link>Smart bold on</app-text-link> and <app-text-link [smartBold]="false">Smart bold
          off</app-text-link>. Paragraph font weight is 400, size is 20px.
        </p>
        <p>
          The component is managing underline thickness now too. I don't think I need to say more than that
          or have it be configurable.
        </p>
129 130 131
      `
    };
  })
David Burke's avatar
David Burke committed
132
  .add("Aside Link", () => ({
Brendan's avatar
Brendan committed
133 134 135 136 137
    template: `
      <aside-link>
        Here's an aside <em>link</em>!
      </aside-link>
    `
138 139
  }))
  .add("Text Input", () => ({
David Burke's avatar
David Burke committed
140 141 142 143 144 145 146 147
    template: `
      <app-text-field
        [ngrxFormControl]="ngrxFormControl"
        [label]="label"
        [isComplete]="isComplete"
        [type]="type"
      ></app-text-field>
    `,
148 149 150 151 152 153 154 155 156 157
    props: {
      ngrxFormControl: { id: "test", value: "", errors: {} },
      label: text("label", "My Field"),
      isComplete: boolean("isComplete", false),
      type: select(
        "type",
        { "": null, email: "email", password: "password", url: "url" } as any,
        undefined as any
      )
    }
158 159
  }))
  .add("Heading", () => ({
David Burke's avatar
David Burke committed
160
    template: `<app-heading [text]="text"></app-heading>`,
161 162 163
    props: {
      text: "Some Big Heading"
    }
David Burke's avatar
David Burke committed
164
  }));