diff --git a/server/zanata-frontend/src/frontend/.storybook-editor/__snapshots__/storyshots-editor.test.js.snap b/server/zanata-frontend/src/frontend/.storybook-editor/__snapshots__/storyshots-editor.test.js.snap new file mode 100644 index 0000000000..2c23a02476 --- /dev/null +++ b/server/zanata-frontend/src/frontend/.storybook-editor/__snapshots__/storyshots-editor.test.js.snap @@ -0,0 +1,5537 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Editor Storyshots Button BUTTON BUILDER 1`] = ` +
+
+

+ Button +

+
+
+
+
+
+
+ +
+ + Show Info + +
+ + × + +
+
+
+

+ Button +

+

+ BUTTON BUILDER +

+
+
+

+ Use KNOBS tab to adjust the settings, then copy your code from Story Source +

+
+
+

+ Story Source +

+
+                    
+
+ + < + Button + + + + +
+    +
+ + title + + + = + + + " + Click Me + " + + + +
+ + +
+    +
+ + onClick + + + = + + + + onClick() + + + + +
+ + +
+    +
+ + className + + + = + + + " + Button Button--default + " + + + +
+
+
+ + > + +
+
+ + Click Me + +
+
+ + </ + Button + > + +
+
+
+
+
+

+ Prop Types +

+
+

+ " + Button + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ children + + node + + no + + - + +
+ className + + string + + no + + - + +
+ disabled + + bool + + no + + + + false + + + +
+ onClick + + func + + no + + - + +
+ title + + string + + no + + - + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Editor Storyshots Button colour styles 1`] = ` +
+
+

+ Button +

+
+
+
+
+
+
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+ + Show Info + +
+ + × + +
+
+
+

+ Button +

+

+ colour styles +

+
+ +
+

+ Story Source +

+
+                    
+
+ + < + ul + + + + + + data-radium + + + + + + > + +
+
+
+ + < + li + + + + > + +
+
+
+ + < + Button + + + + + + title + + + = + + + " + Click should trigger onClick action + " + + + + + + + + onClick + + + = + + + + onClick() + + + + + + + + + className + + + = + + + " + Button Button--primary + " + + + + + + + + > + +
+
+ + Button Button--primary + +
+
+ + </ + Button + > + +
+
+
+ + </ + li + > + +
+
+
+
+ + < + li + + + + > + +
+
+
+ + < + Button + + + + + + title + + + = + + + " + Click should trigger onClick action + " + + + + + + + + onClick + + + = + + + + onClick() + + + + + + + + + className + + + = + + + " + Button Button--success + " + + + + + + + + > + +
+
+ + Button Button--success + +
+
+ + </ + Button + > + +
+
+
+ + </ + li + > + +
+
+
+
+ + < + li + + + + > + +
+
+
+ + < + Button + + + + + + title + + + = + + + " + Click should trigger onClick action + " + + + + + + + + onClick + + + = + + + + onClick() + + + + + + + + + className + + + = + + + " + Button Button--unsure + " + + + + + + + + > + +
+
+ + Button Button--unsure + +
+
+ + </ + Button + > + +
+
+
+ + </ + li + > + +
+
+
+
+ + < + li + + + + > + +
+
+
+ + < + Button + + + + + + title + + + = + + + " + Click should trigger onClick action + " + + + + + + + + onClick + + + = + + + + onClick() + + + + + + + + + className + + + = + + + " + Button Button--neutral + " + + + + + + + + > + +
+
+ + Button Button--neutral + +
+
+ + </ + Button + > + +
+
+
+ + </ + li + > + +
+
+
+ + </ + ul + > + +
+
+
+
+
+

+ Prop Types +

+
+

+ " + Button + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ children + + node + + no + + - + +
+ className + + string + + no + + - + +
+ disabled + + bool + + no + + + + false + + + +
+ onClick + + func + + no + + - + +
+ title + + string + + no + + - + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Editor Storyshots Button plain (disabled) 1`] = ` +
+
+

+ Button +

+
+
+
+
+
+
+ +
+ + Show Info + +
+ + × + +
+
+
+

+ Button +

+

+ plain (disabled) +

+
+ +
+

+ Story Source +

