Merge pull request #7 from wisekiran/fix/4-update-vocabulary-fonts

Updating font in vocabulary-fonts

.storybook/meta/usage.stories.mdx

@@ -17,7 +17,7 @@ Just install `@creativecommons/fonts` using the package manager of your choice.
 $ npm install @creativecommons/fonts
 ```
 
-In your entrypoint, you can include the master CSS file. It does not include the Accidenz Commons font, so you might
+In your entrypoint, you can include the master CSS file. It does not include the CC Accidenz Commons font, so you might
 want to import that separately.
 
 ```js
@@ -57,5 +57,5 @@ methods with any of the following:
 - `vocabulary_icons.css`
 - `source_sans_pro.css`
 - `roboto_condensed.css`
-- `accidenz_commons.css`
+- `cc_accidenz_commons.css`
 - `jetbrains_mono.css`

.storybook/order.js

@@ -7,7 +7,7 @@ const order = {
   'Vocabulary Icons': [],
   'Roboto Condensed': [],
   'Source Sans Pro': [],
-  'Accidenz Commons': [],
+  'CC Accidenz Commons': [],
   'JetBrains Mono': [],
 }
 const families = Object.keys(order)

.storybook/preview.js

@@ -3,7 +3,7 @@ import { addDecorator, addParameters, } from '@storybook/html'
 import order from './order'
 
 import '../dist/css/fonts.css'
-import '../dist/css/accidenz_commons.css'
+import '../dist/css/cc_accidenz_commons.css'
 
 addParameters({
   options: {

.storybook/stories/accidenz_commons.stories.mdx

@@ -1,22 +1,22 @@
 import { Meta, Story, Typeset } from '@storybook/addon-docs/blocks'
 import { alphabetTable, numberTable, sampleTexts } from './helpers'
 
-<Meta title = 'Accidenz Commons' parameters = {{
+<Meta title = 'CC Accidenz Commons' parameters = {{
   decorators: [
     storyFn => `<style>
-  .accidenz-commons {
-    font-family: 'Accidenz Commons';
+  .cc-accidenz-commons {
+    font-family: 'CC Accidenz Commons';
   }
 </style>
-<div class="accidenz-commons has-text-black">
+<div class="cc-accidenz-commons has-text-black">
   ${storyFn()}
 </div>`
   ]
 }}/>
 
-# Accidenz Commons
+# CC Accidenz Commons
 
-Accidenz Commons, an open-Licensed font, is a contemporary, versatile, and neutral version of Akzidenz Grotesk designed
+CC Accidenz Commons, an open-Licensed font, is a contemporary, versatile, and neutral version of Akzidenz Grotesk designed
 by Archetypo.
 
 It is used in Vocabulary in only one font weight: regular (400).
@@ -28,31 +28,31 @@ It is used in Vocabulary in only one font weight: regular (400).
     '2rem',
     '1rem'
   ]}
-  fontFamily="Accidenz Commons"
+  fontFamily="CC Accidenz Commons"
   fontWeight={400}
   sampleText={sampleTexts[0]} />
 
 <Typeset
   fontSizes={['2rem']}
-  fontFamily="Accidenz Commons"
+  fontFamily="CC Accidenz Commons"
   fontWeight={400}
   sampleText="A B C D E F G H I J K L M N O P Q R S T U V W X Y Z" />
 
 <Typeset
   fontSizes={['2rem']}
-  fontFamily="Accidenz Commons"
+  fontFamily="CC Accidenz Commons"
   fontWeight={400}
   sampleText="a b c d e f g h i j k l m n o p q r s t u v w x y z" />
 
 <Typeset
   fontSizes={['2rem']}
-  fontFamily="Accidenz Commons"
+  fontFamily="CC Accidenz Commons"
   fontWeight={400}
   sampleText="0 1 2 3 4 5 6 7 8 9 + - * / % $" />
 
 <Typeset
   fontSizes={['2rem']}
-  fontFamily="Accidenz Commons"
+  fontFamily="CC Accidenz Commons"
   fontWeight={400}
   sampleText=". ? ! ' & : ; @ # < > ( ) { } [ ]" />
 

src/scripts/accidenz_commons.js

@@ -1 +1 @@
-require("../styles/accidenz_commons.scss");
+require("../styles/cc_accidenz_commons.scss");

src/styles/cc_accidenz_commons.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: "CC Accidenz Commons";
+  font-style: normal;
+  font-weight: 500;
+  src: url("../fonts/CCAccidenzCommons-medium.otf") format("opentype");
+}

tests/snapshot/accidenz_commons.test.js

@@ -1,24 +1,24 @@
 import { goTo, pause } from './helpers'
 
-describe('Accidenz Commons', () => {
+describe('CC Accidenz Commons', () => {
   it('Uppercase letters', async () => {
-    await goTo(page, 'accidenz-commons--uppercase-letters')
+    await goTo(page, 'cc-accidenz-commons--uppercase-letters')
     await pause(1000) // Fonts take some time to load
     const image = await page.screenshot()
 
     expect(image).toMatchImageSnapshot()
   })
 
   it('Lowercase letters', async () => {
-    await goTo(page, 'accidenz-commons--lowercase-letters')
+    await goTo(page, 'cc-accidenz-commons--lowercase-letters')
     await pause(1000) // Fonts take some time to load
     const image = await page.screenshot()
 
     expect(image).toMatchImageSnapshot()
   })
 
   it('Numbers', async () => {
-    await goTo(page, 'accidenz-commons--numbers')
+    await goTo(page, 'cc-accidenz-commons--numbers')
     await pause(1000) // Fonts take some time to load
     const image = await page.screenshot()
 

tests/unit/setup_tests.scss

@@ -3,7 +3,7 @@
 @import '../../src/styles/vocabulary_icons';
 @import '../../src/styles/source_sans_pro';
 @import '../../src/styles/roboto_condensed';
-@import '../../src/styles/accidenz_commons';
+@import '../../src/styles/cc_accidenz_commons';
 @import '../../src/styles/jetbrains_mono';
 
 @import 'vocabulary_icons';

webpack.config.js

@@ -5,7 +5,7 @@ const CopyPlugin = require("copy-webpack-plugin");
 module.exports = {
   entry: {
     fonts: "./src/index.js",
-    accidenz_commons: "./src/scripts/accidenz_commons.js",
+    cc_accidenz_commons: "./src/scripts/cc_accidenz_commons.js",
     roboto_condensed: "./src/scripts/roboto_condensed.js",
     source_sans_pro: "./src/scripts/source_sans_pro.js",
     vocabulary_icons: "./src/scripts/vocabulary_icons.js"