feat: remove default code styles, wrap in classes instead

Having these as default styles was having unexpected consequences for Storybook error messages BREAKING CHANGE: apply `.iati-code` or `.iati-kbd` to existing `code` or `kbd` elements
IATI · Oct 23, 2024 · 6196262 · 6196262
1 parent 3825139
commit 6196262
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 15 deletions.
diff --git a/src/scss/typography/_code.scss b/src/scss/typography/_code.scss
@@ -5,6 +5,7 @@
 .iati-code {
   font-family: $font-stack-monospace;
   background-color: $color-grey-10;
+  color: #000;
   border: 1px solid $color-grey-20;
   padding: 0.1em 0.2em;
 
@@ -15,19 +16,10 @@
   }
 }
 
-code {
-  @extend .iati-code;
-}
-
-pre {
-  @extend .iati-code;
-  @extend .iati-code--block;
-}
-
-kbd {
+.iati-kbd {
   @extend .iati-code;
 
-  kbd {
+  .iati-kbd {
     border: none;
   }
 }
diff --git a/src/scss/typography/typography.stories.ts b/src/scss/typography/typography.stories.ts
@@ -120,10 +120,14 @@ export const Code: Story = {
       <span>print("This is a block of code")</span>
     </code>
     <p>
-      This paragraph contains a key-binding: <kbd>Ctrl</kbd> + <kbd>C</kbd>.
-      Key-bindings can be nested, e.g.
-      <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>
-      .
+      This paragraph contains a key-binding:
+      <kbd class="iati-kbd">Ctrl</kbd> + <kbd class="iati-kbd">C</kbd>
+    </p>
+    <p>
+      Key-bindings can be nested:
+      <kbd class="iati-kbd">
+        <kbd class="iati-kbd">Ctrl</kbd> + <kbd class="iati-kbd">C</kbd>
+      </kbd>
     </p>
   `,
 };