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.
@@ -86,13 +102,13 @@ export const TemplateFlex = (args, { argTypes }) => ({
});
\ No newline at end of file
diff --git a/src/stories/colors.js b/src/stories/colors.js
index fb3bfde..8989ffa 100644
--- a/src/stories/colors.js
+++ b/src/stories/colors.js
@@ -1,47 +1,47 @@
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 = [
@@ -49,70 +49,70 @@ const colors = [
{ 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 };
diff --git a/src/stories/icons.js b/src/stories/icons.js
index 04dde95..25865ed 100644
--- a/src/stories/icons.js
+++ b/src/stories/icons.js
@@ -129,5 +129,5 @@ export const icons = [
'videocamera',
'vimeo',
'wheelchair',
- 'youtube'
+ 'youtube',
];
diff --git a/src/stories/icons.stories.mdx b/src/stories/icons.stories.mdx
index b38ad8f..fae610f 100644
--- a/src/stories/icons.stories.mdx
+++ b/src/stories/icons.stories.mdx
@@ -8,15 +8,16 @@ import { icons } from './icons';
-### 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
-
+
```
-### Available icons:
+### Available `brown` family icons:
{{
@@ -25,7 +26,7 @@ Brown provides an icon font. We converted it to SVG and created a Icon component
${icons.map(icon => `
-
+
${icon}
`).join("")}
@@ -33,10 +34,3 @@ Brown provides an icon font. We converted it to SVG and created a Icon component
}}
-
-### 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.
diff --git a/src/stories/toc.stories.mdx b/src/stories/toc.stories.mdx
index e9f464f..def61f7 100644
--- a/src/stories/toc.stories.mdx
+++ b/src/stories/toc.stories.mdx
@@ -24,7 +24,7 @@ export const Template = (args, {argTypes}) => ({
props: Object.keys(argTypes),
components: { DTOC },
template: `
-
+
`
})
diff --git a/tests/unit/d-card.spec.js b/tests/unit/d-card.spec.js
index ca955db..42b547d 100644
--- a/tests/unit/d-card.spec.js
+++ b/tests/unit/d-card.spec.js
@@ -4,79 +4,58 @@ import '@testing-library/jest-dom';
// Behavior Driven Tests
+const variants = [
+ 'primary',
+ 'success',
+ 'danger',
+ 'warning',
+ 'info',
+ 'link',
+ 'dark',
+ 'light',
+];
+const darkVariants = ['danger', 'link', 'dark'];
+const lightVariants = ['primary', 'success', 'warning', 'info', 'light'];
+const widths = ['small', 'medium', 'large'];
+
test('has d-card class', () => {
- const title = 'Card Title';
- const { getByTestId } = render(DCard, {
- props: { title },
- });
+ const { getByTestId } = render(DCard);
expect(getByTestId('card')).toHaveClass('d-card');
});
-test('renders correct title when props.title is passed', () => {
- const title = 'Card Title';
- const { getByRole } = render(DCard, {
- props: { title },
- });
- expect(getByRole('heading')).toHaveTextContent(title);
-});
-
test('renders all borders color when props.border is set true', () => {
- const title = 'Card Title';
- const accents = [
- 'primary',
- 'success',
- 'danger',
- 'warning',
- 'info',
- 'link',
- 'dark',
- 'light',
- ];
const border = true;
var accentsHTML;
- accents.map((accent) => {
+ variants.map((accent) => {
const { getAllByTestId } = render(DCard, {
- props: { title, accent, border },
+ props: { accent, border },
});
accentsHTML = getAllByTestId('card');
});
accentsHTML.map(function (accentHTML, i) {
- expect(accentHTML).toHaveClass(`has-border-${accents[i]}`);
+ expect(accentHTML).toHaveClass(`has-border-${variants[i]}`);
});
});
test('renders only top border color when props.border is set false', () => {
- const title = 'Card Title';
- const accents = [
- 'primary',
- 'success',
- 'danger',
- 'warning',
- 'info',
- 'link',
- 'dark',
- 'light',
- ];
const border = false;
var accentsHTML;
- accents.map((accent) => {
+ variants.map((accent) => {
const { getAllByTestId } = render(DCard, {
- props: { title, accent, border },
+ props: { accent, border },
});
accentsHTML = getAllByTestId('card');
});
accentsHTML.map(function (accentHTML, i) {
- expect(accentHTML).toHaveClass(`has-border-top-${accents[i]}`);
+ expect(accentHTML).toHaveClass(`has-border-top-${variants[i]}`);
});
});
test('renders correct width when props.width is passed', () => {
- const title = 'Card Title';
- const widths = ['small', 'medium', 'large'];
var widthsHTML;
widths.map((width) => {
const { getAllByTestId } = render(DCard, {
- props: { title, width },
+ props: { width },
});
widthsHTML = getAllByTestId('card');
});
@@ -86,21 +65,10 @@ test('renders correct width when props.width is passed', () => {
});
test('renders correct background variant for card when props.variant is passed', () => {
- const title = 'Card Title';
- const variants = [
- 'primary',
- 'success',
- 'danger',
- 'warning',
- 'info',
- 'link',
- 'dark',
- 'light',
- ];
var variantsHTML;
variants.map((variant) => {
const { getAllByTestId } = render(DCard, {
- props: { title, variant },
+ props: { variant },
});
variantsHTML = getAllByTestId('card');
});
@@ -110,12 +78,10 @@ test('renders correct background variant for card when props.variant is passed',
});
test('renders correct light text color when dark props.variant is passed', () => {
- const title = 'Card Title';
- const darkVariants = ['danger', 'link', 'dark'];
var darkVariantsHTML;
darkVariants.map((variant) => {
const { getAllByTestId } = render(DCard, {
- props: { title, variant },
+ props: { variant },
});
darkVariantsHTML = getAllByTestId('card');
});
@@ -125,12 +91,10 @@ test('renders correct light text color when dark props.variant is passed', () =>
});
test('renders correct dark text color when light props.variant is passed', () => {
- const title = 'Card Title';
- const lightVariants = ['primary', 'success', 'warning', 'info', 'light'];
var lightVariantsHTML;
lightVariants.map((variant) => {
const { getAllByTestId } = render(DCard, {
- props: { title, variant },
+ props: { variant },
});
lightVariantsHTML = getAllByTestId('card');
});
diff --git a/tests/unit/d-icon.spec.js b/tests/unit/d-icon.spec.js
index 8f36a75..82b2679 100644
--- a/tests/unit/d-icon.spec.js
+++ b/tests/unit/d-icon.spec.js
@@ -2,29 +2,29 @@ import { render } from '@testing-library/vue';
import DIcon from '@/components/d-icon.vue';
import '@testing-library/jest-dom';
+const name = 'instagram';
+const family = 'brown';
+
test('has icon class', () => {
- const name = 'instagram';
const { getByRole } = render(DIcon, {
- props: { name },
+ props: { name, family },
});
expect(getByRole('img', { hidden: true })).toHaveClass('icon');
});
test('renders default height and width', () => {
- const name = 'instagram';
const { getByRole } = render(DIcon, {
- props: { name },
+ props: { name, family },
});
expect(getByRole('img', { hidden: true })).toHaveAttribute('width', '24');
expect(getByRole('img', { hidden: true })).toHaveAttribute('height', '24');
});
test('renders height and width when props are passed', () => {
- const name = 'instagram';
const width = '50';
const height = '50';
const { getByRole } = render(DIcon, {
- props: { name, width, height },
+ props: { name, family, width, height },
});
expect(getByRole('img', { hidden: true })).toHaveAttribute('width', '50');
expect(getByRole('img', { hidden: true })).toHaveAttribute('height', '50');
diff --git a/tests/unit/d-table-of-contents.spec.js b/tests/unit/d-table-of-contents.spec.js
index ab94e4c..e1c1cd0 100644
--- a/tests/unit/d-table-of-contents.spec.js
+++ b/tests/unit/d-table-of-contents.spec.js
@@ -5,12 +5,12 @@ import '@testing-library/jest-dom';
const data = [
{
name: 'Mission',
- icon: 'chatbox-line',
+ icon: { family: 'brown', name: 'chatbox-line' },
link: '#',
},
- { name: 'People', icon: 'person-lines' },
- { name: 'Oppurtunities', icon: 'lightbulb-1' },
- { name: 'How to Cite CCV', icon: 'carrot-right' },
+ { name: 'People', icon: { family: 'brown', name: 'person-lines' } },
+ { name: 'Oppurtunities', icon: { family: 'brown', name: 'lightbulb-1' } },
+ { name: 'How to Cite CCV', icon: { family: 'brown', name: 'carrot-right' } },
];
const variants = [
diff --git a/yarn.lock b/yarn.lock
index 50d0be4..934eeec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1056,10 +1056,10 @@
resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047"
integrity sha512-4Th98KlMHr5+JkxfcoDT//6vY8vM+iSPrLNpHhRyLx2CFYi8e2RfqPLdpbnpo0Q5lQC5hNB79yes07zb02fvCw==
-"@brown-ccv/disco-styles@2.2.1":
- version "2.2.1"
- resolved "https://npm.pkg.github.com/download/@brown-ccv/disco-styles/2.2.1/d26719417a7d6f6d95576784cfd5e7d5d577eb33fc7ffdcafe738cb4e11f3d92#82b4ccdd6ef8c113f9ac94b6e615386139edfd6d"
- integrity sha512-IGOIOckk/3zyHCQgRDTTpg5v34Ze1nmjmuNfX8umadw5jNiptiQJ6wYOM0S+pI/yAciLPbuLiUKz9tDrZTKjWg==
+"@brown-ccv/disco-styles@2.2.2":
+ version "2.2.2"
+ resolved "https://npm.pkg.github.com/download/@brown-ccv/disco-styles/2.2.2/30949ff400b36c73d1df82d41b2c68f232016a37e146ebccac11857a448ef34c#488fe7b721bd15936d15d766af8430cf42a4b542"
+ integrity sha512-UfxNcml6aTOmVH1Xwjs2+uCLhn7YB7g3+GKJNAd8RDTtXSzINetRvFme8lZzDCRxHybwvTMLEIA91M8sWf/HRg==
dependencies:
bulma "^0.9.0"
cz-conventional-changelog "^3.2.0"