@mrshmllw/smores-react 1.8.1 → 2.0.3

package/dist/colors.stories.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from './Box';
+import { Divider } from './Divider';
+import { Text } from './Text';
+import { theme } from './theme';
+const coreBrand = ['primary', 'secondary', 'white', 'black'];
+const brandBackground = ['bgPrimary', 'bgSecondary', 'bgCarbon'];
+const neutrals = ['subtext', 'outline', 'background'];
+const trafficLight = ['error', 'warning', 'agentWarning', 'success'];
+const thirdPartyBrand = [
+    'compareTheMarket',
+    'onfido',
+    'twitter',
+    'premfina',
+    'checkout',
+    'facebook',
+    'stripe',
+    'intercom',
+    'ravelin',
+];
+const ColorCard = ({ colorName }) => {
+    const hexValue = theme.colors[colorName];
+    return (React.createElement(ColorCardWrapper, { width: "180px" },
+        React.createElement(ColorBox, { colorName: colorName, width: "100%", pt: "50%" }),
+        React.createElement(Divider, null),
+        React.createElement(Box, { p: "4px 16px" },
+            React.createElement(Text, { typo: "base" }, colorName),
+            React.createElement(Text, { typo: "base-xsmall", color: "subtext" }, hexValue))));
+};
+const ColorSection = ({ title, colors }) => {
+    return (React.createElement(Box, { width: "100%" },
+        React.createElement(Box, { mb: "16px" },
+            React.createElement(Text, { typo: "header-small" }, title)),
+        React.createElement(ColorList, null, colors.map((colorName) => (React.createElement(ColorCard, { key: colorName, colorName: colorName }))))));
+};
+const ColorsPage = () => {
+    return (React.createElement(PageWrapper, null,
+        React.createElement(ColorSection, { title: "Core brand", colors: coreBrand }),
+        React.createElement(ColorSection, { title: "Brand background", colors: brandBackground }),
+        React.createElement(ColorSection, { title: "Neutrals", colors: neutrals }),
+        React.createElement(ColorSection, { title: "Traffic light", colors: trafficLight }),
+        React.createElement(ColorSection, { title: "Third party brand", colors: thirdPartyBrand })));
+};
+export default {
+    title: 'Foundation/Colors',
+    components: ColorsPage,
+};
+const Template = (args) => React.createElement(ColorsPage, Object.assign({}, args));
+export const List = Template.bind({});
+const ColorList = styled(Box) `
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 16px;
+`;
+const PageWrapper = styled(Box) `
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+`;
+const ColorCardWrapper = styled(Box) `
+  background-color: ${theme.colors.white};
+  border: 1px solid ${theme.colors.outline};
+  border-radius: 8px;
+  overflow: hidden;
+`;
+const ColorBox = styled(Box) `
+  background-color: ${({ colorName }) => theme.colors[colorName]};
+`;
+//# sourceMappingURL=colors.stories.js.map

package/dist/colors.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.stories.js","sourceRoot":"","sources":["../src/colors.stories.js"],"names":[],"mappings":"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"}

package/dist/theme.d.ts

