RubyGems - playbook_ui - Versions diffs - 6.2.1 → 6.3.0 - Mend

playbook_ui 6.2.1 → 6.3.0

Files changed (190) hide show

data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx ADDED

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  CircleIconButton,
+  Flex,
+  PbReactPopover,
+} from '../..'
+const PopoverDark = () => {
+  const [showPopover, setShowPopover] = useState(false)
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+  const popoverReference = (
+    <CircleIconButton
+        dark
+        icon="info"
+        onClick={handleTogglePopover}
+        variant="secondary"
+    />
+  )
+  return (
+    <Flex
+        dark
+        orientation="row"
+        vertical="center"
+    >
+      <Body
+          dark
+          text="Click info for more details"
+      />
+      &nbsp;
+      <PbReactPopover
+          dark
+          offset
+          placement="top"
+          reference={popoverReference}
+          show={showPopover}
+      >
+        {'I\'m a popover. I can show content of any size.'}
+      </PbReactPopover>
+    </Flex>
+  )
+}
+export default PopoverDark

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb CHANGED

@@ -1,4 +1,5 @@
 <%= pb_rails("flex", props: {
+    dark: true,
     orientation: "row",
     vertical: "center"
     }) do %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.html.erb ADDED

@@ -0,0 +1,13 @@
+<%= pb_rails("button", props: { dark: true, variant: "primary", id: 'list-5' }) do %>
+    Filter By
+    <%= pb_rails("icon", props: { dark: true, icon: "angle-down"}) %>
+<% end %>
+<%= pb_rails("popover", props: {trigger_element_id: "list-5", tooltip_id: "list-tooltip-5", position: 'bottom', padding: "none"}) do %>
+    <%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, xpadding: true}) do %>
+        <%= pb_rails("list/item") do %><a>Popularity</a><% end %>
+        <%= pb_rails("list/item") do %><a>Title</a><% end %>
+        <%= pb_rails("list/item") do %><a>Duration</a><% end %>
+        <%= pb_rails("list/item") do %><a>Date Started</a><% end %>
+        <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx ADDED

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Icon,
+  List,
+  ListItem,
+  PbReactPopover,
+} from '../..'
+const PopoverWithButton = () => {
+  const [showPopover, setShowPopover] = useState(false)
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+  const popoverReference = (
+    <Button
+        dark
+        onClick={handleTogglePopover}
+        variant="primary"
+    >
+      {'Filter By'}
+      <Icon
+          dark
+          fixedWidth
+          icon="angle-down"
+      />
+    </Button>
+  )
+  return (
+    <PbReactPopover
+        dark
+        padding="none"
+        placement="bottom"
+        reference={popoverReference}
+        show={showPopover}
+    >
+      <List xpadding>
+        <ListItem><a>{'Popularity'}</a></ListItem>
+        <ListItem><a>{'Title'}</a></ListItem>
+        <ListItem><a>{'Duration'}</a></ListItem>
+        <ListItem><a>{'Date Started'}</a></ListItem>
+        <ListItem><a>{'Date Ended'}</a></ListItem>
+      </List>
+    </PbReactPopover>
+  )
+}
+export default PopoverWithButton

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.html.erb ADDED

