From 2c8a7025a9b99c3a202814ed53c004437c5a27cb Mon Sep 17 00:00:00 2001 From: ecni19 Date: Thu, 15 Sep 2022 14:37:30 -0700 Subject: [PATCH] feat: add info and help guide --- stories/info-and-help.stories.mdx | 473 ++++++++++++++++++++++++++++++ 1 file changed, 473 insertions(+) create mode 100644 stories/info-and-help.stories.mdx diff --git a/stories/info-and-help.stories.mdx b/stories/info-and-help.stories.mdx new file mode 100644 index 000000000..7c67b564d --- /dev/null +++ b/stories/info-and-help.stories.mdx @@ -0,0 +1,473 @@ + + +import { Meta, DocsContainer } from '@storybook/addon-docs'; + + + + + +# Info & help + +## General guidance (always visible) + +### Applies to the whole page + +###### Guided tour + +
+
+
+ Take the user on a brief tour of the UI to help acclimate them to the + interface. +
+
+
See also
+ + Features chevron_right + + Guided tours + + +
+
+
+
+
Step title
+
+ close +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi imperdiet dignissim + quam lacus vitae tincidunt sagittis. Aliquet ullamcorper congue arcu a, tempus + fringilla tellus imperdiet. +
+
2/4
+
+ chevron_left + chevron_right +
+
+
+
+
+ +###### Help window + +
+
+
Allow the user to toggle extra help on and off as needed.
+
+
See also
+ + Features chevron_right{" "} + + In-product help + + +
+
+
+
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text fil
+
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text filler text filler text filler text filler text filler text fi
+
Filler text fil
+
+
Filler text filler text filler text filler text filler text filler text fi
+
+
+
Help
+
+ expand_more + open_in_new + square + close +
+
+
+
+ + All topics chevron_right Developer + chevron_right + +
+ Cras adipiscing tempus ornare purus vel. +
+
+
+
+
+ Ultricies nunc massa, id ut felis sed varius accumsan platea. +
+
+
Cras libero tempor pellentesque vitae eget.
+
+
+
+ +
+
+ +### Applies to part of the page + +###### Text directly in the page + +
+
Short explanations directly in the body of the page.
+
+
+
Filler text
+
+
+ Configure which roles and groups have permission to create their own + workspace in this site.{' '} + + Learn more + +
+
+
+
+ +### An individual form field + +###### Form field hint + +
+
+ Display your message directly adjacent to the field itself. +
+
+ +
+ 8 – 12 characters long, containing at least one letter and one number +
+
+
+ +## Temporary guidance + +### Applies to the whole page + +###### Page-level alert + +
+
+ Use a page-level alert to give feedback that’s not specifically related to + any one item or region. +
+
+ + + +
+
+ +### Applies to part of a page, or a dialog + +###### Inline alert + +
+
+ An inline alert allows more specific messaging about a smaller region of a + page, or a modal dialog or sheet. +
+
+
+
+ Card title +
+
+
+ + + +
+
+
+
+ +### An individual form field + +###### Form field hint + +
+
+ Display your message directly adjacent to the field itself. In the case of + errors and warnings, the form field also changes state to draw attention to + itself. +
+
+ +
+ 8 – 12 characters long, containing at least one letter and one number +
+
+