RubyGems - playbook_ui - Versions diffs - 12.18.0 → 12.19.0.pre.alpha.movemarkdown637 - Mend

playbook_ui 12.18.0 → 12.19.0.pre.alpha.movemarkdown637

Files changed (1469) hide show

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

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

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

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

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

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

@@ -1,20 +0,0 @@
-<%= 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 DELETED Viewed

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

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

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

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

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

	@@ -1 +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 DELETED Viewed

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

@@ -1,11 +0,0 @@
-<%= 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 DELETED Viewed

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

	@@ -1 +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 DELETED Viewed

@@ -1,27 +0,0 @@
-<%= 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 DELETED Viewed

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

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

@@ -1,12 +0,0 @@
-<%= 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 DELETED Viewed

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

	@@ -1 +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 DELETED Viewed

@@ -1,7 +0,0 @@
-<%= 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 DELETED Viewed

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

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

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

	@@ -1 +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 DELETED Viewed

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

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

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

	@@ -1 +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 DELETED Viewed

	@@ -1 +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 DELETED Viewed

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

@@ -1,16 +0,0 @@
-<%# 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 DELETED Viewed

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

@@ -1,19 +0,0 @@
-# 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 DELETED Viewed

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

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

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

@@ -1,3 +0,0 @@
-<%= 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 DELETED Viewed

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

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

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

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

@@ -1,3 +0,0 @@
-<%= 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 DELETED Viewed

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

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