Review the structure of the Halstack site main sections

[GomezIvann]

I wanted to open a discussion to debate our current main sections on the Halstack site. We all agree that we are starting to have a lot of components and principles, so we need a better and more precise categorisation of all of them.

My current proposal is the following:

• Overview
  • Introduction
  • Component lifecycle
  • Releases
• Foundations
  • Color
  • Spacing
  • Typography
  • Iconography
  • Accessibility
  • Layout
  • Localization
  • Themes
• Components
  • Application level
    • Application Layout
    • Header
    • Footer
    • Sidenav
  • Content
    • Accordion
    • Box
    • Card
    • Dialog
    • Divider
    • Image
    • Tag
    • Wizard
  • Data visualization
    • Paginator
    • Resultset Table
    • Table
  • Feedback
    • Alert
    • Progress Bar
    • Spinner
  • Forms
    • Button
    • Checkbox
    • Date Input
    • File Input
    • Number Input
    • Password Input
    • Radio Group
    • Select
    • Switch
    • Textarea
    • Text Input
    • Toggle Group
  • Layout
    • Bleed
    • Container
    • Flex
    • Grid
    • Inset
  • Navigation
    • Breadcrumbs
    • Contextual Menu
    • Dropdown
    • Link
    • Nav Tabs
    • Quick Nav
    • Tabs
  • Status
    • Badge
    • Chip
    • Status light
  • Typography
    • Bulleted List
    • Heading
    • Paragraph
    • Typography
  • Utilities
    • Halstack Provider

In any case, we are starting to have a lot of entries in the sidenav, which can be a bit overwhelming. I think we should start considering collapsible sections or maybe start taking advantage of our Header. Look at Atlassian's design system and how they solve the problem with very clever navigation.

[Mil4n0r]

Looks neat overall. Just a few comments regarding the Components structure (most of these may be highly subjective):

• Maybe Wizard might be more suitable inside the "Form" section (or even "Feedback").
• I am unsure about BulletedList being inside "Typography", but it just doesn't feel right in any of the categories. Content seems too little specific but maybe is the closest match.
• Button inside "Form" feels too specific, it has a lot of different use cases so I would go for a more general category called "Action" for both Button and Link.
• If Box is supposed to be a deprecated version of Container, shouldn't they be in the same group? (If you ask me, I think I would choose "Content").
• IMO, "Paginator" feels more like a "Navigation" (inside a specific content, but a navigation nonetheless) than a "Data Visualization". I am actually unsure about the category name "Data visualization" because it feels too restricted to components like ResultsetTable and, in the future, maybe charts (PieChart, BarChart, LineChart), but doesn't feel related to common Table. Maybe if we renamed it as just "Visualization" or something less specific like "Display" it would be more suitable for components like Table or even Bulleted List and Image.
• Regarding the previous point, that makes me have doubts about having Dropdown inside either "Navigation" or just "Content".
• Maybe Tag could be added to "Status" instead, but it is honestly a bit confusing for me when it should be used over a Badge or Chip. Chip is a bit special because it would be suitable for the "Action" that I suggested in the second comment, but it does not always have actions (which pretty much makes it work the same way as Badge in my POV).

[GomezIvann]

I'm gonna answer point by point:

• I saw a lot of design systems placing it in other sections. I think we should dedicate that section to only components that are allocated inside a <form>. The wizard distributes and organizes the content of a page.
• Since we already refer to it as a Typo component in the principle section, I think we should stick with it: https://developer.dxc.com/halstack/next/principles/typography/usage/.
• I would love to have a specific section for Buttons called Action but placing there the Link, for me, feels out of place. And to have a section for only one component...
• Our current Box is not a layout component, but I agree with you. I'm not sure about this one either.
• I don't mind calling it Visualization but I don't agree with placing the Bulleted List and the Image there.
• The dropdown is a problematic component since we do not define a specific context for it. I place it in Navigation because it's frequently used inside the Header and its actions usually imply navigation.
• I though a lot about the tag. It's frequently used as a social media visual action that sends you to the URL. I think it doesn't fit in any other section so we can keep it there until we review it.

[irenevera]

I really like the categories and structure you proposed @GomezIvann, there might some controversial components though. Maybe a good way to find out between us and also some users(¿?) is doing a quick card sorting I can set up the test in no time if we all agree..

[GomezIvann]

I think this is a great idea Irene!

[GomezIvann]

After discussing the proposal and gathering feedback from the team this is the final draft that we are going to follow:

• Overview
  • Introduction
  • Component lifecycle
  • Releases
• Principles
  • Accesibility
• Foundations
  • Color
  • Spacing
  • Typography
  • Iconography
  • Accessibility
  • Layout
  • Localization
  • Themes
• Components
  • Content
    • Accordion
    • Box
    • Card
    • Dialog
    • Divider
    • Image
    • Tag
    • Wizard
  • Data visualization
    • Paginator
    • Resultset Table
    • Table
  • Feedback
    • Alert
    • Progress Bar
    • Spinner
  • Forms
    • Button
    • Checkbox
    • Date Input
    • File Input
    • Number Input
    • Password Input
    • Radio Group
    • Select
    • Switch
    • Textarea
    • Text Input
    • Toggle Group
  • Layout
    • Application Layout
      • Header
      • Footer
      • Sidenav
    • Bleed
    • Container
    • Flex
    • Grid
    • Inset
  • Navigation
    • Breadcrumbs
    • Contextual Menu
    • Dropdown
    • Link
    • Nav Tabs
    • Quick Nav
    • Tabs
  • Status
    • Badge
    • Chip
    • Status light
  • Text
    • Bulleted List
    • Heading
    • Paragraph
    • Typography
  • Utilities
    • Halstack Provider

We have also decided that we are going to change the navigation of the Halstack site, having the main blocks (Overview, Principles, Foundations and Components) in the Header and a dynamic sidenav depending on the current block.