diff --git a/playbook-website/app/controllers/pages_controller.rb b/playbook-website/app/controllers/pages_controller.rb index 85fb399310..b4bf4423b5 100755 --- a/playbook-website/app/controllers/pages_controller.rb +++ b/playbook-website/app/controllers/pages_controller.rb @@ -211,7 +211,7 @@ def aggregate_kits end def categories - aggregate_kits.map { |item| item["name"] } + aggregate_kits.map { |item| item["category"] } end def all_kits @@ -229,7 +229,7 @@ def set_js end def set_category - @category = params[:name] + @category = params[:category] if categories.include?(@category) && helpers.category_has_kits?(category_kits: kit_categories, type: params[:type]) @category_kits = kit_categories @kits = params[:name] @@ -239,8 +239,8 @@ def set_category end def kit_categories - @category = params[:name] - aggregate_kits.find { |item| item["name"] == @category }["components"].map { |component| component["name"] } + @category = params[:category] + aggregate_kits.find { |item| item["category"] == @category }["components"].map { |component| component["name"] } end def set_kit diff --git a/playbook-website/app/helpers/application_helper.rb b/playbook-website/app/helpers/application_helper.rb index 2c0ef96eec..8f6781c648 100644 --- a/playbook-website/app/helpers/application_helper.rb +++ b/playbook-website/app/helpers/application_helper.rb @@ -150,11 +150,11 @@ def aggregate_kits_with_status all_kits = [] MENU["kits"].each do |kit| - kit_name = kit["name"] + kit_category = kit["category"] # Modify this line to include both name and status in the components array components = kit["components"].map { |c| { name: c["name"], status: c["status"] } } - all_kits << { kit_name => components } + all_kits << { kit_category => components } end all_kits @@ -166,7 +166,7 @@ def search_list aggregate_kits_with_status.each do |kit| if kit.is_a? Hash - _kit_name, components = kit.first + _kit_category, components = kit.first components.each do |component| all_kits.push(component[:name]) if component[:status] != "beta" end diff --git a/playbook-website/config/menu.yml b/playbook-website/config/menu.yml index ffd1a6dac8..da2349d1ef 100644 --- a/playbook-website/config/menu.yml +++ b/playbook-website/config/menu.yml @@ -1,474 +1,568 @@ -web: &web ["rails", "react"] -all: &all ["rails", "react", "swift"] -rails_swift: &rails_swift ["rails", "swift"] -react_swift: &react_swift ["swift", "react"] -rails_only: &rails_only ["rails"] -react_only: &react_only ["react"] -swift_only: &swift_only ["swift"] - +--- +web: &1 +- rails +- react +all: &3 +- rails +- react +- swift +rails_swift: +- rails +- swift +react_swift: +- swift +- react +rails_only: &4 +- rails +react_only: &2 +- react +swift_only: +- swift kits: - - name: alerts_and_dialogs - description: - components: - - name: "dialog" - platforms: *web - description: - status: "stable" - - name: "fixed_confirmation_toast" - platforms: *web - description: Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task. - status: "stable" - - name: "popover" - platforms: *web - description: A popover is a way to toggle content on top of other content. It can be used for small texts, small forms, or even dropdowns. By default, popover will toggle open/closed by simply clicking the trigger element. - status: "stable" - - name: "tooltip" - platforms: *web - description: - status: "stable" - - name: buttons - description: Buttons are used primarily for actions, such as “Save” and “Cancel”. Link Buttons are used for less important or less commonly used actions, such as “view shipping settings”. - components: - - name: "button" - platforms: *web - description: - status: "stable" - - name: "button_toolbar" - platforms: *web - description: This kit should primarily hold the most commonly used buttons. - status: "stable" - - name: "circle_icon_button" - platforms: *web - description: When using Icon Circle Button, the icon must be clear a clear indication of what the button does because there is no text. - status: "stable" - - name: data_visualization - description: - components: - - name: "map" - platforms: *react_only - description: This kit provides a wrapping class to place around the MapLibre library. - status: "stable" - - name: "table" - platforms: *web - description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. - status: "stable" - - name: "advanced_table" - platforms: *web - description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting. - status: "stable" - - name: "list" - platforms: *web - description: Lists display a vertical set of related content. - status: "stable" - - name: "filter" - platforms: *web - description: This kit can be implemented in a variety of ways. To see examples of how to implement this kit in production visit the /dev_docs/search page in production. - status: "stable" - - name: "distribution_bar" - platforms: *web - description: Can be used in the same way a pie chart can be used. By default, Distribution Bar comparatively represents data without numbers. - status: "stable" - - name: "legend" - platforms: *web - description: A key used to compare the variables and their value in any given graph. - status: "stable" - - name: "gauge" - platforms: *web - description: - status: "stable" - - name: "bar_graph" - platforms: *web - description: Bar graphs are used to compare data. Bar graphs are not typically used to show percentages. - status: "stable" - - name: "circle_chart" - platforms: *web - description: - status: "stable" - - name: "line_graph" - platforms: *web - description: Line graphs are used to show changes in data over time. - status: "stable" - - name: "treemap_chart" - platforms: *web - description: Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points. - status: "stable" - - name: date_and_time_text_patterns - description: "" - components: - - name: "date" - platforms: *web - description: Use to display the date. Year will not display if it is the current year. - status: "stable" - - name: "date_range_inline" - platforms: *web - description: Use to display a date range. Year will not show if it is the current year. - status: "stable" - - name: "date_range_stacked" - platforms: *web - description: - status: "stable" - - name: "date_stacked" - platforms: *web - description: Use to display the date, stacking month and day. Year will not show if it is the current year. - status: "stable" - - name: "date_time" - platforms: *web - description: Date Time is a composite kit that leverages the Date and Time kits. The Date Time kit is affected by time zones and defaults to "America/New_York". - - name: "date_time_stacked" - platforms: *web - description: - status: "stable" - - name: "date_year_stacked" - platforms: *web - description: This kit is a simple option for displaying dates in a month, day and the year format. - status: "stable" - - name: "time" - platforms: *web - description: This kit consist of large display and table display format. It includes and icon, and a time zone. - status: "stable" - - name: "time_range_inline" - platforms: *web - description: - status: "stable" - - name: "time_stacked" - platforms: *web - description: - status: "stable" - - name: "timestamp" - platforms: *all - description: This low profile kit displays time. Elapsed, current, future, or otherwise. - status: "stable" - - name: "weekday_stacked" - platforms: *web - description: - status: "stable" - - name: form_and_dashboard_text_patterns - description: "" - components: - - name: "contact" - platforms: *web - description: Use to display customer's or user's contact information. - status: "stable" - - name: "currency" - platforms: *web - description: Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels. - status: "stable" - - name: "home_address_street" - platforms: *web - description: This kit can be used to display the address for a homeowner/project. It contains street address, APT format, City, state and zip. A Project hashtag can be used as a prop to link back to a project. - status: "stable" - - name: "label_pill" - platforms: *web - description: This kit combines the caption and pill kit with all its variants. - status: "stable" - - name: "label_value" - platforms: *web - description: This kit can be very versatile when used to display text data. - status: "stable" - - name: "person" - platforms: *web - description: This kit is broken down into a first name last name format with normal and bold weighted text. - status: "stable" - - name: "person_contact" - platforms: *web - description: This kit can be used to display a person contact information. - status: "stable" - - name: "source" - platforms: *web - description: General use is to describe the discovery of businesses, customers, etc. This kit can also be used for other purposes as well. - status: "stable" - - name: "dashboard_value" - platforms: *web - description: Use in dashboards to give the viewer a quick overview of important metrics. If want to show currency, use Currency Kit. - status: "stable" - - name: "stat_change" - platforms: *web - description: Displays the increase, decrease, or neutral change in data. - status: "stable" - - name: "stat_value" - platforms: *web - description: This kit was cerated for the main use as a dashboard display for numbers. A large label is an optional part if it needs more clarity. - status: "stable" - - name: "title_count" - platforms: *web - description: This kits consists of title kit and body text. It is used to display a title and a count (numbers). It has a base size and a large formation for dashboard use. - status: "stable" - - name: "title_detail" - platforms: *web - description: This kit can be used in many versatile ways. It consist of a title 4 and light body text kit. - status: "stable" - - name: form_elements - description: - components: - - name: "file_upload" - platforms: *web - description: - status: "stable" - - name: "toggle" - platforms: *web - description: Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state. - status: "stable" - - name: "form_pill" - platforms: *web - description: - status: "stable" - - name: "form" - platforms: *rails_only - description: The form kit provides consumers with a convenient, consistently styled