@bdt-component-library/typography - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

build/index.es.js

@@ -34,3 +34,3 @@ import { createElement } from 'react';
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 const Typography = props => {
@@ -37,0 +37,0 @@ const { id, children, className, display = "default", noBottomMargin = false, noTopMargin = false, body = "default", variant = "p" } = props;

build/index.js

@@ -38,3 +38,3 @@ 'use strict';
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 const Typography = props => {
@@ -41,0 +41,0 @@ const { id, children, className, display = "default", noBottomMargin = false, noTopMargin = false, body = "default", variant = "p" } = props;

build/tailwind.js

@@ -11,3 +11,3 @@ 'use strict';
     options: {
-      whitelist: ['html'],
+      whitelist: ["html"],
       whitelistPatterns: [
@@ -22,3 +22,3 @@ /--i--/,
         /input:focus/
-      ],
+      ]
     },
@@ -60,3 +60,3 @@ defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
       tintGreen: "rgba(40, 167, 69, 0.25)",
-      tintRed: "rgba(208, 2, 27, 0.25)",
+      tintRed: "rgba(208, 2, 27, 0.25)"
     },
@@ -75,7 +75,7 @@ fontFamily: {
     screens: {
-      'xs': '320px',
-      'sm': '640px',
-      'md': '768px',
-      'lg': '1024px',
-      'xl': '1280px'
+      xs: "320px",
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px"
     }
@@ -82,0 +82,0 @@ },

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Typography component",
@@ -27,12 +27,9 @@ "author": "BDT",
     "build": "rm -rf build && cross-env NODE_ENV=production rollup -c rollup.config.components.js && rollup -c rollup.config.tailwind.js",
-    "build:storybook": "build-storybook",
-    "create:component": "cd generator-component && yo component && cd -",
-    "lint:all": "yarn prettier && yarn tslint:check && yarn stylelint:check",
-    "prettier": "prettier --write **/*.{js,ts,tsx,css}",
-    "prettier:check": "prettier --list-different **/*.{js,ts,tsx,css}",
-    "safe-push": "yarn test && yarn lint:all && yarn build:components",
-    "start": "start-storybook -p 6006",
-    "stylelint:check": "stylelint \"**/*.css\"",
+    "lint": "yarn prettier && yarn tslint:check && yarn stylelint:check",
+    "prettier": "prettier --write *.{js,ts,tsx,css}",
+    "prettier:check": "prettier --list-different *.{js,ts,tsx,css}",
+    "safe-push": "yarn test && yarn lint:all && yarn build",
+    "stylelint:check": "stylelint \"*.css\"",
     "test": "jest",
-    "tslint:check": "tslint -c tslint.json '**/*.{ts,tsx}'"
+    "tslint:check": "tslint -c tslint.json '*.{ts,tsx}'"
   },
