worksafe-component-library - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

docs/design-system/Layout.md

@@ -16,3 +16,2 @@ # Layout System
 - Maximum width of 1200px 
-- [TODO: Padding on either side of the container, on mobile and on desktop, when screen is <1200px]
 
@@ -27,6 +26,8 @@ ## Breakpoints
 
-- `xsmall`: Up to 400px
-- `small`: Up to 550px
-- `medium`: Up to 768px
-- `large`: Up to (1200px + container padding)
+Available sizes:
+- `xs` or `0`
+- `sm` or `1`
+- `md` or `2`
+- `lg` or `3`
+- `xl` or `4`
 
@@ -39,7 +40,7 @@ ### How to use the breakpoints
 
-    @include medium-up {
+    @include min-width(1) {
         padding: $spacing-md;
     }
 
-    @include large-up {
+    @include min-width(3) {
         padding: $spacing-lg;
@@ -54,3 +55,3 @@ }
 
-    @include medium-down {
+    @include max-width(3) {
         display: block;
@@ -66,13 +67,8 @@ a: bunch;
 
-Found in `/src/styles/includes/_utils.scss`
+Found in `/src/styles/includes/_media.scss`
 
-- `@include xsmall-up`
-- `@include xsmall-down`
-- `@include small-up`
-- `@include small-down`
-- `@include medium-up`
-- `@include medium-down`
-- `@include large-up`
-- `@include large-down`
+- `@include min-width($break)`
+- `@include max-width($break)`
 
+
 ## Grid
@@ -79,0 +75,0 @@

docs/design-system/Typography.md

@@ -5,9 +5,9 @@ # Typography
 
-> NOTE: As of 6 Feb 2018
+> NOTE: As of 26 Feb 2018
 
-- The correct sizes are set on h1-h6 tags and general content (p, li, blockquote)
-- Mixins available for h1-h6 and content type sizes
+- The correct sizes are set on h1-h4 tags and general content (p, li, small, etc)
+- Mixins available for h1-h4 and content type sizes
     - If a component should have an `<h2 />` semantically but it needs to look like an `<h3 />`
-- Uses pixels right now because the values were pulled directly out of Sketch (see upgrade plan below)
-- Responsive design - font size changes between mobile and desktop
+- Uses pixels in the config (`_variables.scss`) but is converted to rem units on compile to CSS
+- Responsive design: font size changes between mobile and desktop, and should always use mixins to ensure these sizes are consistently applied
 
@@ -22,4 +22,4 @@ ## What do I do if I see some text that doesn't match an existing style?
 
-- Neue Haas Grotesk Display 75Bold for headings
-- Neue Haas Grotesk Text 55Regular, 56Italic and 75Bold for everything else
+- Neue Haas Grotesk Display 75Bold for headings (SCSS: `$font-family-heading`)
+- Neue Haas Grotesk Text 55Regular, 56Italic and 75Bold for everything else  (SCSS: `$font-family-content`)
 
@@ -30,3 +30,3 @@ > Webfonts licensed via MyFonts.com - see font delivery method below for more
 
-By default, semantically structured text _should_ render correctly out of the box. A component with an `<h2 />` shouldn't need much extra tweaking to make the title match the designs, at least typographically.
+By default, semantically structured text will render correctly out of the box. 
 
@@ -52,6 +52,8 @@ Just use the right tags and it should get you close to the designs. Say, for example, you had a component called Component. The `h2`, `p`, `h3` and `ul` should be the right size without any tweaking. This reserves CSS classes like `component__title` for layout, colour, etc. This creates a solid type hierarchy across the site, making it easier for users to scan and structure the information they're reading quickly and reliably.
 
-## SCSS mixins - When the system's not enough 
+## SCSS mixins - How to apply the system manually
 
-The type system is implemented as a set of SCSS mixins that are available to use in a component. This is useful with headings when you want to make a semantic `<h2 />` look like an `<h3 />` or `<h4 />` to sighted users.
+The type system is implemented as a set of SCSS mixins that are available to use in a component. For example, this is useful with headings if you want to make a semantic `<h2 />` look like an `<h3 />` or `<h4 />` to sighted users.
 
+To achive this you should use a combination of sizing and font mixins:
+
 ```html
@@ -61,11 +63,18 @@ <template>
         <h2 class="component__title">The Component Title</h2>
-        <p class="component__caption">Lorem ipsum whatever</p>
+        <p class="component__caption">Small text content of the caption</p>
     </section>
 </template>
+
 <style lang="scss" scoped>
     .component__title {
-        @include h3-size;
+        // From the type config in variables.scss, sets up the h3 font-size and line-height across all breakpoints
+        @include type-h3;
+        // Apply the font family and color for headings
+        @include type-heading;
     }
     .component__caption {
-        @include small-type;
+        // From the type config in variables.scss, sets up the small font-size and line-height across all breakpoints
+        @include type-small;
+        // Apply the font family and color for basic content
+        @include type-content;
     }
@@ -75,13 +84,23 @@ </style>
 
+Spacing (top margins) is not currently included with these mixins; only font and sizing. This is to allow you to apply type styles to elements contained tightly inside a parent component.
+
+
 ### Full list of mixins
 
-- `@include h1-size`
-- `@include h2-size`
-- `@include h3-size`
-- `@include h4-size`
-- `@include type-content`
-- `@include content-large`
-- `@include type-heading`
+#### Sizing mixins:
+- `@include type-h1`
+- `@include type-h2`
+- `@include type-h3`
+- `@include type-h4`
+- `@include type-p`
 - `@include type-small`
+- `@include type-intro`
+- `@include type-button`
+- `@include type-label`
 
+#### Font mixins:
+- `@include type-heading`
+- `@include type-content`
+
+
 ## Font delivery method
@@ -98,4 +117,1 @@
 - `no-js` fallback for fonts
-- `px` values to `em`s and `rem`s
-- `vw`-based variable type sizing
-- Detail vertical rhythm management - MegaType?

docs/overview/5-Changelog.md

 # Changelog
 
+- v1.1.3 (8 Mar)
+    - Homepage banner component
+    - Modal component
+    - Search via AJAX functionality
+    - Key statistics component
 - v1.1.2 (2 Mar 2018)
@@ -4,0 +9,0 @@ - Search components

docs/README.md

@@ -5,4 +5,4 @@ # Component Library Docs Folder
 
-This folder contains additional Stories to document other information for the design system. Type system, grid system, colour system, and other pages as required.
+This folder contains additional Stories to document other information for the design system. Type system, breakpoint & spacing configs, grid system, colour system, and other pages as required.
 
 TODO: How to add a docs component to the Storybook

package.json

 {
   "name": "worksafe-component-library",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A Vue.js component library for use in WorkSafe family websites",
@@ -19,3 +19,5 @@ "main": "./src/index.js",
     "Dan Laush <[e-mail]>",
-    "Feb Dao <[e-mail]>"
+    "Taylor Yates <[e-mail]>",
+    "Feb Dao <[e-mail]>",
+    "Tom Bredin-Grey <[e-mail]>"
   ],
@@ -22,0 +24,0 @@ "license": "ISC",

src/components/SubComponents/SearchBox/README.md

@@ -22,3 +22,3 @@ # Search Box
         data () {
-            query: ''
+            query: '' // This will update when the contents of the search input change
         },
@@ -25,0 +25,0 @@ components: {

src/index.js

@@ -0,4 +1,6 @@
+// container components
 import AppTheme from './components/Containers/AppTheme'
 import PageContent from './components/Containers/PageContent'
 import AppForm from './components/Containers/AppForm'
+// global components
 import AppNavigation from './components/Global/AppNavigation'
@@ -9,21 +11,40 @@ import AppFooter from './components/Global/AppFooter'
 import SearchResults from './components/Global/SearchResults'
+import HomepageHeader from './components/Global/HomepageHeader'
+import Modal from './components/Global/Modal'
+// content components
+import RichTextContent from './components/Content/RichTextContent'
+import VideoContent from './components/Content/VideoContent'
+import LinksList from './components/Content/LinksList'
+import Tasks from './components/Content/Tasks'
+import FullWidthImage from './components/Content/FullWidthImage'
+import CuratedContent from './components/Content/CuratedContent'
+import InstructionalContent from './components/Content/InstructionalContent'
+import BreakoutContent from './components/Content/BreakoutContent'
+import RelatedContent from './components/Content/RelatedContent'
+import Checklist from './components/Content/Checklist'
 
-// Containers
+// container components
 export {AppTheme}
-
-// All content components are handled inside PageContent,
-// so we don't have to export them individually
 export {PageContent}
+export {AppForm}
 
-// Global
+// global components
 export {AppNavigation}
-
 export {AppFooter}
-
-export {AppForm}
-
 export {PageHeader}
-
 export {PageSummary}
+export {SearchResults}
+export {HomepageHeader}
+export {Modal}
 
-export {SearchResults}
+// content components
+export {RichTextContent}
+export {VideoContent}
+export {LinksList}
+export {Tasks}
+export {FullWidthImage}
+export {CuratedContent}
+export {InstructionalContent}
+export {BreakoutContent}
+export {RelatedContent}
+export {Checklist}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

541582

increased by3.11%

Number of package files

152

increased by8.57%

Lines of code

1789

increased by3.77%

No dependency changes