diff --git a/.storybook/preview.scss b/.storybook/preview.scss index 4017dfaf..d0ccf6b2 100644 --- a/.storybook/preview.scss +++ b/.storybook/preview.scss @@ -1,4 +1,4 @@ -@import "../src/scss/fonts/mixins"; +@import "../src/scss/mixins"; table.docblock-argstable { p { diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte index e9d14067..b5e7f422 100644 --- a/src/components/Article/Article.stories.svelte +++ b/src/components/Article/Article.stories.svelte @@ -113,11 +113,12 @@ position: absolute; bottom: 0; left: 5px; + color: white; } .padding-label { position: absolute; top: 0; - left: -15px; + left: -17px; span { font-size: 18px; } diff --git a/src/components/Article/stories/docs/customWellWidths.md b/src/components/Article/stories/docs/customWellWidths.md index b58719c0..448a1161 100644 --- a/src/components/Article/stories/docs/customWellWidths.md +++ b/src/components/Article/stories/docs/customWellWidths.md @@ -12,6 +12,8 @@ The `Article` component also creates several column dimensions inside our articl When combined with the `Block` component, you can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` column widths. +> **For most pages, you shouldn't customise the column widths.** Other tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside your code. The main exception is SREP stories. + ```svelte
``` -> Keep in mind, other tools, like our AI templates, use our default column widths, so customising those widths here may have downstream consequences for graphics made outside your code. - -If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container using the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this: +If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container with the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this: ```svelte
diff --git a/src/components/Block/stories/docs/component.md b/src/components/Block/stories/docs/component.md index fccb4407..07e33e35 100644 --- a/src/components/Block/stories/docs/component.md +++ b/src/components/Block/stories/docs/component.md @@ -1,4 +1,6 @@ -The `Block` component is the basic building block of stories. +The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece. + +Blocks are stacked vertically within the well created by the `Article` component. They can have different widths on larger screens depending on the `width` prop. > 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom. diff --git a/src/components/Block/stories/docs/customLayouts.md b/src/components/Block/stories/docs/customLayouts.md index 3be9b3c5..1ef3c47a 100644 --- a/src/components/Block/stories/docs/customLayouts.md +++ b/src/components/Block/stories/docs/customLayouts.md @@ -1,4 +1,4 @@ -Our article well is designed to handle basic page layout when you're not trying to think about it, but it's also made to get out of the way quickly when you need to do something custom. +Our article well is designed to provide a basic responsive layout issues for you, but it's also made to get out of the way quickly when you need to do something custom. If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework. diff --git a/src/components/BodyText/BodyText.stories.svelte b/src/components/BodyText/BodyText.stories.svelte index 8e047dc7..9c3b3164 100644 --- a/src/components/BodyText/BodyText.stories.svelte +++ b/src/components/BodyText/BodyText.stories.svelte @@ -29,6 +29,10 @@ text: `Bacon ipsum **dolor amet** cow tongue tri-tip. Biltong turducken ground round kevin [hamburger turkey](https://reuters.com) pig. + + - Steak + - [Pork chop](https://www.google.com) + - Fillet Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatball ham hock.` }} diff --git a/src/components/BodyText/BodyText.svelte b/src/components/BodyText/BodyText.svelte index d3d922d9..45bc677c 100644 --- a/src/components/BodyText/BodyText.svelte +++ b/src/components/BodyText/BodyText.svelte @@ -18,6 +18,8 @@ diff --git a/src/components/NoteText/stories/docs/component.md b/src/components/NoteText/stories/docs/component.md new file mode 100644 index 00000000..9c47180a --- /dev/null +++ b/src/components/NoteText/stories/docs/component.md @@ -0,0 +1,19 @@ +Note text includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story. + +Note text can be fed a markdown string, but text styling is intentionally restricted in this component. For example, all heading tags are forced to a single font size and weight. + +```svelte + + + +``` diff --git a/src/components/SiteFooter/Referrals/Link.svelte b/src/components/SiteFooter/Referrals/Link.svelte index 5c556e04..c21f4201 100644 --- a/src/components/SiteFooter/Referrals/Link.svelte +++ b/src/components/SiteFooter/Referrals/Link.svelte @@ -21,9 +21,12 @@ diff --git a/src/components/SiteHeader/NavBar/NavDropdown/SectionDrowdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte similarity index 91% rename from src/components/SiteHeader/NavBar/NavDropdown/SectionDrowdown.svelte rename to src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte index 0be36f12..93e27611 100644 --- a/src/components/SiteHeader/NavBar/NavDropdown/SectionDrowdown.svelte +++ b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte @@ -46,6 +46,14 @@ @import '../../scss/_colors.scss'; @import '../../scss/_breakpoints.scss'; + a { + text-decoration: none; + &:hover { + color: inherit; + text-decoration: underline !important; + } + } + .sections { display: flex; @@ -97,6 +105,10 @@ @media (min-width: 1300px) { font-size: 18px; } + &:hover { + color: inherit; + text-decoration: underline !important; + } } li > a { diff --git a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte index d31b71e7..2e6a9ffa 100644 --- a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte +++ b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte @@ -43,6 +43,7 @@ flex-direction: row; justify-content: flex-start; color: var(--nav-primary, $tr-dark-grey); + text-decoration: none; &:hover, &:focus { diff --git a/src/components/SiteHeader/NavBar/index.svelte b/src/components/SiteHeader/NavBar/index.svelte index 9fe411d9..78cc21ac 100644 --- a/src/components/SiteHeader/NavBar/index.svelte +++ b/src/components/SiteHeader/NavBar/index.svelte @@ -1,6 +1,6 @@