workarea-admin 3.4.12

data/app/views/workarea/admin/style_guides/objects/_tooltip_content.html.haml

@@ -0,0 +1,31 @@
+#tooltip-content-object.style-guide__subsection
+
+  %h3= link_to_style_guide('objects', 'tooltip_content')
+
+  %p Hides an element unless it's found within a tooltip.
+
+  %p should be invisible when not in a tooltip:
+  .style-guide__example-block
+    %p
+      %span.tooltip-content should be hidden
+
+  %p should be visible when inside a tooltip:
+  .style-guide__example-block
+    %span.tooltipster-content
+      %span.tooltip-content should be visible
+
+  %p should add padding around text:
+  .style-guide__example-block
+    %span.tooltipster-content
+      %span.tooltip-content should be padded
+
+#tooltip-content--no-padding-object.style-guide__subsection
+
+  %h3= link_to_style_guide('objects', 'tooltip_content__no_padding')
+
+  %p Adds a healthy amount of padding to the content.
+
+  %p should add padding around text:
+  .style-guide__example-block
+    %span.tooltipster-content
+      %span.tooltip-content.tooltip-content--no-padding should not be padded

data/app/views/workarea/admin/style_guides/settings/_color_variables.html.haml

@@ -0,0 +1,21 @@
+#color-variables.style-guide__subsection
+
+  %h3= link_to_style_guide('settings', 'color_variables')
+
+  %p The main color palette for the admin.
+
+  .grid.grid--auto
+    - colors = %w(black off-black blue bright-blue green bright-green red dark-gray gray light-gray off-white white orange)
+    - colors.each do |color|
+      .grid__cell
+        .style-guide__color
+          .style-guide__color-swatch{ class: "style-guide__color-swatch--#{color}" }
+        $#{color}
+
+  .grid.grid--auto
+    - colors = %w(transparent font-color background-color border-color focus-ring-color shadow-color)
+    - colors.each do |color|
+      .grid__cell
+        .style-guide__color
+          .style-guide__color-swatch{ class: "style-guide__color-swatch--#{color}" }
+        $#{color}

data/app/views/workarea/admin/style_guides/show.html.haml

@@ -0,0 +1,10 @@
+.style-guide.view
+
+  .grid
+    .grid__cell.grid__cell--20
+
+      = render 'navigation'
+
+    .grid__cell.grid__cell--80
+
+      = render @style_guide_partial

data/app/views/workarea/admin/style_guides/trumps/_break_word.html.haml

@@ -0,0 +1,15 @@
+#break-word.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'break_word')
+
+  %p Applies a CSS word-break technique which allows words to break more elegantly when wider than their container.
+
+  %p In the following examples we have a <code>p</code> tag that is 125 pixels wide (shown by the dashed outline) containing a very long word:
+
+  %p without <code>break-word</code>:
+  .style-guide__example-block
+    %p{ style: 'width: 125px; outline: 1px dashed;'} Pneumonoultramicroscopicsilicovolcanoconiosis
+
+  %p with <code>break-word</code>:
+  .style-guide__example-block
+    %p.break-word{ style: 'width: 125px; outline: 1px dashed;'} Pneumonoultramicroscopicsilicovolcanoconiosis

data/app/views/workarea/admin/style_guides/trumps/_clearfix.html.haml

@@ -0,0 +1,21 @@
+#clearfix.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'clearfix')
+
+  %p Applies a CSS clearfix technique to force the element to contain floats.
+
+  %p Designed to be applied to block-level elements.
+
+  %p In the following examples a <code>div</code> with a black background contains two floated <code>div</code> elements with red backgrounds:
+
+  %p without <code>clearfix</code>:
+  .style-guide__example-block
+    %div{ style: 'background: black;'}
+      %div{ style: 'background: red; width: 50px; height: 50px; float: left;'}
+      %div{ style: 'background: red; width: 50px; height: 50px; float: right;'}
+
+  %p with <code>clearfix</code>:
+  .style-guide__example-block
+    .clearfix{ style: 'background: black;'}
+      %div{ style: 'background: red; width: 50px; height: 50px; float: left;'}
+      %div{ style: 'background: red; width: 50px; height: 50px; float: right;'}

data/app/views/workarea/admin/style_guides/trumps/_hidden.html.haml

