@spectric/ui 0.0.4

package/src/stories/BitDisplay.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import type { BitDisplayProps } from '../components';
+import '../components';
+import { html } from 'lit';
+import { ExampleBits } from './fixtures/Bits';
+import { BitArray } from '../classes/BitArray';
+import { useArgs } from '@storybook/client-api';
+let bitarray = new BitArray(ExampleBits.buffer)
+let dataview: DataView | undefined;
+let pad = (v: number | number) => String(v).padEnd(8, " ")
+const meta = {
+  title: 'DSP Related/BitDisplay',
+  tags: ['autodocs'],
+  component: "spectric-bit-display",
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return html`
+  <spectric-bit-display
+    style="display:inline-block"
+    frameWidth=${args.frameWidth}
+    scale=${args.scale}
+    .arrayBuffer=${args.arrayBuffer}
+    width=${args.width}
+    height=${args.height}
+    @bitMousemove=${(e) => {
+        let a = bitarray.subarray(e.detail.bitIndex, e.detail.bitIndex + 64)
+        let array = []
+        while (a.length) {
+          let n = parseInt(a.splice(0, 8).join(""), 2)
+          array.push(n)
+        }
+        let uint = new Uint8Array(array)
+        dataview = new DataView(uint.buffer)
+        updateArgs({ ...args })
+      }}
+  >
+  </spectric-bit-display>
+  ${dataview ? html`<pre style="display:inline-block">Mouse Readout:
+    Int8:     ${pad(dataview.getInt8(0))} 0x${dataview.getInt8(0).toString(16)}
+    UInt8:    ${pad(dataview.getUint8(0))} 0x${dataview.getUint8(0).toString(16)}
+    Int16-E:  ${pad(dataview.getInt16(0, false))}
+    Int16-e:  ${pad(dataview.getInt16(0, true))}
+    UInt16-E: ${pad(dataview.getUint16(0, false))} 0x${dataview.getUint16(0, false).toString(16)}
+    Int16-e:  ${pad(dataview.getUint16(0, true))} 0x${dataview.getUint16(0, true).toString(16)}
+  </pre>`: null}
+`},
+
+
+} satisfies Meta<BitDisplayProps>;
+
+export default meta;
+type Story = StoryObj<BitDisplayProps>;
+
+
+
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    scale: 1,
+    frameWidth: 100,
+    width: 200,
+    height: 200,
+    arrayBuffer: ExampleBits.buffer
+  },
+};

