Skip to content

Commit

Permalink
HTML Syntax fixup.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sherakama
sherakama committed May 29, 2024
1 parent 70417c2 commit 84561bc
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 94 deletions.
4 changes: 2 additions & 2 deletions content/examples/alerts.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
class="button group leading-display bg-transparent hocus:bg-transparent p-0 flex items-center w-fit sans font-semibold text-white hocus:text-white text-17 uppercase font-bold inline-block tracking-widest mr-0 ml-auto"
type="button"><span>Dismiss</span><span class="sr-only">Information</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" height="20"
width="20" className="ml-02em">
width="20" class="ml-02em">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"></path>
Expand Down Expand Up @@ -137,4 +137,4 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
</div>
</Section>

</div>
</div>
8 changes: 4 additions & 4 deletions content/examples/cards.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
<div class="rs-ml-1 relative mt-[-5.1rem] z-1">
<div class="rounded-full w-fit p-6 bg-gradient-to-tr from-black to-black group-hover:from-black-90 group-hover:to-black-90 group-focus-within:from-black-90 group-focus-within:to-black-90">
<div class="justify-center w-fit rounded-full flex flex-row items-center bg-black-true text-white px-20 min-w-[9rem] h-90">
<time dateTime="2023-06-24 00:00Z" class="flex flex-col">
<time datetime="2023-06-24 00:00Z" class="flex flex-col">
<span class="mb-8 ml-2 uppercase leading-none text-20 lg:text-22"> Jun</span>
<span class="font-bold font-serif leading-trim text-[4.1rem]">24</span>
</time>
<span class="relative font-bold leading-trim top-11 text-m2 px-03em" aria-hidden="true">–</span>
<span class="sr-only">to</span>
<time dateTime="2023-07-03 00:00Z" class="flex flex-col">
<time datetime="2023-07-03 00:00Z" class="flex flex-col">
<span class="mb-8 ml-2 uppercase leading-none text-20 lg:text-22">Jul</span>
<span class="font-bold font-serif leading-trim text-[4.1rem]">03</span>
</time>
Expand Down Expand Up @@ -97,9 +97,9 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
class="transition w-08em ml-02em -rotate-45 group-hover:-rotate-45 group-focus:-rotate-45 transform-gpu group-hover:translate-x-01em group-focus:translate-x-01em group-hover:-translate-y-01em group-focus:-translate-y-01em relative inline-block text-digital-red-light">
<path fillRule="evenodd"
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clipRule="evenodd"></path>
clip-rule="evenodd"></path>
</svg>
<span class="sr-only"> (external link)</span>
</a>
Expand Down
6 changes: 3 additions & 3 deletions content/examples/containers.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ lastUpdatedDate: 2023-04-28T12:00:00.000Z

<Section heading="Usage:" width="full" className="max-w-1200">
```html
<div className="cc rs-py-2 px-20 bg-black-10 mb-40">
<div class="cc rs-py-2 px-20 bg-black-10 mb-40">
<div>This is a container example</div>
</div>
```
Expand All @@ -14,7 +14,7 @@ lastUpdatedDate: 2023-04-28T12:00:00.000Z
</div>

```html
<div className="w-full rs-py-2 px-20 bg-black-10 mb-40">
<div class="w-full rs-py-2 px-20 bg-black-10 mb-40">
<div>This is a container example</div>
</div>
```
Expand All @@ -23,7 +23,7 @@ lastUpdatedDate: 2023-04-28T12:00:00.000Z
</div>

