From 7927c4b9fa655abbb457a522d061cd6327de615d Mon Sep 17 00:00:00 2001 From: kennylam <909118+kennylam@users.noreply.github.com> Date: Fri, 8 Dec 2023 09:45:13 -0500 Subject: [PATCH] chore(pages): merge component overview and gallery pages (#1728) * chore(pages): merge component overview and gallery pages * chore(images): update component overview thumbs * chore(pages): merge component overview and gallery pages * chore(images): update component overview thumbs * chore(overview): update component list * chore(merge): fix merge conflicts --- .../ComponentGallery/images/back_to_top.svg | 16 +- .../ComponentGallery/images/button.svg | 59 ++++++ .../ComponentGallery/images/button_group.svg | 64 ++++-- .../images/call_to_action.svg | 19 ++ .../ComponentGallery/images/callout_quote.svg | 39 ++-- .../images/callout_with_media.svg | 41 ++-- .../ComponentGallery/images/card.svg | 36 ++-- .../ComponentGallery/images/card_group.svg | 127 +++++------- .../ComponentGallery/images/card_in_card.svg | 55 ++--- .../ComponentGallery/images/card_link.svg | 30 +-- .../ComponentGallery/images/card_section.svg | 44 ++++ .../images/card_section_carousel.svg | 40 ++++ .../images/card_section_offset.svg | 53 +++++ .../ComponentGallery/images/carousel.svg | 44 ++-- .../ComponentGallery/images/content_group.svg | 56 ++---- .../images/content_group_banner.svg | 18 +- .../images/content_group_cards.svg | 40 ++++ .../images/content_group_pictograms.svg | 41 ++++ .../ComponentGallery/images/content_item.svg | 39 ++-- .../images/content_item_horizontal.svg | 15 ++ .../images/content_item_row.svg | 27 ++- .../images/content_section.svg | 63 +++--- .../ComponentGallery/images/cta.svg | 34 ++-- .../ComponentGallery/images/cta_block.svg | 14 ++ .../images/cta_block_and_section.svg | 10 + .../ComponentGallery/images/dotcom_shell.svg | 76 +++---- .../images/expressive_modal.svg | 71 +++---- .../ComponentGallery/images/feature_card.svg | 56 +++--- .../images/feature_section.svg | 64 +++--- .../ComponentGallery/images/filter_panel.svg | 50 ++--- .../ComponentGallery/images/footer.svg | 51 ++--- .../ComponentGallery/images/global_banner.svg | 50 +++-- .../images/horizontal_rule.svg | 8 +- .../ComponentGallery/images/image.svg | 18 -- .../ComponentGallery/images/images.svg | 14 ++ .../images/in_page_banner.svg | 7 + .../ComponentGallery/images/leadspace.svg | 9 + .../images/leadspace_block.svg | 49 +++++ .../images/leadspace_search.svg | 19 ++ .../ComponentGallery/images/leaving_ibm.svg | 39 ++++ .../images/lightbox_media_viewer.svg | 63 +++--- .../ComponentGallery/images/link_list.svg | 83 ++++---- .../images/link_list_section.svg | 123 ++++++++++++ .../images/link_with_icon.svg | 63 ++++-- .../ComponentGallery/images/locale_modal.svg | 152 +++++++------- .../ComponentGallery/images/logo_grid.svg | 37 ++-- .../ComponentGallery/images/masthead.svg | 37 ++-- .../images/pictogram_item.svg | 11 + .../ComponentGallery/images/quote.svg | 37 ++-- .../images/scroll_animations.svg | 73 +++++++ .../images/search_with_typeahead.svg | 43 ++++ .../images/structured_list.svg | 18 ++ .../images/table_of_contents.svg | 44 ++-- .../ComponentGallery/images/tabs_extended.svg | 42 ++-- .../ComponentGallery/images/tags.svg | 22 ++ .../ComponentGallery/images/video_player.svg | 8 + src/data/components.json | 190 +----------------- src/data/nav-items.yaml | 4 - src/pages/components/content-block.mdx | 190 ------------------ .../components/cta-block-and-section.mdx | 8 +- src/pages/components/cta.mdx | 76 ------- src/pages/components/gallery.mdx | 44 ---- src/pages/components/images.mdx | 6 +- src/pages/components/logo-grid.mdx | 167 --------------- src/pages/components/overview.mdx | 12 +- 65 files changed, 1597 insertions(+), 1561 deletions(-) create mode 100644 src/components/ComponentGallery/images/button.svg create mode 100644 src/components/ComponentGallery/images/call_to_action.svg mode change 100755 => 100644 src/components/ComponentGallery/images/callout_quote.svg mode change 100755 => 100644 src/components/ComponentGallery/images/callout_with_media.svg mode change 100755 => 100644 src/components/ComponentGallery/images/card.svg mode change 100755 => 100644 src/components/ComponentGallery/images/card_group.svg mode change 100755 => 100644 src/components/ComponentGallery/images/card_link.svg create mode 100644 src/components/ComponentGallery/images/card_section.svg create mode 100644 src/components/ComponentGallery/images/card_section_carousel.svg create mode 100644 src/components/ComponentGallery/images/card_section_offset.svg create mode 100644 src/components/ComponentGallery/images/content_group_cards.svg create mode 100644 src/components/ComponentGallery/images/content_group_pictograms.svg create mode 100644 src/components/ComponentGallery/images/content_item_horizontal.svg create mode 100644 src/components/ComponentGallery/images/cta_block.svg create mode 100644 src/components/ComponentGallery/images/cta_block_and_section.svg mode change 100755 => 100644 src/components/ComponentGallery/images/dotcom_shell.svg mode change 100755 => 100644 src/components/ComponentGallery/images/expressive_modal.svg mode change 100755 => 100644 src/components/ComponentGallery/images/feature_card.svg mode change 100755 => 100644 src/components/ComponentGallery/images/footer.svg mode change 100755 => 100644 src/components/ComponentGallery/images/horizontal_rule.svg delete mode 100755 src/components/ComponentGallery/images/image.svg create mode 100644 src/components/ComponentGallery/images/images.svg create mode 100644 src/components/ComponentGallery/images/in_page_banner.svg create mode 100644 src/components/ComponentGallery/images/leadspace.svg create mode 100644 src/components/ComponentGallery/images/leadspace_block.svg create mode 100644 src/components/ComponentGallery/images/leadspace_search.svg create mode 100644 src/components/ComponentGallery/images/leaving_ibm.svg mode change 100755 => 100644 src/components/ComponentGallery/images/lightbox_media_viewer.svg mode change 100755 => 100644 src/components/ComponentGallery/images/link_list.svg create mode 100644 src/components/ComponentGallery/images/link_list_section.svg mode change 100755 => 100644 src/components/ComponentGallery/images/locale_modal.svg mode change 100755 => 100644 src/components/ComponentGallery/images/masthead.svg create mode 100644 src/components/ComponentGallery/images/pictogram_item.svg mode change 100755 => 100644 src/components/ComponentGallery/images/quote.svg create mode 100644 src/components/ComponentGallery/images/scroll_animations.svg create mode 100644 src/components/ComponentGallery/images/search_with_typeahead.svg create mode 100644 src/components/ComponentGallery/images/structured_list.svg mode change 100755 => 100644 src/components/ComponentGallery/images/table_of_contents.svg create mode 100644 src/components/ComponentGallery/images/tags.svg create mode 100644 src/components/ComponentGallery/images/video_player.svg delete mode 100644 src/pages/components/content-block.mdx delete mode 100644 src/pages/components/cta.mdx delete mode 100644 src/pages/components/gallery.mdx delete mode 100644 src/pages/components/logo-grid.mdx diff --git a/src/components/ComponentGallery/images/back_to_top.svg b/src/components/ComponentGallery/images/back_to_top.svg index 6eb70d6b6..96a1ea987 100644 --- a/src/components/ComponentGallery/images/back_to_top.svg +++ b/src/components/ComponentGallery/images/back_to_top.svg @@ -1,12 +1,6 @@ - - - backtotop - - - - - - - - + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/button.svg b/src/components/ComponentGallery/images/button.svg new file mode 100644 index 000000000..606999a3c --- /dev/null +++ b/src/components/ComponentGallery/images/button.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/button_group.svg b/src/components/ComponentGallery/images/button_group.svg index e6e958ee2..65e05db62 100644 --- a/src/components/ComponentGallery/images/button_group.svg +++ b/src/components/ComponentGallery/images/button_group.svg @@ -1,14 +1,52 @@ - - - button_group - - - - - Secondary - - - Primary - - + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/call_to_action.svg b/src/components/ComponentGallery/images/call_to_action.svg new file mode 100644 index 000000000..c0a5400d2 --- /dev/null +++ b/src/components/ComponentGallery/images/call_to_action.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/callout_quote.svg b/src/components/ComponentGallery/images/callout_quote.svg old mode 100755 new mode 100644 index 3e46ff8bc..f93ccaf04 --- a/src/components/ComponentGallery/images/callout_quote.svg +++ b/src/components/ComponentGallery/images/callout_quote.svg @@ -1,22 +1,19 @@ - - - callout_quote - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/callout_with_media.svg b/src/components/ComponentGallery/images/callout_with_media.svg old mode 100755 new mode 100644 index 550f8ede3..5edef7fe4 --- a/src/components/ComponentGallery/images/callout_with_media.svg +++ b/src/components/ComponentGallery/images/callout_with_media.svg @@ -1,20 +1,23 @@ - - - callout_with_media - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/card.svg b/src/components/ComponentGallery/images/card.svg old mode 100755 new mode 100644 index 114a2d547..e64d1d02e --- a/src/components/ComponentGallery/images/card.svg +++ b/src/components/ComponentGallery/images/card.svg @@ -1,20 +1,18 @@ - - - card - - - - - - - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/card_group.svg b/src/components/ComponentGallery/images/card_group.svg old mode 100755 new mode 100644 index 88b209994..f8d373dca --- a/src/components/ComponentGallery/images/card_group.svg +++ b/src/components/ComponentGallery/images/card_group.svg @@ -1,82 +1,47 @@ - - - card_group - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/card_in_card.svg b/src/components/ComponentGallery/images/card_in_card.svg index 9e3abc634..0d66eabd6 100644 --- a/src/components/ComponentGallery/images/card_in_card.svg +++ b/src/components/ComponentGallery/images/card_in_card.svg @@ -1,28 +1,29 @@ - - - card_in_card - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/card_link.svg b/src/components/ComponentGallery/images/card_link.svg old mode 100755 new mode 100644 index d0379bc63..4d807b856 --- a/src/components/ComponentGallery/images/card_link.svg +++ b/src/components/ComponentGallery/images/card_link.svg @@ -1,20 +1,10 @@ - - - card_link - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/card_section.svg b/src/components/ComponentGallery/images/card_section.svg new file mode 100644 index 000000000..33774016d --- /dev/null +++ b/src/components/ComponentGallery/images/card_section.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/card_section_carousel.svg b/src/components/ComponentGallery/images/card_section_carousel.svg new file mode 100644 index 000000000..c299a1f10 --- /dev/null +++ b/src/components/ComponentGallery/images/card_section_carousel.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/card_section_offset.svg b/src/components/ComponentGallery/images/card_section_offset.svg new file mode 100644 index 000000000..607a9bef0 --- /dev/null +++ b/src/components/ComponentGallery/images/card_section_offset.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/carousel.svg b/src/components/ComponentGallery/images/carousel.svg index cd5f92079..62e11460e 100644 --- a/src/components/ComponentGallery/images/carousel.svg +++ b/src/components/ComponentGallery/images/carousel.svg @@ -1,17 +1,29 @@ - - - carousel - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_group.svg b/src/components/ComponentGallery/images/content_group.svg index 9e0cd9f8d..29e023de1 100644 --- a/src/components/ComponentGallery/images/content_group.svg +++ b/src/components/ComponentGallery/images/content_group.svg @@ -1,42 +1,14 @@ - - - content_group - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_group_banner.svg b/src/components/ComponentGallery/images/content_group_banner.svg index 5e9e8418f..ef9d189ae 100644 --- a/src/components/ComponentGallery/images/content_group_banner.svg +++ b/src/components/ComponentGallery/images/content_group_banner.svg @@ -1,11 +1,9 @@ - - content_group_banner - - - - - - - - \ No newline at end of file + + + + + + + + diff --git a/src/components/ComponentGallery/images/content_group_cards.svg b/src/components/ComponentGallery/images/content_group_cards.svg new file mode 100644 index 000000000..6404c3bc6 --- /dev/null +++ b/src/components/ComponentGallery/images/content_group_cards.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/content_group_pictograms.svg b/src/components/ComponentGallery/images/content_group_pictograms.svg new file mode 100644 index 000000000..4703748f4 --- /dev/null +++ b/src/components/ComponentGallery/images/content_group_pictograms.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/content_item.svg b/src/components/ComponentGallery/images/content_item.svg index 864307abd..e709631de 100644 --- a/src/components/ComponentGallery/images/content_item.svg +++ b/src/components/ComponentGallery/images/content_item.svg @@ -1,27 +1,12 @@ - - - content_item - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/content_item_horizontal.svg b/src/components/ComponentGallery/images/content_item_horizontal.svg new file mode 100644 index 000000000..7ec99815f --- /dev/null +++ b/src/components/ComponentGallery/images/content_item_horizontal.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/content_item_row.svg b/src/components/ComponentGallery/images/content_item_row.svg index 611828e81..fdd594904 100644 --- a/src/components/ComponentGallery/images/content_item_row.svg +++ b/src/components/ComponentGallery/images/content_item_row.svg @@ -1,15 +1,12 @@ - - - content_item_horizontal - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/content_section.svg b/src/components/ComponentGallery/images/content_section.svg index 6fdae6053..431c559c2 100644 --- a/src/components/ComponentGallery/images/content_section.svg +++ b/src/components/ComponentGallery/images/content_section.svg @@ -1,36 +1,29 @@ - - - content_section - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/cta.svg b/src/components/ComponentGallery/images/cta.svg index 99a0c116c..e80b90b4c 100644 --- a/src/components/ComponentGallery/images/cta.svg +++ b/src/components/ComponentGallery/images/cta.svg @@ -1,18 +1,18 @@ - - cta - - - - - - Download file - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/cta_block.svg b/src/components/ComponentGallery/images/cta_block.svg new file mode 100644 index 000000000..680d362ca --- /dev/null +++ b/src/components/ComponentGallery/images/cta_block.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/cta_block_and_section.svg b/src/components/ComponentGallery/images/cta_block_and_section.svg new file mode 100644 index 000000000..43f1b8050 --- /dev/null +++ b/src/components/ComponentGallery/images/cta_block_and_section.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/dotcom_shell.svg b/src/components/ComponentGallery/images/dotcom_shell.svg old mode 100755 new mode 100644 index be1b60ce3..df7f0d9a2 --- a/src/components/ComponentGallery/images/dotcom_shell.svg +++ b/src/components/ComponentGallery/images/dotcom_shell.svg @@ -1,39 +1,39 @@ - - - dot_com_shell - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/expressive_modal.svg b/src/components/ComponentGallery/images/expressive_modal.svg old mode 100755 new mode 100644 index f7ab669cf..c7d387762 --- a/src/components/ComponentGallery/images/expressive_modal.svg +++ b/src/components/ComponentGallery/images/expressive_modal.svg @@ -1,36 +1,37 @@ - - - expressive_modal - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/feature_card.svg b/src/components/ComponentGallery/images/feature_card.svg old mode 100755 new mode 100644 index 9def24c44..0cb33bc87 --- a/src/components/ComponentGallery/images/feature_card.svg +++ b/src/components/ComponentGallery/images/feature_card.svg @@ -1,28 +1,28 @@ - - - feature_card - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/feature_section.svg b/src/components/ComponentGallery/images/feature_section.svg index 8b735fcc0..7bba32399 100644 --- a/src/components/ComponentGallery/images/feature_section.svg +++ b/src/components/ComponentGallery/images/feature_section.svg @@ -1,31 +1,35 @@ - - - feature_section - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/filter_panel.svg b/src/components/ComponentGallery/images/filter_panel.svg index 1f4081f51..ad41f20bd 100644 --- a/src/components/ComponentGallery/images/filter_panel.svg +++ b/src/components/ComponentGallery/images/filter_panel.svg @@ -1,29 +1,23 @@ - - - filter_panel - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/footer.svg b/src/components/ComponentGallery/images/footer.svg old mode 100755 new mode 100644 index aea437229..86e9d210e --- a/src/components/ComponentGallery/images/footer.svg +++ b/src/components/ComponentGallery/images/footer.svg @@ -1,30 +1,23 @@ - - - footer - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/global_banner.svg b/src/components/ComponentGallery/images/global_banner.svg index f6e7d0fdd..663352b49 100644 --- a/src/components/ComponentGallery/images/global_banner.svg +++ b/src/components/ComponentGallery/images/global_banner.svg @@ -1,20 +1,32 @@ - - - global_banner - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/horizontal_rule.svg b/src/components/ComponentGallery/images/horizontal_rule.svg old mode 100755 new mode 100644 index 729b9515c..500c852ee --- a/src/components/ComponentGallery/images/horizontal_rule.svg +++ b/src/components/ComponentGallery/images/horizontal_rule.svg @@ -1,7 +1,3 @@ - - - horizontal_rule - - - + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/image.svg b/src/components/ComponentGallery/images/image.svg deleted file mode 100755 index 5414678bf..000000000 --- a/src/components/ComponentGallery/images/image.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - Image - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/ComponentGallery/images/images.svg b/src/components/ComponentGallery/images/images.svg new file mode 100644 index 000000000..6ae29fadd --- /dev/null +++ b/src/components/ComponentGallery/images/images.svg @@ -0,0 +1,14 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/in_page_banner.svg b/src/components/ComponentGallery/images/in_page_banner.svg new file mode 100644 index 000000000..76e030f7e --- /dev/null +++ b/src/components/ComponentGallery/images/in_page_banner.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/leadspace.svg b/src/components/ComponentGallery/images/leadspace.svg new file mode 100644 index 000000000..7faeaf206 --- /dev/null +++ b/src/components/ComponentGallery/images/leadspace.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/leadspace_block.svg b/src/components/ComponentGallery/images/leadspace_block.svg new file mode 100644 index 000000000..ea6840b0c --- /dev/null +++ b/src/components/ComponentGallery/images/leadspace_block.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/leadspace_search.svg b/src/components/ComponentGallery/images/leadspace_search.svg new file mode 100644 index 000000000..6c23d71c8 --- /dev/null +++ b/src/components/ComponentGallery/images/leadspace_search.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/leaving_ibm.svg b/src/components/ComponentGallery/images/leaving_ibm.svg new file mode 100644 index 000000000..a2b305085 --- /dev/null +++ b/src/components/ComponentGallery/images/leaving_ibm.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/lightbox_media_viewer.svg b/src/components/ComponentGallery/images/lightbox_media_viewer.svg old mode 100755 new mode 100644 index 36da7e6f0..105536ecc --- a/src/components/ComponentGallery/images/lightbox_media_viewer.svg +++ b/src/components/ComponentGallery/images/lightbox_media_viewer.svg @@ -1,33 +1,32 @@ - - - lightbox_media_viewer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/link_list.svg b/src/components/ComponentGallery/images/link_list.svg old mode 100755 new mode 100644 index f268fec46..628e1e638 --- a/src/components/ComponentGallery/images/link_list.svg +++ b/src/components/ComponentGallery/images/link_list.svg @@ -1,39 +1,46 @@ - - - link_list - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/link_list_section.svg b/src/components/ComponentGallery/images/link_list_section.svg new file mode 100644 index 000000000..164c3f77f --- /dev/null +++ b/src/components/ComponentGallery/images/link_list_section.svg @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/link_with_icon.svg b/src/components/ComponentGallery/images/link_with_icon.svg index b45fc05c9..fdb4862de 100644 --- a/src/components/ComponentGallery/images/link_with_icon.svg +++ b/src/components/ComponentGallery/images/link_with_icon.svg @@ -1,18 +1,47 @@ - - - link_with_icon - - - - - - Link with icon - - - - - - - - + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/locale_modal.svg b/src/components/ComponentGallery/images/locale_modal.svg old mode 100755 new mode 100644 index e51820a45..ca1e5fe37 --- a/src/components/ComponentGallery/images/locale_modal.svg +++ b/src/components/ComponentGallery/images/locale_modal.svg @@ -1,69 +1,85 @@ - - - locale_modal - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/logo_grid.svg b/src/components/ComponentGallery/images/logo_grid.svg index ad3d35030..7f1f711e6 100644 --- a/src/components/ComponentGallery/images/logo_grid.svg +++ b/src/components/ComponentGallery/images/logo_grid.svg @@ -1,22 +1,17 @@ - - logo_grid - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/masthead.svg b/src/components/ComponentGallery/images/masthead.svg old mode 100755 new mode 100644 index cad667e24..f30fee315 --- a/src/components/ComponentGallery/images/masthead.svg +++ b/src/components/ComponentGallery/images/masthead.svg @@ -1,19 +1,18 @@ - - - masthead - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/pictogram_item.svg b/src/components/ComponentGallery/images/pictogram_item.svg new file mode 100644 index 000000000..d29a6c333 --- /dev/null +++ b/src/components/ComponentGallery/images/pictogram_item.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/quote.svg b/src/components/ComponentGallery/images/quote.svg old mode 100755 new mode 100644 index 6d35f0ccb..241fab9ec --- a/src/components/ComponentGallery/images/quote.svg +++ b/src/components/ComponentGallery/images/quote.svg @@ -1,23 +1,16 @@ - - - quote - - - - - - - - - - - - “ - - - ” - - - - + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/scroll_animations.svg b/src/components/ComponentGallery/images/scroll_animations.svg new file mode 100644 index 000000000..1968121cd --- /dev/null +++ b/src/components/ComponentGallery/images/scroll_animations.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/search_with_typeahead.svg b/src/components/ComponentGallery/images/search_with_typeahead.svg new file mode 100644 index 000000000..d078dcb3a --- /dev/null +++ b/src/components/ComponentGallery/images/search_with_typeahead.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/structured_list.svg b/src/components/ComponentGallery/images/structured_list.svg new file mode 100644 index 000000000..912cd387d --- /dev/null +++ b/src/components/ComponentGallery/images/structured_list.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/table_of_contents.svg b/src/components/ComponentGallery/images/table_of_contents.svg old mode 100755 new mode 100644 index 641f61b84..601c88a4a --- a/src/components/ComponentGallery/images/table_of_contents.svg +++ b/src/components/ComponentGallery/images/table_of_contents.svg @@ -1,27 +1,19 @@ - - - table_of_contents - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/tabs_extended.svg b/src/components/ComponentGallery/images/tabs_extended.svg index 6f86caeb0..cb03ed4b0 100644 --- a/src/components/ComponentGallery/images/tabs_extended.svg +++ b/src/components/ComponentGallery/images/tabs_extended.svg @@ -1,29 +1,13 @@ - - - tab_extended - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ComponentGallery/images/tags.svg b/src/components/ComponentGallery/images/tags.svg new file mode 100644 index 000000000..c4d9a4da3 --- /dev/null +++ b/src/components/ComponentGallery/images/tags.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ComponentGallery/images/video_player.svg b/src/components/ComponentGallery/images/video_player.svg new file mode 100644 index 000000000..892cf12a5 --- /dev/null +++ b/src/components/ComponentGallery/images/video_player.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/src/data/components.json b/src/data/components.json index 279016f95..4275a9b56 100644 --- a/src/data/components.json +++ b/src/data/components.json @@ -18,23 +18,6 @@ "notAvailable": false } }, - "CTA": { - "url": "/components/cta", - "designLink": "https://ibm.box.com/s/unvd38oewwguycqoqg0et75eluiiqhg6", - "description": "CTA stands for call to action. A CTA refers to the use of words or phrases that can compel an audience to act in a specific way.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-cta--text" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Card": { "url": "/components/cards", "designLink": "https://ibm.ent.box.com/folder/95514001950?s=qqw0soczjpawvuh9j3x19fmcoqk1zsw7", @@ -213,7 +196,7 @@ "notAvailable": false } }, - "Image": { + "Images": { "url": "/components/images", "designLink": "https://ibm.box.com/s/zaofzs8ssrfbkgker2lqxyvdnbpxvsly", "description": "The image component offers multiple options to best display imagery in the page.", @@ -301,23 +284,6 @@ "notAvailable": false } }, - "Link list section": { - "url": "/components/link-list-section", - "designLink": "https://ibm.box.com/s/mktywz4ujxo9yiiu371kgzbib93uc2po", - "description": "Link list section is used for multiple CTAs, with options for vertical and horizontal lists and varying CTA styling.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-link-list-section--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Link with icon": { "url": "/components/link-with-icon", "designLink": "https://ibm.box.com/s/i3jd6saoz0m851j2ohggrn452bnd51dm", @@ -481,69 +447,6 @@ "notAvailable": false } }, - "Card section images": { - "url": "/components/card-section#card-section-images", - "designLink": "https://ibm.box.com/s/u4acyo9oeqya8xidimxtidh8k8y08fza", - "description": "Card section images is a collection of card components with images that, together, occupy a full-width section with a left-column header.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-card-section-images--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, - "Content block": { - "url": "/components/content-block", - "designLink": "https://ibm.box.com/s/uaq0ovswviefwbv7gd4jn13llvqb23f8", - "description": "Content block is a high-level layout component that acts as the main content unit used inside of a Content section to build web experiences on IBM dotcom. It encapsulates other content components (one or multiple content groups) and brings them together into a custom visual, which solves a specific problem for the user.", - "storybook": { - "webcomponents": "https://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-block--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-block--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, - "Content block": { - "url": "/components/content-block", - "designLink": "https://ibm.box.com/s/uaq0ovswviefwbv7gd4jn13llvqb23f8", - "description": "Content block is one of the main layout components that can be used to build web experiences on IBM.com. It includes a large heading, subheading, body copy and CTA, and can accept many child components to enable customization and flexibility.", - "storybook": { - "webcomponents": "https://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-block--default", - "react": "https://www.ibm.com/standards/carbon/react/?path=/story/components-content-block--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-block--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - }, - "react": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Content group": { "url": "/components/content-group", "designLink": "https://ibm.box.com/s/5n0sj6b3kkicnwimxmgnwb5owm46g8wz", @@ -580,24 +483,6 @@ "notAvailable": false } }, - "Content item horizontal": { - "url": "/components/content-item-horizontal", - "designLink": "https://ibm.box.com/s/yiv7f37ktudwx1do7d9mp4bak17wl4dh", - "description": "Content item horizontal component displays information in a horizontal orientation.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-content-item-horizontal--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-item-horizontal--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Content item row": { "url": "/components/content-item-row", "designLink": "https://ibm.box.com/s/yiv7f37ktudwx1do7d9mp4bak17wl4dh", @@ -634,7 +519,7 @@ "notAvailable": false } }, - "CTA block": { + "CTA block and section": { "url": "/components/cta-block-and-section", "designLink": "https://ibm.ent.box.com/folder/132927464120?s=1mbmay093kclwwjhuhmux0kqzptvpgj3", "description": "CTA block and section are used to communicate actions that users can take along with some information that is relevant to the actions.", @@ -651,24 +536,6 @@ "notAvailable": false } }, - "CTA section": { - "url": "/components/cta-block-and-section", - "designLink": "https://ibm.box.com/s/yz1uixuxjf7lge5yvrup3yb3owj70071", - "description": "CTA section is used to communicate actions that users can take along with some information that is relevant to the actions.", - "storybook": { - "webcomponents": "https://www.ibm.com/standards/carbon/web-components/?path=/story/components-cta-section--simple", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-cta-section--simple" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Feature section": { "url": "/components/feature-section", "designLink": "https://ibm.box.com/s/pffea4dd5aug4m3v6za7ewjd1metosg8", @@ -723,23 +590,6 @@ "notAvailable": false } }, - "Layout": { - "url": "/components/layout", - "designLink": false, - "description": "The layout component is to be utilized within IBM.com for various abstract layout configurations.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-layout--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Lead space": { "url": "/components/leadspace", "designLink": "https://ibm.box.com/s/d9jey3rlfxqmxu059f0x9dtcx7f5ehuh", @@ -794,24 +644,6 @@ "notAvailable": false } }, - "Logo grid": { - "url": "/components/logo-grid", - "designLink": "https://ibm.box.com/s/2c2dt2fivbmbcce29oul7hjaktjaqj26", - "description": "Logo grid is used to present a group of client or partner logos. Currently the logos are not clickable.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-logo-grid--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-logo-grid--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } - }, "Table of contents": { "url": "/components/table-of-contents", "designLink": "https://ibm.box.com/s/yfuicifhfeaefp4rl0pp62dpeacr18ry", @@ -829,24 +661,6 @@ "underConstruction": false, "notAvailable": false } - }, - "Tabs extended media": { - "url": "/components/tabs-extended#tabs-extended-media", - "designLink": "https://ibm.box.com/s/3sun8lo3gu2b4uaa4oxgpxrqit1m7t6i", - "description": "Use this component to interactively reveal related content, or as a gateway to pages with more details.", - "storybook": { - "webcomponents": "http://www.ibm.com/standards/carbon/web-components/?path=/story/components-tabs-extended-with-media--default", - "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tabs-extended-media--default" - }, - "webcomponents": { - "stable": true, - "experimental": false, - "new": false, - "updated": false, - "deprecated": false, - "underConstruction": false, - "notAvailable": false - } } } } diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index 9d890bd4d..dc33eab32 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -76,8 +76,6 @@ path: /components/card-group - title: Carousel path: /components/carousel - - title: Content block - path: /components/content-block - title: Content group path: /components/content-group - title: Content item @@ -86,8 +84,6 @@ path: /components/content-item-row - title: Content section path: /components/content-section - - title: CTA - path: /components/cta - title: CTA block & section path: /components/cta-block-and-section - title: Dotcom shell diff --git a/src/pages/components/content-block.mdx b/src/pages/components/content-block.mdx deleted file mode 100644 index 8739a42d4..000000000 --- a/src/pages/components/content-block.mdx +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Content block -description: Content block is one of the main layout components that can be used to build web experiences on IBM.com. It includes a large heading, subheading, body copy and CTA, and can accept many child components to enable customization and flexibility. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Overview -Modifiers -Behaviors -Gallery -Resources -Content guidance -Related components -Feedback - - - -## Overview - -The content block acts as the heading level two on pages after the lead space component and spans 12 columns of the 16 column grid. The content block is commonly used to divide the main categories or sections of the page to help guide the user through the content or narrative. - -![Image of the content block with a heading, subheading, body copy, link with item, and bottom border](../../images/component/content-block/content-block-overview.png) - -Example of the content block. - -### Anatomy - -![Anatomy image of the content block](../../images/component/content-block/content-block-anatomy.png) - -1. **Content block heading:** An optional, customizable heading. -2. **Sub heading:** An optional, customizable sub heading. -3. **Copy:** An optional short description. -4. **Child container:** Insert additional components to enhance the narrative, such as content group, content item or card group. -5. **CTA:** Use this as a general call to action, typically used to encompass the entire content section. -6. **Border:** An optional bottom border. - -### Usage - -Content block is often paired with the content section or the vertical table of contents to guide the user through the narrative and activate the first four columns of the 16 column grid. - - - - - -![Content block with a section heading at the desktop breakpoint. The section heading is highlighted.](../../images/component/content-block/content-block-usage-01.png) - - - Content block paired with a content section, the content section heading is - highlighted. - - - - - - -![Content block with a table of contents - vertical at the desktop breakpoint. The table of contents - vertical is highlighted.](../../images/component/content-block/content-block-usage-02.png) - - - Content block paired with a table of contents vertical, the table of contents - is highlighted. - - - - - - -## Modifiers - -### Children - -Similar to the content block, the content block can accept child components which allows designers and authors maximum flexibility when creating page layouts. The most common layouts on IBM.com are 8 column and 12 column components. - -There is no limit to how many child components the content block can accept - consider the story you are trying to tell, the overall hierarchy of the page and how many content blocks should be used to break up the content. View the [gallery](#gallery) to see examples of content block with various child components. - -#### 8 column child - -In this example the content block is paired with a group of [content item pictograms](./content-item) that span the center 8 columns of the grid. - -![A content block with only the heading enabled. Nested inside the content block is three content items in the horizontal orientation, each displaying a different pictogram and contianing different content.](../../images/component/content-block/content-block-modifiers-01.png) - - - Content block with a heading and content group containing content items - featuring pictograms - - -#### 12 column child - -In this example the content block is paired with a [card group](./card-group) that spans 12 columns of the grid. - -![A content block with only the heading enabled. Nested inside the content block is a card group displaying resources for various IBM product offerings such as "AI & machine learning" and "Analytics".](../../images/component/content-block/content-block-modifiers-02.png) - - - Content block with a heading and a card group child spanning 12 columns - - -#### Mixing children widths - -The content block can support mixing of various children and how many columns of the grid the children can span. Most of the Carbon for IBM.com components have been carefully designed with line length and column usage in mind, and therefore should fit within the columns without alteration. - -In this example the content block spans 8 columns, but has a group of content items that span 12 columns of the grid. - -![A content block with a heading and body copy spanning 8 columns. Nested inside the content block is three content items spanning 12 columns.](../../images/component/content-block/content-block-modifiers-03.png) - - - Example of the content block with a heading and subheading spanning 8 columns, - and a set of content items spanning 12 columns. - - -## Behaviors - -At smaller breakpoints the content block will respond to the 2x grid. - - - - - -![Image of the content block at tablet breakpoint](../../images/component/content-block/content-block-behavior-01.png) - -Example of content block medium breakpoint - - - - - -![Image of the content section at mobile breakpoint](../../images/component/content-block/content-block-behavior-02.png) - -Example of content block at mobile breakpoint - - - - - -## Gallery - -The content block is one of the main layout components for designing pages of the IBM.com platform. Here are some examples of various layouts you can create by utilizing the extreme flexibility the content block provides by utilizing the varying heading options and adding custom children. - - - - -![A content block with a vertical table of contents, heading, subheading, image, and link with icon](../../images/component/content-block/content-block-gallery-01.png) - - - - -![A content block with heading, subheading, and group of content items in a grid](../../images/component/content-block/content-block-gallery-02.png) - - - - -![A content block with with heading, subheading, image, and quote](../../images/component/content-block/content-block-gallery-03.png) - - - - -![A content block with a heading, subheading, button, and the bottom border enabled](../../images/component/content-block/content-block-gallery-04.png) - - - - - - -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| ---------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | -------------------------------------------------------------------------------------------- | -| Heading | Text | No | 1 | 40 / 55 | | -| Sub heading | Text | No | 1 | 120 / 150 | | -| Copy | Text | No | 1 | 1600 / 2400 | | -| Child container | Component | No | 1+ | – | An optional container area that child components and other content types can be passed into. | -| [CTA](https://www.ibm.com/standards/carbon/components/cta) | Component | No | 1 | 25 / 35 | | -| Border | Component | No | 1 | – | | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - -## Related components - -| Component name | Description | -| ------------------------------------------------ | ---------------------------------------------------------------------------------- | -| [Content section](../components/content-section) | Content section is one of the main content components used to structure pages. | -| [Content group](../components/content-group) | Content group is one of the main content components used to display content items. | -| [Content item](../components/content-item) | Content item is the lowest level hierarchically of the content components. | - - diff --git a/src/pages/components/cta-block-and-section.mdx b/src/pages/components/cta-block-and-section.mdx index 69288431a..74594f078 100644 --- a/src/pages/components/cta-block-and-section.mdx +++ b/src/pages/components/cta-block-and-section.mdx @@ -7,7 +7,7 @@ import ComponentDescription from 'components/ComponentDescription'; import ComponentFooter from 'components/ComponentFooter'; import ResourceLinks from 'components/ResourceLinks'; - + @@ -78,7 +78,7 @@ CTA block combines a heading, copy and CTA(s), this component is typically used 3. **CTA type:** Optional call to action for the user, button or text link can be used. 4. **Content item or link list:** Optional, add various content items or a link list. - + ### Content guidance for CTA block @@ -108,7 +108,7 @@ CTA section builds off of CTA block and adds a content section heading in the le 4. **CTA type:** Optional call to action for the user, a button or text link can be used. 5. **Content item or link list:** CTA section allows for adding various content items or a link list. - + ### Content guidance for CTA section @@ -195,4 +195,4 @@ This variation adds a link list below the primary content and is typically used For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - + diff --git a/src/pages/components/cta.mdx b/src/pages/components/cta.mdx deleted file mode 100644 index 206bfc308..000000000 --- a/src/pages/components/cta.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: CTA -description: - CTA stands for call-to-action. A CTA refers to the use of words or phrases that can compel an audience to act in a - specific way. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ArrowDown20 from '@carbon/icons-react/es/arrow--down/20'; -import ArrowLeft20 from '@carbon/icons-react/es/arrow--left/20'; -import Launch20 from '@carbon/icons-react/es/launch/20'; -import PlayOutline20 from '@carbon/icons-react/es/play--outline/20'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Types -Styles -Feedback - - - - - -## Types - -A CTA type defines the function of a given CTA to best inform the user what action to take. - -| Type | Icon | Description | -| :--------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------- | -| _Jump_ | | The jump link uses the down arrow to indicate to the user this link jumps down the page. | -| _Local_ | | The local link is mainly used to navigate a user to another destination within IBM.com. | -| _External_ | | The external link uses the launch icon to indicate that this link leaves the current page, and opens within a new tab. | -| _Video_ | | The video type CTA pulls metadata from Kaltura to populate the link’s content, and launches within the LightboxMediaViewer. | - -
- -## Styles - -A CTA style defines the look of a given CTA to best express what action will occur when the user interacts with it. - -### Text - -The default Text style is a simple link with icon component. This type of CTA can be used at low levels within the page -hierarchy. See link usage -guidelines on the Carbon Design System website to learn more. - -![A visual of cta text stype](../../images/component/cta/cta-text-style.jpg) - -### Button - -The Button CTA style can communicate the primary and secondary action for that page to the user. - -![A visual of cta button stype](../../images/component/cta/cta-button-style.jpg) - -### Card - -The [Card](https://www.ibm.com/standards/carbon/components/cards#card) CTA type is a small -[Card link](https://www.ibm.com/standards/carbon/components/cards#card-link) that can be used at higher levels within -the hierarchy. - -![A visual of cta card stype](../../images/component/cta/cta-card-style.jpg) - -### Feature - -The feature CTA type is a larger version of [Card](https://www.ibm.com/standards/carbon/components/cards#card) and should only -be used once within a [Content block](https://www.ibm.com/standards/carbon/components/content-block-simple). See the -Feature card page to learn more about [Feature card](../components/cards#feature-card). - -![A visual of cta feature stype](../../images/component/cta/cta-feature-style.jpg) - - diff --git a/src/pages/components/gallery.mdx b/src/pages/components/gallery.mdx deleted file mode 100644 index 8a907baab..000000000 --- a/src/pages/components/gallery.mdx +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Components -description: Components are one of the key building blocks of the design system. -tabs: ['Overview', 'Gallery'] ---- - -import ComponentGallery from 'components/ComponentGallery'; - - - -Components are one of the key building blocks of the design system. Each component has been designed and coded to solve a specific UI or layout problem, such as presenting a list of options, enabling submission of a form, providing feedback to the user, and so on. All of the components in Carbon for IBM.com have been designed to work harmoniously together, as parts of a greater whole. - - - -## Carbon for IBM.com components - -### UI Components - -Components that are designed and built to support or enable small UI tasks and actions. They can be paired with other components to create layout components, templates, and patterns. - - - -### Layout components - -Layout components show some of the common layouts used in IBM’s digital space. They are carefully designed and coded to communicate prescribed content types and are expressions of IBM’s distinct brand ethos. - - - -## Core components - - - - - -![Carbon icon](../../images/icon/carbon-icon.svg) - - - - diff --git a/src/pages/components/images.mdx b/src/pages/components/images.mdx index bfe14f9fd..bc4cf1351 100644 --- a/src/pages/components/images.mdx +++ b/src/pages/components/images.mdx @@ -11,7 +11,7 @@ import reactSymbol from '../../images/icon/react-icon.svg'; import webComponentsSymbol from '../../images/icon/web-components-icon.svg'; import ResourceLinks from 'components/ResourceLinks'; - + Overview @@ -122,7 +122,7 @@ Lightbox has two contrast settings: light-contrast and dark-contrast. Either can Note that the lightbox border is independent of the page's Carbon theme – the lightbox contrast setting is chosen by the adopter based on the imagery needs. - + ## Content guidance @@ -135,4 +135,4 @@ Note that the lightbox border is independent of the page's Carbon theme – the For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - + diff --git a/src/pages/components/logo-grid.mdx b/src/pages/components/logo-grid.mdx deleted file mode 100644 index f22554799..000000000 --- a/src/pages/components/logo-grid.mdx +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Logo grid -description: - Logo grid is used to present a group of client or partner logos. This pattern is commonly used to establish - credibility of the given product or service. ---- - -import ComponentDescription from 'components/ComponentDescription'; -import ComponentFooter from 'components/ComponentFooter'; -import ResourceLinks from 'components/ResourceLinks'; - - - - - -Resources -Overview -Logo placement -Content guidance -Feedback - - - - - -## Overview - -Logo grid consists of a heading and a group of logos. Each logo should be contained inside a space (4:3 aspect ratio) -and the logos are not clickable. - -![default](../..//images/pattern/logo-grid/logo-grid-default.png) - -
- -## Logo placement - -Logos should be centered within a 4:3 aspect ratio to create optical alignment, visual hierarchy, and ensure all brands -have equal representation. - -### Grid template - -Use the [logo grid template](https://ibm.box.com/s/t85vh5blf8lbya13ro2c40pzp49m5es1) to size logos and align them within -the varying grid guides to achieve equal visual hierarchy. - - - - - -![Logo grid template](../../images/pattern/logo-grid/logo-grid-grid-template.png) - -Logo grid template - - - - - -The grid is meant to be used as a guideline. Make optical adjustments when necessary. - - - - - -![Example of logos within the logo grid](../../images/pattern/logo-grid/logo-grid-grid-template-4-example.png) - -Example of logos within the logo grid - - - - - - - - - -![Sketch icon](../../images/icon/sketch-symbol.svg) - - - - - -### Tips and techniques - -#### Alignment - -Logos should be vertically and horizontally centered within a 4:3 aspect ratio. Consider the weight, width, and height -when aligning the logo to the grid to find equal weight with all logos. Don’t fit every logo to the max width. - - - - -![Always place logo in the center of the template and scale to fit the height or width within the logo grid guides.](../../images/pattern/logo-grid/logo-grid-alignment-do.png) - - - - -![Don't scale every logo to the max width.](../../images/pattern/logo-grid/logo-grid-alignment-dont.png) - - - - -#### Orientation - -When available, use horizontally-oriented logos to fit comfortably within the grid and to maintain visual hierarchy. - - - - -![Horizontally-oriented logos are easier to fit within the grid template to maintain a consistent hierarchy with other logos.](../../images/pattern/logo-grid/logo-grid-orientation-do.png) - - - - -![Avoid using vertically oriented logos that don’t fit nicely within the grid template.](../../images/pattern/logo-grid/logo-grid-orientation-dont.png) - - - - -#### Type - -Use logos that include the company name or wordmark, rather than an icon, to ensure brand recognition. - - - - -![Use logos with the brand name or wordmark.](../../images/pattern/logo-grid/logo-grid-type-do.png) - - - - -![Avoid using icon only logos to ensure brand recognition.](../../images/pattern/logo-grid/logo-grid-type-dont.png) - - - - -#### Color - -When placed in a group, ensure visual consistency by using either all full-color logos or all monotone logos. Don’t mix -full color and monotone, unless the brand colors are black and white. - - - - -![Do use full-color logos for all logos placed in a group.](../../images/pattern/logo-grid/logo-grid-color-do.png) - - - - -![Don't mix full-color and monotone logos when placed in a group.](../../images/pattern/logo-grid/logo-grid-color-dont.png) - - - - -## Content guidance - -| Element | Content type | Required | Instances | Character limit
(English / translated) | Notes | -| --------------------------------------------------------------- | --------------------------------------------------------------- | -------- | --------- | ------------------------------------------- | --------------------------------------- | -| Heading | Text | Yes | 1 | 75 / 100 | | -| Media | [Image](https://www.ibm.com/standards/carbon/components/images) | Yes | 3–12 | – | | -| Image alt text | Text | No | 3–12 | 75 / 100 | Image description(s) for accessibility. | -| [CTA](https://www.ibm.com/standards/carbon/components/cta#card) | Component | No | 1 | – | Local type and card style only. | - -For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards). - - diff --git a/src/pages/components/overview.mdx b/src/pages/components/overview.mdx index 7dfbb3404..afe7606f6 100644 --- a/src/pages/components/overview.mdx +++ b/src/pages/components/overview.mdx @@ -1,10 +1,9 @@ --- title: Components description: Components are one of the key building blocks of the design system. -tabs: ['Overview', 'Gallery'] --- -import { ComponentList, TagKey } from 'components/ComponentList'; +import ComponentGallery from 'components/ComponentGallery'; @@ -18,18 +17,13 @@ Components are one of the key building blocks of the design system. Each compone Components that are designed and built to support or enable small UI tasks and actions. They can be paired with other components to create layout components, templates, and patterns. - + ### Layout components Layout components show some of the common layouts used in IBM’s digital space. They are carefully designed and coded to communicate prescribed content types and are expressions of IBM’s distinct brand ethos. - - -
-
- - + ## Core components