package/src/stories/Button.stories.ts

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import { ButtonSizes, ButtonVariants, type ButtonProps } from '../components/Button';
+import '../components';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'UI/Button',
+  tags: ['autodocs'],
+  component: "spectric-button",
+  render: (args) => html`
+  <spectric-button
+    ?disabled=${args.disabled}
+    ?danger=${args.danger}
+    variant=${ifDefined(args.variant)}
+    size=${ifDefined(args.size)}
+    backgroundColor=${ifDefined(args.backgroundColor)}
+    @click=${(e) => {
+      console.log(e);
+      alert("clicked")
+    }}
+  >
+    ${args.label}
+  </spectric-button>
+`,
+  args: {
+    label: 'Button',
+  },
+  argTypes: {
+    backgroundColor: { control: 'color', description: "sets the background color for the element" },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+    variant: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'text'],
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    danger: {
+      control: { type: 'boolean' },
+    },
+  }
+} satisfies Meta<ButtonProps>;
+
+export default meta;
+type Story = StoryObj<ButtonProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Basic: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Variants: Story = {
+  render: (args) => html`
+  ${Object.values(ButtonVariants).map(v => {
+    return html`
+<spectric-button
+    ?disabled=${args.disabled}
+    variant=${v}
+    size=${ifDefined(args.size)}
+    backgroundColor=${ifDefined(args.backgroundColor)}
+    @click=${() => { alert("clicked") }}
+  >
+    ${v}
+</spectric-button>`
+  })}
+`,
+  args: {
+    variant: "primary",
+    label: 'Button',
+  },
+};
+
+export const Sizes: Story = {
+  render: (args) => html`
+  ${Object.values(ButtonSizes).map(v => {
+    return html`
+<spectric-button
+    ?disabled=${args.disabled}
+    variant=${"primary"}
+    size=${ifDefined(v)}
+    backgroundColor=${ifDefined(args.backgroundColor)}
+    @click=${() => { alert("clicked") }}
+  >
+    ${v}
+</spectric-button>`
+  })}
+`,
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+export const Disabled: Story = {
+  render: (args) => html`
+  ${Object.values(ButtonVariants).map(v => {
+    return html`
+<spectric-button
+    ?disabled=${args.disabled}
+    variant=${v}
+    size=${ifDefined(args.size)}
+    backgroundColor=${ifDefined(args.backgroundColor)}
+    @click=${() => { alert("clicked") }}
+  >
+    ${v}
+</spectric-button>`
+  })}
+`,
+  args: {
+    disabled: true
+  },
+};
+
+export const Dangerous: Story = {
+  render: (args) => html`
+  ${Object.values(ButtonVariants).map(v => {
+    return html`
+<spectric-button
+    ?danger=${args.danger}
+    variant=${v}
+    size=${ifDefined(args.size)}
+    backgroundColor=${ifDefined(args.backgroundColor)}
+    @click=${() => { alert("clicked") }}
+  >
+    ${v}
+</spectric-button>`
+  })}
+`,
+  args: {
+    danger: true
+  },
+};

package/src/stories/Header.stories.ts

@@ -0,0 +1,55 @@
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import type { HeaderProps, HeaderSlots } from '../components/Header';
+import '../components/Header';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+const meta = {
+  title: 'UI/Header',
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  component: "spectric-header",
+  render: (args) => {
+    console.log(args)
+    return html`<spectric-header 
+     username=${ifDefined(args.username)} 
+     ?showCreateAccount=${args.showCreateAccount} 
+     ?showLoginButton=${args.showLoginButton}
+     @login=${() => alert("login")} 
+     @logout=${() => alert("logout")} 
+     @createAccount=${() => alert("create")}>
+     ${args.name ? html`<span slot="name">${args.name}</span>` : null}
+     ${args.center ? html`<span slot="end">${args.center}</span>` : null}
+     ${args.end ? html`<span slot="end">${args.end}</span>` : null}
+     ${args.branding ? html`<span slot="branding">${args.branding}</span>` : null}
+     </spectric-header>`
+  },
+  args: { showLoginButton: true, showCreateAccount: false }
+} satisfies Meta<HeaderProps & HeaderSlots>;
+
+export default meta;
+type Story = StoryObj<HeaderProps & HeaderSlots>;
+
+export const LoggedIn: Story = {
+  args: {
+    username: "Jane Doe"
+  },
+};
+
+export const LoggedOut: Story = {};
+
+export const ShowCreateAccount: Story = {
+  args: {
+    showCreateAccount: true
+  }
+};
+
+
+export const LoginNotRequired: Story = {
+  args: {
+    showLoginButton: false,
+    name: 'App without Login function'
+  }
+};

package/src/stories/Page.stories.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import * as HeaderStories from './Header.stories';
+import type { CSSProps, PageProps, PageSlots } from '../components/Page';
+import '../components/Page';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { CSSPropsControls, FieldTypes, HeaderSlots, ThemeSelections } from '../components';
+import { useArgs } from '@storybook/client-api';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ClassificationVariants } from '../components/configurations/classifications';
+import "./fixtures/ExampleContent"
+var frameWidth = 10
+const content = () => html`<spectric-storybook-example-content/>`
+
+const defaultHeader: HeaderSlots = { name: html`<span class="spectric">Spectric Components</span>`, branding: html`<img height="35" src='https://static.wixstatic.com/media/bb8de2_d075320863814eeb9c954fcc57ce2822%7Emv2.png/v1/fill/w_192%2Ch_192%2Clg_1%2Cusm_0.66_1.00_0.01/bb8de2_d075320863814eeb9c954fcc57ce2822%7Emv2.png'/>` }
+const meta = {
+  title: 'UI/Page',
+  tags: ['autodocs'],
+  component: 'spectric-page',
+  //parameters:{docs:{source:{code:"test",language:'html',type:'auto'}}},
+  render: (args, context) => {
+    const [_, updateArgs] = useArgs();
+    let customStyles = Object.fromEntries(Object.entries(args).filter(([key, value]) => key.startsWith("--")))
+    return html`<spectric-page @change=${() => updateArgs({ ...args })}
+    style=${styleMap({ ...customStyles, height: "600px/*default is full screen*/" })}
+    theme=${ifDefined(args.theme)}
+    ?headerSticky=${args.headerSticky}
+  ?showHeader=${args.showHeader}
+  ?showCreateAccount=${args.showCreateAccount}
+  ?showLoginButton=${args.showLoginButton}
+  classificationLevel=${ifDefined(args.classificationLevel)}
+  classificationText=${ifDefined(args.classificationText)}
+  .notifications=${args.notifications || []}
+  username=${ifDefined(args.username)}
+  @createAccount=${() => {
+        let username = prompt("Username");
+        updateArgs({ ...args, username: username })
+      }} 
+  @login=${() => { updateArgs({ ...args, username: "Spectric-User" }) }} 
+  @logout=${() => { updateArgs({ ...args, username: "" }) }} 
+  @bannerDismissed=${(e) => {
+        console.log(e)
+        alert("banner dismissed")
+      }}>
+    ${args.branding ? html`<span slot="branding">${args.branding}</span>` : null}
+    ${args.name ? html`<span slot="name">${args.name}</span>` : null}
+    ${args.center ?
+        html`<span slot="center">
+          ${args.center}
+    </span>`: null}
+    ${args.end ?
+        html`<span slot="end">
+          ${args.end}
+    </span>`: null}
+    ${args.content || content()}
+    
+    </spectric-page>`
+  },
+  //args:{content:content}
+  argTypes: {
+    classificationLevel: { options: Object.values(ClassificationVariants) },
+    theme: { options: Object.values(ThemeSelections) },
+    ...CSSPropsControls,
+  },
+} satisfies Meta<PageProps & PageSlots & CSSProps>;
+
+export default meta;
+type Story = StoryObj<PageProps & PageSlots>;
+
+const UnclassifiedStyle = { backgroundColor: "green", color: "white" }
+
+
+
+export const WithBannersAndNotifications: Story = {
+  args: {
+    classificationLevel: "us.unclassified",
+    classificationText: "",
+    notifications: [{
+      bannerId: "mx-banner",
+      text: "We will be doing some maintenance",
+      headerStyle: { backgroundColor: "var(--spectric-primary)", color: "var(--spectric-text-on-color)" },
+      dismissable: true
+    }, {
+      text: "You cannot dismiss this banner because it it important",
+      headerStyle: { backgroundColor: "cadetblue" },
+      dismissable: false
+    }],
+    // More on composing args: https://storybook.js.org/docs/writing-stories/args#args-composition
+    ...defaultHeader,
+  },
+}
+export const LoggedIn: Story = {
+  args: {
+    // More on composing args: https://storybook.js.org/docs/writing-stories/args#args-composition
+    ...defaultHeader,
+    ...HeaderStories.LoggedIn.args,
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    ...defaultHeader,
+    ...HeaderStories.LoggedOut.args,
+  },
+};
+
+