+
+                    
+
+ + < + Button + + + + + + title + + + = + + + " + Should not dispatch onClick action + " + + + + + + + + onClick + + + = + + + + onClick() + + + + + + + + + disabled + + + + + + > + +
+
+ + Plain disabled button. Click event should + +
+
+
+ + < + strong + + + + > + +
+
+ + not + +
+
+ + </ + strong + > + +
+
+
+ + be fired. + +
+
+ + </ + Button + > + +
+
+
+
+
+

+ Prop Types +

+
+

+ " + Button + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ children + + node + + no + + - + +
+ className + + string + + no + + - + +
+ disabled + + bool + + no + + + + false + + + +
+ onClick + + func + + no + + - + +
+ title + + string + + no + + - + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Editor Storyshots Button plain 1`] = ` +
+
+

+ Button +

+
+
+
+
+
+
+ +
+ + Show Info + +
+ + × + +
+
+
+

+ Button +

+

+ plain +

+
+ +
+

+ Story Source +

+
+                    
+
+ + < + Button + + + + + + title + + + = + + + " + Click should trigger onClick action + " + + + + + + + + onClick + + + = + + + + onClick() + + + + + + + + + > + +
+
+ + Unstyled button. Pretty plain. Should be used with some styles. + +
+
+ + </ + Button + > + +
+
+
+
+
+

+ Prop Types +

+
+

+ " + Button + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ children + + node + + no + + - + +
+ className + + string + + no + + - + +
+ disabled + + bool + + no + + + + false + + + +
+ onClick + + func + + no + + - + +
+ title + + string + + no + + - + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Editor Storyshots Button rounded and styled 1`] = ` +
+
+

+ Button +

+
+
+
+
+
+
+ +
+ + Show Info + +
+ + × + +
+
+
+

+ Button +

+

+ rounded and styled +

+
+ +
+

+ Story Source +

+
+                    
+
+ + < + Button + + + + + + title + + + = + + + " + Styles from suggestion panel button + " + + + + + + + + onClick + + + = + + + + onClick() + + + + + + + + + className + + + = + + + " + Button Button--small u-rounded Button--primary + " + + + + + + + + > + +
+
+ + Button Button--small u-rounded Button--primary + +
+
+ + </ + Button + > + +
+
+
+
+
+

+ Prop Types +

+
+

+ " + Button + " Component +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ property + + propType + + required + + default + + description +
+ children + + node + + no + + - + +
+ className + + string + + no + + - + +
+ disabled + + bool + + no + + + + false + + + +
+ onClick + + func + + no + + - + +
+ title + + string + + no + + - + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Editor Storyshots GlossarySearchInput empty 1`] = ` +
+
+ + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + +
+
+`; + +exports[`Editor Storyshots GlossarySearchInput with text 1`] = ` +
+
+ + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + +
+
+`; + +exports[`Editor Storyshots GlossaryTerm Without translations 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Source + + Target + + + Details +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+`; + +exports[`Editor Storyshots GlossaryTerm in a table 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Source + + Target + + + Details +
+ + + + + + + +
+ + + + + + + +
+ + + + + + + +
+`; + +exports[`Editor Storyshots GlossaryTerm simple term on its own 1`] = ` + + + + + + + + + +
+ + + + + + + +
+`; + +exports[`Editor Storyshots GlossaryTermModal details still loading 1`] = ` +
+

+ Lorem Ipsum +

+
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.

