playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb

@@ -0,0 +1,29 @@
+<% data1 = [
+  {
+    name: 'Data Used',
+    value: 32,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-units1",
+  chart_data: data1,
+  title: "Data Usage",
+  suffix: "GB"
+}) %>
+
+<% data2 = [
+  {
+    name: 'Sales to Date',
+    value: 65,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-units2",
+  chart_data: data2,
+  title: "Sales Goal",
+  prefix: "$",
+  suffix: "k",
+
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data1 = [
+  { name: 'Data Used', value: 32 },
+]
+const data2 = [
+  { name: 'Sales to Date', value: 65 },
+]
+
+const GaugeUnits = (props) => (
+  <div>
+    <Gauge
+        chartData={data1}
+        id="gauge-units1"
+        suffix="GB"
+        title="Data Usage"
+        {...props}
+    />
+    <Gauge
+        chartData={data2}
+        id="gauge-units2"
+        prefix="$"
+        suffix="k"
+        title="Sales Goal"
+        {...props}
+    />
+  </div>
+)
+
+export default GaugeUnits

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

@@ -0,0 +1,27 @@
+examples:
+
+  rails:
+  - gauge_default: Default
+  - gauge_disable_animation: Disable Animation
+  - gauge_title: Title
+  - gauge_units: Units
+  - gauge_full_circle: Full Circle
+  - gauge_min_max: Min Max Labels
+  - gauge_sizing: Sizing
+  - gauge_height: Height
+  - gauge_colors: Color Overrides
+  - gauge_complex: Complex
+
+
+  react:
+  - gauge_default: Default
+  - gauge_disable_animation: Disable Animation
+  - gauge_title: Title
+  - gauge_units: Units
+  - gauge_full_circle: Full Circle
+  - gauge_min_max: Min Max Labels
+  - gauge_sizing: Sizing
+  - gauge_height: Height
+  - gauge_live_data: Live Data
+  - gauge_colors: Color Overrides
+  - gauge_complex: Complex

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

@@ -0,0 +1,11 @@
+export { default as GaugeDefault } from './_gauge_default.jsx'
+export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
+export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
+export { default as GaugeHeight } from './_gauge_height.jsx'
+export { default as GaugeMinMax } from './_gauge_min_max.jsx'
+export { default as GaugeSizing } from './_gauge_sizing.jsx'
+export { default as GaugeTitle } from './_gauge_title.jsx'
+export { default as GaugeUnits } from './_gauge_units.jsx'
+export { default as GaugeLiveData } from './_gauge_live_data.jsx'
+export { default as GaugeColors } from './_gauge_colors.jsx'
+export { default as GaugeComplex } from './_gauge_complex.jsx'

data/app/pb_kits/playbook/pb_hashtag/docs/_description.md

@@ -0,0 +1 @@
+Hashtag is used to display home, project and other forms of IDs. They can be used as a link.

data/app/pb_kits/playbook/pb_hashtag/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use as a button.

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("hashtag", props: {text: "470297", url: "https://google.com", type: "project"}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "home"}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "345678", url: "https://google.com", type: "appointment"}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "default"}) %>

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Hashtag } from '../../'
+
+const HashtagDefault = (props) => {
+  return (
+    <div>
+      <Hashtag
+          text="470297"
+          type="project"
+          url="https://google.com"
+          {...props}
+      />
+      <br />
+      <br />
+      <Hashtag
+          text="123456"
+          type="home"
+          url="https://google.com"
+          {...props}
+      />
+      <br />
+      <br />
+      <Hashtag
+          text="456789"
+          type="appointment"
+          url="https://google.com"
+          {...props}
+      />
+      <br />
+      <br />
+      <Hashtag
+          text="654321"
+          type="default"
+          url="https://google.com"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default HashtagDefault

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("hashtag", props: {text: "Open in the same Window", url: "https://google.com", type: "project"}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "Open in a new Window", url: "https://google.com", type: "project", new_window: true}) %>

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Hashtag } from '../../'
+
+const HashtagLink = (props) => {
+  return (
+    <div>
+      <Hashtag
+          text="Open in the same window"
+          type="project"
+          url="https://google.com"
+          {...props}
+      />
+      <br />
+      <br />
+      <Hashtag
+          newWindow
+          text="Open in a new window"
+          type="project"
+          url="https://google.com"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default HashtagLink

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md

@@ -0,0 +1 @@
+Use the newWindow/new_window prop to control whether the link opens on the same page or a new tab (same page is the default behavior)

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

@@ -0,0 +1,9 @@
+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

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

data/app/pb_kits/playbook/pb_highlight/docs/_description.md

@@ -0,0 +1 @@
+Highlight is used to pick out or emphasize content.

data/app/pb_kits/playbook/pb_highlight/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Avoid highlighting words that don’t apply or whole content areas.

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb

@@ -0,0 +1,20 @@
+
+<%= pb_rails("highlight", props: {text: "Highlight Kit"})%>
+<br>
+<br>
+<%= pb_rails("title", props: {text: "Kit wrapping",size: 4})%>
+<br>
+<%= pb_rails("body") do%>
+This an example<%= pb_rails("highlight") do%>Highlight Example<% end %>around.
+<% end %>
+<br>
+<br>
+<%= pb_rails("title", props: {text: "Search",size: 4})%>
+<br>
+<%= pb_rails("body", props: {text: "hello helpers are great even highlighting this", highlighting: true, highlighted_text: ["hello","great"]})%>
+
+<br>
+<br>
+<%= pb_rails("caption", props: {size: "xs", text: "To enable highlighting make sure the [highlighting] flag is set to true. "}) %>
+<br>
+<br>

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import Highlight from '../_highlight'
+import Body from '../../pb_body/_body'
+
+const HighlightDefault = (props) => (
+  <div>
+    <Highlight
+        highlightedText={['highlight kit']}
+        text="This is the Highlight Kit"
+        {...props}
+    />
+    <br />
+    <Body>
+      {' '}
+      {'Hello this is a'}
+      {' '}
+      <Highlight text=" highlight wrapped"/>
+    </Body>
+    <br />
+    <Body
+        highlightedText={['highlighted', 'Body Kit ']}
+        highlighting
+        text="This is text highlighted in the Body Kit using the text prop."
+        {...props}
+    />
+  </div>
+)
+
+export default HighlightDefault

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - highlight_default: Default
+  
+  
+  react:
+  - highlight_default: Default
+  

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

@@ -0,0 +1 @@
+export { default as HighlightDefault } from './_highlight_default.jsx'

data/app/pb_kits/playbook/pb_home_address_street/docs/_description.md

@@ -0,0 +1 @@
+This kit can be used to display the address for a homeowner/project. It contains street address, APT format, City, state and zip. A Project hashtag can be used as a prop to link back to a project.

data/app/pb_kits/playbook/pb_home_address_street/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+Don’t change the design format (Bold fonts and light fonts), and keep the text stacked. Do not use on a singe line.

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import HomeAddressStreet from '../_home_address_street'
+
+const HomeAddressStreetDefault = (props) => {
+  return (
+    <HomeAddressStreet
+        address="70 Prospect Ave"
+        addressCont="Apt M18"
+        city="West Chester"
+        homeId="8250263"
+        homeUrl="https://powerhrg.com/"
+        houseStyle="Colonial"
+        state="PA"
+        territory="PHL"
+        zipcode="19382"
+        {...props}
+    />
+  )
+}
+
+export default HomeAddressStreetDefault

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.md

@@ -0,0 +1 @@
+Use this kit on tables, card displays, or on modals. It's versatile for displaying in the most condensed areas. 

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<br>
+<br>
+
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  emphasis: "city",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import HomeAddressStreet from '../_home_address_street'
+
+const HomeAddressStreetEmphasis = (props) => {
+  return (
+    <div>
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          addressCont="Apt M18"
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <br />
+      <br />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          addressCont="Apt M18"
+          city="West Chester"
+          emphasis="city"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default HomeAddressStreetEmphasis

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md

@@ -0,0 +1,2 @@
+Emphasis on street happens by default. (no prop needed)
+Emphasis on "city" makes the city emphasized, rather than the street.

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  new_window: true,
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import HomeAddressStreet from '../_home_address_street'
+
+const HomeAddressStreetLink= (props) => {
+  return (
+    <HomeAddressStreet
+        address="70 Prospect Ave"
+        addressCont="Apt M18"
+        city="West Chester"
+        homeId={8250263}
+        homeUrl="https://powerhrg.com/"
+        houseStyle="Colonial"
+        newWindow
+        state="PA"
+        territory="PHL"
+        zipcode="19382"
+        {...props}
+    />
+  )
+}
+
+export default HomeAddressStreetLink

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md

@@ -0,0 +1 @@
+Use the `newWindow` / `new_window` prop to control whether the link opens on the same page or a new tab (same page is the default behavior)

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  city: "West Chester",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import HomeAddressStreet from '../_home_address_street'
+
+const HomeAddressStreetModified = (props) => {
+  return (
+    <HomeAddressStreet
+        address="70 Prospect Ave"
+        city="West Chester"
+        state="PA"
+        territory="PHL"
+        zipcode="19382"
+        {...props}
+    />
+  )
+}
+
+export default HomeAddressStreetModified

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

@@ -0,0 +1,14 @@
+examples:
+
+  rails:
+  - 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

@@ -0,0 +1,4 @@
+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_icon/docs/_description.md

@@ -0,0 +1 @@
+An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.

data/app/pb_kits/playbook/pb_icon/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead.

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb

@@ -0,0 +1,3 @@
+<p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
+<br/>
+<p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconAnimate = (props) => {
+  return (
+    <div>
+      <p>
+        <Icon
+            fixedWidth
+            icon="spinner"
+            size="2x"
+            spin
+            {...props}
+        />
+        {' '}
+        <span>{'Spin'}</span>
+      </p>
+      <br />
+      <p>
+        <Icon
+            fixedWidth
+            icon="spinner"
+            pulse
+            size="2x"
+            {...props}
+        />
+        {' '}
+        <span>{'Pulse'}</span>
+      </p>
+    </div>
+  )
+}
+
+export default IconAnimate

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.md

@@ -0,0 +1 @@
+A spinner icon can show a user that something is loading or saving.

data/app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "user", border: true, fixed_width: true, size: "2x" }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconBorder = (props) => {
+  return (
+    <div>
+      <Icon
+          border
+          fixedWidth
+          icon="user"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconBorder

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -0,0 +1,16 @@
+<%# SVG fill color inherited from css color property %>
+<div class="icon-wrapper">
+
+  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+  <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
+
+  <%= pb_rails("body", props: {
+    text: "Custom icons are compatible with other icon props (size, rotation,
+    spin, flip, etc). Their SVG fill colors will be inherited from
+    parent element's css color properties."
+  } ) %>
+</div>

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Icon } from '../../'
+
+// import Icons as config from 'power-icons'
+const config = {
+  moon: (
+    <svg
+        ariaHidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
+          fill="currentColor"
+      />
+    </svg>
+  ),
+}
+
+const IconCustom = (props) => {
+  return (
+    <div>
+      <Icon
+          customIcon={config.moon}
+          size="7x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconCustom

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md

@@ -0,0 +1,19 @@
+# Tips for Custom Icons
+
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
+
+You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
+
+### React
+
+So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+
+### Rails
+
+Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.