feat(card): add xlarge and xxlarge size (#383)

globalbrain · Nov 14, 2023 · 6cd8364 · 6cd8364
1 parent c37b97c
commit 6cd8364
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/docs/components/card.md b/docs/components/card.md
@@ -36,7 +36,7 @@ import SCardHeaderTitle from 'sefirot/components/SCardHeaderTitle.vue'
       </SCardBlock>
       <SCardFooter>
         <SCardFooterActions>
-          <SCardFooterAction mode="mute" label="Cancel" />
+          <SCardFooterAction label="Cancel" />
           <SCardFooterAction mode="info" label="Submit" />
         </SCardFooterActions>
       </SCardFooter>

diff --git a/lib/components/SCard.vue b/lib/components/SCard.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { provideCardState } from '../composables/Card'
 
-export type Size = 'small' | 'medium' | 'large'
+export type Size = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
 export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
@@ -83,6 +83,20 @@ const classes = computed(() => [
       max-width: 768px;
     }
   }
+
+  &.xlarge {
+    @media (min-width: 1056px) {
+      margin: 48px auto 128px;
+      max-width: 960px;
+    }
+  }
+
+  &.xxlarge {
+    @media (min-width: 1248px) {
+      margin: 48px auto 128px;
+      max-width: 1152px;
+    }
+  }
 }
 
 .SModal.fade-enter-from > .SCard,

diff --git a/stories/components/SCard.01_Playground.story.vue b/stories/components/SCard.01_Playground.story.vue
@@ -69,7 +69,7 @@ function state() {
 
             <SCardFooter>
               <SCardFooterActions>
-                <SCardFooterAction mode="mute" label="Cancel" />
+                <SCardFooterAction label="Cancel" />
                 <SCardFooterAction mode="info" label="Submit" />
               </SCardFooterActions>
             </SCardFooter>

diff --git a/stories/components/SCard.02_Within_Modal.story.vue b/stories/components/SCard.02_Within_Modal.story.vue
@@ -19,6 +19,7 @@ const open = ref(false)
 
 function state() {
   return {
+    cardSize: 'small',
     cardMode: 'neutral',
     titleMode: 'neutral'
   }
@@ -28,6 +29,17 @@ function state() {
 <template>
   <Story :title="title" :init-state="state" source="Not available" auto-props-disabled>
     <template #controls="{ state }">
+      <HstSelect
+        title="Card size"
+        :options="{
+          small: 'small',
+          medium: 'medium',
+          large: 'large',
+          xlarge: 'xlarge',
+          xxlarge: 'xxlarge'
+        }"
+        v-model="state.cardSize"
+      />
       <HstSelect
         title="Card mode"
         :options="{
@@ -59,7 +71,7 @@ function state() {
         <SButton mode="info" label="Open dialog" @click="open = true" />
 
         <SModal :open="open" @close="open = false">
-          <SCard size="small" :mode="state.cardMode">
+          <SCard :size="state.cardSize" :mode="state.cardMode">
             <SCardHeader>
               <SCardHeaderTitle :mode="state.titleMode">Header title</SCardHeaderTitle>
               <SCardHeaderActions>
@@ -78,7 +90,7 @@ function state() {
 
             <SCardFooter>
               <SCardFooterActions>
-                <SCardFooterAction mode="mute" label="Cancel" @click="open = false" />
+                <SCardFooterAction label="Cancel" @click="open = false" />
                 <SCardFooterAction mode="info" label="Submit" @click="open = false" />
               </SCardFooterActions>
             </SCardFooter>