playbook_ui 5.1.0.pre.alpha4 → 5.1.0

data/app/pb_kits/playbook/packs/examples.js

@@ -0,0 +1,174 @@
+// ===========================================
+// Generated file from kit generator.
+//
+// KIT EXAMPLES
+// ===========================================
+
+import WebpackerReact from 'webpacker-react'
+
+//
+// ===========================================
+// ===========================================
+// Generated file from kit generator.
+// KIT EXAMPLES
+
+import '../pb_form/pb_form_validation'
+import * as Avatar from 'pb_avatar/docs'
+import * as AvatarActionButton from 'pb_avatar_action_button/docs'
+import * as Badge from 'pb_badge/docs'
+import * as BarGraph from 'pb_bar_graph/docs'
+import * as Body from 'pb_body/docs'
+import * as Button from 'pb_button/docs'
+import * as Caption from 'pb_caption/docs'
+import * as Card from 'pb_card/docs'
+import * as Checkbox from 'pb_checkbox/docs'
+import * as CircleIconButton from 'pb_circle_icon_button/docs'
+import * as Contact from 'pb_contact/docs'
+import * as Currency from 'pb_currency/docs'
+import * as DashboardValue from 'pb_dashboard_value/docs'
+import * as Date from 'pb_date/docs'
+import * as DateRangeInline from 'pb_date_range_inline/docs'
+import * as DateRangeStacked from 'pb_date_range_stacked/docs'
+import * as DateStacked from 'pb_date_stacked/docs'
+import * as DateTimeStacked from 'pb_date_time_stacked/docs'
+import * as DateYearStacked from 'pb_date_year_stacked/docs'
+import * as DistributionBar from 'pb_distribution_bar/docs'
+import * as FileUpload from 'pb_file_upload/docs'
+import * as Filter from 'pb_filter/docs'
+import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
+import * as Flex from 'pb_flex/docs'
+import * as FormPill from 'pb_form_pill/docs'
+import * as Hashtag from 'pb_hashtag/docs'
+import * as Highlight from 'pb_highlight/docs'
+import * as HomeAddressStreet from 'pb_home_address_street/docs'
+import * as Icon from 'pb_icon/docs'
+import * as IconCircle from 'pb_icon_circle/docs'
+import * as IconValue from 'pb_icon_value/docs'
+import * as Image from 'pb_image/docs'
+import * as Installer from 'pb_installer/docs'
+import * as LabelPill from 'pb_label_pill/docs'
+import * as LabelValue from 'pb_label_value/docs'
+import * as Layout from 'pb_layout/docs'
+import * as Legend from 'pb_legend/docs'
+import * as LineGraph from 'pb_line_graph/docs'
+import * as List from 'pb_list/docs'
+import * as LoadingInline from 'pb_loading_inline/docs'
+import * as Logistic from 'pb_logistic/docs'
+import * as Message from 'pb_message/docs'
+import * as MultipleUsers from 'pb_multiple_users/docs'
+import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
+import * as Nav from 'pb_nav/docs'
+import * as OnlineStatus from 'pb_online_status/docs'
+import * as PbReactPopover from 'pb_popover/docs'
+import * as Person from 'pb_person/docs'
+import * as PersonContact from 'pb_person_contact/docs'
+import * as Pill from 'pb_pill/docs'
+import * as ProgressPills from 'pb_progress_pills/docs'
+import * as ProgressSimple from 'pb_progress_simple/docs'
+import * as ProgressStep from 'pb_progress_step/docs'
+import * as Radio from 'pb_radio/docs'
+import * as SectionSeparator from 'pb_section_separator/docs'
+import * as Select from 'pb_select/docs'
+import * as SelectableCard from 'pb_selectable_card/docs'
+import * as SelectableCardIcon from 'pb_selectable_card_icon/docs'
+import * as SelectableIcon from 'pb_selectable_icon/docs'
+import * as Source from 'pb_source/docs'
+import * as StarRating from 'pb_star_rating/docs'
+import * as StatChange from 'pb_stat_change/docs'
+import * as StatValue from 'pb_stat_value/docs'
+import * as Table from 'pb_table/docs'
+import * as Textarea from 'pb_textarea/docs'
+import * as TextInput from 'pb_text_input/docs'
+import * as Time from 'pb_time/docs'
+import * as Timeline from 'pb_timeline/docs'
+import * as TimeStacked from 'pb_time_stacked/docs'
+import * as Timestamp from 'pb_timestamp/docs'
+import * as TimeRangeInline from 'pb_time_range_inline/docs'
+import * as Title from 'pb_title/docs'
+import * as TitleCount from 'pb_title_count/docs'
+import * as TitleDetail from 'pb_title_detail/docs'
+import * as Toggle from 'pb_toggle/docs'
+import * as User from 'pb_user/docs'
+import * as UserBadge from 'pb_user_badge/docs'
+import * as WeekdayStacked from 'pb_weekday_stacked/docs'
+
+WebpackerReact.setup({
+  ...Avatar,
+  ...AvatarActionButton,
+  ...Badge,
+  ...BarGraph,
+  ...Body,
+  ...Button,
+  ...Caption,
+  ...Card,
+  ...Checkbox,
+  ...CircleIconButton,
+  ...Contact,
+  ...Currency,
+  ...DashboardValue,
+  ...Date,
+  ...DateRangeInline,
+  ...DateRangeStacked,
+  ...DateStacked,
+  ...DateTimeStacked,
+  ...DateYearStacked,
+  ...DistributionBar,
+  ...FileUpload,
+  ...Filter,
+  ...FixedConfirmationToast,
+  ...Flex,
+  ...FormPill,
+  ...Hashtag,
+  ...Highlight,
+  ...HomeAddressStreet,
+  ...Icon,
+  ...IconCircle,
+  ...IconValue,
+  ...Image,
+  ...Installer,
+  ...LabelPill,
+  ...LabelValue,
+  ...Layout,
+  ...Legend,
+  ...LineGraph,
+  ...List,
+  ...LoadingInline,
+  ...Logistic,
+  ...Message,
+  ...MultipleUsers,
+  ...MultipleUsersStacked,
+  ...Nav,
+  ...OnlineStatus,
+  ...PbReactPopover,
+  ...Person,
+  ...PersonContact,
+  ...Pill,
+  ...ProgressPills,
+  ...ProgressSimple,
+  ...ProgressStep,
+  ...Radio,
+  ...SectionSeparator,
+  ...Select,
+  ...SelectableCard,
+  ...SelectableIcon,
+  ...SelectableCardIcon,
+  ...Source,
+  ...StarRating,
+  ...StatChange,
+  ...StatValue,
+  ...Table,
+  ...Textarea,
+  ...TextInput,
+  ...Time,
+  ...Timeline,
+  ...TimeStacked,
+  ...Timestamp,
+  ...TimeRangeInline,
+  ...Title,
+  ...TitleCount,
+  ...TitleDetail,
+  ...Toggle,
+  ...User,
+  ...UserBadge,
+  ...WeekdayStacked,
+})

