Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod efficitur quam quis finibus. Aenean et lacus est. Phasellus fringilla non nisi eget posuere. Suspendisse vulputate congue augue sit amet porta. Pellentesque lacus ligula, pulvinar quis molestie eu, vestibulum aliquet enim. Vivamus ultricies tellus urna, nec iaculis ex scelerisque sed. Phasellus eu tempor ipsum, eget gravida nibh. Suspendisse potenti. Praesent maximus, odio id aliquet imperdiet, lorem lacus feugiat turpis, quis luctus neque tellus et urna. Duis urna felis, suscipit tincidunt purus a, ultrices tincidunt urna. Morbi aliquet consequat consequat. Cras sem urna, dictum nec lacinia fringilla, laoreet et nibh. Sed gravida diam ex, in fermentum erat bibendum at. Maecenas lacinia consequat tortor, ac viverra urna dignissim id. Nam eros ante, commodo quis turpis a, interdum ornare erat.
Sed posuere, ligula eget aliquet porttitor, mi purus viverra urna, luctus iaculis massa libero ut arcu. Vestibulum pulvinar nec mi et mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur facilisis turpis eget ante gravida ultricies. Suspendisse maximus elit in tincidunt porta. Aenean egestas mattis justo at condimentum. Suspendisse iaculis mi nisi, sit amet scelerisque elit tempor sit amet. Aenean eu sem vel metus ullamcorper ullamcorper et quis sem. Etiam luctus bibendum eros eu placerat. Nulla cursus urna id laoreet pulvinar.
Submit
Reset
```
--------------------------------
### React Popover Example
Source: https://sense-design-system.dev.nova-x.co/ui-patterns/popover
Demonstrates a Popover component using React and ODS components, displaying custom content triggered by an OdsIconButton. It includes styling for the popover panel and showcases basic component usage.
```html
Showing some popover content
```
```react
import { OdsPopover } from '@ods/components/react.popover';
import { OdsIconButton } from '@ods/components/react.icon-button';
const css = `
/* Only used for documentation */
.popover__panel {
padding: var(--sense-space-16);
border: 1px solid var(--sense-color-border-component);
background-color: var(--sense-color-background-component);
border-radius: var(--sense-border-radius-md);
}
`;
const Example = () => {
return (
<>
<OdsPopover>
<OdsIconButton slot='trigger' name='kudo-classification' variant='primary' label='classification'>Show Content</OdsIconButton>
<div className='popover__panel'>
Showing some popover content
</div>
</OdsPopover>
<style>{css}</style>
</>
)
}
export default Example;
```
--------------------------------
### Range Selection with OdsCalendar in React
Source: https://sense-design-system.dev.nova-x.co/components/calendar
This example demonstrates range date selection using the mode='range' prop. It depends on React, @ods/components/react-alt.calendar, and react-day-picker for DateRange type. Inputs include start and end dates; outputs a DateRange object via onSelect callback. Limitations: Component is in development and may not be fully importable.
```jsx
import { useState } from 'react';
import { OdsCalendar } from '@ods/components/react-alt.calendar';
import { DateRange } from 'react-day-picker';
export const Example = () => {
const today = new Date();
const septFirst = new Date(today.getFullYear(), 8, 1, 12);
const toDate = new Date(today.getFullYear(), 8, 1, 12);
const fromDate = new Date(today.getFullYear(), 8, 1, 12);
fromDate.setDate(septFirst.getDate() + 15);
toDate.setDate(septFirst.getDate() + 28);
const defaultRange: DateRange = {
from: fromDate,
to: toDate,
};
const [range, setRange] = useState(defaultRange);
return (
)
}
export default Example;
```
--------------------------------
### Include help text in ODS Select – HTML & React
Source: https://sense-design-system.dev.nova-x.co/components/select
This snippet demonstrates adding descriptive help text to the ODS select component. The help-text attribute (HTML) or prop (React) provides users with additional guidance, such as explaining the required skill level. Both implementations mirror the labeled example.
```HTML
Option 1
Option 2
Option 3
```
```React
import { OdsSelect } from '@ods/components/react.select';
import { OdsOption } from '@ods/components/react.option';
const Example = () => {
return (
Option 1
Option 2
Option 3
)
}
export default Example;
```
--------------------------------
### Importing OdsSideNavMenuSectionLabel (Web)
Source: https://sense-design-system.dev.nova-x.co/components/side-nav-menu-section-label
Demonstrates the import statement for the `OdsSideNavMenuSectionLabel` component when using the web version in a web component, showing that it only needs importing once.
```javascript
import '@ods/components/web.side-nav-menu-section-label';
```
--------------------------------
### Divider - React Example (Horizontal)
Source: https://sense-design-system.dev.nova-x.co/components/divider
Provides an example of using the Divider component within a React application. The component is imported and used similarly to the HTML example.
```React
import { OdsDivider } from '@ods/components/react.divider';
const Example = () => {
return (
First
Middle
Last
)
}
export default Example;
```
--------------------------------
### Basic Input Component Usage (HTML & React)
Source: https://sense-design-system.dev.nova-x.co/components/input
Demonstrates the basic implementation of the OdsInput component. This is the foundational example for creating an input field. It requires no external dependencies beyond the component library itself.
```html
```
```javascript
import { OdsInput } from '@ods/components/react.input';
const Example = () => {
return (
)
}
export default Example;
```
--------------------------------
### Basic Menu - HTML
Source: https://sense-design-system.dev.nova-x.co/components/menu
This example demonstrates a basic menu structure using HTML elements from the OLYSENSE Design System. It includes menu items with values and a divider.
```HTML
Undo
Redo
Cut
Copy
Paste
Delete
```
--------------------------------
### Import OdsApplicationBar (Web Component)
Source: https://sense-design-system.dev.nova-x.co/ui-patterns/application-bar
Demonstrates importing the OdsApplicationBar web component. This is needed only once in an application.
```JavaScript
import '@ods/components/web.application-bar';
```
--------------------------------
### Inline Start Alignment
Source: https://sense-design-system.dev.nova-x.co/css/inline
Demonstrates aligning items to the start of the inline axis within a layout container. Uses ods-layout attribute with 'inline:start' value. Works with variable width containers.
```HTML
```
```React
const Example = () => {
return (
)
}
export default Example;
```