Convert all components to Astro

Author: huijing

README.md

@@ -21,30 +21,19 @@ If you are using them in an Astro layout file, then the import would look like t
 import '/node_modules/@interledger/docs-design-system/src/styles/green-theme.css';
 ```
 
-We also have a number of documentation-specific helper components that can be imported and used where necessary.
-
-- [CodeBlock](#codeblock-component)
-- [Disclosure](#disclosure-component)
-- [Hidden](#hidden-component)
-- [LargeImg](#largeimg-component)
-- [LinkOut](#linkout-component)
-- [MermaidWrapper](#mermaidwrapper-component)
-- [StylishHeader](#stylishheader-component)
-- [Tooltip](#tooltip-component)
-
-For the shared components, if you are using both `CodeBlock` and `Disclosure` on the same page, you can import them both like so:
+We also have a number of documentation-specific helper components that can be imported and used where necessary. For these shared components, if you are using both `CodeBlock` and `Disclosure` on the same page, you can import them both like so:
 
 ```jsx
 import { CodeBlock, Disclosure } from "@interledger/docs-design-system";
 ```
 
 For more information about importing things in Javascript, please refer to [import on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).
 
-All the above components are documented at our [documentation style guide](https://interledger.tech).
+The available shared components are documented at our [documentation style guide](https://interledger.tech).
 
 ## Contributing
 
-As this is a shared library, it is a dependency for other projects, specifically all Interledger documentation websites. A good way to check who is using this library is via GitHub search: https://github.com/search?q=%22%40interledger%2Fdocs-design-system%22%3A+&type=code.
+As this is a shared library, it is a dependency for other projects, specifically all Interledger documentation websites. A good way to check who is using this library is via GitHub search: https://github.com/search?q=%22%40interledger%2Fdocs-design-system%22%3A+path%3Apackage.json&type=code.
 
 Our theme does override a number of Starlight defaults, therefore it is inevitable that if the Starlight internals are modified as they continue to release new features, we will have to make the corresponding updates to this library as well, to make sure nothing breaks. The documentation style guide is a good target to determine if the proposed changes you want to make to the library work correctly or not.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interledger/docs-design-system",
-  "version": "0.0.14",
+  "version": "0.1.0",
   "type": "module",
   "description": "Shared styles and components used across all Interledger Starlight documentation sites",
   "exports": {
@@ -18,8 +18,5 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/interledger/docs-design-system"
-  },
-  "dependencies": {
-    "react": "^18.2.0"
   }
 }

src/components/CodeBlock.astro

@@ -0,0 +1,30 @@
+---
+const { title } = Astro.props;
+---
+<div class="codeblock">
+  <p>{title}</p>
+  <slot />
+</div>
+
+<style>
+div {
+  position: relative;
+}
+
+.codeblock.codeblock.codeblock :global(pre) {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  margin-top: 0;
+}
+
+p {
+  margin-top: var(--space-s);
+  border-top-right-radius: var(--border-radius);
+  border-top-left-radius: var(--border-radius);
+  font-size: var(--step--1);
+  font-weight: bold;
+  padding: var(--space-2xs) var(--space-xs);
+  background-color: var(--astro-code-color-background);
+  border-bottom: 1px solid var(--sl-color-gray-5);
+}
+</style>

src/components/CodeBlock/CodeBlock.jsx

@@ -1,4 +1,21 @@
-.toggle {
+---
+const { toggleText } = Astro.props;
+const uuid = crypto.randomUUID();
+---
+<button
+  data-disclosure-button
+  type="button"
+  aria-expanded="false"
+  aria-controls={uuid}
+>
+  {toggleText}
+</button>
+<div class="wrapper" id={uuid}>
+  <div class="content"><slot /></div>
+</div>
+
+<style>
+button {
   background-color: initial;
   border: 0;
   display: flex;
@@ -9,33 +26,52 @@
   transition: color 200ms ease-out;
 }
 
-.toggle:hover,
-.toggle:focus {
+button:hover,
+button:focus {
   color: var(--sl-color-text-accent);
 }
 
-.toggle[aria-expanded='false']::after {
+button[aria-expanded="false"]::after {
   content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 8" width="12" height="8"><path fill="currentColor" d="M11 1.17a1 1 0 0 0-1.41 0L6 4.71 2.46 1.17a1 1 0 0 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L11 2.59a1.003 1.003 0 0 0 0-1.42Z"/></svg>');
   position: relative;
   bottom: 2px;
 }
 
-.toggle[aria-expanded='true']::after {
+button[aria-expanded="true"]::after {
   content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 8" width="12" height="8"><path fill="currentColor" d="M11 5.41 6.71 1.17a1 1 0 0 0-1.42 0L1.05 5.41a1 1 0 1 0 1.41 1.42L6 3.29l3.54 3.54a1 1 0 0 0 1.41 0A1.001 1.001 0 0 0 11 5.41Z"/></svg>');
   position: relative;
   bottom: 2px;
 }
 
+:global([data-theme="dark"]) button::after {
+  filter: invert(1);
+}
+
 .wrapper {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.3s ease-out;
 }
 
-.wrapper.expanded {
+button[aria-expanded="true"] + .wrapper {
   grid-template-rows: 1fr;
 }
 
 .content {
   overflow: hidden;
 }
+</style>
+
+<script>
+const buttons = document.querySelectorAll('[data-disclosure-button]');
+buttons.forEach((button) => {
+  button.addEventListener('click', function() {
+    if (this.getAttribute('aria-expanded') === 'true') {
+      this.setAttribute('aria-expanded', 'false');
+    }
+    else {
+      this.setAttribute('aria-expanded', 'true');
+    } 
+  });
+});
+</script>

src/components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,3 @@
+---
+---
+<div style={{ display: "none" }}><slot /></div>