Skip to content

Commit

Permalink
Fix direction component and remove unfinished flag
Browse files Browse the repository at this point in the history
  • Loading branch information
1aron committed Jan 15, 2024
1 parent d6fe719 commit a9b1fee
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 52 deletions.
1 change: 0 additions & 1 deletion website/app/[locale]/(root)/docs/cursor/metadata.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ const metadata: Metadata = {
title: 'Cursor',
description: 'Style syntax for setting the mouse cursor style.',
category: 'Appearance',
unfinished: true,
canIUseLink: 'https://caniuse.com/?search=cursor',
mdnLink: 'https://developer.mozilla.org/en-US/docs/Web/CSS/cursor'
}
Expand Down
17 changes: 17 additions & 0 deletions website/app/[locale]/(root)/docs/direction/components/Basic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Demo from 'websites/components/Demo'
import DemoPanel from 'websites/components/DemoPanel'
import Code from 'websites/components/Code'
import clsx from 'clsx'

export default ({ className }: any) => {
return (
<>
<Demo $py={0}>
<DemoPanel>
<p className={clsx(className, 'm:0')}>There are a wide variety of animals in the world, and each one has its own unique set of characteristics and habits.</p>
</DemoPanel>
</Demo>
<Code lang="html">{`<p class="**${className}**">There are a wide variety of animals in the world …</p>`}</Code>
</>
)
}
41 changes: 16 additions & 25 deletions website/app/[locale]/(root)/docs/direction/components/Overview.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,18 @@
'use client'

import Demo from 'websites/components/Demo'
import Code from 'websites/components/Code'
import SyntaxTable from '~/components/SyntaxTable'
import syntaxes from '../syntaxes'
import line from 'to-line'
import SyntaxTable from '~/components/SyntaxTable'
import SyntaxTr from '~/components/SyntaxTr'
import SyntaxPreview from './SyntaxPreview'

export default () =>
<SyntaxTable value={syntaxes} default="direction:ltr">
{(className: string) =>
<>
<Demo className="py:0!">
<div className={line(className, 'w:full bg:white@light bg:gray-20@dark p:30')}>
<div className="f:28 f:bold">Animals</div>
<p>There are a wide variety of animals in the world, and each one has its own unique set of characteristics and habits.</p>
</div>
</Demo>
<Code lang="html">{`
<div class="**${className}**">
<h3>Animals</h3>
<p>There are a wide variety of animals in the world …</p>
</div>
`}</Code>
</>
}
</SyntaxTable>
export default () => {
const previewSyntax = 'direction:ltr'
return (
<>
<SyntaxTable>
{syntaxes.map((syntax) =>
<SyntaxTr value={syntax} key={syntax} previewSyntax={previewSyntax}></SyntaxTr>)
}
</SyntaxTable>
<SyntaxPreview className={previewSyntax} />
</>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
'use client'

import useSelectedPreviewSyntax from '~/utils/use-selected-preview-syntax'
import Basic from './Basic'

export default (props: any) => {
return (
<Basic className={useSelectedPreviewSyntax(props.className)} />
)
}
26 changes: 2 additions & 24 deletions website/app/[locale]/(root)/docs/direction/content.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,11 @@
## Basic usage
### LTR
Use `direction:ltr` to set the text direction to left-to-right.
<Demo className="py:0!">
<div className="direction:ltr w:full bg:white@light bg:gray-20@dark p:30">
<div className="f:28 f:bold">Animals</div>
<p>There are a wide variety of animals in the world, and each one has its own unique set of characteristics and habits.</p>
</div>
</Demo>
```html
<div class="direction:ltr">
<h3>Animals</h3>
<p>There are a wide variety of animals in the world …</p>
</div>
```
<Basic className="direction:ltr" />

### RTL
Use `direction:rtl` to set the text direction to right-to-left.
<Demo className="py:0!">
<div className="direction:rtl w:full bg:white@light bg:gray-20@dark p:30">
<div className="f:28 f:bold">Animals</div>
<p>There are a wide variety of animals in the world, and each one has its own unique set of characteristics and habits.</p>
</div>
</Demo>
```html
<div class="direction:ltr">
<h3>Animals</h3>
<p>There are a wide variety of animals in the world …</p>
</div>
```
<Basic className="direction:rtl" />

---

Expand Down
1 change: 0 additions & 1 deletion website/app/[locale]/(root)/docs/direction/metadata.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ const metadata: Metadata = {
title: 'Direction',
description: 'Style syntax for setting the direction of text.',
category: 'Layout',
unfinished: true,
canIUseLink: 'https://caniuse.com/?search=direction',
mdnLink: 'https://developer.mozilla.org/en-US/docs/Web/CSS/direction'
}
Expand Down
5 changes: 4 additions & 1 deletion website/app/[locale]/(root)/docs/direction/syntaxes.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
const syntaxes = [['direction:ltr'], ['direction:rtl']]
const syntaxes = [
'direction:ltr',
'direction:rtl'
]

export default syntaxes

0 comments on commit a9b1fee

Please sign in to comment.