@demos-europe/demosplan-ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2010-present DEMOS E-Partizipation GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/buildTokens.js

@@ -0,0 +1,59 @@
+/**
+ * (c) 2010-present DEMOS E-Partizipation GmbH.
+ *
+ * This file is part of the package @demos-europe/demosplan-ui,
+ * for more information see the license file.
+ *
+ * All rights reserved
+ */
+
+const glob = require('glob')
+const StyleDictionary = require('style-dictionary')
+
+const prefix = 'dp-'
+
+const tokensPath = 'tokens/*.json'
+const files = glob
+  .sync(tokensPath)
+  .map(filePath => filePath
+    .replace('tokens/', '')
+    .replace('.json', ''))
+
+StyleDictionary.registerTransform({
+  name: 'name/scss',
+  type: 'name',
+  transformer: (token) => {
+    // "palette" within colors should not be part of the variable name
+    if (token.path[0] === 'color' && token.path[1] === 'palette') {
+      token.path.splice(1, 1)
+    }
+    return prefix + token.path.join('-')
+  }
+})
+
+StyleDictionary.registerTransformGroup({
+  name: 'custom/scss',
+  transforms: StyleDictionary.transformGroup.scss.concat(['name/scss'])
+})
+
+const StyleDictionaryExtended = StyleDictionary.extend({
+  source: [tokensPath],
+  platforms: {
+    scss: {
+      transformGroup: 'custom/scss',
+      buildPath: 'tokens/',
+      files: files.map((filePath) => {
+        return {
+          destination: `scss/_${filePath}.scss`,
+          format: 'scss/variables',
+          filter: (token) => token.filePath.includes(filePath),
+          options: {
+            outputReferences: true
+          }
+        }
+      })
+    }
+  }
+})
+
+StyleDictionaryExtended.buildAllPlatforms()

package/components/DpButton/DpButton.stories.mdx

