Starting stubs.

.storybook/preview.js

@@ -103,4 +103,7 @@ export const parameters = {
       ...customViewports,
     },
   },
+  options: {
+    showPanel: true,
+  },
 };

src/components/background/Background.stories.js

@@ -0,0 +1,20 @@
+import UidsBackground from './Background.vue'
+
+export default {
+  title: 'Not yet implemented/background',
+  component: UidsBackground,
+  // https://github.com/storybookjs/storybook/issues/14442#issuecomment-1089165153
+  // parameters: { options: { showPanel: false } },
+}
+
+const Template = (args) => ({
+  components: { UidsBackground },
+  setup() {
+    return { args }
+  },
+  template: `
+    <uids-background></uids-background>
+  `,
+})
+
+export const Default = Template.bind({})

src/components/background/Background.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import './background.scss'
+const props = defineProps({})
+</script>
+<template>
+  hello background
+</template>

src/components/background/background.scss

@@ -1,70 +0,0 @@
-@import 'background-mixins';
-
-[class*="bg--"] {
-  a,
-  [class*="bg--"] a {
-    color: inherit;
-  }
-}
-
-[class*="bg--"][class*="--pattern--"] {
-  background-size: auto auto;
-  background-position: center center;
-}
-
-[class*="--pattern--particle"],
-[class*="bg--"][class*="--pattern--particle"] {
-  background-size: 1400px;
-}
-
-[class*="--pattern--community"],
-[class*="bg--"][class*="--pattern--community"] {
-  background-size: 1000px;
-}
-
-// Add background rules
-@include add-backgrounds();
-
-[class*="bg--"] {
-  *,
-  & [class*="bg--"] * {
-    border-color: inherit;
-
-    &:before,
-    &:after {
-      color: inherit;
-      border-color: inherit;
-    }
-  }
-}
-
-// border color overrides for certain background colors
-[class*="bg--gray"],
-[class*="bg--white"],
-[class*="bg--gold"],
-.bg-pattern--brain-reversed,
-.bg-pattern--brain {
-  border-color: rgba(0,0,0,.125);
-}
-
-.bg--black--pattern--brain,
-.bg-pattern--brain-black,
-[class*="bg--black"] {
-  border-color: rgba(255,255,255,.325);
-}
-
-// override gray link color.
-[class*="bg--white"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
-[class*="bg-"] [class*="bg--white"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
-[class*="bg--gray"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
-[class*="bg-"] [class*="bg--gray"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
-  color: $link-color;
-}
-
-// set link color for black and gold nesting.
-[class*="bg--white"] [class*="bg--gold"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
-[class*="bg--white"] [class*="bg--black"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
-[class*="bg--gray"] [class*="bg--gold"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
-[class*="bg--gray"] [class*="bg--black"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
-  color: inherit;
-}

src/components/background/index.ts

@@ -0,0 +1 @@
+export { default } from './Background.vue'

src/components/badge/Badge.stories.js

@@ -0,0 +1,20 @@
+import UidsBadge from './Badge.vue'
+
+export default {
+  title: 'Not yet implemented/Badge',
+  component: UidsBadge,
+  // https://github.com/storybookjs/storybook/issues/14442#issuecomment-1089165153
+  // parameters: { options: { showPanel: false } },
+}
+
+const Template = (args) => ({
+  components: { UidsBadge },
+  setup() {
+    return { args }
+  },
+  template: `
+    <uids-badge></uids-badge>
+  `,
+})
+
+export const Default = Template.bind({})

src/components/badge/Badge.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import './badge.scss'
+const props = defineProps({})
+</script>
+<template>
+  hello badge
+</template>

src/components/badge/index.ts

@@ -0,0 +1 @@
+export { default } from './Badge.vue'

src/components/blockquote/Blockquote.stories.js

@@ -0,0 +1,20 @@
+import UidsBlockquote from './Blockquote.vue'
+
+export default {
+  title: 'Not yet implemented/Blockquote',
+  component: UidsBlockquote,
+  // https://github.com/storybookjs/storybook/issues/14442#issuecomment-1089165153
+  // parameters: { options: { showPanel: false } },
+}
+
+const Template = (args) => ({
+  components: { UidsBlockquote },
+  setup() {
+    return { args }
+  },
+  template: `
+    <uids-blockquote></uids-blockquote>
+  `,
+})
+
+export const Default = Template.bind({})

src/components/blockquote/Blockquote.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import './blockquote.scss'
+const props = defineProps({})
+</script>
+<template>
+  hello blockquote
+</template>

src/components/blockquote/index.ts

@@ -0,0 +1 @@
+export { default } from './Blockquote.vue'

src/components/colors/Colors.stories.js

@@ -0,0 +1,20 @@
+import UidsColors from './Colors.vue'
+
+export default {
+  title: 'Not yet implemented/Colors',
+  component: UidsColors,
+  // https://github.com/storybookjs/storybook/issues/14442#issuecomment-1089165153
+  // parameters: { options: { showPanel: false } },
+}
+
+const Template = (args) => ({
+  components: { UidsColors },
+  setup() {
+    return { args }
+  },
+  template: `
+    <uids-colors></uids-colors>
+  `,
+})
+
+export const Default = Template.bind({})

src/components/colors/Colors.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import './colors.scss'
+const props = defineProps({})
+</script>
+<template>
+  hello color
+</template>

src/components/colors/index.ts

@@ -0,0 +1 @@
+export { default } from './Colors.vue'

src/components/cta/cta.stories.js

@@ -0,0 +1,20 @@
+import UidsCta from './cta.vue'
+
+export default {
+  title: 'Not yet implemented/Cta',
+  component: UidsCta ,
+  // https://github.com/storybookjs/storybook/issues/14442#issuecomment-1089165153
+  // parameters: { options: { showPanel: false } },
+}
+
+const Template = (args) => ({
+  components: { UidsCta },
+  setup() {
+    return { args }
+  },
+  template: `
+    <uids-cta></uids-cta>
+  `,
+})
+
+export const Default = Template.bind({})

src/components/cta/cta.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import './cta.scss'
+const props = defineProps({})
+</script>
+<template>
+  hello cta
+</template>

src/components/cta/index.ts

@@ -0,0 +1 @@
+export { default } from './cta.vue'