@@ -0,0 +1,97 @@
+#hidden.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'hidden')
+
+  %p Responsible the hiding and conditional showing of a block-level element. This trump is the logical inverse of #{link_to_style_guide('trumps', 'visible', true)}.
+
+  %p When accessibility is a concern, use #{link_to_style_guide('trumps', 'visually_hidden', true)} instead.
+
+  %p without <code>hidden</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be hidden
+
+  %p with <code>hidden</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.hidden I'm some text that should be hidden
+
+#hidden--for-medium.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'hidden__for_medium')
+
+  %p Hides an element at the medium breakpoint and greater.
+
+  %p without <code>hidden--for-medium</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be hidden for medium and above
+
+  %p with <code>hidden--for-medium</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.hidden.hidden--for-medium I'm some text that should be hidden for medium and above
+
+#hidden--for-medium-only.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'hidden__for_medium_only')
+
+  %p Hides an element for medium devices only
+
+  %p without <code>hidden--for-medium-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be hidden for medium devices only
+
+  %p with <code>hidden--for-medium-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.hidden.hidden--for-medium-only I'm some text that should be hidden for medium devices only
+
+#hidden--for-small-only.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'hidden__for_small_only')
+
+  %p Hides an element for small devices only
+
+  %p without <code>hidden--for-small-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be hidden for small devices only
+
+  %p with <code>hidden--for-small-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.hidden.hidden--for-small-only I'm some text that should be hidden for small devices only
+
+#hidden--for-wide.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'hidden__for_wide')
+
+  %p Hides an element at the wide breakpoint and greater.
+
+  %p without <code>hidden--for-wide</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be hidden for wide and above
+
+  %p with <code>hidden--for-wide</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.hidden.hidden--for-wide I'm some text that should be hidden for wide and above
+
+#hidden--for-wide-only.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'hidden__for_wide_only')
+
+  %p Hides an element for wide devices only
+
+  %p without <code>hidden--for-wide-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be hidden for wide devices only
+
+  %p with <code>hidden--for-wide-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.hidden.hidden--for-wide-only I'm some text that should be hidden for wide devices only

data/app/views/workarea/admin/style_guides/trumps/_image_replacement.html.haml

@@ -0,0 +1,13 @@
+#image-replacement.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'image_replacement')
+
+  %p Implements a CSS image replacement technique to hide the element's content and show a background image.
+
+  %p without <code>image-replacement</code>:
+  .style-guide__example-block
+    %div{ style: "background: url('#{asset_url('workarea/core/placeholder.png')}') center / 100% 100%; width: 250px; height: 100px;" } I'm some text
+
+  %p with <code>image-replacement</code>:
+  .style-guide__example-block
+    %div{ style: "background: url('#{asset_url('workarea/core/placeholder.png')}') center / 100% 100%; width: 250px; height: 100px;", class: 'image-replacement'} I'm some text

data/app/views/workarea/admin/style_guides/trumps/_truncate.html.haml

@@ -0,0 +1,13 @@
+#truncate.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'truncate')
+
+  %p Forces text to be truncated (with an ellipsis) rather than wrapping or overflowing.
+
+  %p without <code>truncate</code>:
+  .style-guide__example-block
+    %p{ style: 'width: 125px; outline: 1px dashed;'} Pneumonoultramicroscopicsilicovolcanoconiosis
+
+  %p with <code>truncate</code>:
+  .style-guide__example-block
+    %p.truncate{ style: 'width: 125px; outline: 1px dashed;'} Pneumonoultramicroscopicsilicovolcanoconiosis

data/app/views/workarea/admin/style_guides/trumps/_visible.html.haml

@@ -0,0 +1,97 @@
+#visible.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'visible')
+
+  %p Responsible the revealing and conditional hiding of a block-level element. This trump is the logical inverse of #{link_to_style_guide('trumps', 'hidden', true)}.
+
+  %p When accessibility is a concern, use #{link_to_style_guide('trumps', 'visually_hidden', true)} instead.
+
+  %p without <code>visible</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be visible
+
+  %p with <code>visible</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.visible I'm some text that is visible
+
+#visible--for-medium.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'visible__for_medium')
+
+  %p Reveals an element at the medium breakpoint and greater.
+
+  %p without <code>visible--for-medium</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be visible for medium and above
+
+  %p with <code>visible--for-medium</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.visible.visible--for-medium I'm some text that should be visible for medium and above
+
+#visible--for-medium-only.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'visible__for_medium_only')
+
+  %p Reveals an element for medium devices only
+
+  %p without <code>visible--for-medium-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be visible for medium devices only
+
+  %p with <code>visible--for-medium-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.visible.visible--for-medium-only I'm some text that should be visible for medium devices only
+
+#visible--for-small-only.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'visible__for_small_only')
+
+  %p Reveals an element for small devices only
+
+  %p without <code>visible--for-small-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be visible for small devices only
+
+  %p with <code>visible--for-small-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.visible.visible--for-small-only I'm some text that should be visible for small devices only
+
+#visible--for-wide.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'visible__for_wide')
+
+  %p Reveals an element at the wide breakpoint and greater.
+
+  %p without <code>visible--for-wide</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be visible for wide and above
+
+  %p with <code>visible--for-wide</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.visible.visible--for-wide I'm some text that should be visible for wide and above
+
+#visible--for-wide-only.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'visible__for_wide_only')
+
+  %p Reveals an element for wide devices only
+
+  %p without <code>visible--for-wide-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be visible for wide devices only
+
+  %p with <code>visible--for-wide-only</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.visible.visible--for-wide-only I'm some text that should be visible for wide devices only

data/app/views/workarea/admin/style_guides/trumps/_visually_hidden.html.haml

