Merge pull request #38 from brown-ccv/fix-issues

fix: 🐛 cart title slot, icons with fontawesome, darkmode

package.json

@@ -33,7 +33,7 @@
     "deploy": "firebase deploy"
   },
   "dependencies": {
-    "@brown-ccv/disco-styles": "2.2.1",
+    "@brown-ccv/disco-styles": "2.2.2",
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/vue-fontawesome": "2",
     "bulma": "^0.9.0",

src/components/d-card.vue

@@ -11,7 +11,7 @@
     ]"
   >
     <header v-if="!person" v-bind:class="[headerRule]">
-      <h2 class="subtitle is-3 pt-2">{{ title }}</h2>
+      <slot name="header"> </slot>
     </header>
     <div v-bind:class="person ? 'd-person-card-content' : 'card-content'">
       <slot name="content" />
@@ -28,10 +28,6 @@ import discoBaseMixin from '@/mixins/disco-base-mixin.js';
 export default {
   mixins: [discoBaseMixin],
   props: {
-    title: {
-      type: String,
-      required: true,
-    },
     person: {
       type: Boolean,
       required: false,

src/components/d-icon.vue

@@ -7,7 +7,7 @@
       aria-hidden="true"
       role="img"
     >
-      <use v-bind="{ 'xlink:href': '/icons/brown-icons.svg#' + name }" />
+      <use v-bind="{ 'xlink:href': `/icons/${family}.svg#${name}` }" />
     </svg>
   </div>
 </template>
@@ -16,7 +16,14 @@
 export default {
   name: 'Icon',
   props: {
-    name: String,
+    name: {
+      type: String,
+      required: true,
+    },
+    family: {
+      type: String,
+      default: 'regular',
+    },
     width: {
       type: [Number, String],
       default: 24,

src/components/d-table-of-contents.vue

@@ -12,7 +12,11 @@
           v-bind:class="[textColor]"
           tabindex="0"
         >
-          <d-icon class="d-toc-icon" :name="entry.icon"></d-icon>
+          <d-icon
+            class="d-toc-icon"
+            :name="entry.icon.name"
+            :family="entry.icon.family"
+          ></d-icon>
           <span class="d-toc-start">
             {{ entry['name'] }}
           </span>

src/stories/cards.stories.mdx

@@ -1,6 +1,8 @@
 import { Meta, ArgsTable, Story, Canvas } from '@storybook/addon-docs/blocks';
 import DButton from '../components/d-button.vue';
 import DCard from '../components/d-card.vue';
+import DIcon from '../components/d-icon.vue';
+
 import { COLOR_VARIANTS, SIZES } from '../utils';
 
 <Meta 
@@ -18,7 +20,11 @@ import { COLOR_VARIANTS, SIZES } from '../utils';
 
 ### DCard component
 ```html
-<DCard title="Card Title" />
+<DCard>
+  <template #header></template>
+  <template #content></template>
+  <template #footer></template>
+</DCard>
 ```
 
 export const Template = (args, { argTypes }) => ({
@@ -42,11 +48,14 @@ export const Template = (args, { argTypes }) => ({
 
 export const TemplateFlex = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { DCard, DButton },
+  components: { DCard, DButton, DIcon },
   template: `
         <div class="columns is-multiline is-mobile">
           <div class="column">
-            <DCard :title='title' :variant="variant" :accent="accent" :width="width" :border="border">
+            <DCard :variant="variant" :accent="accent" :width="width" :border="border">
+              <template #header>
+                    <h2 class="subtitle is-3 pt-2 has-text-black">Card Title</h2>
+              </template>
               <template #content>
                 <div class="content">
                   <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>
@@ -58,7 +67,10 @@ export const TemplateFlex = (args, { argTypes }) => ({
             </DCard> 
           </div>
           <div class="column">
-            <DCard :title='title' :variant="variant" :accent="accent" :width="width" :border="border">
+            <DCard :variant="variant" :accent="accent" :width="width" :border="border">
+              <template #header>
+                <h2 class="subtitle is-3 pt-2 has-text-black">Card Title</h2>
+              </template>
               <template #content>
                 <div class="content">
                   <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>
@@ -70,7 +82,11 @@ export const TemplateFlex = (args, { argTypes }) => ({
             </DCard> 
           </div>
           <div class="column">
-            <DCard :title='title' :variant="variant" :accent="accent" :width="width" :border="border">
+            <DCard :variant="variant" :accent="accent" :width="width" :border="border">
+              <template #header>
+                <DIcon family="light" name="university" />
+                <h2 class="subtitle is-3 pt-2 has-text-black">Card Title</h2>
+              </template>
               <template #content>
                 <div class="content">
                   <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>
@@ -86,13 +102,13 @@ export const TemplateFlex = (args, { argTypes }) => ({
 });
 
 <Canvas>
-  <Story name="Card" args={{title: 'Card Title', variant: 'light', accent: 'warning', width: 'small', border: false}}>
+  <Story name="Card" args={{variant: 'light', accent: 'warning', width: 'small', border: false}}>
     {Template.bind({})}
   </Story>
 </Canvas>
 
 <Canvas>
-  <Story name="Card Flex" args={{title: 'Card Title', variant: 'light', accent: 'warning', width: 'small', border: false}}>
+  <Story name="Card Flex" args={{variant: 'light', accent: 'warning', width: 'small', border: false}}>
     {TemplateFlex.bind({})}
   </Story>
 </Canvas>

src/stories/colors.js

@@ -1,118 +1,118 @@
 const yellows = [
   {
     name: 'yellow-darker',
-    code: { dark: 'hsl(44, 100%, 39%)', light: 'hsl(44, 100%, 39%)' }
+    code: { dark: 'hsl(44, 100%, 39%)', light: 'hsl(44, 100%, 39%)' },
   },
   {
     name: 'yellow-dark',
-    code: { dark: 'hsl(44, 100%, 49%)', light: 'hsl(44, 100%, 49%)' }
+    code: { dark: 'hsl(44, 100%, 49%)', light: 'hsl(44, 100%, 49%)' },
   },
   {
     name: 'yellow',
-    code: { dark: 'hsl(44, 100%, 59%)', light: 'hsl(44, 100%, 59%)' }
+    code: { dark: 'hsl(44, 100%, 59%)', light: 'hsl(44, 100%, 59%)' },
   },
   {
     name: 'yellow-light',
-    code: { dark: 'hsl(44, 100%, 69%)', light: 'hsl(44, 100%, 69%)' }
+    code: { dark: 'hsl(44, 100%, 69%)', light: 'hsl(44, 100%, 69%)' },
   },
   {
     name: 'yellow-lighter',
-    code: { dark: 'hsl(44, 100%, 79%)', light: 'hsl(44, 100%, 79%)' }
-  }
+    code: { dark: 'hsl(44, 100%, 79%)', light: 'hsl(44, 100%, 79%)' },
+  },
 ];
 
 const greens = [
   {
     name: 'green-darker',
-    code: { dark: 'hsl(171, 100%, 15%)', light: 'hsl(171, 100%, 15%)' }
+    code: { dark: 'hsl(171, 100%, 15%)', light: 'hsl(171, 100%, 15%)' },
   },
   {
     name: 'green-dark',
-    code: { dark: 'hsl(171, 100%, 25%)', light: 'hsl(171, 100%, 25%)' }
+    code: { dark: 'hsl(171, 100%, 25%)', light: 'hsl(171, 100%, 25%)' },
   },
   {
     name: 'green',
-    code: { dark: 'hsl(171, 100%, 35%)', light: 'hsl(171, 100%, 35%)' }
+    code: { dark: 'hsl(171, 100%, 35%)', light: 'hsl(171, 100%, 35%)' },
   },
   {
     name: 'green-light',
-    code: { dark: 'hsl(171, 100%, 45%)', light: 'hsl(171, 100%, 45%)' }
+    code: { dark: 'hsl(171, 100%, 45%)', light: 'hsl(171, 100%, 45%)' },
   },
   {
     name: 'green-lighter',
-    code: { dark: 'hsl(171, 100%, 55%)', light: 'hsl(171, 100%, 55%)' }
-  }
+    code: { dark: 'hsl(171, 100%, 55%)', light: 'hsl(171, 100%, 55%)' },
+  },
 ];
 
 const colors = [
   { name: 'primary', code: { dark: '#A79A94', light: '#CCC6B' } },
   { name: 'success', code: { dark: '#00B398', light: '#00B398' } },
   {
     name: 'danger',
-    code: { dark: 'hsl(0, 56%, 38%)', light: 'hsl(0, 96%, 38%)' }
+    code: { dark: 'hsl(0, 56%, 38%)', light: 'hsl(0, 96%, 38%)' },
   },
   {
     name: 'warning',
-    code: { dark: 'hsl(44, 80%, 59%)', light: 'hsl(44, 100%, 59%)' }
+    code: { dark: 'hsl(44, 80%, 59%)', light: 'hsl(44, 100%, 59%)' },
   },
   { name: 'info', code: { dark: '#003C71', light: '#59CBE8' } },
-  { name: 'link', code: { dark: '#59CBE8', light: '#003C71' } }
+  { name: 'link', code: { dark: '#59CBE8', light: '#003C71' } },
 ];
 
 const greys = [
   {
     name: 'black',
-    code: { dark: 'hsl(0, 0%, 100%)', light: 'hsl(0, 0%, 4%)' }
+    code: { dark: 'hsl(0, 0%, 100%)', light: 'hsl(0, 0%, 4%)' },
   },
 
   {
     name: 'black-bis',
-    code: { dark: 'hsl(0, 0%, 98%);', light: 'hsl(0, 0%, 7%)' }
+    code: { dark: 'hsl(0, 0%, 98%);', light: 'hsl(0, 0%, 7%)' },
   },
   {
     name: 'black-ter',
-    code: { dark: 'hsl(0, 0%, 96%)', light: 'hsl(0, 0%, 14%)' }
+    code: { dark: 'hsl(0, 0%, 96%)', light: 'hsl(0, 0%, 14%)' },
   },
   {
     name: 'dark',
-    code: { dark: 'hsl(0, 0%, 96%)', light: 'hsl(0, 0%, 21%)' }
+    code: { dark: 'hsl(0, 0%, 96%)', light: 'hsl(0, 0%, 21%)' },
   },
   {
     name: 'grey-darker',
-    code: { dark: 'hsl(207, 12%, 86%)', light: 'hsl(207, 12%, 18%)' }
+    code: { dark: 'hsl(207, 12%, 86%)', light: 'hsl(207, 12%, 18%)' },
   },
   {
     name: 'grey-dark',
-    code: { dark: 'hsl(207, 12%, 71%)', light: 'hsl(207, 12%, 21%)' }
+    code: { dark: 'hsl(207, 12%, 71%)', light: 'hsl(207, 12%, 21%)' },
   },
   {
     name: 'grey',
-    code: { dark: 'hsl(207, 12%, 64%)', light: 'hsl(207, 12%, 64%)' }
+    code: { dark: 'hsl(207, 12%, 64%)', light: 'hsl(207, 12%, 64%)' },
   },
   {
     name: 'grey-light',
-    code: { dark: 'hsl(207, 12%, 21%)', light: 'hsl(207, 12%, 71%)' }
+    code: { dark: 'hsl(207, 12%, 21%)', light: 'hsl(207, 12%, 71%)' },
   },
   {
     name: 'grey-lighter',
-    code: { dark: 'hsl(207, 12%, 18%)', light: 'hsl(207, 12%, 86%)' }
+    code: { dark: 'hsl(207, 12%, 18%)', light: 'hsl(207, 12%, 86%)' },
   },
   {
     name: 'light',
-    code: { dark: 'hsl(0, 0%, 21%)', light: 'hsl(0, 0%, 96%)' }
+    code: { dark: 'hsl(0, 0%, 21%)', light: 'hsl(0, 0%, 96%)' },
   },
   {
     name: 'white-ter',
-    code: { dark: 'hsl(0, 0%, 14%)', light: 'hsl(0, 0%, 96%)' }
+    code: { dark: 'hsl(0, 0%, 14%)', light: 'hsl(0, 0%, 96%)' },
   },
   {
     name: 'white-bis',
-    code: { dark: 'hsl(0, 0%, 7%)', light: 'hsl(0, 0%, 98%)' }
+    code: { dark: 'hsl(0, 0%, 7%)', light: 'hsl(0, 0%, 98%)' },
   },
   {
     name: 'white',
-    code: { dark: 'hsl(0, 0%, 4%)', light: 'hsl(0, 0%, 100%)' }
-  }
+    code: { dark: 'hsl(0, 0%, 4%)', light: 'hsl(0, 0%, 100%)' },
+  },
 ];
 
 export { greens, yellows, colors, greys };

src/stories/icons.js

@@ -129,5 +129,5 @@ export const icons = [
   'videocamera',
   'vimeo',
   'wheelchair',
-  'youtube'
+  'youtube',
 ];

src/stories/icons.stories.mdx

@@ -8,15 +8,16 @@ import { icons } from './icons';
 
 <Props of={DIcon} />
 
-### University Theme Icons
+The Icon component is built using SVG Sprites. There are 6 families of icons to choose from. Five of them are part of FontAwesome:
+`solid`, `regular`, `light`, `brands` and `duotone`. Brown University provides an icon family `brown`. You can find the icons available
+under the `brown` family here. For FontAwesome icons, check https://fontawesome.com.
 
-Brown provides an icon font. We converted it to SVG and created a Icon component. 
  > To use it:
 ```jsx
-<DIcon name='icon-name' />
+<DIcon name='icon-name' family='brown'/>
 ```
 
-### Available icons: 
+### Available `brown` family icons: 
 <Preview>
     <Story name="Icon">
         {{
@@ -25,18 +26,11 @@ Brown provides an icon font. We converted it to SVG and created a Icon component
             <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
                 ${icons.map(icon => `
                 <div style="display: flex; flex-direction: column; align-content: center; justify-content: center; margin: 1rem;">
-                    <DIcon name=${icon} />
+                    <DIcon name=${icon} family="brown"/>
                     <code style="margin-top: 1rem;">${icon}</code>
                 </div>`).join("")}
             </div>
             `
         }}
     </Story>
 </Preview>
-
-### FontAwesome
-
-The icon library provided by Brown's University Theme is limited.
-To expand the icons available, CCV has a Font Awesome license that includes all free and pro icons. To use FontAwesome with Vue, follow
-the instructions [here](https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs). 
-If you want to use the pro icons, you can ask Fernando or Mary for a license key.

src/stories/toc.stories.mdx

@@ -24,7 +24,7 @@ export const Template = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: { DTOC },
   template: `<div>
-                <DTOC :variant="variant" :data="[{name:'Mission', icon:'chatbox-line', link:'https://datasci.brown.edu/about/'}, {name: 'People', icon:'person-lines'}, {name: 'Oppurtunities', icon:'lightbulb-1'}, {name: 'How to Cite CCV', icon:'carrot-right'}]" name="newtable"/>
+                <DTOC :variant="variant" :data="[{name:'Mission', icon:{name:'chatbox-line', family: 'brown'}, link:'https://datasci.brown.edu/about/'}, {name: 'People', icon:{family: 'light', name: 'users'}}, {name: 'Oppurtunities', icon:{family: 'brands', name: 'github'}}, {name: 'How to Cite CCV', icon:{family: 'solid', name: 'arrow-right'}}]" name="newtable"/>
             </div>
             `
 })