@@ -0,0 +1,25 @@
+<%= pb_rails("button", props: { dark: true, variant: "primary", id: 'scroll-height-5', text: "Click Me" }) %>
+<%= pb_rails("popover", props: {
+    trigger_element_id: "scroll-height-5",
+    tooltip_id: "scroll-height-5",
+    position: 'top',
+    close_on_click: "any",
+    max_height: "150px",
+    max_width: "240px",
+    offset: true
+    }) do %>
+    <%= pb_rails("body", props: {
+        margin_bottom: "sm",
+        text: "So many people live within unhappy circumstances and yet will
+          not take the initiative to change their situation because they are
+          conditioned to a life of security, conformity, and conservation, all of
+          which may appear to give one peace of mind, but in reality, nothing is
+          more damaging to the adventurous spirit."
+    }) %>
+    <%= pb_rails("title", props: {
+        dark:true,
+        size: 4,
+        text: "- Christopher McCandless"
+    }) %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx ADDED

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+  Title,
+} from '../..'
+const PopoverScrollHeightDark = () => {
+  const [showPopover, setShowPopover] = useState(false)
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+  const popoverTrigger = (
+    <Button
+        dark
+        onClick={handleTogglePopover}
+        text="Click Me"
+        variant="primary"
+    />
+  )
+  return (
+    <PbReactPopover
+        closeOnClick="any"
+        maxHeight="150px"
+        maxWidth="240px"
+        offset
+        placement="top"
+        reference={popoverTrigger}
+        shouldClosePopover={handleShouldClosePopover}
+        show={showPopover}
+    >
+      <Body
+          marginBottom="sm"
+          text=" Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."
+      />
+      <Title
+          dark
+          size={4}
+          text="- Abraham Lincoln"
+      />
+    </PbReactPopover>
+  )
+}
+export default PopoverScrollHeightDark

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.html.erb ADDED

@@ -0,0 +1,14 @@
+<div style="position: relative; z-index: 2">
+    <%= pb_rails("body", props: {text: "I've got a z-index of 2", margin_bottom: "md"}) %>
+</div>
+<%= pb_rails("button", props: { variant: "primary", id: 'tooltip-z-index-5', text: "Click Me", }) %>
+<%= pb_rails("popover", props: {
+    trigger_element_id: "tooltip-z-index-5",
+    tooltip_id: "tooltip-z-index-5",
+    position: 'top',
+    z_index: "3",
+    offset: true
+}) do %>
+    I've got a z-index of 3
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx ADDED

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+} from '../..'
+const PopoverZIndexDark = () => {
+  const [showPopover, setShowPopover] = useState(false)
+  const handleTogglePopover = () => {
+    setShowPopover(!showPopover)
+  }
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+  const popoverTrigger = (
+    <Button
+        dark
+        onClick={handleTogglePopover}
+        text="Click Me"
+        variant="primary"
+    />
+  )
+  return (
+    <>
+      <div style={{ position: 'relative', zIndex: 2 }}>
+        <Body
+            dark
+            marginBottom="md"
+            text="I've got a z-index of 2"
+        />
+      </div>
+      <PbReactPopover
+          closeOnClick="outside"
+          offset
+          placement="top"
+          reference={popoverTrigger}
+          shouldClosePopover={handleShouldClosePopover}
+          show={showPopover}
+          zIndex={3}
+      >
+        {'I have a custom z-index of 3'}
+      </PbReactPopover>
+    </>
+  )
+}
+export default PopoverZIndexDark

data/app/pb_kits/playbook/pb_popover/docs/example.yml CHANGED

@@ -5,6 +5,11 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
+    - popover_dark: Dark
+    - popover_list_dark: List Dark
+    - popover_close_dark: Close Dark
+    - popover_z_index_dark: Z-Index Dark
+    - popover_scroll_height_dark: Scroll and Height Settings Dark
   react:
     - popover_default: Default
@@ -12,6 +17,11 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
+    - popover_dark: Dark
+    - popover_list_dark: List Dark
+    - popover_close_dark: Close Dark
+    - popover_z_index_dark: Z-Index Dark
+    - popover_scroll_height_dark: Scroll and Height Settings Dark

data/app/pb_kits/playbook/pb_popover/docs/index.js CHANGED

@@ -3,3 +3,8 @@ export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
+export { default as PopoverDark } from './_popover_dark.jsx'
+export { default as PopoverListDark } from './_popover_list_dark.jsx'
+export { default as PopoverCloseDark } from './_popover_close_dark.jsx'
+export { default as PopoverZIndexDark } from './_popover_z_index_dark.jsx'
+export { default as PopoverScrollHeightDark } from './_popover_scroll_height_dark.jsx'

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb CHANGED

@@ -16,5 +16,5 @@
         <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
       <% end %>
     </div>
 <% end %>

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx CHANGED

