RubyGems - playbook_ui - Versions diffs - 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665 - Mend

playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

Files changed (1479) hide show

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

@@ -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 ADDED Viewed

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

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

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

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

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

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

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

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

	@@ -0,0 +1,2 @@
1	+ ## Things To Avoid
2	+ 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ Emphasis on street happens by default. (no prop needed)
2	+ 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

	@@ -0,0 +1,2 @@
1	+ ### Things to Avoid
2	+ 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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.

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb ADDED Viewed

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

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx ADDED Viewed

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

data/app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb ADDED Viewed

@@ -0,0 +1,3 @@
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "horizontal", size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "vertical", size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "both", size: "2x" }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react'
+import Icon from '../_icon'
+const IconFlip = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          flip="horizontal"
+          icon="question-circle"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          flip="vertical"
+          icon="question-circle"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          flip="both"
+          icon="question-circle"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+export default IconFlip

data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.html.erb ADDED Viewed

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

data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+import React from 'react'
+import Icon from '../_icon'
+const IconPull = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          icon="arrow-left"
+          pull="left"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          icon="arrow-right"
+          pull="right"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+export default IconPull

data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Icon Pull can be used to indicate that the user can perform a pull action.

data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate.html.erb ADDED Viewed

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

data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react'
+import Icon from '../_icon'
+const IconRotate = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={90}
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={180}
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={270}
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+export default IconRotate

data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes.html.erb ADDED Viewed

@@ -0,0 +1,16 @@
+<p><%= pb_rails("icon", props: { icon: "user", size: "lg" }) %> <span>Large</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "sm" }) %> <span>Small</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "xs" }) %> <span>XSmall</span></p>
+<br/><br/>
+<p><%= pb_rails("icon", props: { icon: "user", size: "1x" }) %> <span>1x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "2x" }) %> <span>2x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "3x" }) %> <span>3x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "4x" }) %> <span>4x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "5x" }) %> <span>5x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "6x" }) %> <span>6x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "7x" }) %> <span>7x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "8x" }) %> <span>8x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "9x" }) %> <span>9x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "10x" }) %> <span>10x</span></p>