Skip to content

Commit

Permalink
refactor: refactoring README file
Browse files Browse the repository at this point in the history
  • Loading branch information
@PKulkoRaccoonGang
PKulkoRaccoonGang committed Nov 7, 2023
1 parent 4555846 commit ff62ebe
Showing 1 changed file with 142 additions and 74 deletions.
216 changes: 142 additions & 74 deletions src/Button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,34 +92,41 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi

return (
<>
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" size="lg" className="mb-2 mb-sm-0">
Large button
</Button>
<Button variant="outline-primary" size="lg" className="mb-2 mb-sm-0">
Large button
</Button>
</Stack>
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" size="sm" className="mb-2 mb-sm-0">
Small button
</Button>
<Button variant="outline-primary" size="sm" className="mb-2 mb-sm-0">
Small button
</Button>
</Stack>
<Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
<Button variant="link" size="inline" className="mb-2 mb-sm-0">Inline button</Button>
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" size="lg">
Large button
</Button>
<Button variant="outline-primary" size="lg">
Large button
</Button>
</Stack>
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" size="sm">
Small button
</Button>
<Button variant="outline-primary" size="sm">
Small button
</Button>
</Stack>
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="link" size="inline">Inline button</Button>
<Button variant="link" size="inline">Inline button</Button>
</Stack>
</>
)}
)
}
```

### When to use the inline size
Expand Down Expand Up @@ -152,21 +159,41 @@ Use inline size buttons for when a button sits with a line of text.
### Disabled

```jsx live
<>
<Button variant="primary" disabled>Primary disabled</Button>
<Button variant="secondary" disabled>Secondary disabled</Button>
<Button as="a" href="https://edx.org" disabled>Link disabled</Button>
</>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

return (
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" disabled>Primary disabled</Button>
<Button variant="secondary" disabled>Secondary disabled</Button>
<Button as="a" href="https://edx.org" disabled>Link disabled</Button>
</Stack>
)
}
```

### With empty href
For link to be `disabled`, it must have href defined with some value.

```jsx live
<>
<Button as='a' disabled>No href</Button>
<Button as='a' href='' disabled>Empty string href</Button>
</>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

return (
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button as='a' disabled>No href</Button>
<Button as='a' href='' disabled>Empty string href</Button>
</Stack>
)
}
```

### With Icons before or after
Expand Down Expand Up @@ -197,32 +224,43 @@ For link to be `disabled`, it must have href defined with some value.
Tertiary
</Button>
</Stack>
)}
)
}
```

### With a Spinner

```jsx live
<>
<Button variant="primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
<Button variant="brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
<Button variant="outline-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
<Button variant="outline-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
<Button variant="inverse-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
<Button variant="inverse-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
</>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

return (
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button variant="primary" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
<Button variant="brand" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
<Button variant="outline-primary" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
<Button variant="outline-brand" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
<Button variant="inverse-primary" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
<Button variant="inverse-brand" aria-label="Loading some stuff">
<Spinner animation="border" />
</Button>
</Stack>
)
}
```

***
Expand All @@ -238,33 +276,63 @@ For link to be `disabled`, it must have href defined with some value.
### (Deprecated) color variants

```jsx live
<div>
<Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
<Button.Deprecated className="btn-light">Light</Button.Deprecated>
<Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
</div>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });

return (
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
<Button.Deprecated className="btn-light">Light</Button.Deprecated>
<Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
</Stack>
)
}
```

### (Deprecated) outline variants

```jsx live
<div>
<Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
</div>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

return (
<Stack
className="mb-2"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
</Stack>
)
}
```

### (Deprecated) inverse variants

```jsx live
<div className="bg-gray-700 p-3">
<Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
</div>
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });

return (
<Stack
className="mb-2 p-3 bg-gray-700"
gap={2}
direction={ isExtraSmall ? "vertical" : "horizontal" }
>
<Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
<Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
<Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
</Stack>
)
}
```

### (Deprecated) link variant
Expand Down

0 comments on commit ff62ebe

Please sign in to comment.