hr-design-system-handlebars 1.11.10 → 1.11.12

package/src/stories/Introduction.stories.mdx

@@ -1,211 +0,0 @@
-import { Meta } from '@storybook/addon-docs'
-import Code from '../assets/icons/code-brackets.svg'
-import Colors from '../assets/icons/colors.svg'
-import Comments from '../assets/icons/comments.svg'
-import Direction from '../assets/icons/direction.svg'
-import Flow from '../assets/icons/flow.svg'
-import Plugin from '../assets/icons/plugin.svg'
-import Repo from '../assets/icons/repo.svg'
-import StackAlt from '../assets/icons/stackalt.svg'
-
-<Meta title="Einführung" />
-
-<style>{`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-  
-`}</style>
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-    <a
-        className="link-item"
-        href="https://storybook.js.org/docs/react/addons/addon-types"
-        target="_blank"
-    >
-        <img src={Plugin} alt="plugin" />
-        <span>
-            <strong>Presets for popular tools</strong>
-            Easy setup for TypeScript, SCSS and more.
-        </span>
-    </a>
-    <a
-        className="link-item"
-        href="https://storybook.js.org/docs/react/configure/webpack"
-        target="_blank"
-    >
-        <img src={StackAlt} alt="Build" />
-        <span>
-            <strong>Build configuration</strong>
-            How to customize webpack and Babel
-        </span>
-    </a>
-    <a
-        className="link-item"
-        href="https://storybook.js.org/docs/react/configure/styling-and-css"
-        target="_blank"
-    >
-        <img src={Colors} alt="colors" />
-        <span>
-            <strong>Styling</strong>
-            How to load and configure CSS libraries
-        </span>
-    </a>
-    <a
-        className="link-item"
-        href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-        target="_blank"
-    >
-        <img src={Flow} alt="flow" />
-        <span>
-            <strong>Data</strong>
-            Providers and mocking for data libraries
-        </span>
-    </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-    <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-        <img src={Repo} alt="repo" />
-        <span>
-            <strong>Storybook documentation</strong>
-            Configure, customize, and extend
-        </span>
-    </a>
-    <a className="link-item" href="https://www.learnstorybook.com" target="_blank">
-        <img src={Direction} alt="direction" />
-        <span>
-            <strong>In-depth guides</strong>
-            Best practices from leading teams
-        </span>
-    </a>
-    <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-        <img src={Code} alt="code" />
-        <span>
-            <strong>GitHub project</strong>
-            View the source and add issues
-        </span>
-    </a>
-    <a className="link-item" href="https://discord.gg/UUt2PJb" target="_blank">
-        <img src={Comments} alt="comments" />
-        <span>
-            <strong>Discord chat</strong>
-            Chat with maintainers and the community
-        </span>
-    </a>
-</div>
-
-<div className="tip-wrapper">
-    <span className="tip">Tip</span>Edit the Markdown in{' '}
-    <code>src/stories/Introduction.stories.mdx</code>
-</div>

package/src/stories/views/components/Button.stories.mdx

