primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-26 02:38:32 +03:00
Code Issues Projects Releases Wiki Activity

Add rounded responsive stories (#2386)

Browse Source 
* Add rounded responsive stories
This commit is contained in:
Josep Martins 2023-02-17 09:45:03 +01:00 committed by GitHub
parent 7eb38522d3
commit 1b53e23ed3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tiny-actors-eat.md Normal file
View File

@ -0,0 +1,5 @@
---
'@primer/css': patch
---
Add responsive `border-radius` story

96
docs/src/stories/utilities/Border.stories.jsx
View File

@ -2,62 +2,33 @@ export default {
title: 'Utilities/Border' title: 'Utilities/Border'
} }
export const Default = ({}) => ( export const Default = ({}) => <span class="color-bg-subtle p-2 border">.border</span>
<span class="color-bg-subtle p-2 border">
.border
</span>
)
export const Direction = ({}) => ( export const Direction = ({}) => (
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}> <div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
<div class="color-bg-subtle p-2 border-left"> <div class="color-bg-subtle p-2 border-left">.border-left</div>
.border-left <div class="color-bg-subtle p-2 border-top">.border-top</div>
</div> <div class="color-bg-subtle p-2 border-bottom">.border-bottom</div>
<div class="color-bg-subtle p-2 border-top"> <div class="color-bg-subtle p-2 border-right">.border-right</div>
.border-top <div class="color-bg-subtle p-2 border-x">.border-x</div>
</div> <div class="color-bg-subtle p-2 border-y">.border-y</div>
<div class="color-bg-subtle p-2 border-bottom">
.border-bottom
</div>
<div class="color-bg-subtle p-2 border-right">
.border-right
</div>
<div class="color-bg-subtle p-2 border-x">
.border-x
</div>
<div class="color-bg-subtle p-2 border-y">
.border-y
</div>
</div> </div>
) )
export const Hide = ({}) => ( export const Hide = ({}) => <span class="color-bg-subtle p-2 border border-top-0">.border-top-0</span>
<span class="color-bg-subtle p-2 border border-top-0">
.border-top-0
</span>
)
export const Style = ({}) => ( export const Style = ({}) => <span class="color-bg-subtle p-2 border border-dashed">.border-dashed</span>
<span class="color-bg-subtle p-2 border border-dashed">
.border-dashed
</span>
)
export const Rounded = ({}) => ( export const Rounded = ({}) => (
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}> <div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
<div class="color-bg-subtle p-2 border rounded-0"> <div class="color-bg-subtle p-2 border rounded-0">.rounded-0</div>
.rounded-0 <div class="color-bg-subtle p-2 border rounded-1">.rounded-1</div>
</div> <div class="color-bg-subtle p-2 border rounded-2">.rounded-2</div>
<div class="color-bg-subtle p-2 border rounded-1"> <div class="color-bg-subtle p-2 border rounded-3">.rounded-3</div>
.rounded-1 <div
</div> class="color-bg-subtle border circle"
<div class="color-bg-subtle p-2 border rounded-2"> style={{display: 'inline-flex', justifyContent: 'center', alignItems: 'center', width: '100px', height: '100px'}}
.rounded-2 >
</div>
<div class="color-bg-subtle p-2 border rounded-3">
.rounded-3
</div>
<div class="color-bg-subtle border circle" style={{display: 'inline-flex', justifyContent: 'center', alignItems: 'center', width: '100px', height: '100px'}}>
.circle .circle
</div> </div>
</div> </div>
@ -65,23 +36,30 @@ export const Rounded = ({}) => (
export const RoundedDirection = ({}) => ( export const RoundedDirection = ({}) => (
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}> <div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
<div class="color-bg-subtle p-2 border rounded-top-2"> <div class="color-bg-subtle p-2 border rounded-top-2">.rounded-top-2</div>
.rounded-top-2 <div class="color-bg-subtle p-2 border rounded-right-2">.rounded-right-2</div>
</div> <div class="color-bg-subtle p-2 border rounded-bottom-2">.rounded-bottom-2</div>
<div class="color-bg-subtle p-2 border rounded-right-2"> <div class="color-bg-subtle p-2 border rounded-left-2">.rounded-left-2</div>
.rounded-right-2 </div>
</div> )
<div class="color-bg-subtle p-2 border rounded-bottom-2">
.rounded-bottom-2 export const RoundedResponsive = ({}) => (
</div> <div
<div class="color-bg-subtle p-2 border rounded-left-2"> class="color-bg-subtle p-2 border rounded-sm-1 rounded-md-2 rounded-lg-3"
.rounded-left-2 style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}
</div> >
<div>.border-left</div>
<div class="d-none d-sm-block">.rounded-sm-1</div>
<div class="d-none d-md-block">.rounded-md-2</div>
<div class="d-none d-lg-block">.rounded-lg-3</div>
</div> </div>
) )
export const Responsive = ({}) => ( export const Responsive = ({}) => (
<div class="color-bg-subtle p-2 border-left border-sm-top border-md-right border-lg-bottom" style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}> <div
class="color-bg-subtle p-2 border-left border-sm-top border-md-right border-lg-bottom"
style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}
>
<div>.border-left</div> <div>.border-left</div>
<div class="d-none d-sm-block">.border-sm-top</div> <div class="d-none d-sm-block">.border-sm-top</div>
<div class="d-none d-md-block">.border-md-right</div> <div class="d-none d-md-block">.border-md-right</div>