Medium -> Content

docs/.vitepress/config.ts

@@ -52,6 +52,7 @@ function sidebar(): DefaultTheme.SidebarItem[] {
         { text: 'SButton', link: '/components/button' },
         { text: 'SButtonGroup', link: '/components/button-group' },
         { text: 'SCard', link: '/components/card' },
+        { text: 'SContent', link: '/components/content' },
         { text: 'SFragment', link: '/components/fragment' },
         { text: 'SGrid', link: '/components/grid' },
         { text: 'SHead', link: '/components/head' },
@@ -67,7 +68,6 @@ function sidebar(): DefaultTheme.SidebarItem[] {
         { text: 'SInputTextarea', link: '/components/input-textarea' },
         { text: 'SInputYMD', link: '/components/input-ymd' },
         { text: 'SLink', link: '/components/link' },
-        { text: 'SMedium', link: '/components/medium' },
         { text: 'SPill', link: '/components/pill' },
         { text: 'SState', link: '/components/state' },
         { text: 'STable', link: '/components/table' },

docs/components/medium.md → docs/components/content.md

@@ -1,44 +1,44 @@
 <script setup lang="ts">
-import SMedium from 'sefirot/components/SMedium.vue'
+import SContent from 'sefirot/components/SContent.vue'
 </script>
 
-# SMedium
+# SContent
 
-`<SMedium>` applies basic styles to the native HTML elements.
+`<SContent>` applies basic styles to the native HTML elements.
 
 <Showcase
-  path="/components/SMedium.vue"
-  story="/stories-components-smedium-01-playground-story-vue"
+  path="/components/SContent.vue"
+  story="/stories-components-scontent-01-playground-story-vue"
 >
-  <SMedium>
+  <SContent>
     <p>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.</p>
     <ul>
       <li>Excepteur sint occaecat cupidatat.</li>
       <li>Voluptate velit esse cillum dolore.</li>
       <li>Labore et dolore magna aliqua.</li>
     </ul>
-  </SMedium>
+  </SContent>
 </Showcase>
 
 ## Usage
 
-Place HTML elements inside `<SMedium>` component and it will apply basic styles to the element, including spacing between elements.
+Place HTML elements inside `<SContent>` component and it will apply basic styles to the element, including spacing between elements.
 
 ```vue
 <script setup lang="ts">
-import SMedium from '@globalbrain/sefirot/lib/components/SMedium.vue'
+import SContent from '@globalbrain/sefirot/lib/components/SContent.vue'
 </script>
 
 <template>
-  <SMedium>
+  <SContent>
     <p>Lorem ipsum dolor sit amet.</p>
     <p>Consectetur adipiscing elit.</p>
     <ul>
       <li>Excepteur sint occaecat cupidatat.</li>
       <li>Voluptate velit esse cillum dolore.</li>
       <li>Labore et dolore magna aliqua.</li>
     </ul>
-  </SMedium>
+  </SContent>
 </template>
 ```
 

lib/components/SMedium.vue → lib/components/SContent.vue

@@ -1,29 +1,29 @@
 <template>
-  <div class="SMedium">
+  <div class="SContent">
     <slot />
   </div>
 </template>
 
 <style scoped lang="postcss">
-.SMedium {
+.SContent {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
-.SMedium :deep(p) {
+.SContent :deep(p) {
   margin: 0;
   line-height: 24px;
   font-size: 14px;
   font-weight: 400;
   color: var(--c-text-1);
 }
 
-.SMedium :deep(strong) {
+.SContent :deep(strong) {
   font-weight: 600;
 }
 
-.SMedium :deep(a) {
+.SContent :deep(a) {
   color: var(--c-info-text);
   transition: color 0.25s;
 
@@ -32,18 +32,18 @@
   }
 }
 
-.SMedium :deep(ul),
-.SMedium :deep(ol) {
+.SContent :deep(ul),
+.SContent :deep(ol) {
   margin: 0;
   padding-left: 0;
   list-style: none;
 }
 
-.SMedium :deep(ol) {
+.SContent :deep(ol) {
   counter-reset: s-medium-counter;
 }
 
-.SMedium :deep(li) {
+.SContent :deep(li) {
   position: relative;
   margin: 0;
   padding-left: 20px;
@@ -53,7 +53,7 @@
   color: var(--c-text-1);
 }
 
-.SMedium :deep(ul > li::before) {
+.SContent :deep(ul > li::before) {
   position: absolute;
   top: 8px;
   left: 2px;
@@ -64,11 +64,11 @@
   content: "";
 }
 
-.SMedium :deep(ol > li) {
+.SContent :deep(ol > li) {
   counter-increment: s-medium-counter;
 }
 
-.SMedium :deep(ol > li::before) {
+.SContent :deep(ol > li::before) {
   margin-right: 3px;
   margin-left: -20px;
   color: var(--c-text-2);

stories/components/SMedium.01_Playground.story.vue → stories/components/SContent.01_Playground.story.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import SContent from 'sefirot/components/SContent.vue'
 import SLink from 'sefirot/components/SLink.vue'
-import SMedium from 'sefirot/components/SMedium.vue'
 
-const title = 'Components / SMedium / 01. Playground'
-const docs = '/components/medium'
+const title = 'Components / SContent / 01. Playground'
+const docs = '/components/content'
 </script>
 
 <template>
   <Story :title="title" source="Not available" auto-props-disabled>
     <Board :title="title" :docs="docs">
       <div class="max-w-640">
-        <SMedium>
+        <SContent>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <SLink href="https://example.com">quis nostrud exercitation</SLink> ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 
           <p><strong>Duis aute irure dolor in reprehenderit</strong> 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.</p>
@@ -41,7 +41,7 @@ const docs = '/components/medium'
             <li>Sed ut perspiciatis unde omnis iste natus error.</li>
             <li>Lorem ipsum dolor sit amet.</li>
           </ol>
-        </SMedium>
+        </SContent>
       </div>
     </Board>
   </Story>

tests/components/SContent.spec.ts

@@ -0,0 +1,9 @@
+import { mount } from '@vue/test-utils'
+import SContent from 'sefirot/components/SContent.vue'
+
+describe('components/SContent', () => {
+  test('renders `SContent` element', () => {
+    const wrapper = mount(SContent)
+    expect(wrapper.find('.SContent').exists()).toBe(true)
+  })
+})