add 'full-width' class on Flex-Layout

package.json

@@ -46,7 +46,6 @@
     "watch": "webpack --watch",
     "serve": "webpack serve",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "build-storybook": "build-storybook"
-    "publish": "yarn publish"
   }
 }

src/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin shadow($i) {
+	//box-shadow: 0 #{$i*1.25}px #{$i*1.2}px #{$i*0.2}px $default-shadow-color;
+	box-shadow: 0 #{$i}px #{$i}px 0 rgba(0, 0, 0, 0.14),
+		0 #{$i * 1.5}px #{$i/2}px -#{$i}px rgba(0, 0, 0, 0.2),
+		0 #{$i/2}px #{$i * 2.5}px 0 rgba(0, 0, 0, 0.12);
+}

src/_utils.scss

@@ -0,0 +1,24 @@
+.text-left {
+	text-align: left;
+	text-align: start;
+}
+.text-right {
+	text-align: right;
+	text-align: end;
+}
+.text-center {
+	text-align: center;
+}
+.text-justify {
+	text-align: justify;
+}
+
+.hidden {
+	display: none !important;
+}
+
+@for $i from 1 through 12 {
+	.shadow-#{$i} {
+		@include shadow($i);
+	}
+}

src/button.ts

@@ -9,7 +9,8 @@ import {Variables, Colors} from './variables';
 @customElement('persona-button')
 export class Button extends LitElement {
 
-  static styles = css `
+  static styles = [
+      css `
     :host {
 
     }
@@ -36,7 +37,7 @@ export class Button extends LitElement {
     button.raised{
 
     }
-  `;
+  `];
 
   @property({type:Boolean})
   primary? = false;

src/flowlayout.stories.ts

@@ -1,5 +1,6 @@
 import { Story, Meta } from '@storybook/web-components';
 import {LitElement, html, css,} from 'lit';
+import {classMap} from 'lit/directives/class-map.js';
 
 import './flowlayout';
 
@@ -7,14 +8,14 @@ export default {
   title: 'Persona/FlowLayout',
   component: 'persona-flow-layout',
   argTypes: {
-    //heading: { control: 'text',
+    fullWidth: {control: 'boolean',
-    //description: 'Title of the page.' },
+      description: "add a 'full-width' class."}
   },
 } as Meta;
 
 
-const Template:Story = () => html`
+const Template:Story = ({fullWidth}) => html`
-<persona-flow-layout>
+<persona-flow-layout class=${classMap({'full-width':fullWidth})}>
   <div style="background-color:red">1</div>
   <div data-width="2" style="background-color:green">2</div>
   <div style="background-color:blue">1</div>
@@ -25,6 +26,8 @@ const Template:Story = () => html`
 
 export const Basic = Template.bind({});
 Basic.args = {
-  //heading: 'AppBar Title',
 };
-
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+  fullWidth: true
+};

src/flowlayout.ts

@@ -1,5 +1,7 @@
 import {LitElement, html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+
 import {Variables} from './variables';
 
 
@@ -8,7 +10,9 @@ import {Variables} from './variables';
  */
 @customElement('persona-flow-layout')
 export class FlowLayout extends LitElement {
-    
+    @property({type:Boolean})
+    fullWidth? = false;
+
     static styles = css`
     :host{
         margin:0 auto; padding:0 24px; border:0;
@@ -16,6 +20,11 @@ export class FlowLayout extends LitElement {
         display: flex;
         flex-flow: row;
         flex-wrap: wrap;
+        max-width: ${Variables.breakPointDesktop}px
+    }
+    :host(.full-width){
+        padding:0;
+        max-width:inherit;
     }
     ::slotted(*){
         width: 100%;

src/index.scss

@@ -23,3 +23,6 @@ p {
 h1 {
 	color: yellow !important;
 }
+
+@import "./mixins";
+@import "./utils";

src/variables.ts

@@ -5,6 +5,7 @@ export const Variables = {
     navWidth: 240,
     breakPointMobile: 600,
     breakPointTablet: 950,
+    breakPointDesktop: 1024
 };
 
 export const Colors = {