data/app/pb_kits/playbook/packs/main.scss

@@ -0,0 +1,12 @@
+// SCAFFOLD
+@import "site_styles/scaffold";
+
+// KITS
+@import "../playbook";
+
+// APP STYLES
+@import "site_styles/site-style";
+@import "site_styles/docs/all";
+
+// FULL PAGE EXAMPLE STYLES
+@import "site_styles/samples";

data/app/pb_kits/playbook/packs/samples.js

@@ -0,0 +1,19 @@
+// ===========================================
+// Generated file from kit generator.
+//
+// ===========================================
+
+import WebpackerReact from 'webpacker-react'
+
+//
+// ===========================================
+// ===========================================
+// Generated file from kit generator.
+
+import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
+import FilterTable from '../../../views/playbook/samples/filter_table/index.jsx'
+import Registration from '../../../views/playbook/samples/registration/index.jsx'
+
+WebpackerReact.setup({ Dashboards })
+WebpackerReact.setup({ FilterTable })
+WebpackerReact.setup({ Registration })

data/app/pb_kits/playbook/packs/site_styles/_samples.scss

@@ -0,0 +1,72 @@
+.sample-layout {
+  overflow-y: hidden;
+  .sample {
+    padding-left: 50px;
+    border-bottom: 0px;
+  }
+  .code-controls {
+    .pb_nav_list_item_text {
+      color: white !important;
+    }
+    .pb_nav_list_kit_item {
+      .pb_nav_list_item_link {
+        border-color: transparent !important;
+      }
+    }
+  }
+
+  .sample-nav {
+    padding: 0 25px;
+    background: #172257;
+    display: flex;
+    width: 100%;
+    flex-basis: 200px;
+
+  }
+
+  .sample-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-right {
+      margin-left: auto;
+      order: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .items {
+        padding: 5px;
+      }
+    }
+  }
+  .pb--doc {
+    margin-bottom: 0px;
+  }
+  .pb--codeCopy {
+    border: 0px;
+    position: fixed;
+    width: 100%;
+    height: calc(50vh - 45px);
+    bottom: 0;
+    left: 0;
+    transition: all .4s;
+    border-radius: 0 0 6px 6px;
+  }
+
+  .pb--codeCopy.close {
+    top: 100%;
+    height: 0px;
+    transition: all .4s;
+  }
+  .compress {
+    position: absolute;
+    top: 15px;
+    right: 30px;
+    display: none;
+    z-index: 4;
+  }
+  .hiddenCodeforCopy {
+    display: none;
+  }
+}

