[DON'T MERGE] [WNMGDS-2640 WNMGDS-2160] Info architecture update #2913

zarahzachz · 2024-01-29T21:28:14Z

DON'T MERGE!

We're waiting on user testing of this demo url before merging into main. (Source)

* shift content around to prioritize guidance, add resources section w/accordion. * add optional prop to hide link footer from Storybook examples in docs. * update storybook guidance component with new language. * add storybook icon to links, remove alt text (decorative images) * fix word breaking on inline code

…2909) * implement updated component maturity model component. * comment out design criteria - not tested. * add list class to ul wrapping incomplete checklist items * change alignment in progress status - needs start instead of center. * add spacing to top of maturity checklist section.

…/CMSgov/design-system into feature/info-architecture-update

remove sub-levels from ToC, fix spacing issues in both lists.

* fix typo in storybook guidance component interface * hardcode sketchlink for testing. need to revisit later. * add functionality to design resource link

… breaking.

packages/docs/content/components/alert.mdx

hi-its-hailey · 2024-01-30T19:41:33Z

@zarahzachz Looking awesome!
With this accordian style, would it work to make the title background a different color then the page background? (white title background for the component maturity list, or grey for the code resources?) Or maybe an underline or outline? It looks like a strange amount of space when it just blends into the background

hi-its-hailey · 2024-01-30T19:41:52Z

@zarahzachz I love this. Could you add "Don't" to the start of every item in the don't column (to avoid it reading like "do this" even with the clear heading)
I guess same with the "Use" column. Start every sentence with "Use" or "don't use" (like the dos and don'ts section)

hi-its-hailey · 2024-01-30T19:48:28Z

This is my fault, change the copy to "Each component is tested" instead of "is test"

hi-its-hailey · 2024-01-30T20:08:51Z

@zarahzachz Oh, one more thing. The links under "Have ideas" are unchanged. They should be as listed in this image:

…/CMSgov/design-system into feature/info-architecture-update

zarahzachz · 2024-02-01T16:21:54Z

@hi-its-hailey for the updated table of contents links, where do those links go? Specifically the "Ask a question" and "Start a contribution"

zarahzachz · 2024-02-01T16:31:56Z

@hi-its-hailey for the accordion style, i'm working a ticket now to only use one theme in our docs site documentation. i think this will impact the accordions used, so i might hold off on updating until after that work's done. i'm going to try implementing the styles from healthcare's accordion though (like in the mocks)

hi-its-hailey · 2024-02-01T22:16:20Z

@zarahzachz

@hi-its-hailey for the updated table of contents links, where do those links go? Specifically the "Ask a question" and "Start a contribution"

Ask a question: Slack
Start a contribution: Github
Contact the team (same as before)
Edit this Page (same as before)

let's also keep "start a discussion on github" !

Thank you!

* remove unneeded ds-base class. * hard-code core theme vars for docs site. * remove bespoke component css and data-theme attr from docs site. * update language around font family util class docs * import hgov accordion styles, props and vars to docs. * add hgov package to docs, update prop in mobile toc * copy hgov AccordionItem component props and styles into docs to prevent bringing in entire hgov DS * clean up scss imports - move accordionitem styles to its own file.

zarahzachz · 2024-02-07T16:48:15Z

packages/docs/content/components/alert.mdx

+}}
+>
+
+## Component maturity


Instead of baking "Component maturity" into the <MaturityChecklist> component as an <h2>, I'm adding it as a child of that component. This was the only way I could get our table of contents to pick up that this heading existed so it could be added there.

zarahzachz · 2024-02-07T16:49:50Z

packages/docs/content/components/alert.mdx