@@ -0,0 +1,136 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import DpButton from './DpButton'
+
+<Meta
+  argTypes={{
+    color: {
+      options: ['primary', 'secondary', 'warning'],
+      control: { type: 'select' }
+    },
+    default: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    },
+    variant: {
+      options: ['', 'outline'],
+      control: { type: 'select' }
+    }
+  }}
+  title="Components/Button"
+  component={DpButton} />
+
+# Button
+
+The `DpButton` component renders a primary button element that has a visual `busy` state which prevents the user
+from clicking twice and informs her something is happening behind the scenes.
+
+export const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { DpButton },
+    template: `<dp-button v-bind="propsWithoutDefaultSlot" @click="action">${typeof args.default !== 'undefined' ? args.default : ''}</dp-button>`,
+    methods: {
+      action: action('click')
+    },
+    computed: {
+        propsWithoutDefaultSlot() {
+            const all = this.$props
+            delete all['default']
+            return all
+        }
+    }
+});
+
+## Colors
+
+### Primary
+<Canvas>
+    <Story
+      name="Primary"
+      args={{
+          text: 'Save'
+      }}>
+      {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Secondary
+<Canvas>
+    <Story
+        name="Secondary"
+        args={{
+            color: 'secondary',
+            text: 'Cancel'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Warning
+<Canvas>
+    <Story
+        name="Warning"
+        args={{
+            color: 'warning',
+            text: 'Delete'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Variants
+
+### Outline
+<Canvas>
+    <Story
+        name="Outline"
+        args={{
+            variant: 'outline',
+            text: 'Save'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Render a link element
+<Canvas>
+    <Story
+        name="Link element"
+        args={{
+            href: 'https://example.com',
+            text: 'Go somewhere'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Use the 'busy' prop to visualize system status
+<Canvas>
+    <Story
+        name="Busy state"
+        args={{
+            busy: true,
+            text: 'Saving item...'
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+## Use the default slot to render additional content
+<Canvas>
+    <Story
+        name="With default slot"
+        args={{
+            default: `<i class="fa fa-pencil" aria-hidden="true" /> Edit item`
+        }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>

package/components/DpButton/DpButton.vue

@@ -0,0 +1,118 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<template>
+  <component
+    :is="element"
+    :type="isButtonElement && type"
+    :href="!isButtonElement && sanitizedHref"
+    :class="classes"
+    :aria-hidden="busy"
+    v-on="$listeners">
+    <!-- @slot By default, the slot displays the button text. Use to render additional markup, e.g. an icon. -->
+    <slot>
+      <span v-text="text" />
+    </slot>
+  </component>
+</template>
+
+<script>
+import { sanitizeUrl } from '@braintree/sanitize-url'
+
+export default {
+  name: 'DpButton',
+
+  props: {
+    /**
+     * When waiting for an axios response, the visual state of the button can be changed via the `busy` property.
+     */
+    busy: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Define the color of the button. Possible values are `primary, secondary, warning`.
+     */
+    color: {
+      required: false,
+      type: String,
+      default: 'primary'
+    },
+
+    /**
+     * When passing a href, a link is rendered instead of a button element.
+     * The value of its `href` attribute is sanitized, defaulting to `'about:blank'` for unsafe values.
+     */
+    href: {
+      required: false,
+      type: String,
+      default: '#'
+    },
+
+    /**
+     * The text content of the button element. Can be omitted if the text content is passed via the default slot.
+     */
+    text: {
+      required: false,
+      type: String,
+      default: 'save'
+    },
+
+    /**
+     * The type attribute can be set to a value of `submit` manually, if the button is used to post a form.
+     */
+    type: {
+      required: false,
+      type: String,
+      default: 'button',
+      validator: (prop) => ['button', 'submit'].includes(prop)
+    },
+
+    /**
+     * Variants of the button include `outline` (`text` to be implemented).
+     * When not specified, the default style (white on colored background) is applied.
+     */
+    variant: {
+      required: false,
+      type: String,
+      default: ''
+    }
+  },
+
+  computed: {
+    classes () {
+      /*
+       * @see
+       * - https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax
+       * - https://stackoverflow.com/a/2933472
+       */
+      return [
+        'btn',
+        this.busy && 'is-busy pointer-events-none',
+        ['primary', 'secondary', 'warning'].includes(this.color) && `btn--${this.color}`,
+        ['outline'].includes(this.variant) && `btn--${this.variant}`
+      ]
+    },
+
+    element () {
+      return this.isButtonElement ? 'button' : 'a'
+    },
+
+    isButtonElement () {
+      return this.href === '#'
+    },
+
+    sanitizedHref () {
+      return sanitizeUrl(this.href)
+    }
+  }
+}
+</script>

package/components/DpDetails/DpDetails.stories.mdx

@@ -0,0 +1,55 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import DpDetails from './DpDetails'
+
+<Meta
+  argTypes={{
+    default: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    },
+  }}
+  title="Components/Details"
+  component={DpDetails} />
+
+# Details
+
+The `DpDetails` component is used to reveal detailed information only when users need it. Other than the accordion or
+expandable table, it is not used to display tabular data or multiple items of the same type and structure - it rather
+represents a single chunk of information that is shortened to ease scanning of the content it is part of.
+
+export const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { DpDetails },
+    template: `<dp-details v-bind="propsWithoutDefaultSlot" v-on="$props">${typeof args.default !== 'undefined' ? args.default : ''}</dp-details>`,
+    computed: {
+        propsWithoutDefaultSlot() {
+            const all = this.$props
+            delete all['default']
+            return all
+        }
+    }
+});
+
+## Colors
+
+### Primary
+<Canvas>
+    <Story
+      name="Default usage"
+      args={{
+          default: `Content to be revealed onClick of the summary. Here, content of any length can be placed. However
+          this does not mean that content have to be as long as possible, especially if no real value is added by lengthening
+          sentences that otherwise would not even have to be read.`,
+          summary: 'The summary tells users what to find in the details'
+      }}>
+      {Template.bind({})}
+    </Story>
+</Canvas>

package/components/DpDetails/DpDetails.vue

@@ -0,0 +1,58 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<template>
+  <details
+    class="o-details space-stack-xs"
+    role="group">
+    <summary
+      :aria-expanded="isOpen"
+      class="o-details__trigger o-link--default cursor--pointer display--inline-block"
+      role="button"
+      @click="isOpen = !isOpen">
+      <i
+        class="fa width-s text--center"
+        :class="{'fa-caret-down': isOpen, 'fa-caret-right': !isOpen}"
+        aria-hidden="true" />
+      <strong v-cleanhtml="summary" />
+    </summary>
+    <div>
+      <slot />
+    </div>
+  </details>
+</template>
+
+<script>
+import { CleanHtml } from '../../directives'
+
+export default {
+  name: 'DpDetails',
+
+  directives: {
+    cleanhtml: CleanHtml
+  },
+
+  props: {
+    /**
+     * The short summary of the content, which is also used as a trigger.
+     */
+    summary: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      isOpen: false
+    }
+  }
+}
+</script>