package/src/stories/QueryBar.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import { SupportedLanguages, type IQueryProps } from '../components/query_bar/QueryBar';
+import '../components';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { useArgs } from '@storybook/client-api';
+import { filterByColumn } from './fixtures/data';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+var code = ""
+
+const meta = {
+  title: 'UI/Query',
+  tags: ['autodocs'],
+  component: "spectric-query",
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+    const fakevalues = async (field, text) => {
+      if (!args.fields.find(f => f.name === field)) {
+        return []
+      }
+      return filterByColumn(field, text)
+    }
+    return html`
+  <spectric-query
+  .fields=${args.fields}
+  .getValuesForField=${fakevalues}
+  @change=${(e: CustomEvent<any>) => {
+        code = e.detail
+        updateArgs({ ...args })
+      }}
+  outputLanguage=${args.outputLanguage}
+  >
+
+  </spectric-query>
+  <pre>
+    ${JSON.stringify(code, null, 2)}
+  </pre>
+`},
+  argTypes: {
+
+    outputLanguage: {
+      control: { type: 'select' },
+      options: Object.values(SupportedLanguages),
+    },
+  },
+  args: {
+    outputLanguage: 'toDSL',
+    fields: [{ name: "test", type: "string" }, { name: "test_num", type: "number" }, { name: "test_bool", type: "boolean" }, { name: "modulations", type: "string" }, { name: "time_seen", type: "string", format: "date-time" }]
+  },
+
+} satisfies Meta<IQueryProps>;
+
+export default meta;
+type Story = StoryObj<IQueryProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Basic: Story = {
+  args: {
+    outputLanguage: "toCql"
+  },
+};
+

package/src/stories/Splitview.stories.ts

