From 5977a9c0a4c14b9d5a179b996fabafbab987153e Mon Sep 17 00:00:00 2001 From: chancestrickland Date: Wed, 12 Feb 2020 16:31:25 -0800 Subject: [PATCH] website: doc fixes --- website/package.json | 26 +- website/src/pages/checkbox.mdx | 53 ++- website/src/pages/disclosure.mdx | 28 +- website/src/styles/app.scss | 98 +++++ website/yarn.lock | 648 +++++++++++++------------------ 5 files changed, 452 insertions(+), 401 deletions(-) diff --git a/website/package.json b/website/package.json index e58c41f08..160a87fd1 100644 --- a/website/package.json +++ b/website/package.json @@ -38,21 +38,21 @@ "@reach/visually-hidden": "file:../packages/visually-hidden", "@reach/window-size": "file:../packages/window-size", "core-js": "^3.6.4", - "gatsby": "^2.19.10", - "gatsby-image": "^2.2.39", - "gatsby-plugin-google-analytics": "^2.1.34", - "gatsby-plugin-manifest": "^2.2.40", - "gatsby-plugin-mdx": "^1.0.69", - "gatsby-plugin-react-helmet": "^3.1.21", - "gatsby-plugin-sass": "^2.1.27", - "gatsby-plugin-sharp": "^2.4.4", - "gatsby-remark-autolink-headers": "^2.1.23", + "gatsby": "^2.19.16", + "gatsby-image": "^2.2.40", + "gatsby-plugin-google-analytics": "^2.1.35", + "gatsby-plugin-manifest": "^2.2.41", + "gatsby-plugin-mdx": "^1.0.71", + "gatsby-plugin-react-helmet": "^3.1.22", + "gatsby-plugin-sass": "^2.1.28", + "gatsby-plugin-sharp": "^2.4.5", + "gatsby-remark-autolink-headers": "^2.1.24", "gatsby-remark-emoji": "^0.0.3", - "gatsby-remark-images": "^3.1.43", + "gatsby-remark-images": "^3.1.44", "gatsby-remark-slug": "^0.1.0", - "gatsby-source-filesystem": "^2.1.47", - "gatsby-transformer-react-docgen": "^5.0.28", - "gatsby-transformer-sharp": "^2.3.13", + "gatsby-source-filesystem": "^2.1.48", + "gatsby-transformer-react-docgen": "^5.0.29", + "gatsby-transformer-sharp": "^2.3.14", "match-sorter": "^4.0.2", "node-sass": "^4.13.1", "postcss-preset-env": "^6.7.0", diff --git a/website/src/pages/checkbox.mdx b/website/src/pages/checkbox.mdx index 53edeaf99..1853e2fe9 100644 --- a/website/src/pages/checkbox.mdx +++ b/website/src/pages/checkbox.mdx @@ -112,18 +112,61 @@ function Example() { ### Example CustomCheckbox +With custom checkbox, you can choose between a high-level API where DOM elements +are not individually exposed as components, or use the composed API to access +each sub-component directly. + +#### High-level `CustomCheckbox` API + +```jsx +// jsx-demo +(() => { + function MyCheckbox({ children, ...props }) { + return ( + + + + ); + } + + function Checklist() { + return ( +
+ What is your favorite fruit? + + Apple 🍎 + + + Orange 🍊 + + + Banana 🍌 + +
+ ); + } + + return ; +})(); +``` + +#### Composed CustomCheckbox API + ```jsx // jsx-demo (() => { function Example() { return (
-