@@ -72,2 +69,3 @@ "husky": {
     "eslint-plugin-prefer-arrow": "^1.2.1",
+    "husky": "^4.3.6",
     "identity-obj-proxy": "^3.0.0",
@@ -74,0 +72,0 @@ "jest": "^25.1.0",

README.md

@@ -1,128 +0,23 @@
-# Benefits Data Trust Component Library
+# Typography Component
 
 ## About
 
-The BDT component library is intended to provide a solid foundation of reusable and composable UI components from which to build front end BDT applications.
+This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project [README](https://github.com/BenefitsDataTrust/ui-components/blob/develop/README.md).
 
-- By "solid," we mean that the components are highly reliable, in that breaking changes are as infrequent as possible and managed carefully with semver, and that they are well-tested and coded.
-- By "reusable," we mean that the components are intended to serve as basic building blocks that we can employ multiple times in multiple applications
-- By "composable," we mean that we keep components as small and single-purpose as possible. When each component is specific and makes very few assumptions about its use, it allows us to build larger sets out of the smaller pieces we've created.
+## Description
 
-Ex:
+Handles display of text according to typography style guide conventions.
 
-```
-<Section>
-  <List>
-    <ListItem><Link>foo</Link></ListItem>
-    <ListItem><Typography>bar</Typography></ListItem>
-    <ListItem>baz</ListItem>
-    <ListItem><Button>qux</Button></ListItem>
-  </List>
-</Section>
-```
+- https://zeroheight.com/990ea04ab/p/172ffa-typography
 
-As opposed to:
+## API
 
-```
-<Section
-  listComponent={List}
-  list={[
-    {
-      type: "link",
-      text: "foo"
-    },
-    {
-      type: "text",
-      text: "bar"
-    },
-    {
-      type: "none",
-      text: "bar"
-    },
-    {
-      type: "button",
-      text: "qux"
-    }
-    ]}
-/>
-```
-
-In the second case, the API is doing too much work to contain too much functionality. It is difficult to modify, reuse, and build larger components in unexpected ways. For example, what it we wanted to use nested sections and lists? In the first, we can mix and match at will because none of the components makes any assumptions about its children, and it is more clear how it can be used from just the basic knowledge of the component name and purpose.
-
-### Multi-package mono repo
-
-In order to allow components and packages to be updated regularly without forcing an update to the entire library (risking a lot of breakage in the process), we structure the project as a mono repo with many packages, where each component is its own package. What this means is that the components are added to package.json separately:
-
-```
-devDependencies": {
-  "@bdtrust-component-library/accordion": "^1.8.7",
-  "@bdtrust-component-library/button": "^2.0.1",
-  "@bdtrust-component-library/label": "3.5.0",
-  ...
-}
-
-import Accordion from '@bdtrust-component-library/accordion';
-import Button from '@bdtrust-component-library/button';
-import Label from '@bdtrust-component-library/label';
-```
-
-We use the [rush](https://rushjs.io) project to help manage our mono repo.
-
-See the following links for additional information and the how and why:
-- https://blog.bitsrc.io/versioning-independent-ui-components-why-and-how-7ea60d8be5f2
-- https://rushjs.io/pages/intro/why_mono/
-- https://rushjs.io/pages/intro/welcome/
-
-## First time setup
-
-1. Use only `yarn` for running scripts, in order to avoid some unexpected conflicts with different `.lock` files.
-1. Run `yarn start` to start Storybook and review components.
-1. Run `npm install g @microsoft/rush` to install rush. We use global install because rush does not like to assume the existence of a package file when doing any initial setup.
-
-- **You will likely not need to run the following. Check with project maintainers if you think you might need to run this.** If performing a fresh install, with no "common" folder, but an existing repo, `rush init --overwrite-existing` will get everything started.
-
-## Development
-
-1. If using the component generator (to create a simple scaffolding with all the right files in place), you must install yeoman globally:
-```
-npm install -g yo`
-cd src/generator-component
-npm link
-```
-1. Run `yarn create:component`. You will be prompted for the component name. Enter for instance `Accordion` (make sure it is camel cased) and the generator script will create a new component under `src` with all the right files in place (component, index file, story for storybook, test files, config files, etc.).
-1. Customize the component to your liking. It is always a good idea to have at least one test that makes sure the component actually renders (using react testing library is preferred for consistency). The index.ts should not have to be modified as it exports the component and its types only.
-1. Add the package to the "projects" array in the `rush.json` file.
-1. When adding/updating any package.json files, run `rush update`.
-
-## Styling
-
-1. The styling scaffolding is done with the help of [Tailwind CSS](https://tailwindcss.com/), a utility library that adds consistency for the design system. The configuration file is `tailwind.config.js` and contains our theme information overrides/custom values (global variables for spacing, typography etc). The default values can be found [here](https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L5).
-1. The library uses [CSS Modules](https://github.com/css-modules/css-modules) in order to scope the css.
-1. These values are imported in `src/base.css` and are shared through all components.
-1. Each component can use any of the tailwind classes with the `@apply` rule in the component's `.module.css`, along with additional css not handled by Tailwind.
-
-## Publishing (WORK IN PROGRESS)
-
-**Note:** Publishing means a number of things here:
-1. Pushing to master
-1. Pushing a new tag
-1. Create a release in github with change notes (and API documentation if it introduces a new component or updates an old one)
-1. Publishing the scoped package to npm
-
-**Note:** Before publishing packages, you must have an npm account and be added to the organization in order to publish scoped packages. If you are publishing a new scoped package, you may need to use the official BDT npm user account/email.
-
-When publishing a component, we need to make sure we are using the latest, safest code. This means that we need to have master up to date and make sure that no tests are failing.
-
-1. Make sure `develop` branch is up to date with your local changes.
-1. Run `yarn safe-commit` to run all the tests one last time.
-1. Run `git checkout master && git merge develop` to update master branch.
-1. Run `rush change` to add change notes and `rush publish` to publish packages.
-1. Once published, all changes will be updated in [public storybook](https://bdtrust-ui.netlify.com/).
-1. Make sure to update `develop` branch with release tag commit when finished publishing.
-1. Add release notes in github, as copious as necessary [Releases](https://github.com/BenefitsDataTrust/ui-components/releases) (many projects will be relying on these to determine if there are any breaking changes).
-
-## IDE Setup
-
-If needed/wanted, it is possible to configure your IDE to recognize tailwind custom atImports (@tailwind, @apply, @variants, @responsive, @screen). See this [link](https://www.meidev.co/blog/visual-studio-code-css-linting-with-tailwind/) for an example.
-
-Additionally, if using VSCode, `Tailwind CSS IntelliSense` is helpful to get name completion while developing.
+| prop      | type   | required | default | explanation  |
+|-----------|--------|----------|---------|--------------|
+| display | enum("default" | "light") | no | "default" | Changes the foreground/background color mode |
+| children | React node | yes | n/a | The text to display |
+| className | string | no | n/a | Adds an optional classname to the component |
+| id | string | no | n/a | Adds an optional id to the component |
+| variant | enum("h1", "h2", "h3", "h4", "h5", "h6", "p") | no | "p" | Changes the primary text style |
+| noBottomMargin | boolean | no | false | Adds optional bottom margin |
+| body | enum("default", "small", "smallCaps") | no | "default" | Changes text secondary styles |

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

Number of package files

13

increased by18.18%

Lines of code

209

increased by8.85%

Worsened metrics

Total package byte prevSize

24823

decreased by-17.71%

Dev dependency count

58

increased by1.75%

Number of lines in readme file

24

decreased by-81.4%

No dependency changes