+
+
+
+ ${options.map(option => html`
+ `
+ }
+
+ private getOptions (): string[] {
+ const options = this.querySelectorAll this.onOptionClick(option)}>${option}
`)}
+ ${this.title}
+ +
+
+ `
+ }
+}
diff --git a/src/design-system/components/menu-items/index.ts b/src/design-system/components/menu-items/index.ts
new file mode 100644
index 000000000..7faaca136
--- /dev/null
+++ b/src/design-system/components/menu-items/index.ts
@@ -0,0 +1,4 @@
+import MenuItems from './MenuItems'
+
+export { MenuItems }
+export default MenuItems
diff --git a/src/design-system/components/menu/Menu.stories.ts b/src/design-system/components/menu/Menu.stories.ts
new file mode 100644
index 000000000..ee1430cbb
--- /dev/null
+++ b/src/design-system/components/menu/Menu.stories.ts
@@ -0,0 +1,29 @@
+import { html } from 'lit'
+
+import './Menu'
+import './../menu-item'
+import './../menu-items'
+import './../button'
+import { defineStoryRender } from '../../../storybook'
+
+const meta = {
+ title: 'Design System/Menu',
+} as const
+
+const render = defineStoryRender(() => html`
+ The above
';
-};
-
-To experience the full behaviour of the header, you need to log in. This can be done at
-[the example page](http://solidos.github.io/solid-ui/examples/header).
-
-
diff --git a/src/stories/Header.stories.js b/src/stories/Header.stories.js
deleted file mode 100644
index 87824d47a..000000000
--- a/src/stories/Header.stories.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as UI from '../../src/index'
-
-const headerDecorator = (Story) => {
- setTimeout(() => Story(), 1)
- return 'div with ID "PageHeader" is replaced by the header componentThe above
'
-}
-
-export default {
- title: 'Header',
-}
-
-export const Header = {
- render: () => {
- const options = {}
- UI.initHeader(SolidLogic.store, options)
- },
-
- name: 'header',
- decorators: [headerDecorator],
-}
diff --git a/src/stories/Images.mdx b/src/stories/Images.mdx
deleted file mode 100644
index ab869a54d..000000000
--- a/src/stories/Images.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as UI from '../../src/index'
-import * as ImagesStories from './Images.stories';
-
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import { rawJsonDecorator } from "./decorators";
-
-export const imageDecorator = (Story) => {
- const result = Story();
- return `
- div with ID "PageHeader" is replaced by the header componentReturns:
- ${result}
- Preview:
-Returns:
- ${result}
- Preview:
-
- **Status area:** This is the playground which the examples will interact with. Click the various
- buttons to see their effect here.
-
-
-
- Note that by default only `msg`, `warn` and `error` will add messages to the
- status area. You can change this by using [setLevel](?path=/docs/log--set-level).
-
-
-## log.msg: A simple message
-
-
-
-## log.warn: A warning message
-
-
-
-## log.debug: A debug message
-
-
-
-## log.info: An info message
-
-
-
-## log.error: An error message
-
-
-
-## log.success: A success message
-
-
-
-## log.alert: A alert message
-
-This example uses alert to notify user of a message. It will not log in the status area unless window.alert is not available.
-
-
-
-## log.clear: Clear messages
-
-Using this method you can clear the existing messages in the status area.
-
-
-
-## log.setLevel: Configure which messages are to be shown
-
-The module uses [bitmask](https://en.wikipedia.org/wiki/Mask_\(computing\)) to filter which types of messages that will be shown. It assigns the following 10-based
-number to each type (binaries in parenthesis):
-
-* Error: 1 (000001)
-* Warning: 2 (000010)
-* Message: 4 (000100)
-* Success: 8 (001000)
-* Info: 16 (010000)
-* Debug: 32 (100000)
-
-By default only error, warning, and normal messages will be shown, hence the number 7 that is shown by default in this example. You can set it to show all types of messages by passing 63 (which is the sum of all, and is 111111 in binary).
-
-
-
-## log.dumpHTML: Dump all HTML in body in a log message
-
-
-
-## log.logAscending: Start logging all messages in ascending order
-
-
-
-## log.logDescending: Start logging all messages in descending order
-
-
diff --git a/src/stories/Log.stories.js b/src/stories/Log.stories.js
deleted file mode 100644
index 9a732f172..000000000
--- a/src/stories/Log.stories.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import * as UI from '../../src/index'
-
-const buttonDecorator = (Story, { args }) => {
- const button = document.createElement('button')
- button.innerText = args.buttonLabel
- button.addEventListener('click', () => Story())
- return button
-}
-
-export default {
- title: 'Log',
-}
-
-export const SimpleMessage = {
- render: () => UI.log.msg('A simple message'),
- name: 'simple message',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Add a message',
- },
-}
-
-export const WarningMessage = {
- render: () => UI.log.warn('A warning message'),
- name: 'warning message',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Add a warning',
- },
-}
-
-export const DebugMessage = {
- render: () => UI.log.debug('A debugging message'),
- name: 'debug message',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Add a debugging message',
- },
-}
-
-export const InfoMessage = {
- render: () => UI.log.info('An info message'),
- name: 'info message',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Add an info message',
- },
-}
-
-export const ErrorMessage = {
- render: () => UI.log.error('An error message'),
- name: 'error message',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Add an error message',
- },
-}
-
-export const SuccessMessage = {
- render: () => UI.log.success('A success message'),
- name: 'success message',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Add a success message',
- },
-}
-
-export const AlertMessage = {
- render: () => UI.log.alert('An alert message'),
- name: 'alert message',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Trigger an alert message',
- },
-}
-
-export const ClearMessages = {
- render: () => UI.log.clear(),
- name: 'clear messages',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Clear status area',
- },
-}
-
-export const SetLevel = {
- render: () => {
- const div = document.createElement('div')
- const input = document.createElement('input')
- input.type = 'text'
- input.inputmode = 'numeric'
- input.pattern = '[0-9]*'
- input.value = 7
- div.appendChild(input)
- const button = document.createElement('button')
- button.innerText = 'Set level'
- button.addEventListener('click', () =>
- UI.log.setLevel(parseInt(input.value, 10))
- )
- div.appendChild(button)
- return div
- },
-
- name: 'set level',
-}
-
-export const DumpHtml = {
- render: () => UI.log.dumpHTML(),
- name: 'dump html',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Dump HTML',
- },
-}
-
-export const LogAscending = {
- render: () => UI.log.logAscending(),
- name: 'log ascending',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Log ascending',
- },
-}
-
-export const LogDescending = {
- render: () => UI.log.logDescending(),
- name: 'log descending',
- decorators: [buttonDecorator],
-
- args: {
- buttonLabel: 'Log descending',
- },
-}
diff --git a/src/stories/Matrix.mdx b/src/stories/Matrix.mdx
deleted file mode 100644
index cc3e80949..000000000
--- a/src/stories/Matrix.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as UI from '../../src/index'
-import * as MatrixStories from './Matrix.stories';
-
-import { Canvas, Meta, Story } from "@storybook/blocks";
-
-
-
-# Matrix
-
-More complex examples can be investigated on the
-[example page](http://solidos.github.io/solid-ui/examples/matrix/index.html).
-
-## for query
-
-
diff --git a/src/stories/Matrix.stories.js b/src/stories/Matrix.stories.js
deleted file mode 100644
index 9f2b5e599..000000000
--- a/src/stories/Matrix.stories.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as UI from '../../src/index'
-
-export default {
- title: 'Matrix',
-}
-
-export const ForQuery = {
- render: () => {
- const testDocURI = 'https://pod.example/'
- const testDoc = $rdf.sym(testDocURI)
- const kb = SolidLogic.store
- kb.removeMany(undefined, undefined, undefined, testDoc)
-
- const turtle = `@prefix : <#>.
-@prefix foaf: | className | icon | Preview | - ${lines.join("")} -
|---|
| className | icon | Preview | - ${lines.join('')} -
|---|