playbook_ui 7.0.0.pre.alpha7 → 7.0.1.pre.alpha3

data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss

@@ -0,0 +1,92 @@
+@import "../../../tokens/colors";
+
+// Only used for our documentation site.
+// Creates color classes for color utilities.
+@mixin doc-color($colors-list) {
+  @each $name, $color in $colors-list {
+    .pb--color_#{$name} {
+      background-color: $color !important;
+    }
+  }
+}
+@include doc-color($colors);
+@include doc-color($interface_colors);
+@include doc-color($main_colors);
+@include doc-color($background_colors);
+@include doc-color($card_colors);
+@include doc-color($active_colors);
+@include doc-color($action_colors);
+@include doc-color($hover_colors);
+@include doc-color($border_colors);
+@include doc-color($shadow_colors);
+@include doc-color($text_colors);
+@include doc-color($data_colors);
+@include doc-color($status_colors);
+@include doc-color($product_colors);
+@include doc-color($category_colors);
+
+.pb--color_bg_gradient {
+  background: $gradient_start;
+  background: -moz-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
+  background: -webkit-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
+  background: linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$gradient_start}', endColorstr='#{$gradient_end}',GradientType=1 );
+}
+
+ul {
+  &.pb--utlities-color {
+    list-style: none;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 5px 0 20px 0;
+    background: white;
+    border-radius: 4px;
+    border: 1px solid $border-light;
+    padding: 10px;
+    flex-wrap: wrap;
+
+    li {
+      border-radius: 4px;
+      margin: 10px 5px;
+      position: relative;
+
+      & > div {
+        width: 80px;
+        height: 80px;
+        border-radius: 40px;
+        margin: 20px 15px 45px;
+        position: relative;
+      }
+      &::before {
+        content: attr(data-name);
+        width: 100%;
+        position: absolute;
+        top: 105px;
+        left: 0;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      &::after {
+        content: attr(data-variable);
+        width: 100%;
+        position: absolute;
+        top: 124px;
+        left: 0;
+        text-align: center;
+        font-size: 12px;
+        opacity: 0.7;
+      }
+
+      &.dark {
+        background: $bg_dark;
+        color: $white;
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss

@@ -0,0 +1,15 @@
+.flex-doc-example {
+  overflow: auto;
+  [class^=pb_flex_kit] {
+    background: #F3F7FB;
+  }
+  .flex-item, [class^=pb_flex_item_kit] {
+    background: #E4E8F0;
+    min-width: 30px;
+    min-height: 30px;
+    color: #242B42;
+  }
+  .tall {
+    min-height: 200px;
+  }
+}

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -0,0 +1,133 @@
+@import "../../../tokens/colors";
+@import "../../../tokens/spacing";
+.pb--doc {
+  margin-bottom: 20px;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px $shadow;
+  background: $white;
+
+  &-demo-row {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin: 50px 0;
+    flex-wrap: wrap;
+
+    & > div {
+      margin: 20px 0;
+    }
+  }
+
+  .pb--close-toggle {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    background: rgba($white, 0.8);
+    padding: 0 10px;
+    border-radius: 2px;
+    height: 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 600;
+    z-index: 100;
+  }
+
+  .pb--kit-example, .pb--kit-example-markdown {
+    &.dark{
+      color: $text_dk_light;
+      a{
+        color: $teal;
+      }
+    }
+    padding: calc(2rem + 4px) 2rem 1rem;
+  }
+
+  .pb--kit-example {
+    position: relative;
+  }
+
+  .pb--codeControls {
+    ul {
+      height: 45px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      list-style: none;
+      margin: 0;
+      padding: 0 20px;
+
+      li {
+        font-size: 12px;
+        margin: 0;
+        padding: 0;
+        position: relative;
+
+        a {
+          color: $primary_action;
+          padding: 0 10px;
+          line-height: 45px;
+          display: inline-block;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          opacity: 0.9;
+          background-color: transparent;
+        }
+
+        &.active {
+          font-weight: 600;
+
+          &::after {
+            background-color: $primary_action;
+            opacity: 0.2;
+          }
+        }
+      }
+    }
+  }
+
+  .pb--codeCopy {
+    background: none;
+    position: relative;
+    display: none;
+    overflow-x: auto;
+    border-radius: 0 0 6px 6px;
+  }
+
+  &.dark_ui {
+    background: none;
+
+    .pb--kit-example {
+      color: $white;
+
+      &::after {
+        background: $border-dark;
+      }
+    }
+    .pb--codeCopy {
+      border-color: $border-dark;
+    }
+    .pb--codeControls {
+      ul {
+        li {
+          a {
+            color: $primary_action;
+          }
+        }
+      }
+    }
+  }
+}
+
+pre.highlight{
+  padding:$space_xl;
+}

data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss

@@ -0,0 +1,15 @@
+@import "../../../tokens/colors";
+
+.pb--kits {
+  .pb--docItem {
+    margin: 0 0 40px 0;
+
+    .pb--docItem-ui {
+      .pb--doc {
+        box-shadow: 0 0 0 transparent;
+        padding: 0;
+        margin: 10px 0;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss

@@ -0,0 +1,88 @@
+@import "../../../pb_title/title_mixin";
+@import "../../../tokens/spacing";
+@import "../../../tokens/colors";
+
+
+.markdown {
+  h1 {
+    @include pb_title_1;
+    margin: 1rem 0;
+  }
+
+  h2 {
+    @include pb_title_2;
+    margin: 1rem 0;
+  }
+
+  h3 {
+    @include pb_title_3;
+    margin: 1rem 0;
+  }
+  h4 {
+    @include pb_title_4;
+    margin: 1rem 0;
+  }
+  h5 {
+    margin: 1rem 0;
+  }
+  h6 {
+    margin: 1rem 0;
+  }
+
+  hr {
+    margin: 2rem 0;
+  }
+  p{
+    margin: 1.5rem 0;
+  }
+  code {
+    background: #122b3b;
+    color: #faf6e4;
+    padding: 0.1rem 0.3rem;
+    margin: 0 5px;
+    box-shadow: 0 2px 10px $shadow;
+    border-radius: 0.25rem;
+    overflow: hidden;
+    font-size: 14px;
+  }
+
+  body {
+    font-size: 1rem;
+  }
+
+  ul, ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  ol {
+    counter-reset: list-counter;
+    li:before {
+      content: counter(list-counter);
+      counter-increment: list-counter;
+      display: block;
+      width: 20px;
+      flex: 0 0 20px;
+      text-align: left;
+      color: $text_lt_default;
+      font-weight: $bold;
+      margin-right: $space-sm;
+    }
+  }
+  li {
+    border-bottom: 1px solid $border_light;
+    padding: $space-sm 0;
+    display: flex;
+    align-items: left;
+    &:last-child {
+      border-bottom: 0;
+      // padding-bottom: 0;
+    }
+  }
+  &.dark {
+    color: $text_dk_light ;
+    h1,h2,h3,h4,h5,h6{
+     color: $text_dk_light; 
+    }
+  }
+}

data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss

@@ -0,0 +1,72 @@
+@import "../../../tokens/colors";
+@import "../../../tokens/spacing";
+
+ul {
+  &.pb--tokens-spacing {
+    list-style: none;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 5px 0 20px 0;
+    background: white;
+    border-radius: 4px;
+    border: 1px solid $border-light;
+    padding: 10px;
+
+    li {
+      border-radius: 4px;
+      margin: 10px 5px;
+      position: relative;
+
+      & > div {
+        width: 80px;
+        height: 80px;
+        margin: 20px 15px 45px;
+        position: relative;
+        border: 1px solid;
+
+        border-color: $royal;
+        align-content: center;
+      }
+      &::before {
+        content: attr(data-name);
+        width: 100%;
+        position: absolute;
+        top: 105px;
+        left: 0;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 600;
+
+      }
+      &::after {
+        content: attr(data-variable);
+        width: 100%;
+        position: absolute;
+        top: 124px;
+        left: 0;
+        text-align: center;
+        font-size: 12px;
+        opacity: 0.7;
+
+      }
+
+      &.dark {
+        background: $bg_dark;
+        color: $white;
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+@each $name, $value in $spaces{
+  div.pb--spacing_#{$name}{
+    width: #{$value};
+    height: 78px;
+    background: $shadow;
+  }
+}

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -7,12 +7,13 @@ import { map } from 'lodash'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
-import { Image } from '../'
+import { Image, OnlineStatus } from '../'
 
 type AvatarProps = {
   aria?: object,
   className?: string,
   data?: object,
+  dark?: boolean,
   id?: string,
   imageUrl: string,
   name: string,
@@ -26,7 +27,7 @@ const firstTwoInitials = (name) =>
     .substring(0, 2)
 
 const Avatar = (props: AvatarProps) => {
-  const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null } = props
+  const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null, dark = false } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(buildCss('pb_avatar_kit', size), className, globalProps(props))
@@ -53,7 +54,11 @@ const Avatar = (props: AvatarProps) => {
         </If>
       </div>
       <If condition={status}>
-        <div className={`pb_online_status_kit_${status} size_${size}`} />
+        <OnlineStatus
+            className={`size_${size}`}
+            dark={dark}
+            status={status}
+        />
       </If>
     </div>
   )