```html
<div className="w-screen rs-py-2 px-20 bg-black-10 mb-40">
<div class="w-screen rs-py-2 px-20 bg-black-10 mb-40">
<div>This is a container example</div>
</div>
```
Expand Down
132 changes: 66 additions & 66 deletions content/examples/form-elements.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<div className="mb-30">
```html
<fieldset>
<legend className="legend">Label</legend>
<legend class="legend">Label</legend>
...
</fieldset>
```
Expand All @@ -19,8 +19,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Text Input</legend>
```html
<label htmlFor="input__text" className="sr-only">Text Input</label>
<input className="input" id="input__text" type="text" />
<label for="input__text" class="sr-only">Text Input</label>
<input class="input" id="input__text" type="text" />
```
<p>
<label htmlFor="input__text" className="sr-only">Text Input</label>
Expand All @@ -31,8 +31,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Password</legend>
```html
<label htmlFor="input__password" className="sr-only">Password</label>
<input className="input" id="input__password" type="password" />
<label for="input__password" class="sr-only">Password</label>
<input class="input" id="input__password" type="password" />
```
<p>
<label htmlFor="input__password" className="sr-only">Password</label>
Expand All @@ -43,8 +43,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Web Address</legend>
```html
<label htmlFor="input__webaddress" className="sr-only">Web Address</label>
<input className="input" id="input__webaddress" type="url" />
<label for="input__webaddress" class="sr-only">Web Address</label>
<input class="input" id="input__webaddress" type="url" />
```
<p>
<label htmlFor="input__webaddress" className="sr-only">Web Address</label>
Expand All @@ -55,20 +55,20 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Email Address</legend>
```html
<label htmlFor="input__emailaddress" className="sr-only">Email Address</label>
<input className="input" id="input__emailaddress" type="email" />
<label for="input__emailaddress" class="sr-only">Email Address</label>
<input class="input" id="input__emailaddress" type="email" />
```
<p>
<label htmlFor="input__emailaddress" className="sr-only">Email Address</label>
<input className="input" id="input__emailaddress" type="email" />
<label for="input__emailaddress" class="sr-only">Email Address</label>
<input class="input" id="input__emailaddress" type="email" />
</p>
</fieldset>