@@ -37,7 +37,7 @@ const showSteps = (steps, active, dark) => {
 const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
   <div
       className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${
-      dark ? '_dark' : ''
+      dark ? ' dark' : ''
     }`}
       key={step}
   />
@@ -55,11 +55,10 @@ const ProgressPills = (props: ProgressPillsProps) => {
     value,
     dark = false,
   } = props
-  const darkClass = dark ? '_dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_progress_pills_kit', darkClass), className, globalProps(props))
+  const classes = classnames(buildCss('pb_progress_pills_kit'), globalProps(props), className)
   return (
     <div

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss CHANGED

@@ -24,13 +24,12 @@
     }
   }
   [class*=pb_progress_pill] {
     @include pb_progress_pill;
     &[class*=_inactive] {
       background-color: $border_light;
-      &[class*=_dark]{
+      &.dark {
       background-color: $border_dark;
       }
     }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status_dark.html.erb ADDED

	@@ -0,0 +1 @@
1	+ <%= pb_rails("progress_pills", props: { steps: 3, active: 2, title: "Status:", value: "Orientation", dark: true}) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status_dark.jsx ADDED

@@ -0,0 +1,19 @@
+import React from 'react'
+import ProgressPills from '../_progress_pills.jsx'
+const ProgressPillsStatusDark = () => {
+  return (
+    <div>
+      <ProgressPills
+          active={2}
+          dark
+          steps={3}
+          title="Status:"
+          value="Orientation"
+      />
+    </div>
+  )
+}
+export default ProgressPillsStatusDark

data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml CHANGED

@@ -4,9 +4,11 @@ examples:
   - progress_pills_default: Default
   - progress_pills_status: Status
   - progress_pills_dark: Dark
+  - progress_pills_status_dark: Status Dark
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
   - progress_pills_dark: Dark
+  - progress_pills_status_dark: Status Dark

data/app/pb_kits/playbook/pb_progress_pills/docs/index.js CHANGED

@@ -1,3 +1,4 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
 export { default as ProgressPillsDark } from './_progress_pills_dark.jsx'
+export { default as ProgressPillsStatusDark } from './_progress_pills_status_dark.jsx'

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb CHANGED

@@ -10,18 +10,14 @@ module Playbook
       prop :active, type: Playbook::Props::Number,
                     default: 0
       prop :value
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :steps, type: Playbook::Props::Number,
                    default: 3
       prop :title
       def classname
-        generate_classname("pb_progress_pills_kit", dark_class)
+        generate_classname("pb_progress_pills_kit")
       end
       def with_status
         yield title if title.present?
       end
@@ -35,15 +31,8 @@ module Playbook
       end
       def dark_pill
-          dark ? "_dark" : nil
+        dark ? " dark" : nil
       end
-      private
-      def dark_class
-        dark ? "dark" : nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_progress_step/_progress_step.html.erb CHANGED

@@ -1,4 +1,4 @@
-<%= content_tag(:div,
+<%= content_tag(:ul,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx CHANGED

@@ -12,7 +12,7 @@ type ProgressStepProps = {
   children?: array<React.ReactChild>,
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
-  dark?: boolean,
+  variant?: string,
 }
 const ProgressStep = (props: ProgressStepProps) => {
@@ -21,21 +21,20 @@ const ProgressStep = (props: ProgressStepProps) => {
     children,
     orientation = 'horizontal',
     icon = false,
-    dark = false,
+    variant,
   } = props
   const iconStyle = icon === true ? 'icon' : ''
-  const darkStyle = dark === true ? 'dark' : ''
   const progressStepCss = buildCss(
     'pb_progress_step_kit',
     orientation,
     iconStyle,
-    darkStyle
+    variant,
   )
   return (
-    <div className={classnames(progressStepCss, className, globalProps(props))}>
+    <ul className={classnames(progressStepCss, className, globalProps(props))}>
       {children}
-    </div>
+    </ul>
   )
 }