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_card/docs/_card_background.html.erb DELETED Viewed

@@ -1,44 +0,0 @@
-<%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-<%= pb_rails("card", props: { background: "dark", dark: true, margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-  text: "Dark",
-  dark: true
-}) %>
-<% end %>
-<%= pb_rails("card", props: { margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-  text: "White / Default"
-}) %>
-<% end %>
-<%= pb_rails("card", props: { background: "light", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Light",
-    dark: false
-  }) %>
-<% end %>
-<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-<%= pb_rails("card", props: { background: "product_1_background", dark: true, margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Product 1 Background",
-    dark: true
-  }) %>
-<% end %>
-<%= pb_rails("card", props: { background: "product_7_highlight", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Product 7 Highlight",
-    dark: true
-  }) %>
-<% end %>
-<%= pb_rails("card", props: { background: "product_2_background", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Product 2 Highlight",
-    dark: true
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx DELETED Viewed

@@ -1,97 +0,0 @@
-import React from 'react'
-import Title from '../../pb_title/_title'
-import { Body } from '../../'
-import Card from '../_card'
-const CardBackground = (props) => {
-  return (
-    <div>
-      <Title
-          {...props}
-          marginBottom="sm"
-          size={4}
-          tag="h4"
-          text="Card Colors"
-      />
-      <Card
-          background="dark"
-          dark
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            dark
-            text="Dark"
-        />
-      </Card>
-      <Card
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            text="White / Default"
-            {...props}
-        />
-      </Card>
-      <Card
-          background="light"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body text="Light"/>
-      </Card>
-      <Title
-          {...props}
-          marginBottom="sm"
-          size={4}
-          tag="h4"
-          text="Product Colors"
-      />
-      <Card
-          background="product_1_background"
-          marginBottom="sm"
-          {...props}
-        >
-        <Body
-            dark
-            text="Product 1 Background"
-        />
-      </Card>
-      <Card
-          background="product_7_highlight"
-          marginBottom="sm"
-          {...props} >
-        <Body
-            dark
-            text="Product 7 Highlight"
-          />
-      </Card>
-      <Card
-          background="product_2_highlight"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            dark
-            text="Product 2 Highlight"
-        />
-      </Card>
-    </div>
-  )
-}
-export default CardBackground

data/app/pb_kits/playbook/pb_card/docs/_card_background.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb DELETED Viewed

@@ -1,7 +0,0 @@
-<div class="bg-light-doc-example">
-    <%= pb_rails("card", props: { border_none: true })  do %>
-        Card content
-    <% end %>
-</div>

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx DELETED Viewed

@@ -1,17 +0,0 @@
-import React from 'react'
-import Card from '../_card'
-const CardBorderNone = (props) => {
-  return (
-    <Card
-        {...props}
-        borderNone
-    >
-      {'Card content'}
-    </Card>
-  )
-}
-export default CardBorderNone

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Remove card border <b>only</b> for dashboard cards.

data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.html.erb DELETED Viewed

@@ -1,53 +0,0 @@
-<%= pb_rails("card", props: {
-  border_radius: "rounded"
-})  do %>
-  Rounded (1000px)
-<% end %>
-<br>
-<%= pb_rails("card", props: {
-  border_radius: "xl"
-})  do %>
-  Extra large (16px)
-<% end %>
-<br>
-<%= pb_rails("card", props: {
-  border_radius: "lg"
-})  do %>
-  Large (8px)
-<% end %>
-<br>
-<%= pb_rails("card", props: {
-  border_radius: "md"
-})  do %>
-  Medium (6px)
-<% end %>
-<br>
-<%= pb_rails("card", props: {
-  border_radius: "sm"
-})  do %>
-  Small (4px)
-<% end %>
-<br>
-<%= pb_rails("card", props: {
-  border_radius: "xs"
-})  do %>
-  Extra small (4px)
-<% end %>
-<br>
-<%= pb_rails("card", props: {
-  border_radius: "none"
-})  do %>
-  None
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx DELETED Viewed

@@ -1,71 +0,0 @@
-import React from 'react'
-import Card from '../_card'
-const CardLight = (props) => {
-  return (
-    <div>
-      <Card
-          borderRadius="rounded"
-          {...props}
-      >
-        {'Rounded (1000px)'}
-      </Card>
-      <br />
-      <Card
-          borderRadius="xl"
-          {...props}
-      >
-        {'Extra large (16px)'}
-      </Card>
-      <br />
-      <Card
-          borderRadius="lg"
-          {...props}
-      >
-        {'Large (8px)'}
-      </Card>
-      <br />
-      <Card
-          borderRadius="md"
-          {...props}
-      >
-        {'Medium (6px)'}
-      </Card>
-      <br />
-      <Card
-          borderRadius="sm"
-          {...props}
-      >
-        {'Small (4px)'}
-      </Card>
-      <br />
-      <Card
-          borderRadius="xs"
-          {...props}
-      >
-        {'Extra small (4px)'}
-      </Card>
-      <br />
-      <Card
-          borderRadius="none"
-          {...props}
-      >
-        {'None'}
-      </Card>
-    </div>
-  )
-}
-export default CardLight

data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.md DELETED Viewed

	@@ -1 +0,0 @@
1	- `border_radius_md` is the card kit default

data/app/pb_kits/playbook/pb_card/docs/_card_content.html.erb DELETED Viewed

@@ -1,13 +0,0 @@
-<%= pb_rails("card", props: {
-  cursor: "pointer"
-}) do %>
-  Card Content
-<% end %>
-<br>
-<%= pb_rails("card") do %>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
-<br><br>
-Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx DELETED Viewed

@@ -1,27 +0,0 @@
-import React from 'react'
-import Card from '../_card'
-const CardContent = (props) => {
-  return (
-    <div>
-      <Card
-          cursor="pointer"
-          {...props}
-      >
-        {'Card content'}
-      </Card>
-      <br />
-      <Card
-          {...props}
-      >
-        {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
-Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.`}
-      </Card>
-      <br />
-    </div>
-  )
-}
-export default CardContent

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb DELETED Viewed

@@ -1,70 +0,0 @@
-<%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
-    <%= pb_rails("body", props: { text: "Category 1", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Category 1
-  <% end %>
-<% end %>
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_3" }) do %>
-    <%= pb_rails("body", props: { text: "Category 3", dark: false }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
-    Body
-  <% end %>
-<% end %>
-<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_2_background" }) do %>
-    <%= pb_rails("body", props: { text: "Product 2 Background", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_6_background" }) do %>
-    <%= pb_rails("body", props: { text: "Product 6 Background", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-<%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "white" }) do %>
-    <%= pb_rails("body", props: { text: "White", dark: false }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
-    <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-<%= pb_rails("title", props: { text: "Striped Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_1", header_color_striped: true }) do %>
-    <%= pb_rails("body", props: { text: "Striped Category 1", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
-    Body
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx DELETED Viewed

@@ -1,188 +0,0 @@
-import React from 'react'
-import Card from '../_card'
-import Title from '../../pb_title/_title'
-import Body from '../../pb_body/_body'
-const CardHeader = (props) => {
-    return (
-        <>
-            <Title
-                {...props}
-                marginBottom='sm'
-                size={4}
-                tag="h4"
-                text="Category Colors"
-            />
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header headerColor="category_1" >
-                    <Body
-                        dark
-                        text="Category 1"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="category_3"
-                >
-                    <Body text="Category 3" />
-                </Card.Header>
-                <Card.Body
-                    padding="md"
-                >
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-            <Title
-                {...props}
-                marginBottom='sm'
-                size={4}
-                tag="h4"
-                text="Product Colors"
-            />
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="product_2_background"
-                >
-                    <Body
-                        {...props}
-                        dark
-                        text="Product 2 Background"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header headerColor="product_6_background" >
-                    <Body
-                        {...props}
-                        dark
-                        text="Product 6 Background"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-            <Title
-                {...props}
-                marginBottom='sm'
-                size={4}
-                tag="h4"
-                text="Background Colors"
-            />
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="white"
-                >
-                    <Body text="White" />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="dark"
-                >
-                    <Body
-                        dark
-                        text="Dark"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-            <Title
-                {...props}
-                marginBottom='sm'
-                size={4}
-                tag="h4"
-                text="Striped Colors"
-            />
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="category_1"
-                    headerColorStriped
-                >
-                    <Body
-                        dark
-                        text="Striped Category 1"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-        </>
-    )
-}
-export default CardHeader

data/app/pb_kits/playbook/pb_card/docs/_card_header.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb DELETED Viewed

@@ -1,9 +0,0 @@
-<%= pb_rails("card", props: {highlight: {position: "side", color:"product_6_highlight"}, margin_bottom: "sm"}) do %>
-  Side Position & Product 6 Highlight Color
-<% end %>
-<%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
-  Top Position & Warning Color
-<% end %>
-<%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
-  Side Position & Category 2 Color
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx DELETED Viewed

@@ -1,34 +0,0 @@
-import React from 'react'
-import Card from '../_card'
-const CardHighlight = (props) => {
-  return (
-    <div>
-      <Card
-          {...props}
-          highlight={{ position: 'side', color: 'product_6_highlight' }}
-          marginBottom="sm"
-      >
-        {'Side Position & Product 6 Highlight Color'}
-      </Card>
-      <Card
-          {...props}
-          highlight={{ position: 'top', color: 'warning' }}
-          marginBottom="sm"
-      >
-        {'Top Position & Warning Color'}
-      </Card>
-      <Card
-          {...props}
-          highlight={{ position: 'side', color: 'category_2' }}
-      >
-        {'Side Position & Category 2 Color'}
-      </Card>
-    </div>
-  )
-}
-export default CardHighlight

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb DELETED Viewed

@@ -1,4 +0,0 @@
-<%= pb_rails("card", props: {
-})  do %>
-  Card content
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx DELETED Viewed

@@ -1,12 +0,0 @@
-import React from 'react'
-import Card from '../_card'
-const CardLight = (props) => {
-  return (
-    <div>
-      <Card {...props}>{'Card content'}</Card>
-    </div>
-  )
-}
-export default CardLight

data/app/pb_kits/playbook/pb_card/docs/_card_light.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>