+
+<DesignResourceLink />
+
+### Development

 This component has analytics tracking available. Please see our developer documentation about [using analytics in the design system](/getting-started/for-developers/#analytics).


I wasn't sure where our analytics content should live, so I added it under the Development section

zarahzachz · 2024-02-07T16:52:15Z

packages/docs/content/layouts/Healthcare/one-col-page-layout.stories.tsx

@@ -13,7 +13,7 @@ export const OneColumnPageLayout = () => {
  return (
    <>
      <Header />
-      <main className="ds-base ds-l-container example-grid">


ds-base was deprecated as part of the CSS reset work

zarahzachz · 2024-02-07T16:53:22Z

packages/docs/content/utilities/font/font-family.mdx

    </article>
  </section>
 </EmbeddedExample>

+<ThemeContent neverThemes={['medicare']}>


Mgov doesn't have a serif font, so hiding the example from their documentation

zarahzachz · 2024-02-07T16:54:01Z

packages/docs/src/components/content/AccordionItem.tsx

@@ -0,0 +1,9 @@
+import { AccordionItem, MinusCircleIcon, PlusCircleIcon } from '@cmsgov/design-system';


Copied Hgov's prop overrides for AccordionItem into the docs site

zarahzachz · 2024-02-07T16:55:23Z

packages/docs/src/components/content/ContentRenderer.tsx

  ButtonMigrationTable: (props) => <ButtonMigrationTable theme={theme} {...props} />,
  ButtonVariationsTable: (props) => <ButtonVariationsTable theme={theme} {...props} />,
  code: CodeWithSyntaxHighlighting,
  ColorExampleList: (props) => <ColorExampleList theme={theme} {...props} />,
  ColorRamps,
  ComponentThemeOptions: (props) => <ComponentThemeOptions theme={theme} {...props} />,
+  DesignResourceLink: (props) => (
+    <DesignResourceLink frontmatter={frontmatter} theme={theme} {...props} />


frontmatter needs to be passed to DesignResourceLink so this component can access content that exists in the page's frontmatter (e.g., Sketch links)

zarahzachz · 2024-02-07T16:56:01Z

packages/docs/src/components/content/DesignResourceLink.tsx

+          Sketch symbol
+        </a>
+      ) : (
+        'This theme does not have a Sketch symbol.'


This conditional is needed due to not defining Sketch symbols for CMSgov theme

zarahzachz · 2024-02-07T16:58:14Z

packages/docs/src/components/layout/Layout.tsx

@@ -73,7 +73,7 @@ const Layout = ({
  const pageId = slug ? `page--${slug.replace('/', '_')}` : null;

  return (
-    <div className="ds-base" data-theme={theme} id={pageId}>


ds-base was deprecated in CSS reset work

zarahzachz · 2024-02-07T16:59:02Z

packages/docs/src/components/layout/PageHeader.tsx

@@ -48,7 +48,7 @@ const PageHeader = ({ frontmatter = { title: '' }, theme }: PageHeaderProps) =>
          {storyId && (
            <a href={makeStorybookUrl(storyId, theme, 'docs')} className="c-page-header__link">
              <img
-                alt="Storybook logo"
+                alt=""


These images are decorative only - so including alt text is just noise. Empty alt indicates a decorative image

zarahzachz · 2024-02-07T17:00:35Z

packages/docs/src/styles/components/syntaxHighlighting.scss

@@ -11,10 +11,10 @@ pre {
 }

 code {
-  display: inline-block;


Removed this so the inline code wouldn't result in periods wrapping to the next line at certain breakpoints

zarahzachz · 2024-02-07T18:02:55Z

packages/docs/src/components/layout/SideNav/SideNav.tsx

-        <div className="c-navigation__switchers-wrapper ds-u-display--none ds-u-md-display--block">
+        <div
+          className="c-navigation__switchers-wrapper ds-u-display--none ds-u-md-display--block"
+          style={{ backgroundColor: getThemeColorValue(theme, 'primary') }}


This does work, I promise. If you aren't seeing the correct background color reflected in the theme switcher, navigate to another page on the site and it should "wake up." This is related to a bug I mentioned in #2922

pwolfert · 2024-02-09T23:31:39Z

packages/docs/src/components/content/MaturityChecklist/MaturityChecklist.tsx

-  tokensInSketch: CheckStatus;
+  children: string;
+
+  items: {


I don't see a reason why this needed to change. Was this leftover from a previous version of the code? It looks like this could be reverted without any negative effects and down below it the references can be reverted from things like props.items['forcedColors'] to props.forcedColors.

Then you'd be able to get rid of all the changes in the diff that just had to do with reformatting the <MaturityChecklist> instances

zarahzachz · 2024-07-18T18:45:29Z

This work is still in draft mode. The IA needs to be tested with users further and validated.

zarahzachz added 4 commits January 29, 2024 13:26

Merge branch 'main' into feature/info-architecture-update

15f693b

Merge branch 'feature/info-architecture-update' of https://github.com…

4b9284a

…/CMSgov/design-system into feature/info-architecture-update

zarahzachz marked this pull request as draft January 29, 2024 21:28

zarahzachz added 7 commits January 29, 2024 16:39

Update ToC to exclude lower level headings (#2910)

6c4a06c

remove sub-levels from ToC, fix spacing issues in both lists.

fix spacing for have ideas section.

f9c3f0f

[NO TICKET] Create design resource link (#2914)

ab5afd6

* fix typo in storybook guidance component interface * hardcode sketchlink for testing. need to revisit later. * add functionality to design resource link

Merge branch 'main' into feature/info-architecture-update

a79d97b

add fallback for themes without sketch design links (cmsgov).

2885044

update all docs to use new maturity checklist component to avoid docs…

fb90494

… breaking.

Merge branch 'main' into feature/info-architecture-update

9efa27b

zarahzachz commented Jan 30, 2024

View reviewed changes

packages/docs/content/components/alert.mdx Outdated Show resolved Hide resolved

zarahzachz added 3 commits January 31, 2024 11:26

Merge branch 'main' into feature/info-architecture-update

abc9014

Merge branch 'main' into feature/info-architecture-update

327962c

Merge branch 'feature/info-architecture-update' of https://github.com…

9f89d19

…/CMSgov/design-system into feature/info-architecture-update

zarahzachz added 5 commits February 2, 2024 11:52

update content for new layout.

13e32e5

Merge branch 'main' into feature/info-architecture-update

acc4dff

Merge branch 'main' into feature/info-architecture-update

434aa22

update background color of sidenav to match whatever theme selected.

2c34d41

zarahzachz commented Feb 7, 2024

View reviewed changes

zarahzachz added 2 commits February 7, 2024 12:02

clean up unneeded import.

50407f0

i dont know why the value changed from primary to core

67f171f

zarahzachz changed the title ~~[WNMGDS-2640] Info architecture update~~ [DON'T MERGE] [WNMGDS-2640] Info architecture update Feb 7, 2024

zarahzachz changed the title ~~[DON'T MERGE] [WNMGDS-2640] Info architecture update~~ [DON'T MERGE] [WNMGDS-2640 WNMGDS-2160] Info architecture update Feb 7, 2024

zarahzachz commented Feb 7, 2024

View reviewed changes

zarahzachz requested review from pwolfert and hi-its-hailey February 7, 2024 18:04

pwolfert reviewed Feb 9, 2024

View reviewed changes

Merge branch 'main' into feature/info-architecture-update

5f37465

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DON'T MERGE] [WNMGDS-2640 WNMGDS-2160] Info architecture update #2913

[DON'T MERGE] [WNMGDS-2640 WNMGDS-2160] Info architecture update #2913

zarahzachz commented Jan 29, 2024 •

edited

Loading

hi-its-hailey commented Jan 30, 2024 •

edited

Loading

hi-its-hailey commented Jan 30, 2024 •

edited

Loading

hi-its-hailey commented Jan 30, 2024

hi-its-hailey commented Jan 30, 2024

zarahzachz commented Feb 1, 2024

zarahzachz commented Feb 1, 2024

hi-its-hailey commented Feb 1, 2024 •

edited

Loading

zarahzachz Feb 7, 2024

zarahzachz Feb 7, 2024

zarahzachz Feb 7, 2024

zarahzachz Feb 7, 2024

zarahzachz Feb 7, 2024

zarahzachz Feb 7, 2024

zarahzachz Feb 7, 2024

zarahzachz Feb 7, 2024

zarahzachz Feb 7, 2024

zarahzachz Feb 7, 2024

zarahzachz Feb 7, 2024

pwolfert Feb 9, 2024

pwolfert Feb 9, 2024

zarahzachz commented Jul 18, 2024

		@@ -0,0 +1,9 @@
		import { AccordionItem, MinusCircleIcon, PlusCircleIcon } from '@cmsgov/design-system';

[DON'T MERGE] [WNMGDS-2640 WNMGDS-2160] Info architecture update #2913

Are you sure you want to change the base?

[DON'T MERGE] [WNMGDS-2640 WNMGDS-2160] Info architecture update #2913

Conversation

zarahzachz commented Jan 29, 2024 • edited Loading

hi-its-hailey commented Jan 30, 2024 • edited Loading

hi-its-hailey commented Jan 30, 2024 • edited Loading

hi-its-hailey commented Jan 30, 2024

hi-its-hailey commented Jan 30, 2024

zarahzachz commented Feb 1, 2024

zarahzachz commented Feb 1, 2024

hi-its-hailey commented Feb 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zarahzachz commented Jul 18, 2024

zarahzachz commented Jan 29, 2024 •

edited

Loading

hi-its-hailey commented Jan 30, 2024 •

edited

Loading

hi-its-hailey commented Jan 30, 2024 •

edited

Loading

hi-its-hailey commented Feb 1, 2024 •

edited

Loading