@@ -0,0 +1,52 @@
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { useArgs } from '@storybook/client-api';
+import { Orientations, type SplitViewProps } from '../components/splitview/splitview';
+import '../components/splitview';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+const meta = {
+  title: 'UI/SplitView',
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  component: "spectric-splitview",
+  render: (args) => {
+    console.log(args)
+    const [_, updateArgs] = useArgs();
+    return html`
+  <spectric-splitview @change=${(e) => {
+        updateArgs({ percentage: e.detail.percentage })
+      }} 
+  style="height:150px;display:flex" 
+  percentage=${ifDefined(args.percentage)}
+  ?invisible=${args.invisible}
+  orientation=${args.orientation}
+  >
+    <div style="height:100%;background-color:#eeaaaa">Slot 1</div>
+    <div style="background-color:#bfedbf">Slot 2</div>
+  </spectric-splitview>
+`
+  },
+  args: {
+    "invisible": false,
+    orientation: "horizontal",
+    "percentage": 50
+  },
+  argTypes: {
+    invisible: { control: { type: "boolean" } },
+    percentage: { control: { type: "number" } },
+    orientation: {
+      options: Object.values(Orientations),
+      control: { type: "inline-radio" }
+    },
+  }
+} satisfies Meta<SplitViewProps>;
+
+export default meta;
+type Story = StoryObj<SplitViewProps>;
+
+export const Default: Story = {
+};
+
+

package/src/stories/fixtures/Bits.ts

@@ -0,0 +1,15 @@
+const a = Array(20000)
+  .fill(0)
+  .map(
+    (_, i) =>
+      String.fromCharCode(
+        i % 4 === 0
+          ? 85
+          : i % 3 === 0 || i % 2
+            ? i % 255
+            : Math.floor(Math.random() * 255)
+      )
+  )
+var len = a.length;
+export const ExampleBits = new Uint8Array(len);
+ExampleBits.set(Array.from(a).map(v => v.charCodeAt(0)));

package/src/stories/fixtures/ExampleContent.ts

@@ -0,0 +1,102 @@
+
+import { filterByColumn } from "./data";
+import { ExampleBits } from "./Bits";
+import { FieldTypes } from "../../components/query_bar/QueryBar";
+
+import { html, LitElement } from 'lit';
+
+import { customElement, property, state } from 'lit/decorators.js';
+import "./lorumipsum"
+type Props = {
+  frameWidth: number
+}
+@customElement('spectric-storybook-example-content')
+export class SpectricStorybookExampleContent extends LitElement implements Props {
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this
+  }
+  @property({ type: Number, reflect: true })
+  frameWidth: number = 10;
+  @state()
+  dialogOpen: boolean = false;
+  render() {
+    return html`
+        <spectric-dialog
+         ?open=${this.dialogOpen} title="Are you sure you want to delete?" ?dismissable=${true} @close=${() => {
+        this.dialogOpen = false;
+      }}>
+      <lorum-ipsum></lorum-ipsum>
+      <lorum-ipsum></lorum-ipsum>
+      <lorum-ipsum></lorum-ipsum>
+      <lorum-ipsum></lorum-ipsum>
+      <lorum-ipsum></lorum-ipsum>
+      <lorum-ipsum></lorum-ipsum>
+      <lorum-ipsum></lorum-ipsum>
+        <div slot="footer" style="display:flex;justify-content: space-around;">
+        <spectric-button danger @click=${() => {
+        this.dialogOpen = false;
+        setTimeout(() => alert("deleted"), 300)
+      }}>Delete</spectric-button><spectric-button variant="text" @click=${() => {
+        this.dialogOpen = false;
+      }}>Cancel</spectric-button>
+          </div>
+      </spectric-dialog>
+        <h2>Pages in Spectric UI</h2>
+        <p>
+          We recommend building UIs with a
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong> </a
+          >process starting with atomic components and ending with pages.
+        </p>
+        <spectric-panel>
+          Query
+        <spectric-query
+          .fields=${[{ name: "modulations", type: "string" }, { name: "signal", type: "string" }] as FieldTypes[]}
+          .getValuesForField=${filterByColumn}
+          @change=${(e: CustomEvent<any>) => {
+      }}
+          outputLanguage=${"toDSL"}
+          >
+        
+          </spectric-query>
+        <spectric-panel style="display:flex">
+        <spectric-bit-display
+            frameWidth=${this.frameWidth}
+            scale=${2}
+            .arrayBuffer=${ExampleBits.buffer}
+            width=${200}
+            height=${200}
+          >
+          </spectric-bit-display>
+          <spectric-splitview id="splitview-1">
+          <div style="flex-grow:1">
+          <h4>Main Settings here</h4>
+        <spectric-input variant="number" .value=${this.frameWidth} @change=${(e) => this.frameWidth = e.target.value} placeholder="frameWidth" helpertext="Adjust the framewidth" label="Frame Width" >
+            Input label
+          </spectric-input>
+          <spectric-button size="small" >Submit</spectric-button><spectric-button size="small" variant="secondary">Continue</spectric-button><spectric-button size="small" variant="text">Cancel</spectric-button>
+          </div>
+          <spectric-panel>
+            <h4>OtherSettings here</h4>
+        
+          <spectric-input variant="number" .value=${this.frameWidth} @change=${(e) => this.frameWidth = e.target.value} placeholder="frameWidth" helpertext="Adjust the framewidth" label="Frame Width" style="flex-grow:1">
+            Input label
+          </spectric-input>
+         <spectric-button size="small" >Submit</spectric-button><spectric-button size="small" variant="secondary">Continue</spectric-button><spectric-button size="small" variant="text">Cancel</spectric-button>
+          </spectric-panel>
+          </spectric-splitview>
+        
+        </spectric-panel>
+        <div style="display:flex">
+          <span style="flex-grow:1"></span>
+          <spectric-button size="small" danger @click=${() => {
+        this.dialogOpen = true
+        this.requestUpdate()
+      }}>Delete</spectric-button>
+          <spectric-button size="small" danger variant="secondary">Override</spectric-button>
+          <spectric-button size="small" danger variant="text">Disable</spectric-button>
+          <spectric-button size="small" variant="text">test</spectric-button>
+          </div></spectric-panel>
+          `
+  }
+}

