openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js

   1 import React from 'react';
   2 import {storiesOf} from '@kadira/storybook';
   3 import {withKnobs} from '@kadira/storybook-addon-knobs';
   4
   5 import GridSection from 'nfvo-components/grid/GridSection.jsx';
   6 import GridItem from 'nfvo-components/grid/GridItem.jsx';
   7
   8
   9 const stories = storiesOf('GridColumns', module);
  10 stories.addDecorator(withKnobs);
  11
  12 var divStyle = {
  13         'border-style': 'solid',
  14         'border-size': 1
  15 };
  16
  17 const myDiv =  (<div style={divStyle}>Text Text Text</div>);
  18
  19 stories
  20         .add('Grid Options', () => (
  21                 <div>
  22                         <GridSection title='No last column set on item'>
  23                                 <GridItem colSpan={2}>
  24                                         {myDiv}
  25                                 </GridItem>
  26                                 <GridItem colSpan={2}>
  27                                         {myDiv}
  28                                 </GridItem>
  29                         </GridSection>
  30
  31                         <GridSection hasLastColSet={true} title='With last column set on item and gridsection'>
  32                                 <GridItem colSpan={2}>
  33                                         {myDiv}
  34                                 </GridItem>
  35                                 <GridItem colSpan={2} lastColInRow={true}>
  36                                         {myDiv}
  37                                 </GridItem>
  38                         </GridSection>
  39
  40                         <GridSection title='With last column set on item and NOT on gridsection'>
  41                                 <GridItem colSpan={2}>
  42                                         {myDiv}
  43                                 </GridItem>
  44                                 <GridItem colSpan={2} lastColInRow={true}>
  45                                         {myDiv}
  46                                 </GridItem>
  47                         </GridSection>
  48
  49                 </div>
  50         ))
  51         .add('Last Column', () => (
  52
  53                 <div>
  54                         <GridSection hasLastColSet={true} title='Testing different configurations with all settings'>
  55                                 <GridItem colSpan={2}>
  56                                         {myDiv}
  57                                 </GridItem>
  58                                 <GridItem colSpan={2} lastColInRow={true}>
  59                                         {myDiv}
  60                                 </GridItem>
  61                         </GridSection>
  62                         <GridSection hasLastColSet={true}>
  63                                 <GridItem colSpan={1}>
  64                                         {myDiv}
  65                                 </GridItem>
  66                                 <GridItem colSpan={1}>
  67                                         {myDiv}
  68                                 </GridItem>
  69                                 <GridItem colSpan={1}>
  70                                         {myDiv}
  71                                 </GridItem>
  72                                 <GridItem colSpan={1} lastColInRow={true}>
  73                                         {myDiv}
  74                                 </GridItem>
  75                         </GridSection>
  76                         <GridSection hasLastColSet={true}>
  77                                 <GridItem colSpan={1}>
  78                                         {myDiv}
  79                                 </GridItem>
  80                                 <GridItem colSpan={1}>
  81                                         {myDiv}
  82                                 </GridItem>
  83                                 <GridItem colSpan={2} lastColInRow={true}>
  84                                         {myDiv}
  85                                 </GridItem>
  86                         </GridSection>
  87                         <GridSection hasLastColSet={true}>
  88                                 <GridItem colSpan={2}>
  89                                         {myDiv}
  90                                 </GridItem>
  91                                 <GridItem colSpan={1}>
  92                                         {myDiv}
  93                                 </GridItem>
  94                                 <GridItem colSpan={1} lastColInRow={true}>
  95                                         {myDiv}
  96                                 </GridItem>
  97                         </GridSection>
  98                         <GridSection hasLastColSet={true}>
  99                                 <GridItem colSpan={4} lastColInRow={true}>
 100                                         {myDiv}
 101                                 </GridItem>
 102                         </GridSection>
 103                         <GridSection hasLastColSet={true}>
 104                                 <GridItem colSpan={3}>
 105                                         {myDiv}
 106                                 </GridItem>
 107                                 <GridItem colSpan={1} lastColInRow={true}>
 108                                         {myDiv}
 109                                 </GridItem>
 110                         </GridSection>
 111                         <GridSection hasLastColSet={true}>
 112                                 <GridItem colSpan={1}>
 113                                         {myDiv}
 114                                 </GridItem>
 115                                 <GridItem colSpan={3} lastColInRow={true}>
 116                                         {myDiv}
 117                                 </GridItem>
 118                         </GridSection>
 119                 </div>
 120         ))
 121         .add('No Last Column', () => (
 122                 <div>
 123                         <GridSection title='Testing different configurations'>
 124                                 <GridItem colSpan={2}>
 125                                         {myDiv}
 126                                 </GridItem>
 127                                 <GridItem colSpan={2}>
 128                                         {myDiv}
 129                                 </GridItem>
 130                         </GridSection>
 131                         <GridSection>
 132                                 <GridItem colSpan={1}>
 133                                         {myDiv}
 134                                 </GridItem>
 135                                 <GridItem colSpan={1}>
 136                                         {myDiv}
 137                                 </GridItem>
 138                                 <GridItem colSpan={1}>
 139                                         {myDiv}
 140                                 </GridItem>
 141                                 <GridItem colSpan={1}>
 142                                         {myDiv}
 143                                 </GridItem>
 144                         </GridSection>
 145                         <GridSection>
 146                                 <GridItem colSpan={1}>
 147                                         {myDiv}
 148                                 </GridItem>
 149                                 <GridItem colSpan={1}>
 150                                         {myDiv}
 151                                 </GridItem>
 152                                 <GridItem colSpan={2}>
 153                                         {myDiv}
 154                                 </GridItem>
 155                         </GridSection>
 156                         <GridSection>
 157                                 <GridItem colSpan={2}>
 158                                         {myDiv}
 159                                 </GridItem>
 160                                 <GridItem colSpan={1}>
 161                                         {myDiv}
 162                                 </GridItem>
 163                                 <GridItem colSpan={1}>
 164                                         {myDiv}
 165                                 </GridItem>
 166                         </GridSection>
 167                         <GridSection>
 168                                 <GridItem colSpan={4}>
 169                                         {myDiv}
 170                                 </GridItem>
 171                         </GridSection>
 172                         <GridSection>
 173                                 <GridItem colSpan={3}>
 174                                         {myDiv}
 175                                 </GridItem>
 176                                 <GridItem colSpan={1}>
 177                                         {myDiv}
 178                                 </GridItem>
 179                         </GridSection>
 180                         <GridSection>
 181                                 <GridItem colSpan={1}>
 182                                         {myDiv}
 183                                 </GridItem>
 184                                 <GridItem colSpan={3}>
 185                                         {myDiv}
 186                                 </GridItem>
 187                         </GridSection>
 188                 </div>
 189         ))      .add('Test LKG form', () => (
 190         <div>
 191                 <GridSection title='Testing VLM LKG configurations'>
 192                         <GridItem colSpan={2}>
 193                                 {myDiv}
 194                         </GridItem>
 195                         <GridItem colSpan={2} lastColInRow={true}>
 196                                 {myDiv}
 197                         </GridItem>
 198                         <GridItem colSpan={2}>
 199                                 {myDiv}
 200                         </GridItem>
 201                         <GridItem colSpan={2} lastColInRow={true}>
 202                                 {myDiv}
 203                         </GridItem>
 204                         <GridItem colSpan={1}>
 205                                 {myDiv}
 206                         </GridItem>
 207                         <GridItem colSpan={1}>
 208                                 {myDiv}
 209                         </GridItem>
 210                         <GridItem colSpan={1}>
 211                                 {myDiv}
 212                         </GridItem>
 213                         <GridItem colSpan={1} lastColInRow={true}>
 214                                 {myDiv}
 215                         </GridItem>
 216                         <GridItem colSpan={2}>
 217                                 <div style={divStyle}>1</div>
 218                         </GridItem>
 219                 </GridSection>
 220         </div>
 221 ));