data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss

@@ -0,0 +1,43 @@
+@import "../../tokens/fonts";
+@import "../../tokens/typography";
+@import "../../tokens/colors";
+@import "../../utilities/colors";
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  &:before,
+  &:after {
+    box-sizing: border-box;
+  }
+}
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+}
+
+body {
+  font-family: $font_family_base;
+  font-size: $font_base;
+  line-height: 1.5;
+  background-color: $bg-light;
+  height: 100%;
+  letter-spacing: $lspace_normal;
+  font-weight: $regular;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: $charcoal;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; // REMOVE AFTER STYLED
+}
+
+a {
+  text-decoration: none;
+  color: $primary;
+}

data/app/pb_kits/playbook/packs/site_styles/_site-style.scss

@@ -0,0 +1,135 @@
+@import "../../tokens/colors";
+@import "../../tokens/spacing";
+@import "../../tokens/screen_sizes";
+@import "../../tokens/border_radius";
+@import "../../tokens/shadows";
+
+$selector: ".pb--page";
+
+body {
+  overflow-x: hidden;
+}
+
+.pb--page {
+  &--topNav {
+    flex: 0 0;
+    border-bottom: 1px solid $border_light;
+    padding: 20px 30px;
+    background: $white;
+    h1 {
+      display: flex;
+      align-items: center;
+      img {
+        display: flex;
+      }
+    }
+  }
+  &--content {
+    min-height: calc(100vh - 89px);
+    @include break_at(breakpoint("lg")) {
+      grid-template-columns: auto auto !important;
+    }
+    &--main {
+      flex-grow: 1;
+      padding: 40px 60px;
+      height: calc(100vh - 89px);
+      overflow: auto;
+      @include break_at(breakpoint("lg")) {
+        padding: $space-lg $space-xl;
+      }
+    }
+  }
+  &--hamburger, &--checkbox {
+    position: absolute;
+    right: $space-xl;
+    top: 30px;
+    display: none;
+    font-size: $space-xl;
+    width: 30px;
+    height: 30px;
+    color: $primary;
+    cursor: pointer;
+    @include break_at(breakpoint("lg")) {
+      display: block;
+    }
+  }
+  &--checkbox {
+    opacity: 0;
+     ~ #{$selector}--sideNav {
+      @include break_at(breakpoint("lg")) {
+        position: absolute;
+        transform-origin: 0% 0%;
+        transform: translate(100%, 0);
+        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+        border-radius: $border_rad_heavier;
+        box-shadow: $shadow_deepest;
+        top: 100px;
+        right: 0;
+        width: auto !important;
+        padding: $space-xl;
+        z-index: 1000;
+      }
+    }
+    &:checked ~ #{$selector}--sideNav {
+      @include break_at(breakpoint("lg")) {
+        transform: translate(-10%, 0);
+      }
+    }
+  }
+
+  &--sideNav {
+    height: calc(100vh - 89px);
+    overflow: auto;
+    .category_section {
+      &.active {
+        padding: $space_xs 0;
+        background: $bg_light;
+      }
+      .sub_category {
+        padding-left: $space_md;
+      }
+    }
+  }
+}
+
+// Nav Tabs switch between Rails and React
+.pb--kit-type-nav {
+  margin: 20px 0 30px;
+  line-height: 34px;
+  border-bottom: 2px solid rgba($border_light, 0.6);
+
+  &.sample {
+    margin: 0;
+    border-bottom: 2px solid rgba(228, 232, 240, 0.6);
+    background: rgb(23, 34, 87) !important;
+  }
+
+  a {
+    padding: 0 10px;
+    line-height: 34px;
+    font-size: 14px;
+    font-weight: 400;
+    display: inline-block;
+    position: relative;
+
+    &::after {
+      content: "";
+      width: 100%;
+      height: 3px;
+      background: transparent;
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      border-radius: 1px;
+      transition: all 0.2s ease;
+    }
+
+    &.active {
+      font-weight: 600;
+
+      &::after {
+        background: $primary;
+      }
+    }
+  }
+}