", + } + } + /> +
    Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. +
  • Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
  • +
  • Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
  • +
  • Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
  • +
  • Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
  • ", + } + } + /> +

    + Dolor Sit Amet +

    +
    Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.

    +

    Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.

    +

    Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.

    +

    Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.

    +

    Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.

    ", + } + } + /> +
      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. +
    • Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
    • +
    • Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
    • +
    • Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
    • +
    • Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
    • ", + } + } + /> +
      +
      +`; + +exports[`Editor Storyshots GlossaryTermModal with 1 detail item 1`] = ` +
      +

      + Lorem Ipsum +

      +
      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.

      ", + } + } + /> +
        Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. +
      • Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
      • +
      • Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
      • +
      • Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
      • +
      • Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
      • ", + } + } + /> +

        + Dolor Sit Amet +

        +
        Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.

        +

        Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.

        +

        Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.

        +

        Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.

        +

        Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.

        ", + } + } + /> +
          Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. +
        • Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
        • +
        • Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
        • +
        • Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
        • +
        • Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
        • ", + } + } + /> +
          +
          +`; + +exports[`Editor Storyshots GlossaryTermModal with 3 detail items 1`] = ` +
          +

          + Lorem Ipsum +

          +
          Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.

          ", + } + } + /> +
            Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. +
          • Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
          • +
          • Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
          • +
          • Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
          • +
          • Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
          • ", + } + } + /> +

            + Dolor Sit Amet +

            +
            Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.

            +

            Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.

            +

            Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.

            +

            Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.

            +

            Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.

            ", + } + } + /> +
              Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. +
            • Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
            • +
            • Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
            • +
            • Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
            • +
            • Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
            • ", + } + } + /> +
              +
              +`; + +exports[`Editor Storyshots ProgressBar Large 1`] = ` +
              + + + + + +
              +`; + +exports[`Editor Storyshots ProgressBar Medium (default) 1`] = ` +
              + + + + + +
              +`; + +exports[`Editor Storyshots ProgressBar Small 1`] = ` +
              + + + + + +
              +`; + +exports[`Editor Storyshots TextDiff default 1`] = ` +
              + + The + + + original + + + changed + + + text, what + + + ever it wa + + + it now i + + + s. + +
              +`; diff --git a/server/zanata-frontend/src/frontend/.storybook-frontend/__snapshots__/storyshots-frontend.test.js.snap b/server/zanata-frontend/src/frontend/.storybook-frontend/__snapshots__/storyshots-frontend.test.js.snap new file mode 100644 index 0000000000..6b42ebfa28 --- /dev/null +++ b/server/zanata-frontend/src/frontend/.storybook-frontend/__snapshots__/storyshots-frontend.test.js.snap @@ -0,0 +1,14637 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Frontend Storyshots Alert danger 1`] = ` +
              + + Holy guacamole! + + Best check yo self +
              +`; + +exports[`Frontend Storyshots Alert info 1`] = ` +
              + + Holy guacamole! + + Best check yo self +
              +`; + +exports[`Frontend Storyshots Alert success 1`] = ` +
              + + Holy guacamole! + + Best check yo self +
              +`; + +exports[`Frontend Storyshots Alert warning 1`] = ` +
              + + Holy guacamole! + + Best check yo self +
              +`; + +exports[`Frontend Storyshots Badge default 1`] = ` +

              + Badge + + 23 + +

              +`; + +exports[`Frontend Storyshots Badge in button 1`] = ` + +`; + +exports[`Frontend Storyshots Badge in nav item 1`] = ` + +`; + +exports[`Frontend Storyshots Breadcrumbs default 1`] = ` +
                +
              1. + + Home + +
              2. +
              3. + + Library + +
              4. +
              5. + + Data + +
              6. +
              +`; + +exports[`Frontend Storyshots Button danger 1`] = ` + +`; + +exports[`Frontend Storyshots Button default 1`] = ` + +`; + +exports[`Frontend Storyshots Button group 1`] = ` +
              + + + +
              +`; + +exports[`Frontend Storyshots Button info 1`] = ` + +`; + +exports[`Frontend Storyshots Button nested 1`] = ` +
              + + +
              + + +
              +
              +`; + +exports[`Frontend Storyshots Button primary 1`] = ` + +`; + +exports[`Frontend Storyshots Button sizes 1`] = ` +
              + + + + + + + + +
              +`; + +exports[`Frontend Storyshots Button success 1`] = ` + +`; + +exports[`Frontend Storyshots Button toolbar 1`] = ` +
              +
              + + + + +
              +
              + + + +
              +
              + +
              +
              +`; + +exports[`Frontend Storyshots Button warning 1`] = ` + +`; + +exports[`Frontend Storyshots Dropdown default 1`] = ` +
              + + +
              +`; + +exports[`Frontend Storyshots EditableText editing 1`] = ` + +`; + +exports[`Frontend Storyshots EditableText not editing 1`] = ` +
              + Test text +
              +`; + +exports[`Frontend Storyshots Form checkbox and radios 1`] = ` + +
              + +
              +
              + +
              +
              + +
              +
              +`; + +exports[`Frontend Storyshots Form default 1`] = ` +
              +
              + + +
              +
              + +
              +
              + +
              +
              +`; + +exports[`Frontend Storyshots Form inline label 1`] = ` +
              +
              + +
              + + +
              +
              +
              + +
              + + + @ + + + + +
              +
              +
              +`; + +exports[`Frontend Storyshots Form validation states 1`] = ` +
              +
              + + +
              +
              + + +
              +
              + + +
              +
              + + + + @ + + + + +
              +
              +`; + +exports[`Frontend Storyshots Foundation colours 1`] = ` + +

              + Main colors +

              + + Hover for hexcode + +
              +
              + + + #03A6D7 + + +
              +
              + + + #546677 + + +
              +
              + + + #629BAC + + +
              +
              + + + #A2B3BE + + +
              +
              + + + #BDD4DC + + +
              +
              + + + #F5F5F5 + + +
              +
              + + + #DDDDDD + + +
              +
              + + + #555555 + + +
              +

              + Status colours +

              +
              + + + #62C876 + + +
              +
              + + + #E9DD00 + + +
              +
              + + + #FFA800 + + +
              +
              + + + #FF3B3D + + +
              +
              + + + #4E9FDD + + +
              +
              +`; + +exports[`Frontend Storyshots Foundation grid 1`] = ` +
              +
              +
              + + < + Col xs={12} md={8} + /> + +
              +
              + + < + Col xs={6} md={4} + /> + +
              +
              +
              +
              + + < + Col xs={6} md={4} + /> + +
              +
              + + < + Col xs={6} md={4} + /> + +
              +
              + + < + Col xsHidden md={4} + /> + +
              +
              +
              +
              + + < + Col xs={6} xsOffset={6} + /> + +
              +
              +
              +
              + + < + Col md={6} mdPush={6} + /> + +
              +
              + + < + Col md={6} mdPull={6} + /> + +
              +
              +
              +`; + +exports[`Frontend Storyshots Foundation typography 1`] = ` + +

              + Font stack +

              +

              + 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; +

              +
              +

              + Headings +

              +

              + Page Header + + With Small Text + +

              +

              + h1. Bootstrap heading + + Secondary text + +

              +

              + h2. Bootstrap heading + + Secondary text + +

              +

              + h3. Bootstrap heading + + Secondary text + +

              +

              + h4. Bootstrap heading + + Secondary text + +

              +
              + h5. Bootstrap heading + + Secondary text + +
              +
              + h6. Bootstrap heading + + Secondary text + +
              +
              +

              + Text styles +

              +

              + Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. +

              +

              + Nullam quis risus eget + + urna mollis ornare + + vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. +

              +

              + + This line of text is meant to be treated as fine print. + +

              +

              + The following snippet of text is + + rendered as bold text + + . +

              +

              + The following snippet of text is + + rendered as italicized text + + . +

              +

              + An abbreviation of the word attribute is + + attr + + . +

              +

              + Left aligned text. +

              +

              + Center aligned text. +

              +

              + Right aligned text. +

              +

              + Justified text. +

              +

              + Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. +

              +

              + Primary: Nullam id dolor id nibh ultricies vehicula ut id elit. +

              +

              + Warning: Etiam porta sem malesuada magna mollis euismod. +

              +

              + Danger: Donec ullamcorper nulla non metus auctor fringilla. +

              +

              + Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula. +

              +

              + Info: Maecenas sed diam eget risus varius blandit sit amet non magna. +

              +
              +`; + +exports[`Frontend Storyshots Icon default 1`] = ` +
              +

              + Size n2 +

              + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + +

              + Size n1 +

              + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + +

              + Size 0 +

              + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + +

              + Size 1 +

              + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + +

              + Size 2 +

              + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + +

              + Size 3 +

              + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + +

              + Size 4 +

              + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + + + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + +
              +`; + +exports[`Frontend Storyshots Label in headings 1`] = ` + +

              + Label + + New + +

              +

              + Label + + New + +

              +

              + Label + + New + +

              +

              + Label + + New + +

              +
              + Label + + New + +
              +

              + Label + + New + +

              +
              +`; + +exports[`Frontend Storyshots Label validation states 1`] = ` + + + Default + + + Primary + + + Success + + + Warning + + + Danger + + +`; + +exports[`Frontend Storyshots Link link page not in frontend app 1`] = ` + + Japanese + +`; + +exports[`Frontend Storyshots Link link within frontend app 1`] = ` + + Languages + +`; + +exports[`Frontend Storyshots List default 1`] = ` +
                +
              • + Item 1 +
              • +
              • + Item 2 +
              • +
              • + ... +
              • +
              +`; + +exports[`Frontend Storyshots List with headings 1`] = ` +
              + +

              + Heading 1 +

              +

              + Some body text +

              +
              + +

              + Heading 2 +

              +

              + Linked item +

              +
              +
              +`; + +exports[`Frontend Storyshots List with links 1`] = ` + +`; + +exports[`Frontend Storyshots LoaderText default 1`] = ` + + + Updating + + +
              + ", + } + } + style={ + Object { + "fill": "#546677", + "height": 64, + "width": 64, + } + } + /> + + + + +`; + +exports[`Frontend Storyshots Modal TMX export - file prep finished 1`] = ` +
              +`; + +exports[`Frontend Storyshots Modal TMX export - multiple languages 1`] = ` +
              +`; + +exports[`Frontend Storyshots Modal TMX export - one language 1`] = ` +
              +`; + +exports[`Frontend Storyshots Modal TMX export - preparing files 1`] = ` +
              +`; + +exports[`Frontend Storyshots Modal default 1`] = ` +
              +`; + +exports[`Frontend Storyshots Notification Error 1`] = `undefined`; + +exports[`Frontend Storyshots Notification Info 1`] = `undefined`; + +exports[`Frontend Storyshots Notification Warning 1`] = `undefined`; + +exports[`Frontend Storyshots Pagination default 1`] = ` + +`; + +exports[`Frontend Storyshots Pagination large 1`] = ` + +`; + +exports[`Frontend Storyshots Pagination small 1`] = ` + +`; + +exports[`Frontend Storyshots Panel danger 1`] = ` +
              +
              + Panel header +
              +
              + Panel content +
              +
              +`; + +exports[`Frontend Storyshots Panel default 1`] = ` +
              +
              + Basic panel example +
              +
              +`; + +exports[`Frontend Storyshots Panel info 1`] = ` +
              +
              + Panel header +
              +
              + Panel content +
              +
              +`; + +exports[`Frontend Storyshots Panel primary 1`] = ` +
              +
              + Panel header +
              +
              + Panel content +
              +
              +`; + +exports[`Frontend Storyshots Panel success 1`] = ` +
              +
              + Panel header +
              +
              + Panel content +
              +
              +`; + +exports[`Frontend Storyshots Panel warning 1`] = ` +
              +
              + Panel header +
              +
              + Panel content +
              +
              +`; + +exports[`Frontend Storyshots Panel with heading 1`] = ` +
              +
              + Panel header +
              +
              + Panel content +
              +
              +`; + +exports[`Frontend Storyshots ProgressBar default 1`] = ` + +
              +
              + 60% +
              +
              +
              +
              +
              + +`; + +exports[`Frontend Storyshots ProgressBar stacked 1`] = ` +
              +
              +
              +
              +
              +`; + +exports[`Frontend Storyshots ProgressBar translation states 1`] = ` + + Translated +
              +
              +
              + Approved +
              +
              +
              + Needs Work +
              +
              +
              + Rejected +
              +
              +
              + +`; + +exports[`Frontend Storyshots Sidebar default 1`] = ` +
              +
              +
              +
              +
              + + + ", + } + } + style={ + Object { + "fill": "currentColor", + } + } + /> + + + Zanata Server + + + + + + +
              +

              + This sidebar example has the active tag applied to both the People and Languages pages to provide examples of how this design handles sidebar links. +

              +

              + The sidebar nav has been implemented using   + + react bootstrap components + + . +

              +
              +
              +`; + +exports[`Frontend Storyshots Table default 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
              + # + + First Name + + Last Name + + Username +
              + 1 + + Mark + + Otto + + @mdo +
              + 2 + + Jacob + + Thornton + + @fat +
              + 3 + + Larry the Bird + + @twitter +
              +`; + +exports[`Frontend Storyshots Tabs horizontal 1`] = ` +
              + +
              +
              + Tab 1 content +
              +
              + Tab 2 content +
              +
              + Tab 3 content +
              +
              +
              +`; + +exports[`Frontend Storyshots Tabs vertical 1`] = ` +
              +
              + +
              +
              +
              +
              + Tab 1 content +
              +
              + Tab 2 content +
              +
              +
              +
              +`; + +exports[`Frontend Storyshots TextInput default 1`] = ` + +`; + +exports[`Frontend Storyshots Tooltip default 1`] = ` +
              + + + + +
              +`; + +exports[`Frontend Storyshots Well default 1`] = ` +
              + Look I'm in a well! + + I am a link in a well! + +
              +`; + +exports[`Frontend Storyshots Well large 1`] = ` +
              + Look I'm in a large well! +
              +`; + +exports[`Frontend Storyshots Well with padding 1`] = ` +
              + Look I'm in a small well! +
              +`;