<fieldset className="mb-20">
<legend className="legend">Phone Number</legend>
```html
<label htmlFor="input__phone" className="sr-only">Phone Number</label>
<input className="input" id="input__phone" type="tel" />
<label for="input__phone" class="sr-only">Phone Number</label>
<input class="input" id="input__phone" type="tel" />
```
<p>
<label htmlFor="input__phone" className="sr-only">Phone Number</label>
Expand All @@ -79,8 +79,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Search</legend>
```html
<label htmlFor="input__search" className="sr-only">Search</label>
<input className="input" id="input__search" type="search" />
<label for="input__search" class="sr-only">Search</label>
<input class="input" id="input__search" type="search" />
```
<p>
<label htmlFor="input__search" className="sr-only">Search</label>
Expand All @@ -91,8 +91,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Number Input</legend>
```html
<label htmlFor="input__number" className="sr-only">Number Input</label>
<input className="input" id="input__number" type="number" />
<label for="input__number" class="sr-only">Number Input</label>
<input class="input" id="input__number" type="number" />
```
<p>
<label htmlFor="input__number" className="sr-only">Number Input</label>
Expand All @@ -103,8 +103,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Error</legend>
```html
<label htmlFor="input__is-error" className="sr-only">Error</label>
<input className="input is-error" id="input__is-error" type="text" />
<label for="input__is-error" class="sr-only">Error</label>
<input class="input is-error" id="input__is-error" type="text" />
```
<p>
<label htmlFor="input__is-error" className="sr-only">Error</label>
Expand All @@ -115,8 +115,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Valid</legend>
```html
<label htmlFor="input__is-valid" className="sr-only">Valid</label>
<input className="input is-valid" id="input__valid" type="text" />
<label for="input__is-valid" class="sr-only">Valid</label>
<input class="input is-valid" id="input__valid" type="text" />
```
<p>
<label htmlFor="input__is-valid" className="sr-only">Valid</label>
Expand All @@ -129,8 +129,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Select</legend>
```html
<label htmlFor="select" className="sr-only">Select</label>
<select className="select" id="select">
<label for="select" class="sr-only">Select</label>
<select class="select" id="select">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
Expand All @@ -156,20 +156,20 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
```html
<ul>
<li>
<input className="checkbox" id="checkbox1" name="checkbox" type="checkbox" defaultChecked={true} />
<label className="label" htmlFor="checkbox1">Choice A</label>
<input class="checkbox" id="checkbox1" name="checkbox" type="checkbox" checked="true" />
<label class="label" for="checkbox1">Choice A</label>
</li>
<li>
<input className="checkbox" id="checkbox2" name="checkbox" type="checkbox" />
<label className="label" htmlFor="checkbox2">Choice B</label>
<input class="checkbox" id="checkbox2" name="checkbox" type="checkbox" />
<label class="label" for="checkbox2">Choice B</label>
</li>
<li>
<input className="checkbox" id="checkbox3" name="checkbox" type="checkbox" />
<label className="label" htmlFor="checkbox3">Choice C</label>
<input class="checkbox" id="checkbox3" name="checkbox" type="checkbox" />
<label class="label" for="checkbox3">Choice C</label>
</li>
<li>
<input className="checkbox" id="checkbox4" name="checkbox" type="checkbox" />
<label className="label" htmlFor="checkbox4">Choice D</label>
<input class="checkbox" id="checkbox4" name="checkbox" type="checkbox" />
<label class="label" for="checkbox4">Choice D</label>
</li>
</ul>
```
Expand Down Expand Up @@ -199,16 +199,16 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
```html
<ul>
<li>
<input className="radio" id="radio1" name="radio" type="radio" defaultChecked={true} />
<label className="label" htmlFor="radio1">Option 1</label>
<input class="radio" id="radio1" name="radio" type="radio" checked="true" />
<label class="label" for="radio1">Option 1</label>
</li>
<li>
<input className="radio" id="radio2" name="radio" type="radio" />
<label className="label" htmlFor="radio2">Option 2</label>
<input class="radio" id="radio2" name="radio" type="radio" />
<label class="label" for="radio2">Option 2</label>
</li>
<li>
<input className="radio" id="radio3" name="radio" type="radio" />
<label className="label" htmlFor="radio3">Option 3</label>
<input class="radio" id="radio3" name="radio" type="radio" />
<label class="label" for="radio3">Option 3</label>
</li>
</ul>
```
Expand All @@ -232,7 +232,7 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<Section heading="Textarea">
<fieldset className="mb-20">
```html
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here" className="textarea"></textarea>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here" class="textarea"></textarea>
```
<p>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here" className="textarea"></textarea>
Expand All @@ -244,8 +244,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Color input</legend>
```html
<label htmlFor="ic" className="sr-only">Color input</label>
<input className="input" type="color" id="ic" defaultValue="#000000" />
<label for="ic" class="sr-only">Color input</label>
<input class="input" type="color" id="ic" value="#000000" />
```
<p>
<label htmlFor="ic" className="sr-only">Color input</label>
Expand All @@ -256,8 +256,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Number input</legend>
```html
<label htmlFor="in" className="sr-only">Number input</label>
<input className="input" type="number" id="in" min="0" max="10" defaultValue="5" />
<label for="in" class="sr-only">Number input</label>
<input class="input" type="number" id="in" min="0" max="10" value="5" />
```
<p>
<label htmlFor="in" className="sr-only">Number input</label>
Expand All @@ -268,8 +268,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Range input</legend>
```html
<label htmlFor="ir" className="sr-only">Range input</label>
<input className="input" type="range" id="ir" defaultValue="10" />
<label for="ir" class="sr-only">Range input</label>
<input class="input" type="range" id="ir" value="10" />
```
<p>
<label htmlFor="ir" className="sr-only">Range input</label>
Expand All @@ -280,8 +280,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Date input</legend>
```html
<label htmlFor="idd" className="sr-only">Date input</label>
<input className="input" type="date" id="idd" defaultValue="1970-01-01" />
<label for="idd" class="sr-only">Date input</label>
<input class="input" type="date" id="idd" value="1970-01-01" />
```
<p>
<label htmlFor="idd" className="sr-only">Date input</label>
Expand All @@ -292,8 +292,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Month input</legend>
```html
<label htmlFor="idm" className="sr-only">Month input</label>
<input className="input" type="month" id="idm" defaultValue="1970-01" />
<label for="idm" class="sr-only">Month input</label>
<input class="input" type="month" id="idm" value="1970-01" />
```
<p>
<label htmlFor="idm" className="sr-only">Month input</label>
Expand All @@ -304,8 +304,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Week input</legend>
```html
<label htmlFor="idw" className="sr-only">Week input</label>
<input className="input" type="week" id="idw" defaultValue="1970-W01" />
<label for="idw" class="sr-only">Week input</label>
<input class="input" type="week" id="idw" value="1970-W01" />
```
<p>
<label htmlFor="idw" className="sr-only">Week input</label>
Expand All @@ -316,8 +316,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Datetime input</legend>
```html
<label htmlFor="idt" className="sr-only">Datetime input</label>
<input className="input" type="datetime" id="idt" defaultValue="1970-01-01T00:00:00Z" />
<label for="idt" class="sr-only">Datetime input</label>
<input class="input" type="datetime" id="idt" value="1970-01-01T00:00:00Z" />
```
<p>
<label htmlFor="idt" className="sr-only">Datetime input</label>
Expand All @@ -328,8 +328,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Datetime-local input</legend>
```html
<label htmlFor="idtl" className="sr-only">Datetime-local input</label>
<input className="input" type="datetime-local" id="idtl" defaultValue="1970-01-01T00:00" />
<label for="idtl" class="sr-only">Datetime-local input</label>
<input class="input" type="datetime-local" id="idtl" value="1970-01-01T00:00" />
```
<p>
<label htmlFor="idtl" className="sr-only">Datetime-local input</label>
Expand All @@ -342,18 +342,18 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
<fieldset className="mb-20">
<legend className="legend">Action buttons</legend>
```html
<label htmlFor="input__submit" className="sr-only">Submit input</label>
<input id="input__submit" className="button" type="submit" defaultValue="<input type=submit>" />
<label htmlFor="input__button" className="sr-only">Button input</label>
<input id="input__button" className="button" type="button" defaultValue="<input type=button>" />
<label htmlFor="input__reset" className="sr-only">Reset input</label>
<input id="input__reset" className="button" type="reset" defaultValue="<input type=reset>" />
<label htmlFor="input__disabled" className="sr-only">Disabled submit input</label>
<input id="input__disabled" className="button" type="submit" defaultValue="<input disabled>" disabled />
<button className="button" type="submit">&lt;button type=submit&gt;</button>
<button className="button" type="button">&lt;button type=button&gt;</button>
<button className="button" type="reset">&lt;button type=reset&gt;</button>
<button className="button" type="button" disabled>&lt;button disabled&gt;</button>
<label for="input__submit" class="sr-only">Submit input</label>
<input id="input__submit" class="button" type="submit" value="<input type=submit>" />
<label for="input__button" class="sr-only">Button input</label>
<input id="input__button" class="button" type="button" value="<input type=button>" />
<label for="input__reset" class="sr-only">Reset input</label>
<input id="input__reset" class="button" type="reset" value="<input type=reset>" />
<label for="input__disabled" class="sr-only">Disabled submit input</label>
<input id="input__disabled" class="button" type="submit" value="<input disabled>" disabled />
<button class="button" type="submit">&lt;button type=submit&gt;</button>
<button class="button" type="button">&lt;button type=button&gt;</button>
<button class="button" type="reset">&lt;button type=reset&gt;</button>
<button class="button" type="button" disabled>&lt;button disabled&gt;</button>
```

<p className="flex gap-[4px] flex-wrap">
Expand Down
8 changes: 4 additions & 4 deletions content/examples/layout.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ lastUpdatedDate: 2022-05-17T12:00:00.000Z

<Section heading="Page layout example:" width="full" className="max-w-1200">
```html
<div className="grid md:grid-cols-4 grid-gap">
<header className="md:col-span-4">Header</header>
<div class="grid md:grid-cols-4 grid-gap">
<header class="md:col-span-4">Header</header>
<aside>Sidebar</aside>
<main className="md:col-span-3">Main Content</main>
<footer className="md:col-span-4">Footer</footer>
<main class="md:col-span-3">Main Content</main>
<footer class="md:col-span-4">Footer</footer>
</div>
```
<div className="grid md:grid-cols-4 grid-gap">
Expand Down
Loading

0 comments on commit 84561bc

Please sign in to comment.