Skip to content

Commit

Permalink
website: doc fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@chaance
chaance committed Feb 13, 2020
1 parent 36a5302 commit 5977a9c
Show file tree
Hide file tree
Showing 5 changed files with 452 additions and 401 deletions.
26 changes: 13 additions & 13 deletions website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
53 changes: 45 additions & 8 deletions website/src/pages/checkbox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<span className={`example-custom-checkbox ${props.value}`}>
<label>
<CustomCheckbox {...props} />
{children}
</label>
</span>
);
}
function Checklist() {
return (
<fieldset>
<legend>What is your favorite fruit?</legend>
<MyCheckbox name="favorite-fruit" value="apple" color="#B22222">
Apple <span aria-hidden>🍎</span>
</MyCheckbox>
<MyCheckbox name="favorite-fruit" value="orange" color="#FF8C00">
Orange <span aria-hidden>🍊</span>
</MyCheckbox>
<MyCheckbox name="favorite-fruit" value="banana" color="#FFD700">
Banana <span aria-hidden>🍌</span>
</MyCheckbox>
</fieldset>
);
}
return <Checklist />;
})();
```
#### Composed CustomCheckbox API
```jsx
// jsx-demo
(() => {
function Example() {
return (
<div>
<label>
<label style={{ display: "flex", alignItems: "center" }}>
<MyCheckbox value="whatever" />
This is a pretty cool checkbox; do you agree?
</label>
<br />
<label>
<label style={{ display: "flex", alignItems: "center" }}>
<MyCheckbox checked="mixed" value="something-else" />
I'm just an example of what I'd look like if I had a mixed state.
</label>
Expand Down Expand Up @@ -374,8 +417,6 @@ Please see the [styling guide](/styling).
}
[data-reach-custom-checkbox][data-state="mixed"] {
}
[data-reach-custom-checkbox][data-focused] {
}
```
#### CustomCheckbox Props
Expand Down Expand Up @@ -474,8 +515,6 @@ Please see the [styling guide](/styling).
}
[data-reach-custom-checkbox-container][data-state="mixed"] {
}
[data-reach-custom-checkbox-container][data-focused] {
}
```
#### CustomCheckboxContainer Props
Expand Down Expand Up @@ -578,8 +617,6 @@ Please see the [styling guide](/styling).
}
[data-reach-custom-checkbox-input][aria-checked="mixed"] {
}
[data-reach-custom-checkbox-input][data-focused] {
}
```
#### CustomCheckboxInput Props
Expand Down
28 changes: 27 additions & 1 deletion website/src/pages/disclosure.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ yarn add @reach/disclosure
import {
Disclosure,
DisclosureButton,
DisclosurePanel
DisclosurePanel,
} from "@reach/disclosure";
```

Expand Down Expand Up @@ -190,6 +190,19 @@ return (

The trigger button a user clicks to interact with a disclosure.

#### DisclosureButton CSS Selectors

Please see the [styling guide](/styling).

```css
[data-reach-disclosure-button] {
}
[data-reach-disclosure-button][data-state="open"] {
}
[data-reach-disclosure-button][data-state="collapsed"] {
}
```

#### DisclosureButton Props

| Prop | Type | Required |
Expand All @@ -208,6 +221,19 @@ Typically a text string that serves as a label for the disclosure button, though

The collapsible panel in which inner content for a disclosure item is rendered.

#### DisclosurePanel CSS Selectors

Please see the [styling guide](/styling).

```css
[data-reach-disclosure-panel] {
}
[data-reach-disclosure-panel][data-state="open"] {
}
[data-reach-disclosure-panel][data-state="collapsed"] {
}
```

#### DisclosurePanel Props

| Prop | Type | Required |
Expand Down
98 changes: 98 additions & 0 deletions website/src/styles/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,3 +394,101 @@ button#hamburger {
margin: 0 0.25em;
}
}

.example-custom-checkbox [data-reach-custom-checkbox-container]::before,
.example-custom-checkbox [data-reach-custom-checkbox-container]::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
}

.example-custom-checkbox [data-reach-custom-checkbox-container]::before {
width: 100%;
height: 100%;
border: 1px solid #b8b8b8;
border-radius: 0.2em;
background-color: #edeced;
}

.example-custom-checkbox [data-reach-custom-checkbox-container]:focus-within {
outline: none;
box-shadow: none;
}

.example-custom-checkbox
[data-reach-custom-checkbox-container]:focus-within::before {
box-shadow: 0 0 0 2px rgba(63, 148, 191, 0.65);
}

.example-custom-checkbox
[data-reach-custom-checkbox-container][data-state="checked"]::before,
.example-custom-checkbox
[data-reach-custom-checkbox-container][data-state="mixed"]::before {
border-color: #1159a6;
background-color: #3f94bf;
}

.example-custom-checkbox.orange
[data-reach-custom-checkbox-container]:focus-within::before {
box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.65);
}

.example-custom-checkbox.orange
[data-reach-custom-checkbox-container][data-state="checked"]::before,
.example-custom-checkbox.orange
[data-reach-custom-checkbox-container][data-state="mixed"]::before {
border-color: #a7600b;
background-color: #ff8c00;
}

.example-custom-checkbox.banana
[data-reach-custom-checkbox-container]:focus-within::before {
box-shadow: 0 0 0 2px rgba(201, 171, 0, 0.65);
}

.example-custom-checkbox.banana
[data-reach-custom-checkbox-container][data-state="checked"]::before,
.example-custom-checkbox.banana
[data-reach-custom-checkbox-container][data-state="mixed"]::before {
border-color: #968210;
background-color: #c9ab00;
}

.example-custom-checkbox.apple
[data-reach-custom-checkbox-container]:focus-within::before {
box-shadow: 0 0 0 2px rgba(158, 13, 13, 0.65);
}

.example-custom-checkbox.apple
[data-reach-custom-checkbox-container][data-state="checked"]::before,
.example-custom-checkbox.apple
[data-reach-custom-checkbox-container][data-state="mixed"]::before {
border-color: #6b1111;
background-color: #9e0d0d;
}

.example-custom-checkbox
[data-reach-custom-checkbox-container][data-state="checked"]::after {
display: block;
width: calc(45% - 2px);
height: calc(90% - 4px);
border: medium solid #fff;
border-width: 0 0.125em 0.125em 0;
transform: translateY(-65%) translateX(-50%) rotate(45deg);
}

.example-custom-checkbox
[data-reach-custom-checkbox-container][data-state="mixed"]::after {
display: block;
width: calc(100% - 6px);
border-bottom: 0.125em solid #fff;
transform: translate(-50%, -50%);
transform-origin: center center;
}

.example-custom-checkbox
[data-reach-custom-checkbox][data-custom-checkmarks]::after {
display: none;
}
Loading

0 comments on commit 5977a9c

Please sign in to comment.