From 74b21d9805a6cd768d09b1fba09a7593a1eb1cce Mon Sep 17 00:00:00 2001 From: Phil Schanely Date: Mon, 13 Jul 2020 16:54:24 -0400 Subject: [PATCH] Man 278 pjs card footer indicators (#332) * Add indicator element * Add card footer * Add aria-label * Lint * Radius round utility --- app/helpers/elements_helper.rb | 9 +++++ .../elements/indicator/_markup.html.erb | 9 +++++ .../elements/indicator/_preview.html.erb | 6 ++++ .../elements/indicator/_props.html.erb | 18 ++++++++++ .../elements/indicator/_rules_do.html.erb | 0 .../elements/indicator/_rules_dont.html.erb | 0 .../examples/objects/card/_preview.html.erb | 22 ++++++++++++ .../objects/pagination/_markup.html.erb | 34 +++++++++---------- .../stylesheets/system/core/_typography.scss | 1 + .../stylesheets/system/index.scss | 1 + .../system/patterns/elements/_indicator.scss | 27 +++++++++++++++ .../system/patterns/objects/_card.scss | 21 +++++++++++- 12 files changed, 130 insertions(+), 18 deletions(-) create mode 100644 app/views/examples/elements/indicator/_markup.html.erb create mode 100644 app/views/examples/elements/indicator/_preview.html.erb create mode 100644 app/views/examples/elements/indicator/_props.html.erb create mode 100644 app/views/examples/elements/indicator/_rules_do.html.erb create mode 100644 app/views/examples/elements/indicator/_rules_dont.html.erb create mode 100644 lib/sage-frontend/stylesheets/system/patterns/elements/_indicator.scss diff --git a/app/helpers/elements_helper.rb b/app/helpers/elements_helper.rb index 728f09fa3..0ae9a60d6 100644 --- a/app/helpers/elements_helper.rb +++ b/app/helpers/elements_helper.rb @@ -75,6 +75,15 @@ def sage_elements react: "no", a11y: "todo" }, + { + title: "indicator", + description: "A simple dot-styled position indicator bar. This is currently not intended to be used as navigation but only a visual indicator.", + scss: "doing", + docs: "doing", + rails: "todo", + react: "todo", + a11y: "doing" + }, { title: "label", description: "Labels show concise metadata or indicate status in a compact format.", diff --git a/app/views/examples/elements/indicator/_markup.html.erb b/app/views/examples/elements/indicator/_markup.html.erb new file mode 100644 index 000000000..94d762268 --- /dev/null +++ b/app/views/examples/elements/indicator/_markup.html.erb @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/app/views/examples/elements/indicator/_preview.html.erb b/app/views/examples/elements/indicator/_preview.html.erb new file mode 100644 index 000000000..368e04939 --- /dev/null +++ b/app/views/examples/elements/indicator/_preview.html.erb @@ -0,0 +1,6 @@ +

Default

+<%= render "examples/elements/indicator/markup", + label: "Page", + num_items: 5, + current_item: 2 +%> \ No newline at end of file diff --git a/app/views/examples/elements/indicator/_props.html.erb b/app/views/examples/elements/indicator/_props.html.erb new file mode 100644 index 000000000..1c1c0ffc4 --- /dev/null +++ b/app/views/examples/elements/indicator/_props.html.erb @@ -0,0 +1,18 @@ + + label + The label to prepend in front of the number for the indicator in visually-hidden text. + String + + + + num_items + The total number of items to display. + Number + + + + current_item + The item that is "selected" in the indicator list. + Number + + \ No newline at end of file diff --git a/app/views/examples/elements/indicator/_rules_do.html.erb b/app/views/examples/elements/indicator/_rules_do.html.erb new file mode 100644 index 000000000..e69de29bb diff --git a/app/views/examples/elements/indicator/_rules_dont.html.erb b/app/views/examples/elements/indicator/_rules_dont.html.erb new file mode 100644 index 000000000..e69de29bb diff --git a/app/views/examples/objects/card/_preview.html.erb b/app/views/examples/objects/card/_preview.html.erb index 7716dbd8a..226971cba 100644 --- a/app/views/examples/objects/card/_preview.html.erb +++ b/app/views/examples/objects/card/_preview.html.erb @@ -135,4 +135,26 @@ img_alt: "" %> +
+
+ <%= image_pack_tag("docs/card/card-placeholder-sm.png", class: "sage-card__img", alt: "") %> +

Card w/ Rich Text and Footer

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras libero ipsum, congue a efficitur sed, luctus at purus. Vivamus scelerisque pharetra elementum.

+
    +
  • Diam in auctor sit quam laoreet imperdiet aliquam. Habitant nunc lacus semper lacus, nec a, sit enim.
    • +
  • Diam in auctor sit quam laoreet imperdiet aliquam. Habitant nunc lacus semper lacus, nec a, sit enim.
    • +
+
+
+ Previous + <%= render "examples/elements/indicator/markup", + label: "Page", + num_items: 5, + current_item: 2 + %> + Next +
+
+
\ No newline at end of file diff --git a/app/views/examples/objects/pagination/_markup.html.erb b/app/views/examples/objects/pagination/_markup.html.erb index 2df1d10a6..51a59ac50 100644 --- a/app/views/examples/objects/pagination/_markup.html.erb +++ b/app/views/examples/objects/pagination/_markup.html.erb @@ -1,23 +1,23 @@ diff --git a/lib/sage-frontend/stylesheets/system/core/_typography.scss b/lib/sage-frontend/stylesheets/system/core/_typography.scss index d58afafc9..cdc73fabd 100644 --- a/lib/sage-frontend/stylesheets/system/core/_typography.scss +++ b/lib/sage-frontend/stylesheets/system/core/_typography.scss @@ -198,6 +198,7 @@ body { @extend %t-sage-heading-6; } + li:not([class]), p:not([class]) { @extend %t-sage-body; } diff --git a/lib/sage-frontend/stylesheets/system/index.scss b/lib/sage-frontend/stylesheets/system/index.scss index e5a5479a4..04d081d7a 100644 --- a/lib/sage-frontend/stylesheets/system/index.scss +++ b/lib/sage-frontend/stylesheets/system/index.scss @@ -52,6 +52,7 @@ @import "patterns/elements/form_input"; @import "patterns/elements/form_select"; @import "patterns/elements/form_textarea"; +@import "patterns/elements/indicator"; @import "patterns/elements/label"; @import "patterns/elements/loader"; @import "patterns/elements/menu_button"; diff --git a/lib/sage-frontend/stylesheets/system/patterns/elements/_indicator.scss b/lib/sage-frontend/stylesheets/system/patterns/elements/_indicator.scss new file mode 100644 index 000000000..c0db7ccdd --- /dev/null +++ b/lib/sage-frontend/stylesheets/system/patterns/elements/_indicator.scss @@ -0,0 +1,27 @@ + +$-indicator-size: rem(7px); + +.sage-indicator-list { + display: flex; + align-items: center; + padding-left: 0; +} + +.sage-indicator { + overflow: hidden; + width: $-indicator-size; + height: $-indicator-size; + border-radius: sage-border(radius-round); + + &:not(.sage-indicator--current) { + background-color: sage-color(grey, 300); + } + + &:not(:last-child) { + margin-right: 8px; + } +} + +.sage-indicator--current { + background-color: sage-color(grey, 500); +} diff --git a/lib/sage-frontend/stylesheets/system/patterns/objects/_card.scss b/lib/sage-frontend/stylesheets/system/patterns/objects/_card.scss index fa962408b..941468a29 100644 --- a/lib/sage-frontend/stylesheets/system/patterns/objects/_card.scss +++ b/lib/sage-frontend/stylesheets/system/patterns/objects/_card.scss @@ -19,11 +19,30 @@ .sage-card--spaced.sage-card--compact & { padding: 0 $sage-card-spacing; } - :last-child { + &:last-child { margin: 0; } } +.sage-card__footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: rem(24px); + + > *:not(:last-child) { + margin-right: rem(16px); + } +} + +.sage-card__footer--align-left { + justify-content: flex-start; +} + +.sage-card__footer--align-right { + justify-content: flex-start; +} + .sage-card__title { margin: 0 0 rem(16px) 0; word-wrap: break-word;