@@ -1,82 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from "@storybook/addon-docs";
-
-import button from "./Button.hbs";
-
-<Meta
-  title="Komponenten-Beispiele/MDX-Button"
-  argTypes={{
-    label: {
-      control: "text",
-      description: "Button text",
-    },
-    size: {
-      control: { type: "select", options: ["sm", "md", "lg", "xl"] },
-      description: "Größe des Buttons",
-      table: {
-        defaultValue: {
-          summary: "md",
-        },
-      },
-    },
-    type: {
-      description: "Typ des Buttons",
-      control: {
-        type: "select",
-        options: ["primary", "secondary"],
-      },
-      table: {
-        defaultValue: {
-          summary: "primary",
-        },
-      },
-    },
-  }}
-/>
-
-export const Template = ({ label, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return button({ label, ...args });
-};
-
-# Button
-
-Let's define a story for our `Button` component:
-
-<Preview withToolbar>
-  <Story
-    name="Primary"
-    args={{
-      label: "Button",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Preview>
-
-<ArgsTable story="Primary" />
-
-## Button Secondary
-
-<Canvas>
-  <Story
-    name="Secondary"
-    parameters={{
-      docs: {
-        source: {
-          code: `
-<Button class="storybook-button storybook-button--secondary">Button</button>
-        `,
-        },
-      },
-    }}
-    args={{
-      label: "Button",
-      type: "secondary",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Test

package/src/stories/views/components/geoTag/geoTag.stories.mdx

@@ -1,61 +0,0 @@
-import {
-    ArgsTable,
-    Meta,
-    Story,
-    Canvas,
-    Preview,
-    ColorPalette,
-    ColorItem,
-} from '@storybook/addon-docs'
-
-import geoTag from './geoTag.hbs'
-
-<Meta
-    title="Komponenten/Ortsmarke"
-    argTypes={{
-        _text: {
-            control: 'text',
-            description: 'Beschriftung der Ortsmarke',
-        },
-    }}
-                decorators={[
-        (Story) => {
-            return `<div class="relative py-8">  
-                ${Story()} 
-                </div>`
-        },
-    ]}
-/>
-
-export const Template = ({...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${geoTag}</div>`;
-    return geoTag({...args })
-}
-
-# geoTag
-
-<Preview withToolbar>
-    <Story
-        name="Frankfurt"
-        args={{
-            _text: 'Frankfurt'
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Preview>
-
-## Einbindung
-
-Die Komponente wird in Form eines Handlebar Partials eingebunden.
-
-```html
-{{> components/geoTag/geoTag.hbs text="Frankfurt"}}
-```
-
-Mit folgenden Parametern kann die Komponente konfiguriert werden.
-
-| Parameter  | Typ      | Mögliche Werte                                                                                                                                                                                                                                                     | Erläuterung                                      |
-| :--------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------- |
-| **\_text** | `String` | Beliebiger Text                                                                                                                                                                                                                                                    | Die Beschriftung der Ortsmarke                   |

package/src/stories/views/components/grid/grid.stories.mdx

@@ -1,275 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from "@storybook/addon-docs";
-
-import grid_group_100_item_100 from "./grid_group_100_item_100.hbs";
-import grid_group_100_item_100_with_background from "./grid_group_100_item_100_with_background.hbs";
-import grid_group_100_item_50 from "./grid_group_100_item_50.hbs";
-import grid_group_100_item_33 from "./grid_group_100_item_33.hbs";
-import grid_group_100_item_25 from "./grid_group_100_item_25.hbs";
-import grid_group_66_item_100 from "./grid_group_66_item_100.hbs";
-import grid_group_50_item_100 from "./grid_group_50_item_100.hbs";
-import grid_group_33_item_100 from "./grid_group_33_item_100.hbs";
-import grid_group_100_tabbed_50 from "./grid_group_100_tabbed_50.hbs";
-import grid_group_100_tabbed_33 from "./grid_group_100_tabbed_33.hbs";
-import grid_group_100_tabbed_25 from "./grid_group_100_tabbed_25.hbs";
-
-
-<Meta
-  title="Komponenten/grid"
-  argTypes={{
-    
-  }}
-/>
-
-export const Template01 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_100_item_100({ text, ...args });
-};
-export const Template02 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_100_item_100_with_background({ text, ...args });
-};
-export const Template03 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_100_item_50({ text, ...args });
-};
-export const Template04 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_100_item_33({ text, ...args });
-};
-export const Template05 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_100_item_25({ text, ...args });
-};
-export const Template06 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_66_item_100({ text, ...args });
-};
-export const Template07 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_50_item_100({ text, ...args });
-};
-export const Template08 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_33_item_100({ text, ...args });
-};
-export const Template09 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_100_tabbed_50({ text, ...args });
-};
-export const Template10 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_100_tabbed_33({ text, ...args });
-};
-export const Template11 = ({ text, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return grid_group_100_tabbed_25({ text, ...args });
-};
-
-# Grid
-
-Das sog. "Grid" (engl.: Netz) bildet das Layout-Raster für eine Übersichtsseite und 
-beschreibt die Einteilung einer Seite in horizontale - Zeilen - und vertikale - Spalten - Einheiten. 
-Neben der Anordnung dr Elemente wird dabei auch explizit deren Dimensionierung vorgenommen.
-
-# Grundaufbau
-Um ein Grid für ein Template zu erzeugen muß zunächst das ein umschließendes Wrapper-Markup gebaut werden:
-```html
-<div class="grid grid-page">
-  <div class="{{> components/grid/grid_group_wrapper_classes }}">
-   ... 
-  </div>
-</div>
-```
-# Gruppe (grid-group)
-Im Wrapper wird eine sog. "Gruppe" erzeugt. Sie entspricht im Raster einer Zeile.
-Bei der Größe (_size) sind auch kleinere Werte als "100" (siehe "Grid-Aufbau invers") zulässig. Finden jedoch keinen Anwendungsfall.
-
-Zusätzlich kann der Gruppe eine Hintergrund-Farbe vergeben werden.
-
-## Einbindung
-Die Komponente wird in Form eines Handlebar Partials eingebunden.
-
-```html
-{{#>components/grid/grid_group _size="100"}}
-```
-Mit folgenden Parametern kann die Komponente konfiguriert werden.
-
-| Parameter  | Typ      | Mögliche Werte                                                                                                                                                                                                                                                     | Erläuterung                                      |
-| :--------- | :------- | :--------------------- | :----------------------------------------------- |
-| **\_size** | `Zahl`| Teilbare Vielfache         | Entpsrechung des prozentualen Wertes (100% = 100) 
-| **\__backgroundColor**|`Zahl`|1,2,3... | Definierte Farbwerte die der Zahl beigeordnet sind                                                                                                                                                                                                                                      | Die Beschriftung des Labels.                     |
-
-
-# Objekt (grid-item)
-In einer Gruppe werden ein oder mehrerer sog. "Objekte" - Items - angelegt. Sie entsprechen im Raster einer oder mehrerer Spalten.
-Bei der Größe (_size) wird hier keine prozentuale Entsprechung, wie bei der Gruppe angegeben, sondern dem Tailwind-Schema 12/12 = 100%,
-was einer ```_size = 12``` entspricht.
-Um 50% (6/12) zu realisieren gibt man bei ```_size = 6``` ein usf.
-
-## Einbindung
-Die Komponente wird in Form eines Handlebar Partials eingebunden.
-
-```html
-{{#>components/grid/grid_item _size="6"}}
-```
-Mit folgenden Parametern kann die Komponente konfiguriert werden.
-
-| Parameter  | Typ      | Mögliche Werte                                                                                                                                                                                                                                                     | Erläuterung                                      |
-| :--------- | :------- | :--------------------- | :----------------------------------------------- |
-| **\_size** | `Zahl`| Teilbare Vielfache        | Entsprechung nach Tailwind-Schema 12/12 = 100%     
-
-# Anwendungsbeispiele
-
-### Grid 100%
-<Preview>
-  <Story
-    name="Grid 100%"
-    args={{
-      
-    }}
-  >
-    {Template01.bind({})}
-  </Story>
-</Preview>
-
-### Grid 100% mit Hintergrund
-<Preview>
-  <Story
-    name="Grid 100% mit Hintergrund"
-    args={{
-      
-    }}
-  >
-    {Template02.bind({})}
-  </Story>
-</Preview>
-
-### Grid 50%
-<Preview> 
-  <Story
-    name="Grid 50%"
-    args={{
-      
-    }}
-  >
-    {Template03.bind({})}
-  </Story>
-</Preview>
-
-### Grid 33%
-<Preview>
-  <Story
-    name="Grid 33%"
-    args={{
-      
-    }}
-  >
-    {Template04.bind({})}
-  </Story>
-</Preview>
-
-### Grid 25% 
-<Preview>
-  <Story
-    name="Grid 25%"
-    args={{
-      
-    }}
-  >
-    {Template05.bind({})}
-  </Story>
-</Preview>
-
-### Grid Tabbed 50% 
-<Preview>
-  <Story
-    name="Grid Tabbed 50%"
-    args={{
-      
-    }}
-  >
-    {Template09.bind({})}
-  </Story>
-</Preview>
-
-### Grid Tabbed 33% 
-<Preview>
-  <Story
-    name="Grid Tabbed 33%"
-    args={{
-      
-    }}
-  >
-    {Template10.bind({})}
-  </Story>
-</Preview>
-
-### Grid Tabbed 25% 
-<Preview>
-  <Story
-    name="Grid Tabbed 25%"
-    args={{
-      
-    }}
-  >
-    {Template11.bind({})}
-  </Story>
-</Preview>
-
-# Grid Aufbau invers 
-Reguläre spannt sich die Gruppe zu 100% auf und die Größe der Objekte sind teilbare Vielfache davon:
-100 / 2 Objekte = 50 % pro Objekt oder 66% + 33,3%
-100 / 3 Objekte = 33,3 % pro Objekt
-100 / 4 Objekte = 25 % pro Objekt
-Mit inversem Aufbau ist gemeint, das die Gruppe die Größe vorgibt und die Objekte immer 100% haben:
-66 % / 2 Objekte = 100 % pro Objekt
-
-### Grid 66%
-<Preview>
-  <Story
-    name="66%"
-    args={{
-      
-    }}
-  >
-    {Template06.bind({})}
-  </Story>
-</Preview>
-
-### Grid 50%
-<Preview>
-  <Story
-    name="50%"
-    args={{
-      
-    }}
-  >
-    {Template07.bind({})}
-  </Story>
-</Preview>
-
-### Grid 33%
-<Preview>
-  <Story
-    name="33%"
-    args={{
-      
-    }}
-  >
-    {Template08.bind({})}
-  </Story>
-</Preview>
-
-
-<ArgsTable story="Grid" />