@bbc/psammead-styles - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

CHANGELOG.md

@@ -6,2 +6,3 @@ # @bbc/psammead-styles Changelog
 |---------|-------------|
+| 1.2.0 | [PR#1234](https://github.com/bbc/psammead/pull/1234) Add custom CSS Grid feature detector |
 | 1.1.5 | [PR#1215](https://github.com/bbc/psammead/pull/1215) Fix `sans serif` typo |
@@ -8,0 +9,0 @@ | 1.1.4 | [PR#1066](https://github.com/bbc/psammead/pull/1066) Fix Serif Medium font. |

index.test.jsx

 import { testUtilityPackages } from '@bbc/psammead-test-helpers';
 import * as colours from './colours';
 import * as coloursFromSrc from './src/colours';
+import * as detection from './detection';
+import * as detectionFromSrc from './src/detection';
 import * as fonts from './fonts';
@@ -34,2 +36,6 @@ import * as fontsFromSrc from './src/fonts';
 
+const detectionExpectedExports = {
+  grid: 'string',
+};
+
 const coloursExpectedExports = {
@@ -61,2 +67,3 @@ C_EBON: 'string',
   colours: coloursExpectedExports,
+  detection: detectionExpectedExports,
   fonts: fontsExpectedExports,
@@ -67,2 +74,3 @@ };
   colours,
+  detection,
   fonts,
@@ -73,2 +81,3 @@ };
   colours: coloursFromSrc,
+  detection: detectionFromSrc,
   fonts: fontsFromSrc,
@@ -75,0 +84,0 @@ };

package.json

 {
   "name": "@bbc/psammead-styles",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "A collection of string constants for use in CSS, containing non-GEL styling details that are bespoke to specific BBC services and products.",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -8,2 +8,3 @@ # psammead-styles - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Futilities%2Fpsammead-styles%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Futilities%2Fpsammead-styles%2Fpackage.json) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-styles.svg)](https://www.npmjs.com/package/@bbc/psammead-styles) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)
 `/colours` - Project-defined colours that will be required by multiple Psammead components or themes. These colours are not defined by GEL.
+`/detection` - Project-defined CSS feature detection statements.
 `/fonts` - Project-defined browser behaviours for the Reith font. The primary reason these are not considered GEL-defined (and not part of [`@bbc/gel-foundations`](https://www.npmjs.com/package/@bbc/gel-foundations)) is due to the custom weighting and loading definitions. [More details on the font-faces defined in this package are available here.](./font-faces.md)
@@ -55,3 +56,3 @@
 
-In case you are using embeded fonts, you need to make sure you have loaded your fonts first before using the functions. If the embeded font is not loaded, the fallback font will be applied
+In case you are using embedded fonts, you need to make sure you have loaded your fonts first before using the functions. If the embedded font is not loaded, the fallback font will be applied
 
@@ -69,2 +70,21 @@ ```js
 
+### detection
+
+We have defined custom feature detection statements (using CSS `@supports` syntax) to provide workarounds for browser-specific bugs.
+
+- grid: We experienced issues using `@supports (display:grid)` from browsers with buggy CSS Grid implementations, and found that detecting on `@supports (grid-template-columns: fit-content(200px))` gave more consistent detection.
+
+```js
+import { grid } from '@bbc/psammead-styles/detection';
+
+const someGridUsingComponent = css`
+  @supports (${grid}) {
+    display: grid;
+    /* grid CSS */
+  }
+
+  /* fallback CSS */
+`;
+```
+
 ## Contributing
@@ -71,0 +91,0 @@

src/index.stories.jsx

@@ -12,2 +12,3 @@ import React from 'react';
 import * as colours from './colours';
+import { grid } from './detection';
 
@@ -40,17 +41,45 @@ const ColourContainer = styled.div`
 
-storiesOf('Utilities|Psammead Styles', module).add(
-  'colours',
-  () => (
-    <ColourContainer>
-      {Object.keys(colours).map(colour => (
-        <ColourRow key={colours[colour]}>
-          <ColourBox colour={colours[colour]}>{colours[colour]}</ColourBox>
-          <ColourValue>{colour}</ColourValue>
-        </ColourRow>
-      ))}
-    </ColourContainer>
-  ),
-  {
-    notes,
-  },
-);
+const Detects = styled.li`
+  color: red;
+  &::after {
+    content: ' = NO';
+  }
+
+  @supports (${props => props.detector}) {
+    color: green;
+    &::after {
+      content: ' = YES';
+    }
+  }
+`;
+
+const detectionExamples = ['display: grid', grid];
+
+storiesOf('Utilities|Psammead Styles', module)
+  .add(
+    'colours',
+    () => (
+      <ColourContainer>
+        {Object.keys(colours).map(colour => (
+          <ColourRow key={colours[colour]}>
+            <ColourBox colour={colours[colour]}>{colours[colour]}</ColourBox>
+            <ColourValue>{colour}</ColourValue>
+          </ColourRow>
+        ))}
+      </ColourContainer>
+    ),
+    { notes },
+  )
+  .add(
+    'CSS feature detection',
+    () => (
+      <ul>
+        {detectionExamples.map(ex => (
+          <Detects key={ex} detector={ex}>
+            <pre>@supports ({ex})</pre>
+          </Detects>
+        ))}
+      </ul>
+    ),
+    { notes },
+  );

No alert changes

Improved metrics

Total package byte prevSize

68071

increased by5.28%

Number of package files

28

increased by16.67%

Lines of code

986

increased by7.17%

Number of lines in readme file

100

increased by25%

No dependency changes