Typography metadata fixes and deprecation bits #523

lazd · 2020-02-06T20:26:09Z

Description

This PR does the following:

Fixes Typography's metadata status
Fixes Typography's usage of heading level elements (i.e. <h1>)
Fixed Typography's description text
Removes duplicate Typography examples
Hides deprecated Typography components from the dev site menu
Adds a landing page for Typography, link to deprecated components
Adds Spectrum site badge for verifying links are correct
Adds the ability to change the "Variants" section title in dev site
Fixes incorrect Spectrum site link for ButtonGroup
Hides Tool from dev site menu, link to Tool from Quiet Action Button

How and where has this been tested?

How this was tested: gulp dev, use eyes
Browser(s) and OS(s) this was tested with: n/a

Docs are deployed here for your perusal: https://git.corp.adobe.com/pages/lawdavis/spectrum-css-typography/docs/typography.html

Screenshots

To-do list

If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
I have read the CONTRIBUTING document.

This pull request is ready to merge.

* add Typography landing page * also, hide old Typography (but link to it from the main page)

* also, add link to Tool in ActionButton description

components/typography/metadata/typography-body.yml

components/typography/metadata/typography-heading.yml

lazd · 2020-02-06T22:14:11Z

components/typography/metadata/typography-legacy.yml

@@ -0,0 +1,19 @@
+name: Typography (Legacy)


This is basically what we had before in typography-deprecated.yml

lazd · 2020-02-06T22:14:23Z

components/typography/metadata/typography-deprecated.yml

@@ -1,19 +1,181 @@
-id: heading-display
-name: Typography (Deprecated II)
+name: Typography (Deprecated)


This is basically what we had before in typography.yml.

Do you want to maybe indicate what was the deprecated V1, V2?

There is no version number for the previous implementations of typography, they were both present when we moved to individual versioning. Calling them legacy and deprecated is the best we can do here, I'm afraid.

lazd · 2020-02-06T22:14:45Z

site/templates/siteComponent.pug

              header.spectrum-CSSComponent-sectionHeading(id="variants")
                h4.spectrum-Heading3
-                  a(href="#variants").spectrum-BigSubtleLink Variants
+                  a(href="#variants").spectrum-BigSubtleLink=`${component.examplesHeading ? component.examplesHeading : 'Variants'}`


This just makes it possible for the Typography landing page to say "Components" instead of "Variants"

lazd · 2020-02-06T22:15:42Z

components/typography/metadata/typography-international.yml

@@ -1,12 +1,16 @@
 name: Typography (Internationalized)
+fastLoad: false


This makes it so the right Typekit loads on the dev site when you click this example in the sidenav.

lazd · 2020-02-06T22:16:28Z

tools/bundle-builder/docs/index.js

      name: componentData.name,
      component: componentName,
+      hide: componentData.hide,
+      fastLoad: componentData.fastLoad,


Nav data as passed to the template is its own structure, so we have to copy these properties here.

lazd · 2020-02-06T22:16:45Z

site/templates/siteComponent.pug

-              //-
-                a.spectrum-Card.spectrum-Card--small.spectrum-Card--horizontal(href=`${spectrumURL || 'https://spectrum.corp.adobe.com/'+pkg.name.split('/').pop()}` target="_blank")
+              if component.SpectrumSiteSlug
+                a.spectrum-Card.spectrum-Card--small.spectrum-Card--horizontal(href=`${component.SpectrumSiteSlug}` target="_blank")


This just basically enables the card that links to the Spectrum docs.

bernhard-adobe · 2020-02-06T22:34:21Z

components/button/metadata/tool.yml

@@ -1,7 +1,8 @@
 name: Tool
-status: Verified
+dnaStatus: Deprecated


status is now "dnaStatus"?

No, they are two separate things, which work together in concert with the data from DNA in a very confusing fashion to display whether a component is deprecated or whatnot.

It's best to ignore this, otherwise we'll be reworking tons of unrelated stuff to untangle the mess ;)

thanks for the clarification, all good!

components/buttongroup/metadata/buttongroup.yml

components/typography/metadata/typography-body.yml

bernhard-adobe · 2020-02-06T22:37:45Z

components/typography/metadata/typography-body.yml

        <p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

-        <h1 class="spectrum-Heading spectrum-Heading--XXS">Lorem Ipsum Dolor</h1>
+        <h6 class="spectrum-Heading spectrum-Heading--XXS">Lorem Ipsum Dolor</h6>


so this is all fine and good but I am wondering if this matters as XXXL & XXL are also h1-s and if we want to encourage that. I thought the idea of t-shirt sizing was to remove the link between numeric title sizes and heading sizes.

