📄 Marigold Docs 2.0

[ti10le]

Description

We wanna do some work to improve our documentation. This is a list with our todos to get a better doc.

Done

• [x] Update components docs to adhere the template structure (#1887) #1939 #1966 #1967 #1968
• [x] improve DoAndDont component with our new Layout components and make it more responsive. #1936
• [x] #2234
• [x] rewrite our colors in docs theme. Maybe use the picture below as a base.
• [x] rewrite the Navigation that its visually better und separate components (Form Components?, Layout, ..) Maybe two or three categories (think also about this #1805)
• [x] ~Callout component for Infos/Warning/Hints/...~ #2232 used our <Message>component instead
• [x] #2198 implement #2245 instead
• [x] #2211
• [x] style mdx content #2219
• [x] Show correct version of docs #2227
• [x] #2229
• [x] #2250
• [x] Create new Marigold Logo that is easier to use in responsive designs
• [x] #2254
• [x] #2257
• [x] ~<Select> does not work in nextjs~ (doesn't work in mdx for reasons, elsewhere it's fine 🤷‍♂️)
• [x] #2293
• [x] Deploy NextJS App

Components Check

Check component pages and show demos

• [x] Aside #2296
• [x] Aspect #2296
• [x] Badge
• [x] Box #2308
• [x] Breakout #2309
• [x] Button
• [x] Card
• [x] Center
• [x] Checkbox
• [x] Columns
• [x] Container
• [x] Content
• [x] Dialog
• [x] Divider
• [x] Footer
• [x] Header
• [x] Headline
• [x] Icon
• [x] Image
• [x] Inline
• [x] Input
• [x] Label
• [x] Link
• [x] List
• [x] Menu
• [x] Message
• [x] NumberField
• [x] Provider
• [x] Radio
• [x] Select
• [x] Slider
• [x] Split
• [x] Stack
• [x] Switch
• [x] Table
• [x] Text
• [x] TextArea
• [x] TextField
• [x] Tiles
• [x] Tooltip
• [x] VisuallyHidden

Context & Consequences

Have a better Marigold documentation to imagine our users and avoid a high asking rate.

[sebald]

Migrate to next? 🥸

[ti10le]

Do we have the time? Mh it would be cool..

[sebald]

I think its worth the time and shouldn't be that much since we are not using a lot of gatsby plugins / magic.

[ti10le]

Maybe for docs theme colors: https://uicolors.app/create

[ti10le]

@sebald what do you exactly mean with Callout component? Can you give me a use case?

[sebald]

https://confluence.atlassian.com/doc/info-tip-note-and-warning-macros-51872369.html

Or

https://coreui.io/react/docs/components/callout/

[sebald]

Replace react-live with https://sandpack.codesandbox.io/docs/ or https://codehike.org/ ?

[sarahgm]

Some suggestions general:

• more colorful, hover effects on navigation or colored headlines
• maybe a page about accessability and why it is so important to us (maybe on FAQ)
• a search bar for components / pages
• in Foundation -> Theme and Variants -> Examples are Links that links to 404 pages
• divide components so you can find them better: for example: Components Layout Components Header Container ... Form Components Input ... Content Components Message ...

on pages for components:

• consitent
• maybe some tab bar on the top of the page so you can easy jump to examples, usage or props

in FAQ:

• There is only one question I think it should be more (Why sould we use a Design System?, What are the advantages?, How to use?, ...)
• maybe shorter answers

Theme Switch just on page if theres a component which is using ist (not Layout components)

[sarahgm]

add later a IntersectionObserver

https://codesandbox.io/s/infallible-borg-mqh9df?file=/src/App.tsx:2210-2218 https://blog.openreplay.com/creating-a-table-of-content-widget-in-react https://usehooks-ts.com/react-hook/use-intersection-observer