@scattered-light/loomiere-mojave 0.23.0 → 0.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/exports/AGENTS.md +1 -1
- package/dist/exports/catalog.json +4 -0
- package/dist/exports/design-system/README.md +1 -1
- package/dist/exports/design-system/components/Button/README.md +1 -1
- package/dist/exports/design-system/components/Button/preview.html +2 -2
- package/dist/exports/design-system/components/Notice/README.md +30 -0
- package/dist/exports/design-system/components/Notice/preview.html +19 -0
- package/dist/exports/design-system/components/Spinner/README.md +29 -0
- package/dist/exports/design-system/components/Spinner/preview.html +19 -0
- package/dist/exports/design-system/components/bundle.css +179 -66
- package/dist/exports/design-system/components/bundle.js +7 -7
- package/dist/exports/design-system/components/index.d.ts +7 -3
- package/package.json +2 -2
package/dist/exports/AGENTS.md
CHANGED
|
@@ -152,7 +152,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
|
|
|
152
152
|
|
|
153
153
|
### Components
|
|
154
154
|
|
|
155
|
-
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
|
|
155
|
+
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `Notice`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Spinner`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
|
|
156
156
|
|
|
157
157
|
Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
|
|
158
158
|
|
|
@@ -164,6 +164,8 @@
|
|
|
164
164
|
"design-system/components/MultiSelect/preview.html",
|
|
165
165
|
"design-system/components/NavigationMenu/README.md",
|
|
166
166
|
"design-system/components/NavigationMenu/preview.html",
|
|
167
|
+
"design-system/components/Notice/README.md",
|
|
168
|
+
"design-system/components/Notice/preview.html",
|
|
167
169
|
"design-system/components/NumberField/README.md",
|
|
168
170
|
"design-system/components/NumberField/preview.html",
|
|
169
171
|
"design-system/components/OTPField/README.md",
|
|
@@ -191,6 +193,8 @@
|
|
|
191
193
|
"design-system/components/SideNav/preview.html",
|
|
192
194
|
"design-system/components/Slider/README.md",
|
|
193
195
|
"design-system/components/Slider/preview.html",
|
|
196
|
+
"design-system/components/Spinner/README.md",
|
|
197
|
+
"design-system/components/Spinner/preview.html",
|
|
194
198
|
"design-system/components/SplitButton/README.md",
|
|
195
199
|
"design-system/components/SplitButton/preview.html",
|
|
196
200
|
"design-system/components/Splitter/README.md",
|
|
@@ -144,7 +144,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
|
|
|
144
144
|
|
|
145
145
|
## Components
|
|
146
146
|
|
|
147
|
-
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
|
|
147
|
+
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `Notice`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Spinner`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
|
|
148
148
|
|
|
149
149
|
Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
|
|
150
150
|
|
|
@@ -10,7 +10,7 @@ Base UI docs: https://base-ui.com/react/components/button
|
|
|
10
10
|
|
|
11
11
|
| Class | Data attributes it answers to |
|
|
12
12
|
|---|---|
|
|
13
|
-
| `Button` | `data-icon-only`; `data-size`: `xs`, `sm`, `lg` |
|
|
13
|
+
| `Button` | `data-icon-only`; `data-emphasis`: `link`; `data-size`: `xs`, `sm`, `lg` |
|
|
14
14
|
|
|
15
15
|
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
16
16
|
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var g=Object.create;var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),S=(e,a)=>{for(var n in a)p(e,n,{get:a[n],enumerable:!0})},E=(e,a,n,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of f(a))!w.call(e,r)&&r!==n&&p(e,r,{get:()=>a[r],enumerable:!(s=v(a,r))||s.enumerable});return e};var I=(e,a,n)=>(n=e!=null?g(h(e)):{},E(a||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e));var m=B((q,c)=>{c.exports=window.Loomiere});var y={};S(y,{Default:()=>k,Disabled:()=>L,Emphasis:()=>j,IconOnly:()=>C,Link:()=>M,Loading:()=>O,QuietIconOnly:()=>W,Sizes:()=>D,Variants:()=>A,WithIcon:()=>R,default:()=>u});var o=I(m(),1);var d=window.React;function t(e,a,n){let{children:s,...r}=a||{};return n!==void 0&&(r.key=n),s===void 0?d.createElement(e,r):Array.isArray(s)?d.createElement(e,r,...s):d.createElement(e,r,s)}var V=d.Fragment;var z={title:"Components/Lib/Button",component:o.Button,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],argTypes:{children:{control:"text",description:"Button content"}}},u=z,l=e=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",...e,children:t("path",{d:"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"})}),k={render:()=>t(o.Button,{type:"button",children:"Button"})},A={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:"Default"}),t(o.Button,{type:"button","data-variant":"outline",children:"Outline"}),t(o.Button,{type:"button","data-variant":"ghost",children:"Ghost"})]})},D={render:()=>t("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"},children:[t(o.Button,{type:"button","data-size":"xs",children:"Extra Small"}),t(o.Button,{type:"button","data-size":"sm",children:"Small"}),t(o.Button,{type:"button","data-size":"md",children:"Medium"}),t(o.Button,{type:"button","data-size":"lg",children:"Large"})]})},R={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:[t(l,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"outline",children:[t(l,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"ghost",children:[t(l,{}),"Add Item"]})]})},C={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button","aria-label":"Add item",children:t(l,{})}),t(o.Button,{type:"button","data-variant":"outline","aria-label":"Add item",children:t(l,{})}),t(o.Button,{type:"button","data-variant":"ghost","aria-label":"Add item",children:t(l,{})})]})},x=({flip:e,...a})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",style:e?{transform:"scaleX(-1)"}:void 0,...a,children:t("path",{d:"M7.2 14.8a.75.75 0 010-1.06L10.94 10 7.2 6.26a.75.75 0 011.06-1.06l4.27 4.27a.75.75 0 010 1.06L8.26 14.8a.75.75 0 01-1.06 0z"})}),W={render:()=>t("div",{style:{display:"flex",alignItems:"center",gap:"var(--sl-space-2)",width:"280px"},children:[t(o.Button,{type:"button",emphasis:"quiet",palette:"neutral","data-size":"xs","aria-label":"Previous month",children:t(x,{flip:!0})}),t("span",{className:"text-style-subtitle-base",style:{flexGrow:1,textAlign:"center"},children:"October 2026"}),t(o.Button,{type:"button",emphasis:"quiet",palette:"neutral","data-size":"xs","aria-label":"Next month",children:t(x,{})})]})},L={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"outline",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"ghost",disabled:!0,children:"Disabled"})]})},O={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:[t("span",{style:{width:"16px",height:"16px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",animation:"spin 0.6s linear infinite"}}),"Loading..."]}),t("style",{children:`
|
|
16
16
|
@keyframes spin {
|
|
17
17
|
to { transform: rotate(360deg); }
|
|
18
18
|
}
|
|
19
|
-
`})]})},
|
|
19
|
+
`})]})},j={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)"},children:[void 0,"secondary","error"].map(e=>t("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["bold","standard","subtle","quiet"].map(a=>t(o.Button,{type:"button",emphasis:a,palette:e,children:e?`${a} ${e}`:a},a))},e??"default"))})},M={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:360},children:[t(o.Button,{type:"button",emphasis:"link",style:{justifySelf:"start"},children:"Forgot your password?"}),t("p",{style:{margin:0},children:["Nothing matched."," ",t(o.Button,{type:"button",emphasis:"link",children:"Clear the filters"})," ","to see every row."]}),t(o.Button,{type:"button",emphasis:"link",disabled:!0,style:{justifySelf:"start"},children:"Disabled link"})]})};var i=window.React,b=u||{},N=["Default","Variants","Sizes","WithIcon"];function F({id:e}){let a=y[e],n={...b.args||{},...a.args||{}};return(a.render||(r=>i.createElement(b.component,r)))(n,{args:n,id:e,name:e})}var P=N.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,P));})();
|
|
20
20
|
|
|
21
21
|
</script>
|
|
22
22
|
</body>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# Notice
|
|
2
|
+
|
|
3
|
+
The Base UI Notice styled by the theme. A message in the page: a thick leading edge and a tinted ground. data-status picks the status palette (info, success, warning, error); without it the notice is neutral. data-technical sets the text in the code style on a neutral ground, for a rare technical message shown as it came. The corners stay square so the edge reads as a rule.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Notice` (`import { Notice } from '@base-ui/react/notice'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
|
+
|
|
7
|
+
Base UI docs: https://base-ui.com/react/components/notice
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `Notice` | `data-status`: `error`, `warning`, `success`, `info`; `data-technical` |
|
|
14
|
+
|
|
15
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
16
|
+
|
|
17
|
+
## Example
|
|
18
|
+
|
|
19
|
+
From the Notice stories (`Default`):
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
export const Default: Story = {
|
|
23
|
+
args: { status: 'error', children: 'Email or password is incorrect, or the account is temporarily locked.' },
|
|
24
|
+
render: (args) => <Notice {...args} style={{ maxWidth: 420 }} />,
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
/** Every status, the neutral notice, and the technical style. */
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
The preview also shows `Statuses`, `InAForm`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Components" height=360 subtitle="Default / Statuses / InAForm" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
14
|
+
<script>
|
|
15
|
+
(()=>{var f=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),E=(e,t)=>{for(var n in t)l(e,n,{get:t[n],enumerable:!0})},N=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of g(t))!w.call(e,r)&&r!==n&&l(e,r,{get:()=>t[r],enumerable:!(s=h(t,r))||s.enumerable});return e};var S=(e,t,n)=>(n=e!=null?f(b(e)):{},N(t||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e));var p=x((L,u)=>{u.exports=window.Loomiere});var d={};E(d,{Default:()=>F,InAForm:()=>k,Statuses:()=>R,default:()=>m});var o=S(p(),1);var i=window.React;function a(e,t,n){let{children:s,...r}=t||{};return n!==void 0&&(r.key=n),s===void 0?i.createElement(e,r):Array.isArray(s)?i.createElement(e,r,...s):i.createElement(e,r,s)}var B=i.Fragment;var v={title:"Components/Lib/Notice",component:o.Notice,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},m=v,F={args:{status:"error",children:"Email or password is incorrect, or the account is temporarily locked."},render:e=>a(o.Notice,{...e,style:{maxWidth:420}})},R={render:()=>a("div",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:420},children:[a(o.Notice,{announce:!1,children:"Neutral: a note about this page."}),a(o.Notice,{status:"info",announce:!1,children:"Info: the import runs overnight."}),a(o.Notice,{status:"success",announce:!1,children:"If that email has an account, we've sent a link to it."}),a(o.Notice,{status:"warning",announce:!1,children:"Two accounts have no opening balance."}),a(o.Notice,{status:"error",announce:!1,children:"Can't reach the server. Check the connection and try again."}),a(o.Notice,{technical:!0,announce:!1,children:"This computer's keychain is unavailable: access denied by the system"})]})},k={render:()=>a("form",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:360},onSubmit:e=>e.preventDefault(),children:[a(o.Field.Root,{children:[a(o.Field.Label,{children:"Email"}),a(o.Input,{type:"email",defaultValue:"jordan@example.com"})]}),a(o.Button,{type:"submit",children:"Sign in"}),a(o.Notice,{status:"error",announce:!1,children:"Enter your password"})]})};var c=window.React,y=m||{},I=["Default","Statuses","InAForm"];function j({id:e}){let t=d[e],n={...y.args||{},...t.args||{}};return(t.render||(r=>c.createElement(y.component,r)))(n,{args:n,id:e,name:e})}var A=I.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,A));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# Spinner
|
|
2
|
+
|
|
3
|
+
The Base UI Spinner styled by the theme. A ring that turns: the track in the subtle border, the moving arc in the accent border. Sizes are the icon tiers, so a spinner can stand in for an icon. Reduced motion slows it.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Spinner` (`import { Spinner } from '@base-ui/react/spinner'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
|
+
|
|
7
|
+
Base UI docs: https://base-ui.com/react/components/spinner
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `Spinner` | `data-size`: `condense`, `base`, `magnify` |
|
|
14
|
+
|
|
15
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
16
|
+
|
|
17
|
+
## Example
|
|
18
|
+
|
|
19
|
+
From the Spinner stories (`Default`):
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
export const Default: Story = {
|
|
23
|
+
args: { label: 'Loading clients' },
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
/** The icon tiers, so a spinner can stand in for an icon. */
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
The preview also shows `Sizes`, `WithText`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Components" height=360 subtitle="Default / Sizes / WithText" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
14
|
+
<script>
|
|
15
|
+
(()=>{var g=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var b=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),w=(e,t)=>{for(var n in t)l(e,n,{get:t[n],enumerable:!0})},v=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of x(t))!E.call(e,r)&&r!==n&&l(e,r,{get:()=>t[r],enumerable:!(o=u(t,r))||o.enumerable});return e};var h=(e,t,n)=>(n=e!=null?g(S(e)):{},v(t||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e));var y=b((I,p)=>{p.exports=window.Loomiere});var d={};w(d,{Default:()=>D,Sizes:()=>j,WithText:()=>k,default:()=>m});var i=h(y(),1);var c=window.React;function s(e,t,n){let{children:o,...r}=t||{};return n!==void 0&&(r.key=n),o===void 0?c.createElement(e,r):Array.isArray(o)?c.createElement(e,r,...o):c.createElement(e,r,o)}var M=c.Fragment;var R={title:"Components/Lib/Spinner",component:i.Spinner,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},m=R,D={args:{label:"Loading clients"}},j={render:()=>s("div",{style:{display:"flex",alignItems:"center",gap:"var(--sl-space-3)"},children:["condense","base","magnify","maximize"].map(e=>s(i.Spinner,{size:e,label:`Loading (${e})`},e))})},k={render:()=>s("div",{role:"status",style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"var(--sl-space-2)"},children:[s(i.Spinner,{}),"Checking this computer for a saved sign-in\u2026"]})};var a=window.React,f=m||{},L=["Default","Sizes","WithText"];function z({id:e}){let t=d[e],n={...f.args||{},...t.args||{}};return(t.render||(r=>a.createElement(f.component,r)))(n,{args:n,id:e,name:e})}var A=L.map(e=>a.createElement("section",{key:e,className:"ds-story"},a.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),a.createElement("div",{className:"ds-story-body"},a.createElement(z,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(a.createElement(a.Fragment,null,A));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|