From d63e17bf1344ae2be39220d172e1cd8c24772b99 Mon Sep 17 00:00:00 2001 From: cmcfadzean Date: Wed, 15 Apr 2020 15:42:59 -0700 Subject: [PATCH 1/8] adding pagination object --- .../stylesheets/sage/sage_system.css.scss | 1 + .../system/patterns/objects/_pagination.scss | 9 +++++ app/helpers/sage/objects_helper.rb | 13 +++++++ .../objects/pagination/_preview.html.erb | 34 +++++++++++++++++++ .../objects/pagination/_props.html.erb | 6 ++++ .../objects/pagination/_rules_do.html.erb | 3 ++ .../objects/pagination/_rules_dont.html.erb | 3 ++ 7 files changed, 69 insertions(+) create mode 100644 app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss create mode 100644 app/views/sage/examples/objects/pagination/_preview.html.erb create mode 100644 app/views/sage/examples/objects/pagination/_props.html.erb create mode 100644 app/views/sage/examples/objects/pagination/_rules_do.html.erb create mode 100644 app/views/sage/examples/objects/pagination/_rules_dont.html.erb diff --git a/app/assets/stylesheets/sage/sage_system.css.scss b/app/assets/stylesheets/sage/sage_system.css.scss index d95abbb71..8764d0cb0 100644 --- a/app/assets/stylesheets/sage/sage_system.css.scss +++ b/app/assets/stylesheets/sage/sage_system.css.scss @@ -61,6 +61,7 @@ @import "system/patterns/elements/overlay"; // Objects +@import "system/patterns/objects/pagination"; @import "system/patterns/objects/page_heading"; @import "system/patterns/objects/live_stream_video_grid"; @import "system/patterns/objects/live_stream_footer"; diff --git a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss new file mode 100644 index 000000000..75292805f --- /dev/null +++ b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss @@ -0,0 +1,9 @@ +/* ================================================== + ** pagination + type: object + +================================================== */ + +.sage-pagination { + // Styles here +} diff --git a/app/helpers/sage/objects_helper.rb b/app/helpers/sage/objects_helper.rb index 1e5efde0a..5af425f9d 100644 --- a/app/helpers/sage/objects_helper.rb +++ b/app/helpers/sage/objects_helper.rb @@ -13,6 +13,19 @@ module ObjectsHelper def sage_objects [ # Sage Generated Objects + { + title: "pagination", + description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + scss_design: "todo", + scss_dev: "todo", + scss_doc: "todo", + rails_design: "todo", + rails_dev: "todo", + rails_doc: "todo", + react_design: "todo", + react_dev: "todo", + react_doc: "todo" + }, { title: "page_heading", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", diff --git a/app/views/sage/examples/objects/pagination/_preview.html.erb b/app/views/sage/examples/objects/pagination/_preview.html.erb new file mode 100644 index 000000000..255617ec4 --- /dev/null +++ b/app/views/sage/examples/objects/pagination/_preview.html.erb @@ -0,0 +1,34 @@ + \ No newline at end of file diff --git a/app/views/sage/examples/objects/pagination/_props.html.erb b/app/views/sage/examples/objects/pagination/_props.html.erb new file mode 100644 index 000000000..619f771fc --- /dev/null +++ b/app/views/sage/examples/objects/pagination/_props.html.erb @@ -0,0 +1,6 @@ + + Prop Name + The description of the property goes here. + String + Default + \ No newline at end of file diff --git a/app/views/sage/examples/objects/pagination/_rules_do.html.erb b/app/views/sage/examples/objects/pagination/_rules_do.html.erb new file mode 100644 index 000000000..d985ff0c6 --- /dev/null +++ b/app/views/sage/examples/objects/pagination/_rules_do.html.erb @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/app/views/sage/examples/objects/pagination/_rules_dont.html.erb b/app/views/sage/examples/objects/pagination/_rules_dont.html.erb new file mode 100644 index 000000000..e6d213104 --- /dev/null +++ b/app/views/sage/examples/objects/pagination/_rules_dont.html.erb @@ -0,0 +1,3 @@ + \ No newline at end of file From 3aea86857b3322c48368dfad16869e0d29b04a5e Mon Sep 17 00:00:00 2001 From: cmcfadzean Date: Wed, 15 Apr 2020 15:59:13 -0700 Subject: [PATCH 2/8] updateing order --- app/views/sage/examples/objects/pagination/_preview.html.erb | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/views/sage/examples/objects/pagination/_preview.html.erb b/app/views/sage/examples/objects/pagination/_preview.html.erb index 255617ec4..00d6132c2 100644 --- a/app/views/sage/examples/objects/pagination/_preview.html.erb +++ b/app/views/sage/examples/objects/pagination/_preview.html.erb @@ -14,9 +14,7 @@ 3
  • - - ... - + ...
  • 18 From f77431115e0935ce4e9e3b05d0722eec3653572f Mon Sep 17 00:00:00 2001 From: cmcfadzean Date: Wed, 15 Apr 2020 16:05:25 -0700 Subject: [PATCH 3/8] adding in style classes --- .../system/patterns/objects/_pagination.scss | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss index 75292805f..e780fcbba 100644 --- a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss +++ b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss @@ -5,5 +5,29 @@ ================================================== */ .sage-pagination { - // Styles here + +} + +.sage-pagination__count { + +} + +.sage-pagination__link { + +} + +.sage-pagination__link--disabled { + +} + +.sage-pagination__pages { + +} + +.sage-pagination__page { + +} + +.sage-pagination__page--gap { + } From 06fdf750aeb2514bab72bda0d1dffe084cd36696 Mon Sep 17 00:00:00 2001 From: cmcfadzean Date: Wed, 15 Apr 2020 16:08:04 -0700 Subject: [PATCH 4/8] adding link class --- .../sage/system/patterns/objects/_pagination.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss index e780fcbba..c13355536 100644 --- a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss +++ b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss @@ -20,6 +20,10 @@ } +.sage-pagination__icon { + +} + .sage-pagination__pages { } @@ -29,5 +33,5 @@ } .sage-pagination__page--gap { - + } From dfbabfd3e91f6ae4a28e79d7716f05a791ebf6e9 Mon Sep 17 00:00:00 2001 From: cmcfadzean Date: Thu, 16 Apr 2020 14:17:48 -0700 Subject: [PATCH 5/8] styles --- .../system/patterns/objects/_pagination.scss | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss index c13355536..f6624b23f 100644 --- a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss +++ b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss @@ -5,33 +5,42 @@ ================================================== */ .sage-pagination { - + display: flex; + margin-bottom: sage-spacing(); } .sage-pagination__count { - + @extend %t-sage-body; + padding-right: sage-spacing(); } .sage-pagination__link { - + @extend %t-sage-body-semi; + color: sage-color(primary); + padding: 0 sage-spacing(xs); } .sage-pagination__link--disabled { - + color: sage-color(grey, 400); } .sage-pagination__icon { - + display: inline-block; + transform: translateY(2px); } .sage-pagination__pages { - + display: flex; + padding-left: 0; + list-style-type: none; } .sage-pagination__page { - + @extend %t-sage-body-semi; + color: sage-color(primary); + padding: 0 sage-spacing(2xs); } -.sage-pagination__page--gap { - +.sage-pagination__page--active { + color: sage-color(grey, 400); } From 30a0fb7b23a4d5f783f0acb86c561e5fb33b9734 Mon Sep 17 00:00:00 2001 From: cmcfadzean Date: Thu, 16 Apr 2020 14:18:58 -0700 Subject: [PATCH 6/8] updating status --- app/helpers/sage/objects_helper.rb | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/helpers/sage/objects_helper.rb b/app/helpers/sage/objects_helper.rb index 5af425f9d..1336a9061 100644 --- a/app/helpers/sage/objects_helper.rb +++ b/app/helpers/sage/objects_helper.rb @@ -16,13 +16,13 @@ def sage_objects { title: "pagination", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - scss_design: "todo", - scss_dev: "todo", + scss_design: "done", + scss_dev: "done", scss_doc: "todo", - rails_design: "todo", - rails_dev: "todo", + rails_design: "done", + rails_dev: "doing", rails_doc: "todo", - react_design: "todo", + react_design: "done", react_dev: "todo", react_doc: "todo" }, From 9ac32b671db6b2ab1e21cf7eb9cce93ce64130d6 Mon Sep 17 00:00:00 2001 From: cmcfadzean Date: Thu, 16 Apr 2020 14:45:51 -0700 Subject: [PATCH 7/8] icon position --- .../sage/system/patterns/objects/_pagination.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss index f6624b23f..e8abe2b7c 100644 --- a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss +++ b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss @@ -16,6 +16,8 @@ .sage-pagination__link { @extend %t-sage-body-semi; + display: flex; + align-items: center; color: sage-color(primary); padding: 0 sage-spacing(xs); } @@ -25,8 +27,8 @@ } .sage-pagination__icon { - display: inline-block; - transform: translateY(2px); + display: inherit; + padding: 0 sage-spacing(2xs) } .sage-pagination__pages { From 7a7cb90162501677ad467152b6986268cd5c5660 Mon Sep 17 00:00:00 2001 From: cmcfadzean Date: Fri, 17 Apr 2020 08:44:54 -0700 Subject: [PATCH 8/8] minor structure changes --- .../sage/system/patterns/objects/_pagination.scss | 3 ++- .../sage/examples/objects/pagination/_preview.html.erb | 10 +++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss index e8abe2b7c..6dca5fbcd 100644 --- a/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss +++ b/app/assets/stylesheets/sage/system/patterns/objects/_pagination.scss @@ -24,11 +24,12 @@ .sage-pagination__link--disabled { color: sage-color(grey, 400); + pointer-events: none; } .sage-pagination__icon { display: inherit; - padding: 0 sage-spacing(2xs) + padding: 0 sage-spacing(2xs); } .sage-pagination__pages { diff --git a/app/views/sage/examples/objects/pagination/_preview.html.erb b/app/views/sage/examples/objects/pagination/_preview.html.erb index 00d6132c2..db31adf28 100644 --- a/app/views/sage/examples/objects/pagination/_preview.html.erb +++ b/app/views/sage/examples/objects/pagination/_preview.html.erb @@ -1,4 +1,4 @@ -
  • - ... + ...
  • 18 @@ -23,10 +23,10 @@ 19
  • - 20 + 20
    • - + Next - + \ No newline at end of file