@@ -1,58 +1,28 @@
 export declare const theme: {
     colors: {
-        black: string;
+        primary: string;
+        secondary: string;
         white: string;
-        bg2: string;
-        bg3: string;
-        bg4: string;
-        grey2: string;
-        grey3: string;
-        grey4: string;
-        grey5: string;
-        grey6: string;
-        grey7: string;
-        grey8: string;
-        pink2: string;
-        pink3: string;
-        pink4: string;
-        pink5: string;
-        pink6: string;
-        pink7: string;
-        pink8: string;
-        green2: string;
-        green3: string;
-        green4: string;
-        green5: string;
-        green6: string;
-        green7: string;
-        green8: string;
-        blue2: string;
-        blue3: string;
-        blue4: string;
-        blue5: string;
-        blue6: string;
-        blue7: string;
-        blue8: string;
-        stripe: string;
+        black: string;
+        bgPrimary: string;
+        bgSecondary: string;
+        bgCarbon: string;
+        subtext: string;
+        outline: string;
+        background: string;
+        error: string;
+        agentWarning: string;
+        warning: string;
+        success: string;
+        compareTheMarket: string;
+        onfido: string;
+        twitter: string;
         premfina: string;
-        yellow2: string;
-        yellow5: string;
-        yellow6: string;
-        yellow7: string;
-        orange4: string;
-        orange5: string;
-        orange6: string;
-        red2: string;
-        red4: string;
-        red5: string;
-        red6: string;
-        red7: string;
-        red8: string;
-        cyan5: string;
-        cyan8: string;
-        'bg-beige': string;
-        'bg-pink': string;
-        'bg-taupe': string;
+        checkout: string;
+        facebook: string;
+        stripe: string;
+        intercom: string;
+        ravelin: string;
     };
     font: {
         weight: {

package/dist/theme.js

@@ -1,68 +1,32 @@
 const colors = {
+    // Core brand
+    primary: '#FF4E75',
+    secondary: '#112035',
+    white: '#FFFFFF',
     black: '#000000',
-    white: '#ffffff',
-    // Background
-    bg2: '#F9F9F9',
-    bg3: '#F8F6F6',
-    bg4: '#F4F4F4',
-    // Grey
-    grey2: '#ECECEC',
-    grey3: '#E5E5E5',
-    grey4: '#D2D2D2',
-    grey5: '#AEAEAE',
-    grey6: '#9E9E9E',
-    grey7: '#818181',
-    grey8: '#636768',
-    // Pink
-    pink2: '#FFB2B4',
-    pink3: '#FF8A8D',
-    pink4: '#FF7695',
-    pink5: '#FF4E75',
-    pink6: '#FD5064',
-    pink7: '#E0364A',
-    pink8: '#AB1D20',
-    // Green
-    green2: '',
-    green3: '#A7D6C6',
-    green4: '',
-    green5: '#55D6AA',
-    green6: '#4CB99F',
-    green7: '#469389',
-    green8: '#16716E',
-    // Blue
-    blue2: '#ACB6D8',
-    blue3: '#94A0C6',
-    blue4: '#6F7AA0',
-    blue5: '#545E7E',
-    blue6: '#363F59',
-    blue7: '#112035',
-    blue8: '#05090E',
+    // Brand background
+    bgPrimary: '#ECD2D0',
+    bgSecondary: '#FAF3EE',
+    bgCarbon: '#09454F',
+    // Neutrals
+    subtext: '#636768',
+    outline: '#D2D2D2',
+    background: '#F4F4F4',
+    // Traffic light
+    error: '#D82C2C',
+    agentWarning: '#FF8B00',
+    warning: '#FFC400',
+    success: '#00875A',
     // Third-party brand colours
-    stripe: '#6772E5',
+    compareTheMarket: '#004A8E',
+    onfido: '#3640F5',
+    twitter: '#55ACEE',
     premfina: '#F08422',
-    // Yellow
-    yellow2: '#FFEFB5',
-    yellow5: '#FFD53C',
-    yellow6: '#F5CA47',
-    yellow7: '#E1A717',
-    // Orange
-    orange4: '#EA9C56',
-    orange5: '#E67E22',
-    orange6: '#9C5617',
-    // Red
-    red2: '#FFDCDC',
-    red4: '#D7796A',
-    red5: '#E06161',
-    red6: '#D82C2C',
-    red7: '#B52525',
-    red8: '#801A1A',
-    //Cyan
-    cyan5: '#168DA0',
-    cyan8: '#09454F',
-    // New Brand
-    'bg-beige': '#FAF3EE',
-    'bg-pink': '#ECD2D0',
-    'bg-taupe': '#D9CFC9',
+    checkout: '#56AC88',
+    facebook: '#3B5998',
+    stripe: '#6772E5',
+    intercom: '##286EFA',
+    ravelin: '#2A4AFC',
 };
 const font = {
     weight: {

package/dist/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;IACb,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAEhB,aAAa;IACb,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IAEd,OAAO;IACP,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAEhB,OAAO;IACP,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAEhB,QAAQ;IACR,MAAM,EAAE,EAAE;IACV,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,EAAE;IACV,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IAEjB,OAAO;IACP,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAEhB,4BAA4B;IAC5B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS;IAEnB,SAAS;IACT,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAElB,SAAS;IACT,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAElB,MAAM;IACN,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IAEf,MAAM;IACN,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAEhB,YAAY;IACZ,UAAU,EAAE,SAAS;IACrB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,SAAS;CACtB,CAAA;AAED,MAAM,IAAI,GAAG;IACX,MAAM,EAAE;QACN,MAAM,EAAE,GAAG;QACX,MAAM,EAAE,GAAG;QACX,IAAI,EAAE,GAAG;KACV;IACD,MAAM,EACJ,+IAA+I;CAClJ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM;IACN,IAAI;CACL,CAAA"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;IACb,aAAa;IACb,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAEhB,mBAAmB;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IAEnB,WAAW;IACX,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,SAAS;IAErB,gBAAgB;IAChB,KAAK,EAAE,SAAS;IAChB,YAAY,EAAE,SAAS;IACvB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAElB,4BAA4B;IAC5B,gBAAgB,EAAE,SAAS;IAC3B,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,MAAM,IAAI,GAAG;IACX,MAAM,EAAE;QACN,MAAM,EAAE,GAAG;QACX,MAAM,EAAE,GAAG;QACX,IAAI,EAAE,GAAG;KACV;IACD,MAAM,EACJ,+IAA+I;CAClJ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM;IACN,IAAI;CACL,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "1.8.1",
+  "version": "2.0.3",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [
@@ -50,7 +50,7 @@
     "babel-loader": "^8.1.0",
     "eslint": "^7.9.0",
     "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-jest": "^25.0.1",
+    "eslint-plugin-jest": "^26.0.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.1.2",
     "husky": "^7.0.0",
@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "date-fns": "^2.16.1",
+    "polished": "^4.1.3",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "styled-components": "^5.2.1",