package/src/stories/fixtures/data.ts

@@ -0,0 +1,30 @@
+
+
+export const modulations = [
+  "AM",
+  "FM",
+  "PM",
+  "QAM",
+  "ASK",
+  "FSK",
+  "PSK",
+  "OFDM",
+  "PCM",
+  "DPSK"
+];
+//pulled from https://www.sigidwiki.com/wiki/Category:Digital signals that don't have a space or -
+export const signals = ["802.11n", "8PSK", "ASCII", "AUTOSPEC", "Aprizesat", "Autocab", "Bluetooth", "CCITT", "CDMA420", "CHIP", "CHU", "COFDMTV", "CompuLert", "Contestia", "Coquelet", "DCF77", "DominoEX", "DominoF", "EIA", "FLEX", "FSK441", "FSQ", "FST4W", "FT4", "FT8", "Hellschreiber", "ISCAT", "JS8", "JT4", "JT65", "JT6M", "JT9", "JTMS", "Kiwi", "Lentus", "LoRa", "MDC1200", "MOBITEX", "MSK144", "MT63", "Milstar", "NML", "NOV", "NPM", "NWC", "Olivia", "OpenSky", "Orbcomm", "PACKET", "PAX", "PI4", "POCSAG", "PSK2K", "Piccolo", "ProVoice", "Q15X25", "ROS", "RTTYM", "ReFLEX", "SIGFOX", "SPREAD", "Serdolik", "SkyOFDM", "THOR", "THROB", "TT2300", "TWINPLEX", "Tetrapol", "VISEL", "VOICE", "WSPR", "WiMAX", "WinDRM"]
+export const filterByColumn = async (field, text) => {
+  if (field === "modulations") {
+    return modulations.filter(v => v.match(new RegExp(text, "gi")))
+  }
+  if (field === "signal") {
+    return signals.filter(v => v.match(new RegExp(text, "gi")))
+  }
+  let ipsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+  let values = ['test', 'some value', '10000', ...ipsum.split(" ").map(v => `${v}`)]
+  if (text == "") {
+    return values
+  }
+  return values.filter(v => v.includes(text))
+}

package/src/stories/fixtures/lorumipsum.ts

@@ -0,0 +1,19 @@
+import { html, LitElement } from "lit-element";
+import { customElement } from "lit/decorators.js";
+
+@customElement('lorum-ipsum')
+export class LorumIpsum extends LitElement {
+
+    render() {
+        return html`<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
+        `
+    }
+}