playbook_ui 11.4.0.pre.alpha.rubytheme2 → 11.4.0

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -12,70 +12,57 @@ const useDialog = (visible = false) => {
 }
 
 const DialogStatus = () => {
-  const [defaultAlertOpened, toggleDefaultAlert] = useDialog()
-  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
-  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
   const [infoAlertOpened, toggleInfoAlert] = useDialog()
+  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
   const [successAlertOpened, toggleSuccessAlert] = useDialog()
   const [errorAlertOpened, toggleErrorAlert] = useDialog()
+  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
 
   const dialogs = [
     {
-      size: "status_size",
-      status: "default",
+      status: "info",
       text: "Text explaining why there is an alert",
-      title: "Are you sure?",
-      toggle: toggleDefaultAlert,
-      visible: defaultAlertOpened,
-      buttonOneText:"Yes, Action",
-      buttonTwoText: "No, Cancel"
+      title: "Are you Sure?",
+      toggle: toggleInfoAlert,
+      visible: infoAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Yes, Action"
     },
     {
-      size: "status_size",
       status: "caution",
       text: "This is the action you will be taking",
-      title: "Are you sure?",
+      title: "Are you Sure?",
       toggle: toggleCautionAlert,
       visible: cautionAlertOpened,
-      buttonOneText:"Yes, Action",
-      buttonTwoText: "No, Cancel"
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Yes, Action"
     },
     {
-      size: "status_size",
       status: "delete",
       text: "You are about to delete ...",
       title: "Delete",
       toggle: toggleDeleteAlert,
       visible: deleteAlertOpened,
-      buttonOneText:"Yes, Delete",
-      buttonTwoText: "No, Cancel"
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Yes, Delete"
     },
     {
-      size: "sm",
-      status: "info",
-      text: "Text explaining why there is an alert",
-      title: "Information",
-      toggle: toggleInfoAlert,
-      visible: infoAlertOpened,
-      buttonOneText:"Ok, Thanks!",
+      status: "error",
+      text: "Text explaining the error",
+      title: "Error Message",
+      toggle: toggleErrorAlert,
+      visible: errorAlertOpened,
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Ok, Thanks"
     },
     {
-      size: "sm",
       status: "success",
       text: "Text explaining what is successful",
       title: "Success!",
       toggle: toggleSuccessAlert,
       visible: successAlertOpened,
-      buttonOneText: "Great!",
-    },
-    {
-      size: "sm",
-      status: "error",
-      text: "Text explaining the error",
-      title: "Error Message",
-      toggle: toggleErrorAlert,
-      visible: errorAlertOpened,
-      buttonOneText:"Oh no!",
+      buttonOneText:"No, Cancel",
+      buttonTwoText: "Ok, Thanks"
     },
   ]
 
@@ -84,9 +71,9 @@ const DialogStatus = () => {
       <Flex>
         <Button
             marginRight="md"
-            onClick={toggleDefaultAlert}
+            onClick={toggleInfoAlert}
         >
-          {"Default Status"}
+          {"Information Status"}
         </Button>
         <Button
             marginRight="md"
@@ -94,29 +81,20 @@ const DialogStatus = () => {
         >
           {"Caution Status"}
         </Button>
-        <Button
-            marginRight="md"
-            onClick={toggleDeleteAlert}
-        >
-          {"Delete Status"}
-        </Button>
-        <Button
-            marginRight="md"
-            onClick={toggleInfoAlert}
-        >
-          {"Information Status"}
-        </Button>
         <Button
             marginRight="md"
             onClick={toggleSuccessAlert}
         >
           {"Success Status"}
         </Button>
-        <Button 
+        <Button onClick={toggleErrorAlert}>
+          {"Error Status"}
+        </Button>
+        <Button
             marginRight="md"
-            onClick={toggleErrorAlert}
+            onClick={toggleDeleteAlert}
         >
-          {"Error Status"}
+          {"Delete Status"}
         </Button>
       </Flex>
       <Flex>
@@ -125,37 +103,22 @@ const DialogStatus = () => {
               key={dialog.status}
               onClose={dialog.toggle}
               opened={dialog.visible}
-              size={dialog.size}
               status={dialog.status}
               text={dialog.text}
               title={dialog.title}
           >
-          <Dialog.Footer
-              paddingBottom="md"
-              paddingX="md"
-          >
-            <If condition={!dialog.buttonTwoText}>
-              <Button
-                  fullWidth
-                  onClick={dialog.toggle}
-              >
-              {dialog.buttonOneText}
-              </Button>
-            </If>
-            <If condition={dialog.buttonTwoText}>
-              <Button
-                  onClick={dialog.toggle}
-                  paddingRight="xl"
-              >
-              {dialog.buttonOneText}
-              </Button>
-              <Button
-                  onClick={dialog.toggle}
-                  variant="secondary"
-              >
-              {dialog.buttonTwoText}
-              </Button>
-            </If>
+          <Dialog.Footer>
+            <Button
+                onClick={dialog.toggle}
+                variant="secondary"
+            >
+            {dialog.buttonOneText}
+            </Button>
+            <Button
+                onClick={dialog.toggle}
+            >
+            {dialog.buttonTwoText}
+            </Button>
           </Dialog.Footer>
           </Dialog>
         ))}

data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-target-blank */
 /* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
@@ -15,8 +14,6 @@ type HashtagProps = {
   dark?: boolean,
   data?: string,
   id?: string,
-  newWindow?: boolean,
-  rel?: string,
   text?: string,
   type: "default" | "home" | "project" | "appointment",
   url?: string,
@@ -36,8 +33,6 @@ const Hashtag = (props: HashtagProps) => {
     dark = false,
     data = {},
     id,
-    newWindow,
-    rel,
     text,
     type = 'default',
     url,
@@ -54,11 +49,7 @@ const Hashtag = (props: HashtagProps) => {
         className={classes}
         id={id}
     >
-      <a
-          href={url}
-          rel={(newWindow ? "noreferrer" : rel)}
-          target={(newWindow ? '_blank' : '_self')}
-      >
+      <a href={url}>
         <Badge
             dark={dark}
             text={typeMap[type] + text}

data/app/pb_kits/playbook/pb_hashtag/docs/example.yml

@@ -2,8 +2,6 @@ examples:
 
   rails:
   - hashtag_default: Hashtag Types
-  - hashtag_link: Hashtag Links
 
   react:
   - hashtag_default: Hashtag Types
-  - hashtag_link: Hashtag Links

data/app/pb_kits/playbook/pb_hashtag/docs/index.js

@@ -1,2 +1 @@
 export { default as HashtagDefault } from './_hashtag_default.jsx'
-export { default as HashtagLink } from './_hashtag_link.jsx'

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -3,7 +3,7 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-  <%= link_to object.url, target: object.link_option do %>
+  <%= link_to object.url do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -3,8 +3,6 @@
 module Playbook
   module PbHashtag
     class Hashtag < Playbook::KitBase
-      prop :new_window, type: Playbook::Props::Boolean,
-                        default: false
       prop :text
       prop :type, type: Playbook::Props::Enum,
                   values: %w[default project home appointment],
@@ -19,10 +17,6 @@ module Playbook
         type_text + text
       end
 
-      def link_option
-        new_window ? "_blank" : "_self"
-      end
-
     private
 
       def type_text

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -20,7 +20,6 @@ type HomeAddressStreetProps = {
   homeId: number,
   houseStyle: string,
   homeUrl: string,
-  newWindow: Boolean,
   state: string,
   zipcode: string,
   territory: string,
@@ -36,7 +35,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
     emphasis = 'street',
     homeId,
     homeUrl,
-    newWindow,
     houseStyle,
     state,
     zipcode,
@@ -108,7 +106,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
         <Hashtag
             classname="home-hashtag"
             dark={dark}
-            newWindow={newWindow}
             text={homeId}
             type="home"
             url={homeUrl || '#'}

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb

@@ -32,8 +32,7 @@
     url: object.home_url || "#",
     type: "home",
     dark: object.dark,
-    classname: "home-hashtag",
-    new_window: object.new_window}) %>
+    classname: "home-hashtag"}) %>
 <% end %>
 
 <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb

@@ -8,8 +8,6 @@ module Playbook
       prop :city_state
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
-      prop :new_window, type: Playbook::Props::Boolean,
-                        default: false
       prop :territory
       prop :zip
       prop :dark, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml

@@ -4,11 +4,8 @@ examples:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
-  - home_address_street_link: Link
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
-  - home_address_street_link: Link
-

data/app/pb_kits/playbook/pb_home_address_street/docs/index.js

@@ -1,4 +1,3 @@
 export { default as HomeAddressStreetDefault } from './_home_address_street_default.jsx'
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
-export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -12,8 +12,6 @@ module Playbook
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
       prop :house_style
-      prop :new_window, type: Playbook::Props::Boolean,
-                        default: false
       prop :state
       prop :zipcode
       prop :territory
@@ -55,7 +53,6 @@ module Playbook
           dark: dark,
           home_id: home_id,
           home_url: home_url,
-          new_window: new_window,
           territory: territory,
           zip: zip,
         }
@@ -69,7 +66,6 @@ module Playbook
           dark: dark,
           home_id: home_id,
           home_url: home_url,
-          new_window: new_window,
           territory: territory,
         }
       end

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb

@@ -22,8 +22,7 @@
     url: object.home_url || "#",
     type: "home",
     dark: object.dark,
-    classname: "home-hashtag",
-    new_window: object.new_window}) %>
+    classname: "home-hashtag"}) %>
 <% end %>
 
 <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb

@@ -8,11 +8,8 @@ module Playbook
       prop :city_state_zip
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
-      prop :new_window, type: Playbook::Props::Boolean,
-                        default: false
       prop :territory
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
+      prop :dark, type: Playbook::Props::Boolean, default: false
     end
   end
 end

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames";
 
 import DateTime from "../pb_kit/dateTime";
 import { buildCss } from "../utilities/props";
-import { globalProps, GlobalProps } from "../utilities/globalProps";
+import { globalProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -20,7 +20,7 @@ type TimeProps = {
   size?: "md" | "sm";
   showTimezone?: boolean;
   timeZone?: string;
-} & GlobalProps
+};
 
 const Time = (props: TimeProps) => {
   const {

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -5,15 +5,15 @@ Base colors should not be documented.
 Only document color use.
 
 Colors -----------------------------*/
-$royal:               #0056CF !default;
-$purple:              #9E64E9 !default;
-$teal:                #00C4D7 !default;
-$red:                 #FF2229 !default;
-$red_dark:            #ff4a50 !default;
-$yellow:              #F9BB00 !default;
-$green:               #00CA74 !default;
-$orange:              #FD804C !default;
-$default:             #93a8b8 !default;
+$royal:               #0056CF;
+$purple:              #9E64E9;
+$teal:                #00C4D7;
+$red:                 #FF2229;
+$red_dark:            #ff4a50;
+$yellow:              #F9BB00;
+$green:               #00CA74;
+$orange:              #FD804C;
+$default:             #93a8b8;
 $colors: (
   royal:              $royal,
   purple:             $purple,
@@ -26,15 +26,15 @@ $colors: (
 );
 
 /* Specialty Gradient -----------------*/
-$gradient_start:      #1C75F2 !default;
-$gradient_end:        $royal !default;
+$gradient_start:      #1C75F2;
+$gradient_end:        $royal;
 
 /* Interface colors -------------------*/
-$white:               #FFFFFF !default;
-$silver:              #F3F7FB !default;
-$slate:               #C1CDD6 !default;
-$charcoal:            #242B42 !default;
-$black:               #000000 !default;
+$white:               #FFFFFF;
+$silver:              #F3F7FB;
+$slate:               #C1CDD6;
+$charcoal:            #242B42;
+$black:               #000000;
 
 $interface_colors: (
   white:              $white,
@@ -46,9 +46,9 @@ $interface_colors: (
 );
 
 /* Main colors ------------------------*/
-$primary:             $royal !default;
-$secondary:           $yellow !default;
-$tertiary:            $purple !default;
+$primary:             $royal;
+$secondary:           $yellow;
+$tertiary:            $purple;
 $main_colors: (
   primary:            $primary,
   secondary:          $secondary,
@@ -57,29 +57,29 @@ $main_colors: (
 /*=====================================
 
 Background colors ------------------*/
-$bg_light:            $silver !default;
-$bg_dark:             #0a0527 !default;
+$bg_light:            $silver;
+$bg_dark:             #0a0527;
 $background_colors: (
   bg_light:           $bg_light,
   bg_dark:            $bg_dark
 );
 
 /* Card colors ------------------*/
-$card_light:          $white !default;
+$card_light:          $white;
 $card_dark:           rgba($white, $opacity_1);
 $card_colors: (
   card_light:         $card_light,
   card_dark:          $card_dark
 );
 
-$primary-action:      $primary !default;
+$primary-action:      $primary;
 $action_colors: (
   primary_action:            $primary-action
 );
 
 /* Active colors ----------------------*/
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #0082ff !default;
+$active_dark:         #0082ff;
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
@@ -102,7 +102,7 @@ $focus_input_colors: (
 );
 
 /* Border colors ----------------------*/
-$border_light:        #E4E8F0 !default;
+$border_light:        #E4E8F0;
 $border_dark:         rgba($white, $opacity_1);
 $border_colors: (
   border_light:       $border_light,
@@ -116,10 +116,10 @@ $shadow_colors: (
 );
 
 /* Text colors ------------------------*/
-$text_lt_default:     $charcoal !default;
-$text_lt_light:       #687887 !default;
-$text_lt_lighter:     $slate !default;
-$text_dk_default:     $white !default;
+$text_lt_default:     $charcoal;
+$text_lt_light:       #687887;
+$text_lt_lighter:     $slate;
+$text_dk_default:     $white;
 $text_dk_light:       rgba($white, $opacity_6);
 $text_dk_lighter:     rgba($white, $opacity_4);
 $text_colors: (
@@ -132,14 +132,14 @@ $text_colors: (
 );
 
 /* Data colors ------------------------*/
-$data_1:              $royal !default;
-$data_2:              $yellow !default;
-$data_3:              $purple !default;
-$data_4:              $green !default;
-$data_5:              $orange !default;
-$data_6:              #144075 !default;
-$data_7:              $teal !default;
-$data_8:              $red !default;
+$data_1:              $royal;
+$data_2:              $yellow;
+$data_3:              $purple;
+$data_4:              $green;
+$data_5:              $orange;
+$data_6:              #144075;
+$data_7:              $teal;
+$data_8:              $red;
 $data_colors: (
   data_1:             $data_1,
   data_2:             $data_2,
@@ -152,19 +152,19 @@ $data_colors: (
 );
 
 /* Status colors ----------------------*/
-$success:             $green !default;
+$success:             $green;
 $success_secondary:   lighten($success, 10%);
-$warning:             $yellow !default;
+$warning:             $yellow;
 $warning_secondary:   lighten($warning, 10%);
-$error:               $red !default;
-$error_dark:          $red_dark !default;
+$error:               $red;
+$error_dark:          $red_dark;
 $error_dark_body:     lighten($error_dark, 2%);
 $error_secondary:     lighten($error, 10%);
-$info:                $teal !default;
+$info:                $teal;
 $info_secondary :     lighten($info, 10%);
-$neutral:             $slate !default;
+$neutral:             $slate;
 $neutral_secondary:   lighten($neutral, 10%);
-$primary:             $primary !default;
+$primary:             $primary;
 $primary_secondary:    lighten($primary, 10%);
 
 $status_colors: (
@@ -194,16 +194,16 @@ $status_color_text: (
 );
 
 /* Link colors ------------------------*/
-$primary_action:      $primary !default;
+$primary_action:      $primary;
 
 /* Product colors ---------------------*/
-$windows:             $royal !default;
-$siding:              $yellow !default;
-$doors:               $teal !default;
-$solar:               $green !default;
-$roofing:             $slate !default;
-$gutters:             $purple !default;
-$insulation:          $red !default;
+$windows:             $royal;
+$siding:              $yellow;
+$doors:               $teal;
+$solar:               $green;
+$roofing:             $slate;
+$gutters:             $purple;
+$insulation:          $red;
 $product_colors: (
   windows:            $windows,
   siding:             $siding,
@@ -215,27 +215,27 @@ $product_colors: (
 );
 
 /* Category colors ---------------------*/
-$category_1:   $royal !default;
-$category_2:   #0CD2E5 !default;
-$category_3:   $yellow !default;
-$category_4:   #14D595 !default;
-$category_5:   #A057FF !default;
-$category_6:   #FF7034 !default;
-$category_7:   #97DA22 !default;
-$category_8:   #EA599F !default;
-$category_9:   #0091FF !default;
-$category_10:  #5027E4 !default;
-$category_11:  $red !default;
-$category_12:  #109922 !default;
-$category_13:  #058F9D !default;
-$category_14:  #A33E6F !default;
-$category_15:  #B2171C !default;
-$category_16:  #0A5C49 !default;
-$category_17:  #325B91 !default;
-$category_18:  #BE4714 !default;
-$category_19:  #000080 !default;
-$category_20:  #5C0E0A !default;
-$category_21:  #040830 !default;
+$category_1:   $royal;
+$category_2:   #0CD2E5;
+$category_3:   $yellow;
+$category_4:   #14D595;
+$category_5:   #A057FF;
+$category_6:   #FF7034;
+$category_7:   #97DA22;
+$category_8:   #EA599F;
+$category_9:   #0091FF;
+$category_10:  #5027E4;
+$category_11:  $red;
+$category_12:  #109922;
+$category_13:  #058F9D;
+$category_14:  #A33E6F;
+$category_15:  #B2171C;
+$category_16:  #0A5C49;
+$category_17:  #325B91;
+$category_18:  #BE4714;
+$category_19:  #000080;
+$category_20:  #5C0E0A;
+$category_21:  #040830;
 $category_colors: (
   category_1:   $category_1,
   category_2:   $category_2,
@@ -260,7 +260,7 @@ $category_colors: (
   category_21:  $category_21
 );
 
-$transparent: transparent !default;
+$transparent: transparent;
 
 @function tint($color, $percentage) {
   @return mix($white, $color, $percentage);

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -1,5 +1,5 @@
 
-$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
+$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
 
 
 /* CLEAN UP AND REMOVE */
@@ -53,12 +53,12 @@ $lspace_super_loosest:    .2em;
 
 
 /* Standard Font Weights */
-$bold:          600 !default;
-$regular:       400 !default;
+$bold:          600;
+$regular:       400;
 
 /* Non_Standard Font Weights */
-$extrabold:     900 !default;
-$boldest:       800 !default;
-$bolder:        700 !default;
-$light:         300 !default;
-$lighter:       100 !default;
+$extrabold:     900;
+$boldest:       800;
+$bolder:        700;
+$light:         300;
+$lighter:       100;