Basically, <h1>-<h6> correspond to semantic heading levels. The top-level heading on a page must be a <h1>, but depending on the design intent, it could be XL, XXL, or XXXL. For instance, once could use a <h1> that is XXL (formerly display) as the top-level heading on the main site landing page, but could use a <h1> that is a XL elsewhere for the top-level heading. This all depends on the design.

Since there is no such thing as a <h7> tag, and because of the way the sizing plays out, the 3 largest sizes (XXXL, XXL, XL) are all shown with <h1> tags.

thanks for explaining your reasoning. this is good to me

bernhard-adobe · 2020-02-06T22:38:23Z

components/typography/metadata/typography-deprecated.yml

@@ -1,19 +1,181 @@
-id: heading-display
-name: Typography (Deprecated II)
+name: Typography (Deprecated)


Do you want to maybe indicate what was the deprecated V1, V2?

components/typography/metadata/typography-heading.yml

bernhard-adobe · 2020-02-06T22:40:28Z

components/typography/metadata/typography-international-deprecated.yml

@@ -1,12 +1,12 @@
-name: Typography (Int., Deprecated I)
+name: Typography (Internationalized, Deprecated)


I thought having this short helps to not have it over-flow in the sidebar as that is the title of the link to this page.

They are not present in the sidebar. Please view the docs site here https://git.corp.adobe.com/pages/lawdavis/spectrum-css-typography/docs/

right, got removed from the sidebar. It's fine.

bernhard-adobe · 2020-02-06T22:40:45Z

components/typography/metadata/typography-international-deprecated.yml

-name: Typography (Int., Deprecated I)
+name: Typography (Internationalized, Deprecated)
 status: Deprecated
+hide: true


are we sure we want to hide the old typography?

It's very, very confusing otherwise. We link to the deprecated typography from the landing page, so it's not orphaned.

components/typography/metadata/typography.yml

bernhard-adobe

Thank you @lazd for your hard work correcting the documentation.

* docs: swap out the Typekit Ids * docs: typography metadata fixes and deprecation bits (#523) * docs: support hiding examples, disabling fastLoad * docs: support changing Variants heading, enable Spectrum cards * docs: Typography landing page * docs: hide old Typography (but link to it from the main page) * docs: remove Tool from menu, fix ButtonGroup Spectrum link * docs: add link to Tool in ActionButton description Co-authored-by: Larry Davis <lazdnet@gmail.com>

lazd added 4 commits February 6, 2020 12:14

docs: support hiding examples, disabling fastLoad

0fa8611

docs: support changing Variants heading, enable Spectrum cards

0f3c1f3

docs: correct Typography example status, markup errors, and <h1> usage

6a36e8b

* add Typography landing page * also, hide old Typography (but link to it from the main page)

docs: remove Tool from menu, fix ButtonGroup Spectrum link

644d30c

* also, add link to Tool in ActionButton description

lazd requested a review from bernhard-adobe February 6, 2020 20:26

lazd added 2 commits February 6, 2020 12:32

docs: correct Heading component description

5554895

docs: use the descriptions from the Spectrum site

cf7c72c

lazd commented Feb 6, 2020

View reviewed changes

components/typography/metadata/typography-body.yml Show resolved Hide resolved

lazd commented Feb 6, 2020

View reviewed changes

components/typography/metadata/typography-body.yml Show resolved Hide resolved

lazd commented Feb 6, 2020

View reviewed changes

components/typography/metadata/typography-heading.yml Show resolved Hide resolved

docs: correct spelling mistake

4a7c01a

lazd commented Feb 6, 2020

View reviewed changes

bernhard-adobe reviewed Feb 6, 2020

View reviewed changes

bernhard-adobe mentioned this pull request Feb 6, 2020

feat: adding t-shirt sized typography (SDS-2513) #210 #408

Merged

4 tasks

bernhard-adobe approved these changes Feb 6, 2020

View reviewed changes

bernhard-adobe merged commit f871b74 into SDS-2513 Feb 7, 2020

bernhard-adobe deleted the typography-metadata branch February 7, 2020 00:59

		@@ -1,12 +1,16 @@
		name: Typography (Internationalized)
		fastLoad: false

		@@ -1,12 +1,12 @@
		name: Typography (Int., Deprecated I)
		name: Typography (Internationalized, Deprecated)

Typography metadata fixes and deprecation bits #523

Typography metadata fixes and deprecation bits #523

Uh oh!

Conversation

lazd commented Feb 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Screenshots

To-do list

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lazd Feb 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bernhard-adobe left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lazd commented Feb 6, 2020 •

edited

Loading

lazd Feb 6, 2020 •

edited

Loading