Various fixes, remove text details (#44)

CHANGELOG.md

@@ -9,7 +9,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Initial concept of text detail elements
 - Elements can be hidden on certain devices with `tna-!--hide-on-[large|medium|small|tiny]`
 - Allow links to have no visited state with `tna-link--no-visited-state`
 - Card supertitles can be made "plain" with no contrasting colour
@@ -22,6 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update the `spacing` and `spacing-mobile` functions in `spacing` to `space` and `space-mobile`
 - Mixin `colour.invert` changed to `colour.contrast`
 - Background colour classes changed to BEM (`tna-background--accent` -> `tna-background-accent`)
+- Text balance on headings removed but left on headings with links
+- `background-tint` colour changed for better accessibility/contrast
 
 ### Deprecated
 ### Removed
@@ -31,6 +32,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Cookie banner URL is now correctly used
+- Spacing above picture elements fixed
+- Image widths fixed (not stretched)
 
 ### Security
 

src/nationalarchives/components/picture/picture.scss

@@ -4,10 +4,11 @@
 @use "../button";
 
 .tna-picture {
-  margin: 0;
-  padding: 0;
-
   @include spacing.space-above;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  padding: 0;
 
   &__image-wrapper {
     position: relative;

src/nationalarchives/stories/utilities/typography/typography.stories.js

@@ -57,11 +57,11 @@ SceneSetterSmall.args = {
   text: `We are the official archive of England and Wales. Discover 1,000 years of history through <a href="#">fascinating stories</a> from the past or <a href="#">start your own research</a> and <a href="#">search our catalogue</a> of 32 million records. <a href="#">Plan a visit</a> to access original historic documents from our collections then enjoy the grounds, café, and <a href="#">free exhibitions</a>.`,
 };
 
-const TextDetailsTemplate = () =>
-  `<p>
-    Typed slip with photographs - 'The <span class="tna-detail" title="Italian (miscellaneous)" data-type="misc">Italian</span> Steamer <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> which ran on the rocks near <span class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</span> a few days ago is now a total wreck. After a severe buffeting by heavy seas the ship has broken in two. The photograph shows the <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> broken in two by a severe buffeting from the seas near <a href="#" class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</a>.
-  </p>`;
-export const TextDetails = TextDetailsTemplate.bind({});
+// const TextDetailsTemplate = () =>
+//   `<p>
+//     Typed slip with photographs - 'The <span class="tna-detail" title="Italian (miscellaneous)" data-type="misc">Italian</span> Steamer <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> which ran on the rocks near <span class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</span> a few days ago is now a total wreck. After a severe buffeting by heavy seas the ship has broken in two. The photograph shows the <span class="tna-detail" title="Aida Lauro (person)" data-type="per">Aida Lauro</span> broken in two by a severe buffeting from the seas near <a href="#" class="tna-detail" title="Cape Cornwall (location)" data-type="loc">Cape Cornwall</a>.
+//   </p>`;
+// export const TextDetails = TextDetailsTemplate.bind({});
 
 const BlockquoteTemplate = ({
   html,

src/nationalarchives/utilities/_global.scss

@@ -42,6 +42,7 @@ picture,
 video,
 canvas {
   max-width: 100%;
+  height: auto;
 
   display: block;
 }

src/nationalarchives/utilities/_typography.scss

@@ -135,46 +135,46 @@ small {
   );
 }
 
-.tna-detail[title][data-type] {
-  padding: 0 0.375rem;
+// .tna-detail[title][data-type] {
+//   padding: 0 0.375rem;
 
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: baseline;
-  gap: 0.5rem;
+//   display: inline-flex;
+//   flex-flow: row nowrap;
+//   align-items: baseline;
+//   gap: 0.5rem;
 
-  vertical-align: baseline;
+//   vertical-align: baseline;
 
-  background-color: #ccc;
+//   background-color: #ccc;
 
-  &::after {
-    @include colour.colour-font("font-base");
-    @include typography.detail-font-small;
-    vertical-align: baseline;
+//   &::after {
+//     @include colour.colour-font("font-base");
+//     @include typography.detail-font-small;
+//     vertical-align: baseline;
 
-    content: attr(data-type) / "";
-  }
+//     content: attr(data-type) / "";
+//   }
 
-  &[data-type="misc"] {
-    background-color: #f28482;
-  }
+//   &[data-type="misc"] {
+//     background-color: #f28482;
+//   }
 
-  &[data-type="loc"] {
-    background-color: #edae49;
-  }
+//   &[data-type="loc"] {
+//     background-color: #edae49;
+//   }
 
-  &[data-type="per"] {
-    background-color: #b5e2fa;
-  }
+//   &[data-type="per"] {
+//     background-color: #b5e2fa;
+//   }
 
-  @at-root #{selector.unify("a", &)} {
-    @include colour.colour-font("font-base");
+//   @at-root #{selector.unify("a", &)} {
+//     @include colour.colour-font("font-base");
 
-    &::after {
-      text-decoration: none;
-    }
-  }
-}
+//     &::after {
+//       text-decoration: none;
+//     }
+//   }
+// }
 
 .tna-chip-list {
   @include spacing.space-above;
@@ -245,12 +245,11 @@ small {
 %heading {
   @include colour.colour-font("font-dark");
 
-  text-wrap: balance;
-
   &:not(.tna-heading--no-link-arrow) {
     a {
       display: inline-block;
 
+      text-wrap: balance;
       // text-decoration-thickness: .1em;
 
       &::after {

src/nationalarchives/variables/_colour.scss

@@ -49,7 +49,7 @@ LIGHT THEME (DEFAULT)
 */
 $colour-palette-default: (
   "page-background": #f4f4f4,
-  "background-tint": #d8d8d8,
+  "background-tint": #e2e2e2,
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
   "font-light": hex-to-rgb($base-font, 0.7),