Merge pull request #51 from nightswinger/update-emoji-docs

update emoji docs
nightswinger · Feb 27, 2024 · 6a38384 · 6a38384
2 parents ccabf7b + 1c96942
commit 6a38384
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 146 deletions.
diff --git a/docs/src/components/elements/Emoji/AutosizingDoc.vue b/docs/src/components/elements/Emoji/AutosizingDoc.vue
@@ -0,0 +1,42 @@
+<template>
+  <DocSection label="Autosizing" :code="code">
+    <template #description>
+      If no specific size class is given, all emojis are automatically sized according to the current element font-size
+    </template>
+    <template #example>
+      <SuiHeader size="small">
+        Within a Header
+        <SuiEmoji name="relaxed" />
+      </SuiHeader>
+      <SuiButton as="div" size="large">
+        Within a Button
+        <SuiEmoji name="relaxed" />
+      </SuiButton>
+      <SuiLabel size="massive">
+        Within a Label
+        <SuiEmoji name="relaxed" />
+      </SuiLabel>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiEmoji, SuiHeader, SuiButton, SuiLabel } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader size="small">
+    Within a Header
+    <SuiEmoji name="relaxed" />
+  </SuiHeader>
+  <SuiButton as="div" size="large">
+    Within a Button
+    <SuiEmoji name="relaxed" />
+  </SuiButton>
+  <SuiLabel size="massive">
+    Within a Label
+    <SuiEmoji name="relaxed" />
+  </SuiLabel>
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Emoji/DisabledDoc.vue b/docs/src/components/elements/Emoji/DisabledDoc.vue
@@ -0,0 +1,20 @@
+<template>
+  <DocSection label="Disabled" :code="code">
+    <template #description>
+      An emoji can show that it is disabled
+    </template>
+    <template #example>
+      <SuiEmoji name="anguished" disabled />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiEmoji } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiEmoji name="anguished" disabled />
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Emoji/LinkDoc.vue b/docs/src/components/elements/Emoji/LinkDoc.vue
@@ -0,0 +1,20 @@
+<template>
+  <DocSection label="Link" :code="code">
+    <template #description>
+      An emoji can be formatted as a link
+    </template>
+    <template #example>
+      <SuiEmoji link name="slight_smile" size="medium" />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiEmoji } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiEmoji link name="slight_smile" size="medium" />
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Emoji/LoadingDoc.vue b/docs/src/components/elements/Emoji/LoadingDoc.vue
@@ -0,0 +1,24 @@
+<template>
+  <DocSection label="Loading" :code="code">
+    <template #description>
+      An emoji can be used as a simple loader
+    </template>
+    <template #example>
+      <SuiEmoji name="angel" loading />
+      <SuiEmoji name="blush" loading />
+      <SuiEmoji name="grin" loading />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiEmoji } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiEmoji name="angel" loading />
+  <SuiEmoji name="blush" loading />
+  <SuiEmoji name="grin" loading />
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Emoji/SizeDoc.vue b/docs/src/components/elements/Emoji/SizeDoc.vue
@@ -0,0 +1,26 @@
+<template>
+  <DocSection label="Size" :code="code">
+    <template #description>
+      An emoji can vary in size
+    </template>
+    <template #example>
+      <SuiEmoji name="relaxed" size="small" />
+      <SuiEmoji name="relaxed" size="medium" />
+      <SuiEmoji name="relaxed" size="large" />
+      <SuiEmoji name="relaxed" size="big" />
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiEmoji } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiEmoji name="relaxed" size="small" />
+  <SuiEmoji name="relaxed" size="medium" />
+  <SuiEmoji name="relaxed" size="large" />
+  <SuiEmoji name="relaxed" size="big" />
+<\/template>`
+</script>
diff --git a/docs/src/pages/EmojiDoc.vue b/docs/src/pages/EmojiDoc.vue
diff --git a/docs/src/pages/elements/Emoji.vue b/docs/src/pages/elements/Emoji.vue
@@ -0,0 +1,53 @@
+<template>
+  <DocComponent
+    title="Emoji"
+    description="An emoji is a glyph used to represent an emotional state"
+    :component-docs="docs"
+  />
+</template>
+
+<script setup>
+import DocComponent from '@/components/doc/DocComponent.vue'
+
+// States
+import DisabledDoc from '@/components/elements/Emoji/DisabledDoc.vue'
+import LoadingDoc from '@/components/elements/Emoji/LoadingDoc.vue'
+
+// Variations
+import SizeDoc from '@/components/elements/Emoji/SizeDoc.vue'
+import AutosizingDoc from '@/components/elements/Emoji/AutosizingDoc.vue'
+import LinkDoc from '@/components/elements/Emoji/LinkDoc.vue'
+
+const docs = [
+  {
+    id: 'disabled',
+    label: 'Disabled',
+    category: 'States',
+    component: DisabledDoc,
+  },
+  {
+    id: 'loading',
+    label: 'Loading',
+    category: 'States',
+    component: LoadingDoc,
+  },
+  {
+    id: 'size',
+    label: 'Size',
+    category: 'Variations',
+    component: SizeDoc,
+  },
+  {
+    id: 'autosizing',
+    label: 'Autosizing',
+    category: 'Variations',
+    component: AutosizingDoc,
+  },
+  {
+    id: 'link',
+    label: 'Link',
+    category: 'Variations',
+    component: LinkDoc,
+  },
+]
+</script>
diff --git a/docs/src/router.ts b/docs/src/router.ts
@@ -2,9 +2,9 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Home from './pages/Home.vue'
 import GettingStarted from './pages/GettingStarted.vue'
 import Button from './pages/elements/Button.vue'
-import Container from './pages/Container.vue'
+import Container from './pages/elements/Container.vue'
 import Divider from './pages/elements/Divider.vue'
-import EmojiDoc from './pages/EmojiDoc.vue'
+import Emoji from './pages/elements/Emoji.vue'
 import FlagDoc from './pages/FlagDoc.vue'
 import HeaderDoc from './pages/HeaderDoc.vue'
 import IconDoc from './pages/IconDoc.vue'
@@ -55,7 +55,7 @@ const routes: any = [
       { path: 'elements/button', component: Button },
       { path: 'elements/container', component: Container },
       { path: 'elements/divider', component: Divider },
-      { path: 'elements/emoji', component: EmojiDoc },
+      { path: 'elements/emoji', component: Emoji },
       { path: 'elements/flag', component: FlagDoc },
       { path: 'elements/header', component: HeaderDoc },
       { path: 'elements/icon', component: IconDoc },