@@ -0,0 +1,17 @@
+#visually-hidden.style-guide__subsection
+
+  %h3= link_to_style_guide('trumps', 'visually_hidden')
+
+  %p Visually hides an element off screen, keeping it accessible to assitive technology.
+
+  %p When accessibility isn't a concern, use #{link_to_style_guide('trumps', 'hidden', true)} instead.
+
+  %p without <code>visually-hidden</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p I'm some text that's about to be visually hidden
+
+  %p with <code>visually-hidden</code>:
+  .style-guide__example-block
+    %p I'm some text
+    %p.visually-hidden I'm some text that should be visually hidden

data/app/views/workarea/admin/style_guides/typography/_align.html.haml

@@ -0,0 +1,25 @@
+#align-left.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'align', false, 'align-left')
+
+  %p should align text left:
+  .style-guide__example-block
+    %p.align-left Left Aligned
+
+
+#align-center.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'align', false, 'align-center')
+
+  %p should align text center:
+  .style-guide__example-block
+    %p.align-center Center Aligned
+
+
+#align-right.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'align', false, 'align-right')
+
+  %p should align text right:
+  .style-guide__example-block
+    %p.align-right Right Aligned

data/app/views/workarea/admin/style_guides/typography/_fonts.html.haml

@@ -0,0 +1,25 @@
+#fonts.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'fonts')
+
+  %p These are the fonts available to the front-end.
+
+  %p should provide 'Roboto' via <code>font-weight: normal</code>:
+  .style-guide__example-block
+    %p{ style: 'font-family: "Roboto"; font-weight: normal;' } Roboto
+
+  %p should provide 'Roboto Medium' via <code>font-weight: 500</code>:
+  .style-guide__example-block
+    %p{ style: 'font-family: "Roboto"; font-weight: 500;' } Roboto Medium
+
+  %p should provide 'Roboto Bold' via <code>font-weight: bold</code>:
+  .style-guide__example-block
+    %p{ style: 'font-family: "Roboto"; font-weight: bold;' } Roboto Bold
+
+  %p should provide 'Roboto Mono' via <code>font-weight: normal</code>:
+  .style-guide__example-block
+    %p{ style: 'font-family: "Roboto Mono"; font-weight: normal;' } Roboto Mono
+
+  %p should provide 'Roboto Mono Bold' via <code>font-weight: bold</code>:
+  .style-guide__example-block
+    %p{ style: 'font-family: "Roboto Mono"; font-weight: bold;' } Roboto Mono Bold

data/app/views/workarea/admin/style_guides/typography/_headings.html.haml

@@ -0,0 +1,34 @@
+#headings.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'headings')
+
+  %p Sets up the element to be styled the same as an <code>h1-6</code>, using the <code>heading</code> class in combination with a <code>heading--X</code> modifier, where <code>X</code> is the
+
+  %p Can be used on any inline or block-level element to visually present the element as a heading. Frequently applied when, semantically speaking, using a given <code>h1-6</code> tag wouldn't be appropriate.
+
+  %p In the following examples we have a variety of text-wrapping elements:
+
+  %p should style a variety of elements properly.
+  .style-guide__example-block
+    %h1 Heading 1
+    %span.heading.heading--1 Heading 1
+    %h2 Heading 2
+    %p.heading.heading--2 Heading 2
+    %h3 Heading 3
+    %strong.heading.heading--3 Heading 3
+    %h4 Heading 4
+    %h6.heading.heading--4 Heading 4
+    %h5 Heading 5
+    %h3.heading.heading--5 Heading 5
+    %h6 Heading 6
+    %h1.heading.heading--6 Heading 6
+
+#heading--no-margin.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'heading__no_margin')
+
+  %p Removes bottom margin from heading
+
+  %p should remove bottom margin:
+  .style-guide__example-block
+    %span.heading.heading--1.heading--no-margin I should have no margin

data/app/views/workarea/admin/style_guides/typography/_links.html.haml

@@ -0,0 +1,47 @@
+#link.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'link')
+
+  %p Provides default styling for links via:
+  %ul
+    %li an element selector: <code>a</code>
+    %li a placeholder selector: <code>%link</code>
+    %li a class selector: <code>.link</code>
+
+  %p should style <code>a</code> tags:
+  .style-guide__example-block
+    = link_to 'Anchor Element', '#'
+
+  %p should style elements with <code>.link</code> class:
+  .style-guide__example-block
+    %span.link Span Element
+
+
+#link--secondary.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'link__secondary')
+
+  %p should provide alternate syling <code>.link--secondary</code> class:
+  .style-guide__example-block
+    = link_to 'Anchor Element', '#', class: 'link link--secondary'
+  .style-guide__example-block
+    %span.link.link--secondary Span Element
+
+
+#link--no-underline.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'link__no_underline')
+
+  %p Removes the links underline, on hover.
+
+  %p should work with <code>.link</code> class:
+  .style-guide__example-block
+    = link_to 'Anchor Element', '#', class: 'link link--no-underline'
+  .style-guide__example-block
+    %span.link.link--no-underline Span Element
+
+  %p should work with <code>.link--secondary</code> class:
+  .style-guide__example-block
+    = link_to 'Anchor Element', '#', class: 'link link--secondary link--no-underline'
+  .style-guide__example-block
+    %span.link